fix(my-joyent): fix reset filters on prototype

fixes #766

packages/my-joyent/src/components/diskTypeForm/__tests__/__snapshots__/index.spec.js.snap

@@ -104,6 +104,18 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
 
 .c5 {
   list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 400;
+}
+
+.c5 label {
   font-weight: 400;
 }
 
@@ -197,7 +209,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
               <input
                 checked={false}
                 className="c7"
-                id="cjYpBB"
+                id="XXuv"
                 name="magnetic"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -209,7 +221,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
               />
               <label
                 className="c8"
-                htmlFor="cjYpBB"
+                htmlFor="XXuv"
               />
             </div>
             Magnetic
@@ -239,7 +251,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
               <input
                 checked={false}
                 className="c7"
-                id="cBnwtF"
+                id="bgdmOt"
                 name="ssd"
                 onBlur={[Function]}
                 onChange={[Function]}
@@ -251,7 +263,7 @@ exports[`renders <DiskTypeForm /> without throwing 1`] = `
               />
               <label
                 className="c8"
-                htmlFor="cBnwtF"
+                htmlFor="bgdmOt"
               />
             </div>
             SSD

packages/my-joyent/src/components/empty/__tests__/__snapshots__/index.spec.js.snap

@@ -12,13 +12,13 @@ exports[`renders <Package /> without throwing 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: start;
+  -webkit-align-items: center;
-  -webkit-justify-content: flex-start;
+  -webkit-box-align: center;
-  -ms-flex-pack: start;
+  -ms-flex-align: center;
-  justify-content: flex-start;
+  align-items: center;
-  -webkit-flex-grow: 2;
+  -webkit-flex-grow: 4;
-  -ms-flex-grow: 2;
+  -ms-flex-grow: 4;
-  flex-grow: 2;
+  flex-grow: 4;
   -webkit-flex-basis: 5.625rem;
   -ms-flex-basis: 5.625rem;
   flex-basis: 5.625rem;

packages/my-joyent/src/components/filters/__tests__/__snapshots__/filters.spec.js.snap

@@ -180,6 +180,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-style: normal;
   font-stretch: normal;
   display: block;
