chore(query Builder): fix query builder state (#18649)

* fix(query-builder): added function call to editActiveQueryWithBuilder to change redux state to queryBuilder

* fix(query-Builder): resets query builder state after switching to script editor and navigating to another page

* fix(query-Builder): added tests to ensure navigating from the buckets list leads to the data explorer page with query builder

* fix(query-Builder): updated change log

* fix(query-Builder): fixed prettier issue)

* fix(query-Builder): fixed formatting in queryBuilder.ts and simplified test in explorer.test.ts

Co-authored-by: Russ Savage <[email protected]>

CHANGELOG.md

@@ -22,6 +22,7 @@
 1. [18602](https://github.com/influxdata/influxdb/pull/18602): Fix uint overflow during setup on 32bit systems
 1. [18623](https://github.com/influxdata/influxdb/pull/18623): Drop support for --local flag within influx CLI
 1. [18632](https://github.com/influxdata/influxdb/pull/18632): Prevents undefined queries in cells from erroring out in dashboards
+1. [18649](https://github.com/influxdata/influxdb/pull/18649): Fixes bucket selection issue and query builder state
 1. [18658](https://github.com/influxdata/influxdb/pull/18658): Add support for 'd' day and 'w' week time identifiers in the CLI for bucket and setup commands
 1. [18581](https://github.com/influxdata/influxdb/pull/18581): Cache dashboard cell query results to use as a reference for cell configurations
 1. [18707](https://github.com/influxdata/influxdb/pull/18707): Validate host-url for influx config create/set commands

ui/cypress/e2e/explorer.test.ts

@@ -44,6 +44,32 @@ describe('DataExplorer', () => {
     })
   })
 
+  describe('data-explorer state', () => {
+    it('should persist and display last submitted script editor script ', () => {
+      const fluxCode = 'from(bucket: "_monitoring")'
+      cy.getByTestID('switch-to-script-editor').click()
+      cy.get('.flux-editor').within(() => {
+        cy.get('.view-lines').type(fluxCode)
+      })
+      cy.contains('Submit').click()
+      cy.getByTestID('nav-item-tasks').click()
+      cy.getByTestID('nav-item-data-explorer').click()
+      cy.contains(fluxCode)
+    })
+
+    it('can navigate to data explorer from buckets list and override state', () => {
+      const fluxCode = 'from(bucket: "_monitoring")'
+      cy.getByTestID('switch-to-script-editor').click()
+      cy.get('.flux-editor').within(() => {
+        cy.get('.view-lines').type(fluxCode)
+      })
+      cy.contains('Submit').click()
+      cy.getByTestID('nav-item-load-data').click()
+      cy.getByTestID('bucket--card--name _tasks').click()
+      cy.getByTestID('query-builder').should('exist')
+    })
+  })
+
   describe('numeric input using custom bin sizes in Histograms', () => {
     beforeEach(() => {
       cy.getByTestID('view-type--dropdown').click()

ui/src/timeMachine/actions/queryBuilder.ts

@@ -28,6 +28,9 @@ import {
 import {getOrg} from 'src/organizations/selectors'
 import {getAll} from 'src/resources/selectors'
 
+//Actions
+import {editActiveQueryWithBuilderSync} from 'src/timeMachine/actions'
+
 // Constants
 import {LIMIT} from 'src/resources/constants'
 
@@ -153,7 +156,6 @@ export const loadBuckets = () => async (
 ) => {
   const startTime = Date.now()
   const orgID = getOrg(getState()).id
-
   dispatch(setBuilderBucketsStatus(RemoteDataState.Loading))
 
   try {
@@ -455,11 +457,14 @@ export const reloadTagSelectors = () => (dispatch: Dispatch<Action>) => {
 }
 
 export const setBuilderBucketIfExists = (bucketName: string) => (
-  dispatch: Dispatch<Action>,
+  dispatch: Dispatch<
+    Action | ReturnType<typeof editActiveQueryWithBuilderSync>
+  >,
   getState: GetState
 ) => {
   const buckets = getAll<Bucket>(getState(), ResourceType.Buckets)
   if (buckets.find(b => b.name === bucketName)) {
+    dispatch(editActiveQueryWithBuilderSync())
     dispatch(setBuilderBucket(bucketName, true))
   }
 }