RI-7595: refactor and fix QueryActions

Author: pd-redis

redisinsight/ui/src/assets/img/workbench/execution_time.svg

@@ -22,7 +22,7 @@ export const EmptyButton = ({
   ...rest
 }: ButtonProps) => (
   <TextButton {...rest}>
-    <Row justify={justify} gap="s" align="center">
+    <Row justify={justify} gap="m" align="center">
       <ButtonIcon
         buttonSide="left"
         icon={icon}

redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx

@@ -12,7 +12,6 @@ import CopilotSvg from 'uiSrc/assets/img/icons/copilot.svg?react'
 import DefaultPluginDarkSvg from 'uiSrc/assets/img/workbench/default_view_dark.svg?react'
 import DefaultPluginLightSvg from 'uiSrc/assets/img/workbench/default_view_light.svg?react'
 import DislikeSvg from 'uiSrc/assets/img/icons/dislike.svg?react'
-import ExecutionTimeSvg from 'uiSrc/assets/img/workbench/execution_time.svg?react'
 import ExtendSvg from 'uiSrc/assets/img/icons/extend.svg?react'
 import GithubHelpCenterSVG from 'uiSrc/assets/img/github.svg?react'
 import GroupModeSvg from 'uiSrc/assets/img/icons/group_mode.svg?react'
@@ -170,7 +169,6 @@ export const CopilotIcon = createIconComponent(CopilotSvg)
 export const DefaultPluginDarkIcon = createIconComponent(DefaultPluginDarkSvg)
 export const DefaultPluginLightIcon = createIconComponent(DefaultPluginLightSvg)
 export const DislikeIcon = createIconComponent(DislikeSvg)
-export const ExecutionTimeIcon = createIconComponent(ExecutionTimeSvg)
 export const ExtendIcon = createIconComponent(ExtendSvg)
 export const GithubHelpCenterIcon = createIconComponent(GithubHelpCenterSVG)
 export const GroupModeIcon = createIconComponent(GroupModeSvg)

redisinsight/ui/src/components/base/icons/iconRegistry.tsx

@@ -4,30 +4,16 @@ import { PlayFilledIcon } from 'uiSrc/components/base/icons'
 import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 
 const StyledEmptyButton = styled(EmptyButton)`
-  height: 24px !important;
-  min-width: auto !important;
-  min-height: auto !important;
-  border-radius: 4px !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  margin-left: 8px;
-
-  border: 1px solid transparent !important;
-
-  & .RI-flex-row {
-    padding: 0 6px;
-  }
-
   &:focus,
   &:active {
-    outline: 0 !important;
+    outline: 0;
   }
 
   svg {
     margin-top: 1px;
     width: 14px;
     height: 14px;
-    color: var(--rsSubmitBtn) !important;
+    color: var(--rsSubmitBtn);
   }
 `
 

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

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
+import Divider from 'uiSrc/components/divider/Divider'
+export const QADivider = styled(Divider)`
+  height: 20px;
+`
+export const QABtn = styled(EmptyButton)<{ $active: boolean }>`
+  height: 24px;
+  min-width: auto;
+  min-height: auto;
+  border-radius: 4px;
+  background: ${({ $active }) =>
+    $active ? 'var(--browserComponentActive)' : 'transparent'};
+  box-shadow: none;
+
+  border: 1px solid
+    ${({ $active }) => ($active ? 'var(--euiColorPrimary)' : 'transparent')};
+
+  :global(.RI-flex-row) {
+    padding: 0 6px;
+    font:
+      normal normal 400 14px/17px Graphik,
+      sans-serif;
+  }
+
+  &:focus,
+  &:active {
+    outline: 0;
+  }
+
+  svg {
+    margin-top: 1px;
+    width: 14px;
+    height: 14px;
+  }
+
+  svg path {
+    fill: var(--euiTextSubduedColor);
+  }
+`

redisinsight/ui/src/components/query/query-actions/QueryActions.styles.ts

@@ -1,19 +1,20 @@
 import React from 'react'
 
-import cx from 'classnames'
 import { ResultsMode, RunQueryMode } from 'uiSrc/slices/interfaces'
 import { KEYBOARD_SHORTCUTS } from 'uiSrc/constants'
 import { KeyboardShortcut, RiTooltip } from 'uiSrc/components'
 import { isGroupMode } from 'uiSrc/utils'
 
 import { GroupModeIcon, RawModeIcon } from 'uiSrc/components/base/icons'
 
-import Divider from 'uiSrc/components/divider/Divider'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
-import { EmptyButton } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
-import styles from './styles.module.scss'
 import RunButton from 'uiSrc/components/query/components/RunButton'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import {
+  QABtn,
+  QADivider,
+} from 'uiSrc/components/query/query-actions/QueryActions.styles'
 
 export interface Props {
   onChangeMode?: () => void
@@ -22,13 +23,11 @@ export interface Props {
   activeMode: RunQueryMode
   resultsMode?: ResultsMode
   isLoading?: boolean
-  isDisabled?: boolean
 }
 
 const QueryActions = (props: Props) => {
   const {
     isLoading,
-    isDisabled,
     activeMode,
     resultsMode,
     onChangeMode,
@@ -37,39 +36,32 @@ const QueryActions = (props: Props) => {
   } = props
   const KeyBoardTooltipContent = KEYBOARD_SHORTCUTS?.workbench?.runQuery && (
     <>
-      <Text className={styles.tooltipText} size="s">
-        {KEYBOARD_SHORTCUTS.workbench.runQuery?.label}:
-      </Text>
+      <Text size="s">{KEYBOARD_SHORTCUTS.workbench.runQuery?.label}:</Text>
       <Spacer size="s" />
       <KeyboardShortcut
-        badgeTextClassName={styles.tooltipText}
         separator={KEYBOARD_SHORTCUTS?._separator}
         items={KEYBOARD_SHORTCUTS.workbench.runQuery.keys}
       />
     </>
   )
 
   return (
-    <div
-      className={cx(styles.actions, { [styles.disabledActions]: isDisabled })}
-    >
+    <Row align="center" justify="between" gap="l" grow={false}>
       {onChangeMode && (
         <RiTooltip
           position="left"
           content="Enables the raw output mode"
           data-testid="change-mode-tooltip"
         >
-          <EmptyButton
+          <QABtn
             onClick={() => onChangeMode()}
             icon={RawModeIcon}
             disabled={isLoading}
-            className={cx(styles.btn, styles.textBtn, {
-              [styles.activeBtn]: activeMode === RunQueryMode.Raw,
-            })}
+            $active={activeMode === RunQueryMode.Raw}
             data-testid="btn-change-mode"
           >
             Raw mode
-          </EmptyButton>
+          </QABtn>
         </RiTooltip>
       )}
       {onChangeGroupMode && (
@@ -85,24 +77,18 @@ const QueryActions = (props: Props) => {
           }
           data-testid="group-results-tooltip"
         >
-          <EmptyButton
+          <QABtn
             onClick={() => onChangeGroupMode()}
             disabled={isLoading}
             icon={GroupModeIcon}
-            className={cx(styles.btn, styles.textBtn, {
-              [styles.activeBtn]: isGroupMode(resultsMode),
-            })}
+            $active={isGroupMode(resultsMode)}
             data-testid="btn-change-group-mode"
           >
             Group results
-          </EmptyButton>
+          </QABtn>
         </RiTooltip>
       )}
-      <Divider
-        orientation="vertical"
-        colorVariable="separatorColor"
-        className={styles.divider}
-      />
+      <QADivider orientation="vertical" colorVariable="separatorColor" />
       <RiTooltip
         position="left"
         content={
@@ -114,7 +100,7 @@ const QueryActions = (props: Props) => {
       >
         <RunButton isLoading={isLoading} onSubmit={onSubmit} />
       </RiTooltip>
-    </div>
+    </Row>
   )
 }