diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx index 5178318978..b85a1e1f5d 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx +++ b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.tsx @@ -27,8 +27,7 @@ import { Theme as MuiTheme } from '@rjsf/material-ui'; import React, { useMemo, useState } from 'react'; import { FieldExtensionOptions } from '../../../extensions'; import { TemplateParameterSchema } from '../../../types'; -import { createAsyncValidator } from './createAsyncValidators'; -import { createFieldValidation } from './schema'; +import { createAsyncValidators } from './createAsyncValidators'; import { useTemplateSchema } from './useTemplateSchema'; const useStyles = makeStyles(theme => ({ @@ -74,9 +73,9 @@ export const Stepper = (props: StepperProps) => { ); }, [props.extensions]); - const validator = useMemo(() => { + const validation = useMemo(() => { const { mergedSchema } = steps[activeStep]; - return createAsyncValidator(mergedSchema, validators, { + return createAsyncValidators(mergedSchema, validators, { apiHolder, }); }, [steps, activeStep, validators, apiHolder]); @@ -86,9 +85,11 @@ export const Stepper = (props: StepperProps) => { }; const handleNext = async ({ formData }: { formData: JsonObject }) => { + // TODO(blam): What do we do about loading states, does each field extension get a chance + // to display it's own loading? Or should we grey out the entire form. setErrors(undefined); - const returnedValidation = await validator(formData); + const returnedValidation = await validation(formData); const hasErrors = Object.values(returnedValidation).some(i => { return i.__errors.length > 0; diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/createAsyncValidators.test.ts b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/createAsyncValidators.test.ts index f101ecf0f0..ed887fb56d 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/createAsyncValidators.test.ts +++ b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/createAsyncValidators.test.ts @@ -15,7 +15,7 @@ */ import { JsonObject } from '@backstage/types'; import { CustomFieldValidator } from '../../../extensions'; -import { createAsyncValidator } from './createAsyncValidators'; +import { createAsyncValidators } from './createAsyncValidators'; describe('createAsyncValidators', () => { it('should call the correct functions for validation', async () => { @@ -43,7 +43,7 @@ describe('createAsyncValidators', () => { const validators = { NameField: jest.fn(), AddressField: jest.fn() }; - const validate = createAsyncValidator(schema, validators, { + const validate = createAsyncValidators(schema, validators, { apiHolder: { get: jest.fn() }, }); @@ -98,7 +98,7 @@ describe('createAsyncValidators', () => { } }; - const validate = createAsyncValidator( + const validate = createAsyncValidators( schema, { NameField: NameField as CustomFieldValidator, diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/createAsyncValidators.ts b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/createAsyncValidators.ts index e2f625892a..d89f0d4e5f 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/createAsyncValidators.ts +++ b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/createAsyncValidators.ts @@ -21,7 +21,7 @@ import { CustomFieldValidator } from '../../../extensions'; import { Draft07 as JSONSchema } from 'json-schema-library'; import { createFieldValidation } from './schema'; -export const createAsyncValidator = ( +export const createAsyncValidators = ( rootSchema: JsonObject, validators: Record>, context: { @@ -41,7 +41,11 @@ export const createAsyncValidator = ( const validator = validators[definitionInSchema['ui:field']]; if (validator) { const fieldValidation = createFieldValidation(); - await validator(value, fieldValidation, context); + try { + await validator(value, fieldValidation, context); + } catch (ex) { + fieldValidation.addError(ex.message); + } formValidation[key] = fieldValidation; } } diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/schema.ts b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/schema.ts index d353820004..e2d5e89932 100644 --- a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/schema.ts +++ b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/schema.ts @@ -114,7 +114,6 @@ export const extractSchemaFromStep = ( /** * @alpha * Creates a field validation object for use in react jsonschema form - * @returns {FieldValidation} A field validation object that can be used to validate a field */ export const createFieldValidation = (): FieldValidation => { const fieldValidation: FieldValidation = {