From 2d9af902474e92edf6955c9b33536a571cff331a Mon Sep 17 00:00:00 2001 From: "Roman.Sergeenko" Date: Tue, 6 Sep 2022 16:16:48 +0400 Subject: [PATCH 1/2] #RI-3461 - move pipeline setting to workbench section, refactoring --- .../advanced-settings/AdvancedSettings.tsx | 77 ----------------- redisinsight/ui/src/components/index.ts | 4 +- .../SettingItem.spec.tsx} | 16 ++-- .../SettingItem.tsx} | 4 +- .../styles.module.scss | 0 .../src/pages/settings/SettingsPage.spec.tsx | 24 +----- .../ui/src/pages/settings/SettingsPage.tsx | 55 ++++-------- .../AdvancedSettings.spec.tsx | 0 .../advanced-settings/AdvancedSettings.tsx | 43 ++++++++++ .../components/advanced-settings/index.ts | 3 + .../ui/src/pages/settings/components/index.ts | 7 ++ .../WorkbenchSettings.spec.tsx | 36 ++++++++ .../workbench-settings/WorkbenchSettings.tsx | 85 +++++++++++++++++++ .../components/workbench-settings/index.ts | 3 + 14 files changed, 206 insertions(+), 151 deletions(-) delete mode 100644 redisinsight/ui/src/components/advanced-settings/AdvancedSettings.tsx rename redisinsight/ui/src/components/{advanced-settings/AdvancedSettingsItem.spec.tsx => settings-item/SettingItem.spec.tsx} (83%) rename redisinsight/ui/src/components/{advanced-settings/AdvancedSettingsItem.tsx => settings-item/SettingItem.tsx} (97%) rename redisinsight/ui/src/components/{advanced-settings => settings-item}/styles.module.scss (100%) rename redisinsight/ui/src/{ => pages/settings}/components/advanced-settings/AdvancedSettings.spec.tsx (100%) create mode 100644 redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.tsx create mode 100644 redisinsight/ui/src/pages/settings/components/advanced-settings/index.ts create mode 100644 redisinsight/ui/src/pages/settings/components/index.ts create mode 100644 redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.spec.tsx create mode 100644 redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx create mode 100644 redisinsight/ui/src/pages/settings/components/workbench-settings/index.ts diff --git a/redisinsight/ui/src/components/advanced-settings/AdvancedSettings.tsx b/redisinsight/ui/src/components/advanced-settings/AdvancedSettings.tsx deleted file mode 100644 index 045d77ad0f..0000000000 --- a/redisinsight/ui/src/components/advanced-settings/AdvancedSettings.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react' -import { useDispatch, useSelector } from 'react-redux' -import { EuiLink, EuiSpacer } from '@elastic/eui' -import { toNumber } from 'lodash' - -import { validateCountNumber, validateNumber } from 'uiSrc/utils' -import { SCAN_COUNT_DEFAULT, PIPELINE_COUNT_DEFAULT } from 'uiSrc/constants/api' -import { updateUserConfigSettingsAction, userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings' - -import AdvancedSettingsItem from './AdvancedSettingsItem' - -const AdvancedSettings = () => { - const { scanThreshold = '', batchSize = PIPELINE_COUNT_DEFAULT } = useSelector(userSettingsConfigSelector) ?? {} - - const dispatch = useDispatch() - - const handleApplyKeysToScanChanges = (value: string) => { - // eslint-disable-next-line no-nested-ternary - const data = value ? (+value < SCAN_COUNT_DEFAULT ? SCAN_COUNT_DEFAULT : +value) : null - - dispatch( - updateUserConfigSettingsAction( - { scanThreshold: data }, - ) - ) - } - - const handleApplyPipelineCountChanges = (value: string) => { - dispatch( - updateUserConfigSettingsAction( - { batchSize: toNumber(value) }, - ) - ) - } - - return ( - <> - - - validateNumber(value)} - title="Pipeline mode" - testid="pipeline-bunch" - placeholder={`${PIPELINE_COUNT_DEFAULT}`} - label="Commands in pipeline:" - summary={( - <> - {'Sets the size of a command batch for the '} - - pipeline - - {' mode in Workbench. 0 or 1 pipelines every command.'} - - )} - /> - - ) -} - -export default AdvancedSettings diff --git a/redisinsight/ui/src/components/index.ts b/redisinsight/ui/src/components/index.ts index e5771c5a31..3cfce1e0af 100644 --- a/redisinsight/ui/src/components/index.ts +++ b/redisinsight/ui/src/components/index.ts @@ -10,7 +10,7 @@ import InputFieldSentinel from './input-field-sentinel/InputFieldSentinel' import PageBreadcrumbs from './page-breadcrumbs/PageBreadcrumbs' import ContentEditable from './ContentEditable' import Config from './config' -import AdvancedSettings from './advanced-settings/AdvancedSettings' +import SettingItem from './settings-item/SettingItem' import { ConsentsSettings, ConsentsSettingsPopup, ConsentsPrivacy, ConsentsNotifications } from './consents-settings' import KeyboardShortcut from './keyboard-shortcut/KeyboardShortcut' import ShortcutsFlyout from './shortcuts-flyout/ShortcutsFlyout' @@ -38,7 +38,7 @@ export { ConsentsSettingsPopup, ConsentsPrivacy, ConsentsNotifications, - AdvancedSettings, + SettingItem, KeyboardShortcut, MonitorConfig, PubSubConfig, diff --git a/redisinsight/ui/src/components/advanced-settings/AdvancedSettingsItem.spec.tsx b/redisinsight/ui/src/components/settings-item/SettingItem.spec.tsx similarity index 83% rename from redisinsight/ui/src/components/advanced-settings/AdvancedSettingsItem.spec.tsx rename to redisinsight/ui/src/components/settings-item/SettingItem.spec.tsx index 8f7fa86a4d..c99288ad59 100644 --- a/redisinsight/ui/src/components/advanced-settings/AdvancedSettingsItem.spec.tsx +++ b/redisinsight/ui/src/components/settings-item/SettingItem.spec.tsx @@ -4,7 +4,7 @@ import { screen, fireEvent, } from 'uiSrc/utils/test-utils' -import AdvancedSettingsItem from './AdvancedSettingsItem' +import SettingItem from './SettingItem' jest.mock('uiSrc/slices/user/user-settings', () => ({ ...jest.requireActual('uiSrc/slices/user/user-settings'), @@ -28,24 +28,24 @@ const mockedProps = { label: 'Keys to Scan:', } -describe('AdvancedSettingsItem', () => { +describe('SettingItem', () => { it('should render', () => { - expect(render()).toBeTruthy() + expect(render()).toBeTruthy() }) it('should render keys to scan value', () => { - render() + render() expect(screen.getByTestId(/keys-to-scan-value/)).toHaveTextContent('10000') }) it('should render keys to scan input after click value', () => { - render() + render() fireEvent.click(screen.getByTestId(/keys-to-scan-value/)) expect(screen.getByTestId(/keys-to-scan-input/)).toBeInTheDocument() }) it('should change keys to scan input properly', () => { - render() + render() fireEvent.click(screen.getByTestId(/keys-to-scan-value/)) fireEvent.change( screen.getByTestId(/keys-to-scan-input/), @@ -57,7 +57,7 @@ describe('AdvancedSettingsItem', () => { }) it('should properly apply changes', () => { - render() + render() fireEvent.click(screen.getByTestId(/keys-to-scan-value/)) fireEvent.change( @@ -71,7 +71,7 @@ describe('AdvancedSettingsItem', () => { }) it('should properly decline changes', async () => { - render() + render() fireEvent.click(screen.getByTestId(/keys-to-scan-value/)) fireEvent.change( diff --git a/redisinsight/ui/src/components/advanced-settings/AdvancedSettingsItem.tsx b/redisinsight/ui/src/components/settings-item/SettingItem.tsx similarity index 97% rename from redisinsight/ui/src/components/advanced-settings/AdvancedSettingsItem.tsx rename to redisinsight/ui/src/components/settings-item/SettingItem.tsx index e943d024f9..1b74bca03d 100644 --- a/redisinsight/ui/src/components/advanced-settings/AdvancedSettingsItem.tsx +++ b/redisinsight/ui/src/components/settings-item/SettingItem.tsx @@ -25,7 +25,7 @@ export interface Props { validation: (value: string) => string, } -const AdvancedSettingsItem = (props: Props) => { +const SettingItem = (props: Props) => { const { initValue, title, summary, testid, placeholder, label, onApply, validation = (val: string) => val } = props const [value, setValue] = useState(initValue) @@ -117,4 +117,4 @@ const AdvancedSettingsItem = (props: Props) => { ) } -export default AdvancedSettingsItem +export default SettingItem diff --git a/redisinsight/ui/src/components/advanced-settings/styles.module.scss b/redisinsight/ui/src/components/settings-item/styles.module.scss similarity index 100% rename from redisinsight/ui/src/components/advanced-settings/styles.module.scss rename to redisinsight/ui/src/components/settings-item/styles.module.scss diff --git a/redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx b/redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx index d80d22b7a2..38902d96a1 100644 --- a/redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx +++ b/redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx @@ -1,18 +1,7 @@ -import { fireEvent } from '@testing-library/react' -import { cloneDeep } from 'lodash' import React from 'react' -import { setWorkbenchCleanUp } from 'uiSrc/slices/user/user-settings' -import { cleanup, mockedStore, render, screen } from 'uiSrc/utils/test-utils' +import { render } from 'uiSrc/utils/test-utils' import SettingsPage from './SettingsPage' -let store: typeof mockedStore -beforeEach(() => { - cleanup() - store = cloneDeep(mockedStore) - store.clearActions() -}) - - describe('SettingsPage', () => { it('should render', () => { expect(render()).toBeTruthy() @@ -51,15 +40,4 @@ describe('SettingsPage', () => { ).toBeInTheDocument() expect(render()).toBeTruthy() }) - - it('should call proper actions after click on switch wb clear mode', () => { - render() - - const afterRenderActions = [...store.getActions()] - - fireEvent.click(screen.getByTestId('switch-workbench-cleanup')) - - expect(store.getActions()) - .toEqual([...afterRenderActions, setWorkbenchCleanUp(true)]) - }) }) diff --git a/redisinsight/ui/src/pages/settings/SettingsPage.tsx b/redisinsight/ui/src/pages/settings/SettingsPage.tsx index 2772d45eeb..2d9af00b67 100644 --- a/redisinsight/ui/src/pages/settings/SettingsPage.tsx +++ b/redisinsight/ui/src/pages/settings/SettingsPage.tsx @@ -14,25 +14,24 @@ import { EuiSpacer, EuiText, EuiCallOut, - EuiSwitch, } from '@elastic/eui' import { useDispatch, useSelector } from 'react-redux' import { setTitle } from 'uiSrc/utils' import { THEMES } from 'uiSrc/constants' import { useDebouncedEffect } from 'uiSrc/services' -import { ConsentsNotifications, ConsentsPrivacy, AdvancedSettings } from 'uiSrc/components' +import { ConsentsNotifications, ConsentsPrivacy } from 'uiSrc/components' import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPageView } from 'uiSrc/telemetry' import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info' import { ThemeContext } from 'uiSrc/contexts/themeContext' import { fetchUserConfigSettings, fetchUserSettingsSpec, - setWorkbenchCleanUp, userSettingsSelector, - userSettingsWBSelector, } from 'uiSrc/slices/user/user-settings' +import { AdvancedSettings, WorkbenchSettings } from './components' + import styles from './styles.module.scss' const SettingsPage = () => { @@ -41,7 +40,6 @@ const SettingsPage = () => { const [loading, setLoading] = useState(false) const { loading: settingsLoading } = useSelector(userSettingsSelector) - const { cleanup } = useSelector(userSettingsWBSelector) const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector) const dispatch = useDispatch() @@ -74,17 +72,6 @@ const SettingsPage = () => { }) } - const onSwitchWbCleanUp = (val: boolean) => { - dispatch(setWorkbenchCleanUp(val)) - sendEventTelemetry({ - event: TelemetryEvent.SETTINGS_WORKBENCH_EDITOR_CLEAR_CHANGED, - eventData: { - currentValue: !val, - newValue: val, - } - }) - } - const Appearance = () => ( <> @@ -118,28 +105,18 @@ const SettingsPage = () => { ) - const WorkbenchSettings = () => ( - <> - - -

