updated loadBuckets to set buckets after requesting them, and removed GetReource Buckets from DataExplorerPage (#18700)

ui/src/dataExplorer/components/DataExplorerPage.tsx

@@ -25,7 +25,7 @@ const DataExplorerPage: FC = ({children}) => {
   return (
     <Page titleTag={pageTitleSuffixer(['Data Explorer'])}>
       {children}
-      <GetResources resources={[ResourceType.Variables, ResourceType.Buckets]}>
+      <GetResources resources={[ResourceType.Variables]}>
         <Page.Header fullWidth={true}>
           <Page.Title title="Data Explorer" />
           <CloudUpgradeButton />

ui/src/timeMachine/actions/queryBuilder.ts

@@ -1,4 +1,5 @@
 // APIs
+import {normalize} from 'normalizr'
 import {queryBuilderFetcher} from 'src/timeMachine/apis/QueryBuilderFetcher'
 import * as api from 'src/client'
 import {get} from 'lodash'
@@ -8,14 +9,16 @@ import {fetchDemoDataBuckets} from 'src/cloud/apis/demodata'
 import {getActiveQuery, getActiveTimeMachine} from 'src/timeMachine/selectors'
 import {getTimeRangeWithTimezone} from 'src/dashboards/selectors'
 import {reportSimpleQueryPerformanceDuration} from 'src/cloud/utils/reporting'
-
+import {setBuckets} from 'src/buckets/actions/creators'
+import {Action as BucketAction} from 'src/buckets/actions/creators'
 // Types
 import {
+  Bucket,
+  BucketEntities,
   BuilderAggregateFunctionType,
   GetState,
   RemoteDataState,
   ResourceType,
-  Bucket,
 } from 'src/types'
 import {Dispatch} from 'react'
 import {BuilderFunctionsType} from '@influxdata/influx'
@@ -27,6 +30,7 @@ import {
 // Selectors
 import {getOrg} from 'src/organizations/selectors'
 import {getAll} from 'src/resources/selectors'
+import {getStatus} from 'src/resources/selectors'
 
 //Actions
 import {editActiveQueryWithBuilderSync} from 'src/timeMachine/actions'
@@ -34,6 +38,9 @@ import {editActiveQueryWithBuilderSync} from 'src/timeMachine/actions'
 // Constants
 import {LIMIT} from 'src/resources/constants'
 
+// Schemas
+import {arrayOfBuckets} from 'src/schemas'
+
 export type Action =
   | ReturnType<typeof setBuilderAggregateFunctionType>
   | ReturnType<typeof setBuilderBucket>
@@ -151,9 +158,14 @@ export const selectAggregateWindow = (period: string) => (
 }
 
 export const loadBuckets = () => async (
-  dispatch: Dispatch<Action | ReturnType<typeof selectBucket>>,
+  dispatch: Dispatch<Action | ReturnType<typeof selectBucket> | BucketAction>,
   getState: GetState
 ) => {
+  if (
+    getStatus(getState(), ResourceType.Buckets) === RemoteDataState.NotStarted
+  ) {
+    dispatch(setBuckets(RemoteDataState.Loading))
+  }
   const startTime = Date.now()
   const orgID = getOrg(getState()).id
   dispatch(setBuilderBucketsStatus(RemoteDataState.Loading))
@@ -167,6 +179,13 @@ export const loadBuckets = () => async (
 
     const demoDataBuckets = await fetchDemoDataBuckets()
 
+    const normalizedBuckets = normalize<Bucket, BucketEntities, string[]>(
+      [...resp.data.buckets, ...demoDataBuckets],
+      arrayOfBuckets
+    )
+
+    dispatch(setBuckets(RemoteDataState.Done, normalizedBuckets))
+
     const allBuckets = [...resp.data.buckets, ...demoDataBuckets].map(
       b => b.name
     )