From 80a64e28a2c67896165937259f16bc0a9aac33a7 Mon Sep 17 00:00:00 2001 From: zalenskiSofteq Date: Thu, 22 Jun 2023 22:11:21 +0200 Subject: [PATCH] #RI-4667 - Telemetry improvements --- .../recommendation/Recommendation.tsx | 17 ++++++- .../RecommendationVoting.tsx | 2 +- .../recommendation-voting/styles.module.scss | 3 ++ redisinsight/ui/src/telemetry/events.ts | 1 + .../ui/src/utils/recommendation/utils.tsx | 48 +++++++++++-------- .../utils/tests/recommendation/utils.spec.tsx | 18 ++++++- 6 files changed, 66 insertions(+), 23 deletions(-) diff --git a/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx b/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx index bbed498995..e91ac53084 100644 --- a/redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx +++ b/redisinsight/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 = () => ( {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 index 2e0f2b3d8d..cc5bd99017 100644 --- 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" > - Is this useful? + Is this useful?
{Object.values(Vote).map((option) => ( void +} + const badgesContent = [ { id: 'code_changes', icon: , name: 'Code Changes' }, { id: 'configuration_changes', icon: , 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 ( @@ -121,8 +126,8 @@ const renderContentElement = ( case 'span': return ( @@ -132,11 +137,12 @@ const renderContentElement = ( case 'link': return ( telemetry.onClickLink?.()} > {value.name} @@ -144,11 +150,11 @@ const renderContentElement = ( case 'code-link': return ( ) case 'list': return ( -
    +
      {isArray(jsonValue) && jsonValue.map((listElement: IRecommendationContent[], idx) => (
    • - {renderRecommendationContent(listElement, params, telemetryName, insights)} + {renderRecommendationContent(listElement, params, telemetry, insights)}
      • ))}
    @@ -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 index c5119464a9..1b19567c1d 100644 --- 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() + }) })