From 49c3f2bbbbeacc798881141321f8e55fbe332286 Mon Sep 17 00:00:00 2001
From: hiba-aldalaty <hibaaldalaty@gmail.com>
Date: Fri, 3 Sep 2021 09:57:03 +0100
Subject: [PATCH 1/3] Disable Create button in template after initial click

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>
---
 .changeset/sixty-carrots-marry.md                    |  5 +++++
 .../MultistepJsonForm/MultistepJsonForm.tsx          | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/sixty-carrots-marry.md

diff --git a/.changeset/sixty-carrots-marry.md b/.changeset/sixty-carrots-marry.md
new file mode 100644
index 0000000000..414c41c645
--- /dev/null
+++ b/.changeset/sixty-carrots-marry.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Disable 'Create' button in template after initial click to avoid confusion when there is slowness in template execution
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index cdcc22da29..ef7e74f2f1 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
@@ -112,6 +112,7 @@ export const MultistepJsonForm = ({
   widgets,
 }: Props) => {
   const [activeStep, setActiveStep] = useState(0);
+  const [disableCreateButton, setDisableCreateButton] = useState(false);
 
   const handleReset = () => {
     setActiveStep(0);
@@ -121,6 +122,10 @@ export const MultistepJsonForm = ({
     setActiveStep(Math.min(activeStep + 1, steps.length));
   };
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
+  const handleCreate = () => {
+    setDisableCreateButton(true);
+    onFinish();
+  };
 
   return (
     <>
@@ -174,7 +179,12 @@ export const MultistepJsonForm = ({
             <Box mb={4} />
             <Button onClick={handleBack}>Back</Button>
             <Button onClick={handleReset}>Reset</Button>
-            <Button variant="contained" color="primary" onClick={onFinish}>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleCreate}
+              disabled={disableCreateButton}
+            >
               Create
             </Button>
           </Paper>

From c299e90a26276eacc90f5120c8826a502a021021 Mon Sep 17 00:00:00 2001
From: hiba-aldalaty <hibaaldalaty@gmail.com>
Date: Wed, 8 Sep 2021 10:43:09 +0100
Subject: [PATCH 2/3] Disable all buttons in the final step in template when
 'Create' button is clicked in template.

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>
---
 .changeset/lovely-windows-return.md                |  5 +++++
 .../MultistepJsonForm/MultistepJsonForm.tsx        | 14 +++++++++-----
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/lovely-windows-return.md

diff --git a/.changeset/lovely-windows-return.md b/.changeset/lovely-windows-return.md
new file mode 100644
index 0000000000..55755af563
--- /dev/null
+++ b/.changeset/lovely-windows-return.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Disable all buttons in the final step when 'Create' button is clicked in template.
diff --git a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
index ef7e74f2f1..62c2881ab0 100644
--- a/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
+++ b/plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx
@@ -112,7 +112,7 @@ export const MultistepJsonForm = ({
   widgets,
 }: Props) => {
   const [activeStep, setActiveStep] = useState(0);
-  const [disableCreateButton, setDisableCreateButton] = useState(false);
+  const [disableButtons, setDisableButtons] = useState(false);
 
   const handleReset = () => {
     setActiveStep(0);
@@ -123,7 +123,7 @@ export const MultistepJsonForm = ({
   };
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
   const handleCreate = () => {
-    setDisableCreateButton(true);
+    setDisableButtons(true);
     onFinish();
   };
 
@@ -177,13 +177,17 @@ export const MultistepJsonForm = ({
               metadata={getReviewData(formData, steps)}
             />
             <Box mb={4} />
-            <Button onClick={handleBack}>Back</Button>
-            <Button onClick={handleReset}>Reset</Button>
+            <Button onClick={handleBack} disabled={disableButtons}>
+              Back
+            </Button>
+            <Button onClick={handleReset} disabled={disableButtons}>
+              Reset
+            </Button>
             <Button
               variant="contained"
               color="primary"
               onClick={handleCreate}
-              disabled={disableCreateButton}
+              disabled={disableButtons}
             >
               Create
             </Button>

From d16283a6c330c5c2240ca5b060b3edc41de15c0a Mon Sep 17 00:00:00 2001
From: hiba-aldalaty <hibaaldalaty@gmail.com>
Date: Wed, 8 Sep 2021 14:21:17 +0100
Subject: [PATCH 3/3] Remove unnecessary extra changeset file

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>
---
 .changeset/sixty-carrots-marry.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/sixty-carrots-marry.md

diff --git a/.changeset/sixty-carrots-marry.md b/.changeset/sixty-carrots-marry.md
deleted file mode 100644
index 414c41c645..0000000000
--- a/.changeset/sixty-carrots-marry.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@backstage/plugin-scaffolder': patch
----
-
-Disable 'Create' button in template after initial click to avoid confusion when there is slowness in template execution