chore: reworking how the schema looks

Signed-off-by: blam <ben@blam.sh>

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx

@@ -24,6 +24,7 @@ import { withTheme } from '@rjsf/core';
 import { Theme as MuiTheme } from '@rjsf/material-ui';
 import React, { useState } from 'react';
 import { TemplateParameterSchema } from '../../../types';
+import { useTemplateSchema } from './useTemplateSchema';
 
 const useStyles = makeStyles(theme => ({
   backButton: {
@@ -46,7 +47,7 @@ export interface StepperProps {
 const Form = withTheme(MuiTheme);
 
 export const Stepper = (props: StepperProps) => {
-  const { steps } = props.manifest;
+  const { steps } = useTemplateSchema(props.manifest);
   const [activeStep, setActiveStep] = useState(0);
   const styles = useStyles();
   const handleBack = () => {

plugins/scaffolder/src/next/TemplateWizardPage/Stepper/useTemplateSchema.ts

@@ -21,21 +21,34 @@ import { extractSchemaFromStep } from './schema';
 
 export const useTemplateSchema = (
   manifest: TemplateParameterSchema,
-): { steps: { uiSchema: UiSchema; schema: JsonObject }[] } => {
+): {
+  steps: {
+    uiSchema: UiSchema;
+    schema: JsonObject;
+    title: string;
+    description?: string;
+  }[];
+} => {
   const featureFlags = useApi(featureFlagsApiRef);
-  const steps = manifest.steps.map(({ schema }) =>
-    extractSchemaFromStep(schema),
-  );
+  const steps = manifest.steps.map(({ title, description, schema }) => ({
+    title,
+    description,
+    ...extractSchemaFromStep(schema),
+  }));
 
   const returningSteps = steps
+    // Filter out steps that are not enabled with the feature flags
     .filter(step => {
       const stepFeatureFlag = step.uiSchema['ui:backstage']?.featureFlag;
       return stepFeatureFlag ? featureFlags.isActive(stepFeatureFlag) : true;
     })
+    // Then filter out the properties that are not enabled with feature flag
     .map(step => ({
-      uiSchema: step.uiSchema,
+      ...step,
       schema: {
         ...step.schema,
+        // Title is rendered at the top of the page, so let's ignore this from jsonschemaform
+        title: undefined,
         properties: Object.fromEntries(
           Object.entries(step.schema.properties as JsonObject).filter(
             ([key]) => {