feat: create a unique search parameter to differentiate between the two data explorers (#6162)

* feat: create a unique search parameter to differentiate between the two data explorers

* chore: remove the sidebar and update all URLs to contain the search parameter

* chore: thanks clockface

Author: asalem1

src/dataExplorer/components/DataExplorerPage.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FC, useContext, useEffect} from 'react'
-import {Switch, Route, Link} from 'react-router-dom'
+import {Switch, Route, Link, useHistory} from 'react-router-dom'
 
 // Components
 import DataExplorer from 'src/dataExplorer/components/DataExplorer'
@@ -40,13 +40,22 @@ import {
   PersistanceProvider,
 } from 'src/dataExplorer/context/persistance'
 import {PROJECT_NAME, PROJECT_NAME_PLURAL} from 'src/flows'
+import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
 
 const DataExplorerPageHeader: FC = () => {
   const {fluxQueryBuilder, setFluxQueryBuilder} = useContext(AppSettingContext)
   const {resource, setResource} = useContext(PersistanceContext)
+  const history = useHistory()
 
   const toggleSlider = () => {
     event('toggled new query builder', {active: `${!fluxQueryBuilder}`})
+    if (!fluxQueryBuilder) {
+      history.push({
+        search: SCRIPT_EDITOR_PARAMS,
+      })
+    } else {
+      history.push({search: null})
+    }
     setFluxQueryBuilder(!fluxQueryBuilder)
   }
 
@@ -109,6 +118,7 @@ const DataExplorerPage: FC = () => {
     useContext(AppSettingContext)
   useLoadTimeReporting('DataExplorerPage load start')
   const showNewExplorer = fluxQueryBuilder && isFlagEnabled('newDataExplorer')
+  const history = useHistory()
 
   const hideFlowsCTA = () => {
     setFlowsCTA({explorer: false})
@@ -119,10 +129,19 @@ const DataExplorerPage: FC = () => {
   }
 
   useEffect(() => {
+    if (fluxQueryBuilder) {
+      history.push({
+        search: SCRIPT_EDITOR_PARAMS,
+      })
+    } else {
+      history.push({
+        search: null,
+      })
+    }
     return () => {
       event('Exited Data Explorer')
     }
-  }, [])
+  }, [fluxQueryBuilder, history])
 
   return (
     <Page titleTag={pageTitleSuffixer(['Data Explorer'])}>

src/dataExplorer/components/DeleteScript.tsx

@@ -11,6 +11,7 @@ import {deleteScriptFail} from 'src/shared/copy/notifications/categories/scripts
 import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
 import {RemoteDataState} from 'src/types'
 import {QueryContext} from 'src/shared/contexts/query'
+import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
 
 let deleteScript
 
@@ -43,7 +44,9 @@ const DeleteScript: FC<Props> = ({onBack, onClose}) => {
         setStatus(RemoteDataState.NotStarted)
         setResult(null)
         cancel()
-        history.replace(`/orgs/${org.id}/data-explorer/from/script/`)
+        history.replace(
+          `/orgs/${org.id}/data-explorer/from/script${SCRIPT_EDITOR_PARAMS}`
+        )
         onClose()
       } catch (error) {
         dispatch(notify(deleteScriptFail(resource.data?.name)))

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -34,8 +34,9 @@ import SaveAsScript from 'src/dataExplorer/components/SaveAsScript'
 import {QueryContext} from 'src/shared/contexts/query'
 import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
-import {getOrg} from 'src/organizations/selectors'
+import {getOrg, isOrgIOx} from 'src/organizations/selectors'
 import {RemoteDataState} from 'src/types'
+import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
 
 // Styles
 import './FluxQueryBuilder.scss'
@@ -56,6 +57,7 @@ const FluxQueryBuilder: FC = () => {
   const [selectedLanguage, setSelectedLanguage] = useState(
     resource?.language ?? LanguageType.FLUX
   )
+  const isIoxOrg = useSelector(isOrgIOx)
   const [isOverlayVisible, setIsOverlayVisible] = useState(false)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
@@ -66,12 +68,14 @@ const FluxQueryBuilder: FC = () => {
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
 
-    if (isFlagEnabled('uiSqlSupport')) {
+    if (isFlagEnabled('uiSqlSupport') && isIoxOrg) {
       history.replace(
-        `/orgs/${org.id}/data-explorer/from/script?language=${selectedLanguage}`
+        `/orgs/${org.id}/data-explorer/from/script?language=${selectedLanguage}&${SCRIPT_EDITOR_PARAMS}`
       )
     } else {
-      history.replace(`/orgs/${org.id}/data-explorer/from/script`)
+      history.replace(
+        `/orgs/${org.id}/data-explorer/from/script${SCRIPT_EDITOR_PARAMS}`
+      )
     }
 
     if (!isFlagEnabled('saveAsScript')) {
@@ -158,7 +162,7 @@ const FluxQueryBuilder: FC = () => {
               justifyContent={JustifyContent.SpaceBetween}
             >
               <div style={{display: 'flex'}}>
-                {isFlagEnabled('uiSqlSupport') ? (
+                {isFlagEnabled('uiSqlSupport') && isIoxOrg ? (
                   <Dropdown
                     menu={onCollapse => (
                       <Dropdown.Menu onCollapse={onCollapse}>
@@ -252,7 +256,10 @@ const FluxQueryBuilder: FC = () => {
               <ResultsPane />
             </DraggableResizer.Panel>
             <DraggableResizer.Panel isCollapsible={true}>
-              <Sidebar />
+              {isFlagEnabled('uiSqlSupport') &&
+              resource?.language === LanguageType.SQL ? null : (
+                <Sidebar />
+              )}
             </DraggableResizer.Panel>
           </DraggableResizer>
         </FlexBox>

src/dataExplorer/components/SaveAsScript.tsx

@@ -24,11 +24,12 @@ import {
   scriptSaveFail,
   scriptSaveSuccess,
 } from 'src/shared/copy/notifications/categories/scripts'
-import {getOrg} from 'src/organizations/selectors'
+import {getOrg, isOrgIOx} from 'src/organizations/selectors'
 import OpenScript from 'src/dataExplorer/components/OpenScript'
 import {DeleteScript} from 'src/dataExplorer/components/DeleteScript'
 import {LanguageType} from 'src/dataExplorer/components/resources'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
 
 interface Props {
   language: LanguageType
@@ -42,6 +43,7 @@ const SaveAsScript: FC<Props> = ({language, onClose, setOverlayType, type}) => {
   const history = useHistory()
   const {hasChanged, resource, setResource, save} =
     useContext(PersistanceContext)
+  const isIoxOrg = useSelector(isOrgIOx)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
   const [error, setError] = useState<string>()
@@ -92,12 +94,14 @@ const SaveAsScript: FC<Props> = ({language, onClose, setOverlayType, type}) => {
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
 
-    if (isFlagEnabled('uiSqlSupport')) {
+    if (isFlagEnabled('uiSqlSupport') && isIoxOrg) {
       history.replace(
-        `/orgs/${org.id}/data-explorer/from/script?language=${language}`
+        `/orgs/${org.id}/data-explorer/from/script?language=${language}&${SCRIPT_EDITOR_PARAMS}`
       )
     } else {
-      history.replace(`/orgs/${org.id}/data-explorer/from/script`)
+      history.replace(
+        `/orgs/${org.id}/data-explorer/from/script${SCRIPT_EDITOR_PARAMS}`
+      )
     }
     if (type !== OverlayType.OPEN) {
       onClose()

src/dataExplorer/components/resources/TemplatePage.tsx

@@ -4,7 +4,10 @@ import {Switch, Route, useHistory, useParams} from 'react-router-dom'
 import {RemoteDataState, ResourceType} from 'src/types'
 import {getOrg} from 'src/organizations/selectors'
 
-import {RESOURCES} from 'src/dataExplorer/components/resources'
+import {
+  RESOURCES,
+  SCRIPT_EDITOR_PARAMS,
+} from 'src/dataExplorer/components/resources'
 import {
   PersistanceContext,
   PersistanceProvider,
@@ -56,7 +59,7 @@ const Template: FC = () => {
     RESOURCES[params[0]].init.apply(this, params.slice(1)).then(data => {
       setQuery(data.flux)
       setResource(data)
-      history.replace(`/orgs/${org.id}/data-explorer`)
+      history.replace(`/orgs/${org.id}/data-explorer${SCRIPT_EDITOR_PARAMS}`)
       setHasChanged(false)
     })
   }, [params])

src/dataExplorer/components/resources/index.ts

@@ -1,6 +1,8 @@
 import {ReactNode} from 'react'
 import {ResourceType} from 'src/types/resources'
 
+export const SCRIPT_EDITOR_PARAMS = '?fluxScriptEditor'
+
 export enum LanguageType {
   FLUX = 'flux',
   SQL = 'sql',

src/shared/components/FluxMonacoEditor.tsx

@@ -22,6 +22,7 @@ import ConnectionManager from 'src/languageSupport/languages/flux/lsp/connection
 import {EditorContext} from 'src/shared/contexts/editor'
 import {PersistanceContext} from 'src/dataExplorer/context/persistance'
 import {fluxQueryBuilder} from 'src/shared/selectors/app'
+import {isOrgIOx} from 'src/organizations/selectors'
 
 // Types
 import {OnChangeScript} from 'src/types/flux'
@@ -67,6 +68,7 @@ const FluxEditorMonaco: FC<Props> = ({
   const {editor, setEditor} = useContext(EditorContext)
   const isFluxQueryBuilder = useSelector(fluxQueryBuilder)
   const sessionStore = useContext(PersistanceContext)
+  const isIoxOrg = useSelector(isOrgIOx)
   const {path} = useRouteMatch()
   const isInFluxQueryBuilder =
     isFluxQueryBuilder && path === '/orgs/:orgID/data-explorer'
@@ -165,13 +167,22 @@ const FluxEditorMonaco: FC<Props> = ({
             }}
             editorDidMount={editorDidMount}
           />
-          {isFlagEnabled('uiSqlSupport') && isInFluxQueryBuilder && (
-            <div className="monaco-editor__language">{language}</div>
-          )}
+          {isFlagEnabled('uiSqlSupport') &&
+            isIoxOrg &&
+            isInFluxQueryBuilder && (
+              <div className="monaco-editor__language">{language}</div>
+            )}
         </div>
       </ErrorBoundary>
     ),
-    [language, onChangeScript, setEditor, useSchemaComposition, script]
+    [
+      isIoxOrg,
+      language,
+      onChangeScript,
+      setEditor,
+      useSchemaComposition,
+      script,
+    ]
   )
 }