RI-7593, RI-7594, RI-7595, RI-7528 wb issues

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

@@ -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/icons/iconRegistry.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/link/Link.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 export { type LinkProps } from '@redis-ui/components'
-import { StyledLink, RiLinkProps } from 'uiSrc/components/base/link/link.styles'
+import {
+  StyledLink,
+  type RiLinkProps,
+} from 'uiSrc/components/base/link/link.styles'
 export { type RiLinkProps }
 
 export const Link = ({ color, ...props }: RiLinkProps) => (

redisinsight/ui/src/components/base/link/link.styles.ts

@@ -21,7 +21,7 @@ export type RiLinkProps = Omit<LinkProps, 'color'> & {
   color?: ColorType
 }
 
-export interface MapProps extends RiLinkProps {
+type MapProps = RiLinkProps & {
   $color?: ColorType
 }
 

redisinsight/ui/src/components/query/components/RunButton.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/query-actions/QueryActions.spec.tsx

@@ -26,12 +26,12 @@ describe('QueryActions', () => {
     )
 
     fireEvent.click(screen.getByTestId('btn-change-mode'))
-    expect(onChangeMode).toBeCalled()
+    expect(onChangeMode).toHaveBeenCalled()
 
     fireEvent.click(screen.getByTestId('btn-change-group-mode'))
-    expect(onChangeGroupMode).toBeCalled()
+    expect(onChangeGroupMode).toHaveBeenCalled()
 
     fireEvent.click(screen.getByTestId('btn-submit'))
-    expect(onSubmit).toBeCalled()
+    expect(onSubmit).toHaveBeenCalled()
   })
 })

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

@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+import Divider from 'uiSrc/components/divider/Divider'
+export const QADivider = styled(Divider)`
+  height: 20px;
+`

redisinsight/ui/src/components/query/query-actions/QueryActions.tsx

@@ -1,19 +1,18 @@
 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 { RiIcon } 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 { QADivider } from 'uiSrc/components/query/query-actions/QueryActions.styles'
+import { ToggleButton } from 'uiSrc/components/base/forms/buttons'
 
 export interface Props {
   onChangeMode?: () => void
@@ -22,13 +21,11 @@ export interface Props {
   activeMode: RunQueryMode
   resultsMode?: ResultsMode
   isLoading?: boolean
-  isDisabled?: boolean
 }
 
 const QueryActions = (props: Props) => {
   const {
     isLoading,
-    isDisabled,
     activeMode,
     resultsMode,
     onChangeMode,
@@ -37,39 +34,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
-            onClick={() => onChangeMode()}
-            icon={RawModeIcon}
+          <ToggleButton
+            onPressedChange={() => onChangeMode()}
             disabled={isLoading}
-            className={cx(styles.btn, styles.textBtn, {
-              [styles.activeBtn]: activeMode === RunQueryMode.Raw,
-            })}
+            pressed={activeMode === RunQueryMode.Raw}
             data-testid="btn-change-mode"
           >
-            Raw mode
-          </EmptyButton>
+            <RiIcon size="m" type="RawModeIcon" />
+            <Text size="s">Raw mode</Text>
+          </ToggleButton>
         </RiTooltip>
       )}
       {onChangeGroupMode && (
@@ -85,24 +75,18 @@ const QueryActions = (props: Props) => {
           }
           data-testid="group-results-tooltip"
         >
-          <EmptyButton
-            onClick={() => onChangeGroupMode()}
+          <ToggleButton
+            onPressedChange={() => onChangeGroupMode()}
             disabled={isLoading}
-            icon={GroupModeIcon}
-            className={cx(styles.btn, styles.textBtn, {
-              [styles.activeBtn]: isGroupMode(resultsMode),
-            })}
+            pressed={isGroupMode(resultsMode)}
             data-testid="btn-change-group-mode"
           >
-            Group results
-          </EmptyButton>
+            <RiIcon size="m" type="GroupModeIcon" />
+            <Text size="s">Group results</Text>
+          </ToggleButton>
         </RiTooltip>
       )}
-      <Divider
-        orientation="vertical"
-        colorVariable="separatorColor"
-        className={styles.divider}
-      />
+      <QADivider orientation="vertical" colorVariable="separatorColor" />
       <RiTooltip
         position="left"
         content={
@@ -114,7 +98,7 @@ const QueryActions = (props: Props) => {
       >
         <RunButton isLoading={isLoading} onSubmit={onSubmit} />
       </RiTooltip>
-    </div>
+    </Row>
   )
 }
 

redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.styles.ts

@@ -0,0 +1,27 @@
+import styled from 'styled-components'
+import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
+
+export const ProfileSelect = styled(RiSelect)`
+  border: none;
+  background-color: inherit;
+  //color: var(--iconsDefaultColor);
+  width: 46px;
+  padding: inherit;
+
+  &.profiler {
+    min-width: 50px;
+  }
+
+  &.toggle-view {
+    min-width: 40px;
+  }
+
+  & ~ div {
+    right: 0;
+
+    svg {
+      width: 10px;
+      height: 10px;
+    }
+  }
+`