Merge remote-tracking branch 'origin/redisgraph-plugin' into redisgraph-plugin

Author: GnaneshKunal

redisinsight/ui/src/components/query-card/QueryCardCliPlugin/QueryCardCliPlugin.tsx

@@ -66,10 +66,10 @@ const QueryCardCliPlugin = (props: Props) => {
     pluginIframeRef?.current?.contentWindow?.dispatchEvent(event)
   }
 
-  const executeCommand = () => {
+  const executeCommand = (method: string) => {
     sendMessageToPlugin({
       event: 'executeCommand',
-      method: currentView.activationMethod,
+      method,
       data: { command: query, data: result }
     })
   }
@@ -167,7 +167,7 @@ const QueryCardCliPlugin = (props: Props) => {
     pluginApi.onEvent(generatedIframeNameRef.current, PluginEvents.loaded, () => {
       setIsPluginLoaded(true)
       setError('')
-      executeCommand()
+      executeCommand(currentView.activationMethod)
     })
 
     pluginApi.onEvent(generatedIframeNameRef.current, PluginEvents.error, (error: string) => {
@@ -226,7 +226,7 @@ const QueryCardCliPlugin = (props: Props) => {
         setCurrentPlugin(plugin?.name || null)
         return
       }
-      executeCommand()
+      executeCommand(view.activationMethod)
     }
   }, [result, id])
 

redisinsight/ui/src/components/query/Query/Query.tsx

@@ -27,30 +27,33 @@ import { KeyboardShortcut } from 'uiSrc/components'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
 import { IEditorMount, ISnippetController } from 'uiSrc/pages/workbench/interfaces'
+import { CommandExecutionUI } from 'uiSrc/slices/interfaces'
 
+import { workbenchResultsSelector } from 'uiSrc/slices/workbench/wb-results'
 import styles from './styles.module.scss'
 
 export interface Props {
-  query: string;
-  loading: boolean;
-  setQueryEl: Function;
-  setQuery: (script: string) => void;
-  onSubmit: (query?: string) => void;
-  onKeyDown?: (e: React.KeyboardEvent, script: string) => void;
+  query: string
+  loading: boolean
+  setQueryEl: Function
+  setQuery: (script: string) => void
+  onSubmit: (query?: string) => void
+  onKeyDown?: (e: React.KeyboardEvent, script: string) => void
 }
 
 let decorations: string[] = []
+let execHistoryPos: number = 0
+let execHistory: CommandExecutionUI[] = []
 
 const Query = (props: Props) => {
   const { query = '', setQuery, onKeyDown, onSubmit, setQueryEl } = props
   let contribution: Nullable<ISnippetController> = null
 
-  const {
-    commandsArray: REDIS_COMMANDS_ARRAY,
-    spec: REDIS_COMMANDS_SPEC
-  } = useSelector(appRedisCommandsSelector)
+  const { commandsArray: REDIS_COMMANDS_ARRAY, spec: REDIS_COMMANDS_SPEC } = useSelector(appRedisCommandsSelector)
+  const { items: execHistoryItems } = useSelector(workbenchResultsSelector)
   const { theme } = useContext(ThemeContext)
   const monacoObjects = useRef<Nullable<IEditorMount>>(null)
+
   let disposeCompletionItemProvider = () => {}
   let disposeSignatureHelpProvider = () => {}
 
@@ -63,6 +66,12 @@ const Query = (props: Props) => {
     },
   [])
 
+  useEffect(() => {
+    // HACK: The Monaco editor memoize the state and ignores updates to it
+    execHistory = execHistoryItems
+    execHistoryPos = 0
+  }, [execHistoryItems])
+
   useEffect(() => {
     if (!monacoObjects.current) return
     const commands = query.split('\n')
@@ -93,6 +102,7 @@ const Query = (props: Props) => {
   }
 
   const handleSubmit = (value?: string) => {
+    execHistoryPos = 0
     onSubmit(value)
   }
 
@@ -112,6 +122,20 @@ const Query = (props: Props) => {
     }
   }
 
+  const onQuickHistoryAccess = () => {
+    if (!monacoObjects.current) return
+    const { editor } = monacoObjects?.current
+
+    const position = editor.getPosition()
+    if (position?.lineNumber !== 1) return
+
+    if (execHistory[execHistoryPos]) {
+      const command = execHistory[execHistoryPos].command || ''
+      editor.setValue(command)
+      execHistoryPos++
+    }
+  }
+
   const onKeyDownMonaco = (e: monacoEditor.IKeyboardEvent) => {
     // trigger parameter hints
     if (
@@ -123,6 +147,12 @@ const Query = (props: Props) => {
       onTriggerParameterHints()
     }
 
+    if (
+      e.keyCode === monaco.KeyCode.UpArrow
+    ) {
+      onQuickHistoryAccess()
+    }
+
     if (e.keyCode === monaco.KeyCode.Enter || e.keyCode === monaco.KeyCode.Space) {
       onExitSnippetMode()
     }

redisinsight/ui/src/components/query/QueryWrapper.tsx

@@ -11,12 +11,12 @@ import Query from './Query'
 import styles from './Query/styles.module.scss'
 
 export interface Props {
-  query: string;
-  loading: boolean;
-  setQuery: (script: string) => void;
-  setQueryEl: Function;
-  onKeyDown?: (e: React.KeyboardEvent, script: string) => void;
-  onSubmit: (value?: string) => void;
+  query: string
+  loading: boolean
+  setQuery: (script: string) => void
+  setQueryEl: Function
+  onKeyDown?: (e: React.KeyboardEvent, script: string) => void
+  onSubmit: (value?: string) => void
 }
 const QueryWrapper = (props: Props) => {
   const { query = '', loading, setQuery, setQueryEl, onKeyDown, onSubmit } = props

redisinsight/ui/src/components/shortcuts-flyout/schema.tsx

@@ -41,6 +41,7 @@ export const SHORTCUTS: ShortcutGroup[] = [
       KEYBOARD_SHORTCUTS.workbench.nextLine,
       KEYBOARD_SHORTCUTS.workbench.listOfCommands,
       KEYBOARD_SHORTCUTS.workbench.triggerHints,
+      KEYBOARD_SHORTCUTS.workbench.quickHistoryAccess,
     ]
   },
 ]

redisinsight/ui/src/constants/keyboardShortcuts.tsx

@@ -53,6 +53,10 @@ const COMMON_SHORTCUTS = {
     triggerHints: {
       description: 'Trigger Command Hints',
       keys: ['Ctrl', 'Shift', 'Space']
+    },
+    quickHistoryAccess: {
+      description: 'Quick-access to command history',
+      keys: ['Up Arrow']
     }
   }
 }
@@ -108,6 +112,10 @@ const MAC_SHORTCUTS = {
     triggerHints: {
       description: 'Trigger Command Hints',
       keys: [(<span className="cmdSymbol">⌘</span>), (<span className="shiftSymbol">⇧</span>), 'Space']
+    },
+    quickHistoryAccess: {
+      description: 'Quick-access to command history',
+      keys: ['Up Arrow']
     }
   }
 }

scripts/build-statics.cmd

@@ -20,3 +20,12 @@ if not exist "%PLUGINS_DIR%\redisearch" mkdir "%PLUGINS_DIR%\redisearch"
 if not exist "%PLUGINS_DIR%\redisearch\dist" mkdir "%PLUGINS_DIR%\redisearch\dist"
 xcopy "%REDISEARCH_DIR%\dist" "%PLUGINS_DIR%\redisearch\dist\" /s /e /y
 copy "%REDISEARCH_DIR%\package.json" "%PLUGINS_DIR%\redisearch\"
+
+:: Build redisgraph plugin
+set REDISGRAPH_DIR=".\redisinsight\ui\src\packages\redisgraph"
+call yarn --cwd "%REDISGRAPH_DIR%"
+call yarn --cwd "%REDISGRAPH_DIR%" build
+if not exist "%PLUGINS_DIR%\redisgraph" mkdir "%PLUGINS_DIR%\redisgraph"
+if not exist "%PLUGINS_DIR%\redisgraph\dist" mkdir "%PLUGINS_DIR%\redisgraph\dist"
+xcopy "%REDISGRAPH_DIR%\dist" "%PLUGINS_DIR%\redisgraph\dist\" /s /e /y
+copy "%REDISGRAPH_DIR%\package.json" "%PLUGINS_DIR%\redisgraph\"

scripts/build-statics.sh

@@ -18,3 +18,10 @@ yarn --cwd "${REDISEARCH_DIR}"
 yarn --cwd "${REDISEARCH_DIR}" build
 mkdir -p "${PLUGINS_DIR}/redisearch"
 cp -R "${REDISEARCH_DIR}/dist" "${REDISEARCH_DIR}/package.json" "${PLUGINS_DIR}/redisearch"
+
+# Build redisgraph plugin
+REDISGRAPH_DIR="./redisinsight/ui/src/packages/redisgraph"
+yarn --cwd "${REDISGRAPH_DIR}"
+yarn --cwd "${REDISGRAPH_DIR}" build
+mkdir -p "${PLUGINS_DIR}/redisgraph"
+cp -R "${REDISGRAPH_DIR}/dist" "${REDISGRAPH_DIR}/package.json" "${PLUGINS_DIR}/redisgraph"

tests/e2e/package.json

@@ -13,7 +13,7 @@
     "redis:last": "docker run --name redis-last-version -p 7777:6379 -d redislabs/redismod",
     "start:app": "cross-env SERVER_STATIC_CONTENT=true yarn start:api",
     "test:chrome": "testcafe --concurrency 1 chrome tests/ -r html:./report/report.html,spec -e",
-    "test:chrome:ci": "testcafe chromium:headless ${TEST_FILES:-tests/**/*.e2e.ts} -r spec,json:results/e2e.results.json,xunit:results/results.xml -e -q attemptLimit=3,successThreshold=1",
+    "test:chrome:ci": "ts-node ./web.runner.ts",
     "test": "yarn test:chrome",
     "lint": "eslint . --ext .ts,.js,.tsx,.jsx",
     "test:desktop:ci": "ts-node ./desktop.runner.ts",

tests/e2e/web.runner.ts

@@ -0,0 +1,38 @@
+import testcafe from 'testcafe';
+
+(async(): Promise<void> => {
+    await testcafe('localhost')
+        .then(t => {
+            return t
+                .createRunner()
+                .src((process.env.TEST_FILES || 'tests/**/*.e2e.ts').split('\n'))
+                .browsers(['chromium:headless'])
+                .filter((_testName, _fixtureName, _fixturePath, testMeta): boolean => {
+                    return testMeta.env !== 'desktop'
+                })
+                .reporter([
+                    'spec',
+                    {
+                        name: 'xunit',
+                        output: './results/results.xml'
+                    },
+                    {
+                        name: 'json',
+                        output: './results/e2e.results.json'
+                    }
+                ])
+                .run({
+                    skipJsErrors: true,
+                    browserInitTimeout: 60000,
+                    speed: 1,
+                    quarantineMode: { successThreshold: '1', attemptLimit: '3' }
+                });
+        })
+        .then(() => {
+            process.exit(0);
+        })
+        .catch((e) => {
+            console.error(e)
+            process.exit(1);
+        });
+})();