feat(app): create hooks to anonymize instrument display names (#14978)

OEM mode requires removing "Flex" from pipette and gripper names in the ODD. these hooks wrap the shared-data helpers used to get instrument display names and remove "Flex" when in OEM mode on the ODD. closes PLAT-261
Opentrons · Apr 26, 2024 · 97bf5f3 · 97bf5f3
1 parent 39eafa2
commit 97bf5f3
Show file tree

Hide file tree

Showing 14 changed files with 222 additions and 112 deletions.
diff --git a/app/src/LocalizationProvider.tsx b/app/src/LocalizationProvider.tsx
@@ -2,13 +2,10 @@ import * as React from 'react'
 import { I18nextProvider } from 'react-i18next'
 import reduce from 'lodash/reduce'
 
-import { useRobotSettingsQuery } from '@opentrons/react-api-client'
-
 import { resources } from './assets/localization'
+import { useIsOEMMode } from './resources/robot-settings/hooks'
 import { i18n, i18nCb, i18nConfig } from './i18n'
 
-import type { RobotSettingsField } from '@opentrons/api-client'
-
 export interface OnDeviceLocalizationProviderProps {
   children?: React.ReactNode
 }
@@ -20,11 +17,7 @@ const ANONYMOUS_RESOURCE = 'anonymous'
 export function OnDeviceLocalizationProvider(
   props: OnDeviceLocalizationProviderProps
 ): JSX.Element | null {
-  const { settings } = useRobotSettingsQuery().data ?? {}
-  const oemModeSetting = (settings ?? []).find(
-    (setting: RobotSettingsField) => setting?.id === 'enableOEMMode'
-  )
-  const isOEMMode = oemModeSetting?.value ?? false
+  const isOEMMode = useIsOEMMode()
 
   // iterate through language resources, nested files, substitute anonymous file for branded file for OEM mode
   const anonResources = reduce(

diff --git a/app/src/organisms/InstrumentMountItem/AttachedInstrumentMountItem.tsx b/app/src/organisms/InstrumentMountItem/AttachedInstrumentMountItem.tsx
@@ -1,22 +1,23 @@
 import * as React from 'react'
 import { useHistory } from 'react-router-dom'
 
+import { SINGLE_MOUNT_PIPETTES } from '@opentrons/shared-data'
+
 import {
-  getGripperDisplayName,
-  getPipetteModelSpecs,
-  GripperModel,
-  PipetteModel,
-  SINGLE_MOUNT_PIPETTES,
-} from '@opentrons/shared-data'
+  useGripperDisplayName,
+  usePipetteModelSpecs,
+} from '../../resources/instruments/hooks'
 import { ChoosePipette } from '../PipetteWizardFlows/ChoosePipette'
 import { FLOWS } from '../PipetteWizardFlows/constants'
-import { PipetteWizardFlows } from '../PipetteWizardFlows'
-import { GripperWizardFlows } from '../GripperWizardFlows'
 import { GRIPPER_FLOW_TYPES } from '../GripperWizardFlows/constants'
 import { LabeledMount } from './LabeledMount'
+
 import type { InstrumentData } from '@opentrons/api-client'
+import type { GripperModel, PipetteModel } from '@opentrons/shared-data'
 import type { Mount } from '../../redux/pipettes/types'
 import type { SelectablePipettes } from '../PipetteWizardFlows/types'
+import type { GripperWizardFlows } from '../GripperWizardFlows'
+import type { PipetteWizardFlows } from '../PipetteWizardFlows'
 
 interface AttachedInstrumentMountItemProps {
   mount: Mount | 'extension'
@@ -62,22 +63,27 @@ export function AttachedInstrumentMountItem(
       history.push(`/instruments/${mount}`)
     }
   }
-  let displayName
-  if (attachedInstrument != null && attachedInstrument.ok) {
-    displayName =
-      attachedInstrument?.mount !== 'extension'
-        ? getPipetteModelSpecs(
-            attachedInstrument?.instrumentModel as PipetteModel
-          )?.displayName
-        : getGripperDisplayName(
-            attachedInstrument?.instrumentModel as GripperModel
-          )
-  }
+
+  const instrumentModel = attachedInstrument?.ok
+    ? attachedInstrument.instrumentModel
+    : null
+
+  const pipetteDisplayName =
+    usePipetteModelSpecs(instrumentModel as PipetteModel)?.displayName ?? null
+  const gripperDisplayName = useGripperDisplayName(
+    instrumentModel as GripperModel
+  )
+
+  const displayName =
+    attachedInstrument?.ok && attachedInstrument?.mount === 'extension'
+      ? gripperDisplayName
+      : pipetteDisplayName
+
   return (
     <>
       <LabeledMount
         mount={mount}
-        instrumentName={displayName ?? null}
+        instrumentName={displayName}
         handleClick={handleClick}
       />
       {showChoosePipetteModal ? (

diff --git a/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx b/app/src/organisms/InstrumentMountItem/ProtocolInstrumentMountItem.tsx
@@ -14,15 +14,17 @@ import {
   JUSTIFY_FLEX_START,
 } from '@opentrons/components'
 import {
-  getGripperDisplayName,
-  getPipetteNameSpecs,
   NINETY_SIX_CHANNEL,
   PipetteName,
   SINGLE_MOUNT_PIPETTES,
   LoadedPipette,
 } from '@opentrons/shared-data'
 
 import { SmallButton } from '../../atoms/buttons'
+import {
+  useGripperDisplayName,
+  usePipetteNameSpecs,
+} from '../../resources/instruments/hooks'
 import { FLOWS } from '../PipetteWizardFlows/constants'
 import { PipetteWizardFlows } from '../PipetteWizardFlows'
 import { GripperWizardFlows } from '../GripperWizardFlows'
@@ -97,6 +99,11 @@ export function ProtocolInstrumentMountItem(
     attachedInstrument != null &&
     attachedInstrument.ok &&
     attachedInstrument?.data?.calibratedOffset?.last_modified != null
+
+  const gripperDisplayName = useGripperDisplayName(speccedName as GripperModel)
+  const pipetteDisplayName = usePipetteNameSpecs(speccedName as PipetteName)
+    ?.displayName
+
   return (
     <>
       <MountItem isReady={isAttachedWithCal}>
@@ -117,9 +124,7 @@ export function ProtocolInstrumentMountItem(
               )}
             </MountLabel>
             <SpeccedInstrumentName>
-              {mount === 'extension'
-                ? getGripperDisplayName(speccedName as GripperModel)
-                : getPipetteNameSpecs(speccedName as PipetteName)?.displayName}
+              {mount === 'extension' ? gripperDisplayName : pipetteDisplayName}
             </SpeccedInstrumentName>
           </Flex>
 

diff --git a/app/src/organisms/ProtocolSetupInstruments/__tests__/ProtocolSetupInstruments.test.tsx b/app/src/organisms/ProtocolSetupInstruments/__tests__/ProtocolSetupInstruments.test.tsx
@@ -12,13 +12,15 @@ import {
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { useMostRecentCompletedAnalysis } from '../../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis'
+import { useIsOEMMode } from '../../../resources/robot-settings/hooks'
 import { mockRecentAnalysis } from '../__fixtures__'
 import { ProtocolSetupInstruments } from '..'
 
 vi.mock('@opentrons/react-api-client')
 vi.mock(
   '../../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis'
 )
+vi.mock('../../../resources/robot-settings/hooks')
 
 const mockGripperData = {
   instrumentModel: 'gripper_v1',
@@ -71,6 +73,7 @@ describe('ProtocolSetupInstruments', () => {
         data: [mockLeftPipetteData, mockRightPipetteData, mockGripperData],
       },
     } as any)
+    vi.mocked(useIsOEMMode).mockReturnValue(false)
   })
   afterEach(() => {
     vi.resetAllMocks()

diff --git a/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx b/app/src/pages/InstrumentDetail/__tests__/InstrumentDetail.test.tsx
@@ -4,30 +4,24 @@ import { useParams } from 'react-router-dom'
 
 import { useInstrumentsQuery } from '@opentrons/react-api-client'
 import { renderWithProviders } from '../../../__testing-utils__'
-import {
-  getPipetteModelSpecs,
-  getGripperDisplayName,
-} from '@opentrons/shared-data'
 
 import { i18n } from '../../../i18n'
 import { InstrumentDetail } from '../../../pages/InstrumentDetail'
+import {
+  useGripperDisplayName,
+  usePipetteModelSpecs,
+} from '../../../resources/instruments/hooks'
+import { useIsOEMMode } from '../../../resources/robot-settings/hooks'
 
 import type { Instruments } from '@opentrons/api-client'
-import type * as SharedData from '@opentrons/shared-data'
 
 vi.mock('@opentrons/react-api-client')
-vi.mock('@opentrons/shared-data', async importOriginal => {
-  const actual = await importOriginal<typeof SharedData>()
-  return {
-    ...actual,
-    getPipetteModelSpecs: vi.fn(),
-    getGripperDisplayName: vi.fn(),
-  }
-})
 vi.mock('react-router-dom', () => ({
   useParams: vi.fn(),
   useHistory: vi.fn(),
 }))
+vi.mock('../../../resources/instruments/hooks')
+vi.mock('../../../resources/robot-settings/hooks')
 
 const render = () => {
   return renderWithProviders(<InstrumentDetail />, {
@@ -97,11 +91,12 @@ describe('InstrumentDetail', () => {
     vi.mocked(useInstrumentsQuery).mockReturnValue({
       data: mockInstrumentsQuery,
     } as any)
-    vi.mocked(getPipetteModelSpecs).mockReturnValue({
+    vi.mocked(usePipetteModelSpecs).mockReturnValue({
       displayName: 'mockPipette',
     } as any)
-    vi.mocked(getGripperDisplayName).mockReturnValue('mockGripper')
+    vi.mocked(useGripperDisplayName).mockReturnValue('mockGripper')
     vi.mocked(useParams).mockReturnValue({ mount: 'left' })
+    vi.mocked(useIsOEMMode).mockReturnValue(false)
   })
 
   afterEach(() => {

diff --git a/app/src/pages/InstrumentDetail/index.tsx b/app/src/pages/InstrumentDetail/index.tsx
@@ -2,12 +2,6 @@ import * as React from 'react'
 import { useParams } from 'react-router-dom'
 import styled from 'styled-components'
 
-import {
-  getGripperDisplayName,
-  getPipetteModelSpecs,
-  GripperModel,
-  PipetteModel,
-} from '@opentrons/shared-data'
 import { useInstrumentsQuery, useHost } from '@opentrons/react-api-client'
 import {
   Icon,
@@ -21,11 +15,16 @@ import {
 } from '@opentrons/components'
 
 import { BackButton } from '../../atoms/buttons/BackButton'
+import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants'
 import { InstrumentInfo } from '../../organisms/InstrumentInfo'
 import { handleInstrumentDetailOverflowMenu } from '../../pages/InstrumentDetail/InstrumentDetailOverflowMenu'
-import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants'
+import {
+  useGripperDisplayName,
+  usePipetteModelSpecs,
+} from '../../resources/instruments/hooks'
 
 import type { GripperData, PipetteData } from '@opentrons/api-client'
+import type { GripperModel, PipetteModel } from '@opentrons/shared-data'
 
 export const InstrumentDetail = (): JSX.Element => {
   const host = useHost()
@@ -36,11 +35,15 @@ export const InstrumentDetail = (): JSX.Element => {
       (i): i is PipetteData | GripperData => i.ok && i.mount === mount
     ) ?? null
 
+  const pipetteDisplayName = usePipetteModelSpecs(
+    instrument?.instrumentModel as PipetteModel
+  )?.displayName
+  const gripperDisplayName = useGripperDisplayName(
+    instrument?.instrumentModel as GripperModel
+  )
+
   const displayName =
-    instrument?.mount !== 'extension'
-      ? getPipetteModelSpecs(instrument?.instrumentModel as PipetteModel)
-          ?.displayName
-      : getGripperDisplayName(instrument?.instrumentModel as GripperModel)
+    instrument?.mount !== 'extension' ? pipetteDisplayName : gripperDisplayName
 
   return (
     <>

diff --git a/app/src/pages/InstrumentsDashboard/__tests__/InstrumentsDashboard.test.tsx b/app/src/pages/InstrumentsDashboard/__tests__/InstrumentsDashboard.test.tsx
@@ -14,7 +14,7 @@ import { InstrumentDetail } from '../../../pages/InstrumentDetail'
 import type * as ReactApiClient from '@opentrons/react-api-client'
 
 const mockGripperData = {
-  instrumentModel: 'gripper_v1',
+  instrumentModel: 'gripperV1',
   instrumentType: 'gripper',
   mount: 'extension',
   serialNumber: 'ghi789',