dest api: Clean up error API (#3698)

* standardize error codes

* reorganize

* cleanup errors on other components

* remove special case for dest type err

* rename/simplify split helper

* update form

* update test

* fix type issue

graphql2/graph/errorcodes.graphqls

@@ -0,0 +1,25 @@
+
+
+"""
+Known error codes that the server can return.
+
+These values will be returned in the `extensions.code` field of the error response.
+"""
+enum ErrorCode {
+
+    """
+    The input value is invalid, the `path` field will contain the exact path to the invalid input.
+
+    A separate error will be returned for each invalid field.
+    """
+    INVALID_INPUT_VALUE
+
+    """
+    The `path` field contains the exact path to the DestinationInput that is invalid.
+
+    The `extensions.fieldID` field contains the ID of the input field that is invalid.
+
+    A separate error will be returned for each invalid field.
+    """
+    INVALID_DEST_FIELD_VALUE
+}

graphql2/graphqlapp/app.go

@@ -148,6 +148,11 @@ func isGQLValidation(gqlErr *gqlerror.Error) bool {
 		return false
 	}
 
+	_, ok := gqlErr.Extensions["code"].(graphql2.ErrorCode)
+	if ok {
+		return true
+	}
+
 	code, ok := gqlErr.Extensions["code"].(string)
 	if !ok {
 		return false
@@ -157,9 +162,6 @@ func isGQLValidation(gqlErr *gqlerror.Error) bool {
 	case errcode.ValidationFailed, errcode.ParseFailed:
 		// These are gqlgen validation errors.
 		return true
-	case ErrCodeInvalidDestType, ErrCodeInvalidDestValue:
-		// These are destination validation errors.
-		return true
 	}
 
 	return false

graphql2/graphqlapp/destinationvalidation.go

@@ -17,11 +17,6 @@ import (
 	"github.com/vektah/gqlparser/v2/gqlerror"
 )
 
-const (
-	ErrCodeInvalidDestType  = "INVALID_DESTINATION_TYPE"
-	ErrCodeInvalidDestValue = "INVALID_DESTINATION_FIELD_VALUE"
-)
-
 func errReason(err error) string {
 	var fErr validation.FieldError
 	if errors.As(err, &fErr) {
@@ -48,16 +43,13 @@ func addDestFieldError(ctx context.Context, parentField, fieldID string, err err
 	for _, part := range parentParts {
 		p = append(p, ast.PathName(part))
 	}
-	p = append(p,
-		ast.PathName("values"), // DestinationInput.Values
-		ast.PathName(fieldID),
-	)
 
 	graphql.AddError(ctx, &gqlerror.Error{
 		Message: errReason(err),
 		Path:    p,
 		Extensions: map[string]interface{}{
-			"code": ErrCodeInvalidDestValue,
+			"code":    graphql2.ErrorCodeInvalidDestFieldValue,
+			"fieldID": fieldID,
 		},
 	})
 
@@ -186,7 +178,7 @@ func (a *App) ValidateDestination(ctx context.Context, fieldName string, dest *g
 		Message: "unsupported destination type",
 		Path:    p,
 		Extensions: map[string]interface{}{
-			"code": ErrCodeInvalidDestType,
+			"code": graphql2.ErrorCodeInvalidInputValue,
 		},
 	})
 

web/src/app/selection/DestinationField.stories.tsx

@@ -135,12 +135,20 @@ export const FieldError: Story = {
     disabled: false,
     destFieldErrors: [
       {
-        path: 'third-field',
+        path: ['input', 'dest'],
         message: 'This is an error message (third)',
+        extensions: {
+          code: 'INVALID_DEST_FIELD_VALUE',
+          fieldID: 'third-field',
+        },
       },
       {
-        path: 'first-field',
+        path: ['input', 'dest'],
         message: 'This is an error message (first)',
+        extensions: {
+          code: 'INVALID_DEST_FIELD_VALUE',
+          fieldID: 'first-field',
+        },
       },
     ],
   },

web/src/app/selection/DestinationField.tsx

@@ -4,7 +4,7 @@ import DestinationInputDirect from './DestinationInputDirect'
 import { useDestinationType } from '../util/RequireConfig'
 import DestinationSearchSelect from './DestinationSearchSelect'
 import { Grid } from '@mui/material'
-import { InputFieldError } from '../util/errutil'
+import { DestFieldValueError } from '../util/errtypes'
 
 export type DestinationFieldProps = {
   value: FieldValueInput[]
@@ -13,7 +13,7 @@ export type DestinationFieldProps = {
 
   disabled?: boolean
 
-  destFieldErrors?: InputFieldError[]
+  destFieldErrors?: DestFieldValueError[]
 }
 
 function capFirstLetter(s: string): string {
@@ -46,13 +46,9 @@ export default function DestinationField(
           props.onChange(newValues)
         }
 
-        // getFieldID returns the last segment of the path.
-        const getFieldID = (err: InputFieldError): string =>
-          err.path.split('.').pop() || ''
-
         const fieldErrMsg = capFirstLetter(
           props.destFieldErrors?.find(
-            (err) => getFieldID(err) === field.fieldID,
+            (err) => err.extensions.fieldID === field.fieldID,
           )?.message || '',
         )
 

web/src/app/users/UserContactMethodFormDest.stories.tsx

@@ -110,10 +110,14 @@ export const ErrorSingleField: Story = {
       statusUpdates: false,
     },
     disabled: false,
-    fieldErrors: [
+    errors: [
       {
         message: 'number is too short', // note: the 'n' is lowercase
-        path: 'dest.values.phone-number',
+        path: ['input', 'dest'],
+        extensions: {
+          code: 'INVALID_DEST_FIELD_VALUE',
+          fieldID: 'phone-number',
+        },
       },
     ],
   },
@@ -153,10 +157,13 @@ export const ErrorMultiField: Story = {
       statusUpdates: false,
     },
     disabled: false,
-    fieldErrors: [
+    errors: [
       {
-        path: 'name',
+        path: ['input', 'name'],
         message: 'must begin with a letter',
+        extensions: {
+          code: 'INVALID_INPUT_VALUE',
+        },
       },
     ],
   },

web/src/app/users/UserContactMethodFormDest.tsx

@@ -5,9 +5,14 @@ import React from 'react'
 import { DestinationInput } from '../../schema'
 import { FormContainer, FormField } from '../forms'
 import { renderMenuItem } from '../selection/DisableableMenuItem'
-import { InputFieldError, SimpleError } from '../util/errutil'
 import DestinationField from '../selection/DestinationField'
 import { useContactMethodTypes } from '../util/RequireConfig'
+import {
+  isInputFieldError,
+  isDestFieldError,
+  KnownError,
+  DestFieldValueError,
+} from '../util/errtypes'
 
 export type Value = {
   name: string
@@ -18,19 +23,24 @@ export type Value = {
 export type UserContactMethodFormProps = {
   value: Value
 
-  typeError?: SimpleError
-  fieldErrors?: Array<InputFieldError>
+  errors?: Array<KnownError | DestFieldValueError>
 
   disabled?: boolean
   edit?: boolean
 
   onChange?: (CMValue: Value) => void
 }
 
+export const errorPaths = (prefix = '*'): string[] => [
+  `${prefix}.name`,
+  `${prefix}.dest.type`,
+  `${prefix}.dest`,
+]
+
 export default function UserContactMethodFormDest(
   props: UserContactMethodFormProps,
 ): JSX.Element {
-  const { value, edit = false, ...other } = props
+  const { value, edit = false, errors = [], ...other } = props
 
   const destinationTypes = useContactMethodTypes()
   const currentType = destinationTypes.find((d) => d.type === value.dest.type)
@@ -47,28 +57,14 @@ export default function UserContactMethodFormDest(
     statusUpdateChecked = false
   }
 
-  const formErrors = []
-  if (props.typeError) {
-    formErrors.push({
-      // the old form code requires this shape to map errors to the correct field
-      message: props.typeError.message,
-      field: 'dest.type',
-    })
-  }
-  const nameErr = props.fieldErrors?.find(
-    (err) => err.path.split('.').pop() === 'name',
-  )
-  if (nameErr) {
-    formErrors.push({
-      message: nameErr.message,
-      field: 'name',
-    })
-  }
-
   return (
     <FormContainer
       {...other}
-      errors={formErrors}
+      errors={errors?.filter(isInputFieldError).map((e) => ({
+        // need to convert to FormContainer's error format
+        message: e.message,
+        field: e.path[e.path.length - 1].toString(),
+      }))}
       value={value}
       mapOnChangeValue={(newValue: Value): Value => {
         if (newValue.dest.type === value.dest.type) {
@@ -119,7 +115,7 @@ export default function UserContactMethodFormDest(
             destType={value.dest.type}
             component={DestinationField}
             disabled={edit}
-            destFieldErrors={props.fieldErrors}
+            destFieldErrors={errors.filter(isDestFieldError)}
           />
         </Grid>
         <Grid item xs={12}>