feat: adding a bucket provider (#18709)

ui/src/buckets/selectors/index.test.ts

@@ -1,12 +1,12 @@
 // Funcs
 import {
   isSystemBucket,
-  getSortedBucketNames,
+  getSortedBuckets,
   SYSTEM,
 } from 'src/buckets/selectors/index'
 
 // Types
-import {Bucket} from 'src/types'
+import {AppState, Bucket} from 'src/types'
 
 describe('Bucket Selector', () => {
   it('should return true when a default bucket is passed', () => {
@@ -164,7 +164,18 @@ describe('Bucket Selector', () => {
       },
     ]
 
-    const results = getSortedBucketNames(buckets)
+    const results = getSortedBuckets({
+      resources: {
+        buckets: {
+          status: 'Done',
+          byID: buckets.reduce((prev, curr) => {
+            prev[curr.id] = curr
+            return prev
+          }, {}),
+          allIDs: buckets.map(bucket => bucket.id),
+        },
+      },
+    } as AppState).map(bucket => bucket.name)
     const expectedResult = [
       'alpha',
       'buck2',

ui/src/buckets/selectors/index.ts

@@ -32,9 +32,11 @@ const sortFunc = (a: Bucket, b: Bucket) => {
   return 0
 }
 
-export const getSortedBucketNames = (buckets: Bucket[]) => {
+export const getSortedBuckets = (state: AppState) => {
   const systemBuckets = []
   const otherBuckets = []
+  const buckets = getAll<Bucket>(state, ResourceType.Buckets)
+
   buckets.forEach(bucket => {
     // separate system buckets from the rest
     if (isSystemBucket(bucket.type)) {
@@ -47,6 +49,6 @@ export const getSortedBucketNames = (buckets: Bucket[]) => {
   systemBuckets.sort(sortFunc)
   // alphabetize other buckets
   otherBuckets.sort(sortFunc)
-  // concat the system buckets to the end of the other buckets and map results
-  return otherBuckets.concat(systemBuckets).map(bucket => bucket.name)
+  // concat the system buckets to the end of the other buckets
+  return otherBuckets.concat(systemBuckets)
 }

ui/src/notebooks/context/buckets.tsx

@@ -0,0 +1,88 @@
+import React, {FC, useEffect} from 'react'
+import {connect} from 'react-redux'
+
+// Actions
+import {getBuckets} from 'src/buckets/actions/thunks'
+
+// Selectors
+import {getSortedBuckets} from 'src/buckets/selectors'
+import {getStatus} from 'src/resources/selectors'
+
+// Types
+import {AppState, Bucket, ResourceType, RemoteDataState} from 'src/types'
+
+export interface StateProps {
+  loading: RemoteDataState
+  buckets: Bucket[]
+}
+
+export interface DispatchProps {
+  getBuckets: typeof getBuckets
+}
+
+export type Props = StateProps & DispatchProps
+
+export interface BucketContextType {
+  loading: RemoteDataState
+  buckets: Bucket[]
+}
+
+export const DEFAULT_CONTEXT: BucketContextType = {
+  loading: RemoteDataState.NotStarted,
+  buckets: [],
+}
+
+export const BucketContext = React.createContext<BucketContextType>(
+  DEFAULT_CONTEXT
+)
+
+let GLOBAL_LOADING = false
+
+const lockAndLoad = async grabber => {
+  GLOBAL_LOADING = true
+  await grabber()
+  GLOBAL_LOADING = false
+}
+
+export const BucketProvider: FC<Props> = React.memo(
+  ({loading, getBuckets, buckets, children}) => {
+    useEffect(() => {
+      if (loading !== RemoteDataState.NotStarted) {
+        return
+      }
+
+      if (GLOBAL_LOADING) {
+        return
+      }
+
+      lockAndLoad(getBuckets)
+    }, [loading])
+
+    return (
+      <BucketContext.Provider
+        value={{
+          loading,
+          buckets,
+        }}
+      >
+        {children}
+      </BucketContext.Provider>
+    )
+  }
+)
+
+const mstp = (state: AppState): StateProps => {
+  const buckets = getSortedBuckets(state)
+  const loading = getStatus(state, ResourceType.Buckets)
+
+  return {
+    loading,
+    buckets,
+  }
+}
+
+const mdtp: DispatchProps = {
+  getBuckets: getBuckets,
+}
+
+export default connect<StateProps, DispatchProps>(mstp, mdtp)(BucketProvider)

ui/src/shared/components/DeleteDataForm/BucketsDropdown.tsx

@@ -4,11 +4,10 @@ import {connect} from 'react-redux'
 import {SelectDropdown} from '@influxdata/clockface'
 
 // Types
-import {AppState, Bucket, ResourceType} from 'src/types'
+import {AppState} from 'src/types'
 
 // Selectors
-import {getSortedBucketNames} from 'src/buckets/selectors'
-import {getAll} from 'src/resources/selectors'
+import {getSortedBuckets} from 'src/buckets/selectors'
 
 interface StateProps {
   bucketNames: string[]
@@ -37,12 +36,10 @@ const BucketsDropdown: FunctionComponent<Props> = ({
 
 const mstp = (state: AppState): StateProps => {
   // map names and sort via a selector
-  const buckets = getSortedBucketNames(
-    getAll<Bucket>(state, ResourceType.Buckets)
-  )
+  const buckets = getSortedBuckets(state)
 
   return {
-    bucketNames: buckets,
+    bucketNames: buckets.map(bucket => bucket.name),
   }
 }