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

support ajv-errors for scaffolder validation

.changeset/modern-parrots-protect.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+support `ajv-errors` for scaffolder validation to allow for customizing the error messages

.github/vale/config/vocabularies/Backstage/accept.txt

@@ -7,6 +7,7 @@ ADRs
 airbrake
 Airbrake
 Airbrakes
+ajv
 Alaria
 Alef
 allowlisted

docs/features/software-templates/input-examples.md

@@ -26,6 +26,25 @@ parameters:
         ui:help: 'Hint: additional description...'
 ```
 
+#### Custom validation error message
+
+```yaml
+parameters:
+  - title: Fill in some steps
+    properties:
+      name:
+        title: Simple text input
+        type: string
+        description: Description about input
+        maxLength: 8
+        pattern: '^([a-zA-Z][a-zA-Z0-9]*)(-[a-zA-Z0-9]+)*$'
+        ui:autofocus: true
+        ui:help: 'Hint: additional description...'
+    errorMessage:
+      properties:
+        name: '1-8 alphanumeric tokens (first starts with letter) delimited by -'
+```
+
 ### Multi line text input
 
 ```yaml

docs/features/software-templates/writing-templates.md

@@ -533,6 +533,11 @@ catalogFilter:
     metadata.annotations.github.com/team-slug: { exists: true }
 ```
 
+#### Custom validation messages
+
+You may specify custom JSON Schema validation messages as supported by the
+[ajv-errors](https://github.com/ajv-validator/ajv-errors) plugin library to [ajv](https://github.com/ajv-validator/ajv).
+
 ## `spec.steps` - `Action[]`
 
 The `steps` is an array of the things that you want to happen part of this

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: {

yarn.lock

@@ -7113,6 +7113,7 @@ __metadata:
     "@types/json-schema": ^7.0.9
     "@types/luxon": ^3.0.0
     "@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