* #RI-1874 - [Workbench] Display additional hints in autocomplete

egor-zalenski · egor-zalenski · commit a63ebf54f6b0 · 2021-12-01T14:00:37.000+03:00
* #RI-2096 - Wrong shortcut for "Clear the screen"
diff --git a/redisinsight/api/config/default.ts b/redisinsight/api/config/default.ts
@@ -80,7 +80,7 @@ export default {
     redijsonUrl: process.env.COMMANDS_REDIJSON_URL
       || 'https://raw.githubusercontent.com/RedisJSON/RedisJSON/master/commands.json',
     redistimeseriesUrl: process.env.COMMANDS_REDISTIMESERIES_URL
-      || 'https://raw.githubusercontent.com/RedisTimeSeries/RedisTimeSeries/master/src/commands.json',
+      || 'https://raw.githubusercontent.com/RedisTimeSeries/RedisTimeSeries/master/commands.json',
     redisaiUrl: process.env.COMMANDS_REDISAI_URL
       || 'https://raw.githubusercontent.com/RedisAI/RedisAI/master/commands.json',
     redisgraphUrl: process.env.COMMANDS_REDISGRAPH_URL
diff --git a/redisinsight/api/src/constants/agreements-spec.json b/redisinsight/api/src/constants/agreements-spec.json
@@ -49,7 +49,7 @@
       "disabled": false,
       "since": "1.0.4",
       "title": "Server Side Public License",
-      "label": "I have read and understood the <a target=\"_blank\" href=\"https://github.com/RedisInsight/RedisInsight/blob/master/LICENSE\">Server Side Public License</a>",
+      "label": "I have read and understood the <a target=\"_blank\" href=\"https://github.com/RedisInsight/RedisInsight/blob/main/LICENSE\">Server Side Public License</a>",
       "requiredText": "Accept the Server Side Public License"
     }
   }
diff --git a/redisinsight/ui/src/components/query/Query/Query.tsx b/redisinsight/ui/src/components/query/Query/Query.tsx
@@ -4,7 +4,7 @@ import { compact, findIndex } from 'lodash'
 import cx from 'classnames'
 import { EuiButtonIcon, EuiText, EuiToolTip } from '@elastic/eui'
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'
-import MonacoEditor from 'react-monaco-editor'
+import MonacoEditor, { monaco } from 'react-monaco-editor'
 
 import {
   Theme,
@@ -13,10 +13,12 @@ import {
   KEYBOARD_SHORTCUTS,
 } from 'uiSrc/constants'
 import {
+  actionTriggerParameterHints,
   decoration,
-  geMonacoAction,
+  getMonacoAction,
   getRedisCompletionProvider,
   getRedisMonarchTokensProvider,
+  getRedisSignatureHelpProvider,
   MonacoAction,
   Nullable,
   toModelDeltaDecoration
@@ -53,19 +55,21 @@ const Query = (props: Props) => {
   const { theme } = useContext(ThemeContext)
   const monacoObjects = useRef<Nullable<IEditorMount>>(null)
   let disposeCompletionItemProvider = () => {}
+  let disposeSignatureHelpProvider = () => {}
 
   useEffect(() =>
   // componentWillUnmount
     () => {
       disposeCompletionItemProvider()
+      disposeSignatureHelpProvider()
     },
   [])
 
   useEffect(() => {
     if (!monacoObjects.current) return
     const commands = query.split('\n')
     const { monaco, editor } = monacoObjects.current
-    const notCommandRegEx = /^[\s|//]/
+    const notCommandRegEx = /^\s|\/\//
 
     const newDecorations = compact(commands.map((command, index) => {
       if (!command || notCommandRegEx.test(command)) return null
@@ -94,6 +98,32 @@ const Query = (props: Props) => {
     onSubmit(value)
   }
 
+  const onTriggerParameterHints = () => {
+    if (!monacoObjects.current) return
+
+    const { editor } = monacoObjects?.current
+    const model = editor.getModel()
+    const { lineNumber = 0 } = editor.getPosition() ?? {}
+    const lineContent = model?.getLineContent(lineNumber)?.trim() ?? ''
+    const matchedCommand = REDIS_COMMANDS_ARRAY.find((command) => lineContent?.trim().startsWith(command)) ?? ''
+    // trigger parameter hints only ones between command and arguments in the same line
+    const isTriggerHints = lineContent.split(' ').length < (2 + matchedCommand.split(' ').length)
+
+    if (isTriggerHints) {
+      actionTriggerParameterHints(editor)
+    }
+  }
+
+  const onKeyDownMonaco = (e:monacoEditor.IKeyboardEvent) => {
+    if (
+      e.keyCode === monaco.KeyCode.Tab
+      || e.keyCode === monaco.KeyCode.Space
+      || e.keyCode === monaco.KeyCode.Enter
+    ) {
+      onTriggerParameterHints()
+    }
+  }
+
   const editorDidMount = (
     editor: monacoEditor.editor.IStandaloneCodeEditor,
     monaco: typeof monacoEditor
@@ -103,8 +133,12 @@ const Query = (props: Props) => {
     editor.focus()
     setQueryEl(editor)
 
+    editor.onKeyDown(onKeyDownMonaco)
+
     setupMonacoRedisLang(monaco)
-    editor.addAction(geMonacoAction(MonacoAction.Submit, (editor) => handleSubmit(editor.getValue()), monaco))
+    editor.addAction(
+      getMonacoAction(MonacoAction.Submit, (editor) => handleSubmit(editor.getValue()), monaco)
+    )
   }
 
   const setupMonacoRedisLang = (monaco: typeof monacoEditor) => {
@@ -117,6 +151,12 @@ const Query = (props: Props) => {
       MonacoLanguage.Redis,
       getRedisCompletionProvider(REDIS_COMMANDS_SPEC)
     ).dispose
+
+    disposeSignatureHelpProvider = monaco.languages.registerSignatureHelpProvider(
+      MonacoLanguage.Redis,
+      getRedisSignatureHelpProvider(REDIS_COMMANDS_SPEC, REDIS_COMMANDS_ARRAY)
+    ).dispose
+
     monaco.languages.setLanguageConfiguration(MonacoLanguage.Redis, redisLanguageConfig)
     monaco.languages.setMonarchTokensProvider(
       MonacoLanguage.Redis,
@@ -131,6 +171,11 @@ const Query = (props: Props) => {
     automaticLayout: true,
     formatOnPaste: false,
     glyphMargin: true,
+    suggest: {
+      preview: true,
+      showStatusBar: true,
+      showIcons: false,
+    },
     lineNumbersMinChars: 4
     // fontFamily: 'Inconsolata',
     // fontSize: 16,
diff --git a/redisinsight/ui/src/components/shortcuts-flyout/schema.tsx b/redisinsight/ui/src/components/shortcuts-flyout/schema.tsx
@@ -36,7 +36,8 @@ export const SHORTCUTS: ShortcutGroup[] = [
     items: [
       KEYBOARD_SHORTCUTS.workbench.runQuery,
       KEYBOARD_SHORTCUTS.workbench.nextLine,
-      KEYBOARD_SHORTCUTS.workbench.listOfCommands
+      KEYBOARD_SHORTCUTS.workbench.listOfCommands,
+      KEYBOARD_SHORTCUTS.workbench.triggerHints,
     ]
   },
 ]
diff --git a/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss b/redisinsight/ui/src/components/shortcuts-flyout/styles.module.scss
@@ -24,11 +24,6 @@
 
     :global(.badgeArrowUp), :global(.badgeArrowDown), :global(.shiftSymbol) {
       position: relative;
-      top: -3px
-    }
-
-    :global(.shiftSymbol) {
-      top: -2px
     }
 
     :global(.cmdSymbol) {
diff --git a/redisinsight/ui/src/constants/commands.ts b/redisinsight/ui/src/constants/commands.ts
@@ -3,6 +3,7 @@ export interface ICommands {
 }
 
 export interface ICommand {
+  name?: string;
   summary: string;
   complexity?: string;
   arguments?: ICommandArg[];
diff --git a/redisinsight/ui/src/constants/keyboardShortcuts.tsx b/redisinsight/ui/src/constants/keyboardShortcuts.tsx
@@ -49,6 +49,10 @@ const COMMON_SHORTCUTS = {
     listOfCommands: {
       description: 'Display the list of commands and information about commands and their arguments in the suggestion list',
       keys: ['Ctrl', 'Space']
+    },
+    triggerHints: {
+      description: 'Trigger Command Hints',
+      keys: ['Ctrl', 'Shift', 'Space']
     }
   }
 }
@@ -76,7 +80,7 @@ const MAC_SHORTCUTS = {
     },
     clearSearch: {
       description: 'Clear the screen',
-      keys: [(<span className="cmdSymbol">⌘</span>), 'L']
+      keys: [(<span className="cmdSymbol">⌘</span>), 'K']
     },
     prevCommand: {
       description: 'Return to the previous command',
@@ -100,6 +104,10 @@ const MAC_SHORTCUTS = {
     listOfCommands: {
       description: 'Display the list of commands and information about commands and their arguments in the suggestion list',
       keys: [(<span className="cmdSymbol">⌘</span>), 'Space']
+    },
+    triggerHints: {
+      description: 'Trigger Command Hints',
+      keys: [(<span className="cmdSymbol">⌘</span>), (<span className="shiftSymbol">⇧</span>), 'Space']
     }
   }
 }
diff --git a/redisinsight/ui/src/styles/base/_monaco.scss b/redisinsight/ui/src/styles/base/_monaco.scss
@@ -15,10 +15,15 @@
     margin: 16px 0;
     font-size: 1.6em;
   }
-}
 
-.monaco-editor.redisLanguage-editor .suggest-icon {
-  display: none !important;
+  a {
+    color: var(--euiTextSubduedColor) !important;
+    text-decoration: underline !important;
+
+    &:hover {
+      text-decoration: none !important;
+    }
+  }
 }
 
 .monaco-glyph-run-command {
diff --git a/redisinsight/ui/src/styles/components/_buttons.scss b/redisinsight/ui/src/styles/components/_buttons.scss
@@ -1,4 +1,4 @@
-@import '@elastic/eui/src/global_styling/index';
+@import '../../../../../node_modules/@elastic/eui/src/global_styling/index';
 
 .euiButton {
   &.euiButton--secondary {
diff --git a/redisinsight/ui/src/utils/index.ts b/redisinsight/ui/src/utils/index.ts
@@ -22,11 +22,13 @@ export * from './longNames'
 export * from './cli'
 export * from './commands'
 export * from './workbench'
-export * from './monaco'
 export * from './formatBytes'
 export * from './instanceModules'
+export * from './monacoUtils'
+export * from './monacoInterfaces'
 export * from './monacoRedisComplitionProvider'
 export * from './monacoRedisMonarchTokensProvider'
+export * from './monacoRedisSignatureHelpProvider'
 export * from './monacoActions'
 export * from './monacoDecorations'
 export * from './handlePlatforms'
diff --git a/redisinsight/ui/src/utils/monacoActions.ts b/redisinsight/ui/src/utils/monacoActions.ts
@@ -4,7 +4,7 @@ export enum MonacoAction {
   Submit = 'submit'
 }
 
-export const geMonacoAction = (
+export const getMonacoAction = (
   actionId: MonacoAction,
   action: (editor: monacoEditor.editor.IStandaloneCodeEditor, ...args: any[]) => void | Promise<void>,
   monaco: typeof monacoEditor,
@@ -20,3 +20,6 @@ export const geMonacoAction = (
 
   return { id: '', label: '', run: () => {} }
 }
+
+export const actionTriggerParameterHints = (editor:monacoEditor.editor.IStandaloneCodeEditor) =>
+  editor.trigger('', 'editor.action.triggerParameterHints', '')
diff --git a/redisinsight/ui/src/utils/monacoInterfaces.ts b/redisinsight/ui/src/utils/monacoInterfaces.ts
@@ -0,0 +1,8 @@
+import * as monacoEditor from 'monaco-editor'
+import { ICommand } from 'uiSrc/constants'
+
+export interface IMonacoCommand {
+  name: string
+  info?: ICommand
+  position?: monacoEditor.Position
+}
diff --git a/redisinsight/ui/src/utils/monacoRedisComplitionProvider.ts b/redisinsight/ui/src/utils/monacoRedisComplitionProvider.ts
@@ -1,13 +1,15 @@
 import * as monacoEditor from 'monaco-editor'
 import { ICommand, ICommandArgGenerated, ICommands } from 'uiSrc/constants'
-import { generateArgs, generateArgsNames } from 'uiSrc/utils/commands'
+import { generateArgs, generateArgsNames, getDocUrlForCommand } from 'uiSrc/utils/commands'
 
 type DependencyProposals = {
   [key: string]: monacoEditor.languages.CompletionItem
 }
 
-const getCommandMarkdown = (command: ICommand): string => {
-  const lines: string[] = [command?.summary]
+const getCommandMarkdown = (commandName = '', command: ICommand): string => {
+  const docUrl = getDocUrlForCommand(commandName, command?.group)
+  const linkMore = ` [Read more](${docUrl})`
+  const lines: string[] = [command?.summary + linkMore]
   if (command?.arguments?.length) {
     // TODO: use i18n file for texts
     lines.push('### Arguments:')
@@ -41,7 +43,7 @@ const createDependencyProposals = (commandsSpec: ICommands): DependencyProposals
       detail,
       insertText,
       documentation: {
-        value: getCommandMarkdown(commandsSpec[command]),
+        value: getCommandMarkdown(command, commandsSpec[command]),
       },
       insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet,
       range
diff --git a/redisinsight/ui/src/utils/monacoRedisSignatureHelpProvider.ts b/redisinsight/ui/src/utils/monacoRedisSignatureHelpProvider.ts
@@ -0,0 +1,38 @@
+import * as monacoEditor from 'monaco-editor'
+import { isNull } from 'lodash'
+import { ICommands } from 'uiSrc/constants'
+import { generateArgsNames } from 'uiSrc/utils/commands'
+import { findCommandEarlier } from './monacoUtils'
+
+export const getRedisSignatureHelpProvider = (commandsSpec: ICommands, commandsArray: string[]):
+monacoEditor.languages.SignatureHelpProvider =>
+// generate signature help provider
+  ({
+    // signatureHelpTriggerCharacters: [' '],
+    // signatureHelpRetriggerCharacters: [' '],
+    provideSignatureHelp: (
+      model:monacoEditor.editor.IModel,
+      position:monacoEditor.Position,
+    ) => {
+      const command = findCommandEarlier(model, position, commandsSpec, commandsArray)
+
+      if (isNull(command)) {
+        return null
+      }
+
+      const commandArgs = command.info?.arguments ?? []
+      const label: string = `${command?.name} ${generateArgsNames(commandArgs).join(' ')}`
+
+      return {
+        dispose: () => {},
+        value: {
+          activeParameter: 0,
+          activeSignature: 0,
+          signatures: [{
+            label,
+            parameters: [{ label: `${command?.name}` }]
+          }]
+        }
+      }
+    }
+  })
diff --git a/redisinsight/ui/src/utils/monacoUtils.ts b/redisinsight/ui/src/utils/monacoUtils.ts
@@ -1,4 +1,8 @@
-import { isEmpty, reject } from 'lodash'
+import * as monacoEditor from 'monaco-editor'
+import { isEmpty, isUndefined, reject } from 'lodash'
+import { ICommands } from 'uiSrc/constants'
+import { IMonacoCommand } from './monacoInterfaces'
+import { Nullable } from './types'
 
 const COMMENT_SYMBOLS = '//'
 const BLANK_LINE_REGEX = /^\s*\n/gm
@@ -32,3 +36,38 @@ export const multilineCommandToOneLine = (text: string = '') => text
   .split(/(\r\n|\n|\r)+\s+/gm)
   .filter((line: string) => !(BLANK_LINE_REGEX.test(line) || isEmpty(line)))
   .join(' ')
+
+export const findCommandEarlier = (
+  model: monacoEditor.editor.ITextModel,
+  position: monacoEditor.Position,
+  commandsSpec: ICommands = {},
+  commandsArray: string[] = []
+): Nullable<IMonacoCommand> => {
+  const { lineNumber } = position
+  let commandName = ''
+  const notCommandRegEx = /^\s|\/\//
+
+  // find command in the previous lines if current line is argument
+  // eslint-disable-next-line for-direction
+  for (let previousLineNumber = lineNumber; previousLineNumber > 0; previousLineNumber--) {
+    commandName = model.getLineContent(previousLineNumber)?.toUpperCase() ?? ''
+
+    if (!notCommandRegEx.test(commandName)) {
+      break
+    }
+  }
+
+  const matchedCommand = commandsArray.find((command) => commandName?.trim().startsWith(command))
+
+  if (isUndefined(matchedCommand)) {
+    return null
+  }
+
+  const command:IMonacoCommand = {
+    position,
+    name: matchedCommand,
+    info: commandsSpec[matchedCommand]
+  }
+
+  return command
+}
diff --git a/redisinsight/ui/src/utils/tests/monacoUtils.spec.ts b/redisinsight/ui/src/utils/tests/monacoUtils.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,7 @@`
`49`	`49`	`"disabled": false,`
`50`	`50`	`"since": "1.0.4",`
`51`	`51`	`"title": "Server Side Public License",`
`52`		`- "label": "I have read and understood the <a target=\"_blank\" href=\"https://github.com/RedisInsight/RedisInsight/blob/master/LICENSE\">Server Side Public License</a>",`
	`52`	`+ "label": "I have read and understood the <a target=\"_blank\" href=\"https://github.com/RedisInsight/RedisInsight/blob/main/LICENSE\">Server Side Public License</a>",`
`53`	`53`	`"requiredText": "Accept the Server Side Public License"`
`54`	`54`	`}`
`55`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,8 @@ export const SHORTCUTS: ShortcutGroup[] = [`
`36`	`36`	`items: [`
`37`	`37`	`KEYBOARD_SHORTCUTS.workbench.runQuery,`
`38`	`38`	`KEYBOARD_SHORTCUTS.workbench.nextLine,`
`39`		`- KEYBOARD_SHORTCUTS.workbench.listOfCommands`
	`39`	`+ KEYBOARD_SHORTCUTS.workbench.listOfCommands,`
	`40`	`+ KEYBOARD_SHORTCUTS.workbench.triggerHints,`
`40`	`41`	`]`
`41`	`42`	`},`
`42`	`43`	`]`
Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@ export interface ICommands {`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`export interface ICommand {`
	`6`	`+ name?: string;`
`6`	`7`	`summary: string;`
`7`	`8`	`complexity?: string;`
`8`	`9`	`arguments?: ICommandArg[];`
Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,10 @@ const COMMON_SHORTCUTS = {`
`49`	`49`	`listOfCommands: {`
`50`	`50`	`description: 'Display the list of commands and information about commands and their arguments in the suggestion list',`
`51`	`51`	`keys: ['Ctrl', 'Space']`
	`52`	`+ },`
	`53`	`+ triggerHints: {`
	`54`	`+ description: 'Trigger Command Hints',`
	`55`	`+ keys: ['Ctrl', 'Shift', 'Space']`
`52`	`56`	`}`
`53`	`57`	`}`
`54`	`58`	`}`
`@@ -76,7 +80,7 @@ const MAC_SHORTCUTS = {`
`76`	`80`	`},`
`77`	`81`	`clearSearch: {`
`78`	`82`	`description: 'Clear the screen',`
`79`		`- keys: [(<span className="cmdSymbol">⌘</span>), 'L']`
	`83`	`+ keys: [(<span className="cmdSymbol">⌘</span>), 'K']`
`80`	`84`	`},`
`81`	`85`	`prevCommand: {`
`82`	`86`	`description: 'Return to the previous command',`
`@@ -100,6 +104,10 @@ const MAC_SHORTCUTS = {`
`100`	`104`	`listOfCommands: {`
`101`	`105`	`description: 'Display the list of commands and information about commands and their arguments in the suggestion list',`
`102`	`106`	`keys: [(<span className="cmdSymbol">⌘</span>), 'Space']`
	`107`	`+ },`
	`108`	`+ triggerHints: {`
	`109`	`+ description: 'Trigger Command Hints',`
	`110`	`+ keys: [(<span className="cmdSymbol">⌘</span>), (<span className="shiftSymbol">⇧</span>), 'Space']`
`103`	`111`	`}`
`104`	`112`	`}`
`105`	`113`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '@elastic/eui/src/global_styling/index';`
	`1`	`+@import '../../../../../node_modules/@elastic/eui/src/global_styling/index';`
`2`	`2`
`3`	`3`	`.euiButton {`
`4`	`4`	`&.euiButton--secondary {`