[field] Improve appearance of value/diff component errors

packages/@sanity/field/src/@types/parts.d.ts

@@ -70,6 +70,11 @@ declare module 'part:@sanity/base/undo-icon' {
   export default UndoIcon
 }
 
+declare module 'part:@sanity/base/error-outline-icon' {
+  const ErrorOutlineIcon: React.ComponentType<{}>
+  export default ErrorOutlineIcon
+}
+
 declare module 'part:@sanity/components/avatar' {
   export * from '@sanity/components/src/avatar'
 }

packages/@sanity/field/src/diff/changes/DiffErrorBoundary.css

@@ -0,0 +1,22 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  display: flex;
+}
+
+.icon {
+  color: var(--state-danger-color);
+
+  @nest & svg {
+    font-size: calc(17 / 16 * 1em);
+
+    @nest &[data-sanity-icon='true'] {
+      font-size: calc(25 / 16 * 1em);
+      margin: -4px;
+    }
+  }
+}
+
+.message {
+  padding-left: var(--small-padding);
+}

packages/@sanity/field/src/diff/changes/DiffErrorBoundary.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react'
+import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
+import styles from './ValueError.css'
 
 declare const __DEV__: boolean
 
@@ -31,17 +33,23 @@ export class DiffErrorBoundary extends React.Component<BoundaryProps, BoundarySt
   render() {
     const isDev = __DEV__ === true
     const {error} = this.state
-    if (error) {
-      const help = isDev ? <p>Check the developer console for more information.</p> : null
-      return (
-        <div>
-          <h2>Error</h2>
-          <p>The component responsible for showing the changes of this field crashed.</p>
-          {help}
-        </div>
-      )
+    if (!error) {
+      return this.props.children
     }
 
-    return this.props.children
+    const help = isDev ? <p>Check the developer console for more information.</p> : null
+    return (
+      <>
+        <div className={styles.root}>
+          <span className={styles.icon}>
+            <ErrorOutlineIcon />
+          </span>
+          <div className={styles.message}>
+            The component responsible for showing the changes to this field has crashed.
+            {help}
+          </div>
+        </div>
+      </>
+    )
   }
 }

packages/@sanity/field/src/diff/changes/FieldChange.css

@@ -6,6 +6,11 @@
   margin-bottom: 1em;
 }
 
+.error {
+  composes: root;
+  border-left-color: var(--state-danger-color);
+}
+
 .diffComponent {
 }
 

packages/@sanity/field/src/diff/changes/FieldChange.tsx

@@ -8,6 +8,7 @@ import {RevertChangesButton} from './RevertChangesButton'
 import {undoChange} from './undoChange'
 
 import styles from './FieldChange.css'
+import {ValueError} from './ValueError'
 
 const FallbackDiff = () => <div>Missing diff</div>
 
@@ -21,14 +22,20 @@ export function FieldChange({change}: {change: FieldChangeNode}) {
     [documentId, change.key, change.diff]
   )
 
+  const rootClass = change.error ? styles.error : styles.root
+
   return (
-    <div className={styles.root}>
+    <div className={rootClass}>
       {change.renderHeader && <ChangeHeader titlePath={change.titlePath} />}
 
       <div className={styles.diffComponent}>
-        <DiffErrorBoundary>
-          <DiffComponent diff={change.diff} schemaType={change.schemaType} />
-        </DiffErrorBoundary>
+        {change.error ? (
+          <ValueError error={change.error} />
+        ) : (
+          <DiffErrorBoundary>
+            <DiffComponent diff={change.diff} schemaType={change.schemaType} />
+          </DiffErrorBoundary>
+        )}
       </div>
 
       <div className={styles.revertChangesButtonContainer}>

packages/@sanity/field/src/diff/changes/ValueError.css

@@ -0,0 +1,23 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  color: var(--state-danger-color);
+
+  @nest & svg {
+    font-size: calc(17 / 16 * 1em);
+
+    @nest &[data-sanity-icon='true'] {
+      font-size: calc(25 / 16 * 1em);
+      margin: -4px;
+    }
+  }
+}
+
+.message {
+  padding-left: var(--small-padding);
+}

packages/@sanity/field/src/diff/changes/ValueError.tsx

@@ -1,5 +1,15 @@
 import * as React from 'react'
+import ErrorOutlineIcon from 'part:@sanity/base/error-outline-icon'
+import {FieldValueError} from '../../validation'
+import styles from './ValueError.css'
 
-export function ValueError(props: any) {
-  return <div>Value error</div>
+export function ValueError({error}: {error: FieldValueError}) {
+  return (
+    <div className={styles.root}>
+      <span className={styles.icon}>
+        <ErrorOutlineIcon />
+      </span>
+      <span className={styles.message}>Value error: {error.message}</span>
+    </div>
+  )
 }

packages/@sanity/field/src/diff/changes/buildChangeList.ts

@@ -14,7 +14,6 @@ import {
   ArrayDiff,
   DiffComponent
 } from '../../types'
-import {ValueError} from './ValueError'
 
 export function buildDocumentChangeList(schemaType: ObjectSchemaType, diff: ObjectDiff) {
   const changes = buildChangeList(schemaType, diff)
@@ -68,11 +67,12 @@ export function buildChangeList(
       type: 'field',
       diff,
       path,
+      error,
       titlePath,
       schemaType,
       renderHeader,
       key: pathToString(path),
-      diffComponent: error ? ValueError : component,
+      diffComponent: error ? undefined : component,
       childChanges:
         childChanges.length === 1 && childChanges[0].type === 'group'
           ? childChanges[0].changes

packages/@sanity/field/src/types.ts

@@ -15,6 +15,7 @@ import {
   StringSegmentUnchanged as AgnosticStringSegmentUnchanged
 } from '@sanity/diff'
 import {Path} from './paths'
+import {FieldValueError} from './validation'
 
 /**
  * History timeline / chunking
@@ -212,6 +213,7 @@ export interface FieldChangeNode {
   diff: Diff
   key: string
   path: Path
+  error?: FieldValueError
   titlePath: ChangeTitlePath
   schemaType: SchemaType
   renderHeader: boolean

packages/@sanity/field/src/validation/index.ts

@@ -1,6 +1,11 @@
 import {SchemaType, ObjectSchemaType} from '../diff'
 
-export function getValueError(value: unknown, schemaType: SchemaType) {
+export interface FieldValueError {
+  message: string
+  value: unknown
+}
+
+export function getValueError(value: unknown, schemaType: SchemaType): FieldValueError | undefined {
   const {jsonType} = schemaType
   const valueType = Array.isArray(value) ? 'array' : typeof value
 
@@ -9,11 +14,16 @@ export function getValueError(value: unknown, schemaType: SchemaType) {
   }
 
   if (valueType !== jsonType) {
-    return {error: `Value is ${valueType}, expected ${jsonType}`, value}
+    return {message: `Value is ${valueType}, expected ${jsonType}`, value}
   }
 
   if (isObjectType(schemaType) && isObjectValue(value)) {
-    return schemaType.fields.find(field => getValueError(value[field.name], field.type))
+    for (const field of schemaType.fields) {
+      const fieldError = getValueError(value[field.name], field.type)
+      if (fieldError) {
+        return fieldError
+      }
+    }
   }
 
   return undefined