Show read only field by access in admin ui

.changeset/blue-ways-work.md

@@ -0,0 +1,10 @@
+---
+'@keystonejs/app-admin-ui': minor
+'@keystonejs/field-content': minor
+'@keystonejs/fields-markdown': minor
+'@keystonejs/fields-wysiwyg-tinymce': minor
+'@keystonejs/fields': minor
+'@keystonejs/cypress-project-access-control': patch
+---
+
+Added `isReadOnly` option on fields and show them as disabled in admin ui edit item page. Before this you can not see the fields in admin-ui if you do not have `update` access

packages/app-admin-ui/client/components/CreateItemModal.js

@@ -222,6 +222,7 @@ const CreateItemModal = ({ prefillData = {}, onClose, onCreate }) => {
                           warnings={validationWarnings[field.path] || []}
                           onChange={onChange}
                           renderContext="dialog"
+                          isReadOnly={field.isReadOnly}
                         />
                       ),
                       [

packages/app-admin-ui/client/pages/Item/index.js

@@ -44,6 +44,8 @@ const Form = props => <form css={{ marginBottom: `${gridSize * 3}px` }} {...prop
 
 const getValues = (fieldsObject, item) => mapKeys(fieldsObject, field => field.serialize(item));
 
+const checkIsReadOnly = ({ maybeAccess, isReadOnly }) => !maybeAccess.update || !!isReadOnly;
+
 // Memoizing allows us to reduce the calls to `.serialize` when data hasn't
 // changed.
 const getInitialValues = memoizeOne(getValues);
@@ -52,9 +54,7 @@ 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)
+  list.fields.filter(({ isPrimaryKey }) => !isPrimaryKey)
 );
 
 const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
