Merge pull request #2893 from RedisInsight/fe/feature/RI-5246-insights-opening

#RI-5246 - cover open tutorial buttons

Author: rsergeenko

redisinsight/api/src/__mocks__/custom-tutorial.ts

@@ -74,6 +74,7 @@ export const mockCustomTutorialManifestJson = {
               type: CustomTutorialManifestType.InternalLink,
               id: 'introduction',
               label: 'introduction',
+              summary: 'Introduction summary',
               args: {
                 path: '/ct-folder-1/ct-sub-folder-1/introduction.md',
               },

redisinsight/api/src/modules/custom-tutorial/models/custom-tutorial.manifest.ts

@@ -62,6 +62,13 @@ export class CustomTutorialManifest {
   @IsNotEmpty()
   label: string;
 
+  @ApiProperty({ type: String })
+  @IsOptional()
+  @Expose()
+  @IsString()
+  @IsNotEmpty()
+  summary?: string;
+
   @ApiPropertyOptional({ type: CustomTutorialManifestArgs })
   @IsOptional()
   @Expose()

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/EnablementArea.tsx

@@ -97,9 +97,12 @@ const EnablementArea = (props: Props) => {
   }, [search, tutorials, guides])
 
   useEffect(() => {
-    const manifestPath = new URLSearchParams(search).get('path')
-    const guidePath = new URLSearchParams(search).get('guidePath')
-    const contextManifestPath = new URLSearchParams(searchEAContext).get('path')
+    const searchParams = new URLSearchParams(search)
+    const searchContextParams = new URLSearchParams(searchEAContext)
+
+    const manifestPath = searchParams.get('path')
+    const guidePath = searchParams.get('guidePath')
+    const contextManifestPath = searchContextParams.get('path')
     const { manifest, prefixFolder } = getManifestByPath(manifestPath)
 
     if (guidePath || (isEmpty(manifest) && !contextManifestPath)) {

redisinsight/ui/src/components/database-side-panels/panels/live-time-recommendations/LiveTimeRecommendations.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
 import {
   EuiLink,
   EuiLoadingContent,
@@ -37,7 +37,7 @@ import PopoverRunAnalyze from './components/popover-run-analyze'
 import styles from './styles.module.scss'
 
 const LiveTimeRecommendations = () => {
-  const { id: connectedInstanceId = '', provider, connectionType } = useSelector(connectedInstanceSelector)
+  const { provider, connectionType } = useSelector(connectedInstanceSelector)
   const {
     loading,
     data: { recommendations },
@@ -48,6 +48,8 @@ const LiveTimeRecommendations = () => {
     treeViewDelimiter: delimiter = '',
   } = useSelector(appContextDbConfig)
 
+  const { instanceId } = useParams<{ instanceId: string }>()
+
   const [isShowApproveRun, setIsShowApproveRun] = useState<boolean>(false)
 
   const dispatch = useDispatch()
@@ -56,20 +58,20 @@ const LiveTimeRecommendations = () => {
   const isShowHiddenDisplayed = recommendations.filter((r) => r.hide).length > 0
 
   useEffect(() => {
-    dispatch(fetchRecommendationsAction(connectedInstanceId))
+    dispatch(fetchRecommendationsAction(instanceId))
 
     return () => {
-      dispatch(readRecommendationsAction(connectedInstanceId))
+      dispatch(readRecommendationsAction(instanceId))
     }
   }, [])
 
   const handleClickDbAnalysisLink = () => {
-    dispatch(createNewAnalysis(connectedInstanceId, delimiter))
-    history.push(Pages.databaseAnalysis(connectedInstanceId))
+    dispatch(createNewAnalysis(instanceId, delimiter))
+    history.push(Pages.databaseAnalysis(instanceId))
     sendEventTelemetry({
       event: TelemetryEvent.INSIGHTS_RECOMMENDATION_DATABASE_ANALYSIS_CLICKED,
       eventData: {
-        databaseId: connectedInstanceId,
+        databaseId: instanceId,
         total: recommendations?.length,
         provider
       },
@@ -90,7 +92,7 @@ const LiveTimeRecommendations = () => {
   }
 
   const getTelemetryData = (recommendationsData: IRecommendation[]) => ({
-    databaseId: connectedInstanceId,
+    databaseId: instanceId,
     total: recommendationsData?.length,
     list: recommendationsData?.map(({ name }) => recommendationsContent[name]?.telemetryEvent ?? name),
     provider

redisinsight/ui/src/components/database-side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.spec.tsx

@@ -4,12 +4,10 @@ import reactRouterDom from 'react-router-dom'
 import { cloneDeep } from 'lodash'
 import { fireEvent, screen, render, mockedStore, cleanup, act } from 'uiSrc/utils/test-utils'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { Pages } from 'uiSrc/constants'
 
 import { updateRecommendation } from 'uiSrc/slices/recommendations/recommendations'
 import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/instances/instancesHandlers'
 import { MOCK_RECOMMENDATIONS } from 'uiSrc/constants/mocks/mock-recommendations'
-import { openNewWindowDatabase } from 'uiSrc/utils'
 import Recommendation, { IProps } from './Recommendation'
 
 const recommendationsContent = MOCK_RECOMMENDATIONS
@@ -25,11 +23,6 @@ jest.mock('uiSrc/telemetry', () => ({
   sendEventTelemetry: jest.fn(),
 }))
 
-jest.mock('uiSrc/utils', () => ({
-  ...jest.requireActual('uiSrc/utils'),
-  openNewWindowDatabase: jest.fn(),
-}))
-
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
@@ -82,7 +75,7 @@ describe('Recommendation', () => {
     fireEvent.click(container.querySelector('[data-test-subj="searchJSON-button"]') as HTMLButtonElement)
     fireEvent.click(screen.getByTestId('searchJSON-to-tutorial-btn'))
 
-    expect(pushMock).toHaveBeenCalledWith(Pages.workbench(INSTANCE_ID_MOCK))
+    expect(pushMock).toHaveBeenCalledWith({ search: 'guidePath=' })
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.INSIGHTS_RECOMMENDATION_TUTORIAL_CLICKED,
       eventData: {
@@ -96,8 +89,8 @@ describe('Recommendation', () => {
 
   it('should properly call openNewWindowDatabase and open a new window on workbench page to specific guide', () => {
     // will be improved
-    const openNewWindowDatabaseMock = jest.fn();
-    (openNewWindowDatabase as jest.Mock).mockImplementation(() => openNewWindowDatabaseMock)
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
 
     const { container } = render(
       <Recommendation
@@ -112,8 +105,10 @@ describe('Recommendation', () => {
     fireEvent.click(container.querySelector('[data-test-subj="searchJSON-button"]') as HTMLButtonElement)
     fireEvent.click(screen.getByTestId('searchJSON-to-tutorial-btn'))
 
-    expect(openNewWindowDatabase)
-      .toHaveBeenCalledWith(`${Pages.workbench(INSTANCE_ID_MOCK)}?guidePath=quick-guides/working-with-hash.html`)
+    expect(pushMock)
+      .toHaveBeenCalledWith({
+        search: 'guidePath=quick-guides/working-with-hash.html'
+      })
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.INSIGHTS_RECOMMENDATION_TUTORIAL_CLICKED,
       eventData: {
@@ -123,13 +118,13 @@ describe('Recommendation', () => {
       }
     })
     sendEventTelemetry.mockRestore()
-    openNewWindowDatabase.mockRestore()
+    pushMock.mockRestore()
   })
 
   it('should properly push history on workbench page to specific tutorial', () => {
     // will be improved
-    const openNewWindowDatabaseMock = jest.fn();
-    (openNewWindowDatabase as jest.Mock).mockImplementation(() => openNewWindowDatabaseMock)
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
 
     const { container } = render(
       <Recommendation
@@ -144,8 +139,10 @@ describe('Recommendation', () => {
     fireEvent.click(container.querySelector('[data-test-subj="searchJSON-button"]') as HTMLButtonElement)
     fireEvent.click(screen.getByTestId('searchJSON-to-tutorial-btn'))
 
-    expect(openNewWindowDatabase)
-      .toHaveBeenCalledWith(`${Pages.workbench(INSTANCE_ID_MOCK)}?guidePath=/redis_stack/working_with_json.md`)
+    expect(pushMock)
+      .toHaveBeenCalledWith({
+        search: 'guidePath=/redis_stack/working_with_json.md'
+      })
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.INSIGHTS_RECOMMENDATION_TUTORIAL_CLICKED,
       eventData: {
@@ -155,7 +152,7 @@ describe('Recommendation', () => {
       }
     })
     sendEventTelemetry.mockRestore()
-    openNewWindowDatabase.mockRestore()
+    pushMock.mockRestore()
   })
 
   it('should render hide/unhide button', () => {

redisinsight/ui/src/components/database-side-panels/panels/live-time-recommendations/components/recommendation/Recommendation.tsx

@@ -16,9 +16,9 @@ import {
 import { isUndefined } from 'lodash'
 import cx from 'classnames'
 
-import { Nullable, Maybe, openNewWindowDatabase } from 'uiSrc/utils'
+import { Nullable, Maybe } from 'uiSrc/utils'
 import { renderRecommendationContent } from 'uiSrc/utils/recommendation/utils'
-import { Pages, Theme } from 'uiSrc/constants'
+import { Theme } from 'uiSrc/constants'
 import { RecommendationVoting, RecommendationCopyComponent } from 'uiSrc/components'
 import { Vote } from 'uiSrc/constants/recommendations'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
@@ -32,6 +32,7 @@ import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight
 import { ReactComponent as SnoozeIcon } from 'uiSrc/assets/img/icons/snooze.svg'
 import { ReactComponent as StarsIcon } from 'uiSrc/assets/img/icons/stars.svg'
 
+import { openTutorialByPath } from 'uiSrc/slices/panels/insights'
 import styles from './styles.module.scss'
 
 export interface IProps {
@@ -77,14 +78,7 @@ const Recommendation = ({
       }
     })
 
-    // dispatch(setWorkbenchEAOpened(false))
-    if (tutorial) {
-      openNewWindowDatabase(`${Pages.workbench(instanceId)}?guidePath=${tutorial}`)
-      return
-    }
-
-    // dispatch(resetExplorePanelSearchContext())
-    history.push(Pages.workbench(instanceId))
+    dispatch(openTutorialByPath(tutorial || '', history))
   }
 
   const toggleHide = (event: React.MouseEvent) => {

redisinsight/ui/src/components/explore-guides/ExploreGuides.spec.tsx

@@ -52,7 +52,9 @@ describe('ExploreGuides', () => {
     fireEvent.click(screen.getByTestId('guide-button-Search and Query'))
 
     expect(pushMock)
-      .toHaveBeenCalledWith(`${Pages.workbench(INSTANCE_ID_MOCK)}?guidePath=/quick-guides/document/introduction.md`)
+      .toHaveBeenCalledWith({
+        search: 'guidePath=/quick-guides/document/introduction.md'
+      })
   })
 
   it('should call proper history push after click on guide with tutorial', () => {
@@ -63,9 +65,9 @@ describe('ExploreGuides', () => {
 
     fireEvent.click(screen.getByTestId('guide-button-JSON'))
 
-    expect(pushMock).toHaveBeenCalledWith(
-      `${Pages.workbench(INSTANCE_ID_MOCK)}?guidePath=/quick-guides/document/working-with-json.md`
-    )
+    expect(pushMock).toHaveBeenCalledWith({
+      search: 'guidePath=/quick-guides/document/working-with-json.md'
+    })
   })
 
   it('should call proper telemetry event after click on guide', () => {

redisinsight/ui/src/components/explore-guides/ExploreGuides.tsx

@@ -3,13 +3,13 @@ import { EuiIcon, EuiText, EuiTitle, EuiSpacer } from '@elastic/eui'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useParams } from 'react-router-dom'
 import { guideLinksSelector } from 'uiSrc/slices/content/guide-links'
-import { Pages } from 'uiSrc/constants'
 
 import GUIDE_ICONS from 'uiSrc/components/explore-guides/icons'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
 import { keysSelector } from 'uiSrc/slices/browser/keys'
 
+import { openTutorialByPath } from 'uiSrc/slices/panels/insights'
 import styles from './styles.module.scss'
 
 const ExploreGuides = () => {
@@ -23,8 +23,6 @@ const ExploreGuides = () => {
   const dispatch = useDispatch()
 
   const handleLinkClick = (tutorial: string, title: string) => {
-    // dispatch(setWorkbenchEAOpened(false))
-
     sendEventTelemetry({
       event: TelemetryEvent.BROWSER_TUTORIAL_CLICKED,
       eventData: {
@@ -35,14 +33,7 @@ const ExploreGuides = () => {
       }
     })
 
-    // dispatch(setWorkbenchEAOpened(false))
-    if (tutorial) {
-      history.push(`${Pages.workbench(instanceId)}?guidePath=${tutorial}`)
-      return
-    }
-
-    // dispatch(resetExplorePanelSearchContext())
-    history.push(Pages.workbench(instanceId))
+    dispatch(openTutorialByPath(tutorial, history))
   }
 
   return (

redisinsight/ui/src/components/insights-trigger/InsightsTrigger.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import cx from 'classnames'
 import { EuiButton, EuiText, EuiToolTip } from '@elastic/eui'
 
@@ -20,13 +20,23 @@ const InsightsTrigger = () => {
   const { provider } = useSelector(connectedInstanceSelector)
 
   const dispatch = useDispatch()
-  const { pathname } = useLocation()
+  const { pathname, search } = useLocation()
   const { instanceId } = useParams<{ instanceId: string }>()
 
   const page = pathname
     .replace(instanceId, '')
     .replace(/^\//g, '')
 
+  useEffect(() => {
+    const searchParams = new URLSearchParams(search)
+    const isExploreShouldBeOpened = searchParams.get('insights') === 'open'
+
+    if (isExploreShouldBeOpened) {
+      dispatch(toggleInsightsPanel(true))
+      dispatch(changeSelectedTab(InsightsPanelTabs.Explore))
+    }
+  }, [search])
+
   const handleClickTrigger = () => {
     if (isHighlighted) {
       dispatch(resetRecommendationsHighlighting())

redisinsight/ui/src/constants/storage.ts

@@ -29,7 +29,8 @@ enum BrowserStorageItem {
   showHiddenRecommendations = 'showHiddenRecommendations',
   OAuthJobId = 'OAuthJobId',
   OAuthAgreement = 'OAuthAgreement',
-  capability = 'capability'
+  insightsPanel = 'insightsPanel',
+  capability = 'capability',
 }
 
 export default BrowserStorageItem