Merge pull request #1698 from RedisInsight/fe/feature/RI-4067_onboard-new-users

#RI-4067 - onboard new users

Author: nmammadli

redisinsight/ui/src/assets/img/onboarding-emoji.svg

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { EuiTab, EuiTabs } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useParams, useHistory } from 'react-router-dom'
@@ -9,17 +9,27 @@ import { analyticsSettingsSelector, setAnalyticsViewTab } from 'uiSrc/slices/ana
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 
+import { appFeatureOnboardingSelector, setOnboardNextStep } from 'uiSrc/slices/app/features'
+import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
+import { OnboardingSteps } from 'uiSrc/constants/onboarding'
 import { analyticsViewTabs } from './constants'
 
 const AnalyticsTabs = () => {
   const { viewTab } = useSelector(analyticsSettingsSelector)
   const { connectionType } = useSelector(connectedInstanceSelector)
+  const { currentStep } = useSelector(appFeatureOnboardingSelector)
   const history = useHistory()
 
   const { instanceId } = useParams<{ instanceId: string }>()
 
   const dispatch = useDispatch()
 
+  useEffect(() => {
+    if (connectionType !== ConnectionType.Cluster && currentStep === OnboardingSteps.AnalyticsOverview) {
+      dispatch(setOnboardNextStep())
+    }
+  }, [])
+
   const onSelectedTabChanged = (id: AnalyticsViewTab) => {
     if (id === AnalyticsViewTab.ClusterDetails) {
       history.push(Pages.clusterDetails(instanceId))
@@ -38,15 +48,20 @@ const AnalyticsTabs = () => {
       ? [...analyticsViewTabs]
       : [...analyticsViewTabs].filter((tab) => tab.id !== AnalyticsViewTab.ClusterDetails)
 
-    return filteredAnalyticsViewTabs.map(({ id, label }) => (
-      <EuiTab
-        isSelected={viewTab === id}
-        onClick={() => onSelectedTabChanged(id)}
-        key={id}
-        data-testid={`analytics-tab-${id}`}
-      >
-        {label}
-      </EuiTab>
+    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])
 

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

@@ -2,14 +2,17 @@ import React, { ReactNode } from 'react'
 import { useSelector } from 'react-redux'
 
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
-import { appFeatureHighlightingSelector } from 'uiSrc/slices/app/features-highlighting'
+import { appFeatureHighlightingSelector } from 'uiSrc/slices/app/features'
 import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
 import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
 import { getHighlightingFeatures } from 'uiSrc/utils/highlighting'
+import { OnboardingTourOptions } from 'uiSrc/components/onboarding-tour'
+import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 
 interface AnalyticsTabs {
   id: AnalyticsViewTab
   label: string | ReactNode
+  onboard?: OnboardingTourOptions
 }
 
 const DatabaseAnalyticsTab = () => {
@@ -36,13 +39,16 @@ export const analyticsViewTabs: AnalyticsTabs[] = [
   {
     id: AnalyticsViewTab.ClusterDetails,
     label: 'Overview',
+    onboard: ONBOARDING_FEATURES.ANALYTICS_OVERVIEW
   },
   {
     id: AnalyticsViewTab.DatabaseAnalysis,
     label: <DatabaseAnalyticsTab />,
+    onboard: ONBOARDING_FEATURES.ANALYTICS_DATABASE_ANALYSIS
   },
   {
     id: AnalyticsViewTab.SlowLog,
     label: 'Slow Log',
+    onboard: ONBOARDING_FEATURES.ANALYTICS_SLOW_LOG
   },
 ]

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

@@ -23,6 +23,8 @@ import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { outputSelector, resetOutputLoading } from 'uiSrc/slices/cli/cli-output'
 import { getDbIndex } from 'uiSrc/utils'
+import { OnboardingTour } from 'uiSrc/components'
+import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 
 import styles from './styles.module.scss'
 
@@ -81,7 +83,13 @@ const CliHeader = () => {
       >
         <EuiFlexItem grow={false} className={styles.title}>
           <EuiIcon type="console" size="m" />
-          <EuiText>CLI</EuiText>
+          <OnboardingTour
+            options={ONBOARDING_FEATURES.BROWSER_CLI}
+            anchorPosition="upLeft"
+            panelClassName={styles.cliOnboardPanel}
+          >
+            <EuiText>CLI</EuiText>
+          </OnboardingTour>
         </EuiFlexItem>
         <EuiFlexItem grow />
         <EuiFlexItem grow={false}>

redisinsight/ui/src/components/cli/components/cli-header/CliHeader.tsx

@@ -43,3 +43,7 @@
     }
   }
 }
+
+.cliOnboardPanel {
+  margin-top: -4px;
+}

redisinsight/ui/src/components/cli/components/cli-header/styles.module.scss

@@ -12,6 +12,8 @@ import {
 } from '@elastic/eui'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { resetCliHelperSettings, toggleCliHelper, toggleHideCliHelper } from 'uiSrc/slices/cli/cli-settings'
+import { OnboardingTour } from 'uiSrc/components'
+import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 
 import styles from './styles.module.scss'
 
@@ -51,7 +53,13 @@ const CommandHelperHeader = () => {
       >
         <EuiFlexItem grow={false} className={styles.title}>
           <EuiIcon type="documents" size="m" />
-          <EuiText style={{ lineHeight: '1rem' }}>Command Helper</EuiText>
+          <OnboardingTour
+            options={ONBOARDING_FEATURES.BROWSER_COMMAND_HELPER}
+            anchorPosition="upLeft"
+            panelClassName={styles.helperOnboardPanel}
+          >
+            <EuiText>Command Helper</EuiText>
+          </OnboardingTour>
         </EuiFlexItem>
         <EuiFlexItem grow />
         <EuiFlexItem grow={false}>

redisinsight/ui/src/components/command-helper/CommandHelperHeader/CommandHelperHeader.tsx

@@ -24,3 +24,7 @@
     }
   }
 }
+
+.helperOnboardPanel {
+  margin-top: -4px;
+}

redisinsight/ui/src/components/command-helper/CommandHelperHeader/styles.module.scss

@@ -2,7 +2,7 @@ import React from 'react'
 import { cloneDeep } from 'lodash'
 import { BuildType } from 'uiSrc/constants/env'
 import { localStorageService } from 'uiSrc/services'
-import { setFeaturesToHighlight } from 'uiSrc/slices/app/features-highlighting'
+import { setFeaturesToHighlight, setOnboarding } from 'uiSrc/slices/app/features'
 import { getNotifications } from 'uiSrc/slices/app/notifications'
 import { render, mockedStore, cleanup, MOCKED_HIGHLIGHTING_FEATURES } from 'uiSrc/utils/test-utils'
 
@@ -14,6 +14,7 @@ import {
 import { appServerInfoSelector, getServerInfo } from 'uiSrc/slices/app/info'
 import { processCliClient } from 'uiSrc/slices/cli/cli-settings'
 import { getRedisCommands } from 'uiSrc/slices/app/redis-commands'
+import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import Config from './Config'
 
 let store: typeof mockedStore
@@ -48,6 +49,8 @@ jest.mock('uiSrc/services', () => ({
   },
 }))
 
+const onboardingTotalSteps = Object.keys(ONBOARDING_FEATURES).length
+
 describe('Config', () => {
   it('should render', () => {
     render(<Config />)
@@ -169,4 +172,43 @@ describe('Config', () => {
     expect(store.getActions())
       .toEqual(expect.arrayContaining([setFeaturesToHighlight({ version: '2.0.12', features: MOCKED_HIGHLIGHTING_FEATURES })]))
   })
+
+  it('should call setOnboarding for new user', () => {
+    const userSettingsSelectorMock = jest.fn().mockReturnValue({
+      config: {
+        agreements: null,
+      }
+    })
+    const appServerInfoSelectorMock = jest.fn().mockReturnValue({
+      buildType: BuildType.Electron,
+    })
+    userSettingsSelector.mockImplementation(userSettingsSelectorMock)
+    appServerInfoSelector.mockImplementation(appServerInfoSelectorMock)
+
+    render(<Config />)
+
+    expect(store.getActions()).toEqual(expect.arrayContaining([setOnboarding(
+      { currentStep: 0, totalSteps: onboardingTotalSteps }
+    )]))
+  })
+
+  it('should call setOnboarding for existing user with not completed process', () => {
+    localStorageService.get = jest.fn().mockReturnValue(5)
+    const userSettingsSelectorMock = jest.fn().mockReturnValue({
+      config: {
+        agreements: {},
+      }
+    })
+    const appServerInfoSelectorMock = jest.fn().mockReturnValue({
+      buildType: BuildType.Electron,
+    })
+    userSettingsSelector.mockImplementation(userSettingsSelectorMock)
+    appServerInfoSelector.mockImplementation(appServerInfoSelectorMock)
+
+    render(<Config />)
+
+    expect(store.getActions()).toEqual(expect.arrayContaining([setOnboarding(
+      { currentStep: 5, totalSteps: onboardingTotalSteps }
+    )]))
+  })
 })

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

@@ -1,11 +1,12 @@
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useLocation } from 'react-router-dom'
+import { isNumber } from 'lodash'
 import { BrowserStorageItem } from 'uiSrc/constants'
 import { BuildType } from 'uiSrc/constants/env'
 import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
 import { localStorageService } from 'uiSrc/services'
-import { setFeaturesToHighlight } from 'uiSrc/slices/app/features-highlighting'
+import { setFeaturesToHighlight, setOnboarding } from 'uiSrc/slices/app/features'
 import { fetchNotificationsAction } from 'uiSrc/slices/app/notifications'
 
 import {
@@ -26,6 +27,7 @@ import { checkIsAnalyticsGranted } from 'uiSrc/telemetry/checkAnalytics'
 import { setFavicon, isDifferentConsentsExists } from 'uiSrc/utils'
 import { fetchUnsupportedCliCommandsAction } from 'uiSrc/slices/cli/cli-settings'
 import { fetchRedisCommandsInfo } from 'uiSrc/slices/app/redis-commands'
+import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import favicon from 'uiSrc/assets/favicon.ico'
 
 const SETTINGS_PAGE_PATH = '/settings'
@@ -68,6 +70,7 @@ const Config = () => {
     }
 
     featuresHighlight()
+    onboardUsers()
   }, [serverInfo, config])
 
   const featuresHighlight = () => {
@@ -96,6 +99,20 @@ const Config = () => {
     localStorageService.set(BrowserStorageItem.featuresHighlighting, data)
   }
 
+  const onboardUsers = () => {
+    if (serverInfo?.buildType === BuildType.Electron && config) {
+      const totalSteps = Object.keys(ONBOARDING_FEATURES).length
+      const userCurrentStep = localStorageService.get(BrowserStorageItem.onboardingStep)
+
+      if (!config.agreements || isNumber(userCurrentStep)) {
+        dispatch(setOnboarding({
+          currentStep: config.agreements ? userCurrentStep : 0,
+          totalSteps
+        }))
+      }
+    }
+  }
+
   const checkSettingsToShowPopup = () => {
     const specConsents = spec?.agreements
     const appliedConsents = config?.agreements

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

@@ -20,6 +20,7 @@ import MonitorWrapper from './monitor'
 import PagePlaceholder from './page-placeholder'
 import BulkActionsConfig from './bulk-actions-config'
 import ImportDatabasesDialog from './import-databases-dialog'
+import OnboardingTour from './onboarding-tour'
 
 export {
   NavigationMenu,
@@ -46,5 +47,6 @@ export {
   ShortcutsFlyout,
   PagePlaceholder,
   BulkActionsConfig,
-  ImportDatabasesDialog
+  ImportDatabasesDialog,
+  OnboardingTour
 }