Correctly load Content field views when field access set to update: f…

…alse
keystonejs · Dec 23, 2019 · 57b1be7 · 57b1be7
1 parent b91e118
commit 57b1be7
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 68 deletions.
diff --git a/.changeset/swift-gorillas-switch.md b/.changeset/swift-gorillas-switch.md
@@ -0,0 +1,5 @@
+---
+'@keystonejs/app-admin-ui': patch
+---
+
+Correctly load Content field views when field access set to update: false
diff --git a/packages/app-admin-ui/client/pages/Item/index.js b/packages/app-admin-ui/client/pages/Item/index.js
@@ -53,17 +53,21 @@ const getCurrentValues = memoizeOne(getValues);
 
 const deserializeItem = memoizeOne((list, data) => list.deserializeItemData(data));
 
+const getRenderableFields = memoizeOne(list =>
+  list.fields
+    .filter(({ isPrimaryKey }) => !isPrimaryKey)
+    .filter(({ maybeAccess, config }) => !!maybeAccess.update || !!config.isReadOnly)
+);
+
 const ItemDetails = withRouter(
   class ItemDetails extends Component {
     constructor(props) {
       super(props);
       // memoized function so we can call it multiple times _per component_
       this.getFieldsObject = memoizeOne(() =>
         arrayToObject(
-          props.list.fields
-            .filter(({ isPrimaryKey }) => !isPrimaryKey)
-            .filter(({ isReadOnly }) => !isReadOnly)
-            .filter(({ maybeAccess }) => !!maybeAccess.update),
+          // NOTE: We _exclude_ read only fields
+          getRenderableFields(props.list).filter(({ config }) => !config.isReadOnly),
           'path'
         )
       );
@@ -295,66 +299,61 @@ const ItemDetails = withRouter(
           <Card css={{ marginBottom: '3em', paddingBottom: 0 }}>
             <Form>
               <AutocompleteCaptor />
-              {list.fields
-                .filter(({ isPrimaryKey }) => !isPrimaryKey)
-                .filter(({ maybeAccess, config }) => {
-                  return !!maybeAccess.update || config.isReadOnly;
-                })
-                .map((field, i) => (
-                  <Render key={field.path}>
-                    {() => {
-                      const [Field] = field.adminMeta.readViews([field.views.Field]);
-
-                      let onChange = useCallback(
-                        value => {
-                          this.setState(({ item: itm }) => ({
-                            item: {
-                              ...itm,
-                              [field.path]: value,
-                            },
-                            validationErrors: {},
-                            validationWarnings: {},
-                            itemHasChanged: true,
-                          }));
-                        },
-                        [field]
-                      );
-
-                      return useMemo(
-                        () => (
-                          <Field
-                            autoFocus={!i}
-                            field={field}
-                            list={list}
-                            item={item}
-                            errors={[
-                              ...(itemErrors[field.path] ? [itemErrors[field.path]] : []),
-                              ...(validationErrors[field.path] || []),
-                            ]}
-                            warnings={validationWarnings[field.path] || []}
-                            value={item[field.path]}
-                            savedValue={savedData[field.path]}
-                            onChange={onChange}
-                            renderContext="page"
-                            CreateItemModal={CreateItemModal}
-                          />
-                        ),
-                        [
-                          i,
-                          field,
-                          list,
-                          itemErrors[field.path],
-                          item[field.path],
-                          item.id,
-                          validationErrors[field.path],
-                          validationWarnings[field.path],
-                          savedData[field.path],
-                          onChange,
-                        ]
-                      );
-                    }}
-                  </Render>
-                ))}
+              {getRenderableFields(list).map((field, i) => (
+                <Render key={field.path}>
+                  {() => {
+                    const [Field] = field.adminMeta.readViews([field.views.Field]);
+
+                    let onChange = useCallback(
+                      value => {
+                        this.setState(({ item: itm }) => ({
+                          item: {
+                            ...itm,
+                            [field.path]: value,
+                          },
+                          validationErrors: {},
+                          validationWarnings: {},
+                          itemHasChanged: true,
+                        }));
+                      },
+                      [field]
+                    );
+
+                    return useMemo(
+                      () => (
+                        <Field
+                          autoFocus={!i}
+                          field={field}
+                          list={list}
+                          item={item}
+                          errors={[
+                            ...(itemErrors[field.path] ? [itemErrors[field.path]] : []),
+                            ...(validationErrors[field.path] || []),
+                          ]}
+                          warnings={validationWarnings[field.path] || []}
+                          value={item[field.path]}
+                          savedValue={savedData[field.path]}
+                          onChange={onChange}
+                          renderContext="page"
+                          CreateItemModal={CreateItemModal}
+                        />
+                      ),
+                      [
+                        i,
+                        field,
+                        list,
+                        itemErrors[field.path],
+                        item[field.path],
+                        item.id,
+                        validationErrors[field.path],
+                        validationWarnings[field.path],
+                        savedData[field.path],
+                        onChange,
+                      ]
+                    );
+                  }}
+                </Render>
+              ))}
             </Form>
             <Footer
               onSave={this.onSave}
@@ -413,10 +412,13 @@ const ItemPage = ({ list, itemId, adminPath, getListByKey }) => {
   // try to initialise the fields. They are Suspense capable, so may
   // throw Promises which will be caught by the wrapping <Suspense>
   captureSuspensePromises([
-    ...list.fields
-      .filter(({ isPrimaryKey }) => !isPrimaryKey)
-      .filter(({ maybeAccess }) => !!maybeAccess.update)
-      .map(field => () => field.initFieldView()),
+    // NOTE: We should really filter out non-renderable fields here, but there's
+    // an edgecase where deserialising will include all fields (even
+    // non-renderable ones), so we have to ensure the field views are all loaded
+    // even if they may not be used. This is particularly salient for the
+    // Content field which needs its views loaded to correctly deserialize.
+    // Ideally we'd use getRenderableFields() here.
+    ...list.fields.map(field => () => field.initFieldView()),
     // Deserialising requires the field be loaded and also any of its
     // deserialisation dependencies (eg; the Content field relies on the Blocks
     // being loaded), so it too could suspend here.