fix(app): address Design QA comments for modules in deck config

app/src/assets/localization/en/device_details.json

@@ -3,8 +3,7 @@
   "about_module": "About {{name}}",
   "about_pipette_name": "About {{name}} Pipette",
   "about_pipette": "About pipette",
-  "add_fixture_description": "Add this item to your deck configuration. It will be referenced during protocol analysis.",
-  "add_to_slot_description": "Choose an item below to add to your deck configuration. It will be referenced during protocol analysis.",
+  "add_fixture_description": "Add this hardware to your deck configuration. It will be referenced during protocol analysis.",
   "add_to_slot": "Add to slot {{slotName}}",
   "add": "Add",
   "an_error_occurred_while_updating_module": "An error occurred while updating your {{moduleName}}. Please try again.",

app/src/assets/localization/en/protocol_setup.json

@@ -3,10 +3,10 @@
   "action_needed": "Action needed",
   "adapter_slot_location_module": "Slot {{slotName}}, {{adapterName}} on {{moduleName}}",
   "adapter_slot_location": "Slot {{slotName}}, {{adapterName}}",
-  "add_fixture": "Add {{fixtureName}} to deck configuration",
+  "add_fixture": "Add {{fixtureName}} to {{locationName}}",
   "additional_labware": "{{count}} additional labware",
   "additional_off_deck_labware": "Additional Off-Deck Labware",
-  "add_this_deck_hardware": "Add this deck hardware to your deck configuration. It will be referenced during protocol analysis.",
+  "add_this_deck_hardware": "Add this hardware to your deck configuration. It will be referenced during protocol analysis.",
   "add_to_slot": "Add to slot {{slotName}}",
   "attach_gripper_failure_reason": "Attach the required gripper to continue",
   "attach_gripper": "attach gripper",
@@ -83,7 +83,9 @@
   "initial_liquids_num_plural": "{{count}} initial liquids",
   "initial_liquids_num": "{{count}} initial liquid",
   "initial_location": "Initial Location",
-  "install_modules_and_fixtures": "Install the required modules and power them on. Install the required fixtures and review the deck configuration.",
+  "install_modules": "Install the required module.",
+  "install_modules_plural": "Install the required modules.",
+  "install_modules_and_fixtures": "Install and calibrate the required modules. Install the required fixtures.",
   "instrument_calibrations_missing_plural": "Missing {{count}} calibrations",
   "instrument_calibrations_missing": "Missing {{count}} calibration",
   "instruments_connected_plural": "{{count}} instruments attached",
@@ -132,16 +134,13 @@
   "missing_pipettes": "Missing {{count}} pipette",
   "missing": "Missing",
   "modal_instructions_title": "{{moduleName}} Setup Instructions",
-  "module_and_deck_setup": "Modules & deck",
   "module_connected": "Connected",
   "module_disconnected": "Disconnected",
   "module_instructions_link": "{{moduleName}} setup instructions",
   "module_mismatch_body": "Check that the modules connected to this robot are of the right type and generation",
   "module_name": "Module",
   "module_not_connected": "Not connected",
-  "module_setup_step_description_plural": "Install the required modules and power them on.",
-  "module_setup_step_description": "Install the required modules and power them on.",
-  "module_setup_step_title": "Modules",
+  "module_setup_step_title": "Deck hardware",
   "module_slot_location": "Slot {{slotName}}, {{moduleName}}",
   "module": "Module",
   "modules_connected_plural": "{{count}} modules attached",
@@ -164,6 +163,7 @@
   "name": "Name",
   "no_custom_values": "No custom values specified",
   "no_data": "no data",
+  "no_deck_hardware_specified": "No deck hardware are specified for this protocol.",
   "no_labware_offset_data": "no labware offset data yet",
   "no_modules_or_fixtures": "No modules or fixtures are specified for this protocol.",
   "no_modules_specified": "no modules are specified for this protocol.",
@@ -251,7 +251,7 @@
   "slot_number": "Slot Number",
   "status": "Status",
   "step": "STEP {{index}}",
