diff --git a/redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.test.tsx b/redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.test.tsx index 70cab2e56d..5bbdb03057 100644 --- a/redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.test.tsx +++ b/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), ] diff --git a/redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.tsx b/redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.tsx index e5296a059b..99de2c9993 100644 --- a/redisinsight/ui/src/components/database-side-panels/DatabaseSidePanels.tsx +++ b/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]) diff --git a/redisinsight/ui/src/services/capability.ts b/redisinsight/ui/src/services/capability.ts index 393bb6b21c..41a3d76ea1 100644 --- a/redisinsight/ui/src/services/capability.ts +++ b/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(() => {