From 34d35f53206ac939373fde8405c7090f951aeb9f Mon Sep 17 00:00:00 2001
From: TamarZanzouri <zanzouritamar@gmail.com>
Date: Tue, 23 Jul 2024 15:22:21 -0400
Subject: [PATCH] chore(app): wire up NoLiquidDetected ER on desktop (#15765)

# Overview

closes https://opentrons.atlassian.net/browse/EXEC-556.
Wire up desktop designs for NoLiquidDetected ER flow.

# Test Plan

- Make sure designs match desktop app and logic works as expected.
- Make sure designs match ODD app and logic works as expected.


# Risk assessment

low. mainly css changes. should affect desktop app only.
---
 .../RecoveryOptions/IgnoreErrorSkipStep.tsx   | 65 +++++++++++++++++--
 .../RecoveryOptions/ManageTips.tsx            |  3 -
 .../RecoveryOptions/SelectRecoveryOption.tsx  |  5 ++
 .../__tests__/IgnoreErrorSkipStep.test.tsx    |  4 +-
 .../TwoColTextAndFailedStepNextStep.tsx       |  4 +-
 5 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
index c5ecf84a61b..b2c6e167f6f 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx
@@ -1,19 +1,27 @@
 import * as React from 'react'
 import head from 'lodash/head'
+import { css } from 'styled-components'
 import { useTranslation } from 'react-i18next'
 
 import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
-  LegacyStyledText,
+  StyledText,
+  RESPONSIVENESS,
 } from '@opentrons/components'
 
-import { ODD_SECTION_TITLE_STYLE, RECOVERY_MAP } from '../constants'
+import {
+  ODD_SECTION_TITLE_STYLE,
+  RECOVERY_MAP,
+  ODD_ONLY,
+  DESKTOP_ONLY,
+} from '../constants'
 import { SelectRecoveryOption } from './SelectRecoveryOption'
 import {
   RecoveryFooterButtons,
   RecoverySingleColumnContentWrapper,
+  RecoveryRadioGroup,
 } from '../shared'
 import { RadioButton } from '../../../atoms/buttons'
 
@@ -81,17 +89,50 @@ export function IgnoreErrorStepHome({
   }
 
   return (
-    <RecoverySingleColumnContentWrapper>
-      <LegacyStyledText css={ODD_SECTION_TITLE_STYLE} as="h4SemiBold">
+    <RecoverySingleColumnContentWrapper css={DESKTOP_ONLY_GRID_GAP}>
+      <StyledText
+        css={ODD_SECTION_TITLE_STYLE}
+        oddStyle="level4HeaderSemiBold"
+        desktopStyle="headingSmallSemiBold"
+      >
         {t('ignore_similar_errors_later_in_run')}
-      </LegacyStyledText>
-      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      </StyledText>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing4}
+        css={ODD_ONLY}
+      >
         <IgnoreOptions
           ignoreOptions={IGNORE_OPTIONS_IN_ORDER}
           setSelectedOption={setSelectedOption}
           selectedOption={selectedOption}
         />
       </Flex>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing4}
+        css={DESKTOP_ONLY}
+      >
+        <RecoveryRadioGroup
+          value={selectedOption}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setSelectedOption(e.currentTarget.value as IgnoreOption)
+          }}
+          options={IGNORE_OPTIONS_IN_ORDER.map(option => {
+            return {
+              value: option,
+              children: (
+                <StyledText
+                  css={RADIO_GROUP_MARGIN}
+                  desktopStyle="bodyDefaultRegular"
+                >
+                  {t(option)}
+                </StyledText>
+              ),
+            }
+          })}
+        />
+      </Flex>
       <RecoveryFooterButtons
         primaryBtnOnClick={primaryOnClick}
         secondaryBtnOnClick={goBackPrevStep}
@@ -137,3 +178,15 @@ const IGNORE_OPTIONS_IN_ORDER: IgnoreOption[] = [
   'ignore_only_this_error',
   'ignore_all_errors_of_this_type',
 ]
+
+const RADIO_GROUP_MARGIN = css`
+  @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+    margin-left: 0.5rem;
+  }
+`
+
+const DESKTOP_ONLY_GRID_GAP = css`
+  @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) {
+    gap: 0rem;
+  }
+`
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/ManageTips.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/ManageTips.tsx
index 7295b663b89..87a195a12a8 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/ManageTips.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/ManageTips.tsx
@@ -148,9 +148,6 @@ export function BeginRemoval({
         css={DESKTOP_ONLY}
       >
         <RecoveryRadioGroup
-          css={css`
-            padding: ${SPACING.spacing4};
-          `}
           value={selected}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             setSelected(e.currentTarget.value as RemovalOptions)
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx
index a33f2fb7abc..ed9de710db8 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx
@@ -148,6 +148,7 @@ export function DesktopRecoveryOptions({
 }: RecoveryOptionsProps): JSX.Element {
   return (
     <RecoveryRadioGroup
+      css={RADIO_GAP}
       onChange={e => {
         setSelectedRoute(e.currentTarget.value)
       }}
@@ -221,3 +222,7 @@ export const GENERAL_ERROR_OPTIONS: RecoveryRoute[] = [
   RECOVERY_MAP.RETRY_FAILED_COMMAND.ROUTE,
   RECOVERY_MAP.CANCEL_RUN.ROUTE,
 ]
+
+const RADIO_GAP = `
+  gap: ${SPACING.spacing4};
+`
diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
index d6241b7dcd9..466c9f65dc7 100644
--- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/__tests__/IgnoreErrorSkipStep.test.tsx
@@ -105,7 +105,7 @@ describe('IgnoreErrorStepHome', () => {
 
   it('calls ignoreOnce when "ignore_only_this_error" is selected and primary button is clicked', async () => {
     renderIgnoreErrorStepHome(props)
-    fireEvent.click(screen.getByText('Ignore only this error'))
+    fireEvent.click(screen.queryAllByText('Ignore only this error')[0])
     clickButtonLabeled('Continue')
     await waitFor(() => {
       expect(mockProceedToRouteAndStep).toHaveBeenCalledWith(
@@ -117,7 +117,7 @@ describe('IgnoreErrorStepHome', () => {
 
   it('calls ignoreAlways when "ignore_all_errors_of_this_type" is selected and primary button is clicked', async () => {
     renderIgnoreErrorStepHome(props)
-    fireEvent.click(screen.getByText('Ignore all errors of this type'))
+    fireEvent.click(screen.queryAllByText('Ignore all errors of this type')[0])
     clickButtonLabeled('Continue')
     await waitFor(() => {
       expect(mockIgnoreErrorKindThisRun).toHaveBeenCalled()
diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx
index 4ed62e8ff8d..a1f959c72fb 100644
--- a/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx
+++ b/app/src/organisms/ErrorRecoveryFlows/shared/TwoColTextAndFailedStepNextStep.tsx
@@ -46,9 +46,9 @@ export function TwoColTextAndFailedStepNextStep(
         <Flex
           flexDirection={DIRECTION_COLUMN}
           css={css`
-            gap=${SPACING.spacing16};
+            gap: ${SPACING.spacing16};
             @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-            gap=${SPACING.spacing8}
+              gap: ${SPACING.spacing8};
             }
           `}
         >