From 4670f06f72877aa20faf7f24021a977b22598754 Mon Sep 17 00:00:00 2001
From: Matt Benson <gudnabrsam@gmail.com>
Date: Wed, 6 Mar 2024 17:31:38 -0600
Subject: [PATCH] support ajv-errors for scaffolder validation

Signed-off-by: Matt Benson <gudnabrsam@gmail.com>
---
 .changeset/modern-parrots-protect.md          |  5 +++++
 .../config/vocabularies/Backstage/accept.txt  |  1 +
 .../software-templates/input-examples.md      | 19 +++++++++++++++++++
 .../software-templates/writing-templates.md   |  5 +++++
 plugins/scaffolder-react/package.json         |  1 +
 .../src/next/components/Stepper/Stepper.tsx   |  6 +++++-
 yarn.lock                                     |  1 +
 7 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-parrots-protect.md

diff --git a/.changeset/modern-parrots-protect.md b/.changeset/modern-parrots-protect.md
new file mode 100644
index 0000000000..7fccff1bef
--- /dev/null
+++ b/.changeset/modern-parrots-protect.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': patch
+---
+
+support ajv-errors for scaffolder validation
diff --git a/.github/vale/config/vocabularies/Backstage/accept.txt b/.github/vale/config/vocabularies/Backstage/accept.txt
index 6ff0ef56da..1092947245 100644
--- a/.github/vale/config/vocabularies/Backstage/accept.txt
+++ b/.github/vale/config/vocabularies/Backstage/accept.txt
@@ -7,6 +7,7 @@ ADRs
 airbrake
 Airbrake
 Airbrakes
+ajv
 Alaria
 Alef
 allowlisted
diff --git a/docs/features/software-templates/input-examples.md b/docs/features/software-templates/input-examples.md
index f49e76e469..dd1228290f 100644
--- a/docs/features/software-templates/input-examples.md
+++ b/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
diff --git a/docs/features/software-templates/writing-templates.md b/docs/features/software-templates/writing-templates.md
index 15591eeb67..075fe0bb08 100644
--- a/docs/features/software-templates/writing-templates.md
+++ b/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
diff --git a/plugins/scaffolder-react/package.json b/plugins/scaffolder-react/package.json
index f2d7d44a01..9c50900c05 100644
--- a/plugins/scaffolder-react/package.json
+++ b/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",
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
index 269b6a11d5..788c7cd715 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
+++ b/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: {
diff --git a/yarn.lock b/yarn.lock
index c6a1d2139a..fe7bc4b2c8 100644
--- a/yarn.lock
+++ b/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