Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Mar 15, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1755992
fix(app): replace firmware update progress bar with spinner
ncdiehl11 Feb 13, 2024
2be4d61
lint
ncdiehl11 Feb 13, 2024
b510260
lint
ncdiehl11 Feb 13, 2024
129388a
lint
ncdiehl11 Feb 13, 2024
34d9284
Merge branch 'edge' into fix_app-firmwareupdate-in-progress-modal
mjhuff Mar 14, 2024
7329245
add the green check
mjhuff Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion app/src/organisms/FirmwareUpdateModal/__tests__/FirmwareUpdateModal.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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 () => {
Expand Down
33 changes: 14 additions & 19 deletions app/src/organisms/FirmwareUpdateModal/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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};
Expand All @@ -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,
Expand Down Expand Up @@ -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) {
Expand All @@ -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>
)
}
Loading