fix(my-joy-beta): small fixes

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

@@ -49,7 +49,7 @@ const VerticalDivider = styled.div`
 export const Filters = ({ onResetFilters }) => (
   <Margin top={1} bottom={3}>
     <H4>Filters</H4>
-    <Flex alignCenter justifyBetween>
+    <Flex wrap alignCenter justifyBetween>
       <FormGroup type="checkbox" name="compute-optimized" field={Field}>
         <Checkbox>
           <FormLabel>
@@ -122,7 +122,8 @@ export const Package = ({
   vcpus,
   disk,
   ssd,
-  hasVms
+  hasVms,
+  sortBy
 }) => (
   <TableTr>
     <TableTd right selected={selected}>
@@ -131,16 +132,16 @@ export const Package = ({
           <Flex alignCenter>
             {GroupIcons[group]}
             <Margin left={1} right={2}>
-              <FormLabel>{name}</FormLabel>
+              <FormLabel style={{fontWeight: sortBy === 'name' ? 'bold': 'normal'}}>{name}</FormLabel>
             </Margin>
           </Flex>
         </Radio>
       </FormGroup>
     </TableTd>
-    <TableTd right selected={selected}>
+    <TableTd right selected={selected} bold={sortBy === 'memory'}>
       {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
     </TableTd>
-    <TableTd right selected={selected}>
+    <TableTd right selected={selected} bold={sortBy === 'disk'}>
       {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
       {ssd && (
         <Margin inline left={1}>
@@ -149,11 +150,11 @@ export const Package = ({
       )}
     </TableTd>
     {hasVms && (
-      <TableTd right selected={selected}>
+      <TableTd right bold={sortBy === 'vcpu'} selected={selected}>
         {vcpus}
       </TableTd>
     )}
-    <TableTd right selected={selected}>
+    <TableTd right bold={sortBy === 'price'} selected={selected}>
       {price}
     </TableTd>
   </TableTr>
@@ -236,7 +237,11 @@ export const Packages = ({
 
 export const Overview = ({ name, price, memory, vcpus, hasVms, ssd, disk, onCancel }) => (
   <Fragment>
-    <Margin bottom={2}><H3 bold noMargin>{name}</H3></Margin>
+    <Margin bottom={2}>
+      <H3 bold noMargin>
+        {name}
+      </H3>
+    </Margin>
     <Flex alignCenter>
       <span>{price} $</span>
       <VerticalDivider />

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

@@ -1,16 +1,10 @@
 import React from 'react';
 import { Field } from 'redux-form';
-import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import Flex from 'styled-flex-component';
 import { Margin } from 'styled-components-spacing';
 import remcalc from 'remcalc';
 
-import {
-  FormGroup,
-  Input,
-  FormLabel,
-  Button,
-  Divider
-} from 'joyent-ui-toolkit';
+import { FormGroup, Input, FormLabel, Button, Divider } from 'joyent-ui-toolkit';
 
 export const Toolbar = ({
   searchLabel = 'Filter',
@@ -20,30 +14,25 @@ export const Toolbar = ({
   actionable = true,
   onActionClick
 }) => (
-  <Row>
-    <Col xs={7} sm={5}>
-      <FormGroup name="filter" fluid field={Field}>
-        <FormLabel>{searchLabel}</FormLabel>
-        <Margin top={0.5}>
-          <Input placeholder={searchPlaceholder} disabled={!searchable} />
-        </Margin>
-      </FormGroup>
-    </Col>
-    <Col xs={5} sm={7}>
-      <FormGroup right>
-        <Divider height={remcalc(21)} transparent />
-        <Button
-          type={onActionClick ? 'button' : 'submit'}
-          disabled={!actionable}
-          onClick={onActionClick}
-          icon
-          fluid
-        >
-          {actionLabel}
-        </Button>
-      </FormGroup>
-    </Col>
-  </Row>
+  <Flex justifyBetween>
+    <FormGroup name="filter" field={Field}>
+      <FormLabel>{searchLabel}</FormLabel>
+      <Margin top={0.5}>
+        <Input placeholder={searchPlaceholder} disabled={!searchable} />
+      </Margin>
+    </FormGroup>
+    <FormGroup right>
+      <Divider height={remcalc(21)} transparent />
+      <Button
+        type={onActionClick ? 'button' : 'submit'}
+        disabled={!actionable}
+        onClick={onActionClick}
+        icon
+        fluid>
+        {actionLabel}
+      </Button>
+    </FormGroup>
+  </Flex>
 );
 
 export default ({ handleSubmit, ...rest }) => (

packages/my-joy-beta/src/components/key-value.js

@@ -128,6 +128,7 @@ const InputKeyValue = ({ type, submitting, onlyName, onlyValue }) => (
 );
 
 export const KeyValue = ({
+  disabled = false,
   input = 'input',
   type = 'metadata',
   method = 'add',
@@ -177,7 +178,7 @@ export const KeyValue = ({
                 </CollapsedKeyValue>
               )}
             </Meta>
-            {method === 'edit' ? (
+            {method === 'edit' && !disabled? (
               <ArrowIcon onClick={onToggleExpanded} direction={expanded ? 'up' : 'down'} />
             ) : null}
           </Flex>

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

@@ -79,6 +79,7 @@ export const Metadata = ({
               {...props}
               initialValues={{ name, value }}
               expanded={open}
+              disabled={!expanded}
               method="edit"
               input="textarea"
               type="metadata"

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

@@ -15,12 +15,7 @@ import { destroy } from 'redux-form';
 
 import { PackageIcon, StatusLoader, Button } from 'joyent-ui-toolkit';
 
-import {
-  Filters,
-  Packages,
-  Package,
-  Overview
-} from '@components/create-instance/package';
+import { Filters, Packages, Package, Overview } from '@components/create-instance/package';
 
 import Animated from '@containers/create-instance/animated';
 import Title from '@components/create-instance/title';
@@ -51,19 +46,16 @@ const PackageContainer = ({
       id={step}
       onClick={!expanded && !selected.id && handleEdit}
       collapsed={!expanded && !proceeded}
-      icon={<PackageIcon />}
-    >
+      icon={<PackageIcon />}>
       Package
     </Title>
     {expanded ? (
       <Description>
-        A package defines the specs of your instance. On Triton, packages can
-        only increase in size.{' '}
+        A package defines the specs of your instance. On Triton, packages can only increase in size.{' '}
         <a
           href="https://docs.joyent.com/private-cloud/packages"
           target="_blank"
-          rel="noopener noreferrer"
-        >
+          rel="noopener noreferrer">
           Read the docs
         </a>
       </Description>
@@ -71,20 +63,15 @@ const PackageContainer = ({
     <ReduxForm
       form={`${FORM_NAME}-filters`}
       destroyOnUnmount={false}
-      forceUnregisterOnUnmount={true}
-    >
+      forceUnregisterOnUnmount={true}>
       {props =>
-        !loading && expanded ? (
-          <Filters {...props} onResetFilters={handleResetFilters} />
-        ) : null
-      }
+        !loading && expanded ? <Filters {...props} onResetFilters={handleResetFilters} /> : null}
     </ReduxForm>
     <ReduxForm
       form={FORM_NAME}
       destroyOnUnmount={false}
       forceUnregisterOnUnmount={true}
-      onSubmit={handleNext}
-    >
+      onSubmit={handleNext}>
       {props =>
         expanded ? (
           loading ? (
@@ -96,14 +83,14 @@ const PackageContainer = ({
               sortBy={sortBy}
               sortOrder={sortOrder}
               onSortBy={handleSortBy}
-              packages={packages.length}
-            >
+              packages={packages.length}>
               {packages.map(({ id, ...pkg }) => (
                 <Package
                   key={id}
                   id={id}
                   selected={selected.id === id}
                   hasVms={hasVms}
+                  sortBy={sortBy}
                   {...pkg}
                 />
               ))}
@@ -111,8 +98,7 @@ const PackageContainer = ({
           )
         ) : selected.id ? (
           <Overview {...selected} hasVms={hasVms} onCancel={handleEdit} />
-        ) : null
-      }
+        ) : null}
     </ReduxForm>
     {expanded ? (
       !loading ? (
@@ -149,9 +135,7 @@ export default compose(
           disk: pkg.disk * 1000000,
           price: packagePrice.cost || 0,
           name: titleCase(packageName.replace(/-/g, ' ')),
-          group: constantCase(
-            pkg.group.replace(/optimized|purpose|KVM/gi, '').trim()
-          )
+          group: constantCase(pkg.group.replace(/optimized|purpose|KVM/gi, '').trim())
         };
       })
     })
@@ -163,29 +147,13 @@ export default compose(
       const _sortOrder = get(values, 'packages-list-sort-order', 'asc');
       const ssdOnly = get(form, `${FILTERS}.values.ssd`, false);
 
-      const computeOptimized = get(
-        form,
-        `${FILTERS}.values.compute-optimized`,
-        false
-      );
+      const computeOptimized = get(form, `${FILTERS}.values.compute-optimized`, false);
 
-      const generalPurpose = get(
-        form,
-        `${FILTERS}.values.general-purpose`,
-        false
-      );
+      const generalPurpose = get(form, `${FILTERS}.values.general-purpose`, false);
 
-      const storageOptimized = get(
-        form,
-        `${FILTERS}.values.storage-optimized`,
-        false
-      );
+      const storageOptimized = get(form, `${FILTERS}.values.storage-optimized`, false);
 
-      const memoryOptimized = get(
-        form,
-        `${FILTERS}.values.memory-optimized`,
-        false
-      );
+      const memoryOptimized = get(form, `${FILTERS}.values.memory-optimized`, false);
 
       const vmSelected = get(form, 'create-instance-image.values.vms', false);
       const pkgSelected = get(form, `${FORM_NAME}.values.package`, null);
@@ -196,12 +164,7 @@ export default compose(
         .filter(p => (ssdOnly ? p.ssd === ssdOnly : true))
         .filter(p => p.vm === vmSelected);
 
-      if (
-        computeOptimized ||
-        generalPurpose ||
-        storageOptimized ||
-        memoryOptimized
-      ) {
+      if (computeOptimized || generalPurpose || storageOptimized || memoryOptimized) {
         filtered = filtered.filter(
           p =>
             (memoryOptimized && p.group === 'MEMORY') ||
@@ -223,9 +186,7 @@ export default compose(
     },
     (dispatch, { history }) => ({
       handleNext: () => {
-        dispatch(
-          set({ name: 'create-instance-package-proceeded', value: true })
-        );
+        dispatch(set({ name: 'create-instance-package-proceeded', value: true }));
 
         return history.push('/instances/~create/tags');
       },