-  "there_are_no_unconfigured_modules": "No {{module}} is connected. Attach one and place it in {{slot}}",
+  "there_are_no_unconfigured_modules": "No {{module}} is connected. Attach one and place it in {{slot}}.",
   "there_are_other_configured_modules": "A {{module}} is already configured in a different slot. Exit run setup and update your deck configuration to move to an already connected module. Or attach another {{module}} to continue setup.",
   "tip_length_cal_description_bullet": "Perform Tip Length Calibration for each new tip type used on a pipette.",
   "tip_length_cal_description": "This measures the Z distance between the bottom of the tip and the pipette’s nozzle. If you redo the tip length calibration for the tip you used to calibrate a pipette, you will also have to redo that Pipette Offset Calibration.",

app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx

@@ -347,7 +347,7 @@ export function AddFixtureModal({
           }
         >
           <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
-            <StyledText as="p">{t('add_to_slot_description')}</StyledText>
+            <StyledText as="p">{t('add_fixture_description')}</StyledText>
             <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
               {fixtureOptions}
               {nextStageOptions}

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/AddFixtureModal.test.tsx

@@ -58,7 +58,7 @@ describe('Touchscreen AddFixtureModal', () => {
     render(props)
     screen.getByText('Add to slot D3')
     screen.getByText(
-      'Choose an item below to add to your deck configuration. It will be referenced during protocol analysis.'
+      'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
     )
     screen.getByText('Fixtures')
     screen.getByText('Modules')
@@ -80,7 +80,7 @@ describe('Touchscreen AddFixtureModal', () => {
     render(props)
     screen.getByText('Add to slot D3')
     screen.getByText(
-      'Choose an item below to add to your deck configuration. It will be referenced during protocol analysis.'
+      'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
     )
     expect(screen.queryByText('Staging area slot')).toBeNull()
     screen.getByText('Trash bin')
@@ -111,7 +111,7 @@ describe('Desktop AddFixtureModal', () => {
     render(props)
     screen.getByText('Add to slot D3')
     screen.getByText(
-      'Add this item to your deck configuration. It will be referenced during protocol analysis.'
+      'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
     )
 
     screen.getByText('Fixtures')
@@ -131,7 +131,7 @@ describe('Desktop AddFixtureModal', () => {
     render(props)
     screen.getByText('Add to slot A1')
     screen.getByText(
-      'Add this item to your deck configuration. It will be referenced during protocol analysis.'
+      'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
     )
     screen.getByText('Fixtures')
     screen.getByText('Modules')
@@ -145,7 +145,7 @@ describe('Desktop AddFixtureModal', () => {
     render(props)
     screen.getByText('Add to slot B3')
     screen.getByText(
-      'Add this item to your deck configuration. It will be referenced during protocol analysis.'
+      'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
     )
     screen.getByText('Fixtures')
     screen.getByText('Modules')
@@ -160,7 +160,7 @@ describe('Desktop AddFixtureModal', () => {
     render(props)
     screen.getByText('Add to slot B2')
     screen.getByText(
-      'Add this item to your deck configuration. It will be referenced during protocol analysis.'
+      'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
     )
     screen.getByText('Magnetic Block GEN1')
     expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument()

app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx

@@ -150,33 +150,24 @@ export function ProtocolRunSetup({
   if (robot == null) return null
 
   const liquids = protocolAnalysis?.liquids ?? []
-
   const liquidsInLoadOrder =
     protocolAnalysis != null
       ? parseLiquidsInLoadOrder(liquids, protocolAnalysis.commands)
       : []
-
   const hasLiquids = liquidsInLoadOrder.length > 0
-
   const hasModules = protocolAnalysis != null && modules.length > 0
-
   // need config compatibility (including check for single slot conflicts)
   const requiredDeckConfigCompatibility = getRequiredDeckConfig(
     deckConfigCompatibility
   )
-
   const hasFixtures = requiredDeckConfigCompatibility.length > 0
-
-  let moduleDescription: string = t(`${MODULE_SETUP_KEY}_description`, {
-    count: modules.length,
-  })
-  if (!hasModules && !isFlex) {
-    moduleDescription = i18n.format(t('no_modules_specified'), 'capitalize')
-  } else if (isFlex && (hasModules || hasFixtures)) {
-    moduleDescription = t('install_modules_and_fixtures')
-  } else if (isFlex && !hasModules && !hasFixtures) {
-    moduleDescription = t('no_modules_or_fixtures')
-  }
+  const flexDeckHardwareDescription =
+    hasModules || hasFixtures
+      ? t('install_modules_and_fixtures')
+      : t('no_deck_hardware_specified')
+  const ot2DeckHardwareDescription = hasModules
+    ? t('install_modules', { count: modules.length })
+    : t('no_deck_hardware_specified')
 
   const StepDetailMap: Record<
     StepKey,
@@ -213,7 +204,9 @@ export function ProtocolRunSetup({
           protocolAnalysis={protocolAnalysis}
         />
       ),
-      description: moduleDescription,
+      description: isFlex
+        ? flexDeckHardwareDescription
+        : ot2DeckHardwareDescription,
     },
     [LPC_KEY]: {
       stepInternals: (
@@ -273,11 +266,7 @@ export function ProtocolRunSetup({
             </StyledText>
           ) : (
             stepsKeysInOrder.map((stepKey, index) => {
-              const setupStepTitle = t(
-                isFlex && stepKey === MODULE_SETUP_KEY
-                  ? `module_and_deck_setup`
-                  : `${stepKey}_title`
-              )
+              const setupStepTitle = t(`${stepKey}_title`)
               const showEmptySetupStep =
                 (stepKey === 'liquid_setup_step' && !hasLiquids) ||
                 (stepKey === 'module_setup_step' &&

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx

@@ -62,7 +62,7 @@ export const ChooseModuleToConfigureModal = (
     robotName,
     displaySlotName,
   } = props
-  const { t } = useTranslation(['protocol_setup', 'shared'])
+  const { t, i18n } = useTranslation(['protocol_setup', 'shared'])
   const attachedModules =
     useModulesQuery({ refetchInterval: EQUIPMENT_POLL_MS })?.data?.data ?? []
   const deckConfig = useNotifyDeckConfigurationQuery()?.data ?? []
@@ -106,7 +106,7 @@ export const ChooseModuleToConfigureModal = (
             handleConfigureModule(serialNumber)
           }}
           optionName={getFixtureDisplayName(moduleFixtures[0].id, usbPort)}
-          buttonText={t('shared:add')}
+          buttonText={i18n.format(t('shared:add'), 'capitalize')}
           isOnDevice={isOnDevice}
         />
       )
@@ -117,7 +117,7 @@ export const ChooseModuleToConfigureModal = (
 
   const contents =
     fixtureOptions.length > 0 ? (
-      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
         <StyledText as="p">{t('add_this_deck_hardware')}</StyledText>
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
           {fixtureOptions}
@@ -145,13 +145,7 @@ export const ChooseModuleToConfigureModal = (
           onClick: onCloseClick,
         }}
       >
-        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
-          <Flex flexDirection={DIRECTION_COLUMN}>
-            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
-              {contents}
-            </Flex>
-          </Flex>
-        </Flex>
+        {contents}
       </Modal>
     ) : (
       <LegacyModal
@@ -169,16 +163,8 @@ export const ChooseModuleToConfigureModal = (
         onClose={onCloseClick}
         width="27.75rem"
       >
-        <Flex flexDirection={DIRECTION_COLUMN}>
-          <Flex paddingY={SPACING.spacing16} flexDirection={DIRECTION_COLUMN}>
-            <Flex
-              flexDirection={DIRECTION_COLUMN}
-              paddingTop={SPACING.spacing8}
-              gridGap={SPACING.spacing8}
-            >
-              {contents}
-            </Flex>
-          </Flex>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
+          {contents}
         </Flex>
       </LegacyModal>
     ),
@@ -226,15 +212,16 @@ function NoUnconfiguredModules(props: NoUnconfiguredModulesProps): JSX.Element {
     <Flex
       paddingX={SPACING.spacing80}
       paddingY={SPACING.spacing40}
-      gridGap={isOnDevice ? SPACING.spacing40 : SPACING.spacing10}
+      gridGap={isOnDevice ? SPACING.spacing32 : SPACING.spacing10}
       borderRadius={isOnDevice ? BORDERS.borderRadius12 : BORDERS.borderRadius8}
-      backgroundColor={COLORS.grey35}
+      backgroundColor={isOnDevice ? COLORS.grey35 : COLORS.grey30}
       flexDirection={DIRECTION_COLUMN}
       alignItems={ALIGN_CENTER}
     >
       <Icon
         size={isOnDevice ? '2rem' : '1.25rem'}
         marginLeft={SPACING.spacing8}
+        color={COLORS.grey60}
         name="ot-spinner"
         spin
       />
@@ -248,7 +235,10 @@ function NoUnconfiguredModules(props: NoUnconfiguredModulesProps): JSX.Element {
     </Flex>
   )
   return (
-    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={isOnDevice ? SPACING.spacing32 : SPACING.spacing24}
+    >
       {configuredModuleMatches.length > 0 ? (
         <>
           <StyledText as="p">

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx

@@ -13,7 +13,10 @@ import {
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
-import { getFixtureDisplayName } from '@opentrons/shared-data'
+import {
+  getCutoutDisplayName,
+  getFixtureDisplayName,
+} from '@opentrons/shared-data'
 import { TertiaryButton } from '../../../../atoms/buttons/TertiaryButton'
 import { getTopPortalEl } from '../../../../App/portal'
 import { LegacyModal } from '../../../../molecules/LegacyModal'
@@ -45,11 +48,12 @@ export const NotConfiguredModal = (
     updateDeckConfiguration(newDeckConfig)
     onCloseClick()
   }
-
+  const cutoutDisplayName = getCutoutDisplayName(cutoutId)
   return createPortal(
     <LegacyModal
       title={t('add_fixture', {
         fixtureName: getFixtureDisplayName(requiredFixtureId),
+        locationName: cutoutDisplayName,
       })}
       onClose={onCloseClick}
       width="27.75rem"

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  Box,
   DIRECTION_COLUMN,
   Flex,
   SPACING,
@@ -16,28 +15,26 @@ export const UnMatchedModuleWarning = (): JSX.Element | null => {
   if (!showBanner) return null
 
   return (
-    <Box marginTop={SPACING.spacing8}>
-      <Banner
-        iconMarginRight={SPACING.spacing16}
-        iconMarginLeft={SPACING.spacing8}
-        type="warning"
-        size={SPACING.spacing20}
-        onCloseClick={() => setShowBanner(false)}
-      >
-        <Flex flexDirection={DIRECTION_COLUMN}>
-          <StyledText
-            as="p"
-            fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-            data-testid="UnMatchedModuleWarning_title"
-          >
-            {t('extra_module_attached')}
-          </StyledText>
+    <Banner
+      iconMarginRight={SPACING.spacing16}
+      iconMarginLeft={SPACING.spacing8}
+      type="warning"
+      size={SPACING.spacing20}
+      onCloseClick={() => setShowBanner(false)}
+    >
+      <Flex flexDirection={DIRECTION_COLUMN}>
+        <StyledText
+          as="p"
+          fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+          data-testid="UnMatchedModuleWarning_title"
+        >
+          {t('extra_module_attached')}
+        </StyledText>
 
-          <StyledText as="p" data-testid="UnMatchedModuleWarning_body">
-            {`${t('module_mismatch_body')}.`}
-          </StyledText>
-        </Flex>
-      </Banner>
-    </Box>
+        <StyledText as="p" data-testid="UnMatchedModuleWarning_body">
+          {`${t('module_mismatch_body')}.`}
+        </StyledText>
+      </Flex>
+    </Banner>
   )
 }

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/LocationConflictModal.test.tsx

@@ -100,7 +100,7 @@ describe('LocationConflictModal', () => {
     expect(props.onCloseClick).toHaveBeenCalled()
     fireEvent.click(screen.getByRole('button', { name: 'Update deck' }))
     screen.getByText('Heater-Shaker Module GEN1 in USB-1')
-    fireEvent.click(screen.getByRole('button', { name: 'add' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Add' }))
     expect(mockUpdate).toHaveBeenCalled()
   })
   it('should render the modal information for a single slot fixture conflict', () => {

app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/NotConfiguredModal.test.tsx

@@ -39,9 +39,9 @@ describe('NotConfiguredModal', () => {
   })
   it('renders the correct text and button works as expected', () => {
     const { getByText, getByRole } = render(props)
-    getByText('Add Trash bin to deck configuration')
+    getByText('Add Trash bin to B3')
     getByText(
-      'Add this deck hardware to your deck configuration. It will be referenced during protocol analysis.'
+      'Add this hardware to your deck configuration. It will be referenced during protocol analysis.'
     )
     getByText('Trash bin')
     fireEvent.click(getByRole('button', { name: 'Add' }))