RI-7208 replace eui collapsible nav group

redisinsight/ui/src/components/base/display/collapsible-nav-group/RICollapsibleNavGroup.tsx

@@ -0,0 +1,42 @@
+import React, { ReactNode } from 'react'
+import cx from 'classnames'
+import {
+  RiAccordion,
+  RiAccordionProps,
+} from 'uiSrc/components/base/display/accordion/RiAccordion'
+
+export type RICollapsibleNavGroupProps = Omit<
+  RiAccordionProps,
+  'collapsible' | 'content' | 'defaultOpen' | 'title' | 'label'
+> & {
+  title: ReactNode
+  children: ReactNode
+  isCollapsible?: boolean
+  className?: string
+  initialIsOpen?: boolean
+  onToggle?: (isOpen: boolean) => void
+  forceState?: 'open' | 'closed'
+}
+export const RICollapsibleNavGroup = ({
+  children,
+  title,
+  isCollapsible = true,
+  className,
+  initialIsOpen,
+  onToggle,
+  forceState,
+  open,
+  ...rest
+}: RICollapsibleNavGroupProps) => (
+  <RiAccordion
+    {...rest}
+    collapsible={isCollapsible}
+    className={cx(className, 'RI-collapsible-nav-group')}
+    defaultOpen={initialIsOpen}
+    open={forceState === 'open' || open}
+    label={title}
+    onOpenChange={onToggle}
+  >
+    <div className="RI-collapsible-nav-group-content">{children}</div>
+  </RiAccordion>
+)

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

@@ -2,3 +2,6 @@ import Loader from './loader/Loader'
 import ProgressBarLoader from './progress-bar/ProgressBarLoader'
 
 export { Loader, ProgressBarLoader }
+export { RICollapsibleNavGroup } from './collapsible-nav-group/RICollapsibleNavGroup'
+
+export type { RICollapsibleNavGroupProps } from './collapsible-nav-group/RICollapsibleNavGroup'

redisinsight/ui/src/pages/home/components/import-database/components/ResultsLog/ResultsLog.tsx

@@ -1,10 +1,11 @@
-import { EuiCollapsibleNavGroup } from '@elastic/eui'
 import cx from 'classnames'
 import React, { useState } from 'react'
 
 import { ImportDatabasesData } from 'uiSrc/slices/interfaces'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { Nullable } from 'uiSrc/utils'
+import { RICollapsibleNavGroup } from 'uiSrc/components/base/display'
+import { Col } from 'uiSrc/components/base/layout/flex'
 import TableResult from '../TableResult'
 
 import styles from './styles.module.scss'
