#RI-3543-3544-3546-bugfix (#1170)

* #RI-3543-3544-3546-bugfix

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/keyboard-shortcut/KeyboardShortcut.tsx

@@ -6,23 +6,27 @@ import { EuiBadge, EuiText } from '@elastic/eui'
 import styles from './styles.module.scss'
 
 export interface Props {
-  items: (string | JSX.Element)[];
-  separator?: string;
-  transparent?: boolean;
+  items: (string | JSX.Element)[]
+  separator?: string
+  transparent?: boolean
+  badgeTextClassName?: string
 }
 
-const KeyboardShortcut = ({ items = [], separator = '', transparent = false }: Props) => (
-  <div className={styles.container}>
-    {
+const KeyboardShortcut = (props: Props) => {
+  const { items = [], separator = '', transparent = false, badgeTextClassName = '' } = props
+  return (
+    <div className={styles.container}>
+      {
         items.map((item: string | JSX.Element, index: number) => (
           <div key={isString(item) ? item : item?.props?.children}>
-            { (index !== 0) && <div className={styles.separator}>{separator}</div> }
+            {(index !== 0) && <div className={styles.separator}>{separator}</div>}
             <EuiBadge className={cx(styles.badge, { [styles.transparent]: transparent })}>
-              <EuiText size="s">{item}</EuiText>
+              <EuiText className={badgeTextClassName} size="s">{item}</EuiText>
             </EuiBadge>
           </div>
         ))
       }
-  </div>
-)
+    </div>
+  )
+}
 export default KeyboardShortcut

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

@@ -30,6 +30,7 @@ export interface Props {
   result: Maybe<CommandExecutionResult[]>
   activeMode: RunQueryMode
   mode: RunQueryMode
+  activeResultsMode?: ResultsMode
   resultsMode?: ResultsMode
   emptyCommand: boolean
   summary?: ResultsSummary
@@ -59,6 +60,7 @@ const QueryCard = (props: Props) => {
     result,
     activeMode,
     mode,
+    activeResultsMode,
     resultsMode,
     summary,
     isOpen,
@@ -162,7 +164,7 @@ const QueryCard = (props: Props) => {
           selectedValue={selectedViewValue}
           activeMode={activeMode}
           mode={mode}
-          resultsMode={resultsMode}
+          activeResultsMode={activeResultsMode}
           emptyCommand={emptyCommand}
           summary={getSummaryText(summary)}
           toggleOpen={toggleOpen}

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

@@ -10,7 +10,7 @@ export interface Props {
 const QueryCardCliGroupResult = (props: Props) => {
   const { result = [] } = props
   return (
-    <div data-testid="query-cli-default-result" style={{ maxHeight: '210px' }}>
+    <div data-testid="query-cli-default-result" className="query-card-output-response-success">
       {result[0]?.response.map((item: any, index: number) =>
         cliParseCommandsGroupResult(item, index))}
     </div>

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

@@ -40,7 +40,7 @@ export interface Props {
   summaryText?: string
   activeMode: RunQueryMode
   mode: RunQueryMode
-  resultsMode?: ResultsMode
+  activeResultsMode?: ResultsMode
   summary?: string
   queryType: WBQueryType
   selectedValue: string
@@ -64,7 +64,7 @@ const QueryCardHeader = (props: Props) => {
     summaryText,
     createdAt,
     mode,
-    resultsMode,
+    activeResultsMode,
     summary,
     activeMode,
     selectedValue,
@@ -92,7 +92,7 @@ const QueryCardHeader = (props: Props) => {
         databaseId: instanceId,
         command: getCommandNameFromQuery(query, COMMANDS_SPEC),
         rawMode: activeMode === RunQueryMode.Raw,
-        group: resultsMode === ResultsMode.GroupMode,
+        group: activeResultsMode === ResultsMode.GroupMode,
         ...additionalData
       }
     })

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

@@ -516,8 +516,9 @@ const Query = (props: Props) => {
                 ? 'Please wait while the commands are being executed…'
                 : KEYBOARD_SHORTCUTS?.workbench?.runQuery && (
                   <div style={{ display: 'flex', alignItems: 'baseline' }}>
-                    <EuiText size="s">{`${KEYBOARD_SHORTCUTS.workbench.runQuery?.label}:\u00A0\u00A0`}</EuiText>
+                    <EuiText className={styles.tooltipText} size="s">{`${KEYBOARD_SHORTCUTS.workbench.runQuery?.label}:\u00A0\u00A0`}</EuiText>
                     <KeyboardShortcut
+                      badgeTextClassName={styles.tooltipText}
                       separator={KEYBOARD_SHORTCUTS?._separator}
                       items={KEYBOARD_SHORTCUTS.workbench.runQuery.keys}
                     />
@@ -545,8 +546,9 @@ const Query = (props: Props) => {
             content={
               KEYBOARD_SHORTCUTS?.workbench?.changeGroupMode && (
                 <div style={{ display: 'flex', alignItems: 'baseline' }}>
-                  <EuiText size="s">{`${KEYBOARD_SHORTCUTS.workbench.changeGroupMode?.label}:\u00A0\u00A0`}</EuiText>
+                  <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}
                   />

redisinsight/ui/src/components/query/Query/styles.module.scss

@@ -137,3 +137,7 @@
     height: 24px;
   }
 }
+
+.tooltipText {
+  font-size: 12px !important;
+}

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

@@ -28,7 +28,7 @@ export interface Props {
 
 interface IState {
   activeMode: RunQueryMode
-  resultsMode: ResultsMode
+  resultsMode?: ResultsMode
 }
 
 let state: IState = {
@@ -58,7 +58,7 @@ const QueryWrapper = (props: Props) => {
 
   state = {
     activeMode,
-    resultsMode: ResultsMode.Default
+    resultsMode
   }
 
   const sendEventSubmitTelemetry = (commandInit = query) => {

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx

@@ -6,7 +6,7 @@ import { Theme } from 'uiSrc/constants'
 import { Nullable } from 'uiSrc/utils'
 import QueryCard from 'uiSrc/components/query-card'
 import { CommandExecutionUI } from 'uiSrc/slices/interfaces'
-import { RunQueryMode } from 'uiSrc/slices/interfaces/workbench'
+import { RunQueryMode, ResultsMode } from 'uiSrc/slices/interfaces/workbench'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import MultiPlayIconDark from 'uiSrc/assets/img/multi_play_icon_dark.svg'
 import MultiPlayIconLight from 'uiSrc/assets/img/multi_play_icon_light.svg'
@@ -15,6 +15,7 @@ import styles from './styles.module.scss'
 export interface Props {
   items: CommandExecutionUI[]
   activeMode: RunQueryMode
+  activeResultsMode?: ResultsMode
   scrollDivRef: React.Ref<HTMLDivElement>
   onQueryReRun: (query: string, commandId?: Nullable<string>, clearEditor?: boolean) => void
   onQueryDelete: (commandId: string) => void
@@ -24,6 +25,7 @@ const WBResults = (props: Props) => {
   const {
     items = [],
     activeMode,
+    activeResultsMode,
     onQueryReRun,
     onQueryDelete,
     onQueryOpen,
@@ -76,6 +78,7 @@ const WBResults = (props: Props) => {
           emptyCommand={emptyCommand}
           isNotStored={isNotStored}
           mode={mode}
+          activeResultsMode={activeResultsMode}
           resultsMode={resultsMode}
           onQueryOpen={() => onQueryOpen(id)}
           onQueryReRun={() => onQueryReRun(command, null, false)}

redisinsight/ui/src/pages/workbench/components/wb-results/WBResultsWrapper.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import { Nullable } from 'uiSrc/utils'
 import { CommandExecutionUI } from 'uiSrc/slices/interfaces'
-import { RunQueryMode } from 'uiSrc/slices/interfaces/workbench'
+import { RunQueryMode, ResultsMode } from 'uiSrc/slices/interfaces/workbench'
 import WBResults from './WBResults'
 
 export interface Props {
   items: CommandExecutionUI[]
   activeMode: RunQueryMode
+  activeResultsMode: ResultsMode
   scrollDivRef: React.Ref<HTMLDivElement>
   onQueryReRun: (query: string, commandId?: Nullable<string>, clearEditor?: boolean) => void
   onQueryOpen: (commandId: string) => void

redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx

@@ -138,6 +138,7 @@ const WBView = (props: Props) => {
                   <WBResultsWrapper
                     items={items}
                     activeMode={activeMode}
+                    activeResultsMode={resultsMode}
                     scrollDivRef={scrollDivRef}
                     onQueryReRun={onSubmit}
                     onQueryOpen={onQueryOpen}