Update styling for labware setup on desktop

Author: smb2268

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

@@ -43,6 +43,7 @@
   "calibration_required_calibrate_pipette_first": "Calibration required Calibrate pipette first",
   "calibration_status": "calibration status",
   "cancel_and_restart_to_edit": "Cancel the run and restart setup to edit",
+  "check_locations_and_volumes": "Check locations and volumes",
   "choose_csv_file": "Choose CSV file",
   "choose_enum": "Choose {{displayName}}",
   "closing": "Closing...",
@@ -110,9 +111,11 @@
   "labware": "Labware",
   "labware_latch": "Labware Latch",
   "labware_latch_instructions": "Use latch control for easy placement of labware.",
+  "labware_liquids_setup_step_description": "Gather your labware & liquids and place them on the deck to finish setting up your protocol.",
+  "labware_liquids_setup_step_title": "Labware & Liquids",
   "labware_location": "Labware Location",
   "labware_name": "Labware name",
-  "labware_placement": "labware placement",
+  "labware_placement": "labware and liquid placement",
   "labware_position_check": "Labware Position Check",
   "labware_position_check_not_available": "Labware Position Check is not available after run has started",
   "labware_position_check_not_available_analyzing_on_robot": "Labware Position Check is not available while protocol is analyzing on robot",
@@ -121,8 +124,6 @@
   "labware_position_check_step_title": "Labware Position Check",
   "labware_position_check_text": "Labware Position Check is a recommended workflow that helps you verify the position of each labware on the deck. During this check, you can create Labware Offsets that adjust how the robot moves to each labware in the X, Y and Z directions.",
   "labware_quantity": "Quantity: {{quantity}}",
-  "labware_setup_step_description": "Gather the following labware and full tip racks. To run your protocol without Labware Position Check, place and secure labware in their initial locations.",
-  "labware_setup_step_title": "Labware",
   "last_calibrated": "Last calibrated: {{date}}",
   "learn_how_it_works": "Learn how it works",
   "learn_more": "Learn more",

app/src/molecules/ToggleGroup/useToggleGroup.tsx