@@ -54,12 +55,12 @@
     openedNav === name ? 'open' : 'closed'
 
   return (
-    <>
-      <EuiCollapsibleNavGroup
+    <Col gap="s">
+      <RICollapsibleNavGroup
         title={
           <CollapsibleNavTitle
             title="Fully imported"
-            length={data?.success?.length}
+            length={data?.success?.length ?? 0}
           />
         }
         className={cx(styles.collapsibleNav, ResultsStatus.Success, {
@@ -74,12 +75,12 @@
         data-testid={`success-results-${getNavGroupState(ResultsStatus.Success)}`}
       >
         <TableResult data={data?.success ?? []} />
-      </EuiCollapsibleNavGroup>
-      <EuiCollapsibleNavGroup
+      </RICollapsibleNavGroup>
+      <RICollapsibleNavGroup
         title={
           <CollapsibleNavTitle
             title="Partially imported"
-            length={data?.partial?.length}
+            length={data?.partial?.length ?? 0}
           />
         }
         className={cx(styles.collapsibleNav, ResultsStatus.Partial, {
@@ -94,12 +95,12 @@
         data-testid={`partial-results-${getNavGroupState(ResultsStatus.Partial)}`}
       >
         <TableResult data={data?.partial ?? []} />
-      </EuiCollapsibleNavGroup>
-      <EuiCollapsibleNavGroup
+      </RICollapsibleNavGroup>
+      <RICollapsibleNavGroup
         title={
           <CollapsibleNavTitle
             title="Failed to import"
-            length={data?.fail?.length}
+            length={data?.fail?.length ?? 0}
           />
         }
         className={cx(styles.collapsibleNav, ResultsStatus.Failed, {
@@ -114,8 +115,8 @@
         data-testid={`failed-results-${getNavGroupState(ResultsStatus.Failed)}`}
       >
         <TableResult data={data?.fail ?? []} />
-      </EuiCollapsibleNavGroup>
-    </>
+      </RICollapsibleNavGroup>
+    </Col>
   )
 }
 

redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-log/TestConnectionsLog.tsx

@@ -1,7 +1,7 @@
-import { EuiCollapsibleNavGroup } from '@elastic/eui'
 import cx from 'classnames'
 import React, { useState } from 'react'
 
+import { RICollapsibleNavGroup } from 'uiSrc/components/base/display'
 import { TransformGroupResult } from 'uiSrc/slices/interfaces'
 import TestConnectionsTable from 'uiSrc/pages/rdi/pipeline-management/components/test-connections-table'
 
@@ -64,8 +64,10 @@ const TestConnectionsLog = (props: Props) => {
   const getNavGroupState = (name: ResultsStatus) =>
     openedNav === name ? 'open' : 'closed'
 
+  const id = `${status}-connections-${getNavGroupState(status)}`
+
   return (
-    <EuiCollapsibleNavGroup
+    <RICollapsibleNavGroup
       title={
         <CollapsibleNavTitle
           title={navTitle}
@@ -79,10 +81,11 @@ const TestConnectionsLog = (props: Props) => {
       initialIsOpen={false}
       onToggle={(isOpen) => onToggle(statusData?.length, isOpen, status)}
       forceState={getNavGroupState(status)}
-      data-testid={`${status}-connections-${getNavGroupState(status)}`}
+      data-testid={id}
+      id={id}
     >
       <TestConnectionsTable data={statusData ?? []} />
-    </EuiCollapsibleNavGroup>
+    </RICollapsibleNavGroup>
   )
 }
 

redisinsight/ui/src/pages/rdi/pipeline-management/components/test-connections-panel/TestConnectionsPanel.spec.tsx

@@ -1,6 +1,11 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import {
+  fireEvent,
+  render,
+  screen,
+  toggleAccordion,
+} from 'uiSrc/utils/test-utils'
 import { rdiTestConnectionsSelector } from 'uiSrc/slices/rdi/testConnections'
 
 import TestConnectionsPanel, { Props } from './TestConnectionsPanel'
@@ -54,7 +59,7 @@ describe('TestConnectionsPanel', () => {
     ).toBeInTheDocument()
   })
 
-  it('should render TestConnectionsLog for source and target connections', () => {
+  it('should render TestConnectionsLog for source and target connections', async () => {
     const mockResults = {
       source: {
         success: [],
@@ -83,10 +88,12 @@ describe('TestConnectionsPanel', () => {
     render(<TestConnectionsPanel {...instance(mockedProps)} />)
 
     expect(screen.getByText('Source connections')).toBeInTheDocument()
+    await toggleAccordion('failed-connections-closed')
     expect(screen.getByText('source')).toBeInTheDocument()
     expect(screen.getByText('Something bad happened')).toBeInTheDocument()
 
     expect(screen.getByText('Target connections')).toBeInTheDocument()
+    await toggleAccordion('success-connections-closed')
     expect(screen.getByText('Test-target-connection')).toBeInTheDocument()
     expect(screen.getByText('Successful')).toBeInTheDocument()
   })

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

@@ -1,6 +1,11 @@
 import React from 'react'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { render, userEvent, screen } from 'uiSrc/utils/test-utils'
+import {
+  render,
+  userEvent,
+  screen,
+  toggleAccordion,
+} from 'uiSrc/utils/test-utils'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import SettingsPage from './SettingsPage'
 
@@ -99,10 +104,10 @@ describe('Telemetry', () => {
     sendEventTelemetry.mockReset()
 
     render(<SettingsPage />)
-
+    await toggleAccordion('accordion-workbench-settings')
     await userEvent.click(screen.getByTestId('switch-workbench-cleanup'))
 
-    expect(sendEventTelemetry).toBeCalledWith({
+    expect(sendEventTelemetry).toHaveBeenCalledWith({
       event: TelemetryEvent.SETTINGS_WORKBENCH_EDITOR_CLEAR_CHANGED,
       eventData: {
         currentValue: true,

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

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
 
-import { EuiCollapsibleNavGroup, EuiForm } from '@elastic/eui'
-
 import { useDispatch, useSelector } from 'react-redux'
 
 import { setTitle } from 'uiSrc/utils'
@@ -25,23 +23,19 @@ import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import {
   Page,
   PageBody,
-  PageHeader,
   PageContentBody,
+  PageHeader,
 } from 'uiSrc/components/base/layout/page'
 import { CallOut } from 'uiSrc/components/base/display/call-out/CallOut'
-import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { Title } from 'uiSrc/components/base/text/Title'
 import { Text } from 'uiSrc/components/base/text'
-import { Loader } from 'uiSrc/components/base/display'
-import {
-  defaultValueRender,
-  RiSelect,
-} from 'uiSrc/components/base/forms/select/RiSelect'
+import { Loader, RICollapsibleNavGroup } from 'uiSrc/components/base/display'
+import { Col } from 'uiSrc/components/base/layout/flex'
 import {
   AdvancedSettings,
   CloudSettings,
-  WorkbenchSettings,
   ThemeSettings,
+  WorkbenchSettings,
 } from './components'
 import { DateTimeFormatter } from './components/general-settings'
 import styles from './styles.module.scss'
@@ -139,53 +133,57 @@ const SettingsPage = () => {
         </PageHeader>
 
         <PageContentBody style={{ maxWidth: 792 }}>
-          <EuiCollapsibleNavGroup
-            isCollapsible
-            className={styles.accordion}
-            title="General"
-            initialIsOpen={initialOpenSection === '#general'}
-            data-test-subj="accordion-appearance"
-          >
-            {Appearance()}
-          </EuiCollapsibleNavGroup>
-          <EuiCollapsibleNavGroup
-            isCollapsible
-            className={styles.accordion}
-            title="Privacy"
-            initialIsOpen={initialOpenSection === '#privacy'}
-            data-test-subj="accordion-privacy-settings"
-          >
-            {PrivacySettings()}
-          </EuiCollapsibleNavGroup>
-          <EuiCollapsibleNavGroup
-            isCollapsible
-            className={styles.accordion}
-            title="Workbench"
-            initialIsOpen={initialOpenSection === '#workbench'}
-            data-test-subj="accordion-workbench-settings"
-          >
-            {WorkbenchSettingsGroup()}
-          </EuiCollapsibleNavGroup>
-          <FeatureFlagComponent name={FeatureFlags.cloudSso}>
-            <EuiCollapsibleNavGroup
+          <Col gap="s">
+            <RICollapsibleNavGroup
+              isCollapsible
+              className={styles.accordion}
+              title="General"
+              initialIsOpen={initialOpenSection === '#general'}
+              data-test-subj="accordion-appearance"
+            >
+              {Appearance()}
+            </RICollapsibleNavGroup>{' '}
+            <RICollapsibleNavGroup
+              isCollapsible
+              className={styles.accordion}
+              title="Privacy"
+              initialIsOpen={initialOpenSection === '#privacy'}
+              data-test-subj="accordion-privacy-settings"
+            >
+              {PrivacySettings()}
+            </RICollapsibleNavGroup>
+            <RICollapsibleNavGroup
+              isCollapsible
+              className={styles.accordion}
+              title="Workbench"
+              initialIsOpen={initialOpenSection === '#workbench'}
+              data-test-subj="accordion-workbench-settings"
+              data-testid="accordion-workbench-settings"
+              id="accordion-workbench-settings"
+            >
+              {WorkbenchSettingsGroup()}
+            </RICollapsibleNavGroup>
+            <FeatureFlagComponent name={FeatureFlags.cloudSso}>
+              <RICollapsibleNavGroup
+                isCollapsible
+                className={cx(styles.accordion, styles.accordionWithSubTitle)}
+                title="Redis Cloud"
+                initialIsOpen={initialOpenSection === '#cloud'}
+                data-test-subj="accordion-cloud-settings"
+              >
+                {CloudSettingsGroup()}
+              </RICollapsibleNavGroup>
+            </FeatureFlagComponent>
+            <RICollapsibleNavGroup
               isCollapsible
               className={cx(styles.accordion, styles.accordionWithSubTitle)}
-              title="Redis Cloud"
-              initialIsOpen={initialOpenSection === '#cloud'}
-              data-test-subj="accordion-cloud-settings"
+              title="Advanced"
+              initialIsOpen={initialOpenSection === '#advanced'}
+              data-test-subj="accordion-advanced-settings"
             >
-              {CloudSettingsGroup()}
-            </EuiCollapsibleNavGroup>
-          </FeatureFlagComponent>
-          <EuiCollapsibleNavGroup
-            isCollapsible
-            className={cx(styles.accordion, styles.accordionWithSubTitle)}
-            title="Advanced"
-            initialIsOpen={initialOpenSection === '#advanced'}
-            data-test-subj="accordion-advanced-settings"
-          >
-            {AdvancedSettingsGroup()}
-          </EuiCollapsibleNavGroup>
+              {AdvancedSettingsGroup()}
+            </RICollapsibleNavGroup>
+          </Col>
         </PageContentBody>
       </PageBody>
     </Page>

redisinsight/ui/src/pages/settings/styles.module.scss

@@ -22,7 +22,7 @@
 .accordion {
   margin-top: 0 !important;
 
-  :global(.euiCollapsibleNavGroup__children) {
+  :global(.RI-collapsible-nav-group-content) {
     padding: 24px 30px 12px !important;
   }
 }

redisinsight/ui/src/utils/test-utils.tsx

@@ -9,6 +9,7 @@ import {
   render as rtlRender,
   renderHook as rtlRenderHook,
   waitFor,
+  screen,
 } from '@testing-library/react'
 
 import { ThemeProvider } from 'styled-components'
@@ -284,6 +285,13 @@ export const waitForStack = async (timeout = 0) => {
   await waitFor(() => {}, { timeout })
 }
 
+export const toggleAccordion = async (testId: string) => {
+  const accordion = screen.getByTestId(testId)
+  expect(accordion).toBeInTheDocument()
+  const btn = accordion.querySelector('button')
+  await userEvent.click(btn!)
+}
+
 // mock useHistory
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),