diff --git a/redisinsight/ui/src/assets/img/workbench/execution_time.svg b/redisinsight/ui/src/assets/img/workbench/execution_time.svg deleted file mode 100644 index fdca9c3d5e..0000000000 --- a/redisinsight/ui/src/assets/img/workbench/execution_time.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx b/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx index 46e848510b..ebb72f943c 100644 --- a/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx +++ b/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx @@ -22,7 +22,7 @@ export const EmptyButton = ({ ...rest }: ButtonProps) => ( - + ( diff --git a/redisinsight/ui/src/components/base/link/link.styles.ts b/redisinsight/ui/src/components/base/link/link.styles.ts index f7bf116c45..95d879723f 100644 --- a/redisinsight/ui/src/components/base/link/link.styles.ts +++ b/redisinsight/ui/src/components/base/link/link.styles.ts @@ -21,7 +21,7 @@ export type RiLinkProps = Omit & { color?: ColorType } -export interface MapProps extends RiLinkProps { +type MapProps = RiLinkProps & { $color?: ColorType } diff --git a/redisinsight/ui/src/components/query/components/RunButton.tsx b/redisinsight/ui/src/components/query/components/RunButton.tsx index a9480d60ff..882f5d0dcc 100644 --- a/redisinsight/ui/src/components/query/components/RunButton.tsx +++ b/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); } ` diff --git a/redisinsight/ui/src/components/query/query-actions/QueryActions.spec.tsx b/redisinsight/ui/src/components/query/query-actions/QueryActions.spec.tsx index 5ed1a0d072..b67c810cbf 100644 --- a/redisinsight/ui/src/components/query/query-actions/QueryActions.spec.tsx +++ b/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() }) }) diff --git a/redisinsight/ui/src/components/query/query-actions/QueryActions.styles.ts b/redisinsight/ui/src/components/query/query-actions/QueryActions.styles.ts new file mode 100644 index 0000000000..191b88b09e --- /dev/null +++ b/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; +` diff --git a/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx b/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx index b249be6fd2..fb188aeef9 100644 --- a/redisinsight/ui/src/components/query/query-actions/QueryActions.tsx +++ b/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,12 +34,9 @@ const QueryActions = (props: Props) => { } = props const KeyBoardTooltipContent = KEYBOARD_SHORTCUTS?.workbench?.runQuery && ( <> - - {KEYBOARD_SHORTCUTS.workbench.runQuery?.label}: - + {KEYBOARD_SHORTCUTS.workbench.runQuery?.label}: @@ -50,26 +44,22 @@ const QueryActions = (props: Props) => { ) return ( -
+ {onChangeMode && ( - onChangeMode()} - icon={RawModeIcon} + 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 - + + Raw mode + )} {onChangeGroupMode && ( @@ -85,24 +75,18 @@ const QueryActions = (props: Props) => { } data-testid="group-results-tooltip" > - onChangeGroupMode()} + 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 - + + Group results + )} - + { > -
+ ) } diff --git a/redisinsight/ui/src/components/query/query-actions/styles.module.scss b/redisinsight/ui/src/components/query/query-actions/styles.module.scss deleted file mode 100644 index 4764d8d231..0000000000 --- a/redisinsight/ui/src/components/query/query-actions/styles.module.scss +++ /dev/null @@ -1,82 +0,0 @@ -.actions { - display: flex; - justify-content: space-between; - align-items: center; - - .btn { - height: 24px !important; - min-width: auto !important; - min-height: auto !important; - border-radius: 4px !important; - background: transparent !important; - box-shadow: none !important; - - color: var(--euiTextColor) !important; - border: 1px solid transparent !important; - - :global(.euiButton__content) { - padding: 0 6px; - } - - :global(.euiButton__text) { - color: var(--euiTextColor) !important; - font: normal normal 400 14px/17px Graphik, sans-serif !important - } - - &:focus, &:active { - outline: 0 !important; - } - - svg { - margin-top: 1px; - width: 14px; - height: 14px; - } - } - - .textBtn { - margin: 0 8px; - - svg path { - fill: var(--euiTextSubduedColor) !important; - } - - &.activeBtn { - background: var(--browserComponentActive) !important; - border: 1px solid var(--euiColorPrimary) !important; - } - } - - .submitButton { - margin-left: 8px; - - svg { - color: var(--rsSubmitBtn) !important; - } - - :global(.euiLoadingSpinner) { - width: 14px; - height: 14px; - color: var(--rsSubmitBtn) !important; - } - } - - .divider { - height: 20px; - margin-left: 8px; - } - - .tooltipText { - font-size: 12px !important; - } -} - -@include global.insights-open(1220px) { - .actions { - .btn { - :global(.euiButton__text) { - display: none; - } - } - } -} diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.styles.ts b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.styles.ts new file mode 100644 index 0000000000..70b41da6fc --- /dev/null +++ b/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; + } + } +` diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx index 3c63830c42..b35cf20cec 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/QueryCardHeader.tsx @@ -1,5 +1,4 @@ import React, { useContext } from 'react' -import styled from 'styled-components' import cx from 'classnames' import { useSelector } from 'react-redux' import { useParams } from 'react-router-dom' @@ -49,11 +48,11 @@ import { FormatedDate, FullScreen, RiTooltip } from 'uiSrc/components' import { FlexItem, Row } from 'uiSrc/components/base/layout/flex' import { IconButton } from 'uiSrc/components/base/forms/buttons' import { RiIcon } from 'uiSrc/components/base/icons/RiIcon' -import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect' import QueryCardTooltip from '../QueryCardTooltip' import styles from './styles.module.scss' import { useViewModeContext, ViewMode } from '../../context/view-mode.context' +import { ProfileSelect } from './QueryCardHeader.styles' export interface Props { query: string @@ -102,31 +101,6 @@ const getTruncatedExecutionTimeString = (value: number): string => { return truncateMilliseconds(parseFloat((value / 1000).toFixed(3))) } -const ProfileSelect = styled(RiSelect)` - border: none !important; - background-color: inherit !important; - color: var(--iconsDefaultColor) !important; - width: 46px; - padding: inherit !important; - - &.profiler { - width: 50px; - } - - &.toggle-view { - width: 40px; - } - - & ~ div { - right: 0; - - svg { - width: 10px !important; - height: 10px !important; - } - } -` - const QueryCardHeader = (props: Props) => { const { isOpen, @@ -276,26 +250,20 @@ const QueryCardHeader = (props: Props) => { label: id ?? value, disabled: false, inputDisplay: ( -
- - - -
- ), - dropdownDisplay: ( -
+ + + ), + dropdownDisplay: ( +
+ {truncateText(text, 20)}
), @@ -314,7 +282,6 @@ const QueryCardHeader = (props: Props) => { className={cx(styles.dropdownOption, styles.dropdownProfileOption)} > @@ -350,7 +317,7 @@ const QueryCardHeader = (props: Props) => { } return ( -
{}} @@ -364,7 +331,7 @@ const QueryCardHeader = (props: Props) => { data-testid="query-card-open" role="button" > - +
{
- + {!!createdAt && ( - + )} {!!message && !isOpen && ( - + {truncateText(message, 13)} )} {isNumber(executionTime) && ( { anchorClassName={styles.executionTime} data-testid="execution-time-tooltip" > - <> + {getTruncatedExecutionTimeString(executionTime)} - + )} - {!hideFields?.includes(HIDE_FIELDS.profiler) && ( - - {isOpen && canCommandProfile && !summaryText && ( - - onQueryProfile(value as ProfileQueryType) - } - className="profiler" - options={profileOptions} - data-testid="run-profile-type" - valueRender={({ option, isOptionValue }) => { - if (isOptionValue) { - return option.dropdownDisplay as JSX.Element + + {!hideFields?.includes(HIDE_FIELDS.profiler) && ( + + {isOpen && canCommandProfile && !summaryText && ( + + onQueryProfile(value as ProfileQueryType) } - return option.inputDisplay as JSX.Element - }} - /> - )} - - )} - {!hideFields?.includes(HIDE_FIELDS.viewType) && ( + className="profiler" + options={profileOptions} + data-testid="run-profile-type" + valueRender={({ option, isOptionValue }) => { + if (isOptionValue) { + return option.dropdownDisplay as JSX.Element + } + return option.inputDisplay as JSX.Element + }} + /> + )} + + )} + {!hideFields?.includes(HIDE_FIELDS.viewType) && ( + + {isOpen && options.length > 1 && !summaryText && ( + { + if (isOptionValue) { + return option.dropdownDisplay as JSX.Element + } + return option.inputDisplay as JSX.Element + }} + value={selectedValue} + onChange={(value: string) => onChangeView(value)} + className="toggle-view" + data-testid="select-view-type" + /> + )} + + )} - {isOpen && options.length > 1 && !summaryText && ( - { - if (isOptionValue) { - return option.dropdownDisplay as JSX.Element - } - return option.inputDisplay as JSX.Element - }} - value={selectedValue} - onChange={(value: string) => onChangeView(value)} - className="toggle-view" - data-testid="select-view-type" + {(isOpen || isFullScreen) && ( + )} - )} - - {(isOpen || isFullScreen) && ( - - )} - - - - - - - {!isFullScreen && ( - - + + - )} - {!isFullScreen && ( + {!isFullScreen && ( + + + + + + )} + {!isFullScreen && ( + + {!isSilentModeWithoutError(resultsMode, summary?.fail) && ( + + )} + + )} - {!isSilentModeWithoutError(resultsMode, summary?.fail) && ( - + {(isRawMode(mode) || isGroupResults(resultsMode)) && ( + + {isGroupMode(resultsMode) && ( + + + + )} + {isSilentMode(resultsMode) && ( + + + + )} + {isRawMode(mode) && ( + + -r + + )} + + } + position="bottom" + data-testid="parameters-tooltip" + > + + )} - )} - - {(isRawMode(mode) || isGroupResults(resultsMode)) && ( - - {isGroupMode(resultsMode) && ( - - - - )} - {isSilentMode(resultsMode) && ( - - - - )} - {isRawMode(mode) && ( - - -r - - )} - - } - position="bottom" - data-testid="parameters-tooltip" - > - - - )} - + -
+ ) } diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/styles.module.scss b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/styles.module.scss index 53195af51c..2aa57af874 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardHeader/styles.module.scss +++ b/redisinsight/ui/src/components/query/query-card/QueryCardHeader/styles.module.scss @@ -6,8 +6,6 @@ $breakpoint-xl: 1650px; $marginIcon: 12px; .container { - display: flex; - align-items: center; height: 45px; padding: 0 20px; cursor: pointer; @@ -19,29 +17,11 @@ $marginIcon: 12px; } } - :global(.euiFlexGroup--gutterLarge > .euiFlexItem) { - margin: $marginIcon calc($marginIcon/2) !important; - - @media (min-width: $breakpoint-m) { - margin: $marginIcon !important; - } - } - &.notExpanded { cursor: default; } } -.isOpen { - &.container { - color: var(--euiColorPrimary); - background-color: var(--tableRowSelectedColor) !important; - } - - .title { - color: var(--euiColorFullShade) !important; - } -} .title { display: inline-block; @@ -118,7 +98,6 @@ $marginIcon: 12px; .executionTime { min-width: 13px; width: 13px; - display: flex; @media (min-width: $breakpoint-m) { min-width: 92px; @@ -173,21 +152,6 @@ $marginIcon: 12px; flex-shrink: 0; } -.iconDropdownOption { - width: auto; - height: 16px; -} - -.iconExecutingTime { - width: 13px !important; - height: 13px !important; - margin-right: 6px; - - path { - fill: var(--iconsDefaultColor); - } -} - .dropdownOptionSeparator:after { content: ""; display: block; @@ -254,13 +218,13 @@ $marginIcon: 12px; z-index: 2; } -.container :global(.euiFlexItem).viewTypeIcon { +.container :global(.RI-flex-item).viewTypeIcon { width: 54px; min-width: 54px; margin: 0 calc($marginIcon/3) !important; } -.container :global(.euiFlexItem).playIcon { +.container :global(.RI-flex-item).playIcon { margin-right: calc($marginIcon/3) !important; } diff --git a/redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx b/redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx index 56b1521f99..dc6a3fc897 100644 --- a/redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx +++ b/redisinsight/ui/src/components/query/query-card/QueryCardTooltip/QueryCardTooltip.tsx @@ -73,7 +73,7 @@ const QueryCardTooltip = (props: Props) => { {contentItems}} + content={contentItems} position="bottom" > { // turn on Raw mode fireEvent.click(screen.getByTestId('btn-change-mode')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.WORKBENCH_MODE_CHANGED, eventData: { databaseId: INSTANCE_ID_MOCK, @@ -159,7 +160,7 @@ describe('Telemetry', () => { // send command without Raw mode fireEvent.click(screen.getByTestId('btn-submit')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.WORKBENCH_COMMAND_SUBMITTED, eventData: { command: 'INFO', @@ -184,7 +185,7 @@ describe('Telemetry', () => { // send command with Raw mode fireEvent.click(screen.getByTestId('btn-submit')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.WORKBENCH_COMMAND_SUBMITTED, eventData: { command: 'INFO', @@ -208,7 +209,7 @@ describe('Telemetry', () => { fireEvent.click(screen.getByTestId('re-run-command')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.WORKBENCH_COMMAND_RUN_AGAIN, eventData: { auto: undefined, @@ -233,7 +234,7 @@ describe('Telemetry', () => { fireEvent.click(screen.getByTestId('delete-command')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.WORKBENCH_CLEAR_RESULT_CLICKED, eventData: { databaseId: 'instanceId', @@ -244,7 +245,7 @@ describe('Telemetry', () => { fireEvent.click(screen.getByTestId('clear-history-btn')) - expect(sendEventTelemetry).toBeCalledWith({ + expect(sendEventTelemetry).toHaveBeenCalledWith({ event: TelemetryEvent.WORKBENCH_CLEAR_ALL_RESULTS_CLICKED, eventData: { databaseId: 'instanceId', @@ -306,21 +307,26 @@ describe('Raw mode', () => { }) it('check button clickable and selected', async () => { + const sendEventTelemetryMock = jest.fn() + ;(sendEventTelemetry as jest.Mock).mockImplementation( + () => sendEventTelemetryMock, + ) + render() const btn = screen.getByTestId(/btn-change-mode/) - expect(btn).not.toBeDisabled() - expect(btn).toHaveStyle('background: #000 !important') - - fireEvent.click(btn) - - expect(btn).toHaveStyle( - 'background: var(--browserComponentActive) !important', - ) - fireEvent.click(btn) + await userEvent.click(btn) - expect(btn).toHaveStyle('background: #000 !important') + expect(sendEventTelemetry).toHaveBeenCalledWith({ + event: TelemetryEvent.WORKBENCH_MODE_CHANGED, + eventData: { + databaseId: INSTANCE_ID_MOCK, + changedFromMode: RunQueryMode.ASCII, + changedToMode: RunQueryMode.Raw, + }, + }) + ;(sendEventTelemetry as jest.Mock).mockRestore() }) })