fix(protocol-designer): dropdown option text refinement (#17151)

closes RQA-3773 and RQA-3774
Opentrons · Dec 20, 2024 · efac75b · efac75b
1 parent ad0b586
commit efac75b
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 118 deletions.
diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx
@@ -38,6 +38,8 @@ import { MagneticBlockFixture } from './MagneticBlockFixture'
 import { ThermocyclerFixture } from './ThermocyclerFixture'
 import { AbsorbanceReaderFixture } from './AbsorbanceReaderFixture'
 
+export * from './constants'
+
 interface DeckConfiguratorProps {
   deckConfig: DeckConfiguration
   handleClickAdd: (cutoutId: CutoutId) => void

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -24,6 +24,7 @@ import { MenuItem } from '../../atoms/MenuList/MenuItem'
 import { Tooltip } from '../../atoms/Tooltip'
 import { StyledText } from '../../atoms/StyledText'
 import { LiquidIcon } from '../LiquidIcon'
+import { DeckInfoLabel } from '../DeckInfoLabel'
 
 export interface DropdownOption {
   name: string
@@ -32,6 +33,8 @@ export interface DropdownOption {
   liquidColor?: string
   /** optional dropdown option for adding the deck label */
   deckLabel?: string
+  /** subtext below the name */
+  subtext?: string
   disabled?: boolean
   tooltipText?: string
 }
@@ -250,7 +253,11 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             {currentOption.liquidColor != null ? (
               <LiquidIcon color={currentOption.liquidColor} />
             ) : null}
+            {currentOption.deckLabel != null ? (
+              <DeckInfoLabel deckLabel={currentOption.deckLabel} svgSize={13} />
+            ) : null}
             <Flex
+              flexDirection={DIRECTION_COLUMN}
               css={css`
                 font-weight: ${dropdownType === 'rounded'
                   ? TYPOGRAPHY.pSemiBold
@@ -307,7 +314,26 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                     {option.liquidColor != null ? (
                       <LiquidIcon color={option.liquidColor} />
                     ) : null}
-                    {option.name}
+                    {option.deckLabel != null ? (
+                      <DeckInfoLabel
+                        deckLabel={option.deckLabel}
+                        svgSize={13}
+                      />
+                    ) : null}
+                    <Flex
+                      flexDirection={DIRECTION_COLUMN}
+                      gridGap={option.subtext != null ? SPACING.spacing4 : '0'}
+                    >
+                      <StyledText desktopStyle="captionRegular">
+                        {option.name}
+                      </StyledText>
+                      <StyledText
+                        desktopStyle="captionRegular"
+                        color={COLORS.black70}
+                      >
+                        {option.subtext}
+                      </StyledText>
+                    </Flex>
                   </Flex>
                 </MenuItem>
                 {option.tooltipText != null ? (

diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -1,8 +1,10 @@
 import { useTranslation } from 'react-i18next'
 import { useDispatch } from 'react-redux'
 import {
+  ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
+  DeckInfoLabel,
   DropdownMenu,
   Flex,
   ListItem,
@@ -108,10 +110,28 @@ export function DropdownStepFormField(
             {title}
           </StyledText>
           <ListItem type="noActive">
-            <Flex padding={SPACING.spacing12}>
-              <StyledText desktopStyle="bodyDefaultRegular">
-                {options[0].name}
-              </StyledText>
+            <Flex
+              gridGap={SPACING.spacing8}
+              alignItems={ALIGN_CENTER}
+              padding={SPACING.spacing12}
+            >
+              {options[0].deckLabel != null ? (
+                <DeckInfoLabel deckLabel={options[0].deckLabel} svgSize={13} />
+              ) : null}
+              <Flex
+                flexDirection={DIRECTION_COLUMN}
+                gridGap={options[0].subtext != null ? SPACING.spacing4 : '0'}
+              >
+                <StyledText desktopStyle="captionRegular">
+                  {options[0].name}
+                </StyledText>
+                <StyledText
+                  desktopStyle="captionRegular"
+                  color={COLORS.black70}
+                >
+                  {options[0].subtext}
+                </StyledText>
+              </Flex>
             </Flex>
           </ListItem>
         </Flex>

diff --git a/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx b/protocol-designer/src/organisms/MaterialsListModal/__tests__/MaterialsListModal.test.tsx
@@ -137,7 +137,7 @@ describe('MaterialsListModal', () => {
           lidTargetTemp: null,
           lidOpen: false,
         },
-        slot: 'span7_8_10_11',
+        slot: '7',
         type: 'thermocyclerModuleType',
       },
     ] as ModuleOnDeck[]

diff --git a/protocol-designer/src/top-selectors/labware-locations/index.ts b/protocol-designer/src/top-selectors/labware-locations/index.ts
@@ -166,8 +166,8 @@ export const getUnoccupiedLabwareLocationOptions: Selector<
               {
                 name:
                   modIdWithAdapter != null
-                    ? `${adapterDisplayName} on top of ${moduleUnderAdapter} in slot ${moduleSlotInfo}`
-                    : `${adapterDisplayName} on slot ${adapterSlotInfo}`,
+                    ? `${moduleSlotInfo} on ${moduleUnderAdapter} with ${adapterDisplayName}`
+                    : `${adapterSlotInfo} with ${adapterDisplayName}`,
                 value: labwareId,
               },
             ]
@@ -186,13 +186,9 @@ export const getUnoccupiedLabwareLocationOptions: Selector<
           : [
               ...acc,
               {
-                name: `${getModuleDisplayName(
+                name: `${modOnDeck.slot} on ${getModuleDisplayName(
                   moduleEntities[modId].model
-                )} in slot ${
-                  modOnDeck.slot === 'span7_8_10_11'
-                    ? '7, 8, 10, 11'
-                    : modOnDeck.slot
-                }`,
+                )}`,
                 value: modId,
               },
             ]
@@ -234,7 +230,7 @@ export const getUnoccupiedLabwareLocationOptions: Selector<
         )
       })
       .map(slotId => ({ name: slotId, value: slotId }))
-    const offDeck = { name: 'Off-Deck', value: 'offDeck' }
+    const offDeck = { name: 'Off-deck', value: 'offDeck' }
     const wasteChuteSlot = {
       name: 'Waste Chute in D3',
       value: WASTE_CHUTE_CUTOUT,

diff --git a/protocol-designer/src/ui/labware/__tests__/selectors.test.ts b/protocol-designer/src/ui/labware/__tests__/selectors.test.ts
@@ -9,7 +9,6 @@ import {
   THERMOCYCLER_MODULE_TYPE,
   THERMOCYCLER_MODULE_V1,
 } from '@opentrons/shared-data'
-import { SPAN7_8_10_11_SLOT } from '../../../constants'
 import {
   getDisposalOptions,
   getLabwareOptions,
@@ -102,7 +101,7 @@ describe('labware selectors', () => {
       expect(
         // @ts-expect-error(sa, 2021-6-15): resultFunc
         getDisposalOptions.resultFunc(additionalEquipmentEntities)
-      ).toEqual([{ name: 'Trash Bin', value: mockTrashId }])
+      ).toEqual([{ name: 'Trash bin', value: mockTrashId }])
     })
     it('filters out additional equipment that is NOT trash when multiple trash bins present', () => {
       const mockTrashId = 'mockTrashId'
@@ -129,8 +128,8 @@ describe('labware selectors', () => {
         // @ts-expect-error(sa, 2021-6-15): resultFunc
         getDisposalOptions.resultFunc(additionalEquipmentEntities)
       ).toEqual([
-        { name: 'Trash Bin', value: mockTrashId },
-        { name: 'Trash Bin', value: mockTrashId2 },
+        { name: 'Trash bin', value: mockTrashId },
+        { name: 'Trash bin', value: mockTrashId2 },
       ])
     })
   })
@@ -142,7 +141,12 @@ describe('labware selectors', () => {
         getLabwareOptions.resultFunc(
           {},
           {},
-          { labware: {}, modules: {}, pipettes: {} },
+          {
+            labware: {},
+            modules: {},
+            pipettes: {},
+            additionalEquipmentOnDeck: {},
+          },
           {},
           {},
           {}
@@ -153,13 +157,13 @@ describe('labware selectors', () => {
     it('should return labware options when no modules are present, with no tipracks', () => {
       const labwareEntities = {
         ...tipracks,
-        ...trash,
         ...otherLabware,
       }
       const initialDeckSetup = {
         labware: labwareEntities,
         modules: {},
         pipettes: {},
+        additionalEquipmentOnDeck: {},
       }
       expect(
         // @ts-expect-error(sa, 2021-6-15): resultFunc
@@ -171,13 +175,10 @@ describe('labware selectors', () => {
           {},
           {}
         )
-      ).toEqual([
-        { name: 'Source Plate', value: 'wellPlateId' },
-        { name: 'Trash', value: mockTrash },
-      ])
+      ).toEqual([{ name: 'Source Plate', value: 'wellPlateId' }])
     })
 
-    it('should return labware options with module prefixes when a labware is on module', () => {
+    it('should return labware options with no module prefixes even when a labware is on module', () => {
       const labware = {
         wellPlateId: {
           ...otherLabware.wellPlateId,
@@ -206,6 +207,9 @@ describe('labware selectors', () => {
           ...trash,
           ...labware,
         },
+        additionalEquipmentOnDeck: {
+          trash: { id: 'trash', location: 'cutout12', name: 'trashBin' },
+        },
         modules: {
           magModuleId: {
             id: 'magModuleId',
@@ -223,7 +227,7 @@ describe('labware selectors', () => {
             id: 'thermocyclerId',
             type: THERMOCYCLER_MODULE_TYPE,
             model: THERMOCYCLER_MODULE_V1,
-            slot: SPAN7_8_10_11_SLOT,
+            slot: '8',
           },
           heaterShakerId: {
             id: 'heaterShakerId',
@@ -253,11 +257,11 @@ describe('labware selectors', () => {
           {}
         )
       ).toEqual([
-        { name: 'HS Plate in Heater-Shaker', value: 'hsPlateId' },
-        { name: 'TC Plate in Thermocycler', value: 'tcPlateId' },
-        { name: 'Temp Plate in Temperature Module', value: 'tempPlateId' },
+        { name: 'HS Plate in 6', value: 'hsPlateId' },
+        { name: 'TC Plate in A1+B1', value: 'tcPlateId' },
+        { name: 'Temp Plate in 3', value: 'tempPlateId' },
         { name: 'Trash', value: mockTrash },
-        { name: 'Well Plate in Magnetic Module', value: 'wellPlateId' },
+        { name: 'Well Plate in 1', value: 'wellPlateId' },
       ])
     })
 
@@ -272,7 +276,6 @@ describe('labware selectors', () => {
       const initialDeckSetup = {
         pipettes: {},
         labware: {
-          ...trash,
           ...labware,
         },
         modules: {
@@ -283,6 +286,9 @@ describe('labware selectors', () => {
             slot: '1',
           },
         },
+        additionalEquipmentOnDeck: {
+          trash: { id: 'trash', name: 'trashBin', location: 'cutout12' },
+        },
       }
 
       const nicknames: Record<string, string> = {
@@ -312,14 +318,14 @@ describe('labware selectors', () => {
         )
       ).toEqual([
         { name: 'Trash', value: mockTrash },
-        { name: 'Well Plate in Magnetic Module', value: 'wellPlateId' },
+        { name: 'Well Plate in 1', value: 'wellPlateId' },
       ])
     })
   })
 
   describe('_sortLabwareDropdownOptions', () => {
     const trashOption = {
-      name: 'Trash Bin',
+      name: 'Trash bin',
       value: mockTrash,
     }
     const zzzPlateOption = { name: 'Zzz Plate', value: 'zzz' }