Merge pull request #7744 from OscarDHdz/scaffolder/EnableActionButtonsIfTemplateFails

Scaffolder: Enable buttons if template fails to execute

.changeset/green-tips-eat.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Scaffolder: Enable back Template action buttons if template fails to execute

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

@@ -24,6 +24,7 @@ import {
   Stepper,
   Typography,
 } from '@material-ui/core';
+import { errorApiRef, useApi } from '@backstage/core-plugin-api';
 import { FormProps, IChangeEvent, UiSchema, withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
 import React, { useState } from 'react';
@@ -44,7 +45,7 @@ type Props = {
   formData: Record<string, any>;
   onChange: (e: IChangeEvent) => void;
   onReset: () => void;
-  onFinish: () => void;
+  onFinish: () => Promise<void>;
   widgets?: FormProps<any>['widgets'];
   fields?: FormProps<any>['fields'];
 };
@@ -113,6 +114,7 @@ export const MultistepJsonForm = ({
 }: Props) => {
   const [activeStep, setActiveStep] = useState(0);
   const [disableButtons, setDisableButtons] = useState(false);
+  const errorApi = useApi(errorApiRef);
 
   const handleReset = () => {
     setActiveStep(0);
@@ -122,9 +124,14 @@ export const MultistepJsonForm = ({
     setActiveStep(Math.min(activeStep + 1, steps.length));
   };
   const handleBack = () => setActiveStep(Math.max(activeStep - 1, 0));
-  const handleCreate = () => {
+  const handleCreate = async () => {
     setDisableButtons(true);
-    onFinish();
+    try {
+      await onFinish();
+    } catch (err) {
+      setDisableButtons(false);
+      errorApi.post(err);
+    }
   };
 
   return (

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

@@ -128,13 +128,8 @@ export const TemplatePage = ({
   );
 
   const handleCreate = async () => {
-    try {
-      const id = await scaffolderApi.scaffold(templateName, formState);
-
-      navigate(generatePath(`${rootLink()}/tasks/:taskId`, { taskId: id }));
-    } catch (e) {
-      errorApi.post(e);
-    }
+    const id = await scaffolderApi.scaffold(templateName, formState);
+    navigate(generatePath(`${rootLink()}/tasks/:taskId`, { taskId: id }));
   };
 
   if (error) {