diff --git a/.changeset/famous-shrimps-double.md b/.changeset/famous-shrimps-double.md new file mode 100644 index 0000000000..198c0dc8f5 --- /dev/null +++ b/.changeset/famous-shrimps-double.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder': patch +--- + +Bug fix: User can retry creating a new component if an error occurs, without having to reload the page. diff --git a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx index 01a6346d24..d35385ec3b 100644 --- a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx +++ b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx @@ -23,18 +23,23 @@ import { LinearProgress, } from '@material-ui/core'; -import React, { useCallback, useState } from 'react'; +import React, { useCallback } from 'react'; import { Job } from '../../types'; import { JobStage } from '../JobStage/JobStage'; type Props = { job: Job | null; toCatalogLink?: string; + open: boolean; + onModalClose: () => void; }; -export const JobStatusModal = ({ job, toCatalogLink }: Props) => { - const [isOpen, setOpen] = useState(true); - +export const JobStatusModal = ({ + job, + toCatalogLink, + open, + onModalClose, +}: Props) => { const renderTitle = () => { switch (job?.status) { case 'COMPLETED': @@ -50,13 +55,14 @@ export const JobStatusModal = ({ job, toCatalogLink }: Props) => { if (!job) { return; } + // Disallow closing modal if the job is in progress. if (job.status === 'COMPLETED' || job.status === 'FAILED') { - setOpen(false); + onModalClose(); } - }, [job]); + }, [job, onModalClose]); return ( - + {renderTitle()} {!job ? ( @@ -81,7 +87,7 @@ export const JobStatusModal = ({ job, toCatalogLink }: Props) => { )} {job?.status === 'FAILED' && ( - setOpen(false)}>Close + Close )} diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx index 0754b64d7f..fd4e4c3ded 100644 --- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx +++ b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx @@ -161,7 +161,12 @@ export const TemplatePage = () => { /> {loading && } - {modalOpen && } + setModalOpen(false)} + /> {template && ( { const scaffolderApi = useApi(scaffolderApiRef); const [currentJob, setCurrentJob] = useState(null); + + useEffect(() => { + const resetCurrentJob = async () => { + if (jobId) { + const job = await scaffolderApi.getJob(jobId); + setCurrentJob(job); + } + }; + + resetCurrentJob(); + }, [jobId, scaffolderApi]); + const shouldBeRunningInterval = jobId && currentJob?.status !== 'COMPLETED' && currentJob?.status !== 'FAILED'; + useInterval( async () => { if (jobId) {