feat: add sql dropdown support (#6148)

* wip - need to make this work so that we can cancel and return the previous language selected

* feat: complete the sql support dropdown

* chore: resolve conflicts

* chore: disable sync for sql scripts

* feat: clean up state management a bit

* chore: remove TODO

* chore: unnest the language property

Author: asalem1

cypress/e2e/shared/fluxQueryBuilder.test.ts

@@ -1,7 +1,7 @@
 import {Organization} from '../../../src/types'
 const path = require('path')
 
-const DEFAULT_EDITOR_TEXT =
+const DEFAULT_FLUX_EDITOR_TEXT =
   '// Start by selecting data from the schema browser or typing flux here'
 
 describe('Script Builder', () => {
@@ -71,7 +71,10 @@ describe('Script Builder', () => {
           cy.getByTestID('flux-query-builder--no-save').click({force: true})
         })
         cy.getByTestID('flux-editor').within(() => {
-          cy.get('textarea.inputarea').should('have.value', DEFAULT_EDITOR_TEXT)
+          cy.get('textarea.inputarea').should(
+            'have.value',
+            DEFAULT_FLUX_EDITOR_TEXT
+          )
         })
       }
     })
@@ -606,7 +609,10 @@ describe('Script Builder', () => {
 
         cy.log('editor text is now empty')
         cy.getByTestID('flux-editor').within(() => {
-          cy.get('textarea.inputarea').should('have.value', DEFAULT_EDITOR_TEXT)
+          cy.get('textarea.inputarea').should(
+            'have.value',
+            DEFAULT_FLUX_EDITOR_TEXT
+          )
         })
 
         cy.log('schema browser has been cleared')
@@ -618,7 +624,10 @@ describe('Script Builder', () => {
       it('should not be able to modify the composition when unsynced, yet still modify the saved schema -- which updates the composition when re-synced', () => {
         cy.log('start with empty editor text')
         cy.getByTestID('flux-editor', {timeout: 30000}).within(() => {
-          cy.get('textarea.inputarea').should('have.value', DEFAULT_EDITOR_TEXT)
+          cy.get('textarea.inputarea').should(
+            'have.value',
+            DEFAULT_FLUX_EDITOR_TEXT
+          )
         })
 
         cy.log('turn off sync')
@@ -633,7 +642,10 @@ describe('Script Builder', () => {
         cy.log('editor text is still empty')
         cy.getByTestID('flux-editor').within(() => {
           // selecting bucket will empty the editor text
-          cy.get('textarea.inputarea').should('have.value', DEFAULT_EDITOR_TEXT)
+          cy.get('textarea.inputarea').should(
+            'have.value',
+            DEFAULT_FLUX_EDITOR_TEXT
+          )
         })
 
         cy.log('turn on sync')

package.json

@@ -52,7 +52,7 @@
     "cy": "CYPRESS_dexUrl=https://$INGRESS_HOST:$PORT_HTTPS CYPRESS_baseUrl=http://localhost:9999 cypress open",
     "cy:dev": "source ../monitor-ci/.env && CYPRESS_dexUrl=CLOUD CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{cloud,shared}/**/*.*'",
     "cy:dev-oss": "source ../monitor-ci/.env && CYPRESS_dexUrl=OSS CYPRESS_baseUrl=https://$INGRESS_HOST:$PORT_HTTPS cypress open --config testFiles='{oss,shared}/**/*.*'",
-    "generate": "export SHA=a570a0fa2a9fea8698250f5436f6eccb89c9061c && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
+    "generate": "export SHA=b561645e05716036f071a43df0bf2a81ad32be90 && export REMOTE=https://raw.githubusercontent.com/influxdata/openapi/${SHA}/ && yarn generate-meta",
     "generate-local": "export REMOTE=../openapi/ && yarn generate-meta",
     "generate-local-cloud": "export REMOTE=../openapi/ && yarn generate-meta-cloud",
     "generate-meta": "if [ -z \"${CLOUD_URL}\" ]; then yarn generate-meta-oss; else yarn generate-meta-cloud; fi",

src/dataExplorer/components/FieldSelector.tsx

@@ -84,7 +84,7 @@ const FieldSelector: FC = () => {
       </div>
     )
   } else if (loading === RemoteDataState.Done && fieldsToShow.length) {
-    if (resource?.data?.language === LanguageType.SQL) {
+    if (resource?.language === LanguageType.SQL) {
       // readOnly
       list = fieldsToShow.map(field => (
         <dd

src/dataExplorer/components/FluxQueryBuilder.scss

@@ -54,3 +54,10 @@
     border-bottom: 2px solid $cf-grey-15;
   }
 }
+
+.script-dropdown__flux {
+  text-transform: capitalize;
+}
+.script-dropdown__sql {
+  text-transform: uppercase;
+}

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -1,15 +1,17 @@
-import React, {FC, useState, useContext} from 'react'
+import React, {FC, useCallback, useState, useContext} from 'react'
 import {useHistory} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 
 // Components
 import {
   ComponentColor,
   DraggableResizer,
+  Dropdown,
   FlexBox,
   FlexDirection,
   Orientation,
   Button,
+  Icon,
   IconFont,
   AlignItems,
   JustifyContent,
@@ -24,6 +26,7 @@ import {
   PersistanceProvider,
   PersistanceContext,
 } from 'src/dataExplorer/context/persistance'
+import {LanguageType} from 'src/dataExplorer/components/resources'
 import ResultsPane from 'src/dataExplorer/components/ResultsPane'
 import Sidebar from 'src/dataExplorer/components/Sidebar'
 import Schema from 'src/dataExplorer/components/Schema'
@@ -47,27 +50,43 @@ export enum OverlayType {
 
 const FluxQueryBuilder: FC = () => {
   const history = useHistory()
-  const {hasChanged, resource, vertical, setVertical} =
+  const {resource, hasChanged, vertical, setVertical, setHasChanged} =
     useContext(PersistanceContext)
   const [overlayType, setOverlayType] = useState<OverlayType | null>(null)
+  const [selectedLanguage, setSelectedLanguage] = useState(
+    resource?.language ?? LanguageType.FLUX
+  )
   const [isOverlayVisible, setIsOverlayVisible] = useState(false)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
   const org = useSelector(getOrg)
 
-  const handleClear = () => {
+  const handleClear = useCallback(() => {
     cancel()
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
 
-    history.replace(`/orgs/${org.id}/data-explorer/from/script`)
+    if (isFlagEnabled('uiSqlSupport')) {
+      history.replace(
+        `/orgs/${org.id}/data-explorer/from/script?language=${selectedLanguage}`
+      )
+    } else {
+      history.replace(`/orgs/${org.id}/data-explorer/from/script`)
+    }
 
     if (!isFlagEnabled('saveAsScript')) {
       setIsOverlayVisible(false)
     }
+  }, [cancel, org.id, history, setResult, setStatus, selectedLanguage])
+
+  const handleSelectDropdown = (language: LanguageType) => {
+    // set the language in the state until we can confirm the selection
+    setSelectedLanguage(language)
+    setHasChanged(true)
+    setOverlayType(OverlayType.NEW)
   }
 
-  const handleNewScript = () => {
+  const handleNewScript = useCallback(() => {
     if (isFlagEnabled('saveAsScript')) {
       if (hasChanged) {
         setOverlayType(OverlayType.NEW)
@@ -81,7 +100,7 @@ const FluxQueryBuilder: FC = () => {
         handleClear()
       }
     }
-  }
+  }, [handleClear, hasChanged])
 
   const handleUserpilot = () => {
     if (window.userpilot) {
@@ -95,6 +114,7 @@ const FluxQueryBuilder: FC = () => {
         {isFlagEnabled('saveAsScript') ? (
           <Overlay visible={overlayType !== null}>
             <SaveAsScript
+              language={selectedLanguage}
               type={overlayType}
               setOverlayType={setOverlayType}
               onClose={() => setOverlayType(null)}
@@ -137,13 +157,43 @@ const FluxQueryBuilder: FC = () => {
               direction={FlexDirection.Row}
               justifyContent={JustifyContent.SpaceBetween}
             >
-              <div>
-                <Button
-                  onClick={handleNewScript}
-                  text={isFlagEnabled('saveAsScript') ? 'New Script' : 'Clear'}
-                  icon={IconFont.Plus_New}
-                  testID="flux-query-builder--new-script"
-                />
+              <div style={{display: 'flex'}}>
+                {isFlagEnabled('uiSqlSupport') ? (
+                  <Dropdown
+                    menu={onCollapse => (
+                      <Dropdown.Menu onCollapse={onCollapse}>
+                        {[LanguageType.FLUX, LanguageType.SQL].map(option => (
+                          <Dropdown.Item
+                            className={`script-dropdown__${option}`}
+                            key={option}
+                            onClick={() => handleSelectDropdown(option)}
+                            selected={resource?.language === option}
+                          >
+                            {option}
+                          </Dropdown.Item>
+                        ))}
+                      </Dropdown.Menu>
+                    )}
+                    button={(active, onClick) => (
+                      <Dropdown.Button active={active} onClick={onClick}>
+                        <>
+                          <Icon glyph={IconFont.Plus_New} />
+                          &nbsp;New Script
+                        </>
+                      </Dropdown.Button>
+                    )}
+                    testID="select-option-dropdown"
+                  />
+                ) : (
+                  <Button
+                    onClick={handleNewScript}
+                    text={
+                      isFlagEnabled('saveAsScript') ? 'New Script' : 'Clear'
+                    }
+                    icon={IconFont.Plus_New}
+                    testID="flux-query-builder--new-script"
+                  />
+                )}
                 {isFlagEnabled('saveAsScript') && (
                   <Button
                     className="flux-query-builder__action-button"

src/dataExplorer/components/OpenScript.tsx

@@ -1,4 +1,4 @@
-import React, {FC, useState, useCallback, useEffect} from 'react'
+import React, {FC, useContext, useState, useCallback, useEffect} from 'react'
 import {
   Button,
   ComponentColor,
@@ -17,6 +17,8 @@ import {CLOUD} from 'src/shared/constants'
 import {useHistory} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 import {getOrg} from 'src/organizations/selectors'
+import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+import {QueryContext} from 'src/shared/contexts/query'
 
 let getScripts
 
@@ -33,6 +35,8 @@ const OpenScript: FC<Props> = ({onCancel, onClose}) => {
   const [scripts, setScripts] = useState([])
   const [loading, setLoading] = useState(RemoteDataState.NotStarted)
   const [searchTerm, setSearchTerm] = useState('')
+  const {setStatus, setResult} = useContext(ResultsContext)
+  const {cancel} = useContext(QueryContext)
   const [selectedScript, setSelectedScript] = useState<any>({})
   const history = useHistory()
   const org = useSelector(getOrg)
@@ -59,6 +63,9 @@ const OpenScript: FC<Props> = ({onCancel, onClose}) => {
   }, [getScripts])
 
   const handleOpenScript = () => {
+    setStatus(RemoteDataState.NotStarted)
+    setResult(null)
+    cancel()
     history.replace(
       `/orgs/${org.id}/data-explorer/from/script/${selectedScript.id}`
     )
@@ -67,7 +74,7 @@ const OpenScript: FC<Props> = ({onCancel, onClose}) => {
 
   useEffect(() => {
     handleGetScripts()
-  }, [])
+  }, [handleGetScripts])
 
   if (
     loading === RemoteDataState.NotStarted ||

src/dataExplorer/components/SaveAsScript.tsx

@@ -27,14 +27,17 @@ import {
 import {getOrg} 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'
 
 interface Props {
+  language: LanguageType
   onClose: () => void
   setOverlayType: (type: OverlayType) => void
   type: OverlayType | null
 }
 
-const SaveAsScript: FC<Props> = ({onClose, setOverlayType, type}) => {
+const SaveAsScript: FC<Props> = ({language, onClose, setOverlayType, type}) => {
   const dispatch = useDispatch()
   const history = useHistory()
   const {hasChanged, resource, setResource, save} =
@@ -89,14 +92,20 @@ const SaveAsScript: FC<Props> = ({onClose, setOverlayType, type}) => {
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
 
-    history.replace(`/orgs/${org.id}/data-explorer/from/script`)
+    if (isFlagEnabled('uiSqlSupport')) {
+      history.replace(
+        `/orgs/${org.id}/data-explorer/from/script?language=${language}`
+      )
+    } else {
+      history.replace(`/orgs/${org.id}/data-explorer/from/script`)
+    }
     if (type !== OverlayType.OPEN) {
       onClose()
     }
   }, [onClose, setStatus, setResult, cancel, history, org?.id, type])
 
   const handleSaveScript = () => {
-    save()
+    save(language)
       .then(() => {
         setError(null)
         dispatch(notify(scriptSaveSuccess(resource?.data?.name ?? '')))

src/dataExplorer/components/SchemaBrowserHeading.tsx

@@ -17,13 +17,14 @@ import {PersistanceContext} from 'src/dataExplorer/context/persistance'
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {LanguageType} from 'src/dataExplorer/components/resources'
 
 const FLUX_SYNC_DISABLE_TEXT = `Schema Sync is no longer available because the \
 code block has been edited.`
 
 const SchemaBrowserHeading: FC = () => {
   const {fluxSync, toggleFluxSync} = useContext(FluxQueryBuilderContext)
-  const {selection} = useContext(PersistanceContext)
+  const {resource, selection} = useContext(PersistanceContext)
 
   // Disable means diverged, used to not allow turning on or off the toggle
   const disableToggle: boolean = selection.composition?.diverged
@@ -52,6 +53,10 @@ const SchemaBrowserHeading: FC = () => {
     return null
   }
 
+  if (resource?.language === LanguageType.SQL) {
+    return null
+  }
+
   return (
     <FlexBox
       className="schema-browser-heading"

src/dataExplorer/components/TagSelector.tsx

@@ -85,7 +85,7 @@ const TagValues: FC<TagValuesProps> = ({loading, tagKey, tagValues}) => {
       </div>
     )
   } else if (loading === RemoteDataState.Done && valuesToShow.length) {
-    if (resource?.data?.language === LanguageType.SQL) {
+    if (resource?.language === LanguageType.SQL) {
       // readOnly
       list = valuesToShow.map(value => (
         <dd

src/dataExplorer/components/resources/TemplatePage.tsx

@@ -1,16 +1,18 @@
 import React, {FC, useEffect, useState, useContext} from 'react'
 import {useSelector} from 'react-redux'
 import {Switch, Route, useHistory, useParams} from 'react-router-dom'
-import {RemoteDataState} from 'src/types'
-
+import {RemoteDataState, ResourceType} from 'src/types'
 import {getOrg} from 'src/organizations/selectors'
 
 import {RESOURCES} from 'src/dataExplorer/components/resources'
 import {
   PersistanceContext,
   PersistanceProvider,
-  DEFAULT_EDITOR_TEXT,
+  DEFAULT_FLUX_EDITOR_TEXT,
+  DEFAULT_SQL_EDITOR_TEXT,
 } from 'src/dataExplorer/context/persistance'
+import {LanguageType} from 'src/dataExplorer/components/resources'
+import {getLanguage} from 'src/dataExplorer/shared/utils'
 
 const Template: FC = () => {
   const {setQuery, setHasChanged, setResource, clearCompositionSelection} =
@@ -34,10 +36,22 @@ const Template: FC = () => {
       return
     }
 
+    const language = getLanguage()
+    let flux = DEFAULT_FLUX_EDITOR_TEXT
+
+    if (language === LanguageType.SQL) {
+      flux = DEFAULT_SQL_EDITOR_TEXT
+    }
+
     setLoading(RemoteDataState.Loading)
     clearCompositionSelection()
-    setQuery(DEFAULT_EDITOR_TEXT)
-    setResource(null)
+    setQuery(flux)
+    setResource({
+      type: ResourceType.Scripts,
+      flux,
+      language,
+      data: {},
+    })
 
     RESOURCES[params[0]].init.apply(this, params.slice(1)).then(data => {
       setQuery(data.flux)