fix(app): add resolve button for location conflicts with modules (#14134

) closes RQA-2017
Opentrons · Dec 8, 2023 · 6b8f9b3 · 6b8f9b3
1 parent faf7b51
commit 6b8f9b3
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 23 deletions.
diff --git a/app/src/assets/localization/en/protocol_setup.json b/app/src/assets/localization/en/protocol_setup.json
@@ -207,6 +207,7 @@
   "recommended": "Recommended",
   "required_instrument_calibrations": "required instrument calibrations",
   "required_tip_racks_title": "Required Tip Length Calibrations",
+  "resolve": "Resolve",
   "robot_cal_description": "Robot calibration establishes how the robot knows where it is in relation to the deck. Accurate Robot calibration is essential to run protocols successfully. Robot calibration has 3 parts: Deck calibration, Tip Length calibration and Pipette Offset calibration.",
   "robot_cal_help_title": "How Robot Calibration Works",
   "robot_calibration_step_description_pipettes_only": "Review required instruments and calibrations for this protocol.",

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx
@@ -443,7 +443,7 @@ export function ModulesListItem({
                   onClick={() => setShowLocationConflictModal(true)}
                 >
                   <StyledText as="label" cursor="pointer">
-                    {t('update_deck')}
+                    {t('resolve')}
                   </StyledText>
                 </TertiaryButton>
               </Flex>

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/__tests__/SetupModulesList.test.tsx
@@ -472,7 +472,7 @@ describe('SetupModulesList', () => {
     getByText('No USB connection required')
     getByText('Location conflict')
     getByText('Magnetic Block GEN1')
-    getByRole('button', { name: 'Update deck' }).click()
+    getByRole('button', { name: 'Resolve' }).click()
     getByText('mock location conflict modal')
   })
 })
diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx
@@ -85,9 +85,9 @@ export function FixtureTable({
         lineHeight={TYPOGRAPHY.lineHeight28}
         paddingX={SPACING.spacing24}
       >
-        <StyledText flex="4 0 0">{t('fixture')}</StyledText>
+        <StyledText flex="3.5 0 0">{t('fixture')}</StyledText>
         <StyledText flex="2 0 0">{t('location')}</StyledText>
-        <StyledText flex="3 0 0"> {t('status')}</StyledText>
+        <StyledText flex="4 0 0"> {t('status')}</StyledText>
       </Flex>
       {requiredDeckConfigCompatibility.map(
         ({ cutoutId, cutoutFixtureId, compatibleCutoutFixtureIds }, index) => {
@@ -159,7 +159,7 @@ export function FixtureTable({
                     : 'none'
                 }
               >
-                <Flex flex="4 0 0" alignItems={ALIGN_CENTER}>
+                <Flex flex="3.5 0 0" alignItems={ALIGN_CENTER}>
                   <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
                     {cutoutFixtureId != null && isCurrentFixtureCompatible
                       ? getFixtureDisplayName(cutoutFixtureId)
@@ -170,7 +170,7 @@ export function FixtureTable({
                   <LocationIcon slotName={getCutoutDisplayName(cutoutId)} />
                 </Flex>
                 <Flex
-                  flex="3 0 0"
+                  flex="4 0 0"
                   alignItems={ALIGN_CENTER}
                   justifyContent={JUSTIFY_SPACE_BETWEEN}
                 >

diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/__tests__/ProtocolSetupModulesAndDeck.test.tsx
@@ -363,7 +363,7 @@ describe('ProtocolSetupModulesAndDeck', () => {
     ])
     const [{ getByText }] = render()
     getByText('mock FixtureTable')
-    getByText('Location conflict').click()
+    getByText('Resolve').click()
     getByText('mock location conflict modal')
   })
 

diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/index.tsx
@@ -83,6 +83,7 @@ interface RenderModuleStatusProps {
     continuePastCommandFailure: boolean
   ) => Promise<CommandData[]>
   conflictedFixture?: CutoutConfig
+  setShowLocationConflictModal: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 function RenderModuleStatus({
@@ -94,14 +95,15 @@ function RenderModuleStatus({
   setPrepCommandErrorMessage,
   chainLiveCommands,
   conflictedFixture,
+  setShowLocationConflictModal,
 }: RenderModuleStatusProps): JSX.Element {
   const { makeSnackbar } = useToaster()
-  const { i18n, t } = useTranslation(['protocol_setup', 'module_setup_wizard'])
+  const { i18n, t } = useTranslation(['protocol_setup', 'module_wizard_flows'])
 
   const handleCalibrate = (): void => {
     if (module.attachedModuleMatch != null) {
       if (getModuleTooHot(module.attachedModuleMatch)) {
-        makeSnackbar(t('module_setup_wizard:module_too_hot'))
+        makeSnackbar(t('module_wizard_flows:module_too_hot'))
       } else {
         chainLiveCommands(
           getModulePrepCommands(module.attachedModuleMatch),
@@ -129,16 +131,19 @@ function RenderModuleStatus({
   )
   if (conflictedFixture != null) {
     moduleStatus = (
-      <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
+      <>
         <Chip
           text={t('location_conflict')}
           type="warning"
           background={false}
           iconName="connection-status"
         />
-
-        <Icon name="more" size="3rem" />
-      </Flex>
+        <SmallButton
+          buttonCategory="rounded"
+          buttonText={t('resolve')}
+          onClick={() => setShowLocationConflictModal(true)}
+        />
+      </>
     )
   } else if (
     isModuleReady &&
@@ -258,7 +263,7 @@ function RowModule({
           isDuplicateModuleModel ? setShowMultipleModulesModal(true) : null
         }
       >
-        <Flex flex="4 0 0" alignItems={ALIGN_CENTER}>
+        <Flex flex="3.5 0 0" alignItems={ALIGN_CENTER}>
           <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
             {getModuleDisplayName(module.moduleDef.model)}
           </StyledText>
@@ -273,21 +278,16 @@ function RowModule({
           />
         </Flex>
         {isNonConnectingModule ? (
-          <Flex flex="3 0 0" alignItems={ALIGN_CENTER}>
+          <Flex flex="4 0 0" alignItems={ALIGN_CENTER}>
             <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
               {t('n_a')}
             </StyledText>
           </Flex>
         ) : (
           <Flex
-            flex="3 0 0"
+            flex="4 0 0"
             alignItems={ALIGN_CENTER}
             justifyContent={JUSTIFY_SPACE_BETWEEN}
-            onClick={
-              conflictedFixture != null
-                ? () => setShowLocationConflictModal(true)
-                : undefined
-            }
           >
             <RenderModuleStatus
               isModuleReady={isModuleReady}
@@ -298,6 +298,7 @@ function RowModule({
               chainLiveCommands={chainLiveCommands}
               setPrepCommandErrorMessage={setPrepCommandErrorMessage}
               conflictedFixture={conflictedFixture}
+              setShowLocationConflictModal={setShowLocationConflictModal}
             />
           </Flex>
         )}
@@ -436,9 +437,9 @@ export function ProtocolSetupModulesAndDeck({
                 lineHeight={TYPOGRAPHY.lineHeight28}
                 paddingX={SPACING.spacing24}
               >
-                <StyledText flex="4 0 0">{t('module')}</StyledText>
+                <StyledText flex="3.5 0 0">{t('module')}</StyledText>
                 <StyledText flex="2 0 0">{t('location')}</StyledText>
-                <StyledText flex="3 0 0"> {t('status')}</StyledText>
+                <StyledText flex="4 0 0"> {t('status')}</StyledText>
               </Flex>
               {attachedProtocolModuleMatches.map(module => {
                 // check for duplicate module model in list of modules for protocol