Updated to a presentation

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

plugins/scaffolder-backend/src/service/router.ts

@@ -365,7 +365,7 @@ export async function createRouter(
         const parameters = [template.spec.parameters ?? []].flat();
         res.json({
           title: template.metadata.title ?? template.metadata.name,
-          configurations: template.spec.configurations ?? {},
+          presentation: template.spec.presentation ?? {},
           description: template.metadata.description,
           'ui:options': template.metadata['ui:options'],
           steps: parameters.map(schema => ({

plugins/scaffolder-common/src/TemplateEntityV1beta3.ts

@@ -47,9 +47,9 @@ export interface TemplateEntityV1beta3 extends Entity {
     type: string;
 
     /**
-     * Template specific configurations.
+     * Template specific configuration of the presentation layer.
      */
-    configurations?: TemplateConfigurationsV1beta3;
+    presentation?: TemplatePresentationV1beta3;
 
     /**
      * This is a JSONSchema or an array of JSONSchema's which is used to render a form in the frontend
@@ -74,11 +74,11 @@ export interface TemplateEntityV1beta3 extends Entity {
 }
 
 /**
- * The configuration of the template.
+ * The presentation of the template.
  *
  * @public
  */
-export interface TemplateConfigurationsV1beta3 extends JsonObject {
+export interface TemplatePresentationV1beta3 extends JsonObject {
   /**
    * Overrides default buttons' text
    */

plugins/scaffolder-common/src/index.ts

@@ -27,7 +27,7 @@ export {
   isTemplateEntityV1beta3,
 } from './TemplateEntityV1beta3';
 export type {
-  TemplateConfigurationsV1beta3,
+  TemplatePresentationV1beta3,
   TemplateEntityV1beta3,
   TemplateEntityStepV1beta3,
   TemplateParametersV1beta3,

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);
@@ -173,6 +175,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" />}
@@ -208,7 +217,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 className={styles.backButton}
                 disabled={activeStep < 1 || isValidating}
               >
-                Back
+                {backLabel}
               </Button>
               <Button
                 variant="contained"
@@ -216,7 +225,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>
@@ -246,7 +255,7 @@ export const Stepper = (stepperProps: StepperProps) => {
                 color="primary"
                 onClick={handleCreate}
               >
-                {createButtonText}
+                {createLabel}
               </Button>
             </div>
           </>

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

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

plugins/scaffolder-react/src/types.ts

@@ -16,7 +16,7 @@
 
 import { JsonObject } from '@backstage/types';
 
-import { TemplateConfigurationsV1beta3 } from '@backstage/plugin-scaffolder-common';
+import { TemplatePresentationV1beta3 } from '@backstage/plugin-scaffolder-common';
 
 /**
  * The shape of each entry of parameters which gets rendered
@@ -27,7 +27,7 @@ import { TemplateConfigurationsV1beta3 } from '@backstage/plugin-scaffolder-comm
 export type TemplateParameterSchema = {
   title: string;
   description?: string;
-  configurations?: TemplateConfigurationsV1beta3;
+  presentation?: TemplatePresentationV1beta3;
   steps: Array<{
     title: string;
     description?: string;