@@ -7,9 +7,12 @@ import type { ReactNode } from 'react'
 export const useToggleGroup = (
   left: string,
   right: string,
-  trackEventName?: string
+  trackEventName?: string,
+  selectRightFirst?: boolean
 ): [string, ReactNode] => {
-  const [selectedValue, setSelectedValue] = useState<string>(left)
+  const [selectedValue, setSelectedValue] = useState<string>(
+    selectRightFirst ? right : left
+  )
   const trackEvent = useTrackEvent()
   const handleLeftClick = (): void => {
     setSelectedValue(left)

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderModalContainer/modals/ConfirmMissingStepsModal.tsx

@@ -15,7 +15,6 @@ import {
 import {
   LPC_STEP_KEY,
   LABWARE_SETUP_STEP_KEY,
-  LIQUID_SETUP_STEP_KEY,
   MODULE_SETUP_STEP_KEY,
   ROBOT_CALIBRATION_STEP_KEY,
 } from '/app/redux/protocol-runs'
@@ -24,7 +23,6 @@ import type { StepKey } from '/app/redux/protocol-runs'
 const STEP_KEY_TO_I18N_KEY = {
   [LPC_STEP_KEY]: 'applied_labware_offsets',
   [LABWARE_SETUP_STEP_KEY]: 'labware_placement',
-  [LIQUID_SETUP_STEP_KEY]: 'liquids',
   [MODULE_SETUP_STEP_KEY]: 'module_setup',
   [ROBOT_CALIBRATION_STEP_KEY]: 'robot_calibration',
 }

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

@@ -10,6 +10,7 @@ import {
   FLEX_MAX_CONTENT,
   Flex,
   Icon,
+  StyledText,
   LegacyStyledText,
   Link,
   NO_WRAP,
@@ -47,7 +48,6 @@ import {
   MODULE_SETUP_STEP_KEY,
   LPC_STEP_KEY,
   LABWARE_SETUP_STEP_KEY,
-  LIQUID_SETUP_STEP_KEY,
   updateRunSetupStepsComplete,
   getMissingSetupSteps,
 } from '/app/redux/protocol-runs'
@@ -56,7 +56,6 @@ import { SetupLabwarePositionCheck } from './SetupLabwarePositionCheck'
 import { SetupRobotCalibration } from './SetupRobotCalibration'
 import { SetupModuleAndDeck } from './SetupModuleAndDeck'
 import { SetupStep } from './SetupStep'
-import { SetupLiquids } from './SetupLiquids'
 import { EmptySetupStep } from './EmptySetupStep'
 import { HowLPCWorksModal } from './SetupLabwarePositionCheck/HowLPCWorksModal'
 import { useFeatureFlag } from '/app/redux/config'
@@ -119,8 +118,6 @@ export function ProtocolRunSetup({
 
   const isMissingModule = missingModuleIds.length > 0
 
-  const liquids = protocolAnalysis?.liquids ?? []
-  const hasLiquids = liquids.length > 0
   const hasModules = protocolAnalysis != null && modules.length > 0
   // need config compatibility (including check for single slot conflicts)
   const requiredDeckConfigCompatibility = getRequiredDeckConfig(
@@ -250,14 +247,7 @@ export function ProtocolRunSetup({
               })
             )
             if (confirmed) {
-              const nextStep =
-                orderedApplicableSteps.findIndex(
-                  v => v === LABWARE_SETUP_STEP_KEY
-                ) ===
-                orderedApplicableSteps.length - 1
-                  ? null
-                  : LIQUID_SETUP_STEP_KEY
-              setExpandedStepKey(nextStep)
+              setExpandedStepKey(null)
             }
           }}
         />
@@ -268,37 +258,17 @@ export function ProtocolRunSetup({
         complete: !missingSteps.includes(LABWARE_SETUP_STEP_KEY),
         completeText: t('placements_ready'),
         incompleteText: null,
-        incompleteElement: null,
-      },
-    },
-    [LIQUID_SETUP_STEP_KEY]: {
-      stepInternals: (
-        <SetupLiquids
-          robotName={robotName}
-          runId={runId}
-          protocolAnalysis={protocolAnalysis}
-          isLiquidSetupConfirmed={!missingSteps.includes(LIQUID_SETUP_STEP_KEY)}
-          setLiquidSetupConfirmed={(confirmed: boolean) => {
-            dispatch(
-              updateRunSetupStepsComplete(runId, {
-                [LIQUID_SETUP_STEP_KEY]: confirmed,
-              })
-            )
-            if (confirmed) {
-              setExpandedStepKey(null)
-            }
-          }}
-        />
-      ),
-      description: hasLiquids
-        ? t(`${LIQUID_SETUP_STEP_KEY}_description`)
-        : i18n.format(t('liquids_not_in_the_protocol'), 'capitalize'),
-      rightElProps: {
-        stepKey: LIQUID_SETUP_STEP_KEY,
-        complete: !missingSteps.includes(LIQUID_SETUP_STEP_KEY),
-        completeText: t('liquids_ready'),
-        incompleteText: null,
-        incompleteElement: null,
+        incompleteElement: (
+          <StyledText
+            color={COLORS.black90}
+            css={TYPOGRAPHY.pSemiBold}
+            marginRight={SPACING.spacing16}
+            id={`RunSetupCard_${LABWARE_SETUP_STEP_KEY}_incompleteText`}
+            whitespace={NO_WRAP}
+          >
+            {t('check_locations_and_volumes')}
+          </StyledText>
+        ),
       },
     },
   }
@@ -322,10 +292,9 @@ export function ProtocolRunSetup({
             orderedSteps.map((stepKey, index) => {
               const setupStepTitle = t(`${stepKey}_title`)
               const showEmptySetupStep =
-                (stepKey === 'liquid_setup_step' && !hasLiquids) ||
-                (stepKey === 'module_setup_step' &&
-                  ((!isFlex && !hasModules) ||
-                    (isFlex && !hasModules && !hasFixtures)))
+                stepKey === 'module_setup_step' &&
+                ((!isFlex && !hasModules) ||
+                  (isFlex && !hasModules && !hasFixtures))
               return (
                 <Flex flexDirection={DIRECTION_COLUMN} key={stepKey}>
                   {showEmptySetupStep ? (

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx

@@ -57,12 +57,9 @@ import type { ModuleTypesThatRequireExtraAttention } from '../utils/getModuleTyp
 const LabwareRow = styled.div`
   display: ${DISPLAY_GRID};
   grid-template-columns: 90px 12fr;
-  border-style: ${BORDERS.styleSolid};
-  border-width: 1px;
-  border-color: ${COLORS.grey30};
+  background-color: ${COLORS.grey20};
   border-radius: ${BORDERS.borderRadius4};
-  padding: ${SPACING.spacing12} ${SPACING.spacing16} ${SPACING.spacing12}
-    ${SPACING.spacing24};
+  padding: ${SPACING.spacing12} ${SPACING.spacing16} ${SPACING.spacing12};
 `
 
 interface LabwareListItemProps extends LabwareSetupItem {
@@ -248,7 +245,11 @@ export function LabwareListItem(
 
   return (
     <LabwareRow>
-      <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing2} width="5rem">
+      <Flex
+        alignItems={ALIGN_CENTER}
+        gridGap={SPACING.spacing2}
+        width="6.25rem"
+      >
         {slotInfo != null && isFlex ? (
           <DeckInfoLabel deckLabel={slotInfo} />
         ) : (
@@ -259,9 +260,16 @@ export function LabwareListItem(
             {slotInfo}
           </StyledText>
         )}
+        {moduleType != null ? (
+          <DeckInfoLabel iconName={MODULE_ICON_NAME_BY_TYPE[moduleType]} />
+        ) : null}
         {isStacked ? <DeckInfoLabel iconName="stacked" /> : null}
       </Flex>
-      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing12}
+        marginLeft={SPACING.spacing24}
+      >
         <>
           <Flex>
             {showLabwareSVG && topLabwareDefinition != null ? (

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/SetupLabwareList.tsx

@@ -38,11 +38,11 @@ export function SetupLabwareList(
     >
       <Flex
         gridGap={SPACING.spacing16}
-        paddingLeft={SPACING.spacing24}
+        paddingLeft={SPACING.spacing16}
         paddingTop={SPACING.spacing20}
       >
         <StyledText
-          width="5rem"
+          width="6.25rem"
           desktopStyle="bodyDefaultRegular"
           color={COLORS.grey60}
         >

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/__tests__/SetupLabware.test.tsx

@@ -104,14 +104,14 @@ describe('SetupLabware', () => {
     vi.resetAllMocks()
   })
 
-  it('should render the list view, clicking the toggle button will turn to map view', () => {
+  it('should render the map view, clicking the toggle button will turn to list view', () => {
     render()
-    screen.getByText('mock setup labware list')
-    screen.getByRole('button', { name: 'List View' })
-    screen.getByRole('button', { name: 'Confirm placements' })
-    const mapView = screen.getByRole('button', { name: 'Map View' })
-    fireEvent.click(mapView)
     screen.getByText('mock setup labware map')
+    screen.getByRole('button', { name: 'Map View' })
+    screen.getByRole('button', { name: 'Confirm placements' })
+    const listView = screen.getByRole('button', { name: 'List View' })
+    fireEvent.click(listView)
+    screen.getByText('mock setup labware list')
   })
 
   it('disables the confirmation button if the run has already started', () => {

app/src/organisms/Desktop/Devices/ProtocolRun/SetupLabware/index.tsx

@@ -38,7 +38,9 @@ export function SetupLabware(props: SetupLabwareProps): JSX.Element {
   const protocolAnalysis = robotProtocolAnalysis ?? storedProtocolAnalysis
   const [selectedValue, toggleGroup] = useToggleGroup(
     t('list_view') as string,
-    t('map_view') as string
+    t('map_view') as string,
+    undefined,
+    true
   )
   const isFlex = useIsFlex(robotName)
 

app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/ProtocolRunSetup.test.tsx

@@ -5,7 +5,6 @@ import { describe, it, beforeEach, vi, afterEach, expect } from 'vitest'
 import {
   getSimplestDeckConfigForProtocol,
   parseAllRequiredModuleModels,
-  parseLiquidsInLoadOrder,
   STAGING_AREA_SLOT_WITH_WASTE_CHUTE_RIGHT_ADAPTER_NO_COVER_FIXTURE,
   simple_v4 as noModulesProtocol,
   test_modules_protocol as withModulesProtocol,
@@ -37,7 +36,6 @@ import { useLPCFlows } from '/app/organisms/LabwarePositionCheck'
 
 import { SetupLabware } from '../SetupLabware'
 import { SetupRobotCalibration } from '../SetupRobotCalibration'
-import { SetupLiquids } from '../SetupLiquids'
 import { SetupModuleAndDeck } from '../SetupModuleAndDeck'
 import { EmptySetupStep } from '../EmptySetupStep'
 import { ProtocolRunSetup } from '../ProtocolRunSetup'
@@ -50,7 +48,6 @@ import type * as SharedData from '@opentrons/shared-data'
 vi.mock('../SetupLabware')
 vi.mock('../SetupRobotCalibration')
 vi.mock('../SetupModuleAndDeck')
-vi.mock('../SetupLiquids')
 vi.mock('../EmptySetupStep')
 vi.mock('/app/resources/runs/useNotifyRunQuery')
 vi.mock('/app/resources/runs/useMostRecentCompletedAnalysis')
@@ -74,7 +71,6 @@ vi.mock('@opentrons/shared-data', async importOriginal => {
   return {
     ...actualSharedData,
     parseAllRequiredModuleModels: vi.fn(),
-    parseLiquidsInLoadOrder: vi.fn(),
     parseProtocolData: vi.fn(),
     getSimplestDeckConfigForProtocol: vi.fn(),
   }
@@ -129,18 +125,15 @@ describe('ProtocolRunSetup', () => {
           ReduxRuns.MODULE_SETUP_STEP_KEY,
           ReduxRuns.LPC_STEP_KEY,
           ReduxRuns.LABWARE_SETUP_STEP_KEY,
-          ReduxRuns.LIQUID_SETUP_STEP_KEY,
         ],
         orderedApplicableSteps: [
           ReduxRuns.ROBOT_CALIBRATION_STEP_KEY,
           ReduxRuns.MODULE_SETUP_STEP_KEY,
           ReduxRuns.LPC_STEP_KEY,
           ReduxRuns.LABWARE_SETUP_STEP_KEY,
-          ReduxRuns.LIQUID_SETUP_STEP_KEY,
         ],
       })
     vi.mocked(parseAllRequiredModuleModels).mockReturnValue([])
-    vi.mocked(parseLiquidsInLoadOrder).mockReturnValue([])
     when(vi.mocked(useRobot))
       .calledWith(ROBOT_NAME)
       .thenReturn(mockConnectedRobot)
@@ -172,7 +165,6 @@ describe('ProtocolRunSetup', () => {
       <div>Mock SetupRobotCalibration</div>
     )
     vi.mocked(SetupModuleAndDeck).mockReturnValue(<div>Mock SetupModules</div>)
-    vi.mocked(SetupLiquids).mockReturnValue(<div>Mock SetupLiquids</div>)
     vi.mocked(EmptySetupStep).mockReturnValue(<div>Mock EmptySetupStep</div>)
     vi.mocked(getSimplestDeckConfigForProtocol).mockReturnValue([])
     vi.mocked(useDeckConfigurationCompatibility).mockReturnValue([])
@@ -265,19 +257,19 @@ describe('ProtocolRunSetup', () => {
       fireEvent.click(robotCalibrationSetup)
       expect(screen.getByText('Mock SetupRobotCalibration')).toBeVisible()
     })
-    it('renders labware setup', () => {
+    it('renders labware and liquid setup', () => {
       render()
 
       screen.getByText(
-        'Gather the following labware and full tip racks. To run your protocol without Labware Position Check, place and secure labware in their initial locations.'
+        'Gather your labware & liquids and place them on the deck to finish setting up your protocol.'
       )
-      const labwareSetup = screen.getByText('Labware')
+      const labwareSetup = screen.getByText('Labware & Liquids')
       fireEvent.click(labwareSetup)
       expect(screen.getByText('Mock SetupLabware')).toBeVisible()
     })
-    it('renders the empty states for modules and liquids when no modules in protocol', () => {
+    it('renders the empty state for modules when no modules in protocol', () => {
       render()
-      screen.getAllByText('Mock EmptySetupStep')
+      screen.getByText('Mock EmptySetupStep')
     })
 
     it('defaults to no step expanded', () => {
@@ -306,7 +298,6 @@ describe('ProtocolRunSetup', () => {
         .calledWith(RUN_ID)
         .thenReturn({
           ...withModulesProtocol,
-          ...MOCK_PROTOCOL_LIQUID_KEY,
         } as any)
       when(vi.mocked(useRunHasStarted)).calledWith(RUN_ID).thenReturn(false)
       when(vi.mocked(useModuleCalibrationStatus))
@@ -412,10 +403,10 @@ describe('ProtocolRunSetup', () => {
       screen.getByText('Deck hardware')
 
       screen.getByText('Install the required modules.')
-      screen.getByText('Labware')
+      screen.getByText('Labware & Liquids')
 
       screen.getByText(
-        'Gather the following labware and full tip racks. To run your protocol without Labware Position Check, place and secure labware in their initial locations.'
+        'Gather your labware & liquids and place them on the deck to finish setting up your protocol.'
       )
     })
 
@@ -445,9 +436,9 @@ describe('ProtocolRunSetup', () => {
       screen.getByText('Deck hardware')
 
       screen.getByText('Install the required module.')
-      screen.getByText('Labware')
+      screen.getByText('Labware & Liquids')
       screen.getByText(
-        'Gather the following labware and full tip racks. To run your protocol without Labware Position Check, place and secure labware in their initial locations.'
+        'Gather your labware & liquids and place them on the deck to finish setting up your protocol.'
       )
     })
 

app/src/organisms/Desktop/Devices/ProtocolRun/__tests__/SetupRobotCalibration.test.tsx

@@ -94,7 +94,7 @@ describe('SetupRobotCalibration', () => {
   })
 
   it('changes Proceed CTA copy based on next step', () => {
-    render({ nextStep: 'labware_setup_step' })
+    render({ nextStep: 'labware_liquids_setup_step' })
     screen.getByRole('button', { name: 'Proceed to labware' })
   })