feat(5340): use default editorText in script editor (#5741)

* feat(5340): use default editorText in script editor; updates to session, new script resource, and clear() methods

* feat(5340): update tests for new default text, and caught edge case for certain flag+action combination

* test: demonstrate that we need the default query set on both the session, and in the script resource. In order to have on-load provide the default message.

* fix: add back the default message, to the default session store

Author: wiedld

cypress/e2e/shared/editor.test.ts

@@ -9,6 +9,7 @@ describe('Editor+LSP communication', () => {
       cy.getByTestID(editorSelector).then(() => {
         cy.getByTestID('flux-editor', {timeout: 30000})
           .should('be.visible')
+          .monacoType('{selectall} {backspace}')
           .monacoType('foo |> bar')
           .within(() => {
             cy.get('.squiggly-error', {timeout: 30000}).should('be.visible')

cypress/e2e/shared/fluxQueryBuilder.test.ts

@@ -187,12 +187,15 @@ describe('Script Builder', () => {
   })
 
   describe('Schema Composition', () => {
+    const DEFAULT_EDITOR_TEXT =
+      '// Start by selecting data from the schema browser or typing flux here'
+
     beforeEach(() => {
       window.sessionStorage.setItem(
         'dataExplorer.schema',
         JSON.parse(JSON.stringify(DEFAULT_SCHEMA))
       )
-      window.sessionStorage.setItem('dataExplorer.query', '')
+      window.sessionStorage.setItem('dataExplorer.query', DEFAULT_EDITOR_TEXT)
 
       cy.setFeatureFlags({
         schemaComposition: true,
@@ -300,7 +303,7 @@ describe('Script Builder', () => {
 
         cy.log('editor text is now empty')
         cy.getByTestID('flux-editor').within(() => {
-          cy.get('textarea.inputarea').should('have.value', '')
+          cy.get('textarea.inputarea').should('have.value', DEFAULT_EDITOR_TEXT)
         })
 
         cy.log('schema browser has been cleared')
@@ -312,7 +315,7 @@ 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', '')
+          cy.get('textarea.inputarea').should('have.value', DEFAULT_EDITOR_TEXT)
         })
 
         cy.log('turn off sync')
@@ -326,6 +329,7 @@ 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', '')
         })
 

src/dataExplorer/components/SaveAsScript.tsx

@@ -34,7 +34,7 @@ interface Props {
 const SaveAsScript: FC<Props> = ({onClose, type}) => {
   const dispatch = useDispatch()
   const history = useHistory()
-  const {hasChanged, resource, setResource, save} =
+  const {hasChanged, resource, setResource, clearSchemaSelection, save} =
     useContext(PersistanceContext)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
@@ -79,6 +79,7 @@ const SaveAsScript: FC<Props> = ({onClose, type}) => {
   const clear = useCallback(() => {
     cancel()
     setStatus(RemoteDataState.NotStarted)
+    clearSchemaSelection()
     setResult(null)
 
     history.replace(`/orgs/${org.id}/data-explorer/from/script`)

src/dataExplorer/components/resources/TemplatePage.tsx

@@ -9,6 +9,7 @@ import {RESOURCES} from 'src/dataExplorer/components/resources'
 import {
   PersistanceContext,
   PersistanceProvider,
+  DEFAULT_EDITOR_TEXT,
 } from 'src/dataExplorer/context/persistance'
 
 const Template: FC = () => {
@@ -35,7 +36,7 @@ const Template: FC = () => {
 
     setLoading(RemoteDataState.Loading)
     clearSchemaSelection()
-    setQuery('')
+    setQuery(DEFAULT_EDITOR_TEXT)
     setResource(null)
 
     RESOURCES[params[0]].init.apply(this, params.slice(1)).then(data => {

src/dataExplorer/components/resources/types/script/index.ts

@@ -1,6 +1,7 @@
 import {ResourceType} from 'src/types/resources'
 import editor from './editor'
 import {CLOUD} from 'src/shared/constants'
+import {DEFAULT_EDITOR_TEXT} from 'src/dataExplorer/context/persistance'
 
 const {getScript, patchScript, postScript} = CLOUD
   ? require('src/client/scriptsRoutes')
@@ -18,7 +19,7 @@ export default function script(register) {
       if (!id || !CLOUD) {
         return Promise.resolve({
           type: ResourceType.Scripts,
-          flux: '',
+          flux: DEFAULT_EDITOR_TEXT,
           data: {},
         })
       }
@@ -36,7 +37,7 @@ export default function script(register) {
 
         return {
           type: ResourceType.Scripts,
-          flux: '',
+          flux: DEFAULT_EDITOR_TEXT,
           data: {},
         }
       })

src/dataExplorer/context/fluxQueryBuilder.tsx

@@ -11,7 +11,10 @@ import React, {
 // Context
 import {MeasurementsContext} from 'src/dataExplorer/context/measurements'
 import {FieldsContext} from 'src/dataExplorer/context/fields'
-import {PersistanceContext} from 'src/dataExplorer/context/persistance'
+import {
+  PersistanceContext,
+  DEFAULT_EDITOR_TEXT,
+} from 'src/dataExplorer/context/persistance'
 import {TagsContext} from 'src/dataExplorer/context/tags'
 import {EditorContext} from 'src/shared/contexts/editor'
 
@@ -85,7 +88,8 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
   const {getFields, resetFields} = useContext(FieldsContext)
   const {getTagKeys, resetTags} = useContext(TagsContext)
   const {injectViaLsp} = useContext(EditorContext)
-  const {selection, setSelection} = useContext(PersistanceContext)
+  const {query, setQuery, selection, setSelection} =
+    useContext(PersistanceContext)
 
   // States
   // This state is a restructed PersistanceContext selection.tagValues
@@ -121,6 +125,11 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
   }
 
   const handleSelectBucket = (bucket: Bucket): void => {
+    // first time selecting bucket --> remove if default message
+    if (query == DEFAULT_EDITOR_TEXT) {
+      setQuery('')
+    }
+
     setSelection({bucket, measurement: '', fields: [], tagValues: []})
 
     // Reset measurement, tags, fields, selected tag values

src/dataExplorer/context/persistance.tsx

@@ -53,12 +53,15 @@ export const DEFAULT_SCHEMA: SchemaSelection = {
   },
 }
 
+export const DEFAULT_EDITOR_TEXT =
+  '// Start by selecting data from the schema browser or typing flux here'
+
 const DEFAULT_CONTEXT = {
   hasChanged: false,
   horizontal: [0.5],
   vertical: [0.25, 0.8],
   range: DEFAULT_TIME_RANGE,
-  query: '',
+  query: DEFAULT_EDITOR_TEXT,
   resource: null,
   selection: JSON.parse(JSON.stringify(DEFAULT_SCHEMA)),
 

src/shared/components/FluxMonacoEditor.tsx

@@ -167,7 +167,7 @@ const FluxEditorMonaco: FC<Props> = ({
         </div>
       </ErrorBoundary>
     ),
-    [onChangeScript, setEditor, useSchemaComposition]
+    [onChangeScript, setEditor, useSchemaComposition, script]
   )
 }