diff --git a/plugins/lime-plugin-firmware/firmware.spec.js b/plugins/lime-plugin-firmware/firmware.spec.js index fd7f6fbb..4d625aae 100644 --- a/plugins/lime-plugin-firmware/firmware.spec.js +++ b/plugins/lime-plugin-firmware/firmware.spec.js @@ -197,9 +197,11 @@ describe('firmware form', () => { version: 'SomeNewVersionName' })); render() + downloadRelease.mockImplementation(() => + new Promise(res => setTimeout(res, 10))); // let loading enter screen const downloadButton = await screen.findByRole('button', {name: /Download/i}) fireEvent.click(downloadButton); - stepSubmit(); + expect(await screen.findByLabelText('loading')).toBeInTheDocument(); await waitForExpect(() => { expect(downloadRelease).toHaveBeenCalled(); }) @@ -252,9 +254,11 @@ describe('firmware form', () => { .mockImplementation(async () => ( { download_status: 'downloaded', fw_path: '/tmp/upgrade.sh' } )); + upgradeFirmware.mockImplementation(() => new Promise(res => setTimeout(res, 10))); render() const upgradeButton = await screen.findByRole('button', {name: /Upgrade to SomeNewVersionName/i}); fireEvent.click(upgradeButton); + expect(await screen.findByLabelText('loading')).toBeInTheDocument(); expect(upgradeFirmware).toHaveBeenCalledWith('/tmp/upgrade.sh'); }); diff --git a/plugins/lime-plugin-firmware/src/firmwareQueries.js b/plugins/lime-plugin-firmware/src/firmwareQueries.js index f1a3f33d..18784eaa 100644 --- a/plugins/lime-plugin-firmware/src/firmwareQueries.js +++ b/plugins/lime-plugin-firmware/src/firmwareQueries.js @@ -1,7 +1,8 @@ import { useQuery, useMutation } from 'react-query'; import queryCache from 'utils/queryCache'; import { getUpgradeInfo, getNewVersion, getDownloadStatus, - upgradeConfirm, upgradeRevert, downloadRelease} from './firmwareApi' + upgradeConfirm, upgradeRevert, downloadRelease, + upgradeFirmware } from './firmwareApi' export function useUpgradeInfo() { return useQuery(["lime-utils", "get_upgrade_info"], getUpgradeInfo, {}); @@ -41,3 +42,7 @@ export function useDownloadRelease() { )} ) } + +export function useUpgradeFirwmare() { + return useMutation(upgradeFirmware); +} diff --git a/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js b/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js index 4fafcebd..668c2d89 100644 --- a/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js +++ b/plugins/lime-plugin-firmware/src/upgradePage/upgradePage.js @@ -7,7 +7,8 @@ import { useState, useEffect } from 'preact/hooks'; import { useForm } from 'react-hook-form'; import Loading from 'components/loading'; import { uploadFile, upgradeFirmware } from '../firmwareApi'; -import { useUpgradeInfo, useDownloadRelease, useDownloadStatus, useNewVersion} from '../firmwareQueries'; +import { useUpgradeInfo, useDownloadRelease, useDownloadStatus, + useNewVersion, useUpgradeFirwmare} from '../firmwareQueries'; export const SafeUpgradeBadge = () => { const { isLoading, data: upgradeInfo} = useUpgradeInfo(); @@ -48,7 +49,8 @@ const UpgradeFromRelease = ({onUpgrading, onSwitch}) => { } }); - const [downloadRelease] = useDownloadRelease(); + const [downloadRelease, { isLoading: submittingDownload }] = useDownloadRelease(); + const [upgradeFirmware, { isLoading: submittingUpgrade }] = useUpgradeFirwmare(); const filePath = downloadStatus && downloadStatus.fw_path; const status = downloadStatus && downloadStatus.download_status; @@ -70,6 +72,9 @@ const UpgradeFromRelease = ({onUpgrading, onSwitch}) => { {status === 'not-initiated' && } + {(submittingDownload || submittingUpgrade) && + + } {status === 'downloading' &&
Downloading
diff --git a/src/components/loading/index.js b/src/components/loading/index.js index a08c0fed..ef7c1bc9 100644 --- a/src/components/loading/index.js +++ b/src/components/loading/index.js @@ -3,7 +3,7 @@ import { h } from 'preact'; import style from './style.less'; export const Loading = ({ color }) => { - const styleOverride = color ? { 'backgroundColor': color } : ''; + const styleOverride = color ? { backgroundColor: color } : ''; return (