TEST

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.borderRadiusSize4};
-  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,26 @@ 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"
+          size={isOnDevice ? '6.25rem' : '5.125rem'}
+          marginBottom={SPACING.spacing12}
+          color={COLORS.green60}
+        />
       )}
+      <StyledText css={DESCRIPTION_STYLE}>
+        {firmwareText ?? 'Checking for updates...'}
+      </StyledText>
     </Flex>
   )
 }

mock_dir

@@ -0,0 +1 @@
+{}