diff --git a/plugins/scaffolder-common/src/TemplateEntityV1beta3.ts b/plugins/scaffolder-common/src/TemplateEntityV1beta3.ts index ffd50eab79..96edd44595 100644 --- a/plugins/scaffolder-common/src/TemplateEntityV1beta3.ts +++ b/plugins/scaffolder-common/src/TemplateEntityV1beta3.ts @@ -71,8 +71,11 @@ export interface TemplateEntityV1beta3 extends Entity { } export interface TemplateConfigurationsV1beta3 { - kickOffButtonText?: string; - reviewButtonText?: string; + buttonLabels?: { + backButtonText?: string; + createButtonText?: string; + reviewButtonText?: string; + }; } /** diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 8240fca9e0..9c800b7605 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/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) => Promise; 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 && } @@ -167,7 +175,7 @@ export const Stepper = (stepperProps: StepperProps) => { ))} - Review + ${reviewLabel}
@@ -191,7 +199,7 @@ export const Stepper = (stepperProps: StepperProps) => { className={styles.backButton} disabled={activeStep < 1 || isValidating} > - Back + {backLabel}
@@ -212,7 +220,7 @@ export const Stepper = (stepperProps: StepperProps) => { className={styles.backButton} disabled={activeStep < 1} > - Back + {configurations?.buttonLabels?.backButtonText ?? backButtonText} diff --git a/plugins/scaffolder-react/src/next/hooks/useTemplateSchema.ts b/plugins/scaffolder-react/src/next/hooks/useTemplateSchema.ts index 5fbac20db7..738be10279 100644 --- a/plugins/scaffolder-react/src/next/hooks/useTemplateSchema.ts +++ b/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 }) => ({