Generic Builder Card Components (#13570)

* Introduce BuilderCard component family for use in query builder * Implement BuilderCard in data card component * Implement BuilderCard in selector list * Update function selector * Implement BuilderCard in tag selector and remove unused styles * Use AddCardButton and proper container classname * Remove unused imports
influxdata · Apr 23, 2019 · e063e8f · e063e8f
1 parent 6c20c6c
commit e063e8f
Show file tree

Hide file tree

Showing 16 changed files with 489 additions and 227 deletions.
diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss
@@ -93,14 +93,14 @@
 @import 'src/timeMachine/components/QueryBuilder.scss';
 @import 'src/timeMachine/components/RawFluxDataTable.scss';
 @import 'src/timeMachine/components/ToolbarTab.scss';
-@import 'src/timeMachine/components/FunctionSelector.scss';
 @import 'src/timeMachine/components/variableToolbar/VariableToolbar.scss';
 @import 'src/timeMachine/components/fluxFunctionsToolbar/FluxFunctionsToolbar.scss';
 @import 'src/timeMachine/components/view_options/TimeFormat.scss';
 @import 'src/timeMachine/components/view_options/ThresholdList.scss';
 @import 'src/timeMachine/components/view_options/HistogramOptions.scss';
 @import 'src/timeMachine/components/view_options/ViewOptions.scss';
 @import 'src/timeMachine/components/view_options/ViewTypeDropdown.scss';
+@import 'src/timeMachine/components/builderCard/BuilderCard.scss';
 @import 'src/dataLoaders/components/side_bar/SideBar.scss';
 @import 'src/dataLoaders/components/DataLoadersOverlay.scss';
 @import 'src/shared/components/EmptyGraphError.scss';

diff --git a/ui/src/timeMachine/components/AddCardButton.tsx b/ui/src/timeMachine/components/AddCardButton.tsx
@@ -0,0 +1,24 @@
+// Libraries
+import React, {PureComponent} from 'react'
+
+// Components
+import {Button, IconFont, ButtonShape} from '@influxdata/clockface'
+
+interface Props {
+  collapsible: boolean
+  onClick: () => void
+}
+
+export default class AddCardButton extends PureComponent<Props> {
+  public render() {
+    const {onClick} = this.props
+    return (
+      <Button
+        customClass="query-builder--add-card-button"
+        onClick={onClick}
+        icon={IconFont.Plus}
+        shape={ButtonShape.Square}
+      />
+    )
+  }
+}
diff --git a/ui/src/timeMachine/components/FunctionSelector.scss b/ui/src/timeMachine/components/FunctionSelector.scss
diff --git a/ui/src/timeMachine/components/FunctionSelector.tsx b/ui/src/timeMachine/components/FunctionSelector.tsx
@@ -5,6 +5,7 @@ import {connect} from 'react-redux'
 // Components
 import {Input} from '@influxdata/clockface'
 import SelectorList from 'src/timeMachine/components/SelectorList'
+import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
 
 // Actions
 import {selectFunction} from 'src/timeMachine/actions/queryBuilder'
@@ -42,20 +43,22 @@ class FunctionSelector extends PureComponent<Props, State> {
     const {searchTerm} = this.state
 
     return (
-      <div className="function-selector">
-        <h3>Aggregate Functions</h3>
-        <Input
-          customClass="function-selector--search"
-          value={searchTerm}
-          onChange={this.handleSetSearchTerm}
-          placeholder="Search functions..."
-        />
+      <BuilderCard className="function-selector">
+        <BuilderCard.Header title="Aggregate Functions" />
+        <BuilderCard.Menu>
+          <Input
+            customClass="function-selector--search"
+            value={searchTerm}
+            onChange={this.handleSetSearchTerm}
+            placeholder="Search functions..."
+          />
+        </BuilderCard.Menu>
         <SelectorList
           items={this.functions}
           selectedItems={this.selectedFunctions}
           onSelectItem={onSelectFunction}
         />
-      </div>
+      </BuilderCard>
     )
   }
 

diff --git a/ui/src/timeMachine/components/QueryBuilder.scss b/ui/src/timeMachine/components/QueryBuilder.scss
@@ -1,5 +1,3 @@
-@import 'src/style/modules';
-
 .query-builder {
   position: absolute;
   top: 0;
@@ -11,6 +9,10 @@
   flex-direction: column;
   @include no-user-select();
   background: $g3-castle;
+
+  .function-selector {
+    margin-left: $ix-marg-b;
+  }
 }
 
 .query-builder--cards {
@@ -19,36 +21,11 @@
   justify-content: space-between;
 }
 
-.query-builder--tag-selectors {
-  display: flex;
-  flex-wrap: nowrap;
-  flex: 1 1 0;
-  height: 100%;
-
-  .tag-selector {
-    margin-right: $ix-marg-b;
-    flex: 0 0 220px;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}
-
-.query-builder .function-selector {
-  flex: 0 0 206px;
-  margin-left: $ix-marg-b;
-}
-
-button.query-builder--add-tag-selector {
+.button.query-builder--add-card-button {
   height: 100%;
   background-color: $g4-onyx;
   border-color: $g4-onyx;
-  margin-right: 5px;
   flex-grow: 0;
   flex-shrink: 0;
 }
 
-.data-card {
-  padding: $ix-marg-b;
-}
diff --git a/ui/src/timeMachine/components/QueryBuilder.tsx b/ui/src/timeMachine/components/QueryBuilder.tsx
@@ -4,11 +4,11 @@ import {connect} from 'react-redux'
 import {range} from 'lodash'
 
 // Components
-import {Button, ButtonShape, IconFont} from '@influxdata/clockface'
 import TagSelector from 'src/timeMachine/components/TagSelector'
 import QueryBuilderDataCard from 'src/timeMachine/components/QueryBuilderDataCard'
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 import FunctionSelector from 'src/timeMachine/components/FunctionSelector'
+import AddCardButton from 'src/timeMachine/components/AddCardButton'
 
 // Actions
 import {loadBuckets, addTagSelector} from 'src/timeMachine/actions/queryBuilder'
@@ -46,7 +46,7 @@ class TimeMachineQueryBuilder extends PureComponent<Props, State> {
       <div className="query-builder" data-testid="query-builder">
         <div className="query-builder--cards">
           <FancyScrollbar>
-            <div className="query-builder--tag-selectors">
+            <div className="builder-card--list">
               <QueryBuilderDataCard />
               {range(tagFiltersLength).map(i => (
                 <TagSelector key={i} index={i} />
@@ -67,14 +67,7 @@ class TimeMachineQueryBuilder extends PureComponent<Props, State> {
       return null
     }
 
-    return (
-      <Button
-        shape={ButtonShape.Square}
-        icon={IconFont.Plus}
-        onClick={onAddTagSelector}
-        customClass="query-builder--add-tag-selector"
-      />
-    )
+    return <AddCardButton onClick={onAddTagSelector} collapsible={false} />
   }
 }
 

diff --git a/ui/src/timeMachine/components/QueryBuilderDataCard.tsx b/ui/src/timeMachine/components/QueryBuilderDataCard.tsx
@@ -4,15 +4,19 @@ import React, {Component} from 'react'
 // Components
 import {Form} from '@influxdata/clockface'
 import QueryBuilderBucketDropdown from 'src/timeMachine/components/QueryBuilderBucketDropdown'
+import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
 
 export default class QueryBuilderDataCard extends Component<{}> {
   public render() {
     return (
-      <div className="tag-selector data-card">
-        <Form.Element label="Bucket">
-          <QueryBuilderBucketDropdown />
-        </Form.Element>
-      </div>
+      <BuilderCard>
+        <BuilderCard.Header title="From" />
+        <BuilderCard.Body>
+          <Form.Element label="Bucket">
+            <QueryBuilderBucketDropdown />
+          </Form.Element>
+        </BuilderCard.Body>
+      </BuilderCard>
     )
   }
 }
diff --git a/ui/src/timeMachine/components/SelectorList.tsx b/ui/src/timeMachine/components/SelectorList.tsx
@@ -1,6 +1,8 @@
+// Libraries
 import React, {SFC} from 'react'
 
-import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
+// Components
+import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
 
 interface Props {
   items: string[]
@@ -12,27 +14,25 @@ const SelectorList: SFC<Props> = props => {
   const {items, selectedItems, onSelectItem} = props
 
   return (
-    <div className="selector-list">
-      <FancyScrollbar>
-        {items.map(item => {
-          const selectedClass = selectedItems.includes(item) ? 'selected' : ''
-          const title = selectedItems.includes(item)
-            ? 'Click to remove this filter'
-            : `Click to filter by ${item}`
+    <BuilderCard.Body addPadding={false}>
+      {items.map(item => {
+        const selectedClass = selectedItems.includes(item) ? 'selected' : ''
+        const title = selectedItems.includes(item)
+          ? 'Click to remove this filter'
+          : `Click to filter by ${item}`
 
-          return (
-            <div
-              className={`selector-list--item ${selectedClass}`}
-              key={item}
-              onClick={() => onSelectItem(item)}
-              title={title}
-            >
-              {item}
-            </div>
-          )
-        })}
-      </FancyScrollbar>
-    </div>
+        return (
+          <div
+            className={`selector-list--item ${selectedClass}`}
+            key={item}
+            onClick={() => onSelectItem(item)}
+            title={title}
+          >
+            {item}
+          </div>
+        )
+      })}
+    </BuilderCard.Body>
   )
 }
 

diff --git a/ui/src/timeMachine/components/TagSelector.scss b/ui/src/timeMachine/components/TagSelector.scss
@@ -1,38 +1,10 @@
-@import "src/style/modules";
-
-.tag-selector {
-  min-height: 130px;
-  background: $g4-onyx;
-  border-radius: $radius;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  font-size: $form-sm-font;
-  position: relative;
-}
-
-.tag-selector--top,
 .tag-selector--search {
-  margin: $ix-marg-b;
-}
-
-.tag-selector--top {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.tag-selector--search {
-  margin-top: 0;
+  margin-top: $ix-marg-a;
   width: initial !important;
 }
 
-button.tag-selector--remove,
 .tag-selector--count {
   flex: 0 0 $form-sm-height;
-  margin-left: $ix-marg-b;
-}
-
-.tag-selector--count {
   height: $form-sm-height;
   background-color: $g2-kevlar;
   border-radius: 50%;
@@ -41,31 +13,5 @@ button.tag-selector--remove,
   font-weight: 900;
   user-select: none;
   color: $c-pool;
-}
-
-.tag-selector .selector-list {
-  flex: 1 1 0;
-}
-
-
-.tag-selector--empty {
-  pointer-events: none;
-  flex: 1 1 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: $ix-marg-c $ix-marg-c $ix-marg-d $ix-marg-c;
-  color: $g8-storm;
-  font-weight: 500;
-  font-size: 16px;
-  text-align: center;
-  text-transform: uppercase;
-
-  small {
-    display: block;
-    font-size: 14px;
-    text-transform: none;
-    margin-top: $ix-marg-b;
-  }
+  font-size: 13px;
 }