remove on close from component creation modal

plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx

@@ -30,18 +30,12 @@ import { entityRoute } from '@backstage/plugin-catalog';
 import { generatePath } from 'react-router-dom';
 
 type Props = {
-  onClose: () => void;
   onComplete: (job: Job) => void;
   jobId: string;
   entity: TemplateEntityV1alpha1 | null;
 };
 
-export const JobStatusModal = ({
-  onClose,
-  jobId,
-  onComplete,
-  entity,
-}: Props) => {
+export const JobStatusModal = ({ jobId, onComplete, entity }: Props) => {
   const job = useJobPolling(jobId);
   const [dialogTitle, setDialogTitle] = useState('Creating component...');
 
@@ -54,7 +48,7 @@ export const JobStatusModal = ({
   }, [job, onComplete, setDialogTitle]);
 
   return (
-    <Dialog open onClose={onClose} fullWidth>
+    <Dialog open fullWidth>
       <DialogTitle id="responsive-dialog-title">{dialogTitle}</DialogTitle>
       <DialogContent>
         {!job ? (

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -27,7 +27,7 @@ import {
 } from '@material-ui/core';
 import { FormProps, IChangeEvent, withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const Form = withTheme(MuiTheme);
 type Step = {
@@ -54,6 +54,7 @@ export const MultistepJsonForm = ({
   onFinish,
 }: Props) => {
   const [activeStep, setActiveStep] = useState(0);
+  const [formDataEvent, setFormDataEvent] = useState({ formData: {} });
 
   const handleReset = () => {
     setActiveStep(0);
@@ -62,18 +63,21 @@ export const MultistepJsonForm = ({
   const handleNext = () =>
     setActiveStep(Math.min(activeStep + 1, steps.length));
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
-
+  useEffect(() => {
+    onChange(formDataEvent as IChangeEvent);
+  }, [formDataEvent, onChange]);
   return (
     <>
       <Stepper activeStep={activeStep} orientation="vertical">
         {steps.map(({ label, schema, ...formProps }) => (
           <Step key={label}>
             <StepLabel>{label}</StepLabel>
-            <StepContent>
+            <StepContent key={label}>
               <Form
+                key={label}
                 noHtml5Validate
                 formData={formData}
-                onChange={onChange}
+                onChange={e => setFormDataEvent(e)}
                 schema={schema as FormProps<any>['schema']}
                 onSubmit={e => {
                   if (e.errors.length === 0) handleNext();

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

@@ -93,7 +93,6 @@ export const TemplatePage = () => {
     setFormState({ ...formState, ...e.formData });
 
   const [jobId, setJobId] = useState<string | null>(null);
-  const handleClose = () => setJobId(null);
 
   const handleCreate = async () => {
     try {
@@ -161,7 +160,6 @@ export const TemplatePage = () => {
           <JobStatusModal
             onComplete={handleCreateComplete}
             jobId={jobId}
-            onClose={handleClose}
             entity={entity}
           />
         )}