feat(4615): generalize editor context (#4629)

Make a single, generalized context which can be used anywhere we utilize the monaco-editor in the UI. This editor context can handle incoming UI interactions/inputs into the monaco-editor, in a consistent single approach. Right now it only handles the injection of text blocks (e.g. functions or variables), but we can also expand later to additional functionality.

Author: wiedld

src/flows/context/editor.tsx

@@ -18,18 +18,19 @@ import {showOverlay, dismissOverlay} from 'src/overlays/actions/overlays'
 import {getSecrets} from 'src/secrets/actions/thunks'
 import {getAllSecrets} from 'src/resources/selectors'
 
-// Context
-import {InjectionOptions, InjectionType} from 'src/flows/context/editor'
+// Injection
+import {InjectionOptions, InjectionType} from 'src/shared/contexts/editor'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import {Secret} from 'src/types'
 
 interface Props {
   inject: (options: InjectionOptions) => void
+  cbOnInject: (queryText: string) => void
 }
 
-const SecretsList: FC<Props> = ({inject}) => {
+const SecretsList: FC<Props> = ({inject, cbOnInject}) => {
   const dispatch = useDispatch()
   const secrets = useSelector(getAllSecrets)
 
@@ -46,11 +47,12 @@ const SecretsList: FC<Props> = ({inject}) => {
         text: `secrets.get(key: "${secret.id}") `,
         type: InjectionType.SameLine,
         header: `import "influxdata/influxdb/secrets"`,
+        cbParentOnUpdateText: cbOnInject,
       }
       inject(options)
       event('Inject secret into Flux Script', {secret: secret.id})
     },
-    [inject]
+    [inject, cbOnInject]
   )
 
   useEffect(() => {

src/flows/pipes/RawFluxEditor/SecretsList.tsx

@@ -23,11 +23,7 @@ import {PipeProp} from 'src/types/flows'
 // Context
 import {PipeContext} from 'src/flows/context/pipe'
 import {SidebarContext} from 'src/flows/context/sidebar'
-import {
-  EditorContext,
-  EditorProvider,
-  InjectionType,
-} from 'src/flows/context/editor'
+import {EditorContext, EditorProvider} from 'src/shared/contexts/editor'
 import {VariablesContext} from 'src/flows/context/variables'
 
 // Components
@@ -39,10 +35,6 @@ import DynamicFunctions from 'src/flows/pipes/RawFluxEditor/FunctionsList/Dynami
 import 'src/flows/pipes/RawFluxEditor/style.scss'
 
 // Utils
-import {
-  isPipeTransformation,
-  functionRequiresNewLine,
-} from 'src/shared/utils/fluxFunctions'
 import {event} from 'src/cloud/utils/reporting'
 import {CLOUD} from 'src/shared/constants'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
@@ -52,12 +44,12 @@ const FluxMonacoEditor = lazy(() =>
 )
 
 const Query: FC<PipeProp> = ({Context}) => {
-  const {id, data} = useContext(PipeContext)
+  const {id, data, update} = useContext(PipeContext)
   const {hideSub, id: showId, show, showSub, register} = useContext(
     SidebarContext
   )
   const editorContext = useContext(EditorContext)
-  const {setEditor, inject, updateText} = editorContext
+  const {setEditor, inject, injectFunction} = editorContext
   const {queries, activeQuery} = data
   const query = queries[activeQuery]
   const {variables} = useContext(VariablesContext)
@@ -71,54 +63,35 @@ const Query: FC<PipeProp> = ({Context}) => {
             {
               title: 'Inject Secret',
               disable: () => false,
-              menu: <SecretsList inject={inject} />,
+              menu: <SecretsList inject={inject} cbOnInject={updateText} />,
             },
           ],
         },
       ])
     }
   }, [id, inject])
 
-  const injectIntoEditor = useCallback(
-    (fn): void => {
-      const text = isPipeTransformation(fn)
-        ? `  |> ${fn.example}`
-        : `${fn.example}`
-
-      const getHeader = fn => {
-        let importStatement = null
-
-        // universe packages are loaded by deafult. Don't need import statement
-        if (fn.package && fn.package !== 'universe') {
-          importStatement = `import "${fn.package}"`
-          if (
-            CLOUD &&
-            isFlagEnabled('fluxDynamicDocs') &&
-            fn.path.includes('/')
-          ) {
-            importStatement = `import "${fn.path}"`
-          }
-        }
-        return importStatement
+  const updateText = useCallback(
+    text => {
+      const _queries = [...queries]
+      _queries[activeQuery] = {
+        ...queries[activeQuery],
+        text,
       }
 
-      const type =
-        isPipeTransformation(fn) || functionRequiresNewLine(fn)
-          ? InjectionType.OnOwnLine
-          : InjectionType.SameLine
+      update({queries: _queries})
+    },
+    [queries, activeQuery]
+  )
 
-      const options = {
-        text,
-        type,
-        header: getHeader(fn),
-        triggerSuggest: true,
-      }
-      inject(options)
+  const injectIntoEditor = useCallback(
+    (fn): void => {
+      injectFunction(fn, updateText)
     },
-    [inject]
+    [injectFunction, updateText]
   )
 
-  const launcher = () => {
+  const launcher = useCallback(() => {
     if (showId === id) {
       event('Flux Panel (Notebooks) - Toggle Functions - Off')
       hideSub()
@@ -131,7 +104,7 @@ const Query: FC<PipeProp> = ({Context}) => {
         showSub(<Functions onSelect={injectIntoEditor} />)
       }
     }
-  }
+  }, [injectIntoEditor, showId])
 
   const controls = (
     <Button
@@ -172,6 +145,7 @@ const Query: FC<PipeProp> = ({Context}) => {
       updateText,
       editorContext.editor,
       variables,
+      launcher,
     ]
   )
 }