refactor createAsyncValidators to be recursive

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>

.changeset/shy-buses-mix.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder-react': minor
+---
+
+refactor createAsyncValidators to be recursive

packages/app/src/components/scaffolder/customScaffolderExtensions.tsx

@@ -68,7 +68,7 @@ export const LowerCaseValuePickerFieldExtension = scaffolderPlugin.provide(
 const MockDelayComponent = (
   props: NextFieldExtensionComponentProps<{ test?: string }>,
 ) => {
-  const { onChange, formData, rawErrors } = props;
+  const { onChange, formData, rawErrors = [] } = props;
   return (
     <TextField
       label="test"
@@ -76,7 +76,7 @@ const MockDelayComponent = (
       value={formData?.test ?? ''}
       onChange={({ target: { value } }) => onChange({ test: value })}
       margin="normal"
-      error={rawErrors?.length > 0 && !formData}
+      error={rawErrors.length > 0 && !formData}
     />
   );
 };

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

@@ -35,6 +35,7 @@ import { useFormDataFromQuery } from '../../hooks';
 import { FormProps } from '../../types';
 import { LayoutOptions } from '../../../layouts';
 import { useTransformSchemaToProps } from '../../hooks/useTransformSchemaToProps';
+import { isInvalid } from './guards';
 
 const useStyles = makeStyles(theme => ({
   backButton: {
@@ -136,11 +137,7 @@ export const Stepper = (stepperProps: StepperProps) => {
 
     const returnedValidation = await validation(formData);
 
-    const hasErrors = Object.values(returnedValidation).some(
-      i => i.__errors?.length,
-    );
-
-    if (hasErrors) {
+    if (isInvalid(returnedValidation)) {
       setErrors(returnedValidation);
     } else {
       setErrors(undefined);

plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.test.ts

@@ -224,13 +224,19 @@ describe('createAsyncValidators', () => {
       apiHolder: { get: jest.fn() },
     });
 
-    await validate({
-      actionType: 'newThing',
+    await expect(
+      validate({
+        actionType: 'newThing',
+        general: {
+          name: undefined,
+        },
+      }),
+    ).resolves.toEqual({
       general: {
-        name: undefined,
+        name: expect.objectContaining({
+          __errors: ['something is broken here!'],
+        }),
       },
     });
-
-    expect(validators.NameField).toHaveBeenCalled();
   });
 });

plugins/scaffolder-react/src/next/components/Stepper/createAsyncValidators.ts

@@ -15,12 +15,21 @@
  */
 
 import { FieldValidation } from '@rjsf/utils';
-import { JsonObject } from '@backstage/types';
+import type { JsonObject, JsonValue } from '@backstage/types';
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { Draft07 as JSONSchema } from 'json-schema-library';
 import { createFieldValidation } from '../../lib';
 import { NextCustomFieldValidator } from '../../extensions';
 
+function isObject(value: JsonValue | undefined): value is JsonObject {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+type FormValidation = Record<
+  string,
+  FieldValidation | Record<string, FieldValidation>
+>;
+
 export const createAsyncValidators = (
   rootSchema: JsonObject,
   validators: Record<string, undefined | NextCustomFieldValidator<unknown>>,
@@ -28,14 +37,17 @@ export const createAsyncValidators = (
     apiHolder: ApiHolder;
   },
 ) => {
-  async function validate(formData: JsonObject, pathPrefix: string = '#') {
+  async function validate(
+    formData: JsonObject,
+    pathPrefix: string = '#',
+    current: JsonObject = formData,
+  ): Promise<Record<string, FieldValidation>> {
     const parsedSchema = new JSONSchema(rootSchema);
-    const formValidation: Record<string, FieldValidation> = {};
-    for (const [key, value] of Object.entries(formData)) {
-      const definitionInSchema = parsedSchema.getSchema(
-        `${pathPrefix}/${key}`,
-        formData,
-      );
+    const formValidation: FormValidation = {};
+
+    for (const [key, value] of Object.entries(current)) {
+      const path = `${pathPrefix}/${key}`;
+      const definitionInSchema = parsedSchema.getSchema(path, formData);
 
       if (definitionInSchema && 'ui:field' in definitionInSchema) {
         const validator = validators[definitionInSchema['ui:field']];
@@ -48,10 +60,15 @@ export const createAsyncValidators = (
           }
           formValidation[key] = fieldValidation;
         }
+      } else if (isObject(value)) {
+        formValidation[key] = (await validate(formData, path, value)) as Record<
+          string,
+          FieldValidation
+        >;
       }
     }
 
-    return formValidation;
+    return formValidation as Record<string, FieldValidation>;
   }
 
   return async (formData: JsonObject) => {

plugins/scaffolder-react/src/next/components/Stepper/guards.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { FieldValidation } from '@rjsf/utils';
+
+function isFieldValidation(error: any): error is FieldValidation {
+  return !!error && '__errors' in error;
+}
+
+export function isInvalid(errors?: Record<string, FieldValidation>): boolean {
+  if (!errors) {
+    return false;
+  }
+
+  for (const error of Object.values(errors)) {
+    if (isFieldValidation(error)) {
+      return (error.__errors ?? []).length > 0;
+    }
+
+    return isInvalid(error);
+  }
+
+  return false;
+}