Merge pull request #1834 from RedisInsight/feature/RI-4278_trigger-onboarding

Feature/ri 4278 trigger onboarding

Author: vlad-dargel

redisinsight/ui/src/assets/img/bulb.svg

@@ -3,18 +3,12 @@ import React, { useEffect, useState } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import cx from 'classnames'
 import { last } from 'lodash'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import {
   EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiIcon,
   EuiLink,
   EuiPageSideBar,
-  EuiPopover,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
   EuiToolTip
 } from '@elastic/eui'
 import HighlightedFeature from 'uiSrc/components/hightlighted-feature/HighlightedFeature'
@@ -26,10 +20,7 @@ import { getRouterLinkProps } from 'uiSrc/services'
 import { appFeaturePagesHighlightingSelector } from 'uiSrc/slices/app/features'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import {
-  appElectronInfoSelector,
   appInfoSelector,
-  setReleaseNotesViewed,
-  setShortcutsFlyoutState
 } from 'uiSrc/slices/app/info'
 import LogoSVG from 'uiSrc/assets/img/logo.svg'
 import SettingsSVG from 'uiSrc/assets/img/sidebar/settings.svg'
@@ -48,6 +39,7 @@ import { BuildType } from 'uiSrc/constants/env'
 import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 
+import HelpMenu from './components/help-menu/HelpMenu'
 import NotificationMenu from './components/notifications-center'
 
 import styles from './styles.module.scss'
