Merge pull request #1200 from RedisInsight/fe/feature/RI-3587-group-mode-shortcut

#RI-3587 - change tooltip text, remove keyboard shortcut

Author: AlenaSY

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

@@ -66,7 +66,6 @@ const aroundQuotesRegExp = /(^["']|["']$)/g
 let decorations: string[] = []
 let execHistoryPos: number = 0
 let execHistory: CommandExecutionUI[] = []
-let toggleGroupMode: () => void = () => {}
 
 const Query = (props: Props) => {
   const {
@@ -118,11 +117,6 @@ const Query = (props: Props) => {
     execHistoryPos = 0
   }, [execHistoryItems])
 
-  useEffect(() => {
-    // HACK: The Monaco editor memoize the state and ignores updates to it
-    toggleGroupMode = onChangeGroupMode
-  }, [resultsMode])
-
   useEffect(() => {
     if (!monacoObjects.current) return
     const commands = query.split('\n')
@@ -406,10 +400,6 @@ const Query = (props: Props) => {
       getMonacoAction(MonacoAction.Submit, (editor) => handleSubmit(editor.getValue()), monaco)
     )
 
-    editor.addAction(
-      getMonacoAction(MonacoAction.ChangeGroupMode, () => toggleGroupMode(), monaco)
-    )
-
     editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Space, () => {
       onPressWidget()
     }, SYNTAX_CONTEXT_ID)
@@ -543,18 +533,7 @@ const Query = (props: Props) => {
           </EuiToolTip>
           <EuiToolTip
             position="left"
-            content={
-              KEYBOARD_SHORTCUTS?.workbench?.changeGroupMode && (
-                <div style={{ display: 'flex', alignItems: 'baseline' }}>
-                  <EuiText className={styles.tooltipText} size="s">{`${KEYBOARD_SHORTCUTS.workbench.changeGroupMode?.label}:\u00A0\u00A0`}</EuiText>
-                  <KeyboardShortcut
-                    badgeTextClassName={styles.tooltipText}
-                    separator={KEYBOARD_SHORTCUTS?._separator}
-                    items={KEYBOARD_SHORTCUTS.workbench.changeGroupMode.keys}
-                  />
-                </div>
-              )
-            }
+            content="Group Results"
             data-testid="run-query-tooltip"
           >
             <>

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

@@ -38,7 +38,6 @@ export const SHORTCUTS: ShortcutGroup[] = [
     name: 'Workbench',
     items: [
       KEYBOARD_SHORTCUTS.workbench.runQuery,
-      KEYBOARD_SHORTCUTS.workbench.changeGroupMode,
       KEYBOARD_SHORTCUTS.workbench.nextLine,
       KEYBOARD_SHORTCUTS.workbench.listOfCommands,
       KEYBOARD_SHORTCUTS.workbench.triggerHints,

redisinsight/ui/src/constants/keyboardShortcuts.tsx

@@ -42,11 +42,6 @@ const COMMON_SHORTCUTS = {
       description: 'Run Command',
       keys: ['Ctrl', 'Enter'],
     },
-    changeGroupMode: {
-      label: 'Group Mode',
-      description: 'Toggle the group mode in Workbench',
-      keys: ['Ctrl', 'Shift', 'G'],
-    },
     nextLine: {
       description: 'Go to the next line',
       keys: ['Enter'],
@@ -110,11 +105,6 @@ const MAC_SHORTCUTS = {
       description: 'Run Command',
       keys: [(<span className="cmdSymbol">⌘</span>), 'Enter'],
     },
-    changeGroupMode: {
-      label: 'Group Mode',
-      description: 'Toggle the group mode in Workbench',
-      keys: [(<span className="cmdSymbol">⌘</span>), 'Shift', 'G'],
-    },
     nextLine: {
       description: 'Go to the next line',
       keys: ['Enter'],

redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx

@@ -58,7 +58,7 @@ const WorkbenchSettings = () => {
         initValue={batchSize.toString()}
         onApply={handleApplyPipelineCountChanges}
         validation={(value) => validateNumber(value)}
-        title="Pipeline mode"
+        title="Pipeline Mode"
         testid="pipeline-bunch"
         placeholder={`${PIPELINE_COUNT_DEFAULT}`}
         label="Commands in pipeline:"

redisinsight/ui/src/utils/monacoActions.ts

@@ -19,15 +19,6 @@ export const getMonacoAction = (
     }
   }
 
-  if (actionId === MonacoAction.ChangeGroupMode) {
-    return {
-      id: 'change-group-mode',
-      label: 'Group Mode',
-      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_G],
-      run: action
-    }
-  }
-
   return { id: '', label: '', run: () => {} }
 }
 

tests/e2e/tests/regression/workbench/editor-cleanup.e2e.ts

@@ -32,6 +32,8 @@ test('Disabled Editor Cleanup toggle behavior', async t => {
     await t.click(settingsPage.accordionWorkbenchSettings);
     // Disable Editor Cleanup
     await t.click(settingsPage.switchEditorCleanupOption);
+    // Verify that user can see text "Clear the Editor after running commands" for Editor Cleanup In Settings
+    await t.expect(settingsPage.switchEditorCleanupOption.sibling(0).withExactText('Clear the Editor after running commands').visible).ok('Cleanup text is not correct');
     // Go to Workbench page
     await t.click(myRedisDatabasePage.workbenchButton);
     // Send commands

tests/e2e/tests/regression/workbench/group-mode.e2e.ts

@@ -38,9 +38,8 @@ test('Verify that user can run the commands from the Editor in the group mode',
     // Verify that if the only one command is executed in group, the result will be displayed as for group mode
     await workbenchPage.sendCommandInWorkbench(`${command}`);
     await t.expect(workbenchPage.queryCardCommand.textContent).eql('1 Command(s) - 1 success, 0 error(s)', 'Not valid summary for 1 command');
-    // Verify that user can use keyboard shortcut Ctrl+Shift+G to enable the group mode
-    await t.click(workbenchPage.queryInput);
-    await t.pressKey('shift+ctrl+g');
+    // Turn off group mode
+    await t.click(workbenchPage.groupMode);
     await workbenchPage.sendCommandInWorkbench(commandsString);
     await t.expect(workbenchPage.queryCardCommand.textContent).notEql(`${commandsNumber} Command(s) - ${commandsNumber} success, 0 error(s)`, 'Commands are sent in groups');
     for (let i = 0; i++; i < commandsNumber) {

yarn.lock

@@ -2781,19 +2781,19 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^17.0.1":
-  version "17.0.37"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
-  integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
+"@types/react@*", "@types/react@^18.0.20":
+  version "18.0.20"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.20.tgz#e4c36be3a55eb5b456ecf501bd4a00fd4fd0c9ab"
+  integrity sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^18.0.20":
-  version "18.0.20"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.20.tgz#e4c36be3a55eb5b456ecf501bd4a00fd4fd0c9ab"
-  integrity sha512-MWul1teSPxujEHVwZl4a5HxQ9vVNsjTchVA+xRqv/VYGCuKGAU6UhfrTdF5aBefwD1BHUD8i/zq+O/vyCm/FrA==
+"@types/react@^17.0.1":
+  version "17.0.37"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.37.tgz#6884d0aa402605935c397ae689deed115caad959"
+  integrity sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"