redis · egor-zalenski · Jun 22, 2023
diff --git a/.../ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx b/.../ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx
@@ -135,12 +135,27 @@ const Recommendation = ({
     setIsLoading(false)
   }
 
+  const onRecommendationLinkClick = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.INSIGHTS_RECOMMENDATION_LINK_CLICKED,
+      eventData: {
+        databaseId: instanceId,
+        name: recommendationsContent[name]?.telemetryEvent ?? name,
+        provider
+      }
+    })
+    setIsLoading(false)
+  }
+
   const recommendationContent = () => (
     <EuiText>
       {renderRecommendationContent(
         recommendationsContent[name]?.content,
         params,
-        recommendationsContent[name]?.telemetryEvent ?? name,
+        {
+          onClickLink: onRecommendationLinkClick,
+          telemetryName: recommendationsContent[name]?.telemetryEvent ?? name,
+        },
         true
       )}
       {!!params?.keys?.length && (

diff --git a/redisinsight/ui/src/components/recommendation-voting/RecommendationVoting.tsx b/redisinsight/ui/src/components/recommendation-voting/RecommendationVoting.tsx
@@ -31,7 +31,7 @@ const RecommendationVoting = ({ vote, name, id = '', live = false, containerClas
       gutterSize={live ? 'none' : 'l'}
       data-testid="recommendation-voting"
     >
-      <EuiText size="m">Is this useful?</EuiText>
+      <EuiText size="m" className={cx({ [styles.highlightText]: live })}>Is this useful?</EuiText>
       <div className="voteContent">
         {Object.values(Vote).map((option) => (
           <VoteOption

diff --git a/redisinsight/ui/src/components/recommendation-voting/styles.module.scss b/redisinsight/ui/src/components/recommendation-voting/styles.module.scss
@@ -29,3 +29,6 @@
   }
 }
 
+div.highlightText {
+  color: var(--euiColorPrimary) !important;
+}
diff --git a/redisinsight/ui/src/telemetry/events.ts b/redisinsight/ui/src/telemetry/events.ts
@@ -237,4 +237,5 @@ export enum TelemetryEvent {
   INSIGHTS_RECOMMENDATION_SHOW_HIDDEN = 'INSIGHTS_RECOMMENDATION_SHOW_HIDDEN',
   INSIGHTS_RECOMMENDATION_DATABASE_ANALYSIS_CLICKED = 'INSIGHTS_RECOMMENDATION_DATABASE_ANALYSIS_CLICKED',
   INSIGHTS_RECOMMENDATION_KEY_COPIED = 'INSIGHTS_RECOMMENDATION_KEY_COPIED',
+  INSIGHTS_RECOMMENDATION_LINK_CLICKED = 'INSIGHTS_RECOMMENDATION_LINK_CLICKED',
 }
diff --git a/redisinsight/ui/src/utils/recommendation/utils.tsx b/redisinsight/ui/src/utils/recommendation/utils.tsx
@@ -23,6 +23,11 @@ const recommendationsContent = _content as IRecommendationsStatic
 const utmSource = 'redisinsight'
 const utmMedium = 'recommendation'
 
+interface ITelemetry {
+  telemetryName: string
+  onClickLink?: () => void
+}
+
 const badgesContent = [
   { id: 'code_changes', icon: <CodeIcon className={styles.badgeIcon} />, name: 'Code Changes' },
   { id: 'configuration_changes', icon: <ConfigurationIcon className={styles.badgeIcon} />, name: 'Configuration Changes' },
@@ -87,7 +92,7 @@ const addUtmToLink = (href: string, telemetryName: string): string => {
 const renderContentElement = (
   { type, value: jsonValue, parameter }: IRecommendationContent,
   params: any,
-  telemetryName: string,
+  telemetry: ITelemetry,
   insights: boolean,
   idx: number
 ) => {
@@ -96,8 +101,8 @@ const renderContentElement = (
     case 'paragraph':
       return (
         <EuiTextColor
-          data-testid={`paragraph-${telemetryName}-${idx}`}
-          key={`${telemetryName}-${idx}`}
+          data-testid={`paragraph-${telemetry.telemetryName}-${idx}`}
+          key={`${telemetry.telemetryName}-${idx}`}
           component="div"
           className={cx(styles.text, { [styles.insights]: insights })}
           color="subdued"
@@ -108,9 +113,9 @@ const renderContentElement = (
     case 'code':
       return (
         <EuiTextColor
-          data-testid={`code-${telemetryName}-${idx}`}
+          data-testid={`code-${telemetry.telemetryName}-${idx}`}
           className={cx(styles.code, { [styles.insights]: insights })}
-          key={`${telemetryName}-${idx}`}
+          key={`${telemetry.telemetryName}-${idx}`}
           color="subdued"
         >
           <code className={cx(styles.span, styles.text)}>
@@ -121,8 +126,8 @@ const renderContentElement = (
     case 'span':
       return (
         <EuiTextColor
-          data-testid={`span-${telemetryName}-${idx}`}
-          key={`${telemetryName}-${idx}`}
+          data-testid={`span-${telemetry.telemetryName}-${idx}`}
+          key={`${telemetry.telemetryName}-${idx}`}
           color="subdued"
           className={cx(styles.span, styles.text, { [styles.insights]: !!insights })}
         >
@@ -132,23 +137,24 @@ const renderContentElement = (
     case 'link':
       return (
         <EuiLink
-          key={`${telemetryName}-${idx}`}
+          key={`${telemetry.telemetryName}-${idx}`}
           external={false}
-          data-testid={`link-${telemetryName}-${idx}`}
+          data-testid={`link-${telemetry.telemetryName}-${idx}`}
           target="_blank"
-          href={addUtmToLink(value.href, telemetryName)}
+          href={addUtmToLink(value.href, telemetry.telemetryName)}
+          onClick={() => telemetry.onClickLink?.()}
         >
           {value.name}
         </EuiLink>
       )
     case 'code-link':
       return (
         <EuiLink
-          key={`${telemetryName}-${idx}`}
+          key={`${telemetry.telemetryName}-${idx}`}
           external={false}
-          data-testid={`code-link-${telemetryName}-${idx}`}
+          data-testid={`code-link-${telemetry.telemetryName}-${idx}`}
           target="_blank"
-          href={addUtmToLink(value.href, telemetryName)}
+          href={addUtmToLink(value.href, telemetry.telemetryName)}
         >
           <EuiTextColor
             className={cx(styles.code, { [styles.insights]: insights })}
@@ -163,21 +169,25 @@ const renderContentElement = (
     case 'spacer':
       return (
         <EuiSpacer
-          data-testid={`spacer-${telemetryName}-${idx}`}
-          key={`${telemetryName}-${idx}`}
+          data-testid={`spacer-${telemetry.telemetryName}-${idx}`}
+          key={`${telemetry.telemetryName}-${idx}`}
           size={value as SpacerSize}
         />
       )
     case 'list':
       return (
-        <ul className={styles.list} data-testid={`list-${telemetryName}-${idx}`} key={`${telemetryName}-${idx}`}>
+        <ul
+          className={styles.list}
+          data-testid={`list-${telemetry.telemetryName}-${idx}`}
+          key={`${telemetry.telemetryName}-${idx}`}
+        >
           {isArray(jsonValue) && jsonValue.map((listElement: IRecommendationContent[], idx) => (
             <li
               className={cx(styles.listItem, { [styles.insights]: insights })}
               // eslint-disable-next-line react/no-array-index-key
               key={`list-item-${listElement[0]}-${idx}`}
             >
-              {renderRecommendationContent(listElement, params, telemetryName, insights)}
+              {renderRecommendationContent(listElement, params, telemetry, insights)}
             </li>
           ))}
         </ul>
@@ -190,10 +200,10 @@ const renderContentElement = (
 const renderRecommendationContent = (
   elements: IRecommendationContent[] = [],
   params: any,
-  telemetryName: string,
+  telemetry: ITelemetry,
   insights: boolean = false
 ) => (
-  elements?.map((item, idx) => renderContentElement(item, params, telemetryName, insights, idx)))
+  elements?.map((item, idx) => renderContentElement(item, params, telemetry, insights, idx)))
 
 const sortRecommendations = (recommendations: any[]) => sortBy(recommendations, [
   ({ name }) => name !== 'searchJSON',

diff --git a/redisinsight/ui/src/utils/tests/recommendation/utils.spec.tsx b/redisinsight/ui/src/utils/tests/recommendation/utils.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from 'uiSrc/utils/test-utils'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import {
   addUtmToLink,
   sortRecommendations,
@@ -198,7 +198,7 @@ describe('replaceVariables', () => {
 
 describe('renderRecommendationContent', () => {
   it('should render content', () => {
-    const renderedContent = renderRecommendationContent(mockContent, undefined, mockTelemetryName)
+    const renderedContent = renderRecommendationContent(mockContent, undefined, { telemetryName: mockTelemetryName })
     render(renderedContent)
 
     expect(screen.queryByTestId(`paragraph-${mockTelemetryName}-0`)).toBeInTheDocument()
@@ -210,4 +210,18 @@ describe('renderRecommendationContent', () => {
     expect(screen.queryByTestId(`code-link-${mockTelemetryName}-7`)).toBeInTheDocument()
     expect(screen.getByText('unknown')).toBeInTheDocument()
   })
+
+  it('click on link should call onClick', () => {
+    const onClickMock = jest.fn()
+    const renderedContent = renderRecommendationContent(
+      mockContent,
+      null,
+      { telemetryName: mockTelemetryName, onClickLink: onClickMock },
+    )
+    const { queryByTestId } = render(renderedContent)
+
+    fireEvent.click(queryByTestId(`link-${mockTelemetryName}-6`))
+
+    expect(onClickMock).toBeCalled()
+  })
 })
-Original file line number
+Diff line change
@@ Expand Up / @@ -29,3 +29,6 @@ @@
       }
     }
+    div.highlightText {
+      color: var(--euiColorPrimary) !important;
+    }