fix(my-joy-beta): use redux-form to handle package selection (revert)

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -412,7 +412,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           checked={false}
           className="c5"
           disabled={false}
-          id="n"
+          id="m"
           onBlur={undefined}
           type="checkbox"
         >
@@ -420,25 +420,25 @@ exports[`renders <Filters /> without throwing 1`] = `
             checked={false}
             className="c6"
             disabled={false}
-            id="o"
+            id="n"
             onBlur={undefined}
             type="checkbox"
           />
           <label
             className="c7"
-            htmlFor="o"
+            htmlFor="n"
           />
         </div>
         <div
           checked={false}
           className="c8"
           disabled={false}
-          id="n"
+          id="m"
           onBlur={undefined}
         >
           <label
             className="c9"
-            htmlFor="o"
+            htmlFor="n"
           >
             <div
               className="c10"
@@ -478,7 +478,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           checked={false}
           className="c5"
           disabled={false}
-          id="p"
+          id="o"
           onBlur={undefined}
           type="checkbox"
         >
@@ -486,25 +486,25 @@ exports[`renders <Filters /> without throwing 1`] = `
             checked={false}
             className="c6"
             disabled={false}
-            id="q"
+            id="p"
             onBlur={undefined}
             type="checkbox"
           />
           <label
             className="c7"
-            htmlFor="q"
+            htmlFor="p"
           />
         </div>
         <div
           checked={false}
           className="c8"
           disabled={false}
-          id="p"
+          id="o"
           onBlur={undefined}
         >
           <label
             className="c9"
-            htmlFor="q"
+            htmlFor="p"
           >
             <div
               className="c10"
@@ -544,7 +544,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           checked={false}
           className="c5"
           disabled={false}
-          id="r"
+          id="q"
           onBlur={undefined}
           type="checkbox"
         >
@@ -552,25 +552,25 @@ exports[`renders <Filters /> without throwing 1`] = `
             checked={false}
             className="c6"
             disabled={false}
-            id="s"
+            id="r"
             onBlur={undefined}
             type="checkbox"
           />
           <label
             className="c7"
-            htmlFor="s"
+            htmlFor="r"
           />
         </div>
         <div
           checked={false}
           className="c8"
           disabled={false}
-          id="r"
+          id="q"
           onBlur={undefined}
         >
           <label
             className="c9"
-            htmlFor="s"
+            htmlFor="r"
           >
             <div
               className="c10"
@@ -610,7 +610,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           checked={false}
           className="c5"
           disabled={false}
-          id="t"
+          id="s"
           onBlur={undefined}
           type="checkbox"
         >
@@ -618,25 +618,25 @@ exports[`renders <Filters /> without throwing 1`] = `
             checked={false}
             className="c6"
             disabled={false}
-            id="u"
+            id="t"
             onBlur={undefined}
             type="checkbox"
           />
           <label
             className="c7"
-            htmlFor="u"
+            htmlFor="t"
           />
         </div>
         <div
           checked={false}
           className="c8"
           disabled={false}
-          id="t"
+          id="s"
           onBlur={undefined}
         >
           <label
             className="c9"
-            htmlFor="u"
+            htmlFor="t"
           >
             <div
               className="c10"
@@ -683,7 +683,7 @@ exports[`renders <Filters /> without throwing 1`] = `
           checked={false}
           className="c5"
           disabled={false}
-          id="v"
+          id="u"
           onBlur={undefined}
           type="checkbox"
         >
@@ -691,25 +691,25 @@ exports[`renders <Filters /> without throwing 1`] = `
             checked={false}
             className="c6"
             disabled={false}
-            id="w"
+            id="v"
             onBlur={undefined}
             type="checkbox"
           />
           <label
             className="c7"
-            htmlFor="w"
+            htmlFor="v"
           />
         </div>
         <div
           checked={false}
           className="c8"
           disabled={false}
-          id="v"
+          id="u"
           onBlur={undefined}
         >
           <label
             className="c9"
-            htmlFor="w"
+            htmlFor="v"
           >
             SSD
           </label>
@@ -1157,41 +1157,41 @@ exports[`renders <Package /> without throwing 1`] = `
   >
     <div
       className="baseline-jVaZNU kXgQxt c3"
+      name="package"
       role="group"
       style={undefined}
+      type="radio"
+      value={undefined}
     >
       <li
-        checked={false}
         className="c4"
         disabled={false}
         onBlur={null}
       >
         <div
-          checked={false}
           className="c5"
           disabled={false}
-          id="l"
+          id="k"
           onBlur={null}
           type="radio"
         >
           <input
-            checked={false}
+            checked={undefined}
             className="c6"
             disabled={false}
-            id="m"
+            id="l"
             onBlur={null}
             type="radio"
           />
           <label
             className="c7"
-            htmlFor="m"
+            htmlFor="l"
           />
         </div>
         <div
-          checked={false}
           className="c8"
           disabled={false}
-          id="l"
+          id="k"
           onBlur={null}
         >
           <div
@@ -1202,7 +1202,7 @@ exports[`renders <Package /> without throwing 1`] = `
             >
               <label
                 className="c11"
