Merge pull request #1119 from RedisInsight/feature/RI-3461_move-pipline-setting

#RI-3461 - move pipeline setting to workbench section, refactoring

Author: vlad-dargel

redisinsight/ui/src/components/advanced-settings/AdvancedSettings.tsx

@@ -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,

redisinsight/ui/src/components/index.ts

@@ -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(<AdvancedSettingsItem {...mockedProps} />)).toBeTruthy()
+    expect(render(<SettingItem {...mockedProps} />)).toBeTruthy()
   })
 
   it('should render keys to scan value', () => {
-    render(<AdvancedSettingsItem {...mockedProps} />)
+    render(<SettingItem {...mockedProps} />)
     expect(screen.getByTestId(/keys-to-scan-value/)).toHaveTextContent('10000')
   })
 
   it('should render keys to scan input after click value', () => {
-    render(<AdvancedSettingsItem {...mockedProps} />)
+    render(<SettingItem {...mockedProps} />)
     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(<AdvancedSettingsItem {...mockedProps} />)
+    render(<SettingItem {...mockedProps} />)
     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(<AdvancedSettingsItem {...mockedProps} />)
+    render(<SettingItem {...mockedProps} />)
 
     fireEvent.click(screen.getByTestId(/keys-to-scan-value/))
     fireEvent.change(
@@ -71,7 +71,7 @@ describe('AdvancedSettingsItem', () => {
   })
 
   it('should properly decline changes', async () => {
-    render(<AdvancedSettingsItem {...mockedProps} />)
+    render(<SettingItem {...mockedProps} />)
     fireEvent.click(screen.getByTestId(/keys-to-scan-value/))
 
     fireEvent.change(

redisinsight/ui/src/components/advanced-settings/AdvancedSettingsItem.spec.tsx renamed to redisinsight/ui/src/components/settings-item/SettingItem.spec.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<string>(initValue)
@@ -117,4 +117,4 @@ const AdvancedSettingsItem = (props: Props) => {
   )
 }
 
-export default AdvancedSettingsItem
+export default SettingItem

redisinsight/ui/src/components/advanced-settings/AdvancedSettingsItem.tsx renamed to redisinsight/ui/src/components/settings-item/SettingItem.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(<SettingsPage />)).toBeTruthy()
@@ -51,15 +40,4 @@ describe('SettingsPage', () => {
     ).toBeInTheDocument()
     expect(render(<SettingsPage />)).toBeTruthy()
   })
-
-  it('should call proper actions after click on switch wb clear mode', () => {
-    render(<SettingsPage />)
-
-    const afterRenderActions = [...store.getActions()]
-
-    fireEvent.click(screen.getByTestId('switch-workbench-cleanup'))
-
-    expect(store.getActions())
-      .toEqual([...afterRenderActions, setWorkbenchCleanUp(true)])
-  })
 })

redisinsight/ui/src/components/advanced-settings/styles.module.scss renamed to redisinsight/ui/src/components/settings-item/styles.module.scss

@@ -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 = () => (
     <>
       <EuiForm component="form">
@@ -118,28 +105,18 @@ const SettingsPage = () => {
     </div>
   )
 
-  const WorkbenchSettings = () => (
-    <>
-      <EuiForm component="form">
-        <EuiTitle size="xs">
-          <h4>Editor Cleanup</h4>
-        </EuiTitle>
-        <EuiSpacer size="m" />
-        <EuiFormRow>
-          <EuiSwitch
-            label="Clear the Editor when running the code"
-            checked={cleanup}
-            onChange={(e) => onSwitchWbCleanUp(e.target.checked)}
-            className={styles.switchOption}
-            data-testid="switch-workbench-cleanup"
-          />
-        </EuiFormRow>
-        <EuiSpacer size="l" />
-      </EuiForm>
-    </>
+  const WorkbenchSettingsGroup = () => (
+    <div>
+      {loading && (
+        <div className={styles.cover}>
+          <EuiLoadingSpinner size="xl" />
+        </div>
+      )}
+      <WorkbenchSettings />
+    </div>
   )
 
-  const AdvancedSettingsNavGroup = () => (
+  const AdvancedSettingsGroup = () => (
     <div>
       {loading && (
         <div className={styles.cover}>
@@ -148,7 +125,7 @@ const SettingsPage = () => {
       )}
       <EuiCallOut className={styles.warning}>
         <EuiText size="s" className={styles.smallText}>
-          These settings should only be changed if you understand their impact.
+          Advanced settings should only be changed if you understand their impact.
         </EuiText>
       </EuiCallOut>
       <AdvancedSettings />
@@ -189,7 +166,7 @@ const SettingsPage = () => {
             initialIsOpen={false}
             data-test-subj="accordion-workbench-settings"
           >
-            {WorkbenchSettings()}
+            {WorkbenchSettingsGroup()}
           </EuiCollapsibleNavGroup>
           <EuiCollapsibleNavGroup
             isCollapsible
@@ -198,7 +175,7 @@ const SettingsPage = () => {
             initialIsOpen={false}
             data-test-subj="accordion-advanced-settings"
           >
-            {AdvancedSettingsNavGroup()}
+            {AdvancedSettingsGroup()}
           </EuiCollapsibleNavGroup>
         </EuiPageContentBody>
       </EuiPageBody>

redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx

@@ -20,14 +20,10 @@ describe('AdvancedSettings', () => {
   it('should render', () => {
     expect(render(<AdvancedSettings />)).toBeTruthy()
   })
+
   it('should Keys-to-scan-value render ', () => {
     render(<AdvancedSettings />)
 
     expect(screen.getByTestId(/keys-to-scan-value/)).toBeInTheDocument()
   })
-  it('should pipeline-bunch render ', () => {
-    render(<AdvancedSettings />)
-
-    expect(screen.getByTestId(/pipeline-bunch/)).toBeInTheDocument()
-  })
 })

redisinsight/ui/src/pages/settings/SettingsPage.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 (
+    <>
+      <SettingItem
+        initValue={scanThreshold.toString()}
+        onApply={handleApplyKeysToScanChanges}
+        validation={validateCountNumber}
+        title="Keys to Scan in Browser"
+        summary="Sets the amount of keys to scan per one iteration. Filtering by pattern per a large number of keys may decrease performance."
+        testid="keys-to-scan"
+        placeholder="10 000"
+        label="Keys to Scan:"
+      />
+      <EuiSpacer size="m" />
+    </>
+  )
+}
+
+export default AdvancedSettings

redisinsight/ui/src/components/advanced-settings/AdvancedSettings.spec.tsx renamed to redisinsight/ui/src/pages/settings/components/advanced-settings/AdvancedSettings.spec.tsx

@@ -0,0 +1,3 @@
+import AdvancedSettings from './AdvancedSettings'
+
+export default AdvancedSettings