Merge pull request #20615 from acierto/configure-template

Make it possible to define control buttons text (Back, Create, Review) per template

plugins/scaffolder-react/alpha-api-report.md

@@ -33,6 +33,7 @@ import { TaskStep } from '@backstage/plugin-scaffolder-common';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { TemplateGroupFilter } from '@backstage/plugin-scaffolder-react';
 import { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react';
+import { TemplatePresentationV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { UiSchema } from '@rjsf/utils';
 
 // @alpha (undocumented)
@@ -189,6 +190,7 @@ export type StepperProps = {
   components?: {
     ReviewStepComponent?: ComponentType<ReviewStepProps>;
     ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;
+    backButtonText?: ReactNode;
     createButtonText?: ReactNode;
     reviewButtonText?: ReactNode;
   };
@@ -303,6 +305,7 @@ export const useTemplateParameterSchema: (templateRef: string) => {
 // @alpha
 export const useTemplateSchema: (manifest: TemplateParameterSchema) => {
   steps: ParsedTemplateSchema[];
+  presentation?: TemplatePresentationV1beta3 | undefined;
 };
 
 // @alpha (undocumented)

plugins/scaffolder-react/api-report.md

@@ -39,6 +39,7 @@ import { StrictRJSFSchema } from '@rjsf/utils';
 import { TaskSpec } from '@backstage/plugin-scaffolder-common';
 import { TaskStep } from '@backstage/plugin-scaffolder-common';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { TemplatePresentationV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { TemplatesType } from '@rjsf/utils';
 import { UIOptionsType } from '@rjsf/utils';
 import { UiSchema } from '@rjsf/utils';
@@ -482,6 +483,7 @@ export type TemplateGroupFilter = {
 export type TemplateParameterSchema = {
   title: string;
   description?: string;
+  presentation?: TemplatePresentationV1beta3;
   steps: Array<{
     title: string;
     description?: string;

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -81,6 +81,7 @@ export type StepperProps = {
   components?: {
     ReviewStepComponent?: ComponentType<ReviewStepProps>;
     ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;
+    backButtonText?: ReactNode;
     createButtonText?: ReactNode;
     reviewButtonText?: ReactNode;
   };
@@ -96,11 +97,12 @@ export const Stepper = (stepperProps: StepperProps) => {
   const {
     ReviewStateComponent = ReviewState,
     ReviewStepComponent,
+    backButtonText = 'Back',
     createButtonText = 'Create',
     reviewButtonText = 'Review',
   } = components;
   const analytics = useAnalytics();
-  const { steps } = useTemplateSchema(props.manifest);
+  const { presentation, steps } = useTemplateSchema(props.manifest);
   const apiHolder = useApiHolder();
   const [activeStep, setActiveStep] = useState(0);
   const [isValidating, setIsValidating] = useState(false);
@@ -178,6 +180,13 @@ export const Stepper = (stepperProps: StepperProps) => {
     setFormState(current => ({ ...current, ...formData }));
   };
 
+  const backLabel =
+    presentation?.buttonLabels?.backButtonText ?? backButtonText;
+  const createLabel =
+    presentation?.buttonLabels?.createButtonText ?? createButtonText;
+  const reviewLabel =
+    presentation?.buttonLabels?.reviewButtonText ?? reviewButtonText;
+
   return (
     <>
       {isValidating && <LinearProgress variant="indeterminate" />}
@@ -213,7 +222,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 className={styles.backButton}
                 disabled={activeStep < 1 || isValidating}
               >
-                Back
+                {backLabel}
               </Button>
               <Button
                 variant="contained"
@@ -221,7 +230,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 type="submit"
                 disabled={isValidating}
               >
-                {activeStep === steps.length - 1 ? reviewButtonText : 'Next'}
+                {activeStep === steps.length - 1 ? reviewLabel : 'Next'}
               </Button>
             </div>
           </Form>
@@ -251,7 +260,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 color="primary"
                 onClick={handleCreate}
               >
-                {createButtonText}
+                {createLabel}
               </Button>
             </div>
           </>

plugins/scaffolder-react/src/next/hooks/useTemplateSchema.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { featureFlagsApiRef, useApi } from '@backstage/core-plugin-api';
+import { TemplatePresentationV1beta3 } from '@backstage/plugin-scaffolder-common';
 import { JsonObject } from '@backstage/types';
 import { UiSchema } from '@rjsf/utils';
 import { TemplateParameterSchema } from '@backstage/plugin-scaffolder-react';
@@ -39,7 +40,10 @@ export interface ParsedTemplateSchema {
  */
 export const useTemplateSchema = (
   manifest: TemplateParameterSchema,
-): { steps: ParsedTemplateSchema[] } => {
+): {
+  steps: ParsedTemplateSchema[];
+  presentation?: TemplatePresentationV1beta3;
+} => {
   const featureFlags = useApi(featureFlagsApiRef);
   const steps = manifest.steps.map(({ title, description, schema }) => ({
     title,
@@ -76,6 +80,7 @@ export const useTemplateSchema = (
     }));
 
   return {
+    presentation: manifest.presentation,
     steps: returningSteps,
   };
 };

plugins/scaffolder-react/src/types.ts

@@ -16,6 +16,8 @@
 
 import { JsonObject } from '@backstage/types';
 
+import { TemplatePresentationV1beta3 } from '@backstage/plugin-scaffolder-common';
+
 /**
  * The shape of each entry of parameters which gets rendered
  * as a separate step in the wizard input
@@ -25,6 +27,7 @@ import { JsonObject } from '@backstage/types';
 export type TemplateParameterSchema = {
   title: string;
   description?: string;
+  presentation?: TemplatePresentationV1beta3;
   steps: Array<{
     title: string;
     description?: string;