feat: Add flux function signatures to ui

- Pulls signatures from LSP

ui/cypress/e2e/explorer.test.ts

@@ -417,6 +417,16 @@ describe('DataExplorer', () => {
       })
     })
 
+    it('shows flux signatures', () => {
+      cy.getByTestID('time-machine--bottom').then(() => {
+        cy.getByTestID('flux-editor').within(() => {
+          cy.get('textarea').type('from(', {force: true})
+
+          cy.get('.signature').should('be.visible')
+        })
+      })
+    })
+
     it('enables the submit button when a query is typed', () => {
       cy.getByTestID('time-machine-submit-button').should('be.disabled')
 

ui/package.json

@@ -131,7 +131,7 @@
   "dependencies": {
     "@influxdata/clockface": "2.0.2",
     "@influxdata/flux": "^0.4.0",
-    "@influxdata/flux-lsp-browser": "^0.4.0",
+    "@influxdata/flux-lsp-browser": "^0.4.1",
     "@influxdata/flux-parser": "^0.3.0",
     "@influxdata/giraffe": "0.17.6",
     "@influxdata/influx": "0.5.5",

ui/src/external/monaco.flux.completions.ts

@@ -8,36 +8,47 @@ import {
 import {CompletionTriggerKind} from 'monaco-languageclient/lib/services'
 // Types
 import {MonacoType} from 'src/types'
-import {IDisposable} from 'monaco-editor'
 
 const m2p = new MonacoToProtocolConverter(),
   p2m = new ProtocolToMonacoConverter()
 
-export function registerCompletion(
-  monaco: MonacoType,
-  server: LSPServer
-): IDisposable {
-  const completionProvider = monaco.languages.registerCompletionItemProvider(
-    FLUXLANGID,
-    {
-      provideCompletionItems: async (model, position, context) => {
-        const wordUntil = model.getWordUntilPosition(position)
-        const defaultRange = new monaco.Range(
-          position.lineNumber,
-          wordUntil.startColumn,
-          position.lineNumber,
-          wordUntil.endColumn
+export function registerCompletion(monaco: MonacoType, server: LSPServer) {
+  monaco.languages.registerSignatureHelpProvider(FLUXLANGID, {
+    provideSignatureHelp: async (model, position, _token, context) => {
+      const pos = m2p.asPosition(position.lineNumber, position.column)
+      try {
+        const help = await server.signatureHelp(
+          model.uri.toString(),
+          pos,
+          context
         )
-        const pos = m2p.asPosition(position.lineNumber, position.column)
-        const items = await server.completionItems(model.uri.toString(), pos, {
-          ...context,
-          triggerKind: CompletionTriggerKind.TriggerCharacter,
-        })
-        return p2m.asCompletionResult(items, defaultRange)
-      },
-      triggerCharacters: ['.', ':', '('],
-    }
-  )
 
-  return completionProvider
+        return p2m.asSignatureHelpResult(help)
+      } catch (e) {
+        console.error(e)
+      }
+
+      return null
+    },
+    signatureHelpTriggerCharacters: ['(', ','],
+  })
+
+  monaco.languages.registerCompletionItemProvider(FLUXLANGID, {
+    provideCompletionItems: async (model, position, context) => {
+      const wordUntil = model.getWordUntilPosition(position)
+      const defaultRange = new monaco.Range(
+        position.lineNumber,
+        wordUntil.startColumn,
+        position.lineNumber,
+        wordUntil.endColumn
+      )
+      const pos = m2p.asPosition(position.lineNumber, position.column)
+      const items = await server.completionItems(model.uri.toString(), pos, {
+        ...context,
+        triggerKind: CompletionTriggerKind.TriggerCharacter,
+      })
+      return p2m.asCompletionResult(items, defaultRange)
+    },
+    triggerCharacters: ['.', ':'],
+  })
 }

ui/src/external/monaco.flux.messages.ts

@@ -1,5 +1,9 @@
 import {ServerResponse} from 'src/types'
-import {CompletionContext, Position} from 'monaco-languageclient/lib/services'
+import {
+  CompletionContext,
+  Position,
+  SignatureHelpContext,
+} from 'monaco-languageclient/lib/services'
 
 interface Message {
   jsonrpc: string
@@ -87,6 +91,22 @@ export const completion = (
   })
 }
 
+export const signatureHelp = (
+  id: number,
+  uri: string,
+  position: Position,
+  context: SignatureHelpContext
+) => {
+  return createRequest(id, 'textDocument/signatureHelp', {
+    textDocument: {uri},
+    position,
+    context: {
+      isRetrigger: false,
+      ...context,
+    },
+  })
+}
+
 export const parseResponse = (response: ServerResponse): LSPResponse => {
   const message = response.get_message()
   const error = response.get_error()

ui/src/external/monaco.flux.server.ts

@@ -8,6 +8,7 @@ import {
   didOpen,
   didChange,
   NotificationMessage,
+  signatureHelp,
 } from 'src/external/monaco.flux.messages'
 import {registerCompletion} from './monaco.flux.completions'
 import {AppState, LocalStorage} from 'src/types'
@@ -20,6 +21,7 @@ import {Store} from 'redux'
 import {
   CompletionItem,
   CompletionContext,
+  SignatureHelp,
   Position,
   Diagnostic,
 } from 'monaco-languageclient/lib/services'
@@ -58,6 +60,16 @@ export class LSPServer {
     return this.send(initialize(this.currentMessageID))
   }
 
+  async signatureHelp(uri, position, context): Promise<SignatureHelp> {
+    await this.sendPrelude(uri)
+
+    const response = (await this.send(
+      signatureHelp(this.currentMessageID, uri, position, context)
+    )) as {result: SignatureHelp}
+
+    return response.result
+  }
+
   async completionItems(
     uri: string,
     position: Position,

ui/yarn.lock

@@ -1023,10 +1023,10 @@
   resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-2.0.2.tgz#7dff9d99b984717bd540920fda15584e07a198d2"
   integrity sha512-t5XmAEpjP9u5S+LeZ34k+Zm3iklpmWS5MfmSlUQ0lhfxxmpK7PHXsRYHvvXsw65h5tvj6Qdeks5ISwBxghxeWA==
 
-"@influxdata/flux-lsp-browser@^0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@influxdata/flux-lsp-browser/-/flux-lsp-browser-0.4.0.tgz#84fde999bbd49948b2f7a86153cafaec22edfaa4"
-  integrity sha512-fKHBkLDbw4MLERuY5r7tSIeJUS7qafsWIQYmTrc4xDTDuW0gTiaspG8jyx/p/BtSB0GwaWCtZb2O9gkGMhfMzQ==
+"@influxdata/flux-lsp-browser@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@influxdata/flux-lsp-browser/-/flux-lsp-browser-0.4.1.tgz#607bf7a238d7dadf9963d2d74fedce8569b4a300"
+  integrity sha512-8bxXC/VjE0vHglLZZFNBzdOYZmKmWzHYfUDIlEA7mgDmJdyrQ5bqJLusmFXfpagcXydY5t7Je7FqDuUUoak0tQ==
 
 "@influxdata/flux-parser@^0.3.0":
   version "0.3.0"