refactor(app): attach, detach desktop app design QA (#12611)

closes RLIQ-367

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

@@ -14,7 +14,7 @@
   "calibrate_pipette": "calibrate {{mount}} pipette",
   "pip_recal_success": "{{pipetteName}} successfully recalibrated",
   "stand_back": "Stand back, robot is in motion",
-  "pipette_calibrating": "Stand back, connect and secure, {{pipetteName}} is calibrating",
+  "pipette_calibrating": "Stand back, {{pipetteName}} is calibrating",
   "progress_will_be_lost": "{{flow}} progress will be lost",
   "are_you_sure_exit": "Are you sure you want to exit before completing {{flow}}?",
   "pipette_calibration": "Pipette Calibration",

app/src/molecules/SimpleWizardBody/index.tsx

@@ -13,6 +13,7 @@ import {
   ALIGN_CENTER,
   StyleProps,
   JUSTIFY_SPACE_BETWEEN,
+  POSITION_ABSOLUTE,
 } from '@opentrons/components'
 import { getIsOnDevice } from '../../redux/config'
 import { StyledText } from '../../atoms/text'
@@ -77,6 +78,7 @@ export function SimpleWizardBody(props: Props): JSX.Element {
   return (
     <Flex
       height={isOnDevice ? '472px' : 'auto'}
+      minHeight="394px"
       flexDirection={DIRECTION_COLUMN}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       {...styleProps}
@@ -124,7 +126,12 @@ export function SimpleWizardBody(props: Props): JSX.Element {
           </>
         )}
       </Flex>
-      <Flex flex="0 1 auto" css={BUTTON_STYLE}>
+      <Flex
+        position={POSITION_ABSOLUTE}
+        bottom={0}
+        right={0}
+        css={BUTTON_STYLE}
+      >
         {children}
       </Flex>
     </Flex>

app/src/organisms/PipetteWizardFlows/AttachProbe.tsx

@@ -15,7 +15,7 @@ import { GenericWizardTile } from '../../molecules/GenericWizardTile'
 import { InProgressModal } from '../../molecules/InProgressModal/InProgressModal'
 import pipetteProbe1 from '../../assets/videos/pipette-wizard-flows/Pipette_Probing_1.webm'
 import pipetteProbe8 from '../../assets/videos/pipette-wizard-flows/Pipette_Probing_8.webm'
-import { BODY_STYLE, SECTIONS } from './constants'
+import { BODY_STYLE, SECTIONS, FLOWS } from './constants'
 import { getPipetteAnimations } from './utils'
 import type { PipetteWizardStepProps } from './types'
 
@@ -53,8 +53,6 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
   const pipetteId = attachedPipettes[mount]?.serialNumber
   const displayName = attachedPipettes[mount]?.displayName
   const is8Channel = attachedPipettes[mount]?.data.channels === 8
-  //  hard coding calibration slot number for now in case it changes
-  //  in the future
   const calSlotNum = 'C2'
 
   if (pipetteId == null) return null
@@ -87,11 +85,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
   }
 
   const pipetteProbeVid = (
-    <Flex
-      marginTop={isOnDevice ? '-5rem' : '-7.6rem'}
-      height="10.2rem"
-      paddingTop={SPACING.spacing2}
-    >
+    <Flex height="10.2rem" paddingTop={SPACING.spacing2}>
       <video
         css={css`
           max-width: 100%;
@@ -162,7 +156,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => {
       }
       proceedButtonText={t('begin_calibration')}
       proceed={handleOnClick}
-      back={goBack}
+      back={flowType === FLOWS.ATTACH ? undefined : goBack}
     />
   )
 }

app/src/organisms/PipetteWizardFlows/Carriage.tsx

@@ -108,7 +108,7 @@ export const Carriage = (props: PipetteWizardStepProps): JSX.Element | null => {
           }}
         />
       }
-      back={goBack}
+      back={flowType === FLOWS.ATTACH ? undefined : goBack}
       proceedButton={
         isOnDevice ? (
           <SmallButton

app/src/organisms/PipetteWizardFlows/__tests__/AttachProbe.test.tsx

@@ -91,9 +91,7 @@ describe('AttachProbe', () => {
       isRobotMoving: true,
     }
     const { getByText, getByTestId } = render(props)
-    getByText(
-      'Stand back, connect and secure, Flex 1-Channel 1000 μL is calibrating'
-    )
+    getByText('Stand back, Flex 1-Channel 1000 μL is calibrating')
     getByText(
       'The calibration probe will touch the sides of the calibration square in slot C2 to determine its exact position'
     )
@@ -156,4 +154,12 @@ describe('AttachProbe', () => {
     getByLabelText('back').click()
     expect(props.goBack).toHaveBeenCalled()
   })
+
+  it('does not render the goBack button when following a results screen from attach flow', () => {
+    props = {
+      ...props,
+      flowType: FLOWS.ATTACH,
+    }
+    expect(screen.queryByLabelText('back')).not.toBeInTheDocument()
+  })
 })

app/src/organisms/PipetteWizardFlows/__tests__/Carriage.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { fireEvent, waitFor } from '@testing-library/react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { renderWithProviders } from '@opentrons/components'
 import {
   LEFT,
@@ -39,12 +39,11 @@ describe('Carriage', () => {
     }
   })
   it('returns the correct information, buttons work as expected when flow is attach', () => {
-    const { getByText, getByAltText, getByRole, getByLabelText } = render(props)
+    const { getByText, getByAltText, getByRole } = render(props)
     getByText('Unscrew z-axis carriage')
     getByAltText('Unscrew gantry')
     getByRole('button', { name: 'Continue' })
-    getByLabelText('back').click()
-    expect(props.goBack).toHaveBeenCalled()
+    expect(screen.queryByLabelText('back')).not.toBeInTheDocument()
   })
   it('renders the correct button when is the on device display', () => {
     props = {