-                htmlFor="m"
+                htmlFor="l"
                 style={
                   Object {
                     "fontWeight": "normal",

packages/my-joy-beta/src/components/create-instance/package.js

@@ -128,12 +128,12 @@ export const Package = ({
   ssd,
   hasVms,
   sortBy,
-  selectPackage
+  onRowClick
 }) => (
-  <TableTrActionable onClick={() => selectPackage(id)}>
+  <TableTrActionable onClick={() => onRowClick({ id, selected })}>
     <TableTd right selected={selected}>
-      <FormGroup fluid>
-        <Radio checked={selected} onBlur={null} noMargin>
+      <FormGroup name="package" value={id} type="radio" field={Field} fluid>
+        <Radio onBlur={null} noMargin>
           <Flex alignCenter>
             {GroupIcons[group]}
             <Margin left={1} right={2}>

packages/my-joy-beta/src/containers/create-instance/package.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import { compose, graphql } from 'react-apollo';
 import ReduxForm from 'declarative-redux-form';
+import { destroy, change } from 'redux-form';
 import { connect } from 'react-redux';
 import titleCase from 'title-case';
 import get from 'lodash.get';
@@ -11,7 +12,6 @@ import find from 'lodash.find';
 import includes from 'lodash.includes';
 import reverse from 'lodash.reverse';
 import constantCase from 'constant-case';
-import { destroy } from 'redux-form';
 
 import { PackageIcon, StatusLoader, Button } from 'joyent-ui-toolkit';
 
@@ -40,11 +40,11 @@ const PackageContainer = ({
   packages,
   selected = {},
   sortOrder,
+  handleRowClick,
   handleResetFilters,
   handleSortBy,
   sortBy,
-  step,
-  selectPackage
+  step
 }) => (
   <Fragment>
     <Title
@@ -100,11 +100,11 @@ const PackageContainer = ({
             >
               {packages.map(({ id, ...pkg }) => (
                 <Package
-                  selectPackage={selectPackage}
                   key={id}
                   id={id}
                   selected={selected.id === id}
                   hasVms={hasVms}
+                  onRowClick={handleRowClick}
                   sortBy={sortBy}
                   {...pkg}
                 />
@@ -189,7 +189,7 @@ export default compose(
       );
 
       const vmSelected = get(form, 'create-instance-vms.values.vms', false);
-      const pkgSelected = get(values, `package-selectected`, null);
+      const pkgSelected = get(form, `${FORM_NAME}.values.package`, null);
       const selected = find(packages, ['id', pkgSelected]);
 
       const sorted = sortBy(packages, [_sortBy]);
@@ -231,14 +231,14 @@ export default compose(
 
         return history.push(`/~create/tags${history.location.search}`);
       },
-      selectPackage: id => {
-        dispatch(set({ name: 'package-selectected', value: id }));
-      },
       handleEdit: () =>
         history.push(`/~create/package${history.location.search}`),
       handleResetFilters: () => {
         dispatch(destroy(`${FORM_NAME}-filters`));
       },
+      handleRowClick: ({ id, selected }) => {
+        dispatch(change(FORM_NAME, id, !selected));
+      },
       handleSortBy: (newSortBy, sortOrder) => {
         dispatch([
           set({
@@ -253,4 +253,4 @@ export default compose(
       }
     })
   )
-)(PackageContainer);
+)(PackageContainer);

yarn.lock

@@ -2923,8 +2923,8 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
 copy-webpack-plugin@^4.3.0:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.4.1.tgz#1e8c366211db6dc2ddee40e5a3e4fc661dd149e8"
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-4.4.2.tgz#c92bcd7df4d5e42c51398cc36b23820d0d10446a"
   dependencies:
     cacache "^10.0.1"
     find-cache-dir "^1.0.0"
@@ -11047,8 +11047,8 @@ uglifyjs-webpack-plugin@^0.4.6:
     webpack-sources "^1.0.1"
 
 uglifyjs-webpack-plugin@^1.1.6:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.0.tgz#f706fa4c655000a086b4a97c7d835ed0f6e9b0ef"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.1.tgz#e72ae01a31028b198b4631ec98da997dc3386fa2"
   dependencies:
     cacache "^10.0.1"
     find-cache-dir "^1.0.0"
@@ -11975,8 +11975,8 @@ yauzl@2.4.1:
     fd-slicer "~1.0.1"
 
 zen-observable-ts@^0.8.6:
-  version "0.8.6"
-  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.6.tgz#2fe8c5f5f6171484353c3c93a71355c9521d53a0"
+  version "0.8.7"
+  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.7.tgz#69a1614e9c8dc6617bb9f4d402ef577ff183d009"
   dependencies:
     zen-observable "^0.8.6"