feat(app): add loading state to LPC when applying offsets (#13702)

closes RQA-1220
Opentrons · Oct 6, 2023 · 2fd0ecf · 2fd0ecf
1 parent a3a033a
commit 2fd0ecf
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 6 deletions.
diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx
@@ -30,8 +30,8 @@ interface SmallButtonProps extends StyleProps {
   onClick: React.MouseEventHandler
   buttonType?: SmallButtonTypes
   buttonText: React.ReactNode
-  iconPlacement?: IconPlacement
-  iconName?: IconName
+  iconPlacement?: IconPlacement | null
+  iconName?: IconName | null
   buttonCategory?: ButtonCategory // if not specified, it will be 'default'
   disabled?: boolean
 }

diff --git a/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx b/app/src/organisms/LabwarePositionCheck/LabwarePositionCheckComponent.tsx
@@ -49,6 +49,7 @@ interface LabwarePositionCheckModalProps {
   protocolName: string
   caughtError?: Error
   setMaintenanceRunId: (id: string | null) => void
+  isDeletingMaintenanceRun: boolean
 }
 
 export const LabwarePositionCheckComponent = (
@@ -62,6 +63,7 @@ export const LabwarePositionCheckComponent = (
     maintenanceRunId,
     setMaintenanceRunId,
     protocolName,
+    isDeletingMaintenanceRun,
   } = props
   const { t } = useTranslation(['labware_position_check', 'shared'])
   const isOnDevice = useSelector(getIsOnDevice)
@@ -102,6 +104,9 @@ export const LabwarePositionCheckComponent = (
   ])
 
   const [fatalError, setFatalError] = React.useState<string | null>(null)
+  const [isApplyingOffsets, setIsApplyingOffsets] = React.useState<boolean>(
+    false
+  )
   const [
     { workingOffsets, tipPickUpOffset },
     registerPosition,
@@ -295,12 +300,15 @@ export const LabwarePositionCheckComponent = (
   }
 
   const handleApplyOffsets = (offsets: LabwareOffsetCreateData[]): void => {
+    setIsApplyingOffsets(true)
     Promise.all(offsets.map(data => createLabwareOffset({ runId, data })))
       .then(() => {
         onCloseClick()
+        setIsApplyingOffsets(false)
       })
       .catch((e: Error) => {
         setFatalError(`error applying labware offsets: ${e.message}`)
+        setIsApplyingOffsets(false)
       })
   }
 
@@ -356,7 +364,13 @@ export const LabwarePositionCheckComponent = (
       <ResultsSummary
         {...currentStep}
         protocolData={protocolData}
-        {...{ workingOffsets, existingOffsets, handleApplyOffsets }}
+        {...{
+          workingOffsets,
+          existingOffsets,
+          handleApplyOffsets,
+          isApplyingOffsets,
+          isDeletingMaintenanceRun,
+        }}
       />
     )
   }

diff --git a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx
@@ -28,6 +28,7 @@ import {
   MODULE_ICON_NAME_BY_TYPE,
   BORDERS,
   ALIGN_FLEX_END,
+  Icon,
   LocationIcon,
 } from '@opentrons/components'
 import { PythonLabwareOffsetSnippet } from '../../molecules/PythonLabwareOffsetSnippet'
@@ -55,6 +56,8 @@ interface ResultsSummaryProps extends ResultsSummaryStep {
   workingOffsets: WorkingOffset[]
   existingOffsets: LabwareOffset[]
   handleApplyOffsets: (offsets: LabwareOffsetCreateData[]) => void
+  isApplyingOffsets: boolean
+  isDeletingMaintenanceRun: boolean
 }
 export const ResultsSummary = (
   props: ResultsSummaryProps
@@ -65,10 +68,13 @@ export const ResultsSummary = (
     workingOffsets,
     handleApplyOffsets,
     existingOffsets,
+    isApplyingOffsets,
+    isDeletingMaintenanceRun,
   } = props
   const labwareDefinitions = getLabwareDefinitionsFromCommands(
     protocolData.commands
   )
+  const isSubmittingAndClosing = isApplyingOffsets || isDeletingMaintenanceRun
   const isLabwareOffsetCodeSnippetsOn = useSelector(
     getIsLabwareOffsetCodeSnippetsOn
   )
@@ -168,6 +174,9 @@ export const ResultsSummary = (
           alignSelf={ALIGN_FLEX_END}
           onClick={() => handleApplyOffsets(offsetsToApply)}
           buttonText={i18n.format(t('apply_offsets'), 'capitalize')}
+          iconName={isSubmittingAndClosing ? 'ot-spinner' : null}
+          iconPlacement={isSubmittingAndClosing ? 'startIcon' : null}
+          disabled={isSubmittingAndClosing}
         />
       ) : (
         <Flex
@@ -177,8 +186,23 @@ export const ResultsSummary = (
           alignItems={ALIGN_CENTER}
         >
           <NeedHelpLink href={LPC_HELP_LINK_URL} />
-          <PrimaryButton onClick={() => handleApplyOffsets(offsetsToApply)}>
-            {i18n.format(t('apply_offsets'), 'capitalize')}
+          <PrimaryButton
+            onClick={() => handleApplyOffsets(offsetsToApply)}
+            disabled={isSubmittingAndClosing}
+          >
+            <Flex>
+              {isSubmittingAndClosing ? (
+                <Icon
+                  size="1rem"
+                  spin
+                  name="ot-spinner"
+                  marginRight={SPACING.spacing8}
+                />
+              ) : null}
+              <StyledText>
+                {i18n.format(t('apply_offsets'), 'capitalize')}
+              </StyledText>
+            </Flex>
           </PrimaryButton>
         </Flex>
       )}

diff --git a/app/src/organisms/LabwarePositionCheck/__tests__/ResultsSummary.test.tsx b/app/src/organisms/LabwarePositionCheck/__tests__/ResultsSummary.test.tsx
@@ -33,6 +33,8 @@ describe('ResultsSummary', () => {
       protocolData: mockCompletedAnalysis,
       workingOffsets: mockWorkingOffsets,
       existingOffsets: mockExistingOffsets,
+      isApplyingOffsets: false,
+      isDeletingMaintenanceRun: false,
       handleApplyOffsets: jest.fn(),
     }
   })
@@ -54,6 +56,22 @@ describe('ResultsSummary', () => {
     getByRole('button', { name: 'Apply offsets' }).click()
     expect(props.handleApplyOffsets).toHaveBeenCalled()
   })
+  it('does disables the CTA to apply offsets when offsets are already being applied', () => {
+    props.isApplyingOffsets = true
+    const { getByRole } = render(props)
+    const button = getByRole('button', { name: 'Apply offsets' })
+    expect(button).toBeDisabled()
+    button.click()
+    expect(props.handleApplyOffsets).not.toHaveBeenCalled()
+  })
+  it('does disables the CTA to apply offsets when the maintenance run is being deleted', () => {
+    props.isDeletingMaintenanceRun = true
+    const { getByRole } = render(props)
+    const button = getByRole('button', { name: 'Apply offsets' })
+    expect(button).toBeDisabled()
+    button.click()
+    expect(props.handleApplyOffsets).not.toHaveBeenCalled()
+  })
   it('renders a row per offset to apply', () => {
     const { getByRole, queryAllByRole } = render(props)
     expect(

diff --git a/app/src/organisms/LabwarePositionCheck/index.tsx b/app/src/organisms/LabwarePositionCheck/index.tsx
@@ -15,6 +15,7 @@ interface LabwarePositionCheckModalProps {
   protocolName: string
   caughtError?: Error
   setMaintenanceRunId: (id: string | null) => void
+  isDeletingMaintenanceRun: boolean
 }
 
 // We explicitly wrap LabwarePositionCheckComponent in an ErrorBoundary because an error might occur while pulling in

diff --git a/app/src/organisms/LabwarePositionCheck/useLaunchLPC.tsx b/app/src/organisms/LabwarePositionCheck/useLaunchLPC.tsx
@@ -18,7 +18,10 @@ export function useLaunchLPC(
   const {
     createTargetedMaintenanceRun,
   } = useCreateTargetedMaintenanceRunMutation()
-  const { deleteMaintenanceRun } = useDeleteMaintenanceRunMutation()
+  const {
+    deleteMaintenanceRun,
+    isLoading: isDeletingMaintenanceRun,
+  } = useDeleteMaintenanceRunMutation()
   const mostRecentAnalysis = useMostRecentCompletedAnalysis(runId)
   const [maintenanceRunId, setMaintenanceRunId] = React.useState<string | null>(
     null
@@ -74,6 +77,7 @@ export function useLaunchLPC(
           maintenanceRunId={maintenanceRunId}
           setMaintenanceRunId={setMaintenanceRunId}
           protocolName={protocolName ?? ''}
+          isDeletingMaintenanceRun={isDeletingMaintenanceRun}
         />
       ) : null,
   }