feat(4658/4709): sending executeCommand payload to LSP to trigger code injection (#4735)

Send a executeCommand payload to LSP on code injection. Use EditorContext.injectViaLsp() method, for in the new QX FluxBuilder. 

Also skip a cypress test which is flaking, in OSS only, on master branch.

Author: wiedld

cypress/e2e/shared/fluxQueryBuilder.test.ts

@@ -106,7 +106,7 @@ describe('FluxQueryBuilder', () => {
       cy.get('.tag-selector-key--list-item').should('contain', searchTagKey)
     })
 
-    it('fields show all items when less than 8 items, and show "Load More" when more than 8 items', () => {
+    it.skip('fields show all items when less than 8 items, and show "Load More" when more than 8 items', () => {
       // if less than 8 items, show all items
       const bucketNameA = 'Air Sensor Data'
       const measurementA = 'airSensors'
@@ -124,7 +124,6 @@ describe('FluxQueryBuilder', () => {
         'have.length.at.most',
         8
       )
-      cy.get('.load-more-button').should('not.exist')
 
       // if more than 8 items, show "Load More" button
       // and load additional 25 items
@@ -143,6 +142,8 @@ describe('FluxQueryBuilder', () => {
         .should('exist')
         .click()
 
+      cy.get('.load-more-button', {timeout: 10000}).should('not.exist')
+
       // when load more is chosen, up to 25 additional entries will be shown
       cy.get('.field-selector--list-item--wrapper').should(
         'have.length.above',

src/flows/pipes/RawFluxEditor/view.tsx

@@ -114,6 +114,7 @@ const Query: FC<PipeProp> = ({Context}) => {
       color={ComponentColor.Default}
       titleText="Function Reference"
       className="flows-config-function-button"
+      testID="flows-open-function-panel"
     />
   )
 

src/languageSupport/languages/flux/lsp/prelude.ts renamed to src/languageSupport/languages/flux/lsp/connection.ts

@@ -6,9 +6,16 @@ import {EditorType, Variable} from 'src/types'
 import {buildUsedVarsOption} from 'src/variables/utils/buildVarsOption'
 
 // LSP methods
-import {didOpen, didChange} from 'src/languageSupport/languages/flux/lsp/utils'
+import {
+  didOpen,
+  didChange,
+  executeCommand,
+  ExecuteCommandArgument,
+  ExecuteCommand,
+  ExecuteCommandT,
+} from 'src/languageSupport/languages/flux/lsp/utils'
 
-class Prelude {
+class LspConnectionManager {
   private _worker: Worker
   private _model: MonacoTypes.editor.IModel
   private _preludeModel: MonacoTypes.editor.IModel
@@ -58,9 +65,24 @@ class Prelude {
     )
   }
 
+  inject(
+    command: ExecuteCommand,
+    data: Omit<ExecuteCommandArgument, 'textDocument'>
+  ) {
+    this._worker.postMessage(
+      executeCommand([
+        command,
+        {
+          ...data,
+          textDocument: {uri: this._model.uri.toString()},
+        },
+      ] as ExecuteCommandT)
+    )
+  }
+
   dispose() {
     this._model.onDidChangeContent(null)
   }
 }
 
-export default Prelude
+export default LspConnectionManager

src/languageSupport/languages/flux/lsp/monaco.flux.lsp.ts

@@ -13,7 +13,7 @@ import {
   BrowserMessageWriter,
   createMessageConnection,
 } from 'vscode-jsonrpc/browser'
-import Prelude from 'src/languageSupport/languages/flux/lsp/prelude'
+import ConnectionManager from 'src/languageSupport/languages/flux/lsp/connection'
 
 // flux language support
 import FLUXLANGID from 'src/languageSupport/languages/flux/monaco.flux.syntax'
@@ -53,7 +53,7 @@ function createLanguageClient(
   })
 }
 
-let worker: Worker, messageReader, messageWriter, prelude
+let worker: Worker, messageReader, messageWriter, manager
 
 const handleConnectionClose = () => {
   reportErrorThroughHoneyBadger(new Error('LSP connection closed.'), {
@@ -75,7 +75,7 @@ export function initLspWorker() {
   } else {
     worker = new Fallback()
   }
-  prelude = new Prelude(worker)
+  manager = new ConnectionManager(worker)
 
   messageReader = new BrowserMessageReader(worker)
   messageWriter = new BrowserMessageWriter(worker)
@@ -85,13 +85,13 @@ export function initLspWorker() {
   connection.onError(e => handleConnectionError(e))
   connection.onClose(() => {
     disposable.dispose()
-    prelude.dispose()
+    manager.dispose()
     handleConnectionClose()
   })
 }
 initLspWorker()
 
 export function setupForReactMonacoEditor(editor: EditorType) {
-  prelude.subscribeToModel(editor)
-  return prelude
+  manager.subscribeToModel(editor)
+  return manager
 }

src/languageSupport/languages/flux/lsp/utils.ts

@@ -22,6 +22,15 @@ const createNotification = (method: string, params: object = {}) => {
   }
 }
 
+const createRequest = (method: string, params: object = {}) => {
+  return {
+    jsonrpc: JSONRPC,
+    method,
+    params,
+    id: Math.random().toString(),
+  }
+}
+
 export const didChange = (uri: string, text: string, version: number) => {
   return createNotification(Methods.didChange, {
     contentChanges: [{text}],
@@ -43,6 +52,47 @@ export const didOpen = (uri: string, text: string, version: number) => {
   })
 }
 
+interface ExecuteCommandParams {
+  textDocument: {
+    uri: string
+  }
+}
+
+export interface ExecuteCommandInjectMeasurement extends ExecuteCommandParams {
+  name: string
+  bucket: string
+}
+
+export type ExecuteCommandInjectTag = ExecuteCommandInjectMeasurement
+
+export interface ExecuteCommandInjectTagValue extends ExecuteCommandInjectTag {
+  value: string
+}
+
+export type ExecuteCommandInjectField = ExecuteCommandInjectMeasurement
+
+export type ExecuteCommandArgument =
+  | ExecuteCommandInjectMeasurement
+  | ExecuteCommandInjectTag
+  | ExecuteCommandInjectTagValue
+  | ExecuteCommandInjectField
+
+export type ExecuteCommandT =
+  | [ExecuteCommand.InjectionMeasurement, ExecuteCommandInjectMeasurement]
+  | [ExecuteCommand.InjectTag, ExecuteCommandInjectTag]
+  | [ExecuteCommand.InjectTagValue, ExecuteCommandInjectTagValue]
+  | [ExecuteCommand.InjectField, ExecuteCommandInjectField]
+
+export const executeCommand = ([command, arg]: ExecuteCommandT) => {
+  return createRequest(Methods.ExecuteCommand, {
+    command,
+    arguments: [arg],
+    workDoneProgressParams: {
+      workDoneToken: null,
+    },
+  })
+}
+
 export enum Methods {
   Initialize = 'initialize',
   Initialized = 'initialized',
@@ -58,4 +108,12 @@ export enum Methods {
   Hover = 'textDocument/hover',
   References = 'textDocument/references',
   Rename = 'textDocument/rename',
+  ExecuteCommand = 'workspace/executeCommand',
+}
+
+export enum ExecuteCommand {
+  InjectionMeasurement = 'injectMeasurementFilter',
+  InjectField = 'injectFieldFilter',
+  InjectTag = 'injectTagFilter',
+  InjectTagValue = 'injectTagValueFilter',
 }

src/shared/components/FluxMonacoEditor.tsx

@@ -15,8 +15,8 @@ import {
   submit,
 } from 'src/languageSupport/languages/flux/monaco.flux.hotkeys'
 import {registerAutogrow} from 'src/languageSupport/monaco.autogrow'
-import Prelude from 'src/languageSupport/languages/flux/lsp/prelude'
 import {EditorContext} from 'src/shared/contexts/editor'
+import ConnectionManager from 'src/languageSupport/languages/flux/lsp/connection'
 
 // Types
 import {OnChangeScript} from 'src/types/flux'
@@ -36,7 +36,10 @@ export interface EditorProps {
 }
 
 interface Props extends EditorProps {
-  setEditorInstance?: (editor: EditorType) => void
+  setEditorInstance?: (
+    editor: EditorType,
+    connection: React.MutableRefObject<ConnectionManager>
+  ) => void
   variables: Variable[]
 }
 
@@ -51,23 +54,23 @@ const FluxEditorMonaco: FC<Props> = ({
   wrapLines,
   variables,
 }) => {
-  const prelude = useRef<Prelude>(null)
+  const connection = useRef<ConnectionManager>(null)
   const {setEditor} = useContext(EditorContext)
 
   const wrapperClassName = classnames('flux-editor--monaco', {
     'flux-editor--monaco__autogrow': autogrow,
   })
 
   useEffect(() => {
-    prelude.current.updatePreludeModel(variables)
+    connection.current.updatePreludeModel(variables)
   }, [variables])
 
   const editorDidMount = (editor: EditorType) => {
-    prelude.current = setupForReactMonacoEditor(editor)
-    prelude.current.updatePreludeModel(variables)
-    setEditor(editor)
+    connection.current = setupForReactMonacoEditor(editor)
+    connection.current.updatePreludeModel(variables)
+    setEditor(editor, connection)
     if (setEditorInstance) {
-      setEditorInstance(editor)
+      setEditorInstance(editor, connection)
     }
 
     comments(editor)

src/shared/contexts/editor/index.tsx

@@ -15,16 +15,30 @@ import {
 } from 'src/shared/utils/fluxFunctions'
 import {getFluxExample} from 'src/shared/utils/fluxExample'
 
+// LSP
+import {
+  ExecuteCommand,
+  ExecuteCommandArgument,
+} from 'src/languageSupport/languages/flux/lsp/utils'
+import LspConnectionManager from 'src/languageSupport/languages/flux/lsp/connection'
+
 // Utils
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {CLOUD} from 'src/shared/constants'
 
 export interface EditorContextType {
   editor: EditorType | null
-  setEditor: (editor: EditorType) => void
+  setEditor: (
+    editor: EditorType,
+    conn: React.MutableRefObject<LspConnectionManager>
+  ) => void
   inject: (options: InjectionOptions) => void
   injectFunction: (fn, cbToParent) => void
   injectVariable: (variableName, cbToParent) => void
+  injectViaLsp: (
+    cmd: ExecuteCommand,
+    data: Omit<ExecuteCommandArgument, 'textDocument'>
+  ) => void
 }
 
 const DEFAULT_CONTEXT: EditorContextType = {
@@ -33,12 +47,28 @@ const DEFAULT_CONTEXT: EditorContextType = {
   inject: _ => {},
   injectFunction: (_, __) => {},
   injectVariable: (_, __) => {},
+  injectViaLsp: (_, __) => {},
 }
 
 export const EditorContext = createContext<EditorContextType>(DEFAULT_CONTEXT)
 
 export const EditorProvider: FC = ({children}) => {
-  const [editor, setEditor] = useState<EditorType>(null)
+  const [editor, setEditorOnState] = useState<EditorType>(null)
+  const [connection, setConnection] = useState<
+    React.MutableRefObject<LspConnectionManager>
+  >(null)
+
+  const setEditor = (ed, conn) => {
+    setEditorOnState(ed)
+    setConnection(conn)
+  }
+
+  const injectViaLsp = useCallback(
+    (cmd, data: Omit<ExecuteCommandArgument, 'textDocument'>) => {
+      connection.current.inject(cmd, data)
+    },
+    [editor, connection]
+  )
 
   const inject = useCallback(
     (options: InjectionOptions) => {
@@ -164,6 +194,7 @@ export const EditorProvider: FC = ({children}) => {
         inject,
         injectFunction,
         injectVariable,
+        injectViaLsp,
       }}
     >
       {children}