Merge pull request #3462 from RedisInsight/fe/feature/RI-5156_rdi_tip

#RI-5156 - add internal link in recommendation

Author: AmirAllayarovSofteq

redisinsight/ui/src/components/index.ts

@@ -23,12 +23,17 @@ import ImportDatabasesDialog from './import-databases-dialog'
 import OnboardingTour from './onboarding-tour'
 import CodeBlock from './code-block'
 import ShowChildByCondition from './show-child-by-condition'
-import RecommendationVoting from './recommendation-voting'
-import RecommendationCopyComponent from './recommendation-copy-component'
 import FeatureFlagComponent from './feature-flag-component'
 import AutoRefresh from './auto-refresh'
 import { ModuleNotLoaded, FilterNotAvailable } from './messages'
 import RdiInstanceHeader from './rdi-instance-header'
+import {
+  RecommendationBody,
+  RecommendationBadges,
+  RecommendationBadgesLegend,
+  RecommendationCopyComponent,
+  RecommendationVoting,
+} from './recommendation'
 
 export { FullScreen } from './full-screen'
 
@@ -71,4 +76,7 @@ export {
   FilterNotAvailable,
   AutoRefresh,
   RdiInstanceHeader,
+  RecommendationBody,
+  RecommendationBadges,
+  RecommendationBadgesLegend,
 }

redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.spec.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { render } from 'uiSrc/utils/test-utils'
+import BadgeIcon, { Props } from './BadgeIcon'
+
+const mockedProps = mock<Props>()
+
+const icon = <div />
+
+describe('BadgeIcon', () => {
+  it('should render', () => {
+    expect(render(<BadgeIcon {...instance(mockedProps)} icon={icon} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/recommendation/badge-icon/BadgeIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { EuiToolTip, EuiFlexItem } from '@elastic/eui'
+import styles from '../styles.module.scss'
+
+export interface Props {
+  id: string
+  icon: React.ReactElement
+  name: string
+}
+const BadgeIcon = ({ id, icon, name }: Props) => (
+  <EuiFlexItem key={id} className={styles.badge} grow={false} data-testid={`recommendation-badge-${id}`}>
+    <div data-testid={id} className={styles.badgeWrapper}>
+      <EuiToolTip content={name} position="top" display="inlineBlock" anchorClassName="flex-row">
+        {icon}
+      </EuiToolTip>
+    </div>
+  </EuiFlexItem>
+)
+
+export default BadgeIcon

redisinsight/ui/src/components/recommendation/badge-icon/index.ts

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

redisinsight/ui/src/components/recommendation/constants.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import CodeIcon from 'uiSrc/assets/img/code-changes.svg?react'
+import ConfigurationIcon from 'uiSrc/assets/img/configuration-changes.svg?react'
+import UpgradeIcon from 'uiSrc/assets/img/upgrade.svg?react'
+
+import styles from './styles.module.scss'
+
+export const badgesContent = [
+  { id: 'code_changes', icon: <CodeIcon className={styles.badgeIcon} />, name: 'Code Changes' },
+  { id: 'configuration_changes', icon: <ConfigurationIcon className={styles.badgeIcon} />, name: 'Configuration Changes' },
+  { id: 'upgrade', icon: <UpgradeIcon className={styles.badgeIcon} />, name: 'Upgrade' },
+]
+
+export const utmMedium = 'recommendation'

redisinsight/ui/src/components/recommendation/content-element/ContentElement.spec.tsx

@@ -0,0 +1,133 @@
+import React from 'react'
+import { instance, mock } from 'ts-mockito'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import ContentElement, { Props } from './ContentElement'
+
+const mockedProps = mock<Props>()
+
+const mockTelemetryName = 'name'
+
+describe('ContentElement', () => {
+  it('should render', () => {
+    expect(render(<ContentElement {...instance(mockedProps)} />)).toBeTruthy()
+  })
+
+  it('should render paragraph', () => {
+    const mockContent = {
+      type: 'paragraph',
+      value: 'paragraph',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`paragraph-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render span', () => {
+    const mockContent = {
+      type: 'span',
+      value: 'span',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`span-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render code', () => {
+    const mockContent = {
+      type: 'code',
+      value: 'code',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`code-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render spacer', () => {
+    const mockContent = {
+      type: 'spacer',
+      value: 'l',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`spacer-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render link', () => {
+    const mockContent = {
+      type: 'link',
+      value: 'link',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`link-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render code link', () => {
+    const mockContent = {
+      type: 'code-link',
+      value: 'link',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`code-link-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render link-sso', () => {
+    const mockContent = {
+      type: 'link-sso',
+      value: 'link-sso',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`link-sso-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render internal-link', () => {
+    const mockContent = {
+      type: 'internal-link',
+      value: {
+        path: '/some-path',
+        name: 'name',
+      },
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`internal-link-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render list', () => {
+    const mockContent = {
+      type: 'list',
+      value: [[]],
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.queryByTestId(`list-${mockTelemetryName}-0`)).toBeInTheDocument()
+  })
+
+  it('should render unknown', () => {
+    const mockContent = {
+      type: 'unknown',
+      value: 'unknown',
+    }
+    render(<ContentElement content={mockContent} telemetryName={mockTelemetryName} idx={0} />)
+
+    expect(screen.getByText('unknown')).toBeInTheDocument()
+  })
+
+  it('click on link should call onClick', () => {
+    const onClickMock = jest.fn()
+    const mockContent = {
+      type: 'link',
+      value: 'link',
+    }
+
+    const { queryByTestId } = render(
+      <ContentElement onLinkClick={onClickMock} content={mockContent} telemetryName={mockTelemetryName} idx={0} />
+    )
+
+    fireEvent.click(queryByTestId(`link-${mockTelemetryName}-0`) as HTMLElement)
+
+    expect(onClickMock).toBeCalled()
+  })
+})

redisinsight/ui/src/components/recommendation/content-element/ContentElement.tsx

@@ -0,0 +1,173 @@
+import React from 'react'
+import { isArray } from 'lodash'
+import { EuiTextColor, EuiLink, EuiSpacer } from '@elastic/eui'
+import { SpacerSize } from '@elastic/eui/src/components/spacer/spacer'
+import cx from 'classnames'
+import { OAuthSsoHandlerDialog, OAuthConnectFreeDb } from 'uiSrc/components'
+import { getUtmExternalLink } from 'uiSrc/utils/links'
+import { replaceVariables } from 'uiSrc/utils/recommendation'
+import { IRecommendationContent } from 'uiSrc/slices/interfaces/recommendations'
+import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
+import InternalLink from '../internal-link'
+import RecommendationBody from '../recommendation-body'
+import { utmMedium } from '../constants'
+
+import styles from '../styles.module.scss'
+
+export interface Props {
+  content: IRecommendationContent
+  telemetryName: string
+  params?: any
+  onLinkClick?: () => void
+  insights?: boolean
+  idx: number
+}
+
+const ContentElement = (props: Props) => {
+  const { content = {}, params, onLinkClick, telemetryName, insights, idx } = props
+  const { type, value, parameter } = content
+
+  const replacedValue = replaceVariables(value, parameter, params)
+
+  switch (type) {
+    case 'paragraph':
+      return (
+        <EuiTextColor
+          data-testid={`paragraph-${telemetryName}-${idx}`}
+          key={`${telemetryName}-${idx}`}
+          component="div"
+          className={cx(styles.text, { [styles.insights]: insights })}
+          color="subdued"
+        >
+          {value}
+        </EuiTextColor>
+      )
+    case 'code':
+      return (
+        <EuiTextColor
+          data-testid={`code-${telemetryName}-${idx}`}
+          className={cx(styles.code, { [styles.insights]: insights })}
+          key={`${telemetryName}-${idx}`}
+          color="subdued"
+        >
+          <code className={cx(styles.span, styles.text)}>
+            {value}
+          </code>
+        </EuiTextColor>
+      )
+    case 'span':
+      return (
+        <EuiTextColor
+          data-testid={`span-${telemetryName}-${idx}`}
+          key={`${telemetryName}-${idx}`}
+          color="subdued"
+          className={cx(styles.span, styles.text, { [styles.insights]: insights })}
+        >
+          {value}
+        </EuiTextColor>
+      )
+    case 'link':
+      return (
+        <EuiLink
+          key={`${telemetryName}-${idx}`}
+          external={false}
+          data-testid={`link-${telemetryName}-${idx}`}
+          target="_blank"
+          href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
+          onClick={() => onLinkClick?.()}
+        >
+          {value.name}
+        </EuiLink>
+      )
+    case 'link-sso':
+      return (
+        <OAuthSsoHandlerDialog>
+          {(ssoCloudHandlerClick) => (
+            <EuiLink
+              key={`${telemetryName}-${idx}`}
+              external={false}
+              data-testid={`link-sso-${telemetryName}-${idx}`}
+              target="_blank"
+              onClick={(e) => {
+                ssoCloudHandlerClick?.(e, {
+                  source: telemetryName as OAuthSocialSource,
+                  action: OAuthSocialAction.Create
+                })
+              }}
+              href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
+            >
+              {value.name}
+            </EuiLink>
+          )}
+        </OAuthSsoHandlerDialog>
+      )
+    case 'connect-btn':
+      return (
+        <OAuthConnectFreeDb source={telemetryName as OAuthSocialSource} />
+      )
+    case 'code-link':
+      return (
+        <EuiLink
+          key={`${telemetryName}-${idx}`}
+          external={false}
+          data-testid={`code-link-${telemetryName}-${idx}`}
+          target="_blank"
+          href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
+        >
+          <EuiTextColor
+            className={cx(styles.code, { [styles.insights]: insights })}
+            color="subdued"
+          >
+            <code className={cx(styles.span, styles.text)}>
+              {value.name}
+            </code>
+          </EuiTextColor>
+        </EuiLink>
+      )
+    case 'spacer':
+      return (
+        <EuiSpacer
+          data-testid={`spacer-${telemetryName}-${idx}`}
+          key={`${telemetryName}-${idx}`}
+          size={value as SpacerSize}
+        />
+      )
+    case 'list':
+      return (
+        <ul
+          className={styles.list}
+          data-testid={`list-${telemetryName}-${idx}`}
+          key={`${telemetryName}-${idx}`}
+        >
+          {isArray(value) && value.map((listElement: IRecommendationContent[], idx: number) => (
+            <li
+              className={cx(styles.listItem, { [styles.insights]: insights })}
+              // eslint-disable-next-line react/no-array-index-key
+              key={`list-item-${idx}`}
+            >
+              <RecommendationBody
+                elements={listElement}
+                params={params}
+                telemetryName={telemetryName}
+                onLinkClick={onLinkClick}
+                insights={insights}
+              />
+            </li>
+          ))}
+        </ul>
+      )
+    case 'internal-link':
+      return (
+        <InternalLink
+          key={`${telemetryName}-${idx}`}
+          dataTestid={`internal-link-${telemetryName}-${idx}`}
+          path={replacedValue.path}
+          text={replacedValue.name}
+        />
+      )
+    default:
+      return value
+  }
+}
+
+export default ContentElement

redisinsight/ui/src/components/recommendation/content-element/index.ts

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