#RI-5345 - update capability promotion from paths to ids

Author: rsergeenko

redisinsight/ui/src/pages/home/components/capability-promotion/CapabilityPromotion.spec.tsx

@@ -6,7 +6,8 @@ import { render, screen, fireEvent, mockedStore, cleanup } from 'uiSrc/utils/tes
 import { changeSelectedTab, toggleInsightsPanel } from 'uiSrc/slices/panels/insights'
 import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
 import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
-import { capabilities } from './constants'
+import { MOCK_EXPLORE_GUIDES } from 'uiSrc/constants/mocks/mock-explore-guides'
+import { findTutorialPath } from 'uiSrc/utils'
 
 import CapabilityPromotion from './CapabilityPromotion'
 
@@ -15,6 +16,18 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
+jest.mock('uiSrc/slices/content/guide-links', () => ({
+  ...jest.requireActual('uiSrc/slices/content/guide-links'),
+  guideLinksSelector: jest.fn().mockReturnValue({
+    data: MOCK_EXPLORE_GUIDES
+  })
+}))
+
+jest.mock('uiSrc/utils', () => ({
+  ...jest.requireActual('uiSrc/utils'),
+  findTutorialPath: jest.fn(),
+}))
+
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
@@ -30,16 +43,17 @@ describe('CapabilityPromotion', () => {
   it('should render capabilities', () => {
     render(<CapabilityPromotion />)
 
-    capabilities.forEach(({ id }) => {
-      expect(screen.getByTestId(`capability-promotion-${id}`)).toBeInTheDocument()
+    MOCK_EXPLORE_GUIDES.forEach(({ tutorialId }) => {
+      expect(screen.getByTestId(`capability-promotion-${tutorialId}`)).toBeInTheDocument()
     })
   })
 
   it('should call proper actions and history push on click capability', () => {
     const pushMock = jest.fn()
-    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock });
+    (findTutorialPath as jest.Mock).mockImplementation(() => '0/1/0')
 
-    const id = capabilities[0]?.id
+    const id = MOCK_EXPLORE_GUIDES[0]?.tutorialId
     render(<CapabilityPromotion />)
 
     fireEvent.click(screen.getByTestId(`capability-promotion-${id}`))
@@ -50,16 +64,16 @@ describe('CapabilityPromotion', () => {
     ]
 
     expect(store.getActions()).toEqual(expectedActions)
-    expect(pushMock).toBeCalledWith({
-      search: `guidePath=${id}`
+    expect(pushMock).toHaveBeenCalledWith({
+      search: 'path=tutorials/0/1/0'
     })
   })
 
   it('should call proper telemetry after click capability', () => {
     const sendEventTelemetryMock = jest.fn();
     (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
 
-    const id = capabilities[0]?.id
+    const id = MOCK_EXPLORE_GUIDES[0]?.tutorialId
     render(<CapabilityPromotion />)
 
     fireEvent.click(screen.getByTestId(`capability-promotion-${id}`))

redisinsight/ui/src/pages/home/components/capability-promotion/CapabilityPromotion.tsx

@@ -2,13 +2,15 @@ import React from 'react'
 
 import { EuiIcon, EuiText, EuiTitle } from '@elastic/eui'
 import cx from 'classnames'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import ClickLearnRocketIcon from 'uiSrc/assets/img/click-learn-rocket.svg'
 
 import { openTutorialByPath } from 'uiSrc/slices/panels/insights'
 import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
-import { capabilities } from './constants'
+import { guideLinksSelector } from 'uiSrc/slices/content/guide-links'
+import GUIDE_ICONS from 'uiSrc/components/explore-guides/icons'
+import { findTutorialPath } from 'uiSrc/utils'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -18,12 +20,14 @@ export interface Props {
 
 const CapabilityPromotion = (props: Props) => {
   const { mode = 'wide', wrapperClassName } = props
+  const { data } = useSelector(guideLinksSelector)
 
   const dispatch = useDispatch()
   const history = useHistory()
 
   const onClickTutorial = (id: string) => {
-    dispatch(openTutorialByPath(id, history))
+    const tutorialPath = findTutorialPath({ id: id ?? '' })
+    dispatch(openTutorialByPath(tutorialPath ?? '', history))
 
     sendEventTelemetry({
       event: TelemetryEvent.INSIGHTS_PANEL_OPENED,
@@ -35,6 +39,10 @@ const CapabilityPromotion = (props: Props) => {
     })
   }
 
+  if (!data?.length) {
+    return null
+  }
+
   return (
     <div className={cx(styles.wrapper, mode, wrapperClassName)} data-testid="capability-promotion">
       <img
@@ -46,17 +54,23 @@ const CapabilityPromotion = (props: Props) => {
         <span>Click & Learn</span>
       </EuiTitle>
       <div className={styles.guides}>
-        {capabilities.map(({ title, id, icon }) => (
+        {data.map(({ title, tutorialId, icon }) => (
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events
           <div
-            key={id}
+            key={tutorialId}
             tabIndex={0}
             role="button"
-            onClick={() => onClickTutorial(id)}
+            onClick={() => onClickTutorial(tutorialId)}
             className={styles.guideItem}
-            data-testid={`capability-promotion-${id}`}
+            data-testid={`capability-promotion-${tutorialId}`}
           >
-            <EuiIcon type={icon} className={styles.guideIcon} />
+            {icon in GUIDE_ICONS && (
+              <EuiIcon
+                className={styles.guideIcon}
+                type={GUIDE_ICONS[icon]}
+                data-testid={`guide-icon-${icon}`}
+              />
+            )}
             <EuiText>{title}</EuiText>
           </div>
         ))}