Merge pull request #2932 from RedisInsight/fe/bugfixing

#RI-5311 - Popover appears after Triggers and Functions

Author: egor-zalenski

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

@@ -7,12 +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 { changeSelectedTab, insightsPanelSelector, resetExplorePanelSearch, toggleInsightsPanel } 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
@@ -78,6 +79,11 @@ jest.mock('uiSrc/utils', () => ({
   getTutorialCapability: jest.fn().mockReturnValue({ tutorialPage: { id: 'id' }, telemetryName: 'searchAndQuery' }),
 }))
 
+jest.mock('uiSrc/services', () => ({
+  ...jest.requireActual('uiSrc/services'),
+  isShowCapabilityTutorialPopover: jest.fn(),
+}))
+
 /**
  * DatabaseSidePanels tests
  *
@@ -227,7 +233,8 @@ describe('DatabaseSidePanels', () => {
 
   describe('capability', () => {
     beforeEach(() => {
-      (connectedInstanceCDSelector as jest.Mock).mockReturnValueOnce({ free: true })
+      (connectedInstanceCDSelector as jest.Mock).mockReturnValueOnce({ free: true });
+      (isShowCapabilityTutorialPopover as jest.Mock).mockImplementation(() => true)
     })
     it('should call store actions', () => {
       (getTutorialCapability as jest.Mock).mockImplementation(() => ({
@@ -250,6 +257,7 @@ describe('DatabaseSidePanels', () => {
       const expectedActions = [
         getRecommendations(),
         resetExplorePanelSearch(),
+        setExplorePanelIsPageOpen(false),
         changeSelectedTab(InsightsPanelTabs.Explore),
         toggleInsightsPanel(true),
       ]

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

@@ -4,7 +4,7 @@ import { EuiButtonIcon, EuiTab, EuiTabs, keys } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation, useParams } from 'react-router-dom'
 
-import { changeSelectedTab, insightsPanelSelector, resetExplorePanelSearch, 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'
@@ -63,19 +63,19 @@ const DatabaseSidePanels = (props: Props) => {
       return
     }
 
-    const search = new URLSearchParams(window.location.search)
     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))
     }
 
-    history.push({ search: search.toString() })
-
     dispatch(changeSelectedTab(InsightsPanelTabs.Explore))
     dispatch(toggleInsightsPanel(true))
   }, [capabilitySource, free])

redisinsight/ui/src/services/capability.ts

@@ -1,10 +1,13 @@
 import { CapabilityStorageItem } from 'uiSrc/constants/storage'
 import { getCapabilityStorageField, setCapabilityStorageField } from 'uiSrc/services'
+import { getTutorialCapability } from 'uiSrc/utils'
 
 const TIME_TO_READ_POPOVER_TEXT = 1_000
 
 export const isShowCapabilityTutorialPopover = (isFree = false) =>
-  !!isFree && !getCapabilityStorageField(CapabilityStorageItem.tutorialPopoverShown)
+  !!isFree
+  && !getCapabilityStorageField(CapabilityStorageItem.tutorialPopoverShown)
+  && getTutorialCapability(getCapabilityStorageField(CapabilityStorageItem.source))?.name
 
 export const setCapabilityPopoverShown = () => {
   setTimeout(() => {