refactor(app): add analytics tracking events for new functionality introduced in 6.0

Add analytics tracking events that cover new functionality introduced in version 6.0 of the app

Closes #10751

Co-authored-by: Sakib Hossain <[email protected]>
Co-authored-by: Jethary Rader <[email protected]>
Co-authored-by: Brent Hagen <[email protected]>
Co-authored-by: Vincent Abruzzo <[email protected]>

Author: 5 people

app/src/organisms/AddCustomLabwareSlideout/__tests__/AddCustomLabwareSlideout.test.tsx

@@ -1,11 +1,20 @@
 import * as React from 'react'
 import { MemoryRouter } from 'react-router-dom'
+import { fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../i18n'
+import { useTrackEvent } from '../../../redux/analytics'
 import { AddCustomLabwareSlideout } from '..'
 
 jest.mock('../../../redux/custom-labware')
 jest.mock('../../../pages/Labware/helpers/getAllDefs')
+jest.mock('../../../redux/analytics')
+
+const mockUseTrackEvent = useTrackEvent as jest.MockedFunction<
+  typeof useTrackEvent
+>
+
+let mockTrackEvent: jest.Mock
 
 const render = (
   props: React.ComponentProps<typeof AddCustomLabwareSlideout>
@@ -27,12 +36,21 @@ describe('AddCustomLabwareSlideout', () => {
     onSuccess: jest.fn(() => null),
     onFailure: jest.fn(() => null),
   }
+  beforeEach(() => {
+    mockTrackEvent = jest.fn()
+    mockUseTrackEvent.mockReturnValue(mockTrackEvent)
+  })
 
-  it('renders correct title and labware cards', () => {
+  it('renders correct title and labware cards and clicking on button triggers analytics event', () => {
     const [{ getByText, getByRole }] = render(props)
     getByText('Import a Custom Labware Definition')
     getByText('Or choose a file from your computer to upload.')
-    getByRole('button', { name: 'Choose File' })
+    const btn = getByRole('button', { name: 'Choose File' })
+    fireEvent.click(btn)
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      name: 'addCustomLabware',
+      properties: {},
+    })
   })
 
   it('renders drag and drop section', () => {

app/src/organisms/AddCustomLabwareSlideout/index.tsx

@@ -15,6 +15,7 @@ import {
 } from '../../redux/custom-labware'
 import { Slideout } from '../../atoms/Slideout'
 import { StyledText } from '../../atoms/text'
+import { useTrackEvent } from '../../redux/analytics'
 import { UploadInput } from '../../molecules/UploadInput'
 import type { Dispatch } from '../../redux/types'
 
@@ -30,6 +31,7 @@ export function AddCustomLabwareSlideout(
 ): JSX.Element {
   const { t } = useTranslation(['labware_landing', 'shared'])
   const dispatch = useDispatch<Dispatch>()
+  const trackEvent = useTrackEvent()
 
   return (
     <Slideout
@@ -46,7 +48,13 @@ export function AddCustomLabwareSlideout(
           onUpload={(file: File) => {
             dispatch(addCustomLabwareFile(file.path))
           }}
-          onClick={() => dispatch(addCustomLabware())}
+          onClick={() => {
+            dispatch(addCustomLabware())
+            trackEvent({
+              name: 'addCustomLabware',
+              properties: {},
+            })
+          }}
           uploadText={t('choose_file_to_upload')}
           dragAndDropText={
             <StyledText as="p">

app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx

@@ -17,6 +17,7 @@ import {
   getReachableRobots,
   getUnreachableRobots,
 } from '../../../../../redux/discovery'
+import { useTrackEvent } from '../../../../../redux/analytics'
 import { Slideout } from '../../../../../atoms/Slideout'
 import { StyledText } from '../../../../../atoms/text'
 import { PrimaryButton } from '../../../../../atoms/buttons'
@@ -50,6 +51,7 @@ export function RenameRobotSlideout({
   const [previousRobotName, setPreviousRobotName] = React.useState<string>(
     robotName
   )
+  const trackEvent = useTrackEvent()
   const history = useHistory()
   const dispatch = useDispatch<Dispatch>()
   const connectableRobots = useSelector((state: State) =>
@@ -111,14 +113,25 @@ export function RenameRobotSlideout({
     },
   })
 
+  const handleSubmitRobotRename = (): void => {
+    trackEvent({
+      name: 'renameRobot',
+      properties: {
+        previousRobotName,
+        newRobotName: formik.values.newRobotName,
+      },
+    })
+    formik.handleSubmit()
+  }
+
   return (
     <Slideout
       title={t('rename_robot_slideout_title')}
       onCloseClick={onCloseClick}
       isExpanded={isExpanded}
       footer={
         <PrimaryButton
-          onClick={() => formik.handleSubmit()}
+          onClick={handleSubmitRobotRename}
           disabled={!(formik.isValid && formik.dirty)}
           width="100%"
         >

app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/__tests__/RenameRobotSlideout.test.tsx

@@ -3,6 +3,7 @@ import { MemoryRouter } from 'react-router-dom'
 import { fireEvent, waitFor } from '@testing-library/react'
 import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../../../../i18n'
+import { useTrackEvent } from '../../../../../../redux/analytics'
 import {
   getConnectableRobots,
   getReachableRobots,
@@ -15,15 +16,21 @@ import {
 import { RenameRobotSlideout } from '../RenameRobotSlideout'
 
 jest.mock('../../../../../../redux/discovery/selectors')
+jest.mock('../../../../../../redux/analytics')
 
 const mockGetConnectableRobots = getConnectableRobots as jest.MockedFunction<
   typeof getConnectableRobots
 >
 const mockGetReachableRobots = getReachableRobots as jest.MockedFunction<
   typeof getReachableRobots
 >
+const mockUseTrackEvent = useTrackEvent as jest.MockedFunction<
+  typeof useTrackEvent
+>
 
 const mockOnCloseClick = jest.fn()
+let mockTrackEvent: jest.Mock
+
 const render = () => {
   return renderWithProviders(
     <MemoryRouter>
@@ -39,6 +46,8 @@ const render = () => {
 
 describe('RobotSettings RenameRobotSlideout', () => {
   beforeEach(() => {
+    mockTrackEvent = jest.fn()
+    mockUseTrackEvent.mockReturnValue(mockTrackEvent)
     mockConnectableRobot.name = 'connectableOtie'
     mockReachableRobot.name = 'reachableOtie'
     mockGetConnectableRobots.mockReturnValue([mockConnectableRobot])
@@ -73,6 +82,11 @@ describe('RobotSettings RenameRobotSlideout', () => {
       expect(input).toHaveValue('mockInput')
       const renameButton = getByRole('button', { name: 'Rename robot' })
       expect(renameButton).not.toBeDisabled()
+      fireEvent.click(renameButton)
+      expect(mockTrackEvent).toHaveBeenCalledWith({
+        name: 'renameRobot',
+        properties: { newRobotName: 'mockInput', previousRobotName: 'otie' },
+      })
     })
   })
 

app/src/organisms/Devices/RobotSettings/RobotSettingsCalibration.tsx

@@ -305,6 +305,7 @@ export function RobotSettingsCalibration({
       session &&
       session.sessionType === Sessions.SESSION_TYPE_CALIBRATION_HEALTH_CHECK
     ) {
+      // TODO: add this analytics event when we deprecate this event firing in redux/analytics makeEvent
       return session
     }
     return null
@@ -500,6 +501,14 @@ export function RobotSettingsCalibration({
     true
   )
 
+  const handleHealthCheckClick = (): void => {
+    handleHealthCheck(null)
+    doTrackEvent({
+      name: 'calibrationHealthCheckButtonClicked',
+      properties: {},
+    })
+  }
+
   return (
     <>
       <Portal level="top">
@@ -689,7 +698,7 @@ export function RobotSettingsCalibration({
           </Box>
           <TertiaryButton
             {...targetProps}
-            onClick={() => handleHealthCheck(null)}
+            onClick={handleHealthCheckClick}
             disabled={calCheckButtonDisabled}
           >
             {t('health_check_button')}

app/src/organisms/Devices/RobotSettings/__tests__/RobotSettingsCalibration.test.tsx

@@ -393,6 +393,11 @@ describe('RobotSettingsCalibration', () => {
     const [{ getByRole }] = render()
     const button = getByRole('button', { name: 'Check health' })
     expect(button).not.toBeDisabled()
+    fireEvent.click(button)
+    expect(mockTrackEvent).toHaveBeenCalledWith({
+      name: 'calibrationHealthCheckButtonClicked',
+      properties: {},
+    })
   })
 
   it('Health check button is disabled when a robot is unreachable', () => {

app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { useTrackEvent } from '../../redux/analytics'
 import {
   Flex,
   Icon,
@@ -50,6 +51,7 @@ export function CustomLabwareOverflowMenu(
   const overflowMenuRef = useOnClickOutside<HTMLDivElement>({
     onClickOutside: () => setShowOverflowMenu(false),
   })
+  const trackEvent = useTrackEvent()
 
   const {
     confirm: confirmDeleteLabware,
@@ -79,6 +81,10 @@ export function CustomLabwareOverflowMenu(
   const handleClickLabwareCreator: React.MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
+    trackEvent({
+      name: 'openLabwareCreatorFromLabwareOverflowMenu',
+      properties: {},
+    })
     setShowOverflowMenu(false)
     window.open(LABWARE_CREATOR_HREF, '_blank')
   }

app/src/organisms/LabwareCard/__tests__/CustomLabwareOverflowMenu.test.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react'
 import { fireEvent } from '@testing-library/react'
+import { useTrackEvent } from '../../../redux/analytics'
 import {
   renderWithProviders,
   useConditionalConfirm,
 } from '@opentrons/components'
 import { i18n } from '../../../i18n'
 import { CustomLabwareOverflowMenu } from '../CustomLabwareOverflowMenu'
 
+jest.mock('../../../redux/analytics')
 jest.mock('@opentrons/components/src/hooks')
 
 const render = (
@@ -20,8 +22,13 @@ const render = (
 const mockUseConditionalConfirm = useConditionalConfirm as jest.MockedFunction<
   typeof useConditionalConfirm
 >
+const mockUseTrackEvent = useTrackEvent as jest.MockedFunction<
+  typeof useTrackEvent
+>
+
 const mockConfirm = jest.fn()
 const mockCancel = jest.fn()
+let mockTrackEvent: jest.Mock
 
 describe('CustomLabwareOverflowMenu', () => {
   let props: React.ComponentProps<typeof CustomLabwareOverflowMenu>
@@ -36,6 +43,8 @@ describe('CustomLabwareOverflowMenu', () => {
       showConfirmation: true,
       cancel: mockCancel,
     })
+    mockTrackEvent = jest.fn()
+    mockUseTrackEvent.mockReturnValue(mockTrackEvent)
   })
 
   afterEach(() => {

app/src/organisms/LabwareCard/__tests__/LabwareCard.test.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
 import { renderWithProviders, nestedTextMatcher } from '@opentrons/components'
 import { i18n } from '../../../i18n'
-import { LabwareCard } from '..'
 import { useAllLabware } from '../../../pages/Labware/hooks'
 import { mockDefinition } from '../../../redux/custom-labware/__fixtures__'
+import { CustomLabwareOverflowMenu } from '../CustomLabwareOverflowMenu'
+import { LabwareCard } from '..'
 
 jest.mock('../../../pages/Labware/hooks')
-jest.mock('../../../pages/Labware/helpers/getAllDefs')
+jest.mock('../CustomLabwareOverflowMenu')
 jest.mock('@opentrons/components', () => {
   const actualComponents = jest.requireActual('@opentrons/components')
   return {
@@ -15,6 +16,9 @@ jest.mock('@opentrons/components', () => {
   }
 })
 
+const mockCustomLabwareOverflowMenu = CustomLabwareOverflowMenu as jest.MockedFunction<
+  typeof CustomLabwareOverflowMenu
+>
 const mockUseAllLabware = useAllLabware as jest.MockedFunction<
   typeof useAllLabware
 >
@@ -27,6 +31,9 @@ const render = (props: React.ComponentProps<typeof LabwareCard>) => {
 describe('LabwareCard', () => {
   let props: React.ComponentProps<typeof LabwareCard>
   beforeEach(() => {
+    mockCustomLabwareOverflowMenu.mockReturnValue(
+      <div>Mock CustomLabwareOverflowMenu</div>
+    )
     mockUseAllLabware.mockReturnValue([{ definition: mockDefinition }])
     props = {
       labware: {

app/src/organisms/LabwarePositionCheck/SummaryScreen.tsx

@@ -14,6 +14,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 import { useCreateLabwareOffsetMutation } from '@opentrons/react-api-client'
+import { useTrackEvent } from '../../redux/analytics'
 import { useCurrentRunId } from '../ProtocolUpload/hooks'
 import { useLPCSuccessToast } from '../ProtocolSetup/hooks'
 import { DeckMap } from './DeckMap'
@@ -35,6 +36,7 @@ export const SummaryScreen = (props: {
   const { t } = useTranslation('labware_position_check')
   const introInfo = useIntroInfo()
   const { protocolData } = useProtocolDetailsForRun(runId)
+  const trackEvent = useTrackEvent()
   useLabwareOffsets(
     savePositionCommandData,
     protocolData as ProtocolAnalysisFile
@@ -53,6 +55,7 @@ export const SummaryScreen = (props: {
   const { sections, primaryPipetteMount, secondaryPipetteMount } = introInfo
 
   const applyLabwareOffsets = (): void => {
+    trackEvent({ name: 'applyLabwareOffsetData', properties: {} })
     if (labwareOffsets.length > 0) {
       labwareOffsets.forEach(labwareOffset => {
         createLabwareOffset({