Merge pull request #4050 from RedisInsight/fe/feature/RI-6280-improve-rdi-telemetry

mariasergeenko · web-flow · commit ef95c5b98ba8 · 2024-11-20T15:09:56.000+01:00
RI-6280 added rdi telemetry, new button style to insert template btn
diff --git a/redisinsight/ui/src/components/navigation-menu/NavigationMenu.spec.tsx b/redisinsight/ui/src/components/navigation-menu/NavigationMenu.spec.tsx
@@ -6,6 +6,7 @@ import { appInfoSelector } from 'uiSrc/slices/app/info'
 import { cleanup, mockedStore, render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
+import { appContextSelector } from 'uiSrc/slices/app/context'
 import NavigationMenu from './NavigationMenu'
 
 let store: typeof mockedStore
@@ -17,6 +18,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 +39,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 +172,16 @@ 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()
+  })
 })
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/home/instance-list/RdiInstancesListWrapper.spec.tsx b/redisinsight/ui/src/pages/rdi/home/instance-list/RdiInstancesListWrapper.spec.tsx
@@ -195,4 +195,22 @@ describe('RdiInstancesListWrapper', () => {
     });
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
+
+  it('should call proper telemetry on instance click', async () => {
+    const sendEventTelemetryMock = jest.fn();
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+    render(<RdiInstancesListWrapper {...instance(mockedProps)} />)
+
+    await act(() => {
+      fireEvent.click(screen.getByTestId('rdi-alias-1'))
+    })
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.OPEN_RDI_CLICKED,
+      eventData: {
+        rdiId: '1',
+      }
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
 })
diff --git a/redisinsight/ui/src/pages/rdi/home/instance-list/RdiInstancesListWrapper.tsx b/redisinsight/ui/src/pages/rdi/home/instance-list/RdiInstancesListWrapper.tsx
@@ -69,6 +69,12 @@ const RdiInstancesListWrapper = ({ width, onEditInstance, editedInstance, onDele
   }, [width])
 
   const handleCheckConnectToInstance = (id: string) => {
+    sendEventTelemetry({
+      event: TelemetryEvent.OPEN_RDI_CLICKED,
+      eventData: {
+        rdiId: id,
+      }
+    })
     dispatch(checkConnectToRdiInstanceAction(
       id,
       (id: string) => history.push(Pages.rdiPipeline(id)),
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,
@@ -189,7 +189,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())
 
@@ -207,6 +211,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,14 +13,16 @@ import reducer, {
   instancesSelector,
   fetchConnectedInstanceAction,
   checkConnectToRdiInstanceAction,
-  editInstanceAction,
+  createInstanceAction,
   defaultInstanceChanging,
   defaultInstanceChangingSuccess,
   defaultInstanceChangingFailure,
+  editInstanceAction,
   updateConnectedInstance } 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'
 import { Rdi } from 'apiSrc/modules/rdi/models'
 
 let store: typeof mockedStore
@@ -240,6 +242,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('editInstanceAction', () => {
       it('succeed to edit data and calls a success callback', async () => {
         const onSuccess = jest.fn()
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`	`})`