From 6f9e03be08373f8a18d693cb813173eb61da8945 Mon Sep 17 00:00:00 2001 From: "Roman.Sergeenko" Date: Thu, 9 Dec 2021 10:22:03 +0300 Subject: [PATCH 1/3] #RI-2061 - remove resizable from Enablement Area, add control to expand/collapse --- .../components/InternalPage/styles.scss | 4 + .../EnablementArea/styles.module.scss | 3 +- .../EnablementAreaCollapse.spec.tsx | 19 +++ .../EnablementAreaCollapse.tsx | 50 ++++++ .../EnablementAreaCollapse/styles.module.scss | 43 +++++ .../enablament-area/EnablementAreaWrapper.tsx | 39 ++++- .../enablament-area/styles.module.scss | 35 ++++ .../components/wb-view/WBView/WBView.tsx | 154 +++++++----------- .../wb-view/WBView/styles.module.scss | 60 +++---- redisinsight/ui/src/slices/app/context.ts | 5 - redisinsight/ui/src/slices/interfaces/app.ts | 3 - .../ui/src/slices/tests/app/context.spec.ts | 28 ---- .../themes/dark_theme/_dark_theme.lazy.scss | 1 + .../themes/dark_theme/_theme_color.scss | 1 + .../themes/light_theme/_light_theme.lazy.scss | 1 + .../themes/light_theme/_theme_color.scss | 1 + 16 files changed, 280 insertions(+), 167 deletions(-) create mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx create mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx create mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss create mode 100644 redisinsight/ui/src/pages/workbench/components/enablament-area/styles.module.scss diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss index c9f706c717..faee80527b 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/components/InternalPage/styles.scss @@ -1,6 +1,10 @@ @mixin font{ font: normal normal normal 14px/24px Graphik; letter-spacing: -0.14px; + @media only screen and (max-width: 1440px) { + font: normal normal normal 13px/18px Graphik; + letter-spacing: -0.13px; + } @media only screen and (max-width: 992px) { font: normal normal normal 12px/18px Graphik; letter-spacing: -0.12px; diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss index 84a2313734..2354a68ea8 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementArea/styles.module.scss @@ -7,8 +7,7 @@ $paddingHorizontal: 18px; overflow: hidden; height: 100%; padding: 0 $paddingHorizontal; - background-color: var(--euiColorEmptyShade); - border: 1px solid var(--euiColorLightShade) !important; + flex-grow: 1; } .innerContainer { diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx new file mode 100644 index 0000000000..34c7c48a03 --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { render } from 'uiSrc/utils/test-utils' +import EnablementAreaCollapse from './EnablementAreaCollapse' + +describe('EnablementAreaCollapse', () => { + it('should render', () => { + expect(render()).toBeTruthy() + }) + + it('should be minimized', () => { + const { queryByTestId } = render() + expect(queryByTestId('expand-enablement-area')).toBeInTheDocument() + }) + + it('should be expanded', () => { + const { queryByTestId } = render() + expect(queryByTestId('collapse-enablement-area')).toBeInTheDocument() + }) +}) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx new file mode 100644 index 0000000000..9386193294 --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx @@ -0,0 +1,50 @@ +import React from 'react' +import cx from 'classnames' +import { EuiButtonIcon, EuiToolTip } from '@elastic/eui' + +import styles from './styles.module.scss' + +export interface Props { + isMinimized: boolean; + setIsMinimized: (value: boolean) => void; +} + +const EnablementAreaCollapse = ({ isMinimized, setIsMinimized }: Props) => ( +
+ {isMinimized ? ( + + setIsMinimized(true)} + data-testid="expand-enablement-area" + /> + + ) : ( + + setIsMinimized(true)} + data-testid="collapse-enablement-area" + /> + + )} +
+) + +export default EnablementAreaCollapse diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss new file mode 100644 index 0000000000..4b9acda230 --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss @@ -0,0 +1,43 @@ +.wrapper { + display: flex; + align-items: center; + justify-content: center; + + &:not(.minimized) { + position: absolute; + top: 50%; + right: 0; + transform: translate(50%, -50%); + z-index: 1; + } + + &.minimized { + border-color: transparent; + height: 100%; + } +} + +.iconBtn { + width: 20px !important; + height: 20px !important; + + :global(.euiIcon) { + width: 20px !important; + height: 20px !important; + } + + &:focus { + background-color: transparent !important; + } + + &.btnHide, &.btnHide:focus { + width: 32px !important; + height: 32px !important; + background-color: var(--euiColorLightestShade) !important; + border: 1px solid var(--euiColorPrimary) !important; + + &:hover { + background-color: var(--buttonIconPrimaryHover) !important; + } + } +} diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaWrapper.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaWrapper.tsx index a21d0ce30b..835ac8d85c 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaWrapper.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaWrapper.tsx @@ -1,5 +1,7 @@ import React, { useEffect } from 'react' import { monaco } from 'react-monaco-editor' +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui' +import cx from 'classnames' import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api' import { useDispatch, useSelector } from 'react-redux' import { useParams } from 'react-router-dom' @@ -9,14 +11,19 @@ import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' import { fetchEnablementArea, workbenchEnablementAreaSelector } from 'uiSrc/slices/workbench/wb-enablement-area' import EnablementArea from './EnablementArea' +import EnablementAreaCollapse from './EnablementAreaCollapse/EnablementAreaCollapse' import { IInternalPage } from '../../contexts/enablementAreaContext' +import styles from './styles.module.scss' + export interface Props { + isMinimized: boolean; + setIsMinimized: (value: boolean) => void; scriptEl: Nullable; setScript: (script: string) => void; } -const EnablementAreaWrapper = React.memo(({ scriptEl, setScript }: Props) => { +const EnablementAreaWrapper = React.memo(({ isMinimized, setIsMinimized, scriptEl, setScript }: Props) => { const { loading, items } = useSelector(workbenchEnablementAreaSelector) const { instanceId = '' } = useParams<{ instanceId: string }>() const dispatch = useDispatch() @@ -56,12 +63,30 @@ const EnablementAreaWrapper = React.memo(({ scriptEl, setScript }: Props) => { } return ( - + isMinimized && setIsMinimized(false)} + direction="column" + gutterSize="none" + > + + + + + + + ) }) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/styles.module.scss new file mode 100644 index 0000000000..3d2d6ec4ba --- /dev/null +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/styles.module.scss @@ -0,0 +1,35 @@ +.areaWrapper { + overflow: hidden; + height: 100%; + background-color: var(--euiColorEmptyShade); + border: 1px solid var(--euiColorLightShade) !important; + + &.minimized { + cursor: pointer; + &:hover { + background-color: var(--hoverInListColorDarken); + } + } + + &:not(.minimized) { + &:hover { + .collapseWrapper { + display: flex; + } + } + } +} + +.collapseWrapper { + &:not(.minimized) { + display: none; + } +} + +.areaContentWrapper { + &.minimized { + width: 0; + visibility: hidden; + height: 0; + } +} diff --git a/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx b/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx index 504d61728c..8440e216c3 100644 --- a/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx +++ b/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx @@ -1,4 +1,4 @@ -import React, { Ref, useCallback, useEffect, useRef } from 'react' +import React, { Ref, useCallback, useEffect, useRef, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import cx from 'classnames' import { EuiResizableContainer } from '@elastic/eui' @@ -10,7 +10,6 @@ import QueryWrapper from 'uiSrc/components/query' import { WBHistoryObject } from 'uiSrc/pages/workbench/interfaces' import { WBQueryType } from 'uiSrc/pages/workbench/constants' import { - setWorkbenchHorizontalPanelSizes, setWorkbenchVerticalPanelSizes, appContextWorkbench } from 'uiSrc/slices/app/context' @@ -25,11 +24,6 @@ const verticalPanelIds = { secondPanelId: 'resultsArea' } -const horizontalPanelIds = { - firstPanelId: 'enablementArea', - secondPanelId: 'workbenchArea' -} - export interface Props { script: string; loading: boolean; @@ -45,24 +39,16 @@ export interface Props { const WBView = (props: Props) => { const { script = '', loading, setScript, setScriptEl, scriptEl, onSubmit, onQueryDelete, scrollDivRef, historyItems } = props - const { panelSizes: { horizontal, vertical } } = useSelector(appContextWorkbench) + const [isMinimized, setIsMinimized] = useState(false) + + const { panelSizes: { vertical } } = useSelector(appContextWorkbench) - const horizontalSizesRef = useRef(horizontal) const verticalSizesRef = useRef(vertical) - const isCollapsed = useRef(false) const dispatch = useDispatch() useEffect(() => () => { dispatch(setWorkbenchVerticalPanelSizes(verticalSizesRef.current)) - dispatch(setWorkbenchHorizontalPanelSizes(horizontalSizesRef.current)) - }, []) - - const onHorizontalPanelWidthChange = useCallback((newSizes: any) => { - if (isCollapsed.current) { - return - } - horizontalSizesRef.current = newSizes }, []) const onVerticalPanelWidthChange = useCallback((newSizes: any) => { @@ -73,82 +59,62 @@ const WBView = (props: Props) => {
- - {(EuiResizablePanel, EuiResizableButton) => ( - <> - { isCollapsed.current = !isCollapsed.current }} - data-test-subj="resize-container-preselects-area" - > - - - - - - {(EuiResizablePanel, EuiResizableButton) => ( - <> - - - - - - - - - - - )} - - - - )} - +
+ +
+
+ + {(EuiResizablePanel, EuiResizableButton) => ( + <> + + + + + + + + + + + )} + +
) diff --git a/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/styles.module.scss index d89c83a489..66eefa6077 100644 --- a/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/styles.module.scss @@ -8,35 +8,47 @@ .main { display: flex; flex: 1; - min-width: 100%; - width: 1px; padding: 0 16px 0; height: 100%; - - & > div { - min-height: 100%; - height: 1px !important; - min-width: 100%; - width: 1px !important; - } } .sidebar { - padding: 0 !important; - min-height: 100%; - height: 1px !important; + flex-shrink: 0; + margin-right: 12px; + position: relative; + width: 24%; + min-width: 324px; + max-width: 420px; + @media only screen and (max-width: 992px) { + width: 240px; + min-width: auto; + max-width: none; + } + + &.minimized { + width: 38px; + min-width: auto; + max-width: none; + } } .content { display: flex; - width: 100%; - min-height: 100%; - height: 1px !important; - padding: 0 !important; - align-content: stretch; - flex-direction: column; - justify-content: flex-start; - align-items: stretch; + flex-grow: 1; + width: 76%; + max-width: calc(100% - 336px); + min-width: calc(100% - 452px); + @media only screen and (max-width: 992px) { + width: calc(100% - 252px); + min-width: auto; + max-width: none; + } + + &.minimized { + width: calc(100% - 50px); + min-width: auto; + max-width: none; + } } .resizeButton { @@ -51,14 +63,6 @@ padding-top: 8px; } -.sidebarPanel { - padding-right: 8px !important; -} - -.contentPanel { - padding-left: 8px !important; -} - .sidebar, .queryResults { & > div { border-bottom-width: 0; diff --git a/redisinsight/ui/src/slices/app/context.ts b/redisinsight/ui/src/slices/app/context.ts index 40b01d06bb..7d671a6c45 100644 --- a/redisinsight/ui/src/slices/app/context.ts +++ b/redisinsight/ui/src/slices/app/context.ts @@ -21,7 +21,6 @@ export const initialState: StateAppContext = { guideScrollTop: 0, }, panelSizes: { - horizontal: {}, vertical: {} } } @@ -52,9 +51,6 @@ const appContextSlice = createSlice({ setWorkbenchScript: (state, { payload }: { payload: string }) => { state.workbench.script = payload }, - setWorkbenchHorizontalPanelSizes: (state, { payload }: { payload: any }) => { - state.workbench.panelSizes.horizontal = payload - }, setWorkbenchVerticalPanelSizes: (state, { payload }: { payload: any }) => { state.workbench.panelSizes.vertical = payload }, @@ -87,7 +83,6 @@ export const { setBrowserKeyListScrollPosition, setBrowserPanelSizes, setWorkbenchScript, - setWorkbenchHorizontalPanelSizes, setWorkbenchVerticalPanelSizes, setLastPageContext, setWorkbenchEAGuide, diff --git a/redisinsight/ui/src/slices/interfaces/app.ts b/redisinsight/ui/src/slices/interfaces/app.ts index 2e56fe1338..2d5f71f206 100644 --- a/redisinsight/ui/src/slices/interfaces/app.ts +++ b/redisinsight/ui/src/slices/interfaces/app.ts @@ -51,9 +51,6 @@ export interface StateAppContext { guideScrollTop: number; }, panelSizes: { - horizontal: { - [key: string]: number; - }, vertical: { [key: string]: number; } diff --git a/redisinsight/ui/src/slices/tests/app/context.spec.ts b/redisinsight/ui/src/slices/tests/app/context.spec.ts index c4e5968a0e..c89e4e2681 100644 --- a/redisinsight/ui/src/slices/tests/app/context.spec.ts +++ b/redisinsight/ui/src/slices/tests/app/context.spec.ts @@ -14,7 +14,6 @@ import reducer, { setBrowserKeyListScrollPosition, setBrowserPanelSizes, setWorkbenchScript, - setWorkbenchHorizontalPanelSizes, setWorkbenchVerticalPanelSizes, setLastPageContext, appContextSelector, @@ -184,33 +183,6 @@ describe('slices', () => { }) }) - describe('setWorkbenchHorizontalPanelSizes', () => { - it('should properly set wb panel sizes', () => { - // Arrange - const panelSizes = { - first: 100, - second: 200 - } - const state = { - ...initialState.workbench, - panelSizes: { - ...initialState.workbench.panelSizes, - horizontal: panelSizes - } - } - - // Act - const nextState = reducer(initialState, setWorkbenchHorizontalPanelSizes(panelSizes)) - - // Assert - const rootState = Object.assign(initialStateDefault, { - app: { context: nextState }, - }) - - expect(appContextWorkbench(rootState)).toEqual(state) - }) - }) - describe('setWorkbenchVerticalPanelSizes', () => { it('should properly set wb panel sizes', () => { // Arrange diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss index 732506a7e5..9968346349 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_dark_theme.lazy.scss @@ -98,6 +98,7 @@ --buttonSecondaryTextColor: #{$buttonSecondaryTextColor}; --buttonSecondaryDisabledTextColor: #{$buttonSecondaryDisabledTextColor}; --buttonDangerHoverColor: #{$buttonDangerHoverColor}; + --buttonIconPrimaryHover: #{$buttonIconPrimaryHover}; --cliOutputResponseColor: #{$cliOutputResponseColor}; --cliOutputResponseFailColor: #{$cliOutputResponseFailColor}; diff --git a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss index a7fd414d57..6797d833e7 100644 --- a/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/dark_theme/_theme_color.scss @@ -58,6 +58,7 @@ $buttonSecondaryHoverColor: #3e41a0; $buttonSecondaryTextColor: #ffffff; $buttonSecondaryDisabledTextColor: #8B90A3; $buttonDangerHoverColor: #E8524A; +$buttonIconPrimaryHover: #364DA8; $hoverInListColor: #070707; $hoverInListColorLight: #465282; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss index 314f4df6f6..646a8f227a 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_light_theme.lazy.scss @@ -100,6 +100,7 @@ --buttonSecondaryTextColor: #{$buttonSecondaryTextColor}; --buttonSecondaryDisabledTextColor: #{$buttonSecondaryDisabledTextColor}; --buttonDangerHoverColor: #{$buttonDangerHoverColor}; + --buttonIconPrimaryHover: #{$buttonIconPrimaryHover}; --cliOutputResponseColor: #{$cliOutputResponseColor}; --cliOutputResponseFailColor: #{$cliOutputResponseFailColor}; diff --git a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss index 38dba34ee2..890538d89f 100644 --- a/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss +++ b/redisinsight/ui/src/styles/themes/light_theme/_theme_color.scss @@ -56,6 +56,7 @@ $buttonSecondaryHoverColor: #3C56C7; $buttonSecondaryTextColor: #243DAC; $buttonSecondaryDisabledTextColor: #DFE4FB; $buttonDangerHoverColor: #CB3844; +$buttonIconPrimaryHover: #DFE4FB; $hoverInListColor: #E9EDFA; $hoverInListColorLight: #E9EDFA; From 861c3431c89a5cac58d11249010c99ff23639527 Mon Sep 17 00:00:00 2001 From: "Roman.Sergeenko" Date: Thu, 9 Dec 2021 12:23:15 +0300 Subject: [PATCH 2/3] #RI-2061 - add state for EA --- redisinsight/ui/src/constants/storage.ts | 1 + .../EnablementAreaCollapse/styles.module.scss | 2 ++ .../workbench/components/wb-view/WBView/WBView.tsx | 10 +++++++++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/redisinsight/ui/src/constants/storage.ts b/redisinsight/ui/src/constants/storage.ts index 027b847b89..2ed5408c4a 100644 --- a/redisinsight/ui/src/constants/storage.ts +++ b/redisinsight/ui/src/constants/storage.ts @@ -8,6 +8,7 @@ enum BrowserStorageItem { segmentAnonymousId = 'ajs_anonymous_id', wbClientUuid = 'wbClientUuid', wbInputHistory = 'wbInputHistory', + isEnablementAreaMinimized = 'isEnablementAreaMinimized' } export default BrowserStorageItem diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss index 4b9acda230..e9231bb4c8 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/styles.module.scss @@ -35,9 +35,11 @@ height: 32px !important; background-color: var(--euiColorLightestShade) !important; border: 1px solid var(--euiColorPrimary) !important; + transition: none; &:hover { background-color: var(--buttonIconPrimaryHover) !important; + transition: transform 250ms ease-in-out, background 250ms ease-in-out; } } } diff --git a/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx b/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx index 8440e216c3..fbb4a5645c 100644 --- a/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx +++ b/redisinsight/ui/src/pages/workbench/components/wb-view/WBView/WBView.tsx @@ -5,6 +5,8 @@ import { EuiResizableContainer } from '@elastic/eui' import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api' import { Nullable } from 'uiSrc/utils' +import { BrowserStorageItem } from 'uiSrc/constants' +import { localStorageService } from 'uiSrc/services' import InstanceHeader from 'uiSrc/components/instance-header' import QueryWrapper from 'uiSrc/components/query' import { WBHistoryObject } from 'uiSrc/pages/workbench/interfaces' @@ -39,7 +41,9 @@ export interface Props { const WBView = (props: Props) => { const { script = '', loading, setScript, setScriptEl, scriptEl, onSubmit, onQueryDelete, scrollDivRef, historyItems } = props - const [isMinimized, setIsMinimized] = useState(false) + const [isMinimized, setIsMinimized] = useState( + (localStorageService?.get(BrowserStorageItem.isEnablementAreaMinimized) ?? 'false') === 'true' + ) const { panelSizes: { vertical } } = useSelector(appContextWorkbench) @@ -51,6 +55,10 @@ const WBView = (props: Props) => { dispatch(setWorkbenchVerticalPanelSizes(verticalSizesRef.current)) }, []) + useEffect(() => { + localStorageService.set(BrowserStorageItem.isEnablementAreaMinimized, isMinimized) + }, [isMinimized]) + const onVerticalPanelWidthChange = useCallback((newSizes: any) => { verticalSizesRef.current = newSizes }, []) From dab899fdece46bd03e52d024b0da40648ec42c1e Mon Sep 17 00:00:00 2001 From: "Roman.Sergeenko" Date: Thu, 9 Dec 2021 15:31:45 +0300 Subject: [PATCH 3/3] #RI-2061 - add tests, fix expand btn --- .../EnablementAreaCollapse.spec.tsx | 16 +++++++++++++++- .../EnablementAreaCollapse.tsx | 2 +- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx index 34c7c48a03..acfc12c9c0 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.spec.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { render } from 'uiSrc/utils/test-utils' +import { fireEvent, render, screen } from 'uiSrc/utils/test-utils' import EnablementAreaCollapse from './EnablementAreaCollapse' describe('EnablementAreaCollapse', () => { @@ -16,4 +16,18 @@ describe('EnablementAreaCollapse', () => { const { queryByTestId } = render() expect(queryByTestId('collapse-enablement-area')).toBeInTheDocument() }) + + it('should expand', () => { + const setIsMinimized = jest.fn() + render() + fireEvent.click(screen.getByTestId('expand-enablement-area')) + expect(setIsMinimized).toBeCalledWith(false) + }) + + it('should collapse', () => { + const setIsMinimized = jest.fn() + render() + fireEvent.click(screen.getByTestId('collapse-enablement-area')) + expect(setIsMinimized).toBeCalledWith(true) + }) }) diff --git a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx index 9386193294..39ddd18d80 100644 --- a/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx +++ b/redisinsight/ui/src/pages/workbench/components/enablament-area/EnablementAreaCollapse/EnablementAreaCollapse.tsx @@ -23,7 +23,7 @@ const EnablementAreaCollapse = ({ isMinimized, setIsMinimized }: Props) => ( iconType="menuRight" color="subdued" size="m" - onClick={() => setIsMinimized(true)} + onClick={() => setIsMinimized(false)} data-testid="expand-enablement-area" />