RI-6280 added rdi telemetry, new button style to insert template btn

kchepikava · kchepikava · commit 65973cbe0022 · 2024-11-04T17:28:12.000+01:00
diff --git a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.spec.tsx b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.spec.tsx
@@ -4,10 +4,17 @@ import { BuildType } from 'uiSrc/constants/env'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { appInfoSelector } from 'uiSrc/slices/app/info'
 import { cleanup, mockedStore, render, screen, fireEvent } from 'uiSrc/utils/test-utils'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { appContextSelector } from 'uiSrc/slices/app/context'
 import NavigationMenu from './NavigationMenu'
 
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
 let store: typeof mockedStore
 beforeEach(() => {
   cleanup()
@@ -17,6 +24,13 @@ beforeEach(() => {
 
 const mockAppInfoSelector = jest.requireActual('uiSrc/slices/app/info')
 
+jest.mock('uiSrc/slices/app/context', () => ({
+  ...jest.requireActual('uiSrc/slices/app/context'),
+  appContextSelector: jest.fn().mockReturnValue({
+    workspace: 'database',
+  }),
+}))
+
 jest.mock('uiSrc/slices/app/info', () => ({
   ...jest.requireActual('uiSrc/slices/app/info'),
   appInfoSelector: jest.fn().mockReturnValue({
@@ -31,6 +45,13 @@ jest.mock('uiSrc/slices/instances/instances', () => ({
   }),
 }))
 
+jest.mock('uiSrc/slices/rdi/instances', () => ({
+  ...jest.requireActual('uiSrc/slices/rdi/instances'),
+  connectedInstanceSelector: jest.fn().mockReturnValue({
+    id: 'mockRdiId',
+  }),
+}))
+
 jest.mock('uiSrc/slices/app/features', () => ({
   ...jest.requireActual('uiSrc/slices/app/features'),
   appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
@@ -157,4 +178,47 @@ describe('NavigationMenu', () => {
       expect(githubBtn?.getAttribute('href')).toEqual(EXTERNAL_LINKS.githubRepo)
     })
   })
+
+  it('should render private routes with connectedRdiInstanceId', () => {
+    (appContextSelector as jest.Mock).mockImplementation(() => ({
+      ...appContextSelector,
+      workspace: 'redisDataIntegration'
+    }))
+
+    render(<NavigationMenu />)
+
+    expect(screen.getByTestId('pipeline-status-page-btn')).toBeTruthy()
+    expect(screen.getByTestId('pipeline-management-page-btn')).toBeTruthy()
+  })
+
+  it('should call proper telemetry event after click on rdi button', () => {
+    (appContextSelector as jest.Mock).mockImplementation(() => ({
+      ...appContextSelector,
+      workspace: 'redisDataIntegration'
+    }))
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+    render(<NavigationMenu />)
+
+    fireEvent.click(screen.getByTestId('pipeline-status-page-btn'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.OPEN_RDI_CLICKED,
+      eventData: {
+        rdiId: 'mockRdiId',
+        source: 'button',
+      }
+    })
+
+    fireEvent.click(screen.getByTestId('pipeline-management-page-btn'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.OPEN_RDI_CLICKED,
+      eventData: {
+        rdiId: 'mockRdiId',
+        source: 'button',
+      }
+    })
+  })
 })
diff --git a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx
@@ -43,6 +43,7 @@ import { FeatureFlagComponent } from 'uiSrc/components'
 
 import { appContextSelector } from 'uiSrc/slices/app/context'
 import { AppWorkspace } from 'uiSrc/slices/interfaces'
+import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import HelpMenu from './components/help-menu/HelpMenu'
 import NotificationMenu from './components/notifications-center'
 
@@ -177,7 +178,16 @@ const NavigationMenu = () => {
       tooltipText: 'Pipeline Status',
       pageName: PageNames.rdiStatistics,
       ariaLabel: 'Pipeline Status page button',
-      onClick: () => handleGoPage(Pages.rdiStatistics(connectedRdiInstanceId)),
+      onClick: () => {
+        sendEventTelemetry({
+          event: TelemetryEvent.OPEN_RDI_CLICKED,
+          eventData: {
+            rdiId: connectedRdiInstanceId,
+            source: 'button',
+          }
+        })
+        handleGoPage(Pages.rdiStatistics(connectedRdiInstanceId))
+      },
       dataTestId: 'pipeline-status-page-btn',
       isActivePage: activePage === `/${PageNames.rdiStatistics}`,
       getClassName() {
@@ -191,7 +201,16 @@ const NavigationMenu = () => {
       tooltipText: 'Pipeline Management',
       pageName: PageNames.rdiPipelineManagement,
       ariaLabel: 'Pipeline Management page button',
-      onClick: () => handleGoPage(Pages.rdiPipelineManagement(connectedRdiInstanceId)),
+      onClick: () => {
+        sendEventTelemetry({
+          event: TelemetryEvent.OPEN_RDI_CLICKED,
+          eventData: {
+            rdiId: connectedRdiInstanceId,
+            source: 'button',
+          }
+        })
+        handleGoPage(Pages.rdiPipelineManagement(connectedRdiInstanceId))
+      },
       dataTestId: 'pipeline-management-page-btn',
       isActivePage: isPipelineManagementPath(),
       getClassName() {
diff --git a/redisinsight/ui/src/pages/rdi/home/RdiPage.spec.tsx b/redisinsight/ui/src/pages/rdi/home/RdiPage.spec.tsx
@@ -250,6 +250,7 @@ describe('RdiPage', () => {
 
     expect(createInstanceAction).toBeCalledWith(
       { name: 'name', url: 'url', username: 'username', password: 'password' },
+      expect.any(Function),
       expect.any(Function)
     )
   })
diff --git a/redisinsight/ui/src/pages/rdi/home/RdiPage.tsx b/redisinsight/ui/src/pages/rdi/home/RdiPage.tsx
@@ -18,6 +18,7 @@ import {
 } from 'uiSrc/telemetry'
 import HomePageTemplate from 'uiSrc/templates/home-page-template'
 import { setTitle } from 'uiSrc/utils'
+import { Rdi as RdiInstanceResponse } from 'apiSrc/modules/rdi/models/rdi'
 import EmptyMessage from './empty-message/EmptyMessage'
 import ConnectionForm from './connection-form/ConnectionForm'
 import RdiHeader from './header/RdiHeader'
@@ -62,7 +63,26 @@ const RdiPage = () => {
     if (editInstance) {
       dispatch(editInstanceAction(editInstance.id, instance, onSuccess))
     } else {
-      dispatch(createInstanceAction({ ...instance }, onSuccess))
+      dispatch(createInstanceAction(
+        { ...instance },
+        (data: RdiInstanceResponse) => {
+          sendEventTelemetry({
+            event: TelemetryEvent.RDI_ENDPOINT_ADDED,
+            eventData: {
+              rdiId: data.id,
+            }
+          })
+          onSuccess()
+        },
+        (error) => {
+          sendEventTelemetry({
+            event: TelemetryEvent.RDI_ENDPOINT_ADD_FAILED,
+            eventData: {
+              error,
+            }
+          })
+        }
+      ))
     }
 
     sendEventTelemetry({
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/TemplateButton.tsx
@@ -48,7 +48,6 @@ const TemplateButton = ({ setFieldValue, value }: TemplateButtonProps) => {
       <EuiButton
         fill
         size="s"
-        color="secondary"
         className={styles.btn}
         aria-label="Insert template"
         isLoading={loading}
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/styles.module.scss b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-button/styles.module.scss
@@ -1,12 +1,7 @@
 .btn {
   display: flex;
   align-items: center;
-  color: var(--recommendationsCountBgColor) !important;
-  background-color: var(--tableRowSelectedColor) !important;
+  background-color: var(--insightsTriggerBgColor) !important;
   border-radius: 4px;
   border-color: var(--tableRowSelectedColor) !important;
-
-  > span {
-    color: var(--recommendationsCountBgColor) !important;
-  }
 }
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/TemplatePopover.tsx
@@ -47,7 +47,6 @@ const TemplatePopover = (props: Props) => {
           <EuiButton
             fill
             size="s"
-            color="secondary"
             className={styles.btn}
             aria-label="Insert template"
             disabled={loading}
diff --git a/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/styles.module.scss b/redisinsight/ui/src/pages/rdi/pipeline-management/components/template-popover/styles.module.scss
@@ -10,13 +10,8 @@
   .btn {
     display: flex;
     align-items: center;
-    color: var(--recommendationsCountBgColor) !important;
-    background-color: var(--tableRowSelectedColor) !important;
+    background-color: var(--insightsTriggerBgColor) !important;
     border-radius: 4px;
     border-color: var(--tableRowSelectedColor) !important;
-
-    > span {
-      color: var(--recommendationsCountBgColor) !important;
-    }
   }
 }
diff --git a/redisinsight/ui/src/slices/interfaces/rdi.ts b/redisinsight/ui/src/slices/interfaces/rdi.ts
@@ -213,6 +213,14 @@ export interface RdiInstance extends RdiInstanceResponse {
   error: string
 }
 
+export interface IErrorData {
+  message: string
+  statusCode: number
+  error: string
+  errorCode?: number
+  errors?: string[]
+}
+
 export interface InitialStateRdiInstances {
   loading: boolean
   error: string
diff --git a/redisinsight/ui/src/slices/rdi/instances.ts b/redisinsight/ui/src/slices/rdi/instances.ts
@@ -5,12 +5,12 @@ import { AxiosError } from 'axios'
 import { ApiEndpoints } from 'uiSrc/constants'
 import { apiService } from 'uiSrc/services'
 import successMessages from 'uiSrc/components/notifications/success-messages'
-import { getApiErrorMessage, isStatusSuccessful, Nullable } from 'uiSrc/utils'
+import { getApiErrorMessage, isStatusSuccessful, Maybe, Nullable } from 'uiSrc/utils'
 import { Rdi as RdiInstanceResponse } from 'apiSrc/modules/rdi/models/rdi'
 
 import { AppDispatch, RootState } from '../store'
 import { addErrorNotification, addMessageNotification } from '../app/notifications'
-import { InitialStateRdiInstances, RdiInstance } from '../interfaces/rdi'
+import { IErrorData, InitialStateRdiInstances, RdiInstance } from '../interfaces/rdi'
 
 export const initialState: InitialStateRdiInstances = {
   loading: true,
@@ -184,7 +184,11 @@ export function fetchInstancesAction(onSuccess?: (data: RdiInstance[]) => void)
 }
 
 // Asynchronous thunk action
-export function createInstanceAction(payload: Partial<RdiInstance>, onSuccess?: (data: RdiInstanceResponse) => void) {
+export function createInstanceAction(
+  payload: Partial<RdiInstance>,
+  onSuccess?: (data: RdiInstanceResponse) => void,
+  onFail?: (error: Maybe<string | number>) => void,
+) {
   return async (dispatch: AppDispatch) => {
     dispatch(defaultInstanceChanging())
 
@@ -202,6 +206,8 @@ export function createInstanceAction(payload: Partial<RdiInstance>, onSuccess?:
       const error = _err as AxiosError
       const errorMessage = getApiErrorMessage(error)
       dispatch(defaultInstanceChangingFailure(errorMessage))
+      const errorData = error?.response?.data as IErrorData
+      onFail?.(errorData?.errorCode || errorData?.error)
       dispatch(addErrorNotification(error))
     }
   }
diff --git a/redisinsight/ui/src/slices/tests/rdi/instances.spec.ts b/redisinsight/ui/src/slices/tests/rdi/instances.spec.ts
@@ -13,10 +13,13 @@ import reducer, {
   instancesSelector,
   fetchConnectedInstanceAction,
   checkConnectToRdiInstanceAction,
-} from 'uiSrc/slices/rdi/instances'
+  createInstanceAction,
+  defaultInstanceChanging, defaultInstanceChangingSuccess, loadInstances,
+  defaultInstanceChangingFailure } from 'uiSrc/slices/rdi/instances'
 import { apiService } from 'uiSrc/services'
-import { addErrorNotification, IAddInstanceErrorPayload } from 'uiSrc/slices/app/notifications'
+import { addErrorNotification, addMessageNotification, IAddInstanceErrorPayload } from 'uiSrc/slices/app/notifications'
 import { RdiInstance } from 'uiSrc/slices/interfaces'
+import successMessages from 'uiSrc/components/notifications/success-messages'
 
 let store: typeof mockedStore
 
@@ -210,6 +213,60 @@ describe('rdi instances slice', () => {
       })
     })
 
+    describe('createInstanceAction', () => {
+      const onSuccess = jest.fn()
+      const onFail = jest.fn()
+      it('succeed to create data and call success callback', async () => {
+        const responsePayload = { data: mockRdiInstance, status: 200 }
+
+        apiService.post = jest.fn().mockResolvedValue(responsePayload)
+        apiService.get = jest.fn().mockResolvedValue({ status: 200, data: [] })
+
+        // Act
+        await store.dispatch<any>(
+          createInstanceAction(mockRdiInstance, onSuccess, onFail)
+        )
+
+        // Assert
+        const expectedActions = [
+          defaultInstanceChanging(),
+          defaultInstanceChangingSuccess(),
+          addMessageNotification(successMessages.ADDED_NEW_RDI_INSTANCE(mockRdiInstance.name))
+        ]
+
+        expect(store.getActions()).toEqual(expect.arrayContaining(expectedActions))
+        expect(onSuccess).toBeCalledWith(mockRdiInstance)
+      })
+
+      it('failed to create data and call onFail callback', async () => {
+        const errorMessage = 'Something was wrong!'
+        const errorCode = 11403
+        const responsePayload = {
+          response: {
+            status: 500,
+            data: { message: errorMessage, errorCode },
+          },
+        }
+
+        apiService.post = jest.fn().mockRejectedValue(responsePayload)
+
+        // Act
+        await store.dispatch<any>(
+          createInstanceAction(mockRdiInstance, onSuccess, onFail)
+        )
+
+        // Assert
+        const expectedActions = [
+          defaultInstanceChanging(),
+          defaultInstanceChangingFailure(errorMessage),
+          addErrorNotification(responsePayload as AxiosError),
+        ]
+
+        expect(store.getActions()).toEqual(expectedActions)
+        expect(onFail).toBeCalledWith(errorCode)
+      })
+    })
+
     describe('checkConnectToRdiInstanceAction', () => {
       it('succeed to fetch data', async () => {
         const responsePayload = { status: 200 }
diff --git a/redisinsight/ui/src/telemetry/events.ts b/redisinsight/ui/src/telemetry/events.ts
@@ -303,6 +303,9 @@ export enum TelemetryEvent {
   RDI_INSTANCE_ADD_CLICKED = 'RDI_INSTANCE_ADD_CLICKED',
   RDI_INSTANCE_ADD_CANCELLED = 'RDI_INSTANCE_ADD_CANCELLED',
   RDI_INSTANCE_SUBMITTED = 'RDI_INSTANCE_SUBMITTED',
+  OPEN_RDI_CLICKED = 'OPEN_RDI_CLICKED',
+  RDI_ENDPOINT_ADDED = 'RDI_ENDPOINT_ADDED',
+  RDI_ENDPOINT_ADD_FAILED = 'RDI_ENDPOINT_ADD_FAILED',
   RDI_PIPELINE_UPLOAD_FROM_SERVER_CLICKED = 'RDI_PIPELINE_UPLOAD_FROM_SERVER_CLICKED',
   RDI_DEPLOY_CLICKED = 'RDI_DEPLOY_CLICKED',
   RDI_PIPELINE_RESET_CLICKED = 'RDI_PIPELINE_RESET_CLICKED',

Original file line number	Diff line number	Diff line change
`@@ -250,6 +250,7 @@ describe('RdiPage', () => {`
`250`	`250`
`251`	`251`	`expect(createInstanceAction).toBeCalledWith(`
`252`	`252`	`{ name: 'name', url: 'url', username: 'username', password: 'password' },`
	`253`	`+ expect.any(Function),`
`253`	`254`	`expect.any(Function)`
`254`	`255`	`)`
`255`	`256`	`})`