Merge pull request #3859 from backstage/orkohunter/scaffolder-allow-retry-without-loading

fix(scaffolder): Allow user to retry creating new component without having to reload the page

.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.

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 (
-    <Dialog open={isOpen} onClose={onClose} fullWidth>
+    <Dialog open={open} onClose={onClose} fullWidth>
       <DialogTitle id="responsive-dialog-title">{renderTitle()}</DialogTitle>
       <DialogContent>
         {!job ? (
@@ -81,7 +87,7 @@ export const JobStatusModal = ({ job, toCatalogLink }: Props) => {
       )}
       {job?.status === 'FAILED' && (
         <DialogActions>
-          <Action onClick={() => setOpen(false)}>Close</Action>
+          <Action onClick={onClose}>Close</Action>
         </DialogActions>
       )}
     </Dialog>

plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx

@@ -161,7 +161,12 @@ export const TemplatePage = () => {
       />
       <Content>
         {loading && <LinearProgress data-testid="loading-progress" />}
-        {modalOpen && <JobStatusModal job={job} toCatalogLink={catalogLink} />}
+        <JobStatusModal
+          job={job}
+          toCatalogLink={catalogLink}
+          open={modalOpen}
+          onModalClose={() => setModalOpen(false)}
+        />
         {template && (
           <InfoCard title={template.metadata.title} noPadding>
             <MultistepJsonForm

plugins/scaffolder/src/components/hooks/useJobPolling.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Job } from '../../types';
 import { useApi } from '@backstage/core';
 import { scaffolderApiRef } from '../../api';
@@ -28,10 +28,23 @@ export const useJobPolling = (
 ) => {
   const scaffolderApi = useApi(scaffolderApiRef);
   const [currentJob, setCurrentJob] = useState<Job | null>(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) {