fix(my-joy-beta): fix scrolling

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

@@ -130,9 +130,10 @@ export const Package = ({
   sortBy,
   onRowClick
 }) => (
-  <TableTrActionable onClick={() => onRowClick({ id, selected })}>
+  <TableTrActionable onClick={() => onRowClick(id)}>
     <TableTd right selected={selected}>
-        <Radio onBlur={null} noMargin checked={selected}>
+      <FormGroup name="package" value={id} type="radio" field={Field} fluid>
+        <Radio onBlur={null} noMargin>
           <Flex alignCenter>
             {GroupIcons[group]}
             <Margin left={1} right={2}>
@@ -144,6 +145,7 @@ export const Package = ({
             </Margin>
           </Flex>
         </Radio>
+      </FormGroup>
     </TableTd>
     <TableTd right selected={selected} bold={sortBy === 'memory'}>
       {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}

packages/my-joy-beta/src/components/instances/__tests__/snapshots.spec.js

@@ -25,8 +25,8 @@ it('renders <Item mutating /> without throwing', () => {
         <Theme>
           <Table>
             <TableTbody>
-              <Item mutating='start' />
-              <Item mutating='remove' />
+              <Item mutating="start" />
+              <Item mutating="remove" />
             </TableTbody>
           </Table>
         </Theme>

packages/my-joy-beta/src/components/instances/__tests__/snapshots.ui.js

@@ -26,8 +26,8 @@ it('<Item mutating />', async () => {
       <Theme ss>
         <Table>
           <TableTbody>
-            <Item mutating='start' />
-            <Item mutating='remove' />
+            <Item mutating="start" />
+            <Item mutating="remove" />
           </TableTbody>
         </Table>
       </Theme>

packages/my-joy-beta/src/components/instances/snapshots.js

@@ -35,14 +35,7 @@ const loadingState = {
   remove: 'Removing...'
 };
 
-export const Item = ({
-  name,
-  state,
-  created,
-  onStart,
-  onRemove,
-  mutating
-}) => (
+export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
   <TableTr>
     {!mutating ? (
       <Fragment>

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

@@ -20,7 +20,7 @@ const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
 
 const RULE_DEFAULTS = {
   'rule-instance-name': '',
-  'rule-instance-conditional': 'must',
+  'rule-instance-conditional': 'should',
   'rule-instance-placement': 'same',
   'rule-instance-tag-key-pattern': 'equalling',
   'rule-instance-tag-value-pattern': 'equalling',

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

@@ -76,7 +76,8 @@ const PackageContainer = ({
       {props =>
         !loading && expanded ? (
           <Filters {...props} onResetFilters={handleResetFilters} />
-        ) : null}
+        ) : null
+      }
     </ReduxForm>
     <ReduxForm
       form={FORM_NAME}
@@ -112,7 +113,8 @@ const PackageContainer = ({
           )
         ) : selected.id ? (
           <Overview {...selected} hasVms={hasVms} onCancel={handleEdit} />
-        ) : null}
+        ) : null
+      }
     </ReduxForm>
     {expanded ? (
       !loading ? (
@@ -190,11 +192,9 @@ export default compose(
       );
 
       const vmSelected = get(form, 'create-instance-vms.values.vms', false);
-      const pkgSelected = get(values, `selected-package`, null);
+      const pkgSelected = get(form, `${FORM_NAME}.values.package`, null);
       const selected = find(packages, ['id', pkgSelected]);
 
-      console.log(pkgSelected);
-
       const sorted = sortBy(packages, [_sortBy]);
 
       let filtered = sorted
@@ -239,11 +239,8 @@ export default compose(
       handleResetFilters: () => {
         dispatch(destroy(`${FORM_NAME}-filters`));
       },
-      handleRowClick: ({ id }) => {
-        dispatch(set({
-          name: 'selected-package',
-          value: id
-        }));
+      handleRowClick: id => {
+        dispatch(change(FORM_NAME, 'package', id));
       },
       handleSortBy: (newSortBy, sortOrder) => {
         dispatch([