+  text-align: left;
 }
 
 .c13 {
@@ -253,6 +254,7 @@ exports[`renders <Filters /> without throwing 1`] = `
   font-style: normal;
   font-stretch: normal;
   display: block;
+  text-align: left;
   margin-right: 0.75rem;
   font-weight: bold;
 }
@@ -365,6 +367,18 @@ exports[`renders <Filters /> without throwing 1`] = `
 
 .c21 {
   list-style-type: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 400;
+}
+
+.c21 label {
   font-weight: 400;
 }
 
@@ -924,7 +938,7 @@ exports[`renders <Filters /> without throwing 1`] = `
                   <input
                     checked={false}
                     className="c23"
-                    id="ctHMev"
+                    id="bMjLGQ"
                     name="magnetic"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -936,7 +950,7 @@ exports[`renders <Filters /> without throwing 1`] = `
                   />
                   <label
                     className="c24"
-                    htmlFor="ctHMev"
+                    htmlFor="bMjLGQ"
                   />
                 </div>
                 Magnetic
@@ -966,7 +980,7 @@ exports[`renders <Filters /> without throwing 1`] = `
                   <input
                     checked={false}
                     className="c23"
-                    id="buhnul"
+                    id="xnVlC"
                     name="ssd"
                     onBlur={[Function]}
                     onChange={[Function]}
@@ -978,7 +992,7 @@ exports[`renders <Filters /> without throwing 1`] = `
                   />
                   <label
                     className="c24"
-                    htmlFor="buhnul"
+                    htmlFor="xnVlC"
                   />
                 </div>
                 SSD

packages/my-joyent/src/components/filters/filters.js

@@ -2,13 +2,10 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 import isEqual from 'lodash.isequal';
-import {
+import { Button, Label } from 'joyent-ui-toolkit';
-  Button,
-  Label,
-  Slider
-} from 'joyent-ui-toolkit';
 import { default as defaultState } from '@state/state';
 import { default as DiskTypeFrom } from '@components/diskTypeForm';
+import Sliders from './sliders';
 
 const FilterWrapper = styled.section`
   display: flex;
@@ -45,19 +42,6 @@ const Subtitle = styled(Label)`
   margin-bottom: ${remcalc(8)};
 `;
 
-const getFirstAndLast = (arr, key) => {
-  const sorted = arr.sort(
-    (a, b) => (a[key] === b[key] ? 0 : a[key] < b[key] ? -1 : 1)
-  );
-
-  if (sorted.length > 0) {
-    return {
-      min: parseFloat(sorted[0][key]),
-      max: parseFloat(sorted[sorted.length - 1][key])
-    };
-  }
-};
-
 class Filters extends Component {
   constructor(props) {
     super(props);
@@ -72,48 +56,18 @@ class Filters extends Component {
       groupClick: 0,
       defaults: this.props.filters
     };
-
-    this.groupChange = this.groupChange.bind(this);
-    this.handleResetClick = this.handleResetClick.bind(this);
   }
 
-  componentWillReceiveProps(nextProps) {
+  groupChange = group => {
-    const { packages } = nextProps;
+    const { groupChange } = this.props;
-    packages.length > 1 &&
+    groupChange(group);
-      this.setState({
-        ram: getFirstAndLast(packages, 'memory'),
-        cpu: getFirstAndLast(packages, 'vcpus'),
-        disk: getFirstAndLast(packages, 'disk'),
-        cost: getFirstAndLast(packages, 'price')
-      });
-  }
-
-  groupChange(group) {
-    this.props.groupChange(group);
 
     this.setState({
       groupClick: this.state.groupClick + 1
     });
-  }
+  };
 
-  shouldComponentUpdate(nextProps, nextState) {
+  handleResetClick = () => {
-    const { groupClick, reset } = this.state;
-    const { filters } = this.props;
-    const filtersMap = filter => ({
-      ram: filter.ram,
-      cost: filter.cost,
-      cpu: filter.cpu,
-      disk: filter.disk
-    });
-    return (
-      (nextState.groupClick !== groupClick &&
-        isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
-      nextState.reset !== reset ||
-      !isEqual(nextProps.filters.diskType, filters.diskType)
-    );
-  }
-
-  handleResetClick() {
     const { filterReset, filters: { cpu, cost, ram, disk } } = this.props;
     const { reset } = this.state;
     filterReset();
@@ -125,7 +79,19 @@ class Filters extends Component {
       disk,
       cost
     });
-  }
+  };
+
+  handleDiskChange = val => {
+    this.props.diskTypeChange(val);
+
+    // if the object is empty or all values are false we want to reset
+    if (
+      Object.keys(val).length === 0 ||
+      Object.keys(val).every(i => !val[i])
+    ) {
+      this.handleResetClick()
+    }
+  };
 
   render() {
     const {
@@ -134,11 +100,10 @@ class Filters extends Component {
       cpuSliderChange,
       diskSliderChange,
       costSliderChange,
-      packages,
+      packages
-      diskTypeChange
     } = this.props;
 
-    const { reset, cpu, cost, ram, disk, defaults } = this.state;
+    const { reset, defaults, groupClick } = this.state;
 
     return (
       <Wrapper>
@@ -171,54 +136,19 @@ class Filters extends Component {
         </GroupWrapper>
         <Label>Filter by package feature</Label>
         <FilterWrapper key={reset}>
-          <Slider
+          <Sliders
-            greyed={packages.length === 0}
+            packages={packages}
-            minValue={defaults.ram.min}
+            ramSliderChange={value => ramSliderChange(value)}
-            maxValue={defaults.ram.max}
+            cpuSliderChange={value => cpuSliderChange(value)}
-            step={0.256}
+            diskSliderChange={value => diskSliderChange(value)}
-            value={ram}
+            costSliderChange={value => costSliderChange(value)}
-            key={`${ram.min}-${ram.max}`}
+            defaults={defaults}
-            onChangeComplete={value => ramSliderChange(value)}
+            filters={filters}
-          >
+            reset={reset}
-            GB RAM
+            groupClick={groupClick}
-          </Slider>
-          <Slider
-            greyed={packages.length === 0}
-            minValue={defaults.cpu.min}
-            maxValue={defaults.cpu.max}
-            step={0.25}
-            value={cpu}
-            key={`${cpu.min}-${cpu.max}`}
-            onChangeComplete={value => cpuSliderChange(value)}
-          >
-            vCPUs
-          </Slider>
-          <Slider
-            greyed={packages.length === 0}
-            minValue={defaults.disk.min}
-            maxValue={defaults.disk.max}
-            step={0.01}
-            value={disk}
-            key={`${disk.min}-${disk.max}`}
-            onChangeComplete={value => diskSliderChange(value)}
-          >
-            TB Disk
-          </Slider>
-          <Slider
-            greyed={packages.length === 0}
-            minValue={defaults.cost.min}
-            maxValue={defaults.cost.max}
-            step={0.016}
-            value={cost}
-            key={`${cost.min}-${cost.max}`}
-            onChangeComplete={value => costSliderChange(value)}
-          >
-            $/hr
-          </Slider>
-          <DiskTypeFrom
-            onChange={params => diskTypeChange(params)}
-            onSubmit={e => {}}
           />
+
+          <DiskTypeFrom onChange={params => this.handleDiskChange(params)} />
         </FilterWrapper>
       </Wrapper>
     );

packages/my-joyent/src/components/filters/sliders.js

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { Slider } from 'joyent-ui-toolkit';
+import isEqual from 'lodash.isequal';
+
+const getFirstAndLast = (arr, key) => {
+  const sorted = arr.sort(
+    (a, b) => (a[key] === b[key] ? 0 : a[key] < b[key] ? -1 : 1)
+  );
+
+  if (sorted.length > 0) {
+    return {
+      min: parseFloat(sorted[0][key]),
+      max: parseFloat(sorted[sorted.length - 1][key])
+    };
+  }
+};
+
+class Sliders extends Component {
+  constructor(props) {
+    super(props);
+    const { filters: { cpu, cost, ram, disk }, reset, groupClick } = this.props;
+
+    this.state = {
+      reset,
+      ram,
+      cpu,
+      disk,
+      cost,
+      groupClick
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { packages, groupClick, reset } = nextProps;
+    packages.length > 1 &&
+      this.setState({
+        ram: getFirstAndLast(packages, 'memory'),
+        cpu: getFirstAndLast(packages, 'vcpus'),
+        disk: getFirstAndLast(packages, 'disk'),
+        cost: getFirstAndLast(packages, 'price'),
+        groupClick,
+        reset
+      });
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const { groupClick, reset } = this.state;
+    const { filters } = this.props;
+    const filtersMap = filter => ({
+      ram: filter.ram,
+      cost: filter.cost,
+      cpu: filter.cpu,
+      disk: filter.disk
+    });
+    return (
+      (nextState.groupClick !== groupClick &&
+        isEqual(filtersMap(filters), filtersMap(nextProps.filters))) ||
+      nextState.reset !== reset ||
+      !isEqual(nextProps.filters.diskType, filters.diskType)
+    );
+  }
+
+  render() {
+    const {
+      ramSliderChange,
+      cpuSliderChange,
+      diskSliderChange,
+      costSliderChange,
+      packages,
+      defaults
+    } = this.props;
+
+    const { cpu, cost, ram, disk } = this.state;
+    return [
+      <Slider
+        greyed={packages.length === 0}
+        minValue={defaults.ram.min}
+        maxValue={defaults.ram.max}
+        step={0.256}
+        value={ram}
+        key={`${ram.min}-${ram.max}`}
+        onChangeComplete={value => ramSliderChange(value)}
+      >
+        GB RAM
+      </Slider>,
+      <Slider
+        greyed={packages.length === 0}
+        minValue={defaults.cpu.min}
+        maxValue={defaults.cpu.max}
+        step={0.25}
+        value={cpu}
+        key={`${cpu.min}-${cpu.max}`}
+        onChangeComplete={value => cpuSliderChange(value)}
+      >
+        vCPUs
+      </Slider>,
+      <Slider
+        greyed={packages.length === 0}
+        minValue={defaults.disk.min}
+        maxValue={defaults.disk.max}
+        step={0.01}
+        value={disk}
+        key={`${disk.min}-${disk.max}`}
+        onChangeComplete={value => diskSliderChange(value)}
+      >
+        TB Disk
+      </Slider>,
+      <Slider
+        greyed={packages.length === 0}
+        minValue={defaults.cost.min}
+        maxValue={defaults.cost.max}
+        step={0.016}
+        value={cost}
+        key={`${cost.min}-${cost.max}`}
+        onChangeComplete={value => costSliderChange(value)}
+      >
+        $/hr
+      </Slider>
+    ];
+  }
+}
+
+export default Sliders;

packages/my-joyent/src/components/package/__tests__/__snapshots__/index.spec.js.snap

@@ -21,13 +21,13 @@ exports[`renders <Package /> without throwing 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: start;
+  -webkit-align-items: center;
-  -webkit-justify-content: flex-start;
+  -webkit-box-align: center;
-  -ms-flex-pack: start;
+  -ms-flex-align: center;
-  justify-content: flex-start;
+  align-items: center;
-  -webkit-flex-grow: 2;
+  -webkit-flex-grow: 4;
-  -ms-flex-grow: 2;
+  -ms-flex-grow: 4;
-  flex-grow: 2;
+  flex-grow: 4;
   -webkit-flex-basis: 5.625rem;
   -ms-flex-basis: 5.625rem;
   flex-basis: 5.625rem;

packages/my-joyent/src/components/packages/__tests__/__snapshots__/list.spec.js.snap

@@ -30,13 +30,13 @@ exports[`renders <Packages /> without throwing 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: start;
+  -webkit-align-items: center;
-  -webkit-justify-content: flex-start;
+  -webkit-box-align: center;
-  -ms-flex-pack: start;
+  -ms-flex-align: center;
-  justify-content: flex-start;
+  align-items: center;
-  -webkit-flex-grow: 2;
+  -webkit-flex-grow: 4;
-  -ms-flex-grow: 2;
+  -ms-flex-grow: 4;
-  flex-grow: 2;
+  flex-grow: 4;
   -webkit-flex-basis: 5.625rem;
   -ms-flex-basis: 5.625rem;
   flex-basis: 5.625rem;

packages/my-joyent/src/containers/packages/__tests__/__snapshots__/index.spec.js.snap

@@ -30,13 +30,13 @@ exports[`renders <PackagesHOC /> without throwing 1`] = `
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
-  -webkit-box-pack: start;
+  -webkit-align-items: center;
-  -webkit-justify-content: flex-start;
+  -webkit-box-align: center;
-  -ms-flex-pack: start;
+  -ms-flex-align: center;
-  justify-content: flex-start;
+  align-items: center;
-  -webkit-flex-grow: 2;
+  -webkit-flex-grow: 4;
-  -ms-flex-grow: 2;
+  -ms-flex-grow: 4;
-  flex-grow: 2;
+  flex-grow: 4;
   -webkit-flex-basis: 5.625rem;
   -ms-flex-basis: 5.625rem;
   flex-basis: 5.625rem;

packages/ui-toolkit/etc/style.css

@@ -29,12 +29,12 @@ p.rsg--p-32 {
     padding-bottom: 36px;
 }
 
-.rsg--sidebar-4 a.rsg--link-72 {
+.rsg--sidebar-4 a.rsg--link-73 {
     color: #fff;
     font-size: 15px;
 }
 
-.rsg--sidebar-4 a.rsg--heading-71 {
+.rsg--sidebar-4 a.rsg--heading-72 {
     font-size: 17px;
     margin-bottom: 12px;
     display: block;
@@ -45,15 +45,15 @@ p.rsg--p-32 {
     padding: 0;
 }
 
-.rsg--sidebar-4 .rsg--search-66 {
+.rsg--sidebar-4 .rsg--search-67 {
     padding: 30px 0;
 }
 
-.rsg--sidebar-4 .rsg--isChild-70 {
+.rsg--sidebar-4 .rsg--isChild-71 {
     padding-left: 16px;
 }
 
-.rsg--sidebar-4 .rsg--input-67 {
+.rsg--sidebar-4 .rsg--input-68 {
     background: #FFFFFF;
     border: 1px solid #D8D8D8;
     box-sizing: border-box;
@@ -66,7 +66,7 @@ p.rsg--p-32 {
     height: 48px;
 }
 
-.rsg--sidebar-4 .rsg--list-68 {
+.rsg--sidebar-4 .rsg--list-69 {
     padding: 0;
 }
 

packages/ui-toolkit/package.json

@@ -38,7 +38,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-inline-react-svg": "^0.4.0",
     "babel-plugin-styled-components": "^1.2.1",
-    "babel-preset-joyent-portal": "^3.1.0",
+    "babel-preset-joyent-portal": "^3.2.0",
     "babel-template": "^6.26.0",
     "camel-case": "^3.0.0",
     "cross-env": "^5.0.5",
@@ -53,17 +53,17 @@
     "lodash.isequal": "^4.5.0",
     "lodash.isequalwith": "^4.4.0",
     "lodash.isstring": "^4.0.1",
-    "moment": "^2.19.0",
+    "moment": "^2.19.1",
     "normalized-styled-components": "^1.0.17",
     "pascal-case": "^2.0.1",
-    "polished": "^1.8.0",
+    "polished": "^1.8.1",
     "prop-types": "^15.6.0",
     "react-bundle": "^1.0.4",
     "react-input-range": "^1.2.1",
     "react-responsive": "^2.0.0",
-    "react-styled-flexboxgrid": "^2.0.3",
+    "react-styled-flexboxgrid": "^2.1.0",
     "redrun": "^5.9.18",
-    "reduce-css-calc": "^2.1.0",
+    "reduce-css-calc": "^2.1.1",
     "remcalc": "^1.0.9",
     "rnd-id": "^1.1.1",
     "styled-components": "^2.2.1",
@@ -80,8 +80,8 @@
     "babel-preset-stage-0": "^6.24.1",
     "chart.js": "^2.7.0",
     "css-loader": "^0.28.7",
-    "csso": "^3.2.0",
+    "csso": "^3.3.0",
-    "eslint": "^4.8.0",
+    "eslint": "^4.9.0",
     "eslint-config-joyent-portal": "3.1.0",
     "file-loader": "^1.1.5",
     "http-server": "^0.10.0",
@@ -95,13 +95,13 @@
     "navalia": "^1.2.0",
     "npm-run-all": "^4.1.1",
     "react": "^16.0.0",
-    "react-docgen": "^2.18.0",
+    "react-docgen": "^2.19.0",
     "react-docgen-displayname-handler": "^1.0.1",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "react-scripts": "^1.0.14",
-    "react-styleguidist": "^6.0.29",
+    "react-styleguidist": "^6.0.31",
     "react-test-renderer": "^16.0.0",
     "redux": "^3.7.2",
     "redux-form": "^7.1.1",
@@ -115,7 +115,7 @@
     "tinycolor2": "^1.4.1",
     "title-case": "^2.1.1",
     "url-loader": "^0.6.2",
-    "webpack": "^3.6.0"
+    "webpack": "^3.7.1"
   },
   "peerDependencies": {
     "chart.js": "^2.7.0",

packages/ui-toolkit/src/breadcrumb/index.js

@@ -5,18 +5,14 @@ import remcalc from 'remcalc';
 
 import View from '../layout/view-container';
 
-const Border = styled.div`
-  border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
-`;
-
 export default ({ children, ...rest }) => (
-  <Border {...rest}>
+  <div {...rest}>
     <View>
       <Row name="breadcrum">
         <Col xs={12}>{children}</Col>
       </Row>
     </View>
-  </Border>
+  </div>
 );
 
 export { default as Item } from './item';