fix(app): firmware update in progress modal graphic (#14484)

closes RQA-2343 and EXEC-329 Co-authored-by: Jamey Huffnagle <[email protected]>
Opentrons · Mar 15, 2024 · 1096a6a · 1096a6a
1 parent 7689521
commit 1096a6a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 20 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
@@ -9,15 +9,13 @@ import {
   Icon,
   RESPONSIVENESS,
   JUSTIFY_CENTER,
-  BORDERS,
   COLORS,
 } from '@opentrons/components'
 import {
   useInstrumentsQuery,
   useSubsystemUpdateQuery,
   useUpdateSubsystemMutation,
 } from '@opentrons/react-api-client'
-import { ProgressBar } from '../../atoms/ProgressBar'
 import { StyledText } from '../../atoms/text'
 import { BadGripper, BadPipette, Subsystem } from '@opentrons/api-client'
 
@@ -55,11 +53,6 @@ const MODAL_STYLE = css`
     height: 31.5625rem;
   }
 `
-const OUTER_STYLES = css`
-  border-radius: ${BORDERS.borderRadius16};
-  background: ${COLORS.grey30};
-  width: 13.374rem;
-`
 
 const SPINNER_STYLE = css`
   color: ${COLORS.grey50};
@@ -81,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,
@@ -113,7 +106,6 @@ export const FirmwareUpdateModal = (
   }, [])
   const { data: updateData } = useSubsystemUpdateQuery(updateId)
   const status = updateData?.data.updateStatus
-  const percentComplete = updateData?.data.updateProgress ?? 0
 
   React.useEffect(() => {
     if ((status != null || updateNeeded) && firmwareText !== description) {
@@ -140,24 +132,27 @@ export const FirmwareUpdateModal = (
 
   return (
     <Flex css={MODAL_STYLE}>
-      <StyledText css={DESCRIPTION_STYLE}>
-        {firmwareText.length ? firmwareText : 'Checking for updates...'}
-      </StyledText>
-      {status != null || updateNeeded ? (
-        <ProgressBar
-          percentComplete={percentComplete}
-          outerStyles={OUTER_STYLES}
-        />
-      ) : null}
-      {firmwareText.length ? null : (
+      {status != null || updateNeeded || !firmwareText ? (
         <Icon
           name="ot-spinner"
           aria-label="spinner"
           size={isOnDevice ? '6.25rem' : '5.125rem'}
+          marginBottom={SPACING.spacing12}
           css={SPINNER_STYLE}
           spin
         />
+      ) : (
+        <Icon
+          name="ot-check"
+          aria-label="check"
+          size={isOnDevice ? '6.25rem' : '5.125rem'}
+          marginBottom={SPACING.spacing12}
+          color={COLORS.green60}
+        />
       )}
+      <StyledText css={DESCRIPTION_STYLE}>
+        {firmwareText ?? 'Checking for updates...'}
+      </StyledText>
     </Flex>
   )
 }