error suggestions for json schema validation

catalog/app/components/FileEditor/TextEditor.tsx

@@ -31,6 +31,7 @@ const useEditorTextStyles = M.makeStyles((t) => ({
   },
   helperText: {
     marginTop: t.spacing(0.5),
+    whiteSpace: 'pre-wrap', // TODO: use JsonValidationErrors
   },
 }))
 

catalog/app/components/JsonValidationErrors/JsonValidationErrors.tsx

@@ -21,6 +21,7 @@ interface SingleErrorProps {
   error: Err
 }
 
+// TODO: use more humble layout similar to TextField#helperText
 function SingleError({ className, error }: SingleErrorProps) {
   const classes = useSingleErrorStyles()
 

catalog/app/containers/Admin/Buckets/Tabulator/ConfigEditor.tsx

@@ -1,3 +1,4 @@
+import type { ErrorObject } from 'ajv'
 import * as React from 'react'
 import * as FF from 'final-form'
 import * as RF from 'react-final-form'
@@ -47,7 +48,8 @@ export const validateTable: FF.FieldValidator<string> = (inputStr?: string) => {
     const validator = makeSchemaValidator(tabulatorTableSchema)
     const errors = validator(data)
     if (errors.length) {
-      return new JsonInvalidAgainstSchema({ errors }).message
+      if (errors[0] instanceof Error) return errors[0].message
+      return new JsonInvalidAgainstSchema({ errors: errors as ErrorObject[] }).message
     }
     return undefined
   } catch (error) {

catalog/app/utils/error.ts

@@ -1,3 +1,4 @@
+import type { ErrorObject } from 'ajv'
 /**
  * Extensible error class.
  */
@@ -42,7 +43,7 @@ export class ErrorDisplay extends BaseError {
 }
 
 export interface JsonInvalidAgainstSchemaProps {
-  errors: { instancePath?: string; message?: string }[]
+  errors: ErrorObject[]
 }
 
 export class JsonInvalidAgainstSchema extends BaseError {
@@ -51,10 +52,16 @@ export class JsonInvalidAgainstSchema extends BaseError {
   constructor(props: JsonInvalidAgainstSchemaProps) {
     super(
       props.errors
-        .map(({ instancePath, message }) =>
-          instancePath ? `${instancePath} ${message}` : message,
-        )
-        .join(', '),
+        .map(({ instancePath, message, params, keyword }) => {
+          switch (keyword) {
+            case 'const':
+              return `${instancePath}: ${message}: ${params.allowedValue}`
+            case 'enum':
+              return `${instancePath}: ${message}: ${params.allowedValues.join(', ')}`
+          }
+          return `${instancePath}: ${message}`
+        })
+        .join('.\n'),
       props,
     )
   }