Merge pull request #2807 from backstage/ndudnik/fix-component-creation-modal

Remove onClose from component creation modal

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

@@ -30,18 +30,12 @@ import { JobStage } from '../JobStage/JobStage';
 import { useJobPolling } from './useJobPolling';
 
 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

@@ -69,8 +69,9 @@ export const MultistepJsonForm = ({
         {steps.map(({ label, schema, ...formProps }) => (
           <Step key={label}>
             <StepLabel>{label}</StepLabel>
-            <StepContent>
+            <StepContent key={label}>
               <Form
+                key={label}
                 noHtml5Validate
                 formData={formData}
                 onChange={onChange}

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

@@ -26,7 +26,7 @@ import {
 import { catalogApiRef } from '@backstage/plugin-catalog';
 import { LinearProgress } from '@material-ui/core';
 import { IChangeEvent } from '@rjsf/core';
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Navigate } from 'react-router';
 import { useParams } from 'react-router-dom';
 import { useAsync } from 'react-use';
@@ -86,11 +86,12 @@ export const TemplatePage = () => {
   const [formState, setFormState] = useState({});
 
   const handleFormReset = () => setFormState({});
-  const handleChange = (e: IChangeEvent) =>
-    setFormState({ ...formState, ...e.formData });
+  const handleChange = useCallback(
+    (e: IChangeEvent) => setFormState({ ...formState, ...e.formData }),
+    [setFormState, formState],
+  );
 
   const [jobId, setJobId] = useState<string | null>(null);
-  const handleClose = () => setJobId(null);
 
   const handleCreate = async () => {
     try {
@@ -153,7 +154,6 @@ export const TemplatePage = () => {
           <JobStatusModal
             onComplete={handleCreateComplete}
             jobId={jobId}
-            onClose={handleClose}
             entity={entity}
           />
         )}