fix(my-joy-beta): fix section-list scrolling

fixes #1266

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

@@ -130,7 +130,7 @@ export const Package = ({
   sortBy,
   onRowClick
 }) => (
-  <TableTrActionable onClick={() => onRowClick({ id, selected })}>
+  <TableTrActionable onClick={() => onRowClick(id)}>
     <TableTd right selected={selected}>
       <FormGroup name="package" value={id} type="radio" field={Field} fluid>
         <Radio onBlur={null} noMargin>

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="start" />
-              <Item mutating='remove' />
+              <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="start" />
-            <Item mutating='remove' />
+            <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 = ({
+export const Item = ({ name, state, created, onStart, onRemove, mutating }) => (
-  name,
-  state,
-  created,
-  onStart,
-  onRemove,
-  mutating
-}) => (
   <TableTr>
     {!mutating ? (
       <Fragment>

packages/my-joy-beta/src/components/navigation/__tests__/__snapshots__/menu.spec.js.snap

@@ -75,7 +75,8 @@ exports[`renders <Menu links /> without throwing 1`] = `
   padding: 0.8125rem 0rem;
   margin: 1.125rem 0 0 0;
   max-height: 50px;
-  overflow-x: scroll;
+  overflow-x: auto;
+  overflow-y: hidden;
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -3394,7 +3394,7 @@ Array [
                             className="c7"
                         >
                             <span>
-                                hello—
+                                hello: 
                             </span>
                             <span>
                                 world
@@ -4563,7 +4563,7 @@ Array [
                             className="c7"
                         >
                             <span>
-                                hello2—
+                                hello2: 
                             </span>
                             <span>
                                 world2
@@ -6003,7 +6003,7 @@ Array [
                             className="c7"
                         >
                             <span>
-                                hello—
+                                hello: 
                             </span>
                             <span>
                                 world
@@ -7191,7 +7191,7 @@ Array [
                             className="c7"
                         >
                             <span>
-                                hello2—
+                                hello2: 
                             </span>
                             <span>
                                 world2

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/index.js

@@ -160,7 +160,7 @@ export default compose(
     const error = get(form, `${CREATE_FORM}.error`, null);
     const name = get(form, `${FORM_NAME}.values.name`, '');
     const image = get(form, 'create-instance-image.values.image', '');
-    const pkg = get(form, 'create-instance-package.values.package', '');
+    const pkg = get(values, 'selected-package', '');
     const networks = get(form, 'CREATE-INSTANCE-NETWORKS.values', {});
 
     const enabled =

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

@@ -239,8 +239,8 @@ export default compose(
       handleResetFilters: () => {
         dispatch(destroy(`${FORM_NAME}-filters`));
       },
-      handleRowClick: ({ id, selected }) => {
+      handleRowClick: id => {
-        dispatch(change(FORM_NAME, id, !selected));
+        dispatch(change(FORM_NAME, 'package', id));
       },
       handleSortBy: (newSortBy, sortOrder) => {
         dispatch([

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -453,7 +453,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
       className="c17"
     >
       0
-       key:value pair
+       key-value pair
       s
     </h3>
   </div>
@@ -1895,7 +1895,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
       className="c40"
     >
       0
-       key:value pair
+       key-value pair
       s
     </h3>
   </div>
@@ -2423,7 +2423,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
       className="c22"
     >
       0
-       key:value pair
+       key-value pair
       s
     </h3>
   </div>
@@ -4422,7 +4422,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
       className="c17"
     >
       3
-       key:value pair
+       key-value pair
       s
     </h3>
   </div>

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap

@@ -3624,7 +3624,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
                 className="c23"
               >
                 <span>
-                  name1:
+                  name1: 
                 </span>
                 <span>
                   value1
@@ -5159,7 +5159,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
                 className="c23"
               >
                 <span>
-                  name1:
+                  name1: 
                 </span>
                 <span>
                   value1

packages/my-joy-beta/src/containers/instances/metadata.js

@@ -79,7 +79,7 @@ export const Metadata = ({
   const _count = !_loading ? (
     <Margin bottom={4} top={addOpen && 4}>
       <H3>
-        {metadata.length} key:value pair{metadata.length === 1 ? '' : 's'}
+        {metadata.length} key-value pair{metadata.length === 1 ? '' : 's'}
       </H3>
     </Margin>
   ) : null;

packages/ui-toolkit/src/key-value/index.js

@@ -213,13 +213,9 @@ export const KeyValue = ({
                   {initialValues.name ? (
                     <Fragment>
                       {expanded ? (
-                        <span>{`${initialValues.name}${
+                        <span>{`${initialValues.name}${': '}`}</span>
-                          type === 'metadata' ? '—' : ':'
-                        }`}</span>
                       ) : (
-                        <Bold>{`${initialValues.name}${
+                        <Bold>{`${initialValues.name}${': '}`}</Bold>
-                          type === 'metadata' ? '—' : ':'
-                        }`}</Bold>
                       )}
                       <span>{initialValues.value}</span>
                     </Fragment>

packages/ui-toolkit/src/section-list/__tests__/__snapshots__/section.spec.js.snap

@@ -276,7 +276,8 @@ exports[`SectionList SectionList 1`] = `
   padding: 0.8125rem 0rem;
   margin: 1.125rem 0 0 0;
   max-height: 50px;
-  overflow-x: scroll;
+  overflow-x: auto;
+  overflow-y: hidden;
   box-sizing: border-box;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

packages/ui-toolkit/src/section-list/index.js

@@ -10,7 +10,8 @@ const UnorderedList = styled.ul`
   padding: ${remcalc(13)} ${remcalc(0)};
   margin: ${remcalc(18)} 0 0 0;
   max-height: 50px;
-  overflow-x: scroll;
+  overflow-x: auto;
+  overflow-y: hidden;
   box-sizing: border-box;
   display: inline-flex;
   position: relative;