Polish/query builder checkboxes

CHANGELOG.md

@@ -8,6 +8,7 @@
 1. [13797](https://github.com/influxdata/influxdb/pull/13797): Expand tab key presses to 2 spaces in the Flux editor
 
 ### UI Improvements
+1. [#13835](https://github.com/influxdata/influxdb/pull/13835): Render checkboxes in query builder tag selection lists
 
 ## v2.0.0-alpha.9 [2019-05-01]
 

ui/src/authorizations/components/BucketsSelector.tsx

@@ -89,6 +89,7 @@ class BucketsSelector extends PureComponent<Props> {
                   items={sortedBuckets.map(b => b.name)}
                   selectedItems={selectedBuckets}
                   onSelectItem={onSelect}
+                  multiSelect={false}
                 />
               )}
             </SortingHat>

ui/src/timeMachine/components/FunctionSelector.tsx

@@ -57,6 +57,7 @@ class FunctionSelector extends PureComponent<Props, State> {
           items={this.functions}
           selectedItems={this.selectedFunctions}
           onSelectItem={onSelectFunction}
+          multiSelect={true}
         />
       </BuilderCard>
     )

ui/src/timeMachine/components/SelectorList.scss

@@ -1,27 +1,76 @@
 @import "src/style/modules";
 
+$selector-list--checkbox-size: 14px;
+$selector-list--dot-size: 6px;
+$selector-list--h-padding: $ix-marg-c;
+
 .selector-list--item {
   font-weight: 500;
-  padding: ($ix-marg-a + $ix-border) 15px;
-  margin-bottom: 1px;
+  padding: ($ix-marg-a + $ix-border) $selector-list--h-padding;
+  margin-bottom: 2px;
   cursor: pointer;
-  color: $g14-chromium;
+  color: $g12-forge;
   font-family: $code-font;
   font-size: $form-sm-font;
   line-height: $form-sm-font;
-  white-space: nowrap;
+  // white-space: nowrap;
+  transition: background-color 0.25s ease, color 0.25s ease;
+
+  &:hover {
+    background: $g5-pepper;
+  }
 
   &.selected {
     background: $c-pool;
-    color: $g18-cloud;
+    color: $g20-white;
   }
 
   &.selected:hover {
     background: $c-pool;
-    opacity: 0.9;
   }
+}
 
-  &:hover {
-    background: $g5-pepper;
+.selector-list--checkbox {
+  padding-left: $ix-marg-d - $ix-border;
+  position: relative;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: background-color 0.25s ease;
+  }
+
+  &:before {
+    left: $selector-list--h-padding;
+    z-index: 2;
+    width: $selector-list--checkbox-size;
+    height: $selector-list--checkbox-size;
+    background-color: $g2-kevlar;
+    border-radius: 3px;
+  }
+
+  &:after {
+    left: $selector-list--h-padding;
+    z-index: 3;
+    width: $selector-list--dot-size;
+    height: $selector-list--dot-size;
+    background-color: $c-hydrogen;
+    transition: opacity 0.25s ease, transform 0.25s ease;
+    border-radius: 50%;
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1.8,1.8);
+  }
+
+  &.selected {
+    &:before {
+      background-color: $c-sapphire;
+    }
+    &:after {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1,1);
+    }
   }
 }

ui/src/timeMachine/components/SelectorList.tsx

@@ -1,5 +1,6 @@
 // Libraries
 import React, {SFC} from 'react'
+import classnames from 'classnames'
 
 // Components
 import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
@@ -8,22 +9,27 @@ interface Props {
   items: string[]
   selectedItems: string[]
   onSelectItem: (item: string) => void
+  multiSelect: boolean
 }
 
 const SelectorList: SFC<Props> = props => {
-  const {items, selectedItems, onSelectItem} = props
+  const {items, selectedItems, onSelectItem, multiSelect} = props
 
   return (
     <BuilderCard.Body addPadding={false}>
       {items.map(item => {
-        const selectedClass = selectedItems.includes(item) ? 'selected' : ''
+        const className = classnames('selector-list--item', {
+          selected: selectedItems.includes(item),
+          'selector-list--checkbox': multiSelect,
+        })
+
         const title = selectedItems.includes(item)
           ? 'Click to remove this filter'
           : `Click to filter by ${item}`
 
         return (
           <div
-            className={`selector-list--item ${selectedClass}`}
+            className={className}
             data-testid={`selector-list ${item}`}
             key={item}
             onClick={() => onSelectItem(item)}

ui/src/timeMachine/components/TagSelector.tsx

@@ -184,6 +184,7 @@ class TagSelector extends PureComponent<Props> {
         items={values}
         selectedItems={selectedValues}
         onSelectItem={this.handleSelectValue}
+        multiSelect={true}
       />
     )
   }

ui/src/timeMachine/components/builderCard/BuilderCardBody.tsx

@@ -22,7 +22,11 @@ export default class BuilderCardBody extends PureComponent<Props> {
 
     if (scrollable) {
       return (
-        <DapperScrollbars className="builder-card--body" testID={testID}>
+        <DapperScrollbars
+          className="builder-card--body"
+          style={{maxWidth: '100%', maxHeight: '100%'}}
+          testID={testID}
+        >
           {this.children}
         </DapperScrollbars>
       )

ui/src/timeMachine/components/queryBuilder/BucketsSelector.tsx

@@ -96,6 +96,7 @@ const Selector: FunctionComponent<SelectorProps> = ({
       items={list}
       selectedItems={[selected]}
       onSelectItem={onSelect}
+      multiSelect={false}
     />
   )
 }