Merge pull request #25624 from mbenson/issue-22575-template-param-errors

support ajv-errors for scaffolder validation

plugins/scaffolder-react/package.json

@@ -78,6 +78,7 @@
     "@rjsf/validator-ajv8": "5.18.5",
     "@types/json-schema": "^7.0.9",
     "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0",
+    "ajv-errors": "^3.0.0",
     "classnames": "^2.2.6",
     "flatted": "3.3.1",
     "humanize-duration": "^3.25.1",

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

@@ -392,6 +392,46 @@ describe('Stepper', () => {
     expect(getByText('invalid postcode')).toBeInTheDocument();
   });
 
+  it('should render ajv-errors message', async () => {
+    const manifest: TemplateParameterSchema = {
+      steps: [
+        {
+          title: 'Step 1',
+          schema: {
+            properties: {
+              postcode: {
+                type: 'string',
+                pattern: '[A-Z][0-9][A-Z] [0-9][A-Z][0-9]',
+              },
+            },
+            errorMessage: {
+              properties: {
+                postcode: 'invalid postcode',
+              },
+            },
+          },
+        },
+      ],
+      title: 'transformErrors Form Test',
+    };
+
+    const { getByText, getByRole } = await renderInTestApp(
+      <SecretsContextProvider>
+        <Stepper manifest={manifest} extensions={[]} onCreate={jest.fn()} />
+      </SecretsContextProvider>,
+    );
+
+    await fireEvent.change(getByRole('textbox', { name: 'postcode' }), {
+      target: { value: 'invalid' },
+    });
+
+    await act(async () => {
+      await fireEvent.click(getByRole('button', { name: 'Review' }));
+    });
+
+    expect(getByText('invalid postcode')).toBeInTheDocument();
+  });
+
   it('should grab the initial formData from the query', async () => {
     const manifest: TemplateParameterSchema = {
       steps: [

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

@@ -35,7 +35,7 @@ import {
 } from './createAsyncValidators';
 import { ReviewState, type ReviewStateProps } from '../ReviewState';
 import { useTemplateSchema, useFormDataFromQuery } from '../../hooks';
-import validator from '@rjsf/validator-ajv8';
+import { customizeValidator } from '@rjsf/validator-ajv8';
 import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';
 import { hasErrors } from './utils';
 import * as FieldOverrides from './FieldOverrides';
@@ -50,6 +50,10 @@ import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
 import { ErrorListTemplate } from './ErrorListTemplate';
 import { makeStyles } from '@material-ui/core/styles';
 import { PasswordWidget } from '../PasswordWidget/PasswordWidget';
+import ajvErrors from 'ajv-errors';
+
+const validator = customizeValidator();
+ajvErrors(validator.ajv);
 
 const useStyles = makeStyles(theme => ({
   backButton: {