fix(app): fix liquid & modules confirm (#15946)

Fixes RQA-2925 for desktop: the liquids entry now will count as complete for the purposes of not popping or being listed in the modal if you have no liquids. It also gets complete decorations if there are no liquids. That required adding that rightElement thing to the empty version of the setup step, and that also is what we would need to do for modules, so also add decorations for modules and fix the completion logic to count the module actually being plugged in again (this was RQA-2928). On the ODD, similar kind of logic but a lot easier to implement because the data is more local; we can default the state to !hasLiquids, and then use the same styling we already had implemented for runtime parameters for the setup step. Also, remove some stylistically out of date text transforms on the setup cards. ## testing and review - [x] Upload a protocol that has no liquids and no modules and no deck fixtures - [x] the liquids and modules tabs should should default to completed, meaning - [x] on desktop, they get complete badges and text (including on the OT-2) - [x] on the ODD, they get rendered green - [x] on desktop and ODD, they don't inhibit starting the run - [x] including that if you haven't confirmed some other step, the steps nag modal doesn't mention liquids - [x] on a protocol that requires modules, if you don't have the modules plugged in you get an action needed badge Closes RQA-2928 Closes RQA-2925
Opentrons · Aug 9, 2024 · b321824 · b321824
1 parent ebeb162
commit b321824
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 32 deletions.
diff --git a/app/src/assets/localization/en/protocol_setup.json b/app/src/assets/localization/en/protocol_setup.json
@@ -74,6 +74,7 @@
   "deck_conflict_info": "<block>Update the deck configuration by removing the <strong>{{currentFixture}}</strong> in location <strong>{{cutout}}</strong>. Either remove the fixture from the deck configuration or update the protocol.</block>",
   "deck_conflict": "Deck location conflict",
   "deck_hardware": "Deck hardware",
+  "deck_hardware_ready": "Deck hardware ready",
   "deck_map": "Deck Map",
   "default_values": "Default values",
   "example": "Example",

diff --git a/app/src/organisms/Devices/ProtocolRun/EmptySetupStep.tsx b/app/src/organisms/Devices/ProtocolRun/EmptySetupStep.tsx
@@ -6,24 +6,30 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  DIRECTION_ROW,
+  JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 
 interface EmptySetupStepProps {
   title: React.ReactNode
   description: string
+  rightElement?: React.ReactNode
 }
 
 export function EmptySetupStep(props: EmptySetupStepProps): JSX.Element {
-  const { title, description } = props
+  const { title, description, rightElement } = props
   return (
-    <Flex flexDirection={DIRECTION_COLUMN} color={COLORS.grey40}>
-      <LegacyStyledText
-        css={TYPOGRAPHY.h3SemiBold}
-        marginBottom={SPACING.spacing4}
-      >
-        {title}
-      </LegacyStyledText>
-      <LegacyStyledText as="p">{description}</LegacyStyledText>
+    <Flex flexDirection={DIRECTION_ROW} justifyContent={JUSTIFY_SPACE_BETWEEN}>
+      <Flex flexDirection={DIRECTION_COLUMN} color={COLORS.grey40}>
+        <LegacyStyledText
+          css={TYPOGRAPHY.h3SemiBold}
+          marginBottom={SPACING.spacing4}
+        >
+          {title}
+        </LegacyStyledText>
+        <LegacyStyledText as="p">{description}</LegacyStyledText>
+      </Flex>
+      {rightElement}
     </Flex>
   )
 }
diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunSetup.tsx
@@ -163,17 +163,6 @@ export function ProtocolRunSetup({
     return true
   })
 
-  const [
-    labwareSetupComplete,
-    setLabwareSetupComplete,
-  ] = React.useState<boolean>(false)
-  const [liquidSetupComplete, setLiquidSetupComplete] = React.useState<boolean>(
-    false
-  )
-  const [lpcComplete, setLpcComplete] = React.useState<boolean>(false)
-
-  if (robot == null) return null
-
   const liquids = protocolAnalysis?.liquids ?? []
   const liquidsInLoadOrder =
     protocolAnalysis != null
@@ -194,6 +183,18 @@ export function ProtocolRunSetup({
     ? t('install_modules', { count: modules.length })
     : t('no_deck_hardware_specified')
 
+  const [
+    labwareSetupComplete,
+    setLabwareSetupComplete,
+  ] = React.useState<boolean>(false)
+  const [liquidSetupComplete, setLiquidSetupComplete] = React.useState<boolean>(
+    !hasLiquids
+  )
+  if (!hasLiquids && missingSteps.includes('liquids')) {
+    setMissingSteps(missingSteps.filter(step => step !== 'liquids'))
+  }
+  const [lpcComplete, setLpcComplete] = React.useState<boolean>(false)
+  if (robot == null) return null
   const StepDetailMap: Record<
     StepKey,
     {
@@ -250,8 +251,14 @@ export function ProtocolRunSetup({
       rightElProps: {
         stepKey: MODULE_SETUP_KEY,
         complete:
-          calibrationStatusRobot.complete && calibrationStatusModules.complete,
-        completeText: isFlex ? t('calibration_ready') : '',
+          calibrationStatusRobot.complete &&
+          calibrationStatusModules.complete &&
+          !isMissingModule &&
+          !isFixtureMismatch,
+        completeText:
+          isFlex && hasModules
+            ? t('calibration_ready')
+            : t('deck_hardware_ready'),
         incompleteText: isFlex ? t('calibration_needed') : t('action_needed'),
         missingHardware: isMissingModule || isFixtureMismatch,
         missingHardwareText: t('action_needed'),
@@ -372,6 +379,11 @@ export function ProtocolRunSetup({
                     <EmptySetupStep
                       title={t(`${stepKey}_title`)}
                       description={StepDetailMap[stepKey].description}
+                      rightElement={
+                        <StepRightElement
+                          {...StepDetailMap[stepKey].rightElProps}
+                        />
+                      }
                     />
                   ) : (
                     <SetupStep
@@ -459,7 +471,6 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null {
           color={COLORS.black90}
           css={TYPOGRAPHY.pSemiBold}
           marginRight={SPACING.spacing16}
-          textTransform={TYPOGRAPHY.textTransformCapitalize}
           id={`RunSetupCard_${props.stepKey}_completeText`}
           whitespace="nowrap"
         >
@@ -481,7 +492,6 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null {
           color={COLORS.black90}
           css={TYPOGRAPHY.pSemiBold}
           marginRight={SPACING.spacing16}
-          textTransform={TYPOGRAPHY.textTransformCapitalize}
           id={`RunSetupCard_${props.stepKey}_missingHardwareText`}
           whitespace="nowrap"
         >
@@ -503,7 +513,6 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null {
           color={COLORS.black90}
           css={TYPOGRAPHY.pSemiBold}
           marginRight={SPACING.spacing16}
-          textTransform={TYPOGRAPHY.textTransformCapitalize}
           id={`RunSetupCard_${props.stepKey}_incompleteText`}
           whitespace="nowrap"
         >

diff --git a/app/src/pages/ProtocolSetup/index.tsx b/app/src/pages/ProtocolSetup/index.tsx
@@ -513,6 +513,8 @@ function PrepareToRun({
     areModulesReady && areFixturesReady && !isLocationConflict
       ? 'ready'
       : 'not ready'
+  // Liquids information
+  const liquidsInProtocol = mostRecentAnalysis?.liquids ?? []
 
   const isReadyToRun =
     incompleteInstrumentCount === 0 && areModulesReady && areFixturesReady
@@ -523,7 +525,11 @@ function PrepareToRun({
       if (isReadyToRun) {
         if (
           runStatus === RUN_STATUS_IDLE &&
-          !(labwareConfirmed && offsetsConfirmed && liquidsConfirmed)
+          !(
+            labwareConfirmed &&
+            offsetsConfirmed &&
+            (liquidsConfirmed || liquidsInProtocol.length === 0)
+          )
         ) {
           confirmStepsComplete()
         } else if (runStatus === RUN_STATUS_IDLE && isHeaterShakerInProtocol) {
@@ -654,9 +660,6 @@ function PrepareToRun({
     runRecord?.data?.labwareOffsets ?? []
   )
 
-  // Liquids information
-  const liquidsInProtocol = mostRecentAnalysis?.liquids ?? []
-
   const { data: doorStatus } = useDoorQuery({
     refetchInterval: FETCH_DURATION_MS,
   })
@@ -757,7 +760,7 @@ function PrepareToRun({
               detail={modulesDetail}
               subDetail={modulesSubDetail}
               status={modulesStatus}
-              disabled={
+              interactionDisabled={
                 protocolModulesInfo.length === 0 && !protocolHasFixtures
               }
             />
@@ -799,15 +802,19 @@ function PrepareToRun({
                 setSetupScreen('liquids')
               }}
               title={i18n.format(t('liquids'), 'capitalize')}
-              status={liquidsConfirmed ? 'ready' : 'general'}
+              status={
+                liquidsConfirmed || liquidsInProtocol.length === 0
+                  ? 'ready'
+                  : 'general'
+              }
               detail={
                 liquidsInProtocol.length > 0
                   ? t('initial_liquids_num', {
                       count: liquidsInProtocol.length,
                     })
                   : t('liquids_not_in_setup')
               }
-              disabled={liquidsInProtocol.length === 0}
+              interactionDisabled={liquidsInProtocol.length === 0}
             />
           </>
         ) : (