#RI-5344 - update explore guides component

Author: rsergeenko

redisinsight/ui/src/components/explore-guides/ExploreGuides.spec.tsx

@@ -5,7 +5,6 @@ import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 import { MOCK_EXPLORE_GUIDES } from 'uiSrc/constants/mocks/mock-explore-guides'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { KeyViewType } from 'uiSrc/slices/interfaces/keys'
 import { findTutorialPath } from 'uiSrc/utils'
 
 import ExploreGuides from './ExploreGuides'
@@ -42,8 +41,8 @@ describe('ExploreGuides', () => {
   it('should render guides', () => {
     render(<ExploreGuides />)
 
-    MOCK_EXPLORE_GUIDES.forEach(({ title, icon }) => {
-      expect(screen.getByTestId(`guide-button-${title}`)).toBeInTheDocument()
+    MOCK_EXPLORE_GUIDES.forEach(({ tutorialId, icon }) => {
+      expect(screen.getByTestId(`guide-button-${tutorialId}`)).toBeInTheDocument()
       expect(screen.getByTestId(`guide-icon-${icon}`)).toBeInTheDocument()
     })
   })
@@ -55,7 +54,7 @@ describe('ExploreGuides', () => {
 
     render(<ExploreGuides />)
 
-    fireEvent.click(screen.getByTestId('guide-button-Search and Query'))
+    fireEvent.click(screen.getByTestId('guide-button-sq-intro'))
 
     expect(pushMock)
       .toHaveBeenCalledWith({
@@ -70,7 +69,7 @@ describe('ExploreGuides', () => {
 
     render(<ExploreGuides />)
 
-    fireEvent.click(screen.getByTestId('guide-button-JSON'))
+    fireEvent.click(screen.getByTestId('guide-button-ds-json-intro'))
 
     expect(pushMock).toHaveBeenCalledWith({
       search: 'path=tutorials/path'
@@ -83,15 +82,15 @@ describe('ExploreGuides', () => {
 
     render(<ExploreGuides />)
 
-    fireEvent.click(screen.getByTestId('guide-button-Search and Query'))
+    fireEvent.click(screen.getByTestId('guide-button-sq-intro'))
 
     expect(sendEventTelemetry).toBeCalledWith({
-      event: TelemetryEvent.BROWSER_TUTORIAL_CLICKED,
+      event: TelemetryEvent.INSIGHTS_PANEL_OPENED,
       eventData: {
         databaseId: INSTANCE_ID_MOCK,
-        guideName: 'Search and Query',
+        tutorialId: 'sq-intro',
         provider: 'RE_CLOUD',
-        viewType: KeyViewType.Browser,
+        source: 'empty browser'
       }
     })
   })

redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx

@@ -7,7 +7,6 @@ import { guideLinksSelector } from 'uiSrc/slices/content/guide-links'
 import GUIDE_ICONS from 'uiSrc/components/explore-guides/icons'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
-import { keysSelector } from 'uiSrc/slices/browser/keys'
 
 import { openTutorialByPath } from 'uiSrc/slices/panels/insights'
 import { findTutorialPath } from 'uiSrc/utils'
@@ -16,21 +15,20 @@ import styles from './styles.module.scss'
 const ExploreGuides = () => {
   const { data } = useSelector(guideLinksSelector)
   const { provider } = useSelector(connectedInstanceSelector)
-  const { viewType } = useSelector(keysSelector)
 
   const { instanceId = '' } = useParams<{ instanceId: string }>()
 
   const history = useHistory()
   const dispatch = useDispatch()
 
-  const handleLinkClick = (tutorialId: string, title: string) => {
+  const handleLinkClick = (tutorialId: string) => {
     sendEventTelemetry({
-      event: TelemetryEvent.BROWSER_TUTORIAL_CLICKED,
+      event: TelemetryEvent.INSIGHTS_PANEL_OPENED,
       eventData: {
         databaseId: instanceId,
-        guideName: title,
+        tutorialId,
         provider,
-        viewType
+        source: 'empty browser'
       }
     })
 
@@ -53,9 +51,9 @@ const ExploreGuides = () => {
               role="button"
               tabIndex={0}
               onKeyDown={() => {}}
-              onClick={() => handleLinkClick(tutorialId, title)}
+              onClick={() => handleLinkClick(tutorialId)}
               className={styles.btn}
-              data-testid={`guide-button-${title}`}
+              data-testid={`guide-button-${tutorialId}`}
             >
               {icon in GUIDE_ICONS && (
                 <EuiIcon

redisinsight/ui/src/constants/mocks/mock-explore-guides.ts

@@ -1,27 +1,27 @@
 export const MOCK_EXPLORE_GUIDES = [
   {
     title: 'Search and Query',
-    tutorial: '/quick-guides/document/introduction.md',
+    tutorialId: 'sq-intro',
     icon: 'search'
   },
-  {
-    title: 'Vector Similarity Search',
-    tutorial: '/quick-guides/vector-similarity-search/introduction.md',
-    icon: 'vector-similarity-search'
-  },
   {
     title: 'JSON',
-    tutorial: '/quick-guides/document/working-with-json.md',
+    tutorialId: 'ds-json-intro',
     icon: 'json'
   },
+  {
+    title: 'Triggers and functions',
+    tutorialId: 'tf-intro',
+    icon: 'triggers-and-functions'
+  },
   {
     title: 'Time Series',
-    tutorial: '/quick-guides/time-series/introduction.md',
+    tutorialId: 'ds-ts-intro',
     icon: 'time-series'
   },
   {
-    title: 'Probabilistic Data Structures',
-    tutorial: '/quick-guides/probabilistic-data-structures/introduction.md',
+    title: 'Probabilistic',
+    tutorialId: 'ds-prob-intro',
     icon: 'probabilistic-data-structures'
   }
 ]

redisinsight/ui/src/telemetry/events.ts

@@ -78,9 +78,7 @@ export enum TelemetryEvent {
   BROWSER_WORKBENCH_LINK_CLICKED = 'BROWSER_WORKBENCH_LINK_CLICKED',
   BROWSER_DATABASE_INDEX_CHANGED = 'BROWSER_DATABASE_INDEX_CHANGED',
   BROWSER_FILTER_MODE_CHANGE_FAILED = 'BROWSER_FILTER_MODE_CHANGE_FAILED',
-  BROWSER_TUTORIAL_CLICKED = 'BROWSER_TUTORIAL_CLICKED',
   LIST_VIEW_OPENED = 'LIST_VIEW_OPENED',
-  OVERVIEW_MENU_CLICKED = 'OVERVIEW_MENU_CLICKED',
 
   CLI_OPENED = 'CLI_OPENED',
   CLI_CLOSED = 'CLI_CLOSED',