@@ -72,13 +64,10 @@ interface INavigations {
 const NavigationMenu = () => {
   const history = useHistory()
   const location = useLocation()
-  const dispatch = useDispatch()
 
   const [activePage, setActivePage] = useState(Pages.home)
-  const [isHelpMenuActive, setIsHelpMenuActive] = useState(false)
 
   const { id: connectedInstanceId = '' } = useSelector(connectedInstanceSelector)
-  const { isReleaseNotesViewed } = useSelector(appElectronInfoSelector)
   const { server } = useSelector(appInfoSelector)
   const highlightedPages = useSelector(appFeaturePagesHighlightingSelector)
 
@@ -88,11 +77,6 @@ const NavigationMenu = () => {
 
   const handleGoPage = (page: string) => history.push(page)
 
-  const onKeyboardShortcutClick = () => {
-    setIsHelpMenuActive(false)
-    dispatch(setShortcutsFlyoutState(true))
-  }
-
   const isAnalyticsPath = (activePage: string) => !!ANALYTICS_ROUTES.find(
     ({ path }) => (`/${last(path.split('/'))}` === activePage)
   )
@@ -180,106 +164,6 @@ const NavigationMenu = () => {
     },
   ]
 
-  const onClickReleaseNotes = async () => {
-    if (isReleaseNotesViewed === false) {
-      dispatch(setReleaseNotesViewed(true))
-    }
-  }
-
-  const HelpMenuButton = () => (
-    <EuiButtonIcon
-      className={
-        cx(styles.navigationButton, { [styles.navigationButtonNotified]: isReleaseNotesViewed === false })
-      }
-      iconType="questionInCircle"
-      iconSize="l"
-      aria-label="Help Menu"
-      onClick={() => setIsHelpMenuActive((value) => !value)}
-      data-testid="help-menu-button"
-    />
-  )
-
-  const HelpMenu = () => (
-    <EuiPopover
-      anchorPosition="rightUp"
-      isOpen={isHelpMenuActive}
-      anchorClassName={styles.unsupportedInfo}
-      panelClassName={cx('euiToolTip', 'popoverLikeTooltip', styles.popoverWrapper)}
-      closePopover={() => setIsHelpMenuActive(false)}
-      button={(
-        <>
-          {!isHelpMenuActive && (
-          <EuiToolTip content="Help" position="right" key="help-menu">
-            {HelpMenuButton()}
-          </EuiToolTip>
-          )}
-
-          {isHelpMenuActive && HelpMenuButton()}
-        </>
-        )}
-    >
-      <div className={styles.popover} data-testid="help-center">
-        <EuiTitle size="xs">
-          <span>Help Center</span>
-        </EuiTitle>
-        <EuiSpacer size="l" />
-        <EuiFlexGroup className={styles.helpMenuItems} responsive={false}>
-          <EuiFlexItem className={styles.helpMenuItem}>
-            <EuiLink
-              external={false}
-              className={styles.helpMenuItemLink}
-              href={EXTERNAL_LINKS.githubIssues}
-              target="_blank"
-              data-testid="submit-bug-btn"
-            >
-              <EuiIcon type="flag" size="xl" />
-              <EuiSpacer size="s" />
-              <EuiText size="xs" textAlign="center" className={styles.helpMenuText}>
-                Submit a Bug or Idea
-              </EuiText>
-            </EuiLink>
-          </EuiFlexItem>
-
-          <EuiFlexItem
-            className={styles.helpMenuItem}
-            onClick={() => onKeyboardShortcutClick()}
-            data-testid="shortcuts-btn"
-          >
-            <div className={styles.helpMenuItemLink}>
-              <EuiIcon type="keyboardShortcut" size="xl" />
-              <EuiSpacer size="s" />
-              <EuiText
-                size="xs"
-                textAlign="center"
-                className={styles.helpMenuText}
-              >
-                Keyboard Shortcuts
-              </EuiText>
-            </div>
-          </EuiFlexItem>
-
-          <EuiFlexItem className={styles.helpMenuItem}>
-            <EuiLink
-              external={false}
-              className={styles.helpMenuItemLink}
-              onClick={onClickReleaseNotes}
-              href={EXTERNAL_LINKS.releaseNotes}
-              target="_blank"
-              data-testid="release-notes-btn"
-            >
-              <div className={cx({ [styles.helpMenuItemNotified]: isReleaseNotesViewed === false })}>
-                <EuiIcon type="package" size="xl" />
-              </div>
-              <EuiSpacer size="s" />
-              <EuiText size="xs" textAlign="center" className={styles.helpMenuText}>Release Notes</EuiText>
-            </EuiLink>
-          </EuiFlexItem>
-
-        </EuiFlexGroup>
-      </div>
-    </EuiPopover>
-  )
-
   return (
     <EuiPageSideBar aria-label="Main navigation" className={cx(styles.navigation, 'eui-yScroll')}>
       <div className={styles.container}>
@@ -325,7 +209,7 @@ const NavigationMenu = () => {
       </div>
       <div className={styles.bottomContainer}>
         <NotificationMenu />
-        {HelpMenu()}
+        <HelpMenu />
         {publicRoutes.map((nav) => (
           <HighlightedFeature
             key={nav.tooltipText}

redisinsight/ui/src/assets/img/github.svg

@@ -0,0 +1,86 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+import { render, screen, fireEvent, mockedStore, cleanup } from 'uiSrc/utils/test-utils'
+import { setOnboarding } from 'uiSrc/slices/app/features'
+
+import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { setReleaseNotesViewed, setShortcutsFlyoutState } from 'uiSrc/slices/app/info'
+
+import HelpMenu from './HelpMenu'
+
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+jest.mock('uiSrc/slices/app/info', () => ({
+  ...jest.requireActual('uiSrc/slices/app/info'),
+  appElectronInfoSelector: jest.fn().mockReturnValue({
+    isReleaseNotesViewed: false
+  })
+}))
+
+let store: typeof mockedStore
+beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
+})
+
+describe('HelpMenu', () => {
+  it('should render', () => {
+    expect(render(<HelpMenu />)).toBeTruthy()
+  })
+
+  it('should call proper action after click on keyboard shortcuts', () => {
+    render(<HelpMenu />)
+
+    fireEvent.click(screen.getByTestId('help-menu-button'))
+    fireEvent.click(screen.getByTestId('shortcuts-btn'))
+
+    const expectedActions = [setShortcutsFlyoutState(true)]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should call proper action after click on release notes', () => {
+    render(<HelpMenu />)
+
+    fireEvent.click(screen.getByTestId('help-menu-button'))
+    fireEvent.click(screen.getByTestId('release-notes-btn'))
+
+    const expectedActions = [setReleaseNotesViewed(true)]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should call proper action after click on reset onboarding', () => {
+    render(<HelpMenu />)
+
+    fireEvent.click(screen.getByTestId('help-menu-button'))
+    fireEvent.click(screen.getByTestId('reset-onboarding-btn'))
+
+    const expectedActions = [setOnboarding({
+      currentStep: 0,
+      totalSteps: Object.keys(ONBOARDING_FEATURES || {}).length
+    })]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
+
+  it('should call proper telemetry after click reset onboarding', () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+    render(<HelpMenu />)
+
+    fireEvent.click(screen.getByTestId('help-menu-button'))
+    fireEvent.click(screen.getByTestId('reset-onboarding-btn'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.ONBOARDING_TOUR_TRIGGERED,
+      eventData: {
+        databaseId: '-',
+      }
+    });
+
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
+})