Merge pull request #2913 from RedisInsight/feature/RI-5222_show_relevant_tutorial

#RI-5222 - Show a relevant tutorial for new Cloud users

Author: mariasergeenko

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
  *
@@ -153,9 +176,9 @@ describe('DatabaseSidePanels', () => {
         page: '/triggered-functions/libraries',
         tab: 'recommendations'
       },
-    })
+    });
 
-    sendEventTelemetry.mockRestore()
+    (sendEventTelemetry as jest.Mock).mockRestore()
   })
 
   it('should call proper telemetry events on change tab', () => {
@@ -180,9 +203,9 @@ describe('DatabaseSidePanels', () => {
         prevTab: 'recommendations',
         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.mockRestore()
+    (sendEventTelemetry as jest.Mock).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()

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

@@ -1,10 +1,45 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
 import { fireEvent, render } from 'uiSrc/utils/test-utils'
+import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
+import { isShowCapabilityTutorialPopover, setCapabilityPopoverShown } from 'uiSrc/services'
+import { connectedInstanceCDSelector } from 'uiSrc/slices/instances/instances'
+import { getTutorialCapability } from 'uiSrc/utils'
+
 import InternalPage, { Props } from './InternalPage'
 
 const mockedProps = mock<Props>()
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+jest.mock('uiSrc/slices/app/context', () => ({
+  ...jest.requireActual('uiSrc/slices/app/context'),
+  appContextCapability: jest.fn().mockReturnValue({
+    source: 'workbench RediSearch',
+  }),
+}))
+
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  isShowCapabilityTutorialPopover: jest.fn(),
+  setCapabilityPopoverShown: jest.fn(),
+}))
+
+jest.mock('uiSrc/utils', () => ({
+  ...jest.requireActual('uiSrc/utils'),
+  getTutorialCapability: jest.fn().mockReturnValue({ tutorialPage: { id: 'id' }, telemetryName: 'searchAndQuery' }),
+}))
+
+jest.mock('uiSrc/slices/instances/instances', () => ({
+  ...jest.requireActual('uiSrc/slices/instances/instances'),
+  connectedInstanceCDSelector: jest.fn().mockReturnValue({
+    free: false,
+  }),
+}))
+
 /**
  * InternalPage tests
  *
@@ -39,4 +74,37 @@ describe('InternalPage', () => {
 
     expect(queryByTestId('header')).toBeInTheDocument()
   })
+
+  describe('capability', () => {
+    beforeEach(() => {
+      (connectedInstanceCDSelector as jest.Mock).mockReturnValueOnce({ free: true })
+    })
+    it('should call isShowCapabilityTutorialPopover, setCapabilityPopoverShown and getTutorialCapability', async () => {
+      const isShowCapabilityTutorialPopoverMock = jest.fn()
+      const setCapabilityPopoverShownMock = jest.fn();
+      (isShowCapabilityTutorialPopover as jest.Mock).mockImplementation(() => isShowCapabilityTutorialPopoverMock);
+      (setCapabilityPopoverShown as jest.Mock).mockImplementation(() => setCapabilityPopoverShownMock)
+
+      render(<InternalPage {...instance(mockedProps)} />)
+
+      expect(isShowCapabilityTutorialPopover).toBeCalled()
+      expect(setCapabilityPopoverShown).toBeCalled()
+      expect(getTutorialCapability).toBeCalled()
+    })
+
+    it('should send CAPABILITY_POPOVER_DISPLAYED telemetry event', () => {
+      const sendEventTelemetryMock = jest.fn();
+      (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+      render(<InternalPage {...instance(mockedProps)} />)
+
+      expect(sendEventTelemetry).toBeCalledWith({
+        event: TelemetryEvent.CAPABILITY_POPOVER_DISPLAYED,
+        eventData: {
+          databaseId: 'instanceId',
+          capabilityName: 'searchAndQuery',
+        }
+      })
+    })
+  })
 })