@@ -235,6 +235,7 @@ const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
             <Render key={field.path}>
               {() => {
                 const [Field] = field.readViews([field.views.Field]);
+                const isReadOnly = checkIsReadOnly(field);
                 // eslint-disable-next-line react-hooks/rules-of-hooks
                 const onChange = useCallback(
                   value => {
@@ -265,6 +266,7 @@ const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
                       field={field}
                       list={list}
                       item={item}
+                      isReadOnly={isReadOnly}
                       errors={[
                         ...(itemErrors[field.path] ? [itemErrors[field.path]] : []),
                         ...(validationErrors[field.path] || []),
@@ -287,6 +289,7 @@ const ItemDetails = ({ list, item: initialData, itemErrors, onUpdate }) => {
                     validationWarnings[field.path],
                     initialData[field.path],
                     onChange,
+                    isReadOnly,
                   ]
                 );
               }}

packages/field-content/src/views/Field.js

@@ -24,7 +24,7 @@ class ErrorBoundary extends Component {
   }
 }
 
-let ContentField = ({ field, value, onChange, autoFocus, errors }) => {
+let ContentField = ({ field, value, onChange, autoFocus, errors, isReadOnly }) => {
   const htmlID = `ks-content-editor-${field.path}`;
 
   return (
@@ -62,6 +62,7 @@ let ContentField = ({ field, value, onChange, autoFocus, errors }) => {
                   padding: '16px 32px',
                   minHeight: 200,
                 }}
+                isReadOnly={isReadOnly}
               />
             )}
         </ErrorBoundary>

packages/field-content/src/views/editor/index.js

@@ -32,7 +32,7 @@ function getSchema(blocks) {
   return schema;
 }
 
-function Stories({ value: editorState, onChange, blocks, className, id }) {
+function Stories({ value: editorState, onChange, blocks, className, id, isReadOnly }) {
   let schema = useMemo(() => {
     return getSchema(blocks);
   }, [blocks]);
@@ -75,6 +75,7 @@ function Stories({ value: editorState, onChange, blocks, className, id }) {
         onChange={({ value }) => {
           onChange(value);
         }}
+        readOnly={isReadOnly}
       />
       <AddBlock editor={editor} editorState={editorState} blocks={blocks} />
       <Toolbar {...{ editorState, editor, blocks }} />

packages/fields-markdown/src/views/Field.js

@@ -62,7 +62,7 @@ const IconToolbarButton = ({ isActive, label, icon, tooltipPlacement = 'top', ..
   );
 };
 
-export default function MarkdownField({ field, errors, value, onChange }) {
+export default function MarkdownField({ field, errors, value, onChange, isReadOnly }) {
   const htmlID = `ks-input-${field.path}`;
   const accessError = errors.find(
     error => error instanceof Error && error.name === 'AccessDeniedError'
@@ -81,7 +81,15 @@ export default function MarkdownField({ field, errors, value, onChange }) {
         }}
       >
         {tools.map(({ action, label, icon: Icon }) => {
-          return <IconToolbarButton key={label} icon={<Icon />} onClick={action} label={label} />;
+          return (
+            <IconToolbarButton
+              key={label}
+              icon={<Icon />}
+              onClick={action}
+              label={label}
+              disabled={isReadOnly}
+            />
+          );
         })}
       </div>
     );
@@ -122,6 +130,7 @@ export default function MarkdownField({ field, errors, value, onChange }) {
             tabSize: '2',
             lineWrapping: true,
             addModeClass: true,
+            readOnly: isReadOnly,
           }}
           editorDidMount={editor => {
             setTools(getTools(editor));

packages/fields-wysiwyg-tinymce/src/views/Field.js

@@ -37,7 +37,7 @@ const GlobalStyles = () => (
   />
 );
 
-const WysiwygField = ({ onChange, autoFocus, field, errors, value: serverValue }) => {
+const WysiwygField = ({ onChange, autoFocus, field, errors, value: serverValue, isReadOnly }) => {
   const handleChange = value => {
     if (typeof value === 'string') {
       onChange(value);
@@ -63,6 +63,7 @@ const WysiwygField = ({ onChange, autoFocus, field, errors, value: serverValue }
           init={{ ...defaultOptions, auto_focus: autoFocus, ...overrideOptions }}
           onEditorChange={handleChange}
           value={value}
+          isDisabled={isReadOnly}
         />
       </div>
     </FieldContainer>

packages/fields/src/Controller.js

@@ -10,6 +10,7 @@ export default class FieldController {
       isOrderable,
       isPrimaryKey,
       isRequired,
+      isReadOnly,
       adminDoc,
       defaultValue,
       ...config
@@ -25,6 +26,7 @@ export default class FieldController {
     this.isOrderable = isOrderable;
     this.isPrimaryKey = isPrimaryKey;
     this.isRequired = isRequired;
+    this.isReadOnly = isReadOnly;
     this.adminDoc = adminDoc;
     this.readViews = readViews;
     this.preloadViews = preloadViews;

packages/fields/src/types/CalendarDay/views/Field.js

@@ -6,7 +6,7 @@ import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-
 import { TextDayPicker } from '@arch-ui/day-picker';
 import { Alert } from '@arch-ui/alert';
 
-const CalendarDayField = ({ autoFocus, field, value, errors, onChange }) => {
+const CalendarDayField = ({ autoFocus, field, value, errors, onChange, isReadOnly }) => {
   const htmlID = `ks-daypicker-${field.path}`;
 
   return (
@@ -20,6 +20,7 @@ const CalendarDayField = ({ autoFocus, field, value, errors, onChange }) => {
           date={value}
           format={field.config.format}
           onChange={onChange}
+          disabled={isReadOnly}
         />
       </FieldInput>
 

packages/fields/src/types/Checkbox/views/Field.js

@@ -2,7 +2,13 @@
 
 import { jsx } from '@emotion/core';
 
-import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
+import {
+  FieldContainer,
+  FieldLabel,
+  FieldDescription,
+  FieldInput,
+  isReadOnly,
+} from '@arch-ui/fields';
 
 import { CheckboxPrimitive } from '@arch-ui/controls';
 
@@ -23,6 +29,7 @@ const CheckboxField = ({ onChange, autoFocus, field, value, errors }) => {
           checked={checked}
           onChange={handleChange}
           id={htmlID}
+          isDisabled={isReadOnly}
         />
         <FieldLabel
           htmlFor={htmlID}

packages/fields/src/types/CloudinaryImage/views/Field.js

@@ -187,17 +187,22 @@ export default class CloudinaryImageField extends Component {
   // ==============================
 
   renderUploadButton = () => {
-    const { uploadButtonLabel } = this.props;
+    const { uploadButtonLabel, isReadOnly } = this.props;
     const { changeStatus, isLoading } = this.state;
 
     return (
-      <LoadingButton onClick={this.openFileBrowser} isLoading={isLoading} variant="ghost">
+      <LoadingButton
+        onClick={this.openFileBrowser}
+        isLoading={isLoading}
+        variant="ghost"
+        isDisabled={isReadOnly}
+      >
         {uploadButtonLabel({ status: changeStatus })}
       </LoadingButton>
     );
   };
   renderCancelButton = () => {
-    const { cancelButtonLabel } = this.props;
+    const { cancelButtonLabel, isReadOnly } = this.props;
     const { changeStatus } = this.state;
 
     // possible states; no case for 'empty' as cancel is not rendered
@@ -214,14 +219,14 @@ export default class CloudinaryImageField extends Component {
     }
 
     return (
-      <Button onClick={onClick} variant="subtle" appearance={appearance}>
+      <Button onClick={onClick} variant="subtle" appearance={appearance} isDisabled={isReadOnly}>
         {cancelButtonLabel({ status: changeStatus })}
       </Button>
     );
   };
 
   render() {
-    const { autoFocus, field, statusMessage, errors } = this.props;
+    const { autoFocus, field, statusMessage, errors, isReadOnly } = this.props;
     const { changeStatus, errorMessage } = this.state;
 
     const { file } = this.getFile();
@@ -269,6 +274,7 @@ export default class CloudinaryImageField extends Component {
             name={field.path}
             onChange={this.onChange}
             type="file"
+            disabled={isReadOnly}
           />
         </FieldInput>
       </FieldContainer>

packages/fields/src/types/Color/views/Field.js

@@ -6,7 +6,7 @@ import Popout from '@arch-ui/popout';
 import { Button } from '@arch-ui/button';
 import SketchPicker from 'react-color/lib/Sketch';
 
-const ColorField = ({ field, value: serverValue, errors, onChange }) => {
+const ColorField = ({ field, value: serverValue, errors, onChange, isReadOnly }) => {
   const value = serverValue || '';
   const htmlID = `ks-input-${field.path}`;
 
@@ -24,7 +24,7 @@ const ColorField = ({ field, value: serverValue, errors, onChange }) => {
   }, [value]);
 
   const target = props => (
-    <Button {...props} variant="ghost">
+    <Button {...props} variant="ghost" isDisabled={isReadOnly}>
       {value ? (
         <Fragment>
           <div

packages/fields/src/types/DateTime/views/Field.js

@@ -5,15 +5,21 @@ import { jsx } from '@emotion/core';
 import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
 import { TextDayTimePicker } from '@arch-ui/day-picker';
 
-const DateTimeField = ({ autoFocus, field, onChange, value, errors }) => {
+const DateTimeField = ({ autoFocus, field, onChange, value, errors, isReadOnly }) => {
   const htmlID = `ks-input-${field.path}`;
 
   return (
     <FieldContainer>
       <FieldLabel htmlFor={htmlID} field={field} errors={errors} />
       <FieldDescription text={field.adminDoc} />
       <FieldInput>
-        <TextDayTimePicker id={htmlID} date={value} onChange={onChange} autoFocus={autoFocus} />
+        <TextDayTimePicker
+          id={htmlID}
+          date={value}
+          onChange={onChange}
+          autoFocus={autoFocus}
+          disabled={isReadOnly}
+        />
       </FieldInput>
     </FieldContainer>
   );

packages/fields/src/types/Decimal/views/Field.js

@@ -9,7 +9,7 @@ import {
 } from '@arch-ui/fields';
 import { Input } from '@arch-ui/input';
 
-const DecimalField = ({ onChange, autoFocus, field, value, errors }) => {
+const DecimalField = ({ onChange, autoFocus, field, value, errors, isReadOnly }) => {
   const handleChange = event => {
     const value = event.target.value;
     onChange(value.replace(/[^0-9.,]+/g, ''));
@@ -47,6 +47,7 @@ const DecimalField = ({ onChange, autoFocus, field, value, errors }) => {
           value={valueToString(value)}
           onChange={handleChange}
           id={htmlID}
+          disabled={isReadOnly}
         />
       </FieldInput>
     </FieldContainer>

packages/fields/src/types/File/views/Field.js

@@ -179,17 +179,22 @@ export default class FileField extends Component {
   // ==============================
 
   renderUploadButton = () => {
-    const { uploadButtonLabel } = this.props;
+    const { uploadButtonLabel, isReadOnly } = this.props;
     const { changeStatus, isLoading } = this.state;
 
     return (
-      <LoadingButton onClick={this.openFileBrowser} isLoading={isLoading} variant="ghost">
+      <LoadingButton
+        onClick={this.openFileBrowser}
+        isLoading={isLoading}
+        variant="ghost"
+        isDisabled={isReadOnly}
+      >
         {uploadButtonLabel({ status: changeStatus })}
       </LoadingButton>
     );
   };
   renderCancelButton = () => {
-    const { cancelButtonLabel } = this.props;
+    const { cancelButtonLabel, isReadOnly } = this.props;
     const { changeStatus } = this.state;
 
     // possible states; no case for 'empty' as cancel is not rendered
@@ -206,14 +211,14 @@ export default class FileField extends Component {
     }
 
     return (
-      <Button onClick={onClick} variant="subtle" appearance={appearance}>
+      <Button onClick={onClick} variant="subtle" appearance={appearance} isDisabled={isReadOnly}>
         {cancelButtonLabel({ status: changeStatus })}
       </Button>
     );
   };
 
   render() {
-    const { autoFocus, field, statusMessage, errors } = this.props;
+    const { autoFocus, field, statusMessage, errors, isReadOnly } = this.props;
     const { changeStatus, errorMessage } = this.state;
 
     const { file } = this.getFile();
@@ -260,6 +265,7 @@ export default class FileField extends Component {
             name={field.path}
             onChange={this.onChange}
             type="file"
+            disabled={isReadOnly}
           />
         </FieldInput>
       </FieldContainer>

packages/fields/src/types/Float/views/Field.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
 import { Input } from '@arch-ui/input';
 
-const FloatField = ({ onChange, autoFocus, field, value, errors }) => {
+const FloatField = ({ onChange, autoFocus, field, value, errors, isReadOnly }) => {
   const handleChange = event => {
     const value = event.target.value;
     // Similar implementation as per old Keystone version
@@ -38,6 +38,7 @@ const FloatField = ({ onChange, autoFocus, field, value, errors }) => {
           value={valueToString(value)}
           onChange={handleChange}
           id={htmlID}
+          disabled={isReadOnly}
         />
       </FieldInput>
     </FieldContainer>

packages/fields/src/types/Integer/views/Field.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { FieldContainer, FieldLabel, FieldDescription, FieldInput } from '@arch-ui/fields';
 import { Input } from '@arch-ui/input';
 
-const IntegerField = ({ onChange, autoFocus, field, value, errors }) => {
+const IntegerField = ({ onChange, autoFocus, field, value, errors, isReadOnly }) => {
   const handleChange = event => {
     const value = event.target.value;
     onChange(value.replace(/\D/g, ''));
@@ -35,6 +35,7 @@ const IntegerField = ({ onChange, autoFocus, field, value, errors }) => {
           value={valueToString(value)}
           onChange={handleChange}
           id={htmlID}
+          disabled={isReadOnly}
         />
       </FieldInput>
     </FieldContainer>