Editor Cleanup

- - - - onSwitchWbCleanUp(e.target.checked)} - className={styles.switchOption} - data-testid="switch-workbench-cleanup" - /> - - - - + const WorkbenchSettingsGroup = () => ( +
+ {loading && ( +
+ +
+ )} + +
) - const AdvancedSettingsNavGroup = () => ( + const AdvancedSettingsGroup = () => (
{loading && (
@@ -148,7 +125,7 @@ const SettingsPage = () => { )} - These settings should only be changed if you understand their impact. + Advanced settings should only be changed if you understand their impact. @@ -189,7 +166,7 @@ const SettingsPage = () => { initialIsOpen={false} data-test-subj="accordion-workbench-settings" > - {WorkbenchSettings()} + {WorkbenchSettingsGroup()} { initialIsOpen={false} data-test-subj="accordion-advanced-settings" > - {AdvancedSettingsNavGroup()} + {AdvancedSettingsGroup()} diff --git a/redisinsight/ui/src/components/advanced-settings/AdvancedSettings.spec.tsx b/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.spec.tsx similarity index 100% rename from redisinsight/ui/src/components/advanced-settings/AdvancedSettings.spec.tsx rename to redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.spec.tsx diff --git a/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.tsx b/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.tsx new file mode 100644 index 0000000000..93852940c9 --- /dev/null +++ b/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.tsx @@ -0,0 +1,43 @@ +import { EuiSpacer } from '@elastic/eui' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' + +import { validateCountNumber } from 'uiSrc/utils' +import { SCAN_COUNT_DEFAULT } from 'uiSrc/constants/api' +import { SettingItem } from 'uiSrc/components' +import { updateUserConfigSettingsAction, userSettingsConfigSelector } from 'uiSrc/slices/user/user-settings' + +const AdvancedSettings = () => { + const { scanThreshold = '' } = useSelector(userSettingsConfigSelector) ?? {} + + const dispatch = useDispatch() + + const handleApplyKeysToScanChanges = (value: string) => { + // eslint-disable-next-line no-nested-ternary + const data = value ? (+value < SCAN_COUNT_DEFAULT ? SCAN_COUNT_DEFAULT : +value) : null + + dispatch( + updateUserConfigSettingsAction( + { scanThreshold: data }, + ) + ) + } + + return ( + <> + + + + ) +} + +export default AdvancedSettings diff --git a/redisinsight/ui/src/pages/settings/components/advanced-settings/index.ts b/redisinsight/ui/src/pages/settings/components/advanced-settings/index.ts new file mode 100644 index 0000000000..633a1956c0 --- /dev/null +++ b/redisinsight/ui/src/pages/settings/components/advanced-settings/index.ts @@ -0,0 +1,3 @@ +import AdvancedSettings from './AdvancedSettings' + +export default AdvancedSettings diff --git a/redisinsight/ui/src/pages/settings/components/index.ts b/redisinsight/ui/src/pages/settings/components/index.ts new file mode 100644 index 0000000000..0413500097 --- /dev/null +++ b/redisinsight/ui/src/pages/settings/components/index.ts @@ -0,0 +1,7 @@ +import AdvancedSettings from './advanced-settings' +import WorkbenchSettings from './workbench-settings' + +export { + AdvancedSettings, + WorkbenchSettings +} diff --git a/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.spec.tsx b/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.spec.tsx new file mode 100644 index 0000000000..278e8b5a5b --- /dev/null +++ b/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.spec.tsx @@ -0,0 +1,36 @@ +import { fireEvent } from '@testing-library/react' +import { cloneDeep } from 'lodash' +import React from 'react' +import { setWorkbenchCleanUp } from 'uiSrc/slices/user/user-settings' +import { + cleanup, + mockedStore, + render, + screen, +} from 'uiSrc/utils/test-utils' + +import WorkbenchSettings from './WorkbenchSettings' + +let store: typeof mockedStore +beforeEach(() => { + cleanup() + store = cloneDeep(mockedStore) + store.clearActions() +}) + +describe('WorkbenchSettings', () => { + it('should render', () => { + expect(render()).toBeTruthy() + }) + + it('should call proper actions after click on switch wb clear mode', () => { + render() + + const afterRenderActions = [...store.getActions()] + + fireEvent.click(screen.getByTestId('switch-workbench-cleanup')) + + expect(store.getActions()) + .toEqual([...afterRenderActions, setWorkbenchCleanUp(true)]) + }) +}) diff --git a/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx b/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx new file mode 100644 index 0000000000..f16308be16 --- /dev/null +++ b/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.tsx @@ -0,0 +1,85 @@ +import { EuiFormRow, EuiLink, EuiSpacer, EuiSwitch, EuiTitle } from '@elastic/eui' +import { toNumber } from 'lodash' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { SettingItem } from 'uiSrc/components' +import { PIPELINE_COUNT_DEFAULT } from 'uiSrc/constants/api' +import styles from 'uiSrc/pages/settings/styles.module.scss' +import { + setWorkbenchCleanUp, + updateUserConfigSettingsAction, userSettingsConfigSelector, + userSettingsWBSelector +} from 'uiSrc/slices/user/user-settings' +import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry' +import { validateNumber } from 'uiSrc/utils' + +const WorkbenchSettings = () => { + const { cleanup } = useSelector(userSettingsWBSelector) + const { batchSize = PIPELINE_COUNT_DEFAULT } = useSelector(userSettingsConfigSelector) ?? {} + + const dispatch = useDispatch() + + const onSwitchWbCleanUp = (val: boolean) => { + dispatch(setWorkbenchCleanUp(val)) + sendEventTelemetry({ + event: TelemetryEvent.SETTINGS_WORKBENCH_EDITOR_CLEAR_CHANGED, + eventData: { + currentValue: !val, + newValue: val, + } + }) + } + + const handleApplyPipelineCountChanges = (value: string) => { + dispatch( + updateUserConfigSettingsAction( + { batchSize: toNumber(value) }, + ) + ) + } + + return ( + <> + +

Editor Cleanup

+ + + + onSwitchWbCleanUp(e.target.checked)} + className={styles.switchOption} + data-testid="switch-workbench-cleanup" + /> + + + validateNumber(value)} + title="Pipeline mode" + testid="pipeline-bunch" + placeholder={`${PIPELINE_COUNT_DEFAULT}`} + label="Commands in pipeline:" + summary={( + <> + {'Sets the size of a command batch for the '} + + pipeline + + {' mode in Workbench. 0 or 1 pipelines every command.'} + + )} + /> + + ) +} + +export default WorkbenchSettings diff --git a/redisinsight/ui/src/pages/settings/components/workbench-settings/index.ts b/redisinsight/ui/src/pages/settings/components/workbench-settings/index.ts new file mode 100644 index 0000000000..d8a1a3d618 --- /dev/null +++ b/redisinsight/ui/src/pages/settings/components/workbench-settings/index.ts @@ -0,0 +1,3 @@ +import WorkbenchSettings from './WorkbenchSettings' + +export default WorkbenchSettings From 2bb45649ee57ffc810e9f08b36ddc5d506e76186 Mon Sep 17 00:00:00 2001 From: "Roman.Sergeenko" Date: Tue, 6 Sep 2022 16:58:56 +0400 Subject: [PATCH 2/2] #RI-3461 - fix tests --- .../advanced-settings/AdvancedSettings.spec.tsx | 6 +----- .../workbench-settings/WorkbenchSettings.spec.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.spec.tsx b/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.spec.tsx index 2c70cb89a6..64e7ad1af4 100644 --- a/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.spec.tsx +++ b/redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.spec.tsx @@ -20,14 +20,10 @@ describe('AdvancedSettings', () => { it('should render', () => { expect(render()).toBeTruthy() }) + it('should Keys-to-scan-value render ', () => { render() expect(screen.getByTestId(/keys-to-scan-value/)).toBeInTheDocument() }) - it('should pipeline-bunch render ', () => { - render() - - expect(screen.getByTestId(/pipeline-bunch/)).toBeInTheDocument() - }) }) diff --git a/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.spec.tsx b/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.spec.tsx index 278e8b5a5b..61b5d95d76 100644 --- a/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.spec.tsx +++ b/redisinsight/ui/src/pages/settings/components/workbench-settings/WorkbenchSettings.spec.tsx @@ -31,6 +31,12 @@ describe('WorkbenchSettings', () => { fireEvent.click(screen.getByTestId('switch-workbench-cleanup')) expect(store.getActions()) - .toEqual([...afterRenderActions, setWorkbenchCleanUp(true)]) + .toEqual([...afterRenderActions, setWorkbenchCleanUp(false)]) + }) + + it('should pipeline-bunch render ', () => { + render() + + expect(screen.getByTestId(/pipeline-bunch/)).toBeInTheDocument() }) })