From 60bd9157b63e9469afe0c8f687dc8e544acd673c Mon Sep 17 00:00:00 2001
From: Caleb Coy <caleb@kolide.co>
Date: Wed, 29 Aug 2018 10:38:43 -0400
Subject: [PATCH] convert rocker button to standard buttons (#1906)

---
 frontend/components/buttons/Rocker/Rocker.jsx |  64 --------
 .../components/buttons/Rocker/_styles.scss    | 137 ------------------
 frontend/components/buttons/Rocker/index.js   |   1 -
 .../hosts/ManageHostsPage/ManageHostsPage.jsx |  35 +++--
 .../pages/hosts/ManageHostsPage/_styles.scss  |  13 ++
 5 files changed, 34 insertions(+), 216 deletions(-)
 delete mode 100644 frontend/components/buttons/Rocker/Rocker.jsx
 delete mode 100644 frontend/components/buttons/Rocker/_styles.scss
 delete mode 100644 frontend/components/buttons/Rocker/index.js

diff --git a/frontend/components/buttons/Rocker/Rocker.jsx b/frontend/components/buttons/Rocker/Rocker.jsx
deleted file mode 100644
index 052700c66d..0000000000
--- a/frontend/components/buttons/Rocker/Rocker.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import { noop } from 'lodash';
-import classnames from 'classnames';
-
-import Icon from 'components/icons/Icon';
-
-class Rocker extends Component {
-
-  static propTypes = {
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    options: PropTypes.shape({
-      rightText: PropTypes.string,
-      rightIcon: PropTypes.string,
-      leftText: PropTypes.string,
-      leftIcon: PropTypes.string,
-    }),
-    value: PropTypes.string,
-  };
-
-  static defaultProps = {
-    onChange: noop,
-  };
-
-  handleChange = (evt) => {
-    const { onChange, options: { rightText, leftText }, value } = this.props;
-    evt.preventDefault();
-
-    const newOption = value === leftText ? rightText : leftText;
-
-    onChange(newOption);
-  };
-
-  render () {
-    const { handleChange } = this;
-    const { className, options, value } = this.props;
-    const { rightText, rightIcon, leftText, leftIcon } = options;
-    const baseClass = 'kolide-rocker';
-
-    const rockerClasses = classnames(baseClass, className);
-    const buttonClasses = classnames(`${baseClass}__button`, 'button', 'button--unstyled', {
-      [`${baseClass}__button--checked`]: value === leftText,
-    });
-
-    return (
-      <div className={rockerClasses}>
-        <button className={buttonClasses} onClick={handleChange}>
-          <span className={`${baseClass}__switch ${baseClass}__switch--left`}>
-            <span className={`${baseClass}__text`}>
-              <Icon name={leftIcon} /> {leftText}
-            </span>
-          </span>
-          <span className={`${baseClass}__switch ${baseClass}__switch--right`}>
-            <span className={`${baseClass}__text`}>
-              <Icon name={rightIcon} /> {rightText}
-            </span>
-          </span>
-        </button>
-      </div>
-    );
-  }
-}
-
-export default Rocker;
diff --git a/frontend/components/buttons/Rocker/_styles.scss b/frontend/components/buttons/Rocker/_styles.scss
deleted file mode 100644
index ec5eb932d1..0000000000
--- a/frontend/components/buttons/Rocker/_styles.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-.kolide-rocker {
-  box-shadow: 0 0 9px 0 rgba(72, 81, 109, 0.1);
-
-  &__button {
-    transform: translateY(-19px);
-    position: relative;
-    cursor: pointer;
-    width: 180px;
-    height: 36px;
-    border-radius: 2px;
-    background-color: #9fa5ab;
-    display: block;
-    padding: 0 2px;
-    background: transparent;
-    border: 0;
-    overflow: visible;
-
-    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-      transform: translateY(1px);
-    }
-
-    &--checked > .kolide-rocker__switch--left {
-      span {
-        @include transform(skewX(0) rotateZ(0));
-        top: 3px;
-      }
-
-      &::after {
-        @include transform(skewX(0) rotateZ(0) translate(0, 0));
-        left: 0;
-        width: 90px;
-        height: 35px;
-        bottom: 3px;
-      }
-    }
-
-    &--checked > .kolide-rocker__switch--right {
-      span {
-        @include transform(skewX(-6deg) rotateZ(-6deg));
-        top: -6px;
-      }
-
-      &::after {
-        @include transform(skewX(-6deg) rotateZ(-6deg) translate(-1px, -3px));
-        right: -1px;
-        width: 90px;
-        height: 35px;
-        bottom: 5px;
-      }
-    }
-  }
-
-  &__switch {
-    @include user-select(none);
-    @include position(absolute, auto auto auto auto);
-    font-family: 'Oxygen', $helvetica;
-    font-weight: 600;
-    font-style: normal;
-    box-sizing: border-box;
-    text-transform: uppercase;
-    display: block;
-    width: 90px;
-    height: 35px;
-
-    &::after {
-      @include transition(transform 50ms ease-in-out, bottom 50ms ease-in-out);
-      bottom: 3px;
-      border-radius: 2px;
-      content: attr(data-content);
-      width: 90px;
-      height: 33px;
-      position: absolute;
-      box-sizing: border-box;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    span {
-      @include transition(transform 50ms ease-in-out, top 50ms ease-in-out);
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      font-size: 15px;
-      color: #3f64ed;
-      letter-spacing: 0.6px;
-      display: block;
-      text-align: center;
-      width: 100%;
-
-      .kolidecon {
-        margin-right: 5px;
-      }
-    }
-
-    &--left {
-      @include linear-gradient(-180deg, #eaedfb 81%, #aab3bd 100%);
-      left: 2px;
-
-      span {
-        @include transform(skewX(6deg) rotateZ(6deg));
-        color: #b8c2e3;
-        transform-origin: left top;
-        top: -6px;
-      }
-
-      &::after {
-        @include transform(skewX(6deg) rotateZ(6deg) translate(-1px, -3px));
-        background-color: #fff;
-        border: solid 1px #d4d8df;
-        border-radius: 2px 1px 1px 2px;
-        left: 1px;
-        bottom: 5px;
-      }
-    }
-
-    &--right {
-      @include linear-gradient(-180deg, #eaedfb 81%, #aab3bd 100%);
-      right: 2px;
-
-      span {
-        transform-origin: right top;
-        top: 4px;
-      }
-
-      &::after {
-        background-color: #ffffff;
-        border: solid 1px #d4d8df;
-        border-radius: 1px 2px 2px 1px;
-        right: 0;
-        bottom: 3px;
-      }
-    }
-  }
-}
diff --git a/frontend/components/buttons/Rocker/index.js b/frontend/components/buttons/Rocker/index.js
deleted file mode 100644
index c19ce0e5f3..0000000000
--- a/frontend/components/buttons/Rocker/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from './Rocker';
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
index c6217103b6..726ec3feb2 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import FileSaver from 'file-saver';
 import { push } from 'react-router-redux';
 import { isEqual, orderBy, slice, sortBy } from 'lodash';
+import classNames from 'classnames';
 
 import Kolide from 'kolide';
 import AddHostModal from 'components/hosts/AddHostModal';
@@ -16,7 +17,6 @@ import LabelForm from 'components/forms/LabelForm';
 import Modal from 'components/modals/Modal';
 import PlatformIcon from 'components/icons/PlatformIcon';
 import QuerySidePanel from 'components/side_panels/QuerySidePanel';
-import Rocker from 'components/buttons/Rocker';
 import labelInterface from 'interfaces/label';
 import hostInterface from 'interfaces/host';
 import osqueryTableInterface from 'interfaces/osquery_table';
@@ -248,10 +248,12 @@ export class ManageHostsPage extends Component {
       });
   }
 
-  onToggleDisplay = (val) => {
+  onToggleDisplay = (event) => {
+    event.preventDefault();
     const { dispatch } = this.props;
+    const value = event.currentTarget.dataset.value;
 
-    dispatch(setDisplay(val));
+    dispatch(setDisplay(value));
 
     return false;
   }
@@ -501,12 +503,6 @@ export class ManageHostsPage extends Component {
 
     const { count, description, display_text: displayText, statusLabelKey, type } = selectedLabel;
     const { onToggleDisplay } = this;
-    const buttonOptions = {
-      rightIcon: 'grid-select',
-      rightText: 'Grid',
-      leftIcon: 'list-select',
-      leftText: 'List',
-    };
 
     const hostCount = type === 'status' ? statusLabels[`${statusLabelKey}`] : count;
     const hostsTotalDisplay = hostCount === 1 ? '1 Host Total' : `${hostCount} Hosts Total`;
@@ -526,11 +522,22 @@ export class ManageHostsPage extends Component {
         </div>
         <div className={`${baseClass}__topper`}>
           <p className={`${baseClass}__host-count`}>{hostsTotalDisplay}</p>
-          <Rocker
-            onChange={onToggleDisplay}
-            options={buttonOptions}
-            value={display}
-          />
+          <a
+            onClick={onToggleDisplay}
+            className={classNames(`${baseClass}__toggle-view`, {
+              [`${baseClass}__toggle-view--active`]: display === 'List',
+            })}
+            data-value="List"
+          >{<svg viewBox="0 0 24 24" className="kolidecon"><path d="M9 4h11a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm0 7h11a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zm0 7h11a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1zm-4.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" fillRule="evenodd" /></svg>}
+          </a>
+          <a
+            onClick={onToggleDisplay}
+            className={classNames(`${baseClass}__toggle-view`, {
+              [`${baseClass}__toggle-view--active`]: display === 'Grid',
+            })}
+            data-value="Grid"
+          >{<svg viewBox="0 0 24 24" className="kolidecon"><path d="M5 15v4h4v-4H5zm-1-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm11 2v4h4v-4h-4zm-1-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1zm1-8v4h4V5h-4zm-1-2h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM5 5v4h4V5H5zM4 3h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" fillRule="nonzero" /></svg>}
+          </a>
         </div>
       </div>
     );
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index 772b882217..ecb5e8306d 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -100,4 +100,17 @@
       }
     }
   }
+  &__toggle-view {
+    .kolidecon {
+      width: 24px;
+      height: 24px;
+      margin-left: 12px;
+      fill: $accent-dark;
+    }
+    &--active{
+      .kolidecon {
+        fill: $link;
+      }
+    }
+  }
 }