Merge pull request #3396 from RedisInsight/fe/feature/RI-5763

#RI-5763 - add possibility for tutorials to open current page with tu…

Author: vlad-dargel

redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.spec.tsx

@@ -4,6 +4,17 @@ import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 
 import RedisInsightLink from './RedisInsightLink'
 
+jest.mock('uiSrc/utils/routing', () => ({
+  ...jest.requireActual('uiSrc/utils/routing')
+}))
+
+Object.defineProperty(window, 'location', {
+  value: {
+    origin: 'http://localhost'
+  },
+  writable: true
+})
+
 describe('RedisInsightLink', () => {
   it('should render', () => {
     expect(render(<RedisInsightLink url="/" text="label" />)).toBeTruthy()
@@ -13,11 +24,10 @@ describe('RedisInsightLink', () => {
     const pushMock = jest.fn()
     reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
 
-    // getRedirectionPage is mocked and already has tests
-    render(<RedisInsightLink url="/" text="label" />)
+    render(<RedisInsightLink url="/settings" text="label" />)
 
     fireEvent.click(screen.getByTestId('redisinsight-link'))
 
-    expect(pushMock).toHaveBeenCalledWith('/')
+    expect(pushMock).toHaveBeenCalledWith('/settings')
   })
 })

redisinsight/ui/src/components/markdown/RedisInsightLink/RedisInsightLink.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
 import { EuiLink, EuiPopover } from '@elastic/eui'
-import { useHistory, useParams } from 'react-router-dom'
+import { useHistory, useLocation, useParams } from 'react-router-dom'
 import cx from 'classnames'
+import { isNull } from 'lodash'
 import { getRedirectionPage } from 'uiSrc/utils/routing'
 import DatabaseNotOpened from 'uiSrc/components/messages/database-not-opened'
 
@@ -18,22 +19,20 @@ const RedisInsightLink = (props: Props) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const { instanceId } = useParams<{ instanceId: string }>()
   const history = useHistory()
+  const location = useLocation()
 
   const handleLinkClick = (e: React.MouseEvent) => {
     e.preventDefault()
 
-    if (!instanceId) {
-      setIsPopoverOpen(true)
-      return
-    }
-
-    const href = getRedirectionPage(url, instanceId)
+    const href = getRedirectionPage(url, instanceId, location.pathname)
     if (href) {
       history.push(href)
       return
     }
 
-    history.push('/')
+    if (isNull(href)) {
+      setIsPopoverOpen(true)
+    }
   }
 
   return (

redisinsight/ui/src/services/resourcesService.ts

@@ -18,6 +18,9 @@ const resourcesService = axios.create({
   baseURL: RESOURCES_BASE_URL,
 })
 
+// TODO: it seems it's shoudn't be location.origin
+// TODO: check all cases and rename this to getResourcesUrl
+// TODO: also might be helpful create function which returns origin url
 export const getOriginUrl = () => (IS_ABSOLUTE_PATH.test(RESOURCES_BASE_URL)
   ? RESOURCES_BASE_URL
   : (window?.location?.origin || RESOURCES_BASE_URL))

redisinsight/ui/src/utils/routing.ts

@@ -2,6 +2,8 @@ import { IRoute } from 'uiSrc/constants'
 import { Maybe, Nullable } from 'uiSrc/utils'
 import DEFAULT_ROUTES from 'uiSrc/components/main-router/constants/defaultRoutes'
 
+const CURRENT_PAGE_URL_SYNTAX = '/_'
+
 export const findRouteByPathname = (routes: IRoute[], pathname: string): Maybe<IRoute> => {
   let findRoute
 
@@ -22,18 +24,27 @@ export const findRouteByPathname = (routes: IRoute[], pathname: string): Maybe<I
   return findRoute
 }
 
-export const getRedirectionPage = (pageInput: string, databaseId?: string): Nullable<string> => {
+// undefined - route was not found
+// null - route found but private
+export const getRedirectionPage = (
+  pageInput: string,
+  databaseId?: string,
+  currentPathname?: string
+): Nullable<Maybe<string>> => {
   let page = pageInput.replace(/^\//, '')
   try {
-    const pageUrl = new URL(page, window.location.origin)
-    const { pathname, searchParams } = pageUrl
+    const { pathname, searchParams } = new URL(page, window.location.origin)
+
+    if (currentPathname && pathname === CURRENT_PAGE_URL_SYNTAX) {
+      return `${currentPathname}?${searchParams.toString()}`
+    }
 
     if (searchParams.has('guidePath') || searchParams.has('tutorialId')) {
       page += '&insights=open'
     }
 
     const foundRoute = findRouteByPathname(DEFAULT_ROUTES, pathname)
-    if (!foundRoute) return null
+    if (!foundRoute) return undefined
 
     if (foundRoute.path.includes(':instanceId')) {
       if (databaseId) {
@@ -44,7 +55,7 @@ export const getRedirectionPage = (pageInput: string, databaseId?: string): Null
 
     return `/${page}`
   } catch (_e) {
-    return `/${page}`
+    return undefined
   }
 }
 

redisinsight/ui/src/utils/tests/routing.spec.ts

@@ -4,6 +4,13 @@ jest.mock('uiSrc/utils/routing', () => ({
   ...jest.requireActual('uiSrc/utils/routing')
 }))
 
+Object.defineProperty(window, 'location', {
+  value: {
+    origin: 'http://localhost'
+  },
+  writable: true
+})
+
 const databaseId = '1'
 const getRedirectionPageTests = [
   { input: ['settings'], expected: '/settings' },
@@ -12,8 +19,12 @@ const getRedirectionPageTests = [
   { input: ['/analytics/slowlog', databaseId], expected: '/1/analytics/slowlog' },
   { input: ['/analytics/slowlog'], expected: null },
   { input: ['/analytics', databaseId], expected: '/1/analytics' },
-  { input: ['/analytics/page', databaseId], expected: null },
+  { input: ['/analytics/page', databaseId], expected: undefined },
+  { input: ['/analytics'], expected: null },
+  { input: ['some-page'], expected: undefined },
   { input: ['/workbench?guidePath=introduction.md', databaseId], expected: '/1/workbench?guidePath=introduction.md&insights=open' },
+  { input: ['/_?tutorialId=tutorial'], expected: undefined },
+  { input: ['/_?tutorialId=tutorial', databaseId, `/${databaseId}/workbench`], expected: '/1/workbench?tutorialId=tutorial' },
 ]
 
 describe('getRedirectionPage', () => {

tests/e2e/helpers/constants.ts

@@ -77,7 +77,7 @@ export enum ResourcePath {
 }
 
 export enum ExploreTabs {
-    Explore  = 'Explore',
+    Tutorials  = 'Tutorials',
     Tips = 'Tips',
 }
 

tests/e2e/pageObjects/components/explore-tab.ts

@@ -38,6 +38,7 @@ export class ExploreTab {
     uploadDataBulkBtn = Selector('[data-testid=upload-data-bulk-btn]');
     uploadDataBulkApplyBtn = Selector('[data-testid=upload-data-bulk-apply-btn]');
     downloadFileBtn = Selector('[data-testid=download-redis-upload-file]');
+    tutorialLink = Selector('[data-testid=redisinsight-link]');
 
     //CSS
     cssTutorialDeleteIcon = '[data-testid^=delete-tutorial-icon-]';

tests/e2e/pageObjects/components/insights-panel.ts

@@ -37,11 +37,11 @@ export class InsightsPanel {
      * Click on Panel tab
      * @param type of the tab
      */
-    async setActiveTab(type: ExploreTabs.Explore): Promise<ExploreTab>
+    async setActiveTab(type: ExploreTabs.Tutorials): Promise<ExploreTab>
     async setActiveTab(type: ExploreTabs.Tips): Promise<RecommendationsTab>
     async setActiveTab(type: ExploreTabs): Promise<ExploreTab | RecommendationsTab> {
         const activeTabName  = await this.getActiveTabName();
-        if(type === ExploreTabs.Explore) {
+        if(type === ExploreTabs.Tutorials) {
             if(type !== activeTabName) {
                 await t.click(this.exploreTab);
             }

tests/e2e/pageObjects/memory-efficiency-page.ts

@@ -21,6 +21,10 @@ export class MemoryEfficiencyPage extends InstancePage {
     selectedReport = Selector('[data-testid=select-report]');
     sortByLength = Selector('[data-testid=btn-change-table-keys]');
     recommendationsTab = Selector('[data-testid=Recommendations-tab]');
+    veryUsefulVoteBtn = Selector('[data-testid=very-useful-vote-btn]').nth(0);
+    usefulVoteBtn = Selector('[data-testid=useful-vote-btn]').nth(0);
+    notUsefulVoteBtn = Selector('[data-testid=not-useful-vote-btn]').nth(0);
+    recommendationsFeedbackBtn = Selector('[data-testid=recommendation-feedback-btn]');
     // ICONS
     reportTooltipIcon = Selector('[data-testid=db-new-reports-icon]');
     // TEXT ELEMENTS
@@ -56,10 +60,7 @@ export class MemoryEfficiencyPage extends InstancePage {
     readMoreLink = Selector('[data-testid=read-more-link]');
     workbenchLink = Selector('[data-test-subj=workbench-page-btn]');
     // CONTAINERS
-    veryUsefulVoteBtn = Selector('[data-testid=very-useful-vote-btn]').nth(0);
-    usefulVoteBtn = Selector('[data-testid=useful-vote-btn]').nth(0);
-    notUsefulVoteBtn = Selector('[data-testid=not-useful-vote-btn]').nth(0);
-    recommendationsFeedbackBtn = Selector('[data-testid=recommendation-feedback-btn]');
+    analysisPage = Selector('[data-testid=database-analysis-page]');
 
     /**
      * Get recommendation selector by name

tests/e2e/test-data/upload-tutorials/customTutorials/folder-2/vector-2.md

@@ -1 +1,13 @@
-In very broad terms probabilistic data structures (PDS) allow us to get to a "close enough" result in a much shorter time and by using significantly less memory.
+In very broad terms probabilistic data structures (PDS) allow us to get to a "close enough" result in a much shorter time and by using significantly less memory.
+
+[linkTheSamePage](redisinsight:_?tutorialId=ds-json-create)
+
+[link2AnalyticsPageWithTutorial](redisinsight:analytics/database-analysis?tutorialId=ds-json-intro)
+
+[link3InvalidPage](redisinsight:invalidPage?tutorialId=ds-json-intro)
+
+[link4InvalidTutorial](redisinsight:invalidPage?tutorialId=invalid-tutorial)
+
+[link5JustAnalyticsPage](redisinsight:analytics/database-analysis)
+
+[link6JustTheSamePage](redisinsight:_)