#RI-5156 - add internal link in recommendation

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/index.ts

@@ -29,6 +29,7 @@ import FeatureFlagComponent from './feature-flag-component'
 import AutoRefresh from './auto-refresh'
 import { ModuleNotLoaded, FilterNotAvailable } from './messages'
 import RdiInstanceHeader from './rdi-instance-header'
+import InternalLink from './internal-link'
 
 export { FullScreen } from './full-screen'
 
@@ -71,4 +72,5 @@ export {
   FilterNotAvailable,
   AutoRefresh,
   RdiInstanceHeader,
+  InternalLink,
 }

redisinsight/ui/src/components/internal-link/InternalLink.spec.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import reactRouterDom from 'react-router-dom'
+import { instance, mock } from 'ts-mockito'
+import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+
+import InternalLink, { Props } from './InternalLink'
+
+const mockedProps = mock<Props>()
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: jest.fn,
+  }),
+}))
+
+describe('InternalLink', () => {
+  it('should render', () => {
+    expect(render(<InternalLink {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should call history push with proper path', () => {
+    const pushMock = jest.fn()
+    reactRouterDom.useHistory = jest.fn().mockReturnValue({ push: pushMock })
+    const onClickMock = jest.fn()
+
+    render(<InternalLink {...instance(mockedProps)} path="path" onClick={onClickMock} />)
+
+    fireEvent.click(screen.getByTestId('internal-link'))
+
+    expect(pushMock).toHaveBeenCalledTimes(1)
+    expect(pushMock).toHaveBeenCalledWith('path')
+    expect(onClickMock).toBeCalled()
+  })
+})

redisinsight/ui/src/components/internal-link/InternalLink.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useHistory } from 'react-router-dom'
+import { EuiButton } from '@elastic/eui'
+
+export interface Props {
+  path: string
+  text: string
+  dataTestid?: string
+  onClick?: () => void
+}
+
+const InternalLink = (props: Props) => {
+  const { path, text, onClick, dataTestid } = props
+
+  const history = useHistory()
+
+  const handleClick = () => {
+    // can replace parameters here if needed (instanceId or rdiInstanceId)
+    history.push(path)
+    onClick?.()
+  }
+  return (
+    <EuiButton
+      fill
+      color="secondary"
+      size="s"
+      onClick={handleClick}
+      data-testid={dataTestid || 'internal-link'}
+    >
+      {text}
+    </EuiButton>
+  )
+}
+
+export default InternalLink

redisinsight/ui/src/components/internal-link/index.ts

@@ -0,0 +1,3 @@
+import InternalLink from './InternalLink'
+
+export default InternalLink

redisinsight/ui/src/pages/rdi/pipeline-management/pages/job/Job.spec.tsx

@@ -176,7 +176,7 @@ describe('Job', () => {
       event: TelemetryEvent.RDI_DEDICATED_EDITOR_CANCELLED,
       eventData: {
         rdiInstanceId: 'id',
-        selectedLanguageSyntax: 'sql',
+        selectedLanguageSyntax: 'sqliteFunctions',
       }
     });
     (sendEventTelemetry as jest.Mock).mockRestore()
@@ -197,7 +197,7 @@ describe('Job', () => {
       event: TelemetryEvent.RDI_DEDICATED_EDITOR_SAVED,
       eventData: {
         rdiInstanceId: 'id',
-        selectedLanguageSyntax: 'sql',
+        selectedLanguageSyntax: 'sqliteFunctions',
       }
     });
     (sendEventTelemetry as jest.Mock).mockRestore()

redisinsight/ui/src/utils/recommendation/utils.tsx

@@ -11,7 +11,7 @@ import {
 import { SpacerSize } from '@elastic/eui/src/components/spacer/spacer'
 import cx from 'classnames'
 import { IRecommendationsStatic, IRecommendationContent } from 'uiSrc/slices/interfaces/recommendations'
-import { OAuthConnectFreeDb, OAuthSsoHandlerDialog } from 'uiSrc/components'
+import { OAuthConnectFreeDb, OAuthSsoHandlerDialog, InternalLink } from 'uiSrc/components'
 import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import CodeIcon from 'uiSrc/assets/img/code-changes.svg?react'
 import ConfigurationIcon from 'uiSrc/assets/img/configuration-changes.svg?react'
@@ -127,12 +127,21 @@ const renderContentElement = (
           external={false}
           data-testid={`link-${telemetry.telemetryName}-${idx}`}
           target="_blank"
-          href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetry.telemetryName })}
+          href={replaceVariables(value.href)}
           onClick={() => telemetry.onClickLink?.()}
         >
           {value.name}
         </EuiLink>
       )
+    case 'internal-link':
+      return (
+        <InternalLink
+          key={`${telemetry.telemetryName}-${idx}`}
+          dataTestid={`internal-link-${telemetry.telemetryName}-${idx}`}
+          path={value.path}
+          text={value.name}
+        />
+      )
     case 'link-sso':
       return (
         <OAuthSsoHandlerDialog>

redisinsight/ui/src/utils/tests/recommendation/utils.spec.tsx

@@ -105,6 +105,13 @@ const mockContent: IRecommendationContent[] = [
     type: 'link-sso',
     value: 'link-sso',
   },
+  {
+    type: 'internal-link',
+    value: {
+      path: '/some-path',
+      name: 'name',
+    },
+  },
 ]
 
 describe('renderRecommendationBadgesLegend', () => {
@@ -183,6 +190,7 @@ describe('replaceVariables', () => {
 describe('renderRecommendationContent', () => {
   it('should render content', () => {
     const renderedContent = renderRecommendationContent(mockContent, undefined, { telemetryName: mockTelemetryName })
+    // @ts-ignore
     render(renderedContent)
 
     expect(screen.queryByTestId(`paragraph-${mockTelemetryName}-0`)).toBeInTheDocument()
@@ -192,6 +200,7 @@ describe('renderRecommendationContent', () => {
     expect(screen.queryByTestId(`list-${mockTelemetryName}-4`)).toBeInTheDocument()
     expect(screen.queryByTestId(`link-${mockTelemetryName}-6`)).toBeInTheDocument()
     expect(screen.queryByTestId(`code-link-${mockTelemetryName}-7`)).toBeInTheDocument()
+    expect(screen.queryByTestId(`internal-link-${mockTelemetryName}-9`)).toBeInTheDocument()
     expect(screen.getByText('unknown')).toBeInTheDocument()
   })
 
@@ -202,9 +211,10 @@ describe('renderRecommendationContent', () => {
       null,
       { telemetryName: mockTelemetryName, onClickLink: onClickMock },
     )
+    // @ts-ignore
     const { queryByTestId } = render(renderedContent)
 
-    fireEvent.click(queryByTestId(`link-${mockTelemetryName}-6`))
+    fireEvent.click(queryByTestId(`link-${mockTelemetryName}-6`) as HTMLElement)
 
     expect(onClickMock).toBeCalled()
   })