fix: show queries built in advanced mode when switching tabs

CHANGELOG.md

@@ -47,6 +47,7 @@
 1. [16404](https://github.com/influxdata/influxdb/pull/16404): Fixed query reset bug that was resetting query in script editor whenever dates were changed
 1. [16430](https://github.com/influxdata/influxdb/pull/16430): Fixed table threshold bug that was defaulting set colors to the background.
 1. [16435](https://github.com/influxdata/influxdb/pull/16435): Time labels are no longer squished to the left
+1. [16427](https://github.com/influxdata/influxdb/pull/16427): Fixed underlying issue with disappearing queries made in Advanced Mode
 
 ### UI Improvements
 

ui/src/telegrafs/reducers/index.ts

@@ -74,4 +74,4 @@ export const telegrafsReducer = (
         return
       }
     }
-  })
+  })

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

@@ -1,6 +1,7 @@
 import {createStore} from 'redux'
 
 import {
+  buildActiveQuery,
   initialState,
   initialStateHelper,
   timeMachinesReducer,
@@ -39,4 +40,114 @@ describe('the Time Machine reducer', () => {
       )
     })
   })
+
+  describe('buildActiveQuery', () => {
+    let draftState
+
+    beforeEach(() => {
+      draftState = initialStateHelper()
+    })
+
+    it('builds the query if the query builder config is valid', () => {
+      const expectedText =
+        'from(bucket: "metrics")\n  |> range(start: v.timeRangeStart, stop: v.timeRangeStop)\n  |> filter(fn: (r) => r._measurement == "mem")\n  |> filter(fn: (r) => r._field == "active")\n  |> aggregateWindow(every: v.windowPeriod, fn: mean)\n  |> yield(name: "mean")'
+      const validDraftQuery = {
+        text: '',
+        editMode: 'advanced',
+        name: '',
+        builderConfig: {
+          buckets: ['metrics'],
+          tags: [
+            {
+              key: '_measurement',
+              values: ['mem'],
+            },
+            {
+              key: '_field',
+              values: ['active'],
+            },
+            {
+              key: 'host',
+              values: [],
+            },
+          ],
+          functions: [
+            {
+              name: 'mean',
+            },
+          ],
+          aggregateWindow: {
+            period: 'auto',
+          },
+        },
+        hidden: false,
+      }
+
+      draftState.draftQueries[draftState.activeQueryIndex] = validDraftQuery
+      buildActiveQuery(draftState)
+      expect(draftState.draftQueries[draftState.activeQueryIndex].text).toEqual(
+        expectedText
+      )
+    })
+
+    it("sets the text of invalid queries to empty string if they don't have any query text", () => {
+      const invalidDraftQueryWithoutText = {
+        editMode: 'advanced',
+        name: '',
+        builderConfig: {
+          buckets: [],
+          tags: [
+            {
+              key: '_measurement',
+              values: [],
+            },
+          ],
+          functions: [],
+          aggregateWindow: {
+            period: '',
+          },
+        },
+        hidden: false,
+      }
+
+      draftState.draftQueries[
+        draftState.activeQueryIndex
+      ] = invalidDraftQueryWithoutText
+      buildActiveQuery(draftState)
+      expect(draftState.draftQueries[draftState.activeQueryIndex].text).toEqual(
+        ''
+      )
+    })
+
+    it("retains text of valid queries that weren't built with the query builder", () => {
+      const invalidDraftQueryWithText = {
+        text:
+          'from(bucket: v.bucket)\n  |> range(start: v.timeRangeStart)\n  |> filter(fn: (r) => r._measurement == "system")\n  |> filter(fn: (r) => r._field == "load1" or r._field == "load5" or r._field == "load15")\n  |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)\n  |> yield(name: "mean")',
+        editMode: 'advanced',
+        name: '',
+        builderConfig: {
+          buckets: [],
+          tags: [
+            {
+              key: '_measurement',
+              values: [],
+            },
+          ],
+          functions: [],
+          aggregateWindow: {
+            period: '',
+          },
+        },
+        hidden: false,
+      }
+
+      draftState.draftQueries[
+        draftState.activeQueryIndex
+      ] = invalidDraftQueryWithText
+      buildActiveQuery(draftState)
+      expect(draftState.draftQueries[draftState.activeQueryIndex].text).toEqual(
+        draftState.draftQueries[draftState.activeQueryIndex].text
+      )
+    })
+  })
 })

ui/src/timeMachine/reducers/index.ts

@@ -1025,12 +1025,12 @@ const initialQueryResultsState = (): QueryResultsState => ({
   statuses: null,
 })
 
-const buildActiveQuery = (draftState: TimeMachineState) => {
+export const buildActiveQuery = (draftState: TimeMachineState) => {
   const draftQuery = draftState.draftQueries[draftState.activeQueryIndex]
 
   if (isConfigValid(draftQuery.builderConfig)) {
     draftQuery.text = buildQuery(draftQuery.builderConfig)
-  } else {
+  } else if (!draftQuery.text) {
     draftQuery.text = ''
   }
 }