refactor(app): switch ODD update modal progress bar with spinner (#14838)

closes RQA-2553

Author: ncdiehl11

app/src/organisms/UpdateRobotSoftware/UpdateSoftware.tsx

@@ -4,25 +4,21 @@ import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
   BORDERS,
-  Box,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
+  Icon,
   JUSTIFY_CENTER,
   SPACING,
   StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { ProgressBar } from '../../atoms/ProgressBar'
-
 interface UpdateSoftwareProps {
   updateType: 'downloading' | 'validating' | 'sendingFile' | 'installing' | null
-  processProgress: number
 }
 export function UpdateSoftware({
   updateType,
-  processProgress,
 }: UpdateSoftwareProps): JSX.Element {
   const { t } = useTranslation('device_settings')
   const renderText = (): string | null => {
@@ -52,6 +48,13 @@ export function UpdateSoftware({
       height="33rem"
       borderRadius={BORDERS.borderRadius12}
     >
+      <Icon
+        name="ot-spinner"
+        size="5rem"
+        spin={true}
+        color={COLORS.grey60}
+        data-testid="Icon_update"
+      />
       <Flex
         flexDirection={DIRECTION_COLUMN}
         gridGap={SPACING.spacing4}
@@ -68,9 +71,6 @@ export function UpdateSoftware({
           {renderText()}
         </StyledText>
       </Flex>
-      <Box width="47.5rem">
-        <ProgressBar percentComplete={processProgress} />
-      </Box>
     </Flex>
   )
 }

app/src/organisms/UpdateRobotSoftware/__tests__/UpdateRobotSoftware.test.tsx

@@ -113,7 +113,7 @@ describe('UpdateRobotSoftware', () => {
     render()
     expect(mockBeforeCommitting).toBeCalled()
     expect(UpdateSoftware).toBeCalledWith(
-      { updateType: 'installing', processProgress: 0 },
+      { updateType: 'installing' },
       expect.anything()
     )
     screen.getByText('mock UpdateSoftware')

app/src/organisms/UpdateRobotSoftware/__tests__/UpdateSoftware.test.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import { screen } from '@testing-library/react'
-import { describe, it, beforeEach, expect } from 'vitest'
+import { describe, it, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '../../../__testing-utils__'
-import { COLORS } from '@opentrons/components'
 import { i18n } from '../../../i18n'
 import { UpdateSoftware } from '../UpdateSoftware'
 
@@ -18,47 +17,34 @@ describe('UpdateSoftware', () => {
   beforeEach(() => {
     props = {
       updateType: 'downloading',
-      processProgress: 50,
     }
   })
-  it('should render text and progressbar - downloading software', () => {
+  it('should render text - downloading software', () => {
     render(props)
     screen.getByText('Downloading software...')
-    const bar = screen.getByTestId('ProgressBar_Bar')
-    expect(bar).toHaveStyle(`background: ${String(COLORS.blue50)}`)
-    expect(bar).toHaveStyle('width: 50%')
   })
-  it('should render text and progressbar - sending software', () => {
+  it('should render text - sending software', () => {
     props = {
       ...props,
-      processProgress: 20,
       updateType: 'sendingFile',
     }
     render(props)
     screen.getByText('Sending software...')
-    const bar = screen.getByTestId('ProgressBar_Bar')
-    expect(bar).toHaveStyle('width: 20%')
   })
-  it('should render text and progressbar - validating software', () => {
+  it('should render text - validating software', () => {
     props = {
       ...props,
-      processProgress: 80,
       updateType: 'validating',
     }
     render(props)
     screen.getByText('Validating software...')
-    const bar = screen.getByTestId('ProgressBar_Bar')
-    expect(bar).toHaveStyle('width: 80%')
   })
-  it('should render text and progressbar - installing software', () => {
+  it('should render text - installing software', () => {
     props = {
       ...props,
-      processProgress: 5,
       updateType: 'installing',
     }
     render(props)
     screen.getByText('Installing software...')
-    const bar = screen.getByTestId('ProgressBar_Bar')
-    expect(bar).toHaveStyle('width: 5%')
   })
 })

app/src/organisms/UpdateRobotSoftware/index.tsx

@@ -37,7 +37,7 @@ export function UpdateRobotSoftware(
   const dispatch = useDispatch<Dispatch>()
 
   const session = useSelector(getRobotUpdateSession)
-  const { step, stage, progress, error: sessionError } = session ?? {
+  const { step, stage, error: sessionError } = session ?? {
     step: null,
     error: null,
   }
@@ -76,11 +76,6 @@ export function UpdateRobotSoftware(
         beforeCommittingSuccessfulUpdate && beforeCommittingSuccessfulUpdate()
       }
     }
-    return (
-      <UpdateSoftware
-        updateType={updateType}
-        processProgress={progress != null ? progress : 0}
-      />
-    )
+    return <UpdateSoftware updateType={updateType} />
   }
 }