Merge branch 'feature/RI-4943_rework-tutorials' into fe/feature/RI-4997-telemetry

# Conflicts:
#	redisinsight/ui/src/telemetry/events.ts

Author: mariasergeenko

redisinsight/api/src/__mocks__/custom-tutorial.ts

@@ -74,6 +74,7 @@ export const mockCustomTutorialManifestJson = {
               type: CustomTutorialManifestType.InternalLink,
               id: 'introduction',
               label: 'introduction',
+              summary: 'Introduction summary',
               args: {
                 path: '/ct-folder-1/ct-sub-folder-1/introduction.md',
               },

redisinsight/api/src/modules/custom-tutorial/models/custom-tutorial.manifest.ts

@@ -62,6 +62,13 @@ export class CustomTutorialManifest {
   @IsNotEmpty()
   label: string;
 
+  @ApiProperty({ type: String })
+  @IsOptional()
+  @Expose()
+  @IsString()
+  @IsNotEmpty()
+  summary?: string;
+
   @ApiPropertyOptional({ type: CustomTutorialManifestArgs })
   @IsOptional()
   @Expose()

redisinsight/ui/src/assets/img/icons/rocket.svg

@@ -20,6 +20,7 @@ import { getWBTutorials } from 'uiSrc/slices/workbench/wb-tutorials'
 import { getContentRecommendations } from 'uiSrc/slices/recommendations/recommendations'
 import { getGuideLinks } from 'uiSrc/slices/content/guide-links'
 import { getWBCustomTutorials } from 'uiSrc/slices/workbench/wb-custom-tutorials'
+import { setCapability } from 'uiSrc/slices/app/context'
 import Config from './Config'
 
 let store: typeof mockedStore
@@ -60,6 +61,7 @@ describe('Config', () => {
   it('should render', () => {
     render(<Config />)
     const afterRenderActions = [
+      setCapability(),
       getServerInfo(),
       processCliClient(),
       getRedisCommands(),
@@ -97,6 +99,7 @@ describe('Config', () => {
     userSettingsSelector.mockImplementation(userSettingsSelectorMock)
     render(<Config />)
     const afterRenderActions = [
+      setCapability(),
       getServerInfo(),
       processCliClient(),
       getRedisCommands(),

redisinsight/ui/src/components/config/Config.spec.tsx

@@ -29,6 +29,7 @@ import { fetchCustomTutorials } from 'uiSrc/slices/workbench/wb-custom-tutorials
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import { fetchContentRecommendations } from 'uiSrc/slices/recommendations/recommendations'
 import { fetchGuideLinksAction } from 'uiSrc/slices/content/guide-links'
+import { setCapability } from 'uiSrc/slices/app/context'
 
 import favicon from 'uiSrc/assets/favicon.ico'
 
@@ -42,6 +43,8 @@ const Config = () => {
   useEffect(() => {
     setFavicon(favicon)
 
+    dispatch(setCapability(localStorageService?.get(BrowserStorageItem.capability)))
+
     dispatch(fetchServerInfo())
     dispatch(fetchUnsupportedCliCommandsAction())
     dispatch(fetchRedisCommandsInfo())

redisinsight/ui/src/components/config/Config.tsx

@@ -7,10 +7,13 @@ import {
 } from 'uiSrc/slices/recommendations/recommendations'
 import { fireEvent, screen, cleanup, mockedStore, render } from 'uiSrc/utils/test-utils'
 import { MOCK_RECOMMENDATIONS } from 'uiSrc/constants/mocks/mock-recommendations'
-import { insightsPanelSelector } from 'uiSrc/slices/panels/insights'
-
+import { changeSelectedTab, insightsPanelSelector, resetExplorePanelSearch, setExplorePanelIsPageOpen, toggleInsightsPanel } from 'uiSrc/slices/panels/insights'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { Pages } from 'uiSrc/constants'
+import { connectedInstanceCDSelector } from 'uiSrc/slices/instances/instances'
+import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
+import { getTutorialCapability } from 'uiSrc/utils'
+import { isShowCapabilityTutorialPopover } from 'uiSrc/services'
 import DatabaseSidePanels from './DatabaseSidePanels'
 
 let store: typeof mockedStore
@@ -36,6 +39,16 @@ jest.mock('uiSrc/slices/instances/instances', () => ({
     connectionType: 'CLUSTER',
     provider: 'RE_CLOUD'
   }),
+  connectedInstanceCDSelector: jest.fn().mockReturnValue({
+    free: false,
+  }),
+}))
+
+jest.mock('uiSrc/slices/app/context', () => ({
+  ...jest.requireActual('uiSrc/slices/app/context'),
+  appContextCapability: jest.fn().mockReturnValue({
+    source: 'workbench RediSearch',
+  }),
 }))
 
 jest.mock('uiSrc/slices/recommendations/recommendations', () => ({
@@ -61,6 +74,16 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
+jest.mock('uiSrc/utils', () => ({
+  ...jest.requireActual('uiSrc/utils'),
+  getTutorialCapability: jest.fn().mockReturnValue({ tutorialPage: { id: 'id' }, telemetryName: 'searchAndQuery' }),
+}))
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  isShowCapabilityTutorialPopover: jest.fn(),
+}))
+
 /**
  * DatabaseSidePanels tests
  *
@@ -89,7 +112,7 @@ describe('DatabaseSidePanels', () => {
 
     (insightsPanelSelector as jest.Mock).mockReturnValue({
       isOpen: true,
-      tabSelected: 'recommendations'
+      tabSelected: 'tips'
     })
 
     render(<DatabaseSidePanels />)
@@ -115,7 +138,7 @@ describe('DatabaseSidePanels', () => {
   it('should render recommendations count with totalUnread > 0', () => {
     (insightsPanelSelector as jest.Mock).mockReturnValue({
       isOpen: true,
-      tabSelected: 'recommendations'
+      tabSelected: 'tips'
     });
 
     (recommendationsSelector as jest.Mock).mockImplementationOnce(() => ({
@@ -138,7 +161,7 @@ describe('DatabaseSidePanels', () => {
 
     (insightsPanelSelector as jest.Mock).mockReturnValue({
       isOpen: true,
-      tabSelected: 'recommendations'
+      tabSelected: 'tips'
     })
 
     render(<DatabaseSidePanels />)
@@ -151,11 +174,11 @@ describe('DatabaseSidePanels', () => {
         databaseId: 'instanceId',
         provider: 'RE_CLOUD',
         page: '/triggered-functions/libraries',
-        tab: 'recommendations'
+        tab: 'tips'
       },
-    })
+    });
 
-    sendEventTelemetry.mockRestore()
+    (sendEventTelemetry as jest.Mock).mockRestore()
   })
 
   it('should call proper telemetry events on change tab', () => {
@@ -166,7 +189,7 @@ describe('DatabaseSidePanels', () => {
 
     (insightsPanelSelector as jest.Mock).mockReturnValue({
       isOpen: true,
-      tabSelected: 'recommendations'
+      tabSelected: 'tips'
     })
 
     render(<DatabaseSidePanels />)
@@ -177,12 +200,12 @@ describe('DatabaseSidePanels', () => {
       event: TelemetryEvent.INSIGHTS_PANEL_TAB_CHANGED,
       eventData: {
         databaseId: 'instanceId',
-        prevTab: 'recommendations',
+        prevTab: 'tips',
         currentTab: 'explore',
       },
-    })
+    });
 
-    sendEventTelemetry.mockRestore()
+    (sendEventTelemetry as jest.Mock).mockRestore()
   })
 
   it('should call proper telemetry events on fullscreen', () => {
@@ -203,8 +226,42 @@ describe('DatabaseSidePanels', () => {
         databaseId: 'instanceId',
         state: 'open'
       },
-    })
+    });
+
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
 
-    sendEventTelemetry.mockRestore()
+  describe('capability', () => {
+    beforeEach(() => {
+      (connectedInstanceCDSelector as jest.Mock).mockReturnValueOnce({ free: true });
+      (isShowCapabilityTutorialPopover as jest.Mock).mockImplementation(() => true)
+    })
+    it('should call store actions', () => {
+      (getTutorialCapability as jest.Mock).mockImplementation(() => ({
+        tutorialPage: { args: { path: 'path' } }
+      }))
+      render(<DatabaseSidePanels />)
+
+      const expectedActions = [
+        getRecommendations(),
+        changeSelectedTab(InsightsPanelTabs.Explore),
+        toggleInsightsPanel(true),
+      ]
+      expect(store.getActions()).toEqual(expectedActions);
+
+      (getTutorialCapability as jest.Mock).mockRestore()
+    })
+    it('should call resetExplorePanelSearch if capability was not found', () => {
+      render(<DatabaseSidePanels />)
+
+      const expectedActions = [
+        getRecommendations(),
+        resetExplorePanelSearch(),
+        setExplorePanelIsPageOpen(false),
+        changeSelectedTab(InsightsPanelTabs.Explore),
+        toggleInsightsPanel(true),
+      ]
+      expect(store.getActions()).toEqual(expectedActions)
+    })
   })
 })

redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.test.tsx

@@ -2,15 +2,18 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import cx from 'classnames'
 import { EuiButtonIcon, EuiTab, EuiTabs, keys } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
+import { useHistory, useLocation, useParams } from 'react-router-dom'
 
-import { useLocation, useParams } from 'react-router-dom'
-import { changeSelectedTab, insightsPanelSelector, toggleInsightsPanel } from 'uiSrc/slices/panels/insights'
+import { changeSelectedTab, insightsPanelSelector, resetExplorePanelSearch, setExplorePanelIsPageOpen, toggleInsightsPanel } from 'uiSrc/slices/panels/insights'
 import { InsightsPanelTabs } from 'uiSrc/slices/interfaces/insights'
 import { recommendationsSelector } from 'uiSrc/slices/recommendations/recommendations'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { connectedInstanceCDSelector, connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import { FullScreen, OnboardingTour } from 'uiSrc/components'
+import { appContextCapability } from 'uiSrc/slices/app/context'
+import { getTutorialCapability } from 'uiSrc/utils'
+import { isShowCapabilityTutorialPopover } from 'uiSrc/services'
 import LiveTimeRecommendations from './panels/live-time-recommendations'
 import EnablementAreaWrapper from './panels/enablement-area'
 
@@ -25,9 +28,12 @@ const DatabaseSidePanels = (props: Props) => {
   const { isOpen, tabSelected } = useSelector(insightsPanelSelector)
   const { data: { totalUnread } } = useSelector(recommendationsSelector)
   const { provider } = useSelector(connectedInstanceSelector)
+  const { source: capabilitySource } = useSelector(appContextCapability)
+  const { free = false } = useSelector(connectedInstanceCDSelector) ?? {}
 
   const [isFullScreen, setIsFullScreen] = useState<boolean>(false)
 
+  const history = useHistory()
   const { pathname } = useLocation()
   const dispatch = useDispatch()
   const { instanceId } = useParams<{ instanceId: string }>()
@@ -52,6 +58,28 @@ const DatabaseSidePanels = (props: Props) => {
     pathnameRef.current = pathname
   }, [pathname, isFullScreen])
 
+  useEffect(() => {
+    if (!capabilitySource || !isShowCapabilityTutorialPopover(free)) {
+      return
+    }
+
+    const tutorialCapabilityPath = getTutorialCapability(capabilitySource)?.tutorialPage?.args?.path || ''
+
+    // set 'guidPath' with the path to capability tutorial
+    if (tutorialCapabilityPath) {
+      const search = new URLSearchParams(window.location.search)
+      search.set('guidePath', tutorialCapabilityPath)
+      history.push({ search: search.toString() })
+    } else {
+      // reset explore if tutorial is not found
+      dispatch(resetExplorePanelSearch())
+      dispatch(setExplorePanelIsPageOpen(false))
+    }
+
+    dispatch(changeSelectedTab(InsightsPanelTabs.Explore))
+    dispatch(toggleInsightsPanel(true))
+  }, [capabilitySource, free])
+
   const handleEscFullScreen = (event: KeyboardEvent) => {
     if (event.key === keys.ESCAPE && isFullScreen) {
       handleFullScreen()
@@ -115,7 +143,7 @@ const DatabaseSidePanels = (props: Props) => {
           anchorWrapperClassName={styles.onboardingAnchorWrapper}
           fullSize
         >
-          <span className={styles.tabName}>Explore Redis</span>
+          <span className={styles.tabName}>Explore</span>
         </OnboardingTour>
       </EuiTab>
       <EuiTab
@@ -125,7 +153,7 @@ const DatabaseSidePanels = (props: Props) => {
         data-testid="recommendations-tab"
       >
         <>
-          <span className={styles.tabName}>Redis Tips</span>
+          <span className={styles.tabName}>Tips</span>
           {!!totalUnread && (
             <div
               className={styles.tabTotalUnread}

redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.tsx

@@ -97,9 +97,12 @@ const EnablementArea = (props: Props) => {
   }, [search, tutorials, guides])
 
   useEffect(() => {
-    const manifestPath = new URLSearchParams(search).get('path')
-    const guidePath = new URLSearchParams(search).get('guidePath')
-    const contextManifestPath = new URLSearchParams(searchEAContext).get('path')
+    const searchParams = new URLSearchParams(search)
+    const searchContextParams = new URLSearchParams(searchEAContext)
+
+    const manifestPath = searchParams.get('path')
+    const guidePath = searchParams.get('guidePath')
+    const contextManifestPath = searchContextParams.get('path')
     const { manifest, prefixFolder } = getManifestByPath(manifestPath)
 
     if (guidePath || (isEmpty(manifest) && !contextManifestPath)) {