feat: add schema injection (#4910)

* feat: add injection for bucket and measurement

* test: skip the search bar test

* feat: add injection for fields

* feat: add injection for tag keys and values

* feat: add events for schema injection

* feat: add injection for bucket and time range

* chore: add condition check for bucket.id vs bucket.name

* chore: remove injection code for tag key

* chore: remove the front-end injection for bucket and time range

* chore: remove the unused variable

* refactor: remove the intermediate handle function

* chore: remove unused import variables

* feat: add injection for bucket and measurement

* feat: add injection for fields

* feat: add injection for tag keys and values

* feat: add events for schema injection

* feat: add injection for bucket and time range

* chore: add condition check for bucket.id vs bucket.name

* chore: remove injection code for tag key

* chore: remove the front-end injection for bucket and time range

* chore: remove the unused variable

* refactor: remove the intermediate handle function

* chore: remove unused import variables

Author: appletreeisyellow

src/dataExplorer/components/FieldSelector.tsx

@@ -7,6 +7,7 @@ import WaitingText from 'src/shared/components/WaitingText'
 
 // Contexts
 import {FieldsContext} from 'src/dataExplorer/context/fields'
+import {FluxQueryBuilderContext} from 'src/dataExplorer/context/fluxQueryBuilder'
 
 // Types
 import {RemoteDataState} from 'src/types'
@@ -26,6 +27,7 @@ conceptually similar to a non-indexed column and value.`
 
 const FieldSelector: FC = () => {
   const {fields, loading} = useContext(FieldsContext)
+  const {selectField} = useContext(FluxQueryBuilderContext)
   const [fieldsToShow, setFieldsToShow] = useState([])
 
   useEffect(() => {
@@ -48,7 +50,11 @@ const FieldSelector: FC = () => {
     list = <WaitingText text="Loading fields" />
   } else if (loading === RemoteDataState.Done && fieldsToShow.length) {
     list = fieldsToShow.map(field => (
-      <div key={field} className="field-selector--list-item--selectable">
+      <div
+        key={field}
+        className="field-selector--list-item--selectable"
+        onClick={() => selectField(field)}
+      >
         <TextBlock text={field} size={ComponentSize.ExtraSmall} />
       </div>
     ))

src/dataExplorer/components/TagSelector.tsx

@@ -29,7 +29,7 @@ interface Prop {
 }
 
 const TagValues: FC<Prop> = ({loading, tagKey, tagValues}) => {
-  const {selectedBucket, selectedMeasurement} = useContext(
+  const {selectedBucket, selectedMeasurement, selectTagValue} = useContext(
     FluxQueryBuilderContext
   )
   const {getTagValues} = useContext(TagsContext)
@@ -40,13 +40,9 @@ const TagValues: FC<Prop> = ({loading, tagKey, tagValues}) => {
     setValuesToShow(tagValues.slice(0, LOAD_MORE_LIMIT_INITIAL))
   }, [tagValues])
 
-  const handleSelectTagValue = (value: string) => {
-    // TODO: potentially inject tag value into the flux script editor
-    //   still TBD on product
-
-    /* eslint-disable no-console */
-    console.log(value)
-    /* eslint-disable no-console */
+  const handleSelectTagValue = (tagValue: string) => {
+    // Inject tag key and value into editor
+    selectTagValue(tagKey, tagValue)
   }
 
   const handleSelectTagKey = (key: string) => {

src/dataExplorer/context/fluxQueryBuilder.tsx

@@ -12,10 +12,20 @@ import {createLocalStorageStateHook} from 'use-local-storage-state'
 import {MeasurementsContext} from 'src/dataExplorer/context/measurements'
 import {FieldsContext} from 'src/dataExplorer/context/fields'
 import {TagsContext} from 'src/dataExplorer/context/tags'
+import {EditorContext} from 'src/shared/contexts/editor'
 
 // Types
 import {Bucket} from 'src/types'
 
+// Utils
+import {ExecuteCommand} from 'src/languageSupport/languages/flux/lsp/utils'
+import {
+  ExecuteCommandInjectMeasurement,
+  ExecuteCommandInjectTagValue,
+  ExecuteCommandInjectField,
+} from 'src/languageSupport/languages/flux/lsp/utils'
+import {event} from 'src/cloud/utils/reporting'
+
 const useLocalStorageState = createLocalStorageStateHook(
   'dataExplorer.schema',
   {
@@ -42,6 +52,8 @@ interface FluxQueryBuilderContextType {
   searchTerm: string // for searching fields and tags
   selectBucket: (bucket: Bucket) => void
   selectMeasurement: (measurement: string) => void
+  selectField: (field: string) => void
+  selectTagValue: (tagKey: string, tagValue: string) => void
   setSearchTerm: (str: string) => void
 }
 
@@ -52,6 +64,8 @@ const DEFAULT_CONTEXT: FluxQueryBuilderContextType = {
   searchTerm: '',
   selectBucket: (_b: Bucket) => {},
   selectMeasurement: (_m: string) => {},
+  selectField: (_f: string) => {},
+  selectTagValue: (_k: string, _v: string) => {},
   setSearchTerm: (_s: string) => {},
 }
 
@@ -64,6 +78,7 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
   const {getMeasurements} = useContext(MeasurementsContext)
   const {getFields, resetFields} = useContext(FieldsContext)
   const {getTagKeys, resetTags} = useContext(TagsContext)
+  const {injectViaLsp} = useContext(EditorContext)
 
   // States
   const [selection, setSelection] = useLocalStorageState()
@@ -86,6 +101,20 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
     selection.measurement = measurement
     setSelection({...selection})
 
+    // Inject measurement
+    injectViaLsp(ExecuteCommand.InjectionMeasurement, {
+      bucket:
+        selection.bucket.type === 'sample'
+          ? selection.bucket.id
+          : selection.bucket.name,
+      name: measurement,
+    } as ExecuteCommandInjectMeasurement)
+
+    event('flux.schema.injected', {
+      command: ExecuteCommand.InjectionMeasurement,
+      context: 'flux query builder',
+    })
+
     // Reset fields and tags
     resetFields()
     resetTags()
@@ -95,6 +124,39 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
     getTagKeys(selection.bucket, measurement)
   }
 
+  const handleSelectField = (field: string): void => {
+    // Inject field
+    injectViaLsp(ExecuteCommand.InjectField, {
+      bucket:
+        selection.bucket.type === 'sample'
+          ? selection.bucket.id
+          : selection.bucket.name,
+      name: field,
+    } as ExecuteCommandInjectField)
+
+    event('flux.schema.injected', {
+      command: ExecuteCommand.InjectField,
+      context: 'flux query builder',
+    })
+  }
+
+  const handleSelectTagValue = (tagKey: string, tagValue: string): void => {
+    // Inject tag value
+    injectViaLsp(ExecuteCommand.InjectTagValue, {
+      bucket:
+        selection.bucket.type === 'sample'
+          ? selection.bucket.id
+          : selection.bucket.name,
+      name: tagKey,
+      value: tagValue,
+    } as ExecuteCommandInjectTagValue)
+
+    event('flux.schema.injected', {
+      command: ExecuteCommand.InjectTagValue,
+      context: 'flux query builder',
+    })
+  }
+
   const handleSearchTerm = useCallback(
     (searchTerm: string): void => {
       setSearchTerm(searchTerm)
@@ -116,6 +178,8 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
           searchTerm,
           selectBucket: handleSelectBucket,
           selectMeasurement: handleSelectMeasurement,
+          selectField: handleSelectField,
+          selectTagValue: handleSelectTagValue,
           setSearchTerm: handleSearchTerm,
         }}
       >