support ajv-errors for scaffolder validation

Signed-off-by: Matt Benson <gudnabrsam@gmail.com>

.changeset/modern-parrots-protect.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+support ajv-errors for scaffolder validation

.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.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

@@ -7110,6 +7110,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