[RI-7069]: Replace EuiTabs with Tabs (#4625)

* RI-7069: use Tabs for HomeTabs

* RI-7069: use Tabs for InstancesNavigationPopover

* fix unit tests

* use Tabs for InsightsPanel

* Tabs for DatabaseAnalysis

* fix tests

* Tabs for AnalyticsTabs

* Tabs for ChatsWrapper

* Tabs for BulkActionsTabs

* Tabs for Panel

* Tabs for StreamTabs

* Tabs for ManualConnectionForm

* drop euiTab styles

* temp: skip manual connection tests

* fix failing tests

* update tests

* cleanup tests

* update import path

* update test selector

Author: KrumTy

redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.spec.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import reactRouterDom from 'react-router-dom'
-import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
-import { act, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import AnalyticsTabs from './AnalyticsTabs'
 
@@ -32,13 +31,7 @@ describe('AnalyticsTabs', () => {
 
     render(<AnalyticsTabs />)
 
-    await act(() => {
-      fireEvent.click(
-        screen.getByTestId(
-          `analytics-tab-${AnalyticsViewTab.DatabaseAnalysis}`,
-        ),
-      )
-    })
+    fireEvent.mouseDown(screen.getByText('Database Analysis'))
 
     expect(pushMock).toHaveBeenCalledTimes(1)
     expect(pushMock).toHaveBeenCalledWith(
@@ -51,11 +44,7 @@ describe('AnalyticsTabs', () => {
 
     render(<AnalyticsTabs />)
 
-    await act(() => {
-      fireEvent.click(
-        screen.getByTestId(`analytics-tab-${AnalyticsViewTab.SlowLog}`),
-      )
-    })
+    fireEvent.mouseDown(screen.getByText('Slow Log'))
 
     expect(pushMock).toHaveBeenCalledTimes(1)
     expect(pushMock).toHaveBeenCalledWith('/instanceId/analytics/slowlog')
@@ -69,20 +58,16 @@ describe('AnalyticsTabs', () => {
 
     render(<AnalyticsTabs />)
 
-    expect(
-      screen.getByTestId(`analytics-tab-${AnalyticsViewTab.ClusterDetails}`),
-    ).toBeInTheDocument()
+    expect(screen.getByText('Overview')).toBeInTheDocument()
   })
 
   it('should not render cluster details tab when connectionType is not Cluster', async () => {
-    const { queryByTestId } = render(<AnalyticsTabs />)
+    const { queryByText } = render(<AnalyticsTabs />)
 
-    expect(
-      queryByTestId(`analytics-tab-${AnalyticsViewTab.ClusterDetails}`),
-    ).not.toBeInTheDocument()
+    expect(queryByText('Overview')).not.toBeInTheDocument()
   })
 
-  it('should call History push with /cluster-details path when click on ClusterDetails tab ', async () => {
+  it('should call History push with /cluster-details path when click on SlowLog tab ', async () => {
     const mockConnectionType = ConnectionType.Cluster
     ;(connectedInstanceSelector as jest.Mock).mockReturnValueOnce({
       connectionType: mockConnectionType,
@@ -92,15 +77,9 @@ describe('AnalyticsTabs', () => {
 
     render(<AnalyticsTabs />)
 
-    await act(() => {
-      fireEvent.click(
-        screen.getByTestId(`analytics-tab-${AnalyticsViewTab.ClusterDetails}`),
-      )
-    })
+    fireEvent.mouseDown(screen.getByText('Slow Log'))
 
     expect(pushMock).toHaveBeenCalledTimes(1)
-    expect(pushMock).toHaveBeenCalledWith(
-      '/instanceId/analytics/cluster-details',
-    )
+    expect(pushMock).toHaveBeenCalledWith('/instanceId/analytics/slowlog')
   })
 })

redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect } from 'react'
-import { EuiTab, EuiTabs } from '@elastic/eui'
+import React, { useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams, useHistory } from 'react-router-dom'
 
@@ -18,7 +17,9 @@ import {
 import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
 import { OnboardingSteps } from 'uiSrc/constants/onboarding'
 import { useConnectionType } from 'uiSrc/components/hooks/useConnectionType'
-import { analyticsViewTabs } from './constants'
+import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
+import Tabs, { TabInfo } from 'uiSrc/components/base/layout/tabs'
+import { Text } from 'uiSrc/components/base/text'
 
 const AnalyticsTabs = () => {
   const { viewTab } = useSelector(analyticsSettingsSelector)
@@ -39,7 +40,58 @@ const AnalyticsTabs = () => {
     }
   }, [])
 
-  const onSelectedTabChanged = (id: AnalyticsViewTab) => {
+  const tabs: TabInfo[] = useMemo(() => {
+    const visibleTabs: TabInfo[] = [
+      {
+        value: AnalyticsViewTab.DatabaseAnalysis,
+        content: null,
+        label: renderOnboardingTourWithChild(
+          <Text>Database Analysis</Text>,
+          {
+            options: ONBOARDING_FEATURES?.ANALYTICS_DATABASE_ANALYSIS,
+            anchorPosition: 'downLeft',
+          },
+          viewTab === AnalyticsViewTab.DatabaseAnalysis,
+          AnalyticsViewTab.DatabaseAnalysis,
+        ),
+      },
+      {
+        value: AnalyticsViewTab.SlowLog,
+        content: null,
+        label: renderOnboardingTourWithChild(
+          <Text>Slow Log</Text>,
+          {
+            options: ONBOARDING_FEATURES?.ANALYTICS_SLOW_LOG,
+            anchorPosition: 'downLeft',
+          },
+          viewTab === AnalyticsViewTab.SlowLog,
+          AnalyticsViewTab.SlowLog,
+        ),
+      },
+    ]
+
+    if (connectionType === ConnectionType.Cluster) {
+      visibleTabs.unshift({
+        value: AnalyticsViewTab.ClusterDetails,
+        content: null,
+        label: renderOnboardingTourWithChild(
+          <Text>Overview</Text>,
+          {
+            options: ONBOARDING_FEATURES?.ANALYTICS_OVERVIEW,
+            anchorPosition: 'downLeft',
+          },
+          viewTab === AnalyticsViewTab.ClusterDetails,
+          AnalyticsViewTab.ClusterDetails,
+        ),
+      })
+    }
+
+    return visibleTabs
+  }, [viewTab, connectionType])
+
+  const handleTabChange = (id: string) => {
+    if (viewTab === id) return
+
     if (id === AnalyticsViewTab.ClusterDetails) {
       history.push(Pages.clusterDetails(instanceId))
     }
@@ -49,40 +101,16 @@ const AnalyticsTabs = () => {
     if (id === AnalyticsViewTab.DatabaseAnalysis) {
       history.push(Pages.databaseAnalysis(instanceId))
     }
-    dispatch(setAnalyticsViewTab(id))
+    dispatch(setAnalyticsViewTab(id as AnalyticsViewTab))
   }
 
-  const renderTabs = useCallback(() => {
-    const filteredAnalyticsViewTabs =
-      connectionType === ConnectionType.Cluster
-        ? [...analyticsViewTabs]
-        : [...analyticsViewTabs].filter(
-            (tab) => tab.id !== AnalyticsViewTab.ClusterDetails,
-          )
-
-    return filteredAnalyticsViewTabs.map(({ id, label, onboard }) =>
-      renderOnboardingTourWithChild(
-        <EuiTab
-          isSelected={viewTab === id}
-          onClick={() => onSelectedTabChanged(id)}
-          key={id}
-          data-testid={`analytics-tab-${id}`}
-        >
-          {label}
-        </EuiTab>,
-        { options: onboard, anchorPosition: 'downLeft' },
-        viewTab === id,
-        id,
-      ),
-    )
-  }, [viewTab, connectionType])
-
   return (
-    <>
-      <EuiTabs className="tabs-active-borders" data-test-subj="analytics-tabs">
-        {renderTabs()}
-      </EuiTabs>
-    </>
+    <Tabs
+      tabs={tabs}
+      value={viewTab}
+      onChange={handleTabChange}
+      data-testid="analytics-tabs"
+    />
   )
 }
 

redisinsight/ui/src/components/analytics-tabs/constants.tsx

@@ -0,0 +1,4 @@
+import { Tabs, TabInfo } from '@redis-ui/components'
+
+export default Tabs
+export type { TabInfo }

redisinsight/ui/src/components/base/layout/tabs/index.ts

@@ -1,14 +1,7 @@
 import React from 'react'
 import reactRouterDom from 'react-router-dom'
 import { cloneDeep } from 'lodash'
-import {
-  render,
-  screen,
-  fireEvent,
-  act,
-  cleanup,
-  mockedStore,
-} from 'uiSrc/utils/test-utils'
+import { render, screen, cleanup, mockedStore, fireEvent } from 'uiSrc/utils/test-utils'
 
 import { Pages } from 'uiSrc/constants'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -41,28 +34,36 @@ describe('HomeTabs', () => {
     expect(render(<HomeTabs />)).toBeTruthy()
   })
 
-  it('should show database instances tab active', () => {
+  it('should show database instances tab active', async () => {
     reactRouterDom.useLocation = jest
       .fn()
       .mockReturnValue({ pathname: Pages.home })
 
     render(<HomeTabs />)
 
-    expect(screen.getByTestId('home-tab-databases')).toHaveClass(
-      'euiTab-isSelected',
+    const tabs = await screen.findAllByRole('tab')
+
+    const databasesTab = tabs.find((tab) =>
+      tab.getAttribute('id')?.endsWith('trigger-databases'),
     )
+
+    expect(databasesTab).toHaveAttribute('data-state', 'active')
   })
 
-  it('should show rdi instances tab active', () => {
+  it('should show rdi instances tab active', async () => {
     reactRouterDom.useLocation = jest
       .fn()
       .mockReturnValue({ pathname: Pages.rdi })
 
     render(<HomeTabs />)
 
-    expect(screen.getByTestId('home-tab-rdi-instances')).toHaveClass(
-      'euiTab-isSelected',
+    const tabs = await screen.findAllByRole('tab')
+
+    const rdiTab = tabs.find((tab) =>
+      tab.getAttribute('id')?.endsWith('trigger-rdi-instances'),
     )
+
+    expect(rdiTab).toHaveAttribute('data-state', 'active')
   })
 
   it('should call proper history push', () => {
@@ -74,11 +75,9 @@ describe('HomeTabs', () => {
 
     render(<HomeTabs />)
 
-    act(() => {
-      fireEvent.click(screen.getByTestId('home-tab-rdi-instances'))
-    })
+    fireEvent.mouseDown(screen.getByText('Redis Data Integration'))
 
-    expect(pushMock).toBeCalledWith(Pages.rdi)
+    expect(pushMock).toHaveBeenCalledWith(Pages.rdi)
   })
 
   it('should send proper telemetry', () => {
@@ -92,9 +91,7 @@ describe('HomeTabs', () => {
 
     render(<HomeTabs />)
 
-    act(() => {
-      fireEvent.click(screen.getByTestId('home-tab-rdi-instances'))
-    })
+    fireEvent.mouseDown(screen.getByText('Redis Data Integration'))
 
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.INSTANCES_TAB_CHANGED,
@@ -114,7 +111,7 @@ describe('HomeTabs', () => {
     render(<HomeTabs />)
 
     expect(
-      screen.queryByTestId('home-tab-rdi-instances'),
+      screen.queryByText('Redis Data Integration'),
     ).not.toBeInTheDocument()
   })
 })