fix(queryBuilder): display loading text (#17963)

* fix(queryBuilder): display loading text

* fix: add loading text to dropdown

ui/src/shared/components/SearchableDropdown.tsx

@@ -75,7 +75,9 @@ export default class SearchableDropdown extends Component<Props> {
             size={buttonSize}
             status={buttonStatus}
           >
-            {selectedOption}
+            {buttonStatus === ComponentStatus.Loading
+              ? 'Loading...'
+              : selectedOption}
           </Dropdown.Button>
         )}
         menu={onCollapse => (

ui/src/timeMachine/actions/queryBuilder.ts

@@ -82,7 +82,10 @@ const setBuilderTagKeys = (index: number, keys: string[]) => ({
   payload: {index, keys},
 })
 
-const setBuilderTagKeysStatus = (index: number, status: RemoteDataState) => ({
+export const setBuilderTagKeysStatus = (
+  index: number,
+  status: RemoteDataState
+) => ({
   type: 'SET_BUILDER_TAG_KEYS_STATUS' as 'SET_BUILDER_TAG_KEYS_STATUS',
   payload: {index, status},
 })
@@ -204,6 +207,7 @@ export const loadTagSelector = (index: number) => async (
   if (!tags[index] || !buckets[0]) {
     return
   }
+
   dispatch(setBuilderTagKeysStatus(index, RemoteDataState.Loading))
 
   const state = getState()

ui/src/timeMachine/components/TagSelector.tsx

@@ -198,7 +198,10 @@ class TagSelector extends PureComponent<Props> {
       )
     }
 
-    if (valuesStatus === RemoteDataState.Loading) {
+    if (
+      valuesStatus === RemoteDataState.Loading ||
+      valuesStatus === RemoteDataState.NotStarted
+    ) {
       return (
         <BuilderCard.Empty>
           <WaitingText text="Loading tag values" />

ui/src/timeMachine/reducers/index.test.ts

@@ -5,14 +5,16 @@ import {
   initialState,
   initialStateHelper,
   timeMachinesReducer,
+  timeMachineReducer,
 } from 'src/timeMachine/reducers'
+import {setBuilderTagKeysStatus} from 'src/timeMachine/actions/queryBuilder'
 
 import {RemoteDataState, TableViewProperties} from 'src/types'
 
 describe('the Time Machine reducer', () => {
   describe('setting the default aggregateFunctionType', () => {
     const store = createStore(timeMachinesReducer, initialState())
-    const expectedAggregatefunctionType = initialStateHelper().queryBuilder
+    const expectedAggregateFunctionType = initialStateHelper().queryBuilder
       .tags[0].aggregateFunctionType
 
     it('is set when setting a builder bucket selection', () => {
@@ -26,7 +28,7 @@ describe('the Time Machine reducer', () => {
           .aggregateFunctionType
 
       expect(defaultAggregateFunctionType).toEqual(
-        expectedAggregatefunctionType
+        expectedAggregateFunctionType
       )
     })
 
@@ -38,11 +40,28 @@ describe('the Time Machine reducer', () => {
           .aggregateFunctionType
 
       expect(defaultAggregateFunctionType).toEqual(
-        expectedAggregatefunctionType
+        expectedAggregateFunctionType
       )
     })
   })
 
+  describe('setBuilderTagKeyStatus', () => {
+    it('sets tagValues "status" to "NotStarted" when tagKeys are "Loading"', () => {
+      const {Loading, NotStarted} = RemoteDataState
+      const dataExplorer = initialState().timeMachines.de
+      dataExplorer.queryBuilder.tags[0].keysStatus = RemoteDataState.Done
+      dataExplorer.queryBuilder.tags[0].valuesStatus = RemoteDataState.Done
+
+      const state = timeMachineReducer(
+        dataExplorer,
+        setBuilderTagKeysStatus(0, Loading)
+      )
+
+      expect(state.queryBuilder.tags[0].keysStatus).toBe(Loading)
+      expect(state.queryBuilder.tags[0].valuesStatus).toBe(NotStarted)
+    })
+  })
+
   describe('buildActiveQuery', () => {
     let draftState
 

ui/src/timeMachine/reducers/index.ts

@@ -764,6 +764,7 @@ export const timeMachineReducer = (
         tags[index].keysStatus = status
 
         if (status === RemoteDataState.Loading) {
+          tags[index].valuesStatus = RemoteDataState.NotStarted
           for (let i = index + 1; i < tags.length; i++) {
             tags[i].keysStatus = RemoteDataState.NotStarted
           }