#RI-5763 - add possibility for tutorials to open current page with tutorial id

Author: rsergeenko

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

@@ -4,6 +4,18 @@ 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',
+    pathname: 'instanceId/workbench'
+  },
+  writable: true
+})
+
 describe('RedisInsightLink', () => {
   it('should render', () => {
     expect(render(<RedisInsightLink url="/" text="label" />)).toBeTruthy()
@@ -13,11 +25,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

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import { EuiLink, EuiPopover } from '@elastic/eui'
 import { useHistory, 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'
 
@@ -22,18 +23,15 @@ const RedisInsightLink = (props: Props) => {
   const handleLinkClick = (e: React.MouseEvent) => {
     e.preventDefault()
 
-    if (!instanceId) {
-      setIsPopoverOpen(true)
-      return
-    }
-
     const href = getRedirectionPage(url, instanceId)
     if (href) {
       history.push(href)
       return
     }
 
-    history.push('/')
+    if (isNull(href)) {
+      setIsPopoverOpen(true)
+    }
   }
 
   return (

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,24 @@ 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): Nullable<Maybe<string>> => {
   let page = pageInput.replace(/^\//, '')
   try {
     const pageUrl = new URL(page, window.location.origin)
     const { pathname, searchParams } = pageUrl
 
+    if (pathname === CURRENT_PAGE_URL_SYNTAX) {
+      return `${window.location.pathname}?${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 +52,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,14 @@ jest.mock('uiSrc/utils/routing', () => ({
   ...jest.requireActual('uiSrc/utils/routing')
 }))
 
+Object.defineProperty(window, 'location', {
+  value: {
+    origin: 'http://localhost',
+    pathname: 'instanceId/workbench'
+  },
+  writable: true
+})
+
 const databaseId = '1'
 const getRedirectionPageTests = [
   { input: ['settings'], expected: '/settings' },
@@ -12,8 +20,11 @@ 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: 'instanceId/workbench?tutorialId=tutorial' },
 ]
 
 describe('getRedirectionPage', () => {