Minimal support for adding new fields to component blocks with existi…

…ng data (#7674) Co-authored-by: Daniel Cousens <413395+dcousens@users.noreply.github.com>
keystonejs · Jun 29, 2022 · 8b2194b · 8b2194b
1 parent b5b0fd3
commit 8b2194b
Show file tree

Hide file tree

Showing 13 changed files with 436 additions and 235 deletions.
diff --git a/.changeset/yellow-houses-doubt.md b/.changeset/yellow-houses-doubt.md
@@ -0,0 +1,5 @@
+---
+'@keystone-6/fields-document': patch
+---
+
+When new fields are added to an object field in a component block, the GraphQL will no longer error when returning data where some fields are missing in the saved data and the Admin UI will add the missing fields when a item is opened. Note that the missing fields won't be automatically added when fetched from the GraphQL, you will still have to handle the field being missing when consuming the data from the GraphQL API.
diff --git a/...lds-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx b/...lds-document/src/DocumentEditor/component-blocks/document-features-normalization.test.tsx
@@ -9,15 +9,11 @@ import { ChildField } from './api';
 
 const cases: Record<
   string,
-  { schema: ChildField; children: Node | Node[] } & (
-    | { kind: 'allowed' }
-    | { kind: 'not-allowed'; expectedNormalized: Node }
-  )
+  { schema: ChildField; children: Node | Node[]; expectedNormalized?: Node }
 > = {
   'mark where it should not exist in inline': {
     schema: fields.child({ kind: 'inline', placeholder: '' }),
     children: <text bold>this should not be bold</text>,
-    kind: 'not-allowed',
     expectedNormalized: <text>this should not be bold</text>,
   },
   'mark where it should not exist in block': {
@@ -27,7 +23,6 @@ const cases: Record<
         <text bold>this should not be bold</text>
       </paragraph>
     ),
-    kind: 'not-allowed',
     expectedNormalized: (
       <paragraph>
         <text>this should not be bold</text>
@@ -37,7 +32,6 @@ const cases: Record<
   'mark where it is is allowed in inline': {
     schema: fields.child({ kind: 'inline', placeholder: '', formatting: 'inherit' }),
     children: <text bold>this should be bold</text>,
-    kind: 'allowed',
   },
   'code block where it is not allowed in a block': {
     schema: fields.child({ kind: 'block', placeholder: '' }),
@@ -46,7 +40,6 @@ const cases: Record<
         <text>this should not be in a code block</text>
       </code>
     ),
-    kind: 'not-allowed',
     expectedNormalized: (
       <paragraph>
         <text>this should not be in a code block</text>
@@ -60,7 +53,6 @@ const cases: Record<
         <text>this should not be in a code block</text>
       </code>
     ),
-    kind: 'allowed',
   },
   'links allowed': {
     schema: fields.child({ kind: 'block', placeholder: '', links: 'inherit' }),
@@ -73,7 +65,6 @@ const cases: Record<
         <text> stuff</text>
       </paragraph>
     ),
-    kind: 'allowed',
   },
   'links not allowed': {
     schema: fields.child({ kind: 'block', placeholder: '' }),
@@ -91,7 +82,6 @@ const cases: Record<
         <text>some text not in a link (https://example.com) stuff</text>
       </paragraph>
     ),
-    kind: 'not-allowed',
   },
   'links allowed in inline': {
     schema: fields.child({ kind: 'inline', placeholder: '', links: 'inherit' }),
@@ -102,7 +92,6 @@ const cases: Record<
       </link>,
       <text> stuff</text>,
     ],
-    kind: 'allowed',
   },
   'links not allowed in inline': {
     schema: fields.child({ kind: 'inline', placeholder: '' }),
@@ -114,7 +103,6 @@ const cases: Record<
       <text> stuff</text>,
     ],
     expectedNormalized: <text>some text not in a link (https://example.com) stuff</text>,
-    kind: 'not-allowed',
   },
   'relationship allowed': {
     schema: fields.child({ kind: 'block', placeholder: '', relationships: 'inherit' }),
@@ -134,7 +122,6 @@ const cases: Record<
         <text> stuff</text>
       </paragraph>
     ),
-    kind: 'allowed',
   },
   'relationship not allowed': {
     schema: fields.child({ kind: 'block', placeholder: '' }),
@@ -159,7 +146,6 @@ const cases: Record<
         <text>some text Someone (Mention:5f6a9d7ec229fe1621532769) stuff</text>
       </paragraph>
     ),
