RI-7068: replace EuiSwitch with SwitchInput (#4622)

* RI-7068: replace EuiSwitch for AutoRefresh

* update AutoRefresh

* SwitchInput for WorkbenchSettings

* SwitchInput for ConsentOptions

* SwitchInput for Monitor

* SwitchInput for Graph

* SwitchInput for MessageClaimPopover

* SwitchInput for db analytics

* remove euiSwitch styles

* SwitchInput for redistimeseries-app

* fix failing unit tests

* refactor userEvent imports

* update SwitchInput props signature

* RI-7068: update SwitchInput props

* update SwitchInput import path

Author: KrumTy

redisinsight/ui/src/components/auto-refresh/AutoRefresh.spec.tsx

@@ -1,6 +1,12 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { fireEvent, screen, render, act } from 'uiSrc/utils/test-utils'
+import {
+  userEvent,
+  fireEvent,
+  screen,
+  render,
+  act,
+} from 'uiSrc/utils/test-utils'
 import { localStorageService } from 'uiSrc/services'
 import AutoRefresh, { Props } from './AutoRefresh'
 import { DEFAULT_REFRESH_RATE } from './utils'
@@ -72,7 +78,7 @@ describe('AutoRefresh', () => {
     render(<AutoRefresh {...instance(mockedProps)} displayText />)
 
     fireEvent.click(screen.getByTestId('auto-refresh-config-btn'))
-    fireEvent.click(screen.getByTestId('auto-refresh-switch'))
+    await userEvent.click(screen.getByTestId('auto-refresh-switch'))
 
     expect(screen.getByTestId('refresh-message-label')).toHaveTextContent(
       /Auto refresh:/i,
@@ -153,7 +159,7 @@ describe('AutoRefresh', () => {
       render(<AutoRefresh {...instance(mockedProps)} onRefresh={onRefresh} />)
 
       fireEvent.click(screen.getByTestId('auto-refresh-config-btn'))
-      fireEvent.click(screen.getByTestId('auto-refresh-switch'))
+      await userEvent.click(screen.getByTestId('auto-refresh-switch'))
       fireEvent.click(screen.getByTestId('refresh-rate'))
 
       fireEvent.change(screen.getByTestId(INLINE_ITEM_EDITOR), {
@@ -259,7 +265,7 @@ describe('AutoRefresh', () => {
     )
 
     fireEvent.click(screen.getByTestId('auto-refresh-config-btn'))
-    fireEvent.click(screen.getByTestId('auto-refresh-switch'))
+    await userEvent.click(screen.getByTestId('auto-refresh-switch'))
     fireEvent.click(screen.getByTestId('refresh-rate'))
     fireEvent.change(screen.getByTestId(INLINE_ITEM_EDITOR), {
       target: { value: '1' },

redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { EuiIcon, EuiPopover, EuiSwitch, EuiToolTip } from '@elastic/eui'
+import { EuiIcon, EuiPopover, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
 import { ChevronDownIcon, RefreshIcon } from 'uiSrc/components/base/icons'
 import {
@@ -13,6 +13,7 @@ import { localStorageService } from 'uiSrc/services'
 import { BrowserStorageItem } from 'uiSrc/constants'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
 import { ColorText } from 'uiSrc/components/base/text'
+import { SwitchInput } from 'uiSrc/components/base/inputs'
 import {
   DEFAULT_REFRESH_RATE,
   DURATION_FIRST_REFRESH_TIME,
@@ -264,16 +265,13 @@ const AutoRefresh = ({
           />
         }
       >
-        <div className={styles.switch}>
-          <EuiSwitch
-            compressed
-            label="Auto Refresh"
-            checked={enableAutoRefresh}
-            onChange={(e) => onChangeEnableAutoRefresh(e.target.checked)}
-            className={styles.switchOption}
-            data-testid={getDataTestid('auto-refresh-switch')}
-          />
-        </div>
+        <SwitchInput
+          title="Auto Refresh"
+          checked={enableAutoRefresh}
+          onCheckedChange={onChangeEnableAutoRefresh}
+          className={styles.switchOption}
+          data-testid={getDataTestid('auto-refresh-switch')}
+        />
         <div className={styles.inputContainer}>
           <div className={styles.inputLabel}>Refresh rate:</div>
           {!editingRate && (

redisinsight/ui/src/components/auto-refresh/styles.module.scss

@@ -102,15 +102,7 @@
 }
 
 .switchOption {
-  :global(.euiSwitch__label) {
-    color: var(--euiTextSubduedColor) !important;
-    font-size: 13px !important;
-  }
-
-  :global(.euiSwitch__button) {
-    width: 28px !important;
-    margin-right: 4px;
-  }
+  padding-bottom: 16px;
 }
 
 .enable {
@@ -149,4 +141,4 @@
       display: inline-block !important;
     }
   }
-}
+}

redisinsight/ui/src/components/base/inputs/SwitchInput.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import userEvent from '@testing-library/user-event'
+import { render } from '@testing-library/react'
+
+import SwitchInput from './SwitchInput'
+
+describe('SwitchInput', () => {
+  it('should render with default props', () => {
+    const { container } = render(<SwitchInput title="On" />)
+
+    expect(container.firstChild).toHaveTextContent('On')
+  })
+
+  it('should render with titleOff when provided', () => {
+    const { container } = render(
+      <SwitchInput title="On" titleOff="Off" checked={false} />,
+    )
+
+    expect(container.firstChild).toHaveTextContent('Off')
+  })
+
+  it('should fall back to title when titleOff is not provided', () => {
+    const { container } = render(<SwitchInput title="On" checked={false} />)
+
+    expect(container.firstChild).toHaveTextContent('On')
+  })
+
+  it('should call onCheckedChange when toggled', async () => {
+    const onCheckedChange = jest.fn()
+    const { getByRole, container } = render(
+      <SwitchInput title="On" onCheckedChange={onCheckedChange} />,
+    )
+
+    expect(container.firstChild).toHaveTextContent('On')
+
+    const switchElement = getByRole('switch')
+    await userEvent.click(switchElement)
+
+    expect(onCheckedChange).toHaveBeenCalledWith(true)
+    expect(container.firstChild).toHaveTextContent('On')
+  })
+
+  it('should apply custom styles', () => {
+    const { container } = render(
+      <SwitchInput title="On" style={{ backgroundColor: 'red' }} />,
+    )
+    expect(container.firstChild).toHaveStyle('background-color: red')
+  })
+})

redisinsight/ui/src/components/base/inputs/SwitchInput.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { Switch } from '@redis-ui/components'
+
+type SwitchInputProps = Omit<React.ComponentProps<typeof Switch>, 'titleOn'>
+
+const SwitchInput = ({
+  style,
+  title,
+  titleOff,
+  ...props
+}: SwitchInputProps) => (
+  <Switch
+    {...props}
+    titleOn={title}
+    titleOff={titleOff !== undefined ? titleOff : title}
+    style={{
+      alignItems: 'center',
+      ...style,
+    }}
+  />
+)
+
+export default SwitchInput

redisinsight/ui/src/components/base/inputs/index.ts

@@ -1,4 +1,5 @@
 export { default as PasswordInput } from './PasswordInput'
 export { default as SearchInput } from './SearchInput'
 export { default as NumericInput } from './NumericInput'
+export { default as SwitchInput } from './SwitchInput'
 export { default as TextArea } from './TextArea'

redisinsight/ui/src/components/consents-settings/ConsentOption/ConsentOption.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { EuiSwitch } from '@elastic/eui'
 import parse from 'html-react-parser'
 
 import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { Text } from 'uiSrc/components/base/text'
+import { SwitchInput } from 'uiSrc/components/base/inputs'
 import { IConsent } from '../ConsentsSettings'
 
 import styles from '../styles.module.scss'
@@ -42,14 +42,11 @@ const ConsentOption = (props: Props) => {
       )}
       <Row gap="m">
         <FlexItem>
-          <EuiSwitch
-            showLabel={false}
-            label=""
+          <SwitchInput
             checked={checked}
-            onChange={(e) =>
-              onChangeAgreement(e.target.checked, consent.agreementName)
+            onCheckedChange={(checked) =>
+              onChangeAgreement(checked, consent.agreementName)
             }
-            className={styles.switchOption}
             data-testid={`switch-option-${consent.agreementName}`}
             disabled={consent?.disabled}
           />

redisinsight/ui/src/components/consents-settings/ConsentsNotifications/ConsentsNotifications.spec.tsx

@@ -2,12 +2,11 @@ import React from 'react'
 import { cloneDeep } from 'lodash'
 import {
   render,
+  userEvent,
   screen,
-  fireEvent,
   mockedStore,
   cleanup,
   clearStoreActions,
-  act,
 } from 'uiSrc/utils/test-utils'
 import { updateUserConfigSettings } from 'uiSrc/slices/user/user-settings'
 import ConsentsNotifications from './ConsentsNotifications'
@@ -85,11 +84,8 @@ describe('ConsentsNotifications', () => {
     it('option change should call "updateUserConfigSettingsAction"', async () => {
       render(<ConsentsNotifications />)
 
-      await act(() => {
-        screen.getAllByTestId(/switch-option/).forEach(async (el) => {
-          fireEvent.click(el)
-        })
-      })
+      const elements = screen.getAllByTestId(/switch-option/)
+      await Promise.all(elements.map((el) => userEvent.click(el)))
 
       const expectedActions = [{}].fill(updateUserConfigSettings(), 0)
       expect(

redisinsight/ui/src/components/consents-settings/ConsentsPrivacy/ConsentsPrivacy.spec.tsx

@@ -2,12 +2,11 @@ import React from 'react'
 import { cloneDeep } from 'lodash'
 import {
   render,
+  userEvent,
   screen,
-  fireEvent,
   mockedStore,
   cleanup,
   clearStoreActions,
-  act,
 } from 'uiSrc/utils/test-utils'
 import { updateUserConfigSettings } from 'uiSrc/slices/user/user-settings'
 import ConsentsPrivacy from './ConsentsPrivacy'
@@ -85,11 +84,8 @@ describe('ConsentsPrivacy', () => {
     it('option change should call "updateUserConfigSettingsAction"', async () => {
       render(<ConsentsPrivacy />)
 
-      await act(() => {
-        screen.getAllByTestId(/switch-option/).forEach(async (el) => {
-          fireEvent.click(el)
-        })
-      })
+      const elements = screen.getAllByTestId(/switch-option/)
+      await Promise.all(elements.map((el) => userEvent.click(el)))
 
       const expectedActions = [updateUserConfigSettings()]
       expect(

redisinsight/ui/src/components/consents-settings/ConsentsSettings.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { cloneDeep } from 'lodash'
 import {
+  userEvent,
   render,
   screen,
-  fireEvent,
   mockedStore,
   cleanup,
 } from 'uiSrc/utils/test-utils'
@@ -85,11 +85,10 @@ describe('ConsentsSettings', () => {
     expect(screen.getByTestId(BTN_SUBMIT)).toBeDisabled()
   })
 
-  it('should be able to submit with required options with true value', () => {
+  it('should be able to submit with required options with true value', async () => {
     render(<ConsentsSettings />)
-    screen.getAllByTestId(/switch-option/).forEach((el) => {
-      fireEvent.click(el)
-    })
+    const elements = screen.getAllByTestId(/switch-option/)
+    await Promise.all(elements.map((el) => userEvent.click(el)))
     expect(screen.getByTestId(BTN_SUBMIT)).not.toBeDisabled()
   })
 })