chore: things are working pretty nicely now with the later version and the next version of scaffolder

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

plugins/scaffolder/package.json

@@ -54,8 +54,10 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "@react-hookz/web": "^15.0.0",
-    "@rjsf/core": "^3.2.1",
-    "@rjsf/material-ui": "^3.2.1",
+    "@rjsf/core": "file:../../../react-jsonschema-form/packages/core",
+    "@rjsf/material-ui": "file:../../../react-jsonschema-form/packages/material-ui",
+    "@rjsf/utils": "file:../../../react-jsonschema-form/packages/utils",
+    "@rjsf/validator-ajv6": "file:../../../react-jsonschema-form/packages/validator-ajv6",
     "@types/json-schema": "^7.0.9",
     "@uiw/react-codemirror": "^4.9.3",
     "classnames": "^2.2.6",

plugins/scaffolder/src/components/MultistepJsonForm/MultistepJsonForm.tsx

@@ -30,7 +30,8 @@ import {
   featureFlagsApiRef,
 } from '@backstage/core-plugin-api';
 import { FormProps, IChangeEvent, UiSchema, withTheme } from '@rjsf/core';
-import { Theme as MuiTheme } from '@rjsf/material-ui';
+import { Theme } from '@rjsf/material-ui';
+import validator from '@rjsf/validator-ajv6';
 import React, { useState } from 'react';
 import { transformSchemaToProps } from './schema';
 import { Content, StructuredMetadataTable } from '@backstage/core-components';
@@ -38,7 +39,6 @@ import cloneDeep from 'lodash/cloneDeep';
 import * as fieldOverrides from './FieldOverrides';
 import { LayoutOptions } from '../../layouts';
 
-const Form = withTheme(MuiTheme);
 type Step = {
   schema: JsonObject;
   title: string;
@@ -123,6 +123,7 @@ export const MultistepJsonForm = (props: Props) => {
     finishButtonLabel,
     layouts,
   } = props;
+  const Form = withTheme(Theme);
   const [activeStep, setActiveStep] = useState(0);
   const [disableButtons, setDisableButtons] = useState(false);
   const errorApi = useApi(errorApiRef);
@@ -206,6 +207,7 @@ export const MultistepJsonForm = (props: Props) => {
               </StepLabel>
               <StepContent key={title}>
                 <Form
+                  validator={validator}
                   showErrorList={false}
                   fields={{ ...fieldOverrides, ...fields }}
                   widgets={widgets}

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

@@ -30,6 +30,7 @@ import { TemplateParameterSchema } from '../../../types';
 import { createAsyncValidators } from './createAsyncValidators';
 import { useTemplateSchema } from './useTemplateSchema';
 import { ReviewState } from './ReviewState';
+import validator from '@rjsf/validator-ajv6';
 
 const useStyles = makeStyles(theme => ({
   backButton: {
@@ -124,6 +125,7 @@ export const Stepper = (props: StepperProps) => {
       <div className={styles.formWrapper}>
         {activeStep < steps.length ? (
           <Form
+            validator={validator}
             extraErrors={errors}
             formData={formState}
             schema={steps[activeStep].schema}