fix(protocol-designer): update copy, add tooltips (#17343)

This PR fixes various small copy and style bugs in PD: 1) adds subtext to select gripper page in onboarding 2) remove quantity dropdown from absorbance reader in onboarding 3) change copy for no gripper with absorbance reader timeline warning, and 4) add logic for disabled tooltips for labware tab of decksetuptools Closes AUTH-1348 Closes AUTH-1349 Closes AUTH-1351 Closes AUTH-1352 Closes AUTH-1353
Opentrons · Jan 24, 2025 · 14f956d · 14f956d
1 parent 10c4fab
commit 14f956d
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 16 deletions.
diff --git a/protocol-designer/src/assets/localization/en/alert.json b/protocol-designer/src/assets/localization/en/alert.json
@@ -168,8 +168,8 @@
         "body": "This step tries to use labware in the Absorbance Plate Reader. Open the lid before this step."
       },
       "ABSORBANCE_READER_NO_GRIPPER": {
-        "title": "Cannot change Absorbance Plate Reader lid state without gripper",
-        "body": "The gripper is required to open or close the plate reader lid. Add a gripper or remove this step to proceed."
+        "title": "Cannot save Absorbance Plate Reader step without gripper",
+        "body": "This step requires the gripper to open or close the Absorbance Plate Reader lid. Add a gripper or remove this step to proceed."
       }
     },
     "warning": {

diff --git a/protocol-designer/src/assets/localization/en/create_new_protocol.json b/protocol-designer/src/assets/localization/en/create_new_protocol.json
@@ -34,6 +34,7 @@
   "show_default_tips": "Show default tips",
   "show_tips": "Show more tip types",
   "slots_limit_reached": "Slots limit reached",
+  "some_modules_require_gripper": "Some modules require a gripper to operate.",
   "staging_area_has_labware": "This staging area slot has labware",
   "staging_area_will_delete_labware": "The staging area slot that you are about to delete has labware placed on it. If you make these changes to your protocol starting deck, the labware will be deleted as well.",
   "stagingArea": "Staging area",

diff --git a/protocol-designer/src/assets/localization/en/starting_deck_state.json b/protocol-designer/src/assets/localization/en/starting_deck_state.json
@@ -49,7 +49,7 @@
   "onDeck": "On deck",
   "one_item": "No more than 1 {{hardware}} allowed on the deck at one time",
   "only_display_rec": "Only display recommended labware",
-  "plate_reader_no_labware": "Labware cannot be loaded onto a plate reader. You can move labware onto the plate reader when building your protocol",
+  "plate_reader_no_labware": "Load labware onto Absorbance Plate Reader using a move step",
   "protocol_starting_deck": "Protocol starting deck",
   "read_more_gen1_gen2": "Read more about the differences between GEN1 and GEN2 Magnetic Modules",
   "rename_lab": "Rename labware",
@@ -59,10 +59,12 @@
   "tc_slots_occupied_flex": "The Thermocycler needs slots A1 and B1. Slot A1 is occupied",
   "tc_slots_occupied_ot2": "The Thermocycler needs slots 7, 8, 10, and 11. One or more of those slots is occupied",
   "tipRack": "Tip racks",
+  "trash_no_labware": "Cannot load labware into Trash Bin",
   "trash_required": "A trash bin or waste chute is required",
   "tubeRack": "Tube racks",
   "untitled_protocol": "Untitled protocol",
   "upload_custom_labware": "Upload custom labware",
+  "waste_chute_no_labware": "Cannot load labware into Waste Chute",
   "we_added_hardware": "We've added your deck hardware!",
   "wellPlate": "Well plates"
 }
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectGripper.tsx
@@ -4,11 +4,12 @@ import without from 'lodash/without'
 import { useLocation } from 'react-router-dom'
 import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
 import {
+  COLORS,
+  DIRECTION_COLUMN,
   Flex,
+  RadioButton,
   SPACING,
   StyledText,
-  RadioButton,
-  DIRECTION_COLUMN,
 } from '@opentrons/components'
 import { WizardBody } from './WizardBody'
 import { HandleEnter } from '../../atoms/HandleEnter'
@@ -55,9 +56,14 @@ export function SelectGripper(props: WizardTileProps): JSX.Element | null {
       >
         <Flex flexDirection={DIRECTION_COLUMN}>
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
-            <StyledText desktopStyle="headingSmallBold">
-              {t('need_gripper')}
-            </StyledText>
+            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+              <StyledText desktopStyle="headingSmallBold">
+                {t('need_gripper')}
+              </StyledText>
+              <StyledText desktopStyle="bodyLargeRegular" color={COLORS.grey60}>
+                {t('some_modules_require_gripper')}
+              </StyledText>
+            </Flex>
             <Flex gridGap={SPACING.spacing4}>
               <RadioButton
                 onChange={() => {

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx
@@ -16,7 +16,6 @@ import {
   WRAP,
 } from '@opentrons/components'
 import {
-  ABSORBANCE_READER_TYPE,
   ABSORBANCE_READER_V1,
   FLEX_ROBOT_TYPE,
   getModuleDisplayName,
@@ -73,7 +72,6 @@ export function SelectModules(props: WizardTileProps): JSX.Element | null {
     TEMPERATURE_MODULE_TYPE,
     HEATERSHAKER_MODULE_TYPE,
     MAGNETIC_BLOCK_TYPE,
-    ABSORBANCE_READER_TYPE,
   ]
   const hasGripper = additionalEquipment.some(aE => aE === 'gripper')
 

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/SelectGripper.test.tsx
@@ -61,6 +61,7 @@ describe('SelectGripper', () => {
     screen.getByText(
       'Do you want to move labware automatically with the gripper?'
     )
+    screen.getByText('Some modules require a gripper to operate.')
     fireEvent.click(screen.getByRole('label', { name: 'Yes' }))
     expect(props.setValue).toHaveBeenCalled()
     fireEvent.click(screen.getByRole('label', { name: 'No' }))

diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx
@@ -245,14 +245,29 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
       setTab('hardware')
     },
   }
+
+  const isLabwareTabDisabled =
+    selectedFixture === 'wasteChute' ||
+    selectedFixture === 'wasteChuteAndStagingArea' ||
+    selectedFixture === 'trashBin' ||
+    selectedModuleModel === ABSORBANCE_READER_V1
+  let labwareTabDisabledReason: string | null = null
+  if (selectedModuleModel === ABSORBANCE_READER_V1) {
+    labwareTabDisabledReason = t('plate_reader_no_labware')
+  }
+  if (selectedFixture === 'trashBin') {
+    labwareTabDisabledReason = t('trash_no_labware')
+  }
+  if (
+    selectedFixture === 'wasteChute' ||
+    selectedFixture === 'wasteChuteAndStagingArea'
+  ) {
+    labwareTabDisabledReason = t('waste_chute_no_labware')
+  }
   const labwareTab = {
     text: t('labware'),
-    disabled:
-      selectedFixture === 'wasteChute' ||
-      selectedFixture === 'wasteChuteAndStagingArea' ||
-      selectedFixture === 'trashBin' ||
-      selectedModuleModel === ABSORBANCE_READER_V1,
-    disabledReasonForTooltip: t('plate_reader_no_labware'),
+    disabled: isLabwareTabDisabled,
+    disabledReasonForTooltip: labwareTabDisabledReason,
     isActive: tab === 'labware',
     onClick: () => {
       setTab('labware')