-    kind: 'not-allowed',
   },
   'alignment allowed': {
     schema: fields.child({ kind: 'block', placeholder: '', formatting: { alignment: 'inherit' } }),
@@ -168,7 +154,6 @@ const cases: Record<
         <text>some text </text>
       </paragraph>
     ),
-    kind: 'allowed',
   },
   'alignment not allowed': {
     schema: fields.child({ kind: 'block', placeholder: '' }),
@@ -182,7 +167,6 @@ const cases: Record<
         <text>some text </text>
       </paragraph>
     ),
-    kind: 'not-allowed',
   },
   'divider allowed': {
     schema: fields.child({ kind: 'block', placeholder: '', dividers: 'inherit' }),
@@ -194,7 +178,6 @@ const cases: Record<
         <text />
       </divider>,
     ],
-    kind: 'allowed',
   },
   'divider not allowed': {
     schema: fields.child({ kind: 'block', placeholder: '' }),
@@ -211,8 +194,6 @@ const cases: Record<
         <text>some text </text>
       </paragraph>
     ),
-
-    kind: 'not-allowed',
   },
   'soft breaks allowed': {
     schema: fields.child({ kind: 'block', placeholder: '', formatting: { softBreaks: 'inherit' } }),
@@ -221,7 +202,6 @@ const cases: Record<
         <text>some{'\n'} text </text>
       </paragraph>
     ),
-    kind: 'allowed',
   },
   'soft breaks not allowed': {
     schema: fields.child({ kind: 'block', placeholder: '' }),
@@ -238,7 +218,6 @@ const cases: Record<
         <text>some text s</text>
       </paragraph>
     ),
-    kind: 'not-allowed',
   },
 };
 
