Rename OneOrAny component to OptIn

ui/src/shared/components/OptIn.js

@@ -6,7 +6,7 @@ const RESET_TIMEOUT = 300
 const TOGGLE_CLICKED_TIMEOUT = 20
 const BLUR_FOCUS_GAP_TIMEOUT = 10
 
-class OneOrAny extends Component {
+class OptIn extends Component {
   constructor(props) {
     super(props)
 
@@ -133,20 +133,18 @@ class OneOrAny extends Component {
     const {useRightValue, rightValue} = this.state
 
     return (
+      <div className={classnames('opt-in', {'right-toggled': useRightValue})}>
         <div
-        className={classnames('one-or-any', {'right-toggled': useRightValue})}
-      >
-        <div
-          className="one-or-any--left-label"
+          className="opt-in--left-label"
           onClick={this.handleClickLeftValueField()}
         >
           {leftLabel}
         </div>
         <div
-          className="one-or-any--groove-knob-container"
+          className="opt-in--groove-knob-container"
           onClick={this.handleClickToggle()}
         >
-          <div className="one-or-any--groove-knob" />
+          <div className="opt-in--groove-knob" />
         </div>
         <input
           className="form-control input-sm"
@@ -170,7 +168,7 @@ class OneOrAny extends Component {
   }
 }
 
-OneOrAny.defaultProps = {
+OptIn.defaultProps = {
   leftLabel: 'auto',
   leftValue: '',
   rightLabel: 'Custom Value',
@@ -178,7 +176,7 @@ OneOrAny.defaultProps = {
 }
 const {func, string} = PropTypes
 
-OneOrAny.propTypes = {
+OptIn.propTypes = {
   leftLabel: string,
   leftValue: string,
   rightLabel: string,
@@ -186,4 +184,4 @@ OneOrAny.propTypes = {
   onSetValue: func.isRequired,
 }
 
-export default OneOrAny
+export default OptIn

ui/src/style/chronograf.scss

@@ -36,7 +36,7 @@
 @import 'components/graph';
 @import 'components/input-tag-list';
 @import 'components/newsfeed';
-@import 'components/one-or-any';
+@import 'components/opt-in';
 @import 'components/page-header-dropdown';
 @import 'components/page-header-editable';
 @import 'components/page-spinner';

ui/src/style/components/opt-in.scss

@@ -1,14 +1,14 @@
 /*
-  One or Any Input
+  Opt In Component
   ------------------------------------------------------------------------------
   User can toggle between a single value or any value
 */
-.one-or-any {
+.opt-in {
   display: flex;
   align-items: stretch;
   flex-wrap: nowrap;
 }
-.one-or-any--left-label {
+.opt-in--left-label {
   border: 2px solid $g5-pepper;
   background-color: $g2-kevlar;
   color: $c-pool;
@@ -22,7 +22,7 @@
   @include no-user-select();
   transition: background-color 0.25s ease, color 0.25s ease;
 }
-.one-or-any--groove-knob-container {
+.opt-in--groove-knob-container {
   display: flex;
   align-items: center;
   border: 2px solid $g5-pepper;
@@ -31,7 +31,7 @@
   position: relative;
 
   // Groove
-  > div.one-or-any--groove-knob {
+  > div.opt-in--groove-knob {
     margin: 0 10px;
     z-index: 3;
     width: 28px;
@@ -85,22 +85,22 @@
   }
 }
 // Customize form input
-.one-or-any > input.form-control {
+.opt-in > input.form-control {
   border-radius: 0 4px 4px 0;
   font-family: $code-font;
   flex: 1 0 0;
 }
 // Right value toggled state
-.one-or-any.right-toggled {
-  .one-or-any--groove-knob:after {
+.opt-in.right-toggled {
+  .opt-in--groove-knob:after {
     transform: translate(0%, -50%);
   }
   // Fade out left, fade in right
-  .one-or-any--groove-knob-container:before {
+  .opt-in--groove-knob-container:before {
     opacity: 0;
   }
   // Make left label look disabled
-  .one-or-any--left-label {
+  .opt-in--left-label {
     background-color: $g3-castle;
     color: $g8-storm;
     font-style: italic;