fix(app): change firmware update progress bar to spinner on ODD modals (

#14575) fix RQA-2314
Opentrons · Feb 29, 2024 · 4360083 · 4360083
1 parent ae38ff1
commit 4360083
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 27 deletions.
diff --git a/app/src/organisms/FirmwareUpdateModal/FirmwareUpdateTakeover.tsx b/app/src/organisms/FirmwareUpdateModal/FirmwareUpdateTakeover.tsx
@@ -125,7 +125,6 @@ export function FirmwareUpdateTakeover(): JSX.Element {
       {externalsubsystemUpdateData != null && maintenanceRunData == null ? (
         <Portal level="top">
           <UpdateInProgressModal
-            percentComplete={externalsubsystemUpdateData.data.updateProgress}
             subsystem={externalsubsystemUpdateData.data.subsystem}
           />
         </Portal>

diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateInProgressModal.tsx
@@ -6,29 +6,33 @@ import {
   BORDERS,
   COLORS,
   DIRECTION_COLUMN,
+  Icon,
   Flex,
   SPACING,
   TYPOGRAPHY,
+  RESPONSIVENESS,
 } from '@opentrons/components'
-import { ProgressBar } from '../../atoms/ProgressBar'
 import { StyledText } from '../../atoms/text'
 import { Modal } from '../../molecules/Modal'
-import { Subsystem } from '@opentrons/api-client'
+import type { Subsystem } from '@opentrons/api-client'
 
 interface UpdateInProgressModalProps {
-  percentComplete: number
   subsystem: Subsystem
 }
 
-const OUTER_STYLES = css`
-  background: ${COLORS.grey30};
-  width: 100%;
+const SPINNER_STYLE = css`
+  color: ${COLORS.grey50};
+  opacity: 100%;
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    color: ${COLORS.black90};
+    opacity: 70%;
+  }
 `
 
 export function UpdateInProgressModal(
   props: UpdateInProgressModalProps
 ): JSX.Element {
-  const { percentComplete, subsystem } = props
+  const { subsystem } = props
   const { t } = useTranslation('firmware_update')
 
   return (
@@ -51,9 +55,12 @@ export function UpdateInProgressModal(
         >
           {t('updating_firmware', { subsystem: t(subsystem) })}
         </StyledText>
-        <ProgressBar
-          percentComplete={percentComplete}
-          outerStyles={OUTER_STYLES}
+        <Icon
+          name="ot-spinner"
+          aria-label="spinner"
+          size="6.25rem"
+          css={SPINNER_STYLE}
+          spin
         />
       </Flex>
     </Modal>

diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateNeededModal.tsx
@@ -58,7 +58,6 @@ export function UpdateNeededModal(props: UpdateNeededModalProps): JSX.Element {
     }
   }, [status, setInitiatedSubsystemUpdate])
 
-  const percentComplete = updateData?.data.updateProgress ?? 0
   const updateError = updateData?.data.updateError
   const instrumentType = subsystem === 'gripper' ? 'gripper' : 'pipette'
   let mount = ''
@@ -102,12 +101,7 @@ export function UpdateNeededModal(props: UpdateNeededModalProps): JSX.Element {
     (status === 'updating' || status === 'queued') &&
     ongoingUpdateId != null
   ) {
-    modalContent = (
-      <UpdateInProgressModal
-        percentComplete={percentComplete}
-        subsystem={subsystem}
-      />
-    )
+    modalContent = <UpdateInProgressModal subsystem={subsystem} />
   } else if (status === 'done' && ongoingUpdateId != null) {
     modalContent = (
       <UpdateResultsModal

diff --git a/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx b/app/src/organisms/FirmwareUpdateModal/__tests__/UpdateInProgressModal.test.tsx
@@ -1,13 +1,8 @@
 import * as React from 'react'
 import { renderWithProviders } from '@opentrons/components'
 import { i18n } from '../../../i18n'
-import { ProgressBar } from '../../../atoms/ProgressBar'
 import { UpdateInProgressModal } from '../UpdateInProgressModal'
 
-jest.mock('../../../atoms/ProgressBar')
-
-const mockProgressBar = ProgressBar as jest.MockedFunction<typeof ProgressBar>
-
 const render = (props: React.ComponentProps<typeof UpdateInProgressModal>) => {
   return renderWithProviders(<UpdateInProgressModal {...props} />, {
     i18nInstance: i18n,
@@ -18,14 +13,11 @@ describe('UpdateInProgressModal', () => {
   let props: React.ComponentProps<typeof UpdateInProgressModal>
   beforeEach(() => {
     props = {
-      percentComplete: 12,
       subsystem: 'pipette_right',
     }
-    mockProgressBar.mockReturnValue('12' as any)
   })
-  it('renders test and progress bar', () => {
+  it('renders text', () => {
     const { getByText } = render(props)
     getByText('Updating pipette firmware...')
-    getByText('12')
   })
 })