From 17e7efdc9f47e41723e858013862b529da9cb6de Mon Sep 17 00:00:00 2001
From: Nikita Nek Dudnik <nikdudnik@gmail.com>
Date: Thu, 8 Oct 2020 15:06:32 +0200
Subject: [PATCH] remove on close from component creation modal

---
 .../src/components/JobStatusModal/JobStatusModal.tsx | 10 ++--------
 .../MultistepJsonForm/MultistepJsonForm.tsx          | 12 ++++++++----
 .../src/components/TemplatePage/TemplatePage.tsx     |  2 --
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx b/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx
index c531e0ec2c..149f7a47d7 100644
--- a/plugins/scaffolder/src/components/JobStatusModal/JobStatusModal.tsx
+++ b/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 ? (
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index f0ba720b39..9700d43c00 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/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();
diff --git a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx b/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
index e68c795bd6..19196d39ad 100644
--- a/plugins/scaffolder/src/components/TemplatePage/TemplatePage.tsx
+++ b/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}
           />
         )}