feat: use secrets in notebook (#3624)

* 2539: create editor context, used by any monaco editor. handles injection based on enum option for sameLine or nextLine inserts.
* 2539: restructure how function injects work in notebooks, to utilize the new editor context. And create shared DRY components.
* 2539: injection of secrets into flow's rawFlux pipe.
* fix: debug flaky userAccount test:

Author: wiedld

cypress/e2e/cloud/userAccounts.test.ts

@@ -113,12 +113,12 @@ describe('Account Page; user with two accounts', () => {
 
     cy.getByTestID('input--active-account-name').should('have.value', 'Influx')
 
+    cy.getByTestID('input--active-account-name').clear()
+    cy.getByTestID('input--active-account-name').should('have.value', '')
+
     // what can I say?  i am a fan
     const newName = 'Bruno-no-no-no'
-
-    cy.getByTestID('input--active-account-name')
-      .clear()
-      .type(newName)
+    cy.getByTestID('input--active-account-name').type(newName)
     cy.getByTestID('rename-account--button').click()
 
     // test that the notification is up:

src/flows/components/Sidebar.scss

@@ -62,6 +62,7 @@
   text-align: right;
 }
 
-.flow-sidebar--client-list {
+.flow-sidebar--client-list,
+.flow-sidebar--secrets-list {
   margin-right: -16px;
 }

src/flows/components/Sidebar.tsx

@@ -1,24 +1,23 @@
 import React, {FC, useEffect, useContext, useRef} from 'react'
+import {useDispatch} from 'react-redux'
+
+// Components
 import {
   Button,
   ComponentColor,
   IconFont,
   DapperScrollbars,
   Dropdown,
 } from '@influxdata/clockface'
-import {useDispatch} from 'react-redux'
+import {ControlSection, ControlAction, Submenu} from 'src/types/flows'
+import ClientList from 'src/flows/components/ClientList'
 
-// Contexts
+// Context
 import {FlowContext} from 'src/flows/context/flow.current'
 import {FlowQueryContext} from 'src/flows/context/flow.query'
 import {SidebarContext} from 'src/flows/context/sidebar'
 
-// Components
-import {ControlSection, ControlAction, Submenu} from 'src/types/flows'
-import ClientList from 'src/flows/components/ClientList'
-import './Sidebar.scss'
-
-// Utils
+// Utils & Actions
 import {event} from 'src/cloud/utils/reporting'
 import {notify} from 'src/shared/actions/notifications'
 
@@ -29,6 +28,8 @@ import {
 } from 'src/shared/copy/notifications'
 import {PIPE_DEFINITIONS} from 'src/flows'
 
+import './Sidebar.scss'
+
 export const SubSideBar: FC = () => {
   const {flow} = useContext(FlowContext)
   const {submenu, hideSub} = useContext(SidebarContext)

src/flows/context/editor.tsx

@@ -0,0 +1,192 @@
+import React, {
+  FC,
+  createContext,
+  useState,
+  useCallback,
+  useContext,
+} from 'react'
+import {EditorType} from 'src/types'
+import {PipeContext} from 'src/flows/context/pipe'
+
+export enum InjectionType {
+  OnOwnLine = 'onOwnLine',
+  SameLine = 'sameLine',
+}
+
+interface InjectionPosition {
+  row: number
+  column: number
+  shouldStartWithNewLine: boolean
+  shouldEndInNewLine: boolean
+}
+
+export interface InjectionOptions {
+  header?: string | null
+  text: string
+  type: InjectionType
+}
+
+export interface EditorContextType {
+  editor: EditorType | null
+  setEditor: (editor: EditorType) => void
+  inject: (options: InjectionOptions) => void
+  calcInjectiontPosition: (type: InjectionType) => Partial<InjectionPosition>
+  updateText: (t: string) => void
+}
+
+const DEFAULT_CONTEXT: EditorContextType = {
+  editor: null,
+  setEditor: _ => {},
+  inject: _ => {},
+  calcInjectiontPosition: _ => ({}),
+  updateText: _ => {},
+}
+
+export const EditorContext = createContext<EditorContextType>(DEFAULT_CONTEXT)
+
+export const EditorProvider: FC = ({children}) => {
+  const [editor, setEditor] = useState<EditorType>(null)
+  const {data, update} = useContext(PipeContext)
+  const {queries, activeQuery} = data
+
+  const updateText = useCallback(
+    text => {
+      const _queries = [...queries]
+      _queries[activeQuery] = {
+        ...queries[activeQuery],
+        text,
+      }
+
+      update({queries: _queries})
+    },
+    [queries, activeQuery]
+  )
+
+  const calcInjectiontPosition = useCallback(
+    (type: InjectionType): Partial<InjectionPosition> => {
+      if (!editor) {
+        return {}
+      }
+      const {lineNumber, column: col} = editor.getPosition()
+      let row = lineNumber
+      let column = col
+
+      const queryText = editor.getModel().getValue()
+      const split = queryText.split('\n')
+      const getCurrentLineText = () => {
+        // row is not zero indexed in monaco editor. 1..N
+        return (split[row - 1] || split[split.length - 1]).trimEnd()
+      }
+
+      let currentLineText = getCurrentLineText()
+      // column is not zero indexed in monnao editor. 1..N
+      let textAheadOfCursor = currentLineText.slice(0, column - 1).trim()
+      let textBehindCursor = currentLineText.slice(column - 1).trim()
+
+      // if cursor has text in front of it, and should be onOwnRow
+      if (type == InjectionType.OnOwnLine && textAheadOfCursor) {
+        row++
+        column = 1
+      }
+      // edge case for when user toggles to the script editor
+      // this defaults the cursor to the initial position (top-left, 1:1 position)
+      const [currentRange] = editor.getVisibleRanges()
+      if (row === 1 && column === 1) {
+        row = currentRange.endLineNumber + 1
+      }
+
+      if (row !== lineNumber) {
+        currentLineText = getCurrentLineText()
+        textAheadOfCursor = currentLineText.slice(0, column - 1).trim()
+        textBehindCursor = currentLineText.slice(column - 1).trim()
+      }
+
+      let shouldEndInNewLine = false
+      // if cursor has text behind it, and should be onOwnRow
+      if (type == InjectionType.OnOwnLine && textBehindCursor) {
+        shouldEndInNewLine = true
+      }
+
+      const cursorInMiddleOfText = textAheadOfCursor && textBehindCursor
+      if (type == InjectionType.OnOwnLine && cursorInMiddleOfText) {
+        row++
+        column = 1
+        shouldEndInNewLine = true
+      }
+
+      // if we asked to insert on a row out-of-range
+      // then need to manually append newline to front of row
+      const shouldStartWithNewLine = row > currentRange.endLineNumber
+
+      return {row, column, shouldStartWithNewLine, shouldEndInNewLine}
+    },
+    [editor]
+  )
+
+  const inject = useCallback(
+    (options: InjectionOptions) => {
+      if (!editor) {
+        return {}
+      }
+
+      const {header, text: initT, type} = options
+      const {
+        row,
+        column: initC,
+        shouldStartWithNewLine,
+        shouldEndInNewLine,
+      } = calcInjectiontPosition(type)
+      let text = ''
+
+      if (shouldStartWithNewLine) {
+        text = `\n${initT}`
+      } else {
+        text = initT
+      }
+
+      if (shouldEndInNewLine) {
+        text = `${text}\n`
+      }
+
+      const column = type == InjectionType.OnOwnLine ? 1 : initC
+      const range = new window.monaco.Range(row, column, row, column)
+      const edits = [
+        {
+          range,
+          text,
+        },
+      ]
+
+      if (
+        header &&
+        !editor
+          .getModel()
+          .getValue()
+          .includes(header)
+      ) {
+        edits.unshift({
+          range: new window.monaco.Range(1, 1, 1, 1),
+          text: `${header}\n`,
+        })
+      }
+
+      editor.executeEdits('', edits)
+      updateText(editor.getValue())
+    },
+    [editor, calcInjectiontPosition, updateText]
+  )
+
+  return (
+    <EditorContext.Provider
+      value={{
+        editor,
+        setEditor,
+        inject,
+        calcInjectiontPosition,
+        updateText,
+      }}
+    >
+      {children}
+    </EditorContext.Provider>
+  )
+}

src/flows/pipes/Notification/view.tsx

@@ -69,7 +69,7 @@ import 'src/flows/pipes/Notification/styles.scss'
 
 // Constants
 import {UNPROCESSED_PANEL_TEXT} from 'src/flows'
-import CreateSecretForm from 'src/secrets/components/CreateSecretForm'
+import CreateSecretForm from 'src/secrets/components/CreateSecret/CreateSecretForm'
 
 const Notification: FC<PipeProp> = ({Context}) => {
   const dispatch = useDispatch()

src/flows/pipes/RawFluxEditor/FluxInjectionOption.tsx

@@ -0,0 +1,77 @@
+// Libraries
+import React, {FC, createRef} from 'react'
+
+// Component
+import {
+  Popover,
+  PopoverPosition,
+  PopoverInteraction,
+  Appearance,
+  Button,
+  ComponentSize,
+  ComponentColor,
+} from '@influxdata/clockface'
+
+type OptionType = Record<string, any>
+
+interface Props {
+  option: OptionType
+  extractor: (func: OptionType) => string
+  onClick: (func: OptionType) => void
+  testID: string
+  ToolTipContent?: (props: {item: any}) => JSX.Element
+}
+
+const defaultProps = {
+  testID: 'flux-injection-option',
+}
+
+const FluxInjectionOption: FC<Props> = ({
+  option,
+  extractor,
+  onClick,
+  testID,
+  ToolTipContent,
+}) => {
+  const itemRef = createRef<HTMLDListElement>()
+  const handleClick = () => {
+    onClick(option)
+  }
+
+  return (
+    <>
+      {!!ToolTipContent && (
+        <Popover
+          appearance={Appearance.Outline}
+          enableDefaultStyles={false}
+          position={PopoverPosition.ToTheLeft}
+          triggerRef={itemRef}
+          showEvent={PopoverInteraction.Hover}
+          hideEvent={PopoverInteraction.Hover}
+          distanceFromTrigger={8}
+          testID="toolbar-popover"
+          contents={() => <ToolTipContent item={option} />}
+        />
+      )}
+      <dd
+        ref={itemRef}
+        data-testid={`flux--${testID}`}
+        className="flux-toolbar--list-item flux-toolbar--function"
+      >
+        <code>{extractor(option)}</code>
+        <Button
+          testID={`flux--${testID}--inject`}
+          text="Inject"
+          onClick={handleClick}
+          size={ComponentSize.ExtraSmall}
+          className="flux-toolbar--injector"
+          color={ComponentColor.Primary}
+        />
+      </dd>
+    </>
+  )
+}
+
+FluxInjectionOption.defaultProps = defaultProps
+
+export default FluxInjectionOption