Move bucket selection to first card in Query Builder (#12782)

* Break out raw data toggle into own component

* Move bucket selection into "first" card in query builder

* Appease linter gods

* Updoot

CHANGELOG.md

@@ -15,6 +15,8 @@
 
 ### UI Improvements
 
+1. [12782](https://github.com/influxdata/influxdb/pull/12782): Move bucket selection in the query builder to the first card in the list
+
 ## v2.0.0-alpha.6 [2019-03-15]
 
 ### Release Notes

ui/src/timeMachine/components/Queries.tsx

@@ -11,20 +11,20 @@ import TimeRangeDropdown from 'src/shared/components/TimeRangeDropdown'
 import TimeMachineQueryTab from 'src/timeMachine/components/QueryTab'
 import TimeMachineQueryBuilder from 'src/timeMachine/components/QueryBuilder'
 import SubmitQueryButton from 'src/timeMachine/components/SubmitQueryButton'
+import RawDataToggle from 'src/timeMachine/components/RawDataToggle'
 import {
   Button,
   IconFont,
   Alignment,
   ButtonShape,
-  SlideToggle,
   ComponentSize,
   ComponentColor,
   ComponentSpacer,
 } from '@influxdata/clockface'
 
 // Actions
 import {addQuery} from 'src/timeMachine/actions'
-import {setTimeRange, setIsViewingRawData} from 'src/timeMachine/actions'
+import {setTimeRange} from 'src/timeMachine/actions'
 
 // Utils
 import {getActiveTimeMachine, getActiveQuery} from 'src/timeMachine/selectors'
@@ -40,26 +40,18 @@ interface StateProps {
   activeQuery: DashboardQuery
   draftQueries: DashboardDraftQuery[]
   timeRange: TimeRange
-  isViewingRawData: boolean
 }
 
 interface DispatchProps {
   onAddQuery: typeof addQuery
   onSetTimeRange: typeof setTimeRange
-  onSetIsViewingRawData: typeof setIsViewingRawData
 }
 
 type Props = StateProps & DispatchProps
 
 class TimeMachineQueries extends PureComponent<Props> {
   public render() {
-    const {
-      draftQueries,
-      onAddQuery,
-      timeRange,
-      onSetTimeRange,
-      isViewingRawData,
-    } = this.props
+    const {draftQueries, onAddQuery, timeRange, onSetTimeRange} = this.props
 
     return (
       <div className="time-machine-queries">
@@ -83,12 +75,7 @@ class TimeMachineQueries extends PureComponent<Props> {
           </div>
           <div className="time-machine-queries--buttons">
             <ComponentSpacer align={Alignment.Right}>
-              <SlideToggle.Label text="View Raw Data" />
-              <SlideToggle
-                active={isViewingRawData}
-                onChange={this.handleToggleIsViewingRawData}
-                size={ComponentSize.ExtraSmall}
-              />
+              <RawDataToggle />
               <CSVExportButton />
               <TimeMachineRefreshDropdown />
               <TimeRangeDropdown
@@ -116,28 +103,19 @@ class TimeMachineQueries extends PureComponent<Props> {
       return null
     }
   }
-
-  private handleToggleIsViewingRawData = () => {
-    const {isViewingRawData, onSetIsViewingRawData} = this.props
-
-    onSetIsViewingRawData(!isViewingRawData)
-  }
 }
 
 const mstp = (state: AppState) => {
-  const {draftQueries, timeRange, isViewingRawData} = getActiveTimeMachine(
-    state
-  )
+  const {draftQueries, timeRange} = getActiveTimeMachine(state)
 
   const activeQuery = getActiveQuery(state)
 
-  return {timeRange, activeQuery, draftQueries, isViewingRawData}
+  return {timeRange, activeQuery, draftQueries}
 }
 
 const mdtp = {
   onAddQuery: addQuery,
   onSetTimeRange: setTimeRange,
-  onSetIsViewingRawData: setIsViewingRawData,
 }
 
 export default connect<StateProps, DispatchProps>(

ui/src/timeMachine/components/QueryBuilder.scss

@@ -1,28 +1,18 @@
-@import "src/style/modules";
+@import 'src/style/modules';
 
 .query-builder {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
-  padding: 10px;
+  padding: $ix-marg-b;
   display: flex;
   flex-direction: column;
   @include no-user-select();
   background: $g3-castle;
 }
 
-.query-builder--buttons {
-  display: flex;
-  justify-content: flex-start;
-
-  > .form--element {
-    width: 200px;
-    margin-right: 5px;
-  }
-}
-
 .query-builder--cards {
   flex: 1 1 0;
   display: flex;
@@ -36,8 +26,8 @@
   height: 100%;
 
   .tag-selector {
-    margin-right: $ix-marg-a;
-    flex: 0 0 250px;
+    margin-right: $ix-marg-b;
+    flex: 0 0 220px;
 
     &:last-child {
       margin-right: 0;
@@ -47,7 +37,7 @@
 
 .query-builder .function-selector {
   flex: 0 0 206px;
-  margin-left: 10px;
+  margin-left: $ix-marg-b;
 }
 
 button.query-builder--add-tag-selector {
@@ -58,3 +48,7 @@ button.query-builder--add-tag-selector {
   flex-grow: 0;
   flex-shrink: 0;
 }
+
+.data-card {
+  padding: $ix-marg-b;
+}

ui/src/timeMachine/components/QueryBuilder.tsx

@@ -5,9 +5,8 @@ import {range} from 'lodash'
 
 // Components
 import {Button, ButtonShape, IconFont} from '@influxdata/clockface'
-import {Form} from 'src/clockface'
 import TagSelector from 'src/timeMachine/components/TagSelector'
-import QueryBuilderBucketDropdown from 'src/timeMachine/components/QueryBuilderBucketDropdown'
+import QueryBuilderDataCard from 'src/timeMachine/components/QueryBuilderDataCard'
 import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 import FunctionSelector from 'src/timeMachine/components/FunctionSelector'
 
@@ -48,14 +47,10 @@ class TimeMachineQueryBuilder extends PureComponent<Props, State> {
 
     return (
       <div className="query-builder" data-testid="query-builder">
-        <div className="query-builder--buttons">
-          <Form.Element label="Bucket">
-            <QueryBuilderBucketDropdown />
-          </Form.Element>
-        </div>
         <div className="query-builder--cards">
           <FancyScrollbar>
             <div className="query-builder--tag-selectors">
+              <QueryBuilderDataCard />
               {range(tagFiltersLength).map(i => (
                 <TagSelector key={i} index={i} />
               ))}

ui/src/timeMachine/components/QueryBuilderDataCard.tsx

@@ -0,0 +1,18 @@
+// Libraries
+import React, {Component} from 'react'
+
+// Components
+import {Form} from 'src/clockface'
+import QueryBuilderBucketDropdown from 'src/timeMachine/components/QueryBuilderBucketDropdown'
+
+export default class QueryBuilderDataCard extends Component<{}> {
+  public render() {
+    return (
+      <div className="tag-selector data-card">
+        <Form.Element label="Bucket">
+          <QueryBuilderBucketDropdown />
+        </Form.Element>
+      </div>
+    )
+  }
+}

ui/src/timeMachine/components/RawDataToggle.tsx

@@ -0,0 +1,63 @@
+// Libraries
+import React, {PureComponent} from 'react'
+import {connect} from 'react-redux'
+
+// Components
+import {SlideToggle, ComponentSize} from '@influxdata/clockface'
+
+// Actions
+import {setIsViewingRawData} from 'src/timeMachine/actions'
+
+// Utils
+import {getActiveTimeMachine} from 'src/timeMachine/selectors'
+
+// Types
+import {AppState} from 'src/types/v2'
+
+interface StateProps {
+  isViewingRawData: boolean
+}
+
+interface DispatchProps {
+  onSetIsViewingRawData: typeof setIsViewingRawData
+}
+
+type Props = StateProps & DispatchProps
+
+class TimeMachineQueries extends PureComponent<Props> {
+  public render() {
+    const {isViewingRawData} = this.props
+
+    return (
+      <>
+        <SlideToggle.Label text="View Raw Data" />
+        <SlideToggle
+          active={isViewingRawData}
+          onChange={this.handleToggleIsViewingRawData}
+          size={ComponentSize.ExtraSmall}
+        />
+      </>
+    )
+  }
+
+  private handleToggleIsViewingRawData = () => {
+    const {isViewingRawData, onSetIsViewingRawData} = this.props
+
+    onSetIsViewingRawData(!isViewingRawData)
+  }
+}
+
+const mstp = (state: AppState) => {
+  const {isViewingRawData} = getActiveTimeMachine(state)
+
+  return {isViewingRawData}
+}
+
+const mdtp = {
+  onSetIsViewingRawData: setIsViewingRawData,
+}
+
+export default connect<StateProps, DispatchProps>(
+  mstp,
+  mdtp
+)(TimeMachineQueries)