add the green check

Opentrons · Mar 14, 2024 · 7329245 · 7329245
1 parent 34d9284
commit 7329245
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx
@@ -119,12 +119,13 @@ describe('FirmwareUpdateModal', () => {
       vi.advanceTimersByTime(3000)
     })
     screen.getByText('Firmware is up to date.')
+    screen.getByLabelText('check')
     act(() => {
       vi.advanceTimersByTime(3000)
     })
     await waitFor(() => expect(props.proceed).toHaveBeenCalled())
   })
-  it('does not render text or a progress bar until instrument update status is known', () => {
+  it('does not render text until instrument update status is known', () => {
     vi.mocked(useSubsystemUpdateQuery).mockReturnValue({
       data: {
         data: {
@@ -159,6 +160,7 @@ describe('FirmwareUpdateModal', () => {
       vi.advanceTimersByTime(3000)
     })
     screen.getByText('A firmware update is required, instrument is updating')
+    screen.getByLabelText('spinner')
     expect(updateSubsystem).toHaveBeenCalled()
   })
   it('calls refetch instruments and then proceed once update is complete', async () => {

diff --git a/app/src/organisms/FirmwareUpdateModal/index.tsx b/app/src/organisms/FirmwareUpdateModal/index.tsx
@@ -74,7 +74,7 @@ export const FirmwareUpdateModal = (
     isOnDevice,
   } = props
   const [updateId, setUpdateId] = React.useState<string | null>(null)
-  const [firmwareText, setFirmwareText] = React.useState('')
+  const [firmwareText, setFirmwareText] = React.useState<string | null>(null)
   const {
     data: attachedInstruments,
     refetch: refetchInstruments,
@@ -132,17 +132,26 @@ export const FirmwareUpdateModal = (
 
   return (
     <Flex css={MODAL_STYLE}>
-      {status != null || updateNeeded || firmwareText.length === 0 ? (
+      {status != null || updateNeeded || !firmwareText ? (
         <Icon
           name="ot-spinner"
           aria-label="spinner"
           size={isOnDevice ? '6.25rem' : '5.125rem'}
+          marginBottom={SPACING.spacing12}
           css={SPINNER_STYLE}
           spin
         />
-      ) : null}
+      ) : (
+        <Icon
+          name="ot-check"
+          aria-label="check"
+          size={isOnDevice ? '6.25rem' : '5.125rem'}
+          marginBottom={SPACING.spacing12}
+          color={COLORS.green60}
+        />
+      )}
       <StyledText css={DESCRIPTION_STYLE}>
-        {firmwareText.length ? firmwareText : 'Checking for updates...'}
+        {firmwareText ?? 'Checking for updates...'}
       </StyledText>
     </Flex>
   )