fix: don't remove bucket from selection, if not exists (#3462)

* fix: don't remove bucket from selection, if not exists

* chore: add bucket if not exists in bucketlist

* chore: add fixme

* chore: remove fixme comment

* chore: update to have buckets unselectable

* chore: remove now extraneous useEffect

* chore: update per review

Co-authored-by: Subir Jolly <sjolly@influxdata.com>

Author: subirjolly

src/flows/context/bucket.scoped.tsx

@@ -6,6 +6,7 @@ import React, {
   useEffect,
   useState,
   useMemo,
+  useRef,
 } from 'react'
 
 // Contexts
@@ -18,11 +19,13 @@ import {Bucket, RemoteDataState} from 'src/types'
 interface BucketContextType {
   loading: RemoteDataState
   buckets: Bucket[]
+  addBucket: (_: Bucket) => void
 }
 
 const DEFAULT_CONTEXT: BucketContextType = {
   loading: RemoteDataState.NotStarted,
   buckets: [],
+  addBucket: (_: Bucket) => {},
 }
 
 export const BucketContext = createContext<BucketContextType>(DEFAULT_CONTEXT)
@@ -33,6 +36,18 @@ export const BucketProvider: FC = ({children}) => {
   const {getPanelQueries} = useContext(FlowQueryContext)
   const {id} = useContext(PipeContext)
   const scope = getPanelQueries(id)?.scope ?? {}
+  const controller = useRef(new AbortController())
+
+  useEffect(() => {
+    return () => {
+      try {
+        // Cancelling active query so that there's no memory leak in this component when unmounting
+        controller.current.abort()
+      } catch (e) {
+        // Do nothing
+      }
+    }
+  }, [controller])
 
   useEffect(() => {
     if (!scope.region || !scope.org) {
@@ -55,6 +70,7 @@ export const BucketProvider: FC = ({children}) => {
     fetch(`${scope.region}/api/v2/buckets?limit=100&orgID=${scope.org}`, {
       method: 'GET',
       headers,
+      signal: controller.current.signal,
     })
       .then(response => {
         return response.json()
@@ -117,11 +133,15 @@ export const BucketProvider: FC = ({children}) => {
         setBuckets([...bucks.user, ...bucks.system, ...bucks.sample])
       })
       .catch(() => {})
-  }, [scope.region, scope.org])
+  }, [scope.region, scope.org, controller])
+
+  const addBucket = (bucket: Bucket) => {
+    setBuckets([...buckets, bucket])
+  }
 
   return useMemo(
     () => (
-      <BucketContext.Provider value={{loading, buckets}}>
+      <BucketContext.Provider value={{loading, buckets, addBucket}}>
         {children}
       </BucketContext.Provider>
     ),

src/flows/pipes/QueryBuilder/BucketSelector.tsx

@@ -3,51 +3,56 @@ import React, {FC, useState, useContext, useEffect} from 'react'
 
 // Components
 import {Input, ComponentSize, List, Gradients} from '@influxdata/clockface'
-import {RemoteDataState} from 'src/types'
+import {Bucket, RemoteDataState} from 'src/types'
 import BuilderCard from 'src/timeMachine/components/builderCard/BuilderCard'
 import {BucketContext} from 'src/flows/context/bucket.scoped'
 import {PipeContext} from 'src/flows/context/pipe'
 
 // this is used by notebooks
 const BucketSelector: FC = () => {
   const {data, update} = useContext(PipeContext)
-  const {loading, buckets} = useContext(BucketContext)
+  const {loading, buckets, addBucket} = useContext(BucketContext)
 
   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))
+    data.buckets
+      .filter(b => !allBuckets.has(b.name))
+      .forEach(b => {
+        addBucket({
+          name: b.name,
+          type: b.type,
+        } as Bucket)
+      })
+  }, [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
     } else {
-      data.buckets = [item]
+      data.buckets = []
+      bucket = null
     }
 
     data.tags = []
-
     update(data)
-  }
-
-  useEffect(() => {
-    if (loading !== RemoteDataState.Done) {
-      return
+    if (item) {
+      setSelected(bucket)
     }
-
-    if (!data.buckets.length) {
-      return
-    }
-
-    const bucks = buckets.reduce((acc, curr) => {
-      acc[curr.name] = true
-      return acc
-    }, {})
-    const filtered = data.buckets.filter(b => bucks.hasOwnProperty(b.name))
-
-    if (data.buckets.length == filtered.length) {
-      return
-    }
-
-    selectBucket()
-  }, [buckets])
+  }
 
   if (loading === RemoteDataState.Done && !buckets.length) {
     return (
@@ -90,9 +95,8 @@ const BucketSelector: FC = () => {
   )
 
   const renderListItem = item => {
-    const selected = !!data.buckets.find(b => b.name === item.name)
-
-    const title = selected
+    const isSelected = selected === item.name
+    const title = isSelected
       ? 'Click to remove this filter'
       : `Click to filter by ${item.name}`
 
@@ -104,7 +108,7 @@ const BucketSelector: FC = () => {
         value={item.name}
         onClick={selectBucket}
         title={title}
-        selected={selected}
+        selected={isSelected}
         size={ComponentSize.ExtraSmall}
         gradient={Gradients.GundamPilot}
         wrapText={false}