feat(schemaBrowser): add "Flux Sync" toggle button (#5502)

* feat: add heading and flux sync toggle button

* style: add icon and style to flux sync toggle label

* chore: move `SchemaBrowserHeading` into a separate file

* feat: add fluxSync to flux query builder context

* refactor: update class name to `schema-browser-heading`

* chore: add memo to SchemaBrowserHeading and add paramter to toggleFluxSync func

* chore: remove comment

* chore: javascript syntax

Author: appletreeisyellow

src/dataExplorer/components/Schema.scss

@@ -24,6 +24,23 @@
   }
 }
 
+.schema-browser-heading {
+  padding-bottom: $cf-space-2xs;
+
+  .schema-browser-heading--text {
+    font-size: 16px;
+    font-weight: $cf-font-weight--bold;
+  }
+
+  .flux-sync--label {
+    padding-left: $cf-space-2xs;
+
+    .selector-title {
+      padding-bottom: 0;
+    }
+  }
+}
+
 .container-side-bar,
 .container-side-bar--fields,
 .container-side-bar--tag-keys,
@@ -35,14 +52,18 @@
 
 .selector-title {
   padding-bottom: $cf-space-2xs;
-}
 
-.selector-title--icon {
-  padding-left: $cf-space-2xs;
-}
+  .selector-title--question-mark {
+    padding-left: $cf-space-2xs;
+  }
+
+  .selector-title--question-mark .cf-question-mark-tooltip {
+    background-color: $cf-grey-35;
+  }
 
-.selector-title--icon .cf-question-mark-tooltip {
-  background-color: $cf-grey-35;
+  .selector-title--icon {
+    padding-right: 2px;
+  }
 }
 
 .field-selector,

src/dataExplorer/components/Schema.tsx

@@ -8,6 +8,7 @@ import BucketSelector from 'src/dataExplorer/components/BucketSelector'
 import MeasurementSelector from 'src/dataExplorer/components/MeasurementSelector'
 import FieldSelector from 'src/dataExplorer/components/FieldSelector'
 import TagSelector from 'src/dataExplorer/components/TagSelector'
+import SchemaBrowserHeading from 'src/dataExplorer/components/SchemaBrowserHeading'
 
 // Context
 import {
@@ -80,6 +81,7 @@ const Schema: FC = () => {
               <div className="scroll--container">
                 <DapperScrollbars>
                   <div className="schema-browser" data-testid="schema-browser">
+                    <SchemaBrowserHeading />
                     <BucketSelector />
                     <div className="container-side-bar">
                       <MeasurementSelector />

src/dataExplorer/components/SchemaBrowserHeading.tsx

@@ -0,0 +1,55 @@
+import React, {FC, useContext, useMemo} from 'react'
+
+// Components
+import {
+  FlexBox,
+  InputLabel,
+  SlideToggle,
+  JustifyContent,
+  IconFont,
+} from '@influxdata/clockface'
+import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
+
+// Context
+import {FluxQueryBuilderContext} from 'src/dataExplorer/context/fluxQueryBuilder'
+
+const FLUX_SYNC_TOOLTIP = `Flux Sync autopopulates the script editor to help you \
+start a query. You can turn this feature on and off, but typing within this \
+section will disable synchronization.`
+
+const SchemaBrowserHeading: FC = () => {
+  const {fluxSync, toggleFluxSync} = useContext(FluxQueryBuilderContext)
+
+  const handleFluxSyncToggle = () => {
+    toggleFluxSync(!fluxSync)
+  }
+
+  return useMemo(
+    () => (
+      <FlexBox
+        className="schema-browser-heading"
+        justifyContent={JustifyContent.SpaceBetween}
+      >
+        <div className="schema-browser-heading--text">Schema Browser</div>
+        <FlexBox className="flux-sync">
+          <SlideToggle
+            className="flux-sync--toggle"
+            active={fluxSync}
+            onChange={handleFluxSyncToggle}
+            testID="flux-sync--toggle"
+          />
+          <InputLabel className="flux-sync--label">
+            <SelectorTitle
+              title="Flux Sync"
+              info={FLUX_SYNC_TOOLTIP}
+              icon={IconFont.Switch_New}
+            />
+          </InputLabel>
+        </FlexBox>
+      </FlexBox>
+    ),
+    [fluxSync]
+  )
+}
+
+export default SchemaBrowserHeading

src/dataExplorer/components/SelectorTitle.tsx

@@ -1,22 +1,29 @@
 import React, {FC} from 'react'
 
 // Componnents
-import {FlexBox, QuestionMarkTooltip} from '@influxdata/clockface'
+import {
+  FlexBox,
+  QuestionMarkTooltip,
+  Icon,
+  IconFont,
+} from '@influxdata/clockface'
 
 // Styles
 import './Schema.scss'
 
 interface TitleProps {
   title: string
-  info?: string // TODO: markdon? since there might be link
+  info?: string
+  icon?: IconFont
 }
 
-const SelectorTitle: FC<TitleProps> = ({title, info = ''}) => {
+const SelectorTitle: FC<TitleProps> = ({title, info = '', icon = null}) => {
   return (
     <FlexBox className="selector-title">
+      {icon && <Icon glyph={icon} className="selector-title--icon" />}
       <div>{title}</div>
       {info && (
-        <div className="selector-title--icon">
+        <div className="selector-title--question-mark">
           <QuestionMarkTooltip
             tooltipContents={info}
             diameter={14}

src/dataExplorer/context/fluxQueryBuilder.tsx

@@ -38,6 +38,10 @@ const debouncer = (action: NOOP): void => {
 }
 
 interface FluxQueryBuilderContextType {
+  // Flux Sync
+  fluxSync: boolean
+  toggleFluxSync: (synced: boolean) => void
+
   // Schema
   selectedBucket: Bucket
   selectedMeasurement: string
@@ -50,6 +54,10 @@ interface FluxQueryBuilderContextType {
 }
 
 const DEFAULT_CONTEXT: FluxQueryBuilderContextType = {
+  // Flux Sync
+  fluxSync: true,
+  toggleFluxSync: _s => {},
+
   // Schema
   selectedBucket: null,
   selectedMeasurement: '',
@@ -85,6 +93,10 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
     }
   }, [selection.bucket])
 
+  const handleToggleFluxSync = (synced: boolean): void => {
+    setSelection({composition: {synced}})
+  }
+
   const handleSelectBucket = (bucket: Bucket): void => {
     setSelection({bucket, measurement: ''})
 
@@ -155,6 +167,10 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
     () => (
       <FluxQueryBuilderContext.Provider
         value={{
+          // Flux Sync
+          fluxSync: selection.composition?.synced,
+          toggleFluxSync: handleToggleFluxSync,
+
           // Schema
           selectedBucket: selection.bucket,
           selectedMeasurement: selection.measurement,
@@ -170,6 +186,9 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
       </FluxQueryBuilderContext.Provider>
     ),
     [
+      // Flux Sync
+      selection.composition?.synced,
+
       // Schema
       selection.bucket,
       selection.measurement,