Merge pull request #3495 from RedisInsight/fe/feature/RI-5760_update_rdi_links

update rdi links

Author: AmirAllayarovSofteq

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

@@ -10,5 +10,3 @@ export const badgesContent = [
   { 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.tsx

@@ -8,9 +8,9 @@ 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 { UTM_MEDIUMS } from 'uiSrc/constants/links'
 import InternalLink from '../internal-link'
 import RecommendationBody from '../recommendation-body'
-import { utmMedium } from '../constants'
 
 import styles from '../styles.module.scss'
 
@@ -73,7 +73,7 @@ const ContentElement = (props: Props) => {
           external={false}
           data-testid={`link-${telemetryName}-${idx}`}
           target="_blank"
-          href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
+          href={getUtmExternalLink(value.href, { medium: UTM_MEDIUMS.Recommendation, campaign: telemetryName })}
           onClick={() => onLinkClick?.()}
         >
           {value.name}
@@ -94,7 +94,7 @@ const ContentElement = (props: Props) => {
                   action: OAuthSocialAction.Create
                 })
               }}
-              href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
+              href={getUtmExternalLink(value.href, { medium: UTM_MEDIUMS.Recommendation, campaign: telemetryName })}
             >
               {value.name}
             </EuiLink>
@@ -112,7 +112,7 @@ const ContentElement = (props: Props) => {
           external={false}
           data-testid={`code-link-${telemetryName}-${idx}`}
           target="_blank"
-          href={getUtmExternalLink(value.href, { medium: utmMedium, campaign: telemetryName })}
+          href={getUtmExternalLink(value.href, { medium: UTM_MEDIUMS.Recommendation, campaign: telemetryName })}
         >
           <EuiTextColor
             className={cx(styles.code, { [styles.insights]: insights })}

redisinsight/ui/src/constants/links.ts

@@ -12,8 +12,9 @@ export const EXTERNAL_LINKS = {
   cloudConsole: 'https://app.redislabs.com/#/databases',
   tryFree: 'https://redis.io/try-free',
   docker: 'https://redis.io/docs/install/install-stack/docker',
-  rdiQuickStart: 'https://docs.redis.com/latest/rdi/quickstart/',
-  rdiTransformation: 'https://docs.redis.com/latest/rdi/data-transformation/data-transformation-pipeline/',
+  rdiQuickStart: 'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/quick-start-guide/',
+  rdiPipeline: 'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/data-pipelines/',
+  rdiPipelineTransforms: 'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/transform-examples/',
 }
 
 export const UTM_CAMPAINGS: Record<any, string> = {
@@ -23,3 +24,9 @@ export const UTM_CAMPAINGS: Record<any, string> = {
   [CloudSsoUtmCampaign.BrowserFilter]: 'browser_filter',
   [OAuthSocialSource.EmptyDatabasesList]: 'empty_db_list',
 }
+
+export const UTM_MEDIUMS = {
+  App: 'app',
+  Rdi: 'rdi',
+  Recommendation: 'recommendation',
+}

redisinsight/ui/src/packages/redistimeseries-app/src/components/Chart/interfaces.ts

@@ -47,13 +47,12 @@ export interface ChartConfig {
 export type ChartImageExportOption = 'png' | 'svg'
 
 export interface ChartProps {
-    data: TimeSeries[]
-    chartConfig: ChartConfig
-    onRelayout: () => void
-    onDoubleClick: () => void
+  data: TimeSeries[]
+  chartConfig: ChartConfig
+  onRelayout: () => void
+  onDoubleClick: () => void
 }
 
-
 export enum PlotlyEvents {
   PLOTLY_HOVER = 'plotly_hover',
   PLOTLY_RELAYOUT = 'plotly_relayout',

redisinsight/ui/src/pages/rdi/home/empty-message/EmptyMessage.tsx

@@ -1,6 +1,8 @@
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiImage, EuiLink, EuiSpacer, EuiText } from '@elastic/eui'
 import React, { useContext } from 'react'
 
+import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links'
+import { getUtmExternalLink } from 'uiSrc/utils/links'
 import EmptyListDarkIcon from 'uiSrc/assets/img/rdi/empty_list_dark.svg'
 import EmptyListLightIcon from 'uiSrc/assets/img/rdi/empty_list_light.svg'
 import NewTabIcon from 'uiSrc/assets/img/rdi/new_tab.svg'
@@ -35,7 +37,13 @@ const EmptyMessage = ({ onAddInstanceClick }: Props) => {
             data-testid="empty-rdi-quickstart-button"
             target="_blank"
             external={false}
-            href="https://docs.redis.com/rdi-preview/rdi/quickstart/"
+            href={getUtmExternalLink(
+              EXTERNAL_LINKS.rdiQuickStart,
+              {
+                medium: UTM_MEDIUMS.Rdi,
+                campaign: 'rdi_list '
+              }
+            )}
           >
             RDI Quickstart <EuiIcon type={NewTabIcon} />
           </EuiLink>

redisinsight/ui/src/pages/rdi/pipeline-management/pages/config/Config.tsx

@@ -8,7 +8,8 @@ import { get, throttle } from 'lodash'
 
 import yaml from 'js-yaml'
 import { sendPageViewTelemetry, sendEventTelemetry, TelemetryPageView, TelemetryEvent } from 'uiSrc/telemetry'
-import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
+import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links'
+import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { rdiPipelineSelector, setChangedFile, deleteChangedFile } from 'uiSrc/slices/rdi/pipeline'
 import { FileChangeType, IPipeline, RdiPipelineTabs } from 'uiSrc/slices/interfaces'
 import MonacoYaml from 'uiSrc/components/monaco-editor/components/monaco-yaml'
@@ -110,7 +111,13 @@ const Config = () => {
             external={false}
             data-testid="rdi-pipeline-config-link"
             target="_blank"
-            href={EXTERNAL_LINKS.rdiQuickStart}
+            href={getUtmExternalLink(
+              EXTERNAL_LINKS.rdiPipeline,
+              {
+                medium: UTM_MEDIUMS.Rdi,
+                campaign: 'config_file'
+              }
+            )}
           >
             connection details
           </EuiLink>

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

@@ -68,12 +68,6 @@ describe('Job', () => {
     expect(pushMock).not.toBeCalled()
   })
 
-  it('should render proper link', () => {
-    render(<Job {...instance(mockedProps)} />)
-
-    expect(screen.getByTestId('rdi-pipeline-transformation-link')).toHaveAttribute('href', 'https://docs.redis.com/latest/rdi/data-transformation/data-transformation-pipeline/')
-  })
-
   it('should render Panel and disable dry run btn', () => {
     const { queryByTestId } = render(<Job {...instance(mockedProps)} />)
 

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

@@ -7,14 +7,15 @@ import cx from 'classnames'
 import { monaco as monacoEditor } from 'react-monaco-editor'
 
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
+import { EXTERNAL_LINKS, UTM_MEDIUMS } from 'uiSrc/constants/links'
 import { deleteChangedFile, rdiPipelineSelector, setChangedFile } from 'uiSrc/slices/rdi/pipeline'
 import { FileChangeType, IPipeline, RdiPipelineTabs } from 'uiSrc/slices/interfaces'
 import MonacoYaml from 'uiSrc/components/monaco-editor/components/monaco-yaml'
 import DryRunJobPanel from 'uiSrc/pages/rdi/pipeline-management/components/jobs-panel'
 import { DSL, KEYBOARD_SHORTCUTS } from 'uiSrc/constants'
 import TemplatePopover from 'uiSrc/pages/rdi/pipeline-management/components/template-popover'
 import { isEqualPipelineFile, Maybe } from 'uiSrc/utils'
+import { getUtmExternalLink } from 'uiSrc/utils/links'
 import { KeyboardShortcut } from 'uiSrc/components'
 
 import styles from './styles.module.scss'
@@ -179,7 +180,13 @@ const Job = (props: Props) => {
             external={false}
             data-testid="rdi-pipeline-transformation-link"
             target="_blank"
-            href={EXTERNAL_LINKS.rdiTransformation}
+            href={getUtmExternalLink(
+              EXTERNAL_LINKS.rdiPipelineTransforms,
+              {
+                medium: UTM_MEDIUMS.Rdi,
+                campaign: 'job_file'
+              }
+            )}
           >
             transformation logic
           </EuiLink>

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

@@ -104,7 +104,7 @@ describe('JobWrapper', () => {
   it('should render proper link', () => {
     render(<JobWrapper />)
 
-    expect(screen.getByTestId('rdi-pipeline-transformation-link')).toHaveAttribute('href', 'https://docs.redis.com/latest/rdi/data-transformation/data-transformation-pipeline/')
+    expect(screen.getByTestId('rdi-pipeline-transformation-link')).toHaveAttribute('href', 'https://redis.io/docs/latest/integrate/redis-data-integration/ingest/data-pipelines/transform-examples/?utm_source=redisinsight&utm_medium=rdi&utm_campaign=job_file')
   })
 
   it('should send telemetry event with proper data', () => {

redisinsight/ui/src/slices/interfaces/rdi.ts

@@ -1,5 +1,4 @@
 import { Nullable } from 'uiSrc/utils'
-import { PageNames } from 'uiSrc/constants'
 import { Rdi as RdiInstanceResponse } from 'apiSrc/modules/rdi/models/rdi'
 
 // tabs for dry run job panel
@@ -10,8 +9,8 @@ export enum PipelineJobsTabs {
 
 // pipeline management page tabs
 export enum RdiPipelineTabs {
-  Config = PageNames.rdiPipelineConfig,
-  Jobs = PageNames.rdiPipelineJobs
+  Config = 'config',
+  Jobs = 'jobs'
 }
 
 export interface IRdiPipelineJob {