feat(app): anonymize pipette wizard flows (#15055)

anonymizes pipette name in ODD pipette wizard flows and firmware update
result modal

closes PLAT-297

Author: brenthagen

app/src/organisms/Devices/hooks/__tests__/useAttachedPipettesFromInstrumentsQuery.test.ts

@@ -1,16 +1,22 @@
 import * as React from 'react'
-import { vi, it, expect, describe } from 'vitest'
+import { vi, it, expect, describe, beforeEach } from 'vitest'
 import { renderHook } from '@testing-library/react'
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import {
   instrumentsResponseLeftPipetteFixture,
   instrumentsResponseRightPipetteFixture,
 } from '@opentrons/api-client'
+import { useIsOEMMode } from '../../../../resources/robot-settings/hooks'
 import { useAttachedPipettesFromInstrumentsQuery } from '..'
 
 vi.mock('@opentrons/react-api-client')
+vi.mock('../../../../resources/robot-settings/hooks')
 
 describe('useAttachedPipettesFromInstrumentsQuery hook', () => {
+  beforeEach(() => {
+    vi.mocked(useIsOEMMode).mockReturnValue(false)
+  })
+
   let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
   it('returns attached pipettes', () => {
     vi.mocked(useInstrumentsQuery).mockReturnValue({

app/src/organisms/Devices/hooks/useAttachedPipettesFromInstrumentsQuery.ts

@@ -1,35 +1,43 @@
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
-import { getPipetteModelSpecs, PipetteModel } from '@opentrons/shared-data'
+import { LEFT, RIGHT } from '@opentrons/shared-data'
+import { usePipetteModelSpecs } from '../../../resources/instruments/hooks'
+
 import type { PipetteData } from '@opentrons/api-client'
 import type { Mount } from '@opentrons/components'
+import type { PipetteModel } from '@opentrons/shared-data'
 
 export interface PipetteInformation extends PipetteData {
   displayName: string
 }
 export type AttachedPipettesFromInstrumentsQuery = {
   [mount in Mount]: null | PipetteInformation
 }
-
 export function useAttachedPipettesFromInstrumentsQuery(): AttachedPipettesFromInstrumentsQuery {
-  const { data: attachedInstruments } = useInstrumentsQuery()
-  return (attachedInstruments?.data ?? []).reduce(
-    (acc, instrumentData) => {
-      if (instrumentData.instrumentType !== 'pipette' || !instrumentData.ok) {
-        return acc
-      }
-      const { mount, instrumentModel } = instrumentData
-      return {
-        ...acc,
-        [mount as Mount]: {
-          ...instrumentData,
-          displayName:
-            instrumentModel != null
-              ? getPipetteModelSpecs(instrumentModel as PipetteModel)
-                  ?.displayName ?? ''
-              : '',
-        },
-      }
-    },
-    { left: null, right: null }
+  const attachedInstruments = useInstrumentsQuery()?.data?.data ?? []
+
+  const okPipettes = attachedInstruments.filter(
+    (instrument): instrument is PipetteData =>
+      instrument.instrumentType === 'pipette' && instrument.ok
   )
+
+  const leftPipette = okPipettes.find(({ mount }) => mount === LEFT) ?? null
+  const rightPipette = okPipettes.find(({ mount }) => mount === RIGHT) ?? null
+
+  const leftDisplayName =
+    usePipetteModelSpecs(leftPipette?.instrumentModel as PipetteModel)
+      ?.displayName ?? ''
+  const rightDisplayName =
+    usePipetteModelSpecs(rightPipette?.instrumentModel as PipetteModel)
+      ?.displayName ?? ''
+
+  return {
+    [LEFT]:
+      leftPipette != null
+        ? { ...leftPipette, displayName: leftDisplayName }
+        : null,
+    [RIGHT]:
+      rightPipette != null
+        ? { ...rightPipette, displayName: rightDisplayName }
+        : null,
+  }
 }

app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { useTranslation, Trans } from 'react-i18next'
-import { getPipetteModelSpecs } from '@opentrons/shared-data'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -14,8 +13,9 @@ import {
 } from '@opentrons/components'
 import { SmallButton } from '../../atoms/buttons'
 import { Modal } from '../../molecules/Modal'
+import { usePipetteModelSpecs } from '../../resources/instruments/hooks'
 
-import type { InstrumentData } from '@opentrons/api-client'
+import type { InstrumentData, PipetteData } from '@opentrons/api-client'
 import type { ModalHeaderBaseProps } from '../../molecules/Modal/types'
 
 interface UpdateResultsModalProps {
@@ -36,12 +36,16 @@ export function UpdateResultsModal(
     iconName: 'ot-alert',
     iconColor: COLORS.red50,
   }
+
+  const pipetteDisplayName = usePipetteModelSpecs(
+    (instrument as PipetteData)?.instrumentModel
+  )?.displayName
+
   let instrumentName = 'instrument'
   if (instrument?.ok) {
     instrumentName =
       instrument?.instrumentType === 'pipette'
-        ? getPipetteModelSpecs(instrument.instrumentModel)?.displayName ??
-          'pipette'
+        ? pipetteDisplayName ?? 'pipette'
         : 'Flex Gripper'
   }
   return (

app/src/organisms/InstrumentMountItem/LabeledMount.tsx

@@ -40,7 +40,7 @@ interface LabeledMountProps {
 export function LabeledMount(props: LabeledMountProps): JSX.Element {
   const { t } = useTranslation('device_details')
   const { mount, instrumentName, handleClick } = props
-  const ninetySixDisplayName = 'Flex 96-Channel 1000 μL'
+  const isNinetySixChannel = instrumentName?.includes('96-Channel') ?? false
 
   return (
     <MountButton onClick={handleClick} isAttached={instrumentName != null}>
@@ -62,9 +62,7 @@ export function LabeledMount(props: LabeledMountProps): JSX.Element {
             fontSize={TYPOGRAPHY.fontSize28}
             width="15.625rem"
           >
-            {instrumentName === ninetySixDisplayName
-              ? t('left_right')
-              : t('mount', { side: mount })}
+            {isNinetySixChannel ? t('left_right') : t('mount', { side: mount })}
           </StyledText>
           <StyledText
             flex="5"

app/src/organisms/PipetteWizardFlows/BeforeBeginning.tsx

@@ -13,15 +13,14 @@ import {
   RIGHT,
   SINGLE_MOUNT_PIPETTES,
   WEIGHT_OF_96_CHANNEL,
-  LoadedPipette,
-  getPipetteNameSpecs,
   WASTE_CHUTE_CUTOUT,
 } from '@opentrons/shared-data'
 import { Banner } from '../../atoms/Banner'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
 import { GenericWizardTile } from '../../molecules/GenericWizardTile'
 import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
 import { WizardRequiredEquipmentList } from '../../molecules/WizardRequiredEquipmentList'
+import { usePipetteNameSpecs } from '../../resources/instruments/hooks'
 import {
   CALIBRATION_PROBE,
   FLOWS,
@@ -35,7 +34,11 @@ import { getIsGantryEmpty } from './utils'
 import { useNotifyDeckConfigurationQuery } from '../../resources/deck_configuration'
 
 import type { AxiosError } from 'axios'
-import type { CreateCommand } from '@opentrons/shared-data'
+import type {
+  CreateCommand,
+  LoadedPipette,
+  PipetteName,
+} from '@opentrons/shared-data'
 import type {
   CreateMaintenanceRunData,
   MaintenanceRun,
@@ -90,6 +93,10 @@ export const BeforeBeginning = (
     deckConfig?.find(fixture => fixture.cutoutId === WASTE_CHUTE_CUTOUT) ??
     false
 
+  const pipetteDisplayName = usePipetteNameSpecs(
+    requiredPipette?.pipetteName as PipetteName
+  )?.displayName
+
   if (
     pipetteId == null &&
     (flowType === FLOWS.CALIBRATE || flowType === FLOWS.DETACH)
@@ -109,9 +116,7 @@ export const BeforeBeginning = (
       bodyTranslationKey = 'remove_labware'
       let displayName: string | undefined
       if (requiredPipette != null) {
-        displayName =
-          getPipetteNameSpecs(requiredPipette.pipetteName)?.displayName ??
-          requiredPipette.pipetteName
+        displayName = pipetteDisplayName ?? requiredPipette.pipetteName
       }
       if (selectedPipette === SINGLE_MOUNT_PIPETTES) {
         equipmentList = [
@@ -134,9 +139,7 @@ export const BeforeBeginning = (
     }
     case FLOWS.DETACH: {
       if (requiredPipette != null) {
-        const displayName =
-          getPipetteNameSpecs(requiredPipette.pipetteName)?.displayName ??
-          requiredPipette.pipetteName
+        const displayName = pipetteDisplayName ?? requiredPipette.pipetteName
         bodyTranslationKey = 'remove_labware'
 
         if (requiredPipette.pipetteName === 'p1000_96') {

app/src/organisms/PipetteWizardFlows/Results.tsx

@@ -12,19 +12,19 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import {
-  getPipetteNameSpecs,
-  LEFT,
-  RIGHT,
-  LoadedPipette,
-  MotorAxes,
-  NINETY_SIX_CHANNEL,
-} from '@opentrons/shared-data'
+import { LEFT, RIGHT, NINETY_SIX_CHANNEL } from '@opentrons/shared-data'
+import { SmallButton } from '../../atoms/buttons'
 import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
 import { SimpleWizardBody } from '../../molecules/SimpleWizardBody'
-import { SmallButton } from '../../atoms/buttons'
+import { usePipetteNameSpecs } from '../../resources/instruments/hooks'
 import { CheckPipetteButton } from './CheckPipetteButton'
 import { FLOWS } from './constants'
+
+import type {
+  LoadedPipette,
+  MotorAxes,
+  PipetteName,
+} from '@opentrons/shared-data'
 import type { PipetteWizardStepProps } from './types'
 
 interface ResultsProps extends PipetteWizardStepProps {
@@ -71,10 +71,11 @@ export const Results = (props: ResultsProps): JSX.Element => {
   const isCorrectPipette =
     requiredPipette != null &&
     requiredPipette.pipetteName === attachedPipettes[mount]?.instrumentName
+
   const requiredPipDisplayName =
-    requiredPipette != null
-      ? getPipetteNameSpecs(requiredPipette.pipetteName)?.displayName
-      : null
+    usePipetteNameSpecs(requiredPipette?.pipetteName as PipetteName)
+      ?.displayName ?? null
+
   const [numberOfTryAgains, setNumberOfTryAgains] = React.useState<number>(0)
   let header: string = 'unknown results screen'
   let iconColor: string = COLORS.green50

app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx

@@ -12,6 +12,7 @@ import { useInstrumentsQuery } from '@opentrons/react-api-client'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 import { mockAttachedPipetteInformation } from '../../../redux/pipettes/__fixtures__'
+import { useIsOEMMode } from '../../../resources/robot-settings/hooks'
 import { i18n } from '../../../i18n'
 import { RUN_ID_1 } from '../../RunTimeControl/__fixtures__'
 import { Results } from '../Results'
@@ -20,6 +21,7 @@ import { FLOWS } from '../constants'
 import type { Mock } from 'vitest'
 
 vi.mock('@opentrons/react-api-client')
+vi.mock('../../../resources/robot-settings/hooks')
 
 const render = (props: React.ComponentProps<typeof Results>) => {
   return renderWithProviders(<Results {...props} />, {
@@ -57,6 +59,7 @@ describe('Results', () => {
     vi.mocked(useInstrumentsQuery).mockReturnValue({
       refetch: mockRefetchInstruments,
     } as any)
+    vi.mocked(useIsOEMMode).mockReturnValue(false)
   })
   it('renders the correct information when pipette cal is a success for calibrate flow', () => {
     props = {