@@ -250,7 +229,7 @@ function makeEditorWithChildField(
   const Prop = `component-${childField.options.kind}-prop` as const;
   return makeEditor(
     <editor>
-      <component-block component={'comp'} props={{}}>
+      <component-block component={'comp'} props={{ child: null }}>
         <Prop propPath={['child']}>{children}</Prop>
       </component-block>
       <paragraph>
@@ -280,13 +259,13 @@ Object.keys(cases).forEach(key => {
     let editor = makeEditorWithChildField(
       testCase.schema,
       testCase.children,
-      testCase.kind === 'allowed' ? 'disallow-non-normalized' : 'normalize'
+      testCase.expectedNormalized === undefined ? 'disallow-non-normalized' : 'normalize'
     );
-    if (testCase.kind === 'not-allowed') {
+    if (testCase.expectedNormalized !== undefined) {
       expect(editor).toEqualEditor(
         makeEditor(
           <editor>
-            <component-block component={'comp'} props={{}}>
+            <component-block component={'comp'} props={{ child: null }}>
               <Prop propPath={['child']}>{testCase.expectedNormalized}</Prop>
             </component-block>
             <paragraph>
@@ -312,7 +291,11 @@ test('mark disabled in inline prop', () => {
     <editor>
       <component-block
         component="comp"
-        props={Object {}}
+        props={
+          Object {
+            "child": null,
+          }
+        }
       >
         <component-inline-prop
           propPath={
@@ -349,7 +332,11 @@ test('mark enabled in inline prop', () => {
     <editor>
       <component-block
         component="comp"
-        props={Object {}}
+        props={
+          Object {
+            "child": null,
+          }
+        }
       >
         <component-inline-prop
           propPath={
@@ -390,7 +377,11 @@ test('mark disabled in block prop', () => {
     <editor>
       <component-block
         component="comp"
-        props={Object {}}
+        props={
+          Object {
+            "child": null,
+          }
+        }
       >
         <component-block-prop
           propPath={
@@ -431,7 +422,11 @@ test('mark enabled in block prop', () => {
     <editor>
       <component-block
         component="comp"
-        props={Object {}}
+        props={
+          Object {
+            "child": null,
+          }
+        }
       >
         <component-block-prop
           propPath={
@@ -474,7 +469,11 @@ test('heading disabled in block prop', () => {
     <editor>
       <component-block
         component="comp"
-        props={Object {}}
+        props={
+          Object {
+            "child": null,
+          }
+        }
       >
         <component-block-prop
           propPath={
@@ -515,7 +514,11 @@ test('heading enabled in block prop', () => {
     <editor>
       <component-block
         component="comp"
-        props={Object {}}
+        props={
+          Object {
+            "child": null,
+          }
+        }
       >
         <component-block-prop
           propPath={

diff --git a/...ages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx b/...ages/fields-document/src/DocumentEditor/component-blocks/insert-break-and-delete.test.tsx
@@ -46,7 +46,10 @@ const componentBlocks = {
 test('delete backward at start', () => {
   let editor = makeEditor(
     <editor>
-      <component-block component="withChildElements" props={{ prop: '' }}>
+      <component-block
+        component="withChildElements"
+        props={{ prop: '', block: null, inline: null }}
+      >
         <component-block-prop propPath={['block']}>
           <paragraph>
             <text>
@@ -91,7 +94,10 @@ test('delete backward at start', () => {
 test('insert break in last (inline) child prop', () => {
   let editor = makeEditor(
     <editor>
-      <component-block component="withChildElements" props={{ prop: '' }}>
+      <component-block
+        component="withChildElements"
+        props={{ prop: '', block: null, inline: null }}
+      >
         <component-block-prop propPath={['block']}>
           <paragraph>
             <text>some text</text>
@@ -117,6 +123,8 @@ test('insert break in last (inline) child prop', () => {
         component="withChildElements"
         props={
           Object {
+            "block": null,
+            "inline": null,
             "prop": "",
           }
         }
@@ -164,7 +172,10 @@ test('insert break in last (inline) child prop', () => {
 test('insert break in first (block) child prop in empty paragraph', () => {
   let editor = makeEditor(
     <editor>
-      <component-block component="withChildElements" props={{ prop: '' }}>
+      <component-block
+        component="withChildElements"
+        props={{ prop: '', block: null, inline: null }}
+      >
         <component-block-prop propPath={['block']}>
           <paragraph>
             <text>some text</text>
@@ -192,6 +203,8 @@ test('insert break in first (block) child prop in empty paragraph', () => {
         component="withChildElements"
         props={
           Object {
+            "block": null,
+            "inline": null,
             "prop": "",
           }
         }
@@ -234,7 +247,10 @@ test('insert break in first (block) child prop in empty paragraph', () => {
 test('insert break in last (block) child prop in empty paragraph', () => {
   let editor = makeEditor(
     <editor>
-      <component-block component="withChildElementsBlockLast" props={{ prop: '' }}>
+      <component-block
+        component="withChildElementsBlockLast"
+        props={{ prop: '', block: null, inline: null }}
+      >
         <component-inline-prop propPath={['inline']}>
           <text>some more text</text>
         </component-inline-prop>
@@ -262,6 +278,8 @@ test('insert break in last (block) child prop in empty paragraph', () => {
         component="withChildElementsBlockLast"
         props={
           Object {
+            "block": null,
+            "inline": null,
             "prop": "",
           }
         }
@@ -308,7 +326,10 @@ test('insert break in last (block) child prop in empty paragraph', () => {
 test('insert break in first (inline) child prop', () => {
   let editor = makeEditor(
     <editor>
-      <component-block component="withChildElementsBlockLast" props={{ prop: '' }}>
+      <component-block
+        component="withChildElementsBlockLast"
+        props={{ prop: '', block: null, inline: null }}
+      >
         <component-inline-prop propPath={['inline']}>
           <text>
             some more
@@ -334,6 +355,8 @@ test('insert break in first (inline) child prop', () => {
         component="withChildElementsBlockLast"
         props={
           Object {
+            "block": null,
+            "inline": null,
             "prop": "",
           }
         }

diff --git a/.../fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx b/.../fields-document/src/DocumentEditor/component-blocks/insertion-and-preview-props.test.tsx
@@ -191,6 +191,7 @@ const makeEditorWithComplexComponentBlock = () =>
         component="complex"
         props={{
           object: {
+            block: null,
             conditional: {
               discriminant: false,
               value: null,
@@ -201,6 +202,7 @@ const makeEditorWithComplexComponentBlock = () =>
               discriminant: 'a',
               value: '',
             },
+            inline: null,
             many: [],
           },
         }}
@@ -311,6 +313,7 @@ test('preview props conditional change', () => {
         props={
           Object {
             "object": Object {
+              "block": null,
               "conditional": Object {
                 "discriminant": true,
                 "value": null,
@@ -319,6 +322,7 @@ test('preview props conditional change', () => {
                 "discriminant": "a",
                 "value": "",
               },
+              "inline": null,
               "many": Array [],
               "prop": "",
               "select": "a",