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

Signed-off-by: Bogdan Nechyporenko <bnechyporenko@bol.com>

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

@@ -32,9 +32,8 @@ import {
   type FormValidation,
 } from './createAsyncValidators';
 import { ReviewState, type ReviewStateProps } from '../ReviewState';
-import { useTemplateSchema } from '../../hooks/useTemplateSchema';
+import { useTemplateSchema, useFormDataFromQuery } from '../../hooks';
 import validator from '@rjsf/validator-ajv8';
-import { useFormDataFromQuery } from '../../hooks';
 import { FormProps } from '../../types';
 import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';
 import { hasErrors } from './utils';
@@ -73,6 +72,7 @@ export type StepperProps = {
   onCreate: (values: Record<string, JsonValue>) => Promise<void>;
   components?: {
     ReviewStateComponent?: (props: ReviewStateProps) => JSX.Element;
+    backButtonText?: ReactNode;
     createButtonText?: ReactNode;
     reviewButtonText?: ReactNode;
   };
@@ -87,6 +87,7 @@ export const Stepper = (stepperProps: StepperProps) => {
   const { layouts = [], components = {}, ...props } = stepperProps;
   const {
     ReviewStateComponent = ReviewState,
+    backButtonText = 'Back',
     createButtonText = 'Create',
     reviewButtonText = 'Review',
   } = components;
@@ -157,6 +158,13 @@ export const Stepper = (stepperProps: StepperProps) => {
     setFormState(current => ({ ...current, ...formData }));
   };
 
+  const backLabel =
+    configurations?.buttonLabels?.backButtonText ?? backButtonText;
+  const createLabel =
+    configurations?.buttonLabels?.createButtonText ?? createButtonText;
+  const reviewLabel =
+    configurations?.buttonLabels?.reviewButtonText ?? reviewButtonText;
+
   return (
     <>
       {isValidating && <LinearProgress variant="indeterminate" />}
@@ -167,7 +175,7 @@ export const Stepper = (stepperProps: StepperProps) => {
           </MuiStep>
         ))}
         <MuiStep>
-          <MuiStepLabel>Review</MuiStepLabel>
+          <MuiStepLabel>${reviewLabel}</MuiStepLabel>
         </MuiStep>
       </MuiStepper>
       <div className={styles.formWrapper}>
@@ -191,7 +199,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 className={styles.backButton}
                 disabled={activeStep < 1 || isValidating}
               >
-                Back
+                {backLabel}
               </Button>
               <Button
                 variant="contained"
@@ -199,7 +207,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>
@@ -212,7 +220,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 className={styles.backButton}
                 disabled={activeStep < 1}
               >
-                Back
+                {configurations?.buttonLabels?.backButtonText ?? backButtonText}
               </Button>
               <Button
                 variant="contained"
@@ -229,7 +237,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                   );
                 }}
               >
-                {configurations.kickOffButtonText ?? createButtonText}
+                {createLabel}
               </Button>
             </div>
           </>

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

@@ -42,7 +42,7 @@ export const useTemplateSchema = (
   manifest: TemplateParameterSchema,
 ): {
   steps: ParsedTemplateSchema[];
-  configurations: TemplateConfigurationsV1beta3;
+  configurations?: TemplateConfigurationsV1beta3;
 } => {
   const featureFlags = useApi(featureFlagsApiRef);
   const steps = manifest.steps.map(({ title, description, schema }) => ({