fix: atomic query builder actions (#4321)

Author: drdelambre

src/flows/pipes/QueryBuilder/AddButton.tsx

@@ -4,6 +4,7 @@ import {SquareButton, IconFont} from '@influxdata/clockface'
 import {RemoteDataState} from 'src/types'
 
 import {QueryBuilderContext} from 'src/flows/pipes/QueryBuilder/context'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 import {event} from 'src/cloud/utils/reporting'
 
@@ -19,6 +20,14 @@ const AddButton: FC = () => {
     return null
   }
 
+  if (
+    isFlagEnabled('newQueryBuilder') &&
+    !cards[0]?.values?.selected?.length &&
+    cards.length < 2
+  ) {
+    return null
+  }
+
   const {keys} = cards[cards.length - 1]
   if (keys.results.length === 0 && keys.loading === RemoteDataState.Done) {
     return null

src/flows/pipes/QueryBuilder/BucketSelector.tsx

@@ -5,25 +5,18 @@ import React, {FC, useState, useContext, useEffect} from 'react'
 import {Input, ComponentSize, List, Gradients} from '@influxdata/clockface'
 import {Bucket, RemoteDataState} from 'src/types'
 import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
+import {QueryBuilderContext} from 'src/flows/pipes/QueryBuilder/context'
 import {BucketContext} from 'src/flows/context/bucket.scoped'
 import {PipeContext} from 'src/flows/context/pipe'
-
 import {event} from 'src/cloud/utils/reporting'
 
 // this is used by notebooks
 const BucketSelector: FC = () => {
-  const {data, update} = useContext(PipeContext)
+  const {data} = useContext(PipeContext)
   const {loading, buckets, addBucket} = useContext(BucketContext)
+  const {selectBucket} = useContext(QueryBuilderContext)
 
   const [search, setSearch] = useState('')
-  const [selected, setSelected] = useState(null)
-
-  useEffect(() => {
-    const bucks = data.buckets.filter(b => !!b)
-    if (!selected && bucks.length) {
-      setSelected(bucks[0].name)
-    }
-  }, [selected, data.buckets])
 
   useEffect(() => {
     const allBuckets = new Set(buckets.map(b => b.name))
@@ -37,28 +30,6 @@ const BucketSelector: FC = () => {
       })
   }, [buckets, data.buckets])
 
-  const selectBucket = (item?: string): void => {
-    let bucket
-    if (!item) {
-      data.buckets = []
-    } else if (item !== selected) {
-      data.buckets = [buckets.find(b => b.name === item)]
-      bucket = item
-      event('Query Builder Bucket Selected', {
-        usedSearch: !!search.length ? 'yus' : 'nah',
-      })
-    } else {
-      data.buckets = []
-      bucket = null
-    }
-
-    data.tags = []
-    update(data)
-    if (item) {
-      setSelected(bucket)
-    }
-  }
-
   if (loading === RemoteDataState.Done && !buckets.length) {
     return (
       <BuilderCard testID="bucket-selector">
@@ -67,7 +38,14 @@ const BucketSelector: FC = () => {
       </BuilderCard>
     )
   }
-
+  const _selectBucket = (bucket?: string) => {
+    if (bucket) {
+      event('Query Builder Bucket Selected', {
+        usedSearch: !!search.length ? 'yus' : 'nah',
+      })
+    }
+    selectBucket(bucket)
+  }
   const filteredBuckets = buckets.filter(
     bucket =>
       !search.length ||
@@ -99,6 +77,7 @@ const BucketSelector: FC = () => {
     {user: [], system: [], sample: []}
   )
 
+  const selected = data?.buckets[0]?.name
   const renderListItem = item => {
     const isSelected = selected === item.name
     const title = isSelected
@@ -111,7 +90,7 @@ const BucketSelector: FC = () => {
         testID={`selector-list ${item.name}`}
         key={item.name}
         value={item.name}
-        onClick={selectBucket}
+        onClick={_selectBucket}
         title={title}
         selected={isSelected}
         size={ComponentSize.ExtraSmall}

src/flows/pipes/QueryBuilder/CardList.tsx

@@ -55,9 +55,15 @@ interface Props {
 }
 
 const Card: FC<Props> = ({idx}) => {
-  const {cards, add, update, remove, loadKeys, loadValues} = useContext(
-    QueryBuilderContext
-  )
+  const {
+    cards,
+    selectMeasurement,
+    add,
+    update,
+    remove,
+    loadKeys,
+    loadValues,
+  } = useContext(QueryBuilderContext)
   const {data} = useContext(PipeContext)
   const card = cards[idx]
   const [keySearches, setKeySearches] = useState([])
@@ -125,23 +131,27 @@ const Card: FC<Props> = ({idx}) => {
     card.values.selected.length <= 1
 
   const valueSelect = val => {
-    let _vals = [...card.values.selected]
+    const _vals = [...card.values.selected]
     const index = _vals.indexOf(val)
 
-    if (index === -1) {
-      event('Query Builder Value Selected')
-      if (isCompliant) {
-        _vals = [val]
+    if (isCompliant) {
+      if (index === -1) {
+        event('Query Builder Value Selected')
+        selectMeasurement(val)
       } else {
-        _vals.push(val)
+        event('Query Builder Value Unselected')
+        selectMeasurement(null)
       }
+
+      return
+    }
+
+    if (index === -1) {
+      event('Query Builder Value Selected')
+      _vals.push(val)
     } else {
       event('Query Builder Value Unselected')
-      if (isCompliant) {
-        _vals = []
-      } else {
-        _vals.splice(index, 1)
-      }
+      _vals.splice(index, 1)
     }
 
     update(idx, {

src/flows/pipes/QueryBuilder/context.tsx

@@ -6,7 +6,6 @@ import React, {
   useState,
   useCallback,
   useMemo,
-  useEffect,
 } from 'react'
 
 // Contexts
@@ -63,6 +62,9 @@ const getDefaultCard = (): QueryBuilderCard => ({
 interface QueryBuilderContextType {
   cards: QueryBuilderCard[]
 
+  selectBucket: (bucket?: string) => void
+  selectMeasurement: (measurement?: string) => void
+
   add: () => void
   remove: (idx: number) => void
   update: (idx: number, card: Partial<QueryBuilderCard>) => void
@@ -72,6 +74,10 @@ interface QueryBuilderContextType {
 
 export const DEFAULT_CONTEXT: QueryBuilderContextType = {
   cards: [getDefaultCard()],
+
+  selectBucket: _ => {},
+  selectMeasurement: _ => {},
+
   add: () => {},
   remove: (_idx: number) => {},
   update: (_idx: number, _card: QueryBuilderCard) => {},
@@ -120,33 +126,19 @@ export const QueryBuilderProvider: FC = ({children}) => {
     })
   )
 
-  useEffect(() => {
-    // Migrate old data
-    if (typeof data.buckets[0] === 'string') {
-      const buck = buckets.find(b => b.name === data.buckets[0])
-
-      if (!buck) {
-        update({
-          buckets: [{type: 'user', name: data.buckets[0]}],
-        })
-
-        return
-      }
+  const selectBucket = (bucket?: string) => {
+    const card = getDefaultCard()
 
+    if (!bucket || bucket === data?.buckets[0]?.name) {
+      update({buckets: [], tags: [card].map(toBuilderConfig)})
+    } else {
+      card.keys.selected = ['_measurement']
       update({
-        buckets: [buck],
+        buckets: [buckets.find(b => b.name === bucket)],
+        tags: [card].map(toBuilderConfig),
       })
-
-      return
-    }
-
-    if (data.tags.length) {
-      return
     }
 
-    const card = getDefaultCard()
-    card.keys.selected = ['_measurement']
-    update({tags: [card].map(toBuilderConfig)})
     setCardMeta([
       {
         keys: [],
@@ -155,7 +147,42 @@ export const QueryBuilderProvider: FC = ({children}) => {
         loadingValues: RemoteDataState.NotStarted,
       },
     ])
-  }, [data.buckets])
+  }
+
+  const selectMeasurement = (measurement?: string) => {
+    if (measurement) {
+      update({
+        tags: [
+          {
+            ...data.tags[0],
+            values: [measurement],
+          },
+          toBuilderConfig(getDefaultCard()),
+        ],
+      })
+
+      setCardMeta([
+        cardMeta[0],
+        {
+          keys: [],
+          values: [],
+          loadingKeys: RemoteDataState.NotStarted,
+          loadingValues: RemoteDataState.NotStarted,
+        },
+      ])
+    } else {
+      update({
+        tags: [
+          {
+            ...data.tags[0],
+            values: [],
+          },
+        ],
+      })
+
+      setCardMeta([cardMeta[0]])
+    }
+  }
 
   const cards = useMemo(
     () => data.tags.map((tag, idx) => fromBuilderConfig(tag, cardMeta[idx])),
@@ -442,6 +469,10 @@ export const QueryBuilderProvider: FC = ({children}) => {
     <QueryBuilderContext.Provider
       value={{
         cards,
+
+        selectBucket,
+        selectMeasurement,
+
         add,
         remove,
         update: updater,