fix(my-joy-beta): fix multiple bugs

fixes #1208
2018-02-23 15:59:12 +00:00 · 2018-02-23 15:59:12 +00:00 · 9e67c3ab67
commit 9e67c3ab67
parent ef61bbce61
55 changed files with 5679 additions and 5314 deletions
--- a/packages/logos/src/node.js
+++ b/packages/logos/src/node.js
@ -8,12 +8,6 @@ export default props => (
    {...props}
  >
    <defs>
-      <style
-        dangerouslySetInnerHTML={{
-          __html:
-            '.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#1b3240;opacity:0.66;isolation:isolate;}.cls-3{fill:url(#linear-gradient-2);}'
-        }}
-      />
      <linearGradient
        id="linear-gradient"
        y1="225.5"
@ -43,16 +37,15 @@ export default props => (
      <g id="svg4300">
        <path
          id="_Path_"
-          data-name="<Path>"
-          className="cls-1"
+          style={{ fill: 'url(#linear-gradient)' }}
          d="M14.2.3a1.53,1.53,0,0,1,1.6,0L29.2,8A1.6,1.6,0,0,1,30,9.4V24.9a1.6,1.6,0,0,1-.8,1.4L15.8,34a1.53,1.53,0,0,1-1.6,0L.8,26.3A1.6,1.6,0,0,1,0,24.9V9.4A1.6,1.6,0,0,1,.8,8Z"
        />
        <path
-          className="cls-2"
+          style={{ fill: ' #1b3240', opacity: 0.66, isolation: 'isolate' }}
          d="M28.8,8,15.5.2c-.1-.1-.3-.1-.4-.2L0,25.8a1,1,0,0,0,.5.4l13.4,7.7a1.5,1.5,0,0,0,1.3.1L29.3,8.2C29.1,8.2,29,8.1,28.8,8Z"
        />
        <path
-          className="cls-3"
+          style={{ fill: 'url(#linear-gradient-2)' }}
          d="M15.9,34l13.4-7.7a1.51,1.51,0,0,0,.7-1.4v-.1L15.6.1a1.53,1.53,0,0,0-1.3.2L1.1,7.9,15.5,34.1C15.6,34.1,15.7,34,15.9,34Z"
        />
      </g>
--- a/packages/my-joy-beta/package.json
+++ b/packages/my-joy-beta/package.json
@ -18,7 +18,7 @@
  },
  "dependencies": {
    "@manaflair/redux-batch": "^0.1.0",
-    "apollo": "^0.2.2",
+    "apollo": "0.2.2",
    "apr-intercept": "^3.0.3",
    "babel-preset-joyent-portal": "^6.0.3",
    "bytes": "^3.0.0",
@ -27,6 +27,7 @@
    "date-fns": "^1.29.0",
    "declarative-redux-form": "^2.0.8",
    "execa": "^0.9.0",
+    "fuse.js": "^3.2.0",
    "inert": "^5.1.0",
    "joyent-logo-assets": "^1.0.0",
    "joyent-manifest-editor": "^1.4.0",
@ -47,7 +48,6 @@
    "lodash.sortby": "^4.7.0",
    "lodash.uniqby": "^4.7.0",
    "lodash.values": "^4.3.0",
-    "lunr": "^2.1.5",
    "normalized-styled-components": "^1.0.18",
    "param-case": "^2.1.1",
    "prop-types": "^15.6.0",
--- a/packages/my-joy-beta/src/components/tests/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png
+++ b/packages/my-joy-beta/src/components/tests/__image_snapshots__/key-value-ui-js-key-value-submitting-1-snap.png
--- a/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-2-snap.png
+++ b/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-2-snap.png
--- a/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-3-snap.png
+++ b/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-3-snap.png
--- a/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-4-snap.png
+++ b/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-4-snap.png
--- a/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-fabric-1-snap.png
+++ b/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-fabric-1-snap.png
--- a/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-fabric-2-snap.png
+++ b/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-fabric-2-snap.png
--- a/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-public-2-snap.png
+++ b/packages/my-joy-beta/src/components/tests/__image_snapshots__/network-ui-js-network-network-public-2-snap.png
--- a/packages/my-joy-beta/src/components/tests/snapshots/firewall.spec.js.snap
+++ b/packages/my-joy-beta/src/components/tests/snapshots/firewall.spec.js.snap
@ -5675,6 +5675,15 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
  box-shadow: none;
 }

+.c4:checked + label {
+  background: rgb(250,250,250);
+  border: 0.0625rem solid rgb(216,216,216);
+}
+
+.c4:checked + label:after {
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
 .c5 {
  outline: 0;
  display: block;
--- a/packages/my-joy-beta/src/components/create-instance/tests/__image_snapshots__/package-ui-js-overview-1-snap.png
+++ b/packages/my-joy-beta/src/components/create-instance/tests/__image_snapshots__/package-ui-js-overview-1-snap.png
--- a/packages/my-joy-beta/src/components/create-instance/tests/__image_snapshots__/package-ui-js-overview-has-vms-1-snap.png
+++ b/packages/my-joy-beta/src/components/create-instance/tests/__image_snapshots__/package-ui-js-overview-has-vms-1-snap.png
--- a/packages/my-joy-beta/src/components/create-instance/tests/snapshots/affinity.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/tests/snapshots/affinity.spec.js.snap
@ -302,6 +302,7 @@ exports[`renders <Rule/> without throwing 1`] = `
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
+  pointer-events: none;
 }

 .c4:after {
@ -336,6 +337,7 @@ exports[`renders <Rule/> without throwing 1`] = `
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
+  pointer-events: none;
 }

 .c9:after {
@ -1162,6 +1164,7 @@ exports[`renders <Rule/> without throwing 2`] = `
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
+  pointer-events: none;
 }

 .c4:after {
@ -1196,6 +1199,7 @@ exports[`renders <Rule/> without throwing 2`] = `
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
+  pointer-events: none;
 }

 .c9:after {
--- a/packages/my-joy-beta/src/components/create-instance/tests/snapshots/images.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/tests/snapshots/images.spec.js.snap
@ -212,6 +212,7 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
+  pointer-events: none;
 }

 .c9 {
--- a/packages/my-joy-beta/src/components/create-instance/tests/snapshots/package.spec.js.snap
+++ b/packages/my-joy-beta/src/components/create-instance/tests/snapshots/package.spec.js.snap
@ -281,6 +281,7 @@ exports[`renders <Filters /> without throwing 1`] = `
  font-weight: 600;
  white-space: pre;
  font-size: 0.8125rem;
+  cursor: pointer;
 }

 .c1 {
@ -411,7 +412,7 @@ exports[`renders <Filters /> without throwing 1`] = `
          checked={false}
          className="c5"
          disabled={false}
-          id="m"
+          id="n"
          onBlur={undefined}
          type="checkbox"
        >
@ -419,25 +420,25 @@ exports[`renders <Filters /> without throwing 1`] = `
            checked={false}
            className="c6"
            disabled={false}
-            id="n"
+            id="o"
            onBlur={undefined}
            type="checkbox"
          />
          <label
            className="c7"
-            htmlFor="n"
+            htmlFor="o"
          />
        </div>
        <div
          checked={false}
          className="c8"
          disabled={false}
-          id="m"
+          id="n"
          onBlur={undefined}
        >
          <label
            className="c9"
-            htmlFor="n"
+            htmlFor="o"
          >
            <div
              className="c10"
@ -477,7 +478,7 @@ exports[`renders <Filters /> without throwing 1`] = `
          checked={false}
          className="c5"
          disabled={false}
-          id="o"
+          id="p"
          onBlur={undefined}
          type="checkbox"
        >
@ -485,25 +486,25 @@ exports[`renders <Filters /> without throwing 1`] = `
            checked={false}
            className="c6"
            disabled={false}
-            id="p"
+            id="q"
            onBlur={undefined}
            type="checkbox"
          />
          <label
            className="c7"
-            htmlFor="p"
+            htmlFor="q"
          />
        </div>
        <div
          checked={false}
          className="c8"
          disabled={false}
-          id="o"
+          id="p"
          onBlur={undefined}
        >
          <label
            className="c9"
-            htmlFor="p"
+            htmlFor="q"
          >
            <div
              className="c10"
@ -543,7 +544,7 @@ exports[`renders <Filters /> without throwing 1`] = `
          checked={false}
          className="c5"
          disabled={false}
-          id="q"
+          id="r"
          onBlur={undefined}
          type="checkbox"
        >
@ -551,25 +552,25 @@ exports[`renders <Filters /> without throwing 1`] = `
            checked={false}
            className="c6"
            disabled={false}
-            id="r"
+            id="s"
            onBlur={undefined}
            type="checkbox"
          />
          <label
            className="c7"
-            htmlFor="r"
+            htmlFor="s"
          />
        </div>
        <div
          checked={false}
          className="c8"
          disabled={false}
-          id="q"
+          id="r"
          onBlur={undefined}
        >
          <label
            className="c9"
-            htmlFor="r"
+            htmlFor="s"
          >
            <div
              className="c10"
@ -609,7 +610,7 @@ exports[`renders <Filters /> without throwing 1`] = `
          checked={false}
          className="c5"
          disabled={false}
-          id="s"
+          id="t"
          onBlur={undefined}
          type="checkbox"
        >
@ -617,25 +618,25 @@ exports[`renders <Filters /> without throwing 1`] = `
            checked={false}
            className="c6"
            disabled={false}
-            id="t"
+            id="u"
            onBlur={undefined}
            type="checkbox"
          />
          <label
            className="c7"
-            htmlFor="t"
+            htmlFor="u"
          />
        </div>
        <div
          checked={false}
          className="c8"
          disabled={false}
-          id="s"
+          id="t"
          onBlur={undefined}
        >
          <label
            className="c9"
-            htmlFor="t"
+            htmlFor="u"
          >
            <div
              className="c10"
@ -682,7 +683,7 @@ exports[`renders <Filters /> without throwing 1`] = `
          checked={false}
          className="c5"
          disabled={false}
-          id="u"
+          id="v"
          onBlur={undefined}
          type="checkbox"
        >
@ -690,25 +691,25 @@ exports[`renders <Filters /> without throwing 1`] = `
            checked={false}
            className="c6"
            disabled={false}
-            id="v"
+            id="w"
            onBlur={undefined}
            type="checkbox"
          />
          <label
            className="c7"
-            htmlFor="v"
+            htmlFor="w"
          />
        </div>
        <div
          checked={false}
          className="c8"
          disabled={false}
-          id="u"
+          id="v"
          onBlur={undefined}
        >
          <label
            className="c9"
-            htmlFor="v"
+            htmlFor="w"
          >
            SSD
          </label>
@ -743,7 +744,6 @@ Array [
  line-height: 1.625rem;
  font-size: 1.3125rem;
  margin: 0;
-  font-weight: 600;
 }

 <div
@ -833,7 +833,6 @@ Array [
  line-height: 1.625rem;
  font-size: 1.3125rem;
  margin: 0;
-  font-weight: 600;
 }

 <div
@ -922,12 +921,12 @@ Array [
 `;

 exports[`renders <Package /> without throwing 1`] = `
-.c9 {
+.c10 {
  margin-right: 0.75rem;
  margin-left: 0.375rem;
 }

-.c8 {
+.c9 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
@ -951,7 +950,7 @@ exports[`renders <Package /> without throwing 1`] = `
  align-items: center;
 }

-.c5 {
+.c6 {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
@ -961,60 +960,60 @@ exports[`renders <Package /> without throwing 1`] = `
  display: none;
 }

-.c5[type='checkbox'],
-.c5[type='radio'] {
+.c6[type='checkbox'],
+.c6[type='radio'] {
  box-sizing: border-box;
  padding: 0;
 }

-.c5[type='number']::-webkit-inner-spin-button,
-.c5[type='number']::-webkit-outer-spin-button {
+.c6[type='number']::-webkit-inner-spin-button,
+.c6[type='number']::-webkit-outer-spin-button {
  height: auto;
 }

-.c5[type='search'] {
+.c6[type='search'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  outline-offset: -0.125rem;
 }

-.c5[type='search']::-webkit-search-cancel-button,
-.c5[type='search']::-webkit-search-decoration {
+.c6[type='search']::-webkit-search-cancel-button,
+.c6[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
 }

-.c5::-webkit-file-upload-button {
+.c6::-webkit-file-upload-button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  font: inherit;
 }

-.c5:checked + label::after {
+.c6:checked + label::after {
  opacity: 1;
 }

-.c5:selected + label::after {
+.c6:selected + label::after {
  opacity: 1;
 }

-.c5:checked + label {
+.c6:checked + label {
  border-color: rgb(59,70,204);
 }

-.c5:selected + label {
+.c6:selected + label {
  border-color: rgb(59,70,204);
 }

-.c5:disabled + label {
+.c6:disabled + label {
  background-color: rgb(249,249,249);
  cursor: not-allowed;
 }

-.c10 {
+.c11 {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  font-style: normal;
@ -1028,7 +1027,7 @@ exports[`renders <Package /> without throwing 1`] = `
  font-size: 0.8125rem;
 }

-.c6 {
+.c7 {
  color: rgb(100,100,100);
  position: absolute;
  width: 1.125rem;
@ -1046,7 +1045,7 @@ exports[`renders <Package /> without throwing 1`] = `
  border-radius: 50%;
 }

-.c6::after {
+.c7::after {
  opacity: 0;
  content: '';
  position: absolute;
@ -1061,7 +1060,7 @@ exports[`renders <Package /> without throwing 1`] = `
  transform: translateX(-50%) translateY(-50%);
 }

-.c4 {
+.c5 {
  display: inline-block;
  vertical-align: text-bottom;
  width: 1.125rem;
@ -1070,11 +1069,11 @@ exports[`renders <Package /> without throwing 1`] = `
  cursor: pointer;
 }

-.c7 {
+.c8 {
  margin-left: 0.75rem;
 }

-.c2 {
+.c3 {
  display: inline-block;
  margin: 0;
  padding: 0;
@ -1090,7 +1089,7 @@ exports[`renders <Package /> without throwing 1`] = `
  width: 100%;
 }

-.c3 {
+.c4 {
  list-style-type: none;
  display: -webkit-box;
  display: -webkit-flex;
@ -1102,7 +1101,7 @@ exports[`renders <Package /> without throwing 1`] = `
  align-items: center;
 }

-.c1 {
+.c2 {
  border-width: 0.0625rem;
  border-style: solid;
  border-color: rgb(216,216,216);
@ -1115,15 +1114,15 @@ exports[`renders <Package /> without throwing 1`] = `
  border-bottom-width: 0;
 }

-.c1:not(:first-child) {
+.c2:not(:first-child) {
  border-left-width: 0;
 }

-.c1:not(:last-child) {
+.c2:not(:last-child) {
  border-right-width: 0;
 }

-.c0 {
+.c1 {
  display: table-row;
  color: rgba(73,73,73,1);
  background-color: rgb(255,255,255);
@ -1131,74 +1130,79 @@ exports[`renders <Package /> without throwing 1`] = `
  box-sizing: border-box;
 }

-.c0:last-child {
+.c1:last-child {
  box-shadow: none;
 }

-.c0:last-child td {
+.c1:last-child td {
  border-bottom-width: 0.0625rem;
 }

+.c0 {
+  cursor: pointer;
+}
+
 <tr
-  className="c0"
+  className="c0 c1"
  disabled={undefined}
  name="tr"
+  onClick={[Function]}
  selected={undefined}
 >
  <td
-    className="c1"
+    className="c2"
    disabled={undefined}
    name="td"
    selected={false}
  >
    <div
-      className="baseline-jVaZNU kXgQxt c2"
-      name="package"
+      className="baseline-jVaZNU kXgQxt c3"
      role="group"
      style={undefined}
-      type="radio"
-      value={undefined}
    >
      <li
-        className="c3"
+        checked={false}
+        className="c4"
        disabled={false}
        onBlur={null}
      >
        <div
-          className="c4"
-          disabled={false}
-          id="k"
-          onBlur={null}
-          type="radio"
-        >
-          <input
-            checked={undefined}
+          checked={false}
          className="c5"
          disabled={false}
          id="l"
          onBlur={null}
          type="radio"
+        >
+          <input
+            checked={false}
+            className="c6"
+            disabled={false}
+            id="m"
+            onBlur={null}
+            type="radio"
          />
          <label
-            className="c6"
-            htmlFor="l"
+            className="c7"
+            htmlFor="m"
          />
        </div>
        <div
-          className="c7"
-          disabled={false}
-          id="k"
-          onBlur={null}
-        >
-          <div
+          checked={false}
          className="c8"
+          disabled={false}
+          id="l"
+          onBlur={null}
        >
          <div
            className="c9"
          >
-              <label
+            <div
              className="c10"
-                htmlFor="l"
+            >
+              <label
+                className="c11"
+                htmlFor="m"
                style={
                  Object {
                    "fontWeight": "normal",
@ -1214,7 +1218,7 @@ exports[`renders <Package /> without throwing 1`] = `
    </div>
  </td>
  <td
-    className="c1"
+    className="c2"
    disabled={undefined}
    name="td"
    selected={false}
@ -1222,7 +1226,7 @@ exports[`renders <Package /> without throwing 1`] = `
    1
  </td>
  <td
-    className="c1"
+    className="c2"
    disabled={undefined}
    name="td"
    selected={false}
@ -1230,7 +1234,7 @@ exports[`renders <Package /> without throwing 1`] = `
    1
  </td>
  <td
-    className="c1"
+    className="c2"
    disabled={undefined}
    name="td"
    selected={false}
--- a/packages/my-joy-beta/src/components/create-instance/image.js
+++ b/packages/my-joy-beta/src/components/create-instance/image.js
@ -6,7 +6,6 @@ import { Margin } from 'styled-components-spacing';
 import Flex from 'styled-flex-component';
 import pascalCase from 'pascal-case';
 import titleCase from 'title-case';
-import includes from 'lodash.includes';
 import remcalc from 'remcalc';

 import {
@ -37,7 +36,7 @@ const Version = styled(Select)`
 export const Preview = ({ name, version, isVm }) => (
  <Fragment>
    <Margin bottom={2} top={3}>
-      <H3 bold>
+      <H3>
        {name} - {version}
      </H3>
      <P>{isVm ? 'Hardware Virtual Machine' : 'Infrastructure Container'} </P>
--- a/packages/my-joy-beta/src/components/create-instance/package.js
+++ b/packages/my-joy-beta/src/components/create-instance/package.js
@ -46,13 +46,17 @@ const VerticalDivider = styled.div`
  box-sizing: border-box;
 `;

+const TableTrActionable = styled(TableTr)`
+  cursor: pointer;
+`;
+
 export const Filters = ({ onResetFilters }) => (
  <Margin top={1} bottom={3}>
    <H4>Filters</H4>
    <Flex wrap alignCenter justifyBetween>
      <FormGroup type="checkbox" name="compute-optimized" field={Field}>
        <Checkbox>
-          <FormLabel>
+          <FormLabel actionable>
            <Flex alignCenter>
              {GroupIcons.COMPUTE}
              <Margin right={1} left={1}>
@ -64,7 +68,7 @@ export const Filters = ({ onResetFilters }) => (
      </FormGroup>
      <FormGroup type="checkbox" name="memory-optimized" field={Field}>
        <Checkbox>
-          <FormLabel>
+          <FormLabel actionable>
            <Flex alignCenter>
              {GroupIcons.MEMORY}
              <Margin left={1} right={2}>
@ -76,7 +80,7 @@ export const Filters = ({ onResetFilters }) => (
      </FormGroup>
      <FormGroup type="checkbox" name="general-purpose" field={Field}>
        <Checkbox>
-          <FormLabel>
+          <FormLabel actionable>
            <Flex alignCenter>
              {GroupIcons.GENERAL}
              <Margin left={1} right={2}>
@ -88,7 +92,7 @@ export const Filters = ({ onResetFilters }) => (
      </FormGroup>
      <FormGroup type="checkbox" name="storage-optimized" field={Field}>
        <Checkbox>
-          <FormLabel>
+          <FormLabel actionable>
            <Flex alignCenter>
              {GroupIcons.STORAGE}
              <Margin left={1} right={2}>
@ -100,7 +104,7 @@ export const Filters = ({ onResetFilters }) => (
      </FormGroup>
      <FormGroup type="checkbox" name="ssd" field={Field}>
        <Checkbox>
-          <FormLabel>SSD</FormLabel>
+          <FormLabel actionable>SSD</FormLabel>
        </Checkbox>
      </FormGroup>
    </Flex>
@ -123,12 +127,13 @@ export const Package = ({
  disk,
  ssd,
  hasVms,
-  sortBy
+  sortBy,
+  selectPackage
 }) => (
-  <TableTr>
+  <TableTrActionable onClick={() => selectPackage(id)}>
    <TableTd right selected={selected}>
-      <FormGroup name="package" value={id} type="radio" field={Field} fluid>
-        <Radio onBlur={null} noMargin>
+      <FormGroup fluid>
+        <Radio checked={selected} onBlur={null} noMargin>
          <Flex alignCenter>
            {GroupIcons[group]}
            <Margin left={1} right={2}>
@ -161,7 +166,7 @@ export const Package = ({
    <TableTd right bold={sortBy === 'price'} selected={selected}>
      {price}
    </TableTd>
-  </TableTr>
+  </TableTrActionable>
 );

 export const Packages = ({
@ -258,9 +263,7 @@ export const Overview = ({
 }) => (
  <Fragment>
    <Margin bottom={2}>
-      <H3 bold noMargin>
-        {name}
-      </H3>
+      <H3 noMargin>{name}</H3>
    </Margin>
    <Flex alignCenter>
      <span>{price} $</span>
--- a/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/list-ui-js-instance-list-sort-by-sort-order-1-snap.png
+++ b/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/list-ui-js-instance-list-sort-by-sort-order-1-snap.png
--- a/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/list-ui-js-instance-list-sort-by-sort-order-2-snap.png
+++ b/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/list-ui-js-instance-list-sort-by-sort-order-2-snap.png
--- a/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/list-ui-js-instance-list-submitting-2-snap.png
+++ b/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/list-ui-js-instance-list-submitting-2-snap.png
--- a/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/list-ui-js-item-mutating-1-snap.png
+++ b/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/list-ui-js-item-mutating-1-snap.png
--- a/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png
+++ b/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/snapshots-ui-js-item-mutating-1-snap.png
--- a/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png
+++ b/packages/my-joy-beta/src/components/instances/tests/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png
--- a/packages/my-joy-beta/src/components/instances/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joy-beta/src/components/instances/tests/snapshots/list.spec.js.snap
@ -3308,6 +3308,34 @@ exports[`renders <Item /> without throwing 1`] = `
  padding: 0rem;
 }

+.c21 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c14 {
  width: 0.75rem;
  height: 0.75rem;
@ -3538,6 +3566,12 @@ exports[`renders <Item /> without throwing 1`] = `
  font-weight: 600;
 }

+.c20 {
+  width: 3rem;
+  height: 3rem;
+  min-width: 3rem;
+}
+
@media only screen and (min-width:47.9375rem) {
  .c15 {
    width: 10rem;
@ -3664,6 +3698,9 @@ exports[`renders <Item /> without throwing 1`] = `
          onMouseEnter={undefined}
          onMouseLeave={undefined}
          tag="div"
+        >
+          <div
+            className="c20 c21"
          >
            <svg
              className=""
@ -3684,6 +3721,7 @@ exports[`renders <Item /> without throwing 1`] = `
              />
            </svg>
          </div>
+        </div>
      </td>
    </tr>
  </tbody>
@ -3784,6 +3822,34 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
  padding: 0rem;
 }

+.c21 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c14 {
  width: 0.75rem;
  height: 0.75rem;
@ -4014,6 +4080,12 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
  font-weight: 600;
 }

+.c20 {
+  width: 3rem;
+  height: 3rem;
+  min-width: 3rem;
+}
+
@media only screen and (min-width:47.9375rem) {
  .c15 {
    width: 10rem;
@ -4142,6 +4214,9 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
          onMouseEnter={undefined}
          onMouseLeave={undefined}
          tag="div"
+        >
+          <div
+            className="c20 c21"
          >
            <svg
              className=""
@ -4162,6 +4237,7 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
              />
            </svg>
          </div>
+        </div>
      </td>
    </tr>
  </tbody>
@ -4262,6 +4338,34 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
  padding: 0rem;
 }

+.c21 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .c14 {
  width: 0.75rem;
  height: 0.75rem;
@ -4492,6 +4596,12 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
  font-weight: 600;
 }

+.c20 {
+  width: 3rem;
+  height: 3rem;
+  min-width: 3rem;
+}
+
@media only screen and (min-width:47.9375rem) {
  .c15 {
    width: 10rem;
@ -4618,6 +4728,9 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
          onMouseEnter={undefined}
          onMouseLeave={undefined}
          tag="div"
+        >
+          <div
+            className="c20 c21"
          >
            <svg
              className=""
@ -4638,6 +4751,7 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
              />
            </svg>
          </div>
+        </div>
      </td>
    </tr>
  </tbody>
--- a/packages/my-joy-beta/src/components/instances/list.js
+++ b/packages/my-joy-beta/src/components/instances/list.js
@ -5,6 +5,7 @@ import styled from 'styled-components';
 import titleCase from 'title-case';
 import { Link } from 'react-router-dom';
 import { Field } from 'redux-form';
+import Flex from 'styled-flex-component';

 import {
  Anchor,
@ -47,6 +48,12 @@ const ItemAnchor = styled(Anchor)`
  text-decoration: none;
 `;

+const Actions = styled(Flex)`
+  width: ${remcalc(48)};
+  height: ${remcalc(48)};
+  min-width: ${remcalc(48)};
+`;
+
 export const Item = ({
  id = '',
  name,
@ -58,7 +65,8 @@ export const Item = ({
  onStart,
  onStop,
  onReboot,
-  onRemove
+  onRemove,
+  onClick
 }) => (
  <TableTr>
    <TableTd padding="0" paddingLeft={remcalc(12)} middle left>
@ -91,7 +99,9 @@ export const Item = ({
      <PopoverContainer clickable>
        <TableTd padding="0" hasBorder="left">
          <PopoverTarget box>
+            <Actions alignCenter justifyCenter>
              <ActionsIcon />
+            </Actions>
          </PopoverTarget>
          <Popover placement="bottom">
            <PopoverItem disabled={!allowedActions.start} onClick={onStart}>
@ -135,7 +145,8 @@ export default ({
  allSelected = false,
  toggleSelectAll = () => null,
  onSortBy = () => null,
-  children
+  children,
+  noInstances
 }) => (
  <form>
    <Table>
@ -145,7 +156,7 @@ export default ({
            <FormGroup paddingTop={remcalc(4)}>
              <Checkbox
                checked={allSelected}
-                disabled={submitting}
+                disabled={submitting || noInstances}
                onChange={toggleSelectAll}
                noMargin
              />
--- a/packages/my-joy-beta/src/containers/create-instance/tests/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png
+++ b/packages/my-joy-beta/src/containers/create-instance/tests/__image_snapshots__/networks-ui-js-networks-loading-expanded-1-snap.png
--- a/packages/my-joy-beta/src/containers/create-instance/name.js
+++ b/packages/my-joy-beta/src/containers/create-instance/name.js
@ -66,7 +66,7 @@ const NameContainer = ({
          />
        ) : name ? (
          <Margin top={3}>
-            <H3 bold>{name}</H3>
+            <H3>{name}</H3>
          </Margin>
        ) : null
      }
--- a/packages/my-joy-beta/src/containers/create-instance/package.js
+++ b/packages/my-joy-beta/src/containers/create-instance/package.js
@ -43,7 +43,8 @@ const PackageContainer = ({
  handleResetFilters,
  handleSortBy,
  sortBy,
-  step
+  step,
+  selectPackage
 }) => (
  <Fragment>
    <Title
@ -99,6 +100,7 @@ const PackageContainer = ({
            >
              {packages.map(({ id, ...pkg }) => (
                <Package
+                  selectPackage={selectPackage}
                  key={id}
                  id={id}
                  selected={selected.id === id}
@ -187,7 +189,7 @@ export default compose(
      );

      const vmSelected = get(form, 'create-instance-vms.values.vms', false);
-      const pkgSelected = get(form, `${FORM_NAME}.values.package`, null);
+      const pkgSelected = get(values, `package-selectected`, null);
      const selected = find(packages, ['id', pkgSelected]);

      const sorted = sortBy(packages, [_sortBy]);
@ -217,7 +219,7 @@ export default compose(
        sortOrder: _sortOrder,
        packages: _sortOrder === 'asc' ? filtered : reverse(filtered),
        hasVms: vmSelected,
-        selected: find(packages, ['id', pkgSelected]),
+        selected,
        proceeded: proceeded || selected
      };
    },
@ -229,6 +231,9 @@ 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: () => {
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/cns-ui-js-cns-loading-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/cns-ui-js-cns-mutating-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/cns-ui-js-cns-mutating-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/firewall-ui-js-firewall-loading-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/list-ui-js-list-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/list-ui-js-list-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/list-ui-js-list-error-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/list-ui-js-list-error-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/list-ui-js-list-loading-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/list-ui-js-list-loading-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/metadata-ui-js-metadata-loading-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/metadata-ui-js-metadata-metadata-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/networks-ui-js-networks-loading-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/summary-ui-js-summary-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/summary-ui-js-summary-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/summary-ui-js-summary-loading-error-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/summary-ui-js-summary-loading-error-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/summary-ui-js-summary-mutation-error-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/summary-ui-js-summary-mutation-error-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/summary-ui-js-summary-starting-stopping-rebooting-removing-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/tags-ui-js-tags-editing-removing-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png
+++ b/packages/my-joy-beta/src/containers/instances/tests/__image_snapshots__/tags-ui-js-tags-loading-1-snap.png
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/cns.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/cns.spec.js.snap
@ -4289,6 +4289,15 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
  box-shadow: none;
 }

+.c44:checked + label {
+  background: rgb(250,250,250);
+  border: 0.0625rem solid rgb(216,216,216);
+}
+
+.c44:checked + label:after {
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
 .c45 {
  outline: 0;
  display: block;
--- a/packages/my-joy-beta/src/containers/instances/tests/snapshots/list.spec.js.snap
+++ b/packages/my-joy-beta/src/containers/instances/tests/snapshots/list.spec.js.snap
--- a/packages/my-joy-beta/src/containers/instances/list.js
+++ b/packages/my-joy-beta/src/containers/instances/list.js
@ -12,6 +12,7 @@ import find from 'lodash.find';
 import reverse from 'lodash.reverse';
 import sort from 'lodash.sortby';
 import remcalc from 'remcalc';
+import Fuse from 'fuse.js';

 import {
  ViewContainer,
@ -28,7 +29,7 @@ import StartInstance from '@graphql/start-instance.gql';
 import RebootInstance from '@graphql/reboot-instance.gql';
 import RemoveInstance from '@graphql/remove-instance.gql';
 import ToolbarForm from '@components/instances/toolbar';
-import Index from '@state/gen-index';
+import Empty from '@components/empty';
 import parseError from '@state/parse-error';
 import Confirm from '@state/confirm';

@ -37,7 +38,6 @@ import {
  Item as InstanceListItem
 } from '@components/instances/list';

-import Empty from '@components/empty';
 import InstanceListActions from '@components/instances/footer';

 const TABLE_FORM_NAME = 'instance-list-table';
@ -58,7 +58,8 @@ export const List = ({
  toggleSelectAll,
  handleCreateImage,
  handleSortBy,
-  history
+  history,
+  filter
 }) => {
  const _instances = forceArray(instances);

@ -106,11 +107,13 @@ export const List = ({
          sortOrder={sortOrder}
          toggleSelectAll={toggleSelectAll}
          onSortBy={handleSortBy}
+          noInstances={!_instances.length}
        >
-          {_instances.map(({ id, ...rest }) => (
+          {_instances.map(({ name, id, ...rest }) => (
            <InstanceListItem
              key={id}
              id={id}
+              name={name}
              {...rest}
              onCreateImage={() => handleCreateImage(rest)}
              onStart={() => handleStart([{ id }])}
@ -127,9 +130,10 @@ export const List = ({
  const _empty =
    !loading && !_instances.length ? (
      <Empty>
-        You haven't created any instances yet, but they're really easy to set
-        up.<br />
-        Click above to get going.
+        {filter
+          ? 'You have no Images that match your query'
+          : `You haven't created any instances yet, but they're really easy to set up.
+        Click above to get going.`}
      </Empty>
    ) : null;

@ -191,11 +195,15 @@ export default compose(
        }
      }));

+      const index = new Fuse(instances, {
+        keys: instances.length ? Object.keys(instances[0]) : ['name']
+      });
+
      return {
        instances,
        loading,
        error,
-        index: Index(instances),
+        index,
        refetch
      };
    }
@ -215,9 +223,7 @@ export default compose(
      const sortOrder = get(values, 'instance-list-sort-order', 'asc');

      // if user is searching something, get items that match that query
-      const filtered = filter
-        ? index.search(filter).map(({ ref }) => find(instances, ['id', ref]))
-        : instances;
+      const filtered = filter ? index.search(filter) : instances;

      // from filtered instances, sort asc
      // set's mutating flag
@ -259,7 +265,8 @@ export default compose(
        mutationError,
        index,
        sortOrder,
-        sortBy
+        sortBy,
+        filter
      };
    },
    (dispatch, { refetch, ...ownProps }) => ({
--- a/packages/my-joy-beta/src/containers/instances/snapshots.js
+++ b/packages/my-joy-beta/src/containers/instances/snapshots.js
@ -11,6 +11,7 @@ import sort from 'lodash.sortby';
 import { set } from 'react-redux-values';
 import ReduxForm from 'declarative-redux-form';
 import intercept from 'apr-intercept';
+import Fuse from 'fuse.js';

 import {
  ViewContainer,
@ -32,7 +33,6 @@ import CreateSnapshotMutation from '@graphql/create-snapshot.gql';
 import ToolbarForm from '@components/instances/toolbar';
 import SnapshotsListActions from '@components/instances/footer';
 import parseError from '@state/parse-error';
-import GenIndex from '@state/gen-index';
 import Confirm from '@state/confirm';

 const MENU_FORM_NAME = 'snapshot-list-menu';
@ -170,9 +170,9 @@ export default compose(
      const instance = find(get(rest, 'machines', []), ['name', name]);
      const snapshots = get(instance, 'snapshots', []);

-      const index = GenIndex(
-        snapshots.map(({ name, ...rest }) => ({ ...rest, id: name }))
-      );
+      const index = new Fuse(snapshots, {
+        keys: snapshots.length ? Object.keys(snapshots[0]) : ['name']
+      });

      return {
        index,
@ -206,9 +206,7 @@ export default compose(
      const createSnapshotOpen = get(values, 'snapshots-create-open', false);

      // if user is searching something, get items that match that query
-      const filtered = filter
-        ? index.search(filter).map(({ ref }) => find(snapshots, ['name', ref]))
-        : snapshots;
+      const filtered = filter ? index.search(filter) : snapshots;

      // from filtered instances, sort asc
      // set's mutating flag
--- a/packages/my-joy-beta/src/containers/instances/tags.js
+++ b/packages/my-joy-beta/src/containers/instances/tags.js
@ -10,6 +10,7 @@ import find from 'lodash.find';
 import get from 'lodash.get';
 import intercept from 'apr-intercept';
 import remcalc from 'remcalc';
+import Fuse from 'fuse.js';

 import {
  ViewContainer,
@ -29,7 +30,6 @@ import ToolbarForm from '@components/instances/toolbar';
 import GetTags from '@graphql/list-tags.gql';
 import UpdateTags from '@graphql/update-tags.gql';
 import DeleteTag from '@graphql/delete-tag.gql';
-import Index from '@state/gen-index';
 import parseError from '@state/parse-error';
 import Confirm from '@state/confirm';

@ -161,10 +161,14 @@ export default compose(
        ({ name = '' }) => !/^triton\.cns\./i.test(name)
      );

+      const index = new Fuse(tags, {
+        keys: tags.length ? Object.keys(tags[0]) : ['name']
+      });
+
      return {
        tags,
        instance,
-        index: Index(tags),
+        index,
        loading,
        error,
        refetch
@ -176,9 +180,8 @@ export default compose(
      // get search value
      const filter = get(form, `${MENU_FORM_NAME}.values.filter`, false);
      // if user is searching something, get items that match that query
-      const filtered = filter
-        ? index.search(filter).map(({ ref }) => find(tags, ['id', ref]))
-        : tags;
+      // if user is searching something, get items that match that query
+      const filtered = filter ? index.search(filter) : tags;

      const addOpen = get(values, 'add-tags-open', false);
      const editingTagName = get(values, 'editing-tag', null);
--- a/packages/my-joy-beta/src/state/gen-index.js
+++ b/packages/my-joy-beta/src/state/gen-index.js
@ -1,16 +0,0 @@
-import Lunr from 'lunr';
-
-Lunr.tokenizer.separator = /[\s\-|_]+/;
-
-export default items =>
-  Lunr(function() {
-    const fields = items
-      .map(item => Object.keys(item))
-      .reduce((all, keys) => all.concat(keys), [])
-      // eslint-disable-next-line no-implicit-coercion
-      .reduce((all, key) => (~all.indexOf(key) ? all : all.concat(key)), [])
-      .filter(key => !key.match(/^__/));
-
-    fields.forEach(field => this.field(field));
-    items.forEach(item => this.add(item));
-  });
--- a/packages/ui-toolkit/src/form/tests/snapshots/form.spec.js.snap
+++ b/packages/ui-toolkit/src/form/tests/snapshots/form.spec.js.snap
@ -590,6 +590,7 @@ exports[`Form Select 1`] = `
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.75rem;
+  pointer-events: none;
 }

 .c2 {
@ -837,6 +838,15 @@ exports[`Form Toggle 1`] = `
  box-shadow: none;
 }

+.c2:checked + label {
+  background: rgb(250,250,250);
+  border: 0.0625rem solid rgb(216,216,216);
+}
+
+.c2:checked + label:after {
+  box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+}
+
 .c3 {
  outline: 0;
  display: block;
--- a/packages/ui-toolkit/src/form/label.js
+++ b/packages/ui-toolkit/src/form/label.js
@ -11,6 +11,10 @@ const StyledLabel = Label.extend`
  white-space: pre;
  font-size: ${remcalc(13)};

+  ${is('actionable')`
+   cursor: pointer;
+  `};
+
  ${is('disabled')`
    color:  ${props => props.theme.grey};
  `};
--- a/packages/ui-toolkit/src/form/select.js
+++ b/packages/ui-toolkit/src/form/select.js
@ -34,6 +34,7 @@ const SelectWrapper = styled.div`
    top: 50%;
    transform: translateY(-50%);
    right: ${remcalc(12)};
+    pointer-events: none;
  }

  ${is('embedded')`
--- a/packages/ui-toolkit/src/form/toggle.js
+++ b/packages/ui-toolkit/src/form/toggle.js
@ -32,6 +32,17 @@ const Input = styled.input`
      }
    }
  }
+
+  ${is('disabled')`
+    &:checked + label {
+      background: ${props => props.theme.background};
+      border: ${remcalc(1)} solid ${props => props.theme.grey};
+
+      &:after {
+        box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
+      }
+    }
+  `}
 `;

 const InputLabel = styled.label`
@ -100,6 +111,7 @@ const InputLabel = styled.label`
          padding-right: 0;
        }
      }
+
      &:before {
        cursor: not-allowed;
      }
--- a/packages/ui-toolkit/src/table/index.js
+++ b/packages/ui-toolkit/src/table/index.js
@ -300,7 +300,7 @@ export const Tfoot = Baseline(({ children, ...rest }) => (
 export const Tr = Baseline(({ children, ...rest }) => (
  <Propagate {...rest}>
    {value => (
-      <BaseTr {...value} name="tr">
+      <BaseTr {...rest} {...value} name="tr">
        {children}
      </BaseTr>
    )}
@ -310,7 +310,13 @@ export const Tr = Baseline(({ children, ...rest }) => (
 export const Th = Baseline(({ children, ...rest }) => (
  <Propagate {...rest}>
    {({ showSort, sortOrder, header, ...value }) => (
-      <BaseTh {...value} showSort={showSort} header={header} name="th">
+      <BaseTh
+        {...rest}
+        {...value}
+        showSort={showSort}
+        header={header}
+        name="th"
+      >
        {children}
        {!showSort || !header ? null : (
          <ArrowIcon
@ -337,7 +343,7 @@ export const Tbody = Baseline(({ children, ...rest }) => (
 export const Td = Baseline(({ children, ...rest }) => (
  <Propagate {...rest}>
    {value => (
-      <BaseTd {...value} {...rest} name="td">
+      <BaseTd {...rest} {...value} {...rest} name="td">
        {children}
      </BaseTd>
    )}
--- a/yarn.lock
+++ b/yarn.lock
@ -185,7 +185,7 @@
  version "9.4.6"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.6.tgz#d8176d864ee48753d053783e4e463aec86b8d82e"

-"@types/zen-observable@0.5.3", "@types/zen-observable@^0.5.3":
+"@types/zen-observable@^0.5.3":
  version "0.5.3"
  resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.5.3.tgz#91b728599544efbb7386d8b6633693a3c2e7ade5"

@ -379,6 +379,10 @@ anymatch@^2.0.0:
    micromatch "^3.1.4"
    normalize-path "^2.1.1"

+apart@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/apart/-/apart-1.0.1.tgz#97ae56938c71c113ae09c0feafb5f5af84eba063"
+
 apollo-cache-inmemory@^1.1.5, apollo-cache-inmemory@^1.1.7:
  version "1.1.9"
  resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.1.9.tgz#8bcd05e8ec4e7dc5ffda7f68252244cab3197b71"
@ -408,23 +412,23 @@ apollo-client@^2.2.0, apollo-client@^2.2.3:
    "@types/async" "2.0.47"

 apollo-link-dedup@^1.0.0:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/apollo-link-dedup/-/apollo-link-dedup-1.0.7.tgz#2fc31b04d7be5c2b6cb9aded03be9b634e5483c8"
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/apollo-link-dedup/-/apollo-link-dedup-1.0.8.tgz#8c3028cf32557bd040ab6ba8856f38067bdacead"
  dependencies:
-    apollo-link "^1.2.0"
+    apollo-link "^1.2.1"

-apollo-link-http-common@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.1.tgz#bd8dbb751633be8796f58fe1ba4ecdc0a2f46110"
+apollo-link-http-common@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.2.tgz#ac8a1810eca6a7ed37a34baeeb0a55752e6a0e30"
  dependencies:
-    apollo-link "^1.2.0"
+    apollo-link "^1.2.1"

 apollo-link-http@^1.3.2, apollo-link-http@^1.3.3:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.4.0.tgz#63fdaeb63291dd47e0404591fd0a0cf3ca67f8a3"
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.1.tgz#1cae092e994d86659f88cc418ccd10a914b312d3"
  dependencies:
-    apollo-link "^1.2.0"
-    apollo-link-http-common "^0.2.1"
+    apollo-link "^1.2.1"
+    apollo-link-http-common "^0.2.2"

 apollo-link-state@^0.3.1:
  version "0.3.1"
@ -433,14 +437,13 @@ apollo-link-state@^0.3.1:
    apollo-utilities "^1.0.1"
    graphql-anywhere "^4.1.0-alpha.0"

-apollo-link@^1.0.0, apollo-link@^1.0.7, apollo-link@^1.1.0, apollo-link@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.0.tgz#1abba5456eb35fc8b8a79f3be421e683a9ecfc41"
+apollo-link@^1.0.0, apollo-link@^1.0.7, apollo-link@^1.1.0, apollo-link@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.1.tgz#c120b16059f9bd93401b9f72b94d2f80f3f305d2"
  dependencies:
    "@types/node" "^9.4.6"
-    "@types/zen-observable" "0.5.3"
    apollo-utilities "^1.0.0"
-    zen-observable "^0.8.0"
+    zen-observable-ts "^0.8.6"

 apollo-server-module-graphiql@^1.3.2:
  version "1.3.2"
@ -450,7 +453,7 @@ apollo-utilities@1.0.4, apollo-utilities@^1.0.0, apollo-utilities@^1.0.1, apollo
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.4.tgz#560009ea5541b9fdc4ee07ebb1714ee319a76c15"

-apollo@^0.2.2:
+apollo@0.2.2, apollo@^0.2.2:
  version "0.2.2"
  resolved "https://registry.yarnpkg.com/apollo/-/apollo-0.2.2.tgz#e409f53765bbf98efa3d127a2789c63bccd025d6"
  dependencies:
@ -3094,8 +3097,8 @@ css-loader@0.28.7:
    source-list-map "^2.0.0"

 css-loader@^0.28.7:
-  version "0.28.9"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.9.tgz#68064b85f4e271d7ce4c48a58300928e535d1c95"
+  version "0.28.10"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.10.tgz#40282e79230f7bcb4e483efa631d670b735ebf42"
  dependencies:
    babel-code-frame "^6.26.0"
    css-selector-tokenizer "^0.7.0"
@ -3218,7 +3221,7 @@ currently-unhandled@^0.4.1:
  dependencies:
    array-find-index "^1.0.1"

-currify@^2.0.0:
+currify@^2.0.0, currify@^2.0.6:
  version "2.0.6"
  resolved "https://registry.yarnpkg.com/currify/-/currify-2.0.6.tgz#86064386778e315c043382d53ba278efc6a9ef87"

@ -3645,8 +3648,8 @@ ee-first@1.1.1:
  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"

 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
-  version "1.3.33"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.33.tgz#bf00703d62a7c65238136578c352d6c5c042a545"
+  version "1.3.34"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.34.tgz#d93498f40391bb0c16a603d8241b9951404157ed"

 elliptic@^6.0.0:
  version "6.4.0"
@ -3916,8 +3919,8 @@ eslint-plugin-flowtype@2.39.1:
    lodash "^4.15.0"

 eslint-plugin-flowtype@^2.39.1:
-  version "2.46.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.46.0.tgz#832e2f6cc75ea33a25b801b6b87f0342f372b362"
+  version "2.46.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.46.1.tgz#c4f81d580cd89c82bc3a85a1ccf4ae3a915143a4"
  dependencies:
    lodash "^4.15.0"

@ -4738,6 +4741,10 @@ functional-red-black-tree@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"

+fuse.js@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.2.0.tgz#f0448e8069855bf2a3e683cdc1d320e7e2a07ef4"
+
 fwrule@^1.4.1:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/fwrule/-/fwrule-1.4.1.tgz#41f24a1d9eac22b8cf20c65dd9dab4240ad11a1f"
@ -5007,8 +5014,8 @@ graphql-config@~1.0.9:
    rimraf "^2.6.2"

 graphql-request@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.4.1.tgz#0772743cfac8dfdd4d69d36106a96c9bdd191ce8"
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.5.0.tgz#69b30a1767189fcba27f5c907c0a87339f90b5d8"
  dependencies:
    cross-fetch "1.1.1"

@ -7396,8 +7403,8 @@ mz@^2.7.0:
    thenify-all "^1.0.0"

 nan@^2.3.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.9.2.tgz#f564d75f5f8f36a6d9456cca7a6c4fe488ab7866"

 nanomatch@^1.2.9:
  version "1.2.9"
@ -9259,8 +9266,8 @@ redent@^1.0.0:
    strip-indent "^1.0.1"

 redrun@^5.10.0, redrun@^5.9.18:
-  version "5.10.3"
-  resolved "https://registry.yarnpkg.com/redrun/-/redrun-5.10.3.tgz#9f5fff319c5171c304e60b05ac6e10df3fb33daa"
+  version "5.10.5"
+  resolved "https://registry.yarnpkg.com/redrun/-/redrun-5.10.5.tgz#e8ce39d00b6a7ffe50e96e4bcda330e5bd796dd3"
  dependencies:
    all-object-keys "^1.0.0"
    currify "^2.0.0"
@ -9270,6 +9277,7 @@ redrun@^5.10.0, redrun@^5.9.18:
    jessy "^2.0.0"
    mapsome "^1.0.0"
    readjson "^1.1.3"
+    somefilter "^2.0.0"
    squad "^2.0.0"
    try-catch "^2.0.0"
    yargs-parser "^9.0.2"
@ -10171,6 +10179,14 @@ sockjs@0.3.19:
    faye-websocket "^0.10.0"
    uuid "^3.0.1"

+somefilter@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/somefilter/-/somefilter-2.0.1.tgz#a4ba858672bcce458dfcc1b1b2ee3cd5ce42374f"
+  dependencies:
+    apart "^1.0.1"
+    currify "^2.0.6"
+    squad "^2.0.0"
+
 sort-keys@^1.0.0:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
@ -10990,8 +11006,8 @@ uglify-es@^3.3.4:
    source-map "~0.6.1"

 uglify-js@3.3.x, uglify-js@^3.0.13:
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.11.tgz#e9d058b20715138bb4e8e5cae2ea581686bdaae3"
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.12.tgz#efd87c16a1f4c674a8a5ede571001ef634dcc883"
  dependencies:
    commander "~2.14.1"
    source-map "~0.6.1"
@ -11556,10 +11572,10 @@ webpack-manifest-plugin@1.3.2:
    lodash ">=3.5 <5"

 webpack-merge@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.1.tgz#f1197a0a973e69c6fbeeb6d658219aa8c0c13555"
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.2.tgz#5d372dddd3e1e5f8874f5bf5a8e929db09feb216"
  dependencies:
-    lodash "^4.17.4"
+    lodash "^4.17.5"

 webpack-sources@^1.0.1, webpack-sources@^1.1.0:
  version "1.1.0"
@ -11958,6 +11974,12 @@ yauzl@2.4.1:
  dependencies:
    fd-slicer "~1.0.1"

-zen-observable@0.7.1, zen-observable@^0.7.0, zen-observable@^0.8.0:
+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"
+  dependencies:
+    zen-observable "^0.8.6"
+
+zen-observable@0.7.1, zen-observable@^0.7.0, zen-observable@^0.8.6:
  version "0.7.1"
  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.7.1.tgz#f84075c0ee085594d3566e1d6454207f126411b3"