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

fixes #1208

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>"
+          style={{ fill: 'url(#linear-gradient)' }}
-          className="cls-1"
           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>

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",

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;

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 {

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 {

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'],
+.c6[type='checkbox'],
-.c5[type='radio'] {
+.c6[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-.c5[type='number']::-webkit-inner-spin-button,
+.c6[type='number']::-webkit-inner-spin-button,
-.c5[type='number']::-webkit-outer-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,
+.c6[type='search']::-webkit-search-cancel-button,
-.c5[type='search']::-webkit-search-decoration {
+.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"
+      className="baseline-jVaZNU kXgQxt c3"
-      name="package"
       role="group"
       style={undefined}
-      type="radio"
-      value={undefined}
     >
       <li
-        className="c3"
+        checked={false}
+        className="c4"
         disabled={false}
         onBlur={null}
       >
         <div
-          className="c4"
+          checked={false}
+          className="c5"
           disabled={false}
-          id="k"
+          id="l"
           onBlur={null}
           type="radio"
         >
           <input
-            checked={undefined}
+            checked={false}
-            className="c5"
+            className="c6"
             disabled={false}
-            id="l"
+            id="m"
             onBlur={null}
             type="radio"
           />
           <label
-            className="c6"
+            className="c7"
-            htmlFor="l"
+            htmlFor="m"
           />
         </div>
         <div
-          className="c7"
+          checked={false}
+          className="c8"
           disabled={false}
-          id="k"
+          id="l"
           onBlur={null}
         >
           <div
-            className="c8"
+            className="c9"
           >
             <div
-              className="c9"
+              className="c10"
             >
               <label
-                className="c10"
+                className="c11"
-                htmlFor="l"
+                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}

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>

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>
+      <FormGroup fluid>
-        <Radio onBlur={null} noMargin>
+        <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>
+      <H3 noMargin>{name}</H3>
-        {name}
-      </H3>
     </Margin>
     <Flex alignCenter>
       <span>{price} $</span>

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;
@@ -3665,24 +3699,28 @@ exports[`renders <Item /> without throwing 1`] = `
           onMouseLeave={undefined}
           tag="div"
         >
-          <svg
+          <div
-            className=""
+            className="c20 c21"
-            height="16"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(0deg)",
-              }
-            }
-            viewBox="0 0 4 16"
-            width="4"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+              className=""
-              fill="rgba(73, 73, 73, 1)"
+              height="16"
-            />
+              innerRef={undefined}
-          </svg>
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              viewBox="0 0 4 16"
+              width="4"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
+          </div>
         </div>
       </td>
     </tr>
@@ -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;
@@ -4143,24 +4215,28 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
           onMouseLeave={undefined}
           tag="div"
         >
-          <svg
+          <div
-            className=""
+            className="c20 c21"
-            height="16"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(0deg)",
-              }
-            }
-            viewBox="0 0 4 16"
-            width="4"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+              className=""
-              fill="rgba(73, 73, 73, 1)"
+              height="16"
-            />
+              innerRef={undefined}
-          </svg>
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              viewBox="0 0 4 16"
+              width="4"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
+          </div>
         </div>
       </td>
     </tr>
@@ -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;
@@ -4619,24 +4729,28 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
           onMouseLeave={undefined}
           tag="div"
         >
-          <svg
+          <div
-            className=""
+            className="c20 c21"
-            height="16"
-            innerRef={undefined}
-            style={
-              Object {
-                "transform": "rotate(0deg)",
-              }
-            }
-            viewBox="0 0 4 16"
-            width="4"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+              className=""
-              fill="rgba(73, 73, 73, 1)"
+              height="16"
-            />
+              innerRef={undefined}
-          </svg>
+              style={
+                Object {
+                  "transform": "rotate(0deg)",
+                }
+              }
+              viewBox="0 0 4 16"
+              width="4"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2,16a2,2,0,1,0-2-2A2,2,0,0,0,2,16Zm0-6A2,2,0,1,0,0,8,2,2,0,0,0,2,10ZM2,4A2,2,0,1,0,0,2,2,2,0,0,0,2,4Z"
+                fill="rgba(73, 73, 73, 1)"
+              />
+            </svg>
+          </div>
         </div>
       </td>
     </tr>

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>
-            <ActionsIcon />
+            <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
               />

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
       }

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: () => {

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;

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
+        {filter
-        up.<br />
+          ? 'You have no Images that match your query'
-        Click above to get going.
+          : `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
+      const filtered = filter ? index.search(filter) : instances;
-        ? index.search(filter).map(({ ref }) => find(instances, ['id', ref]))
-        : 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 }) => ({

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(
+      const index = new Fuse(snapshots, {
-        snapshots.map(({ name, ...rest }) => ({ ...rest, id: name }))
+        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
+      const filtered = filter ? index.search(filter) : snapshots;
-        ? index.search(filter).map(({ ref }) => find(snapshots, ['name', ref]))
-        : snapshots;
 
       // from filtered instances, sort asc
       // set's mutating flag

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
+      // if user is searching something, get items that match that query
-        ? index.search(filter).map(({ ref }) => find(tags, ['id', ref]))
+      const filtered = filter ? index.search(filter) : tags;
-        : tags;
 
       const addOpen = get(values, 'add-tags-open', false);
       const editingTagName = get(values, 'editing-tag', null);

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));
-  });

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;

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};
   `};

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')`

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;
       }

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>
     )}

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"
+  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/apollo-link-dedup/-/apollo-link-dedup-1.0.7.tgz#2fc31b04d7be5c2b6cb9aded03be9b634e5483c8"
+  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:
+apollo-link-http-common@^0.2.2:
-  version "0.2.1"
+  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.1.tgz#bd8dbb751633be8796f58fe1ba4ecdc0a2f46110"
+  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"
+  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.4.0.tgz#63fdaeb63291dd47e0404591fd0a0cf3ca67f8a3"
+  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.1.tgz#1cae092e994d86659f88cc418ccd10a914b312d3"
   dependencies:
-    apollo-link "^1.2.0"
+    apollo-link "^1.2.1"
-    apollo-link-http-common "^0.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:
+apollo-link@^1.0.0, apollo-link@^1.0.7, apollo-link@^1.1.0, apollo-link@^1.2.1:
-  version "1.2.0"
+  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.0.tgz#1abba5456eb35fc8b8a79f3be421e683a9ecfc41"
+  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"
+  version "0.28.10"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.9.tgz#68064b85f4e271d7ce4c48a58300928e535d1c95"
+  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"
+  version "1.3.34"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.33.tgz#bf00703d62a7c65238136578c352d6c5c042a545"
+  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"
+  version "2.46.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.46.0.tgz#832e2f6cc75ea33a25b801b6b87f0342f372b362"
+  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"
+  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.4.1.tgz#0772743cfac8dfdd4d69d36106a96c9bdd191ce8"
+  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"
+  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
+  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"
+  version "5.10.5"
-  resolved "https://registry.yarnpkg.com/redrun/-/redrun-5.10.3.tgz#9f5fff319c5171c304e60b05ac6e10df3fb33daa"
+  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"
+  version "3.3.12"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.11.tgz#e9d058b20715138bb4e8e5cae2ea581686bdaae3"
+  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"
+  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.1.tgz#f1197a0a973e69c6fbeeb6d658219aa8c0c13555"
+  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"