Merge pull request #69 from RedisInsight/feature/RI-1874_Display_parameter_hints_Workbench

#RI-1874, #RI-2096

Author: egor-zalenski

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

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"
     }
   }

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,

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,
     ]
   },
 ]

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) {

redisinsight/ui/src/constants/commands.ts

@@ -3,6 +3,7 @@ export interface ICommands {
 }
 
 export interface ICommand {
+  name?: string;
   summary: string;
   complexity?: string;
   arguments?: ICommandArg[];

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']
     }
   }
 }

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 {

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 {

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'