fix(field): disable revert changes on read-only fields and documents and hide fields from review changes if hidden: true (#2619)

* fix(field): disable revert changes buttons if fields are `readOnly`

* fix(field): hide fields if they are `hidden`

Author: vicmeow

examples/test-studio/schemas/objects.js

@@ -5,6 +5,7 @@ export const myObject = {
   name: 'myObject',
   title: 'My object',
   icon,
+  // readOnly: true,
   fields: [
     {
       name: 'first',
@@ -23,6 +24,7 @@ export default {
   name: 'objectsTest',
   type: 'document',
   title: 'Objects test',
+  // readOnly: true,
   preview: {
     select: {
       title: 'myObject.first',
@@ -42,13 +44,30 @@ export default {
       type: 'object',
       description:
         'This is a field of (anonymous, inline) object type. Values here should never get a `_type` property',
+      // readOnly: true,
+      // hidden: true,
       fields: [
-        {name: 'field1', type: 'string', description: 'This is a string field'},
+        {
+          name: 'field1',
+          type: 'string',
+          description: 'This is a string field',
+          // readOnly: true,
+          hidden: true,
+        },
         {
           name: 'field2',
           type: 'myObject',
-          title: 'A field of myObject',
+          title: 'A field of myObject 1',
+          description: 'This is another field of "myObject"',
+          readOnly: true,
+        },
+        {
+          name: 'field3',
+          type: 'myObject',
+          title: 'A field of myObject 2',
           description: 'This is another field of "myObject"',
+          // readOnly: true,
+          hidden: true,
         },
       ],
     },

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

@@ -80,6 +80,7 @@ export function buildObjectChangeList(
       path,
       titlePath,
       changes: reduceTitlePaths(changes, titlePath.length),
+      schemaType,
     },
   ]
 }
@@ -222,6 +223,7 @@ export function buildArrayChangeList(
         path,
         titlePath,
         changes: reduceTitlePaths(changes, titlePath.length),
+        schemaType,
       },
     ]
   }
@@ -280,6 +282,7 @@ function getFieldChange(
       showIndex: true,
       key: pathToString(path) || 'root',
       diffComponent: error ? undefined : component,
+      parentSchema,
     },
   ]
 }

packages/@sanity/field/src/diff/components/ChangeList.tsx

@@ -93,6 +93,7 @@ export function ChangeList({diff, fields, schemaType}: Props): React.ReactElemen
               change={change}
               key={change.key}
               data-revert-all-changes-hover={confirmRevertAllHover ? '' : undefined}
+              readOnly={schemaType.readOnly}
             />
           ))}
         </Stack>
@@ -107,6 +108,7 @@ export function ChangeList({diff, fields, schemaType}: Props): React.ReactElemen
               onClick={handleRevertAllChangesClick}
               onMouseEnter={handleRevertAllChangesMouseEnter}
               onMouseLeave={handleRevertAllChangesMouseLeave}
+              disabled={schemaType?.readOnly}
             />
           </Stack>
         )}

packages/@sanity/field/src/diff/components/ChangeResolver.tsx

@@ -6,7 +6,7 @@ import {GroupChange} from './GroupChange'
 export function ChangeResolver({
   change,
   ...restProps
-}: {change: ChangeNode} & React.HTMLAttributes<HTMLDivElement>) {
+}: {change: ChangeNode; readOnly?: boolean} & React.HTMLAttributes<HTMLDivElement>) {
   if (change.type === 'field') {
     return <FieldChange change={change} {...restProps} />
   }

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

@@ -51,8 +51,9 @@ const DiffBorder = styled.div`
 
 export function FieldChange({
   change,
+  readOnly,
   ...restProps
-}: {change: FieldChangeNode} & React.HTMLAttributes<HTMLDivElement>) {
+}: {change: FieldChangeNode; readOnly?: boolean} & React.HTMLAttributes<HTMLDivElement>) {
   const DiffComponent = change.diffComponent || FallbackDiff
   const {
     documentId,
@@ -92,7 +93,7 @@ export function FieldChange({
     setRevertHovered(false)
   }, [])
 
-  return (
+  return change.schemaType.hidden ? null : (
     <Stack space={1} as={FieldChangeContainer} {...restProps}>
       {change.showHeader && <ChangeBreadcrumb change={change} titlePath={change.titlePath} />}
       <FieldWrapper path={change.path} hasHover={revertHovered}>
@@ -120,6 +121,7 @@ export function FieldChange({
                 onMouseLeave={handleRevertButtonMouseLeave}
                 ref={setRevertButtonElement}
                 selected={confirmRevertOpen}
+                disabled={readOnly || change?.parentSchema?.readOnly || change.schemaType.readOnly}
               />
             </Box>
           )}

packages/@sanity/field/src/diff/components/GroupChange.tsx

@@ -50,8 +50,11 @@ const GroupChangeContainer = styled.div`
 
 export function GroupChange({
   change: group,
+  readOnly,
   ...restProps
-}: {change: GroupChangeNode} & React.HTMLAttributes<HTMLDivElement>): React.ReactElement {
+}: {change: GroupChangeNode; readOnly?: boolean} & React.HTMLAttributes<
+  HTMLDivElement
+>): React.ReactElement | null {
   const {titlePath, changes, path: groupPath} = group
   const {path: diffPath} = useContext(DiffContext)
   const {documentId, schemaType, FieldWrapper, rootDiff, isComparingCurrent} = useContext(
@@ -107,23 +110,27 @@ export function GroupChange({
     >
       <Stack as={ChangeListWrapper} space={5}>
         {changes.map((change) => (
-          <ChangeResolver key={change.key} change={change} />
+          <ChangeResolver
+            key={change.key}
+            change={change}
+            readOnly={readOnly || group?.schemaType?.readOnly}
+          />
         ))}
       </Stack>
-
       {isComparingCurrent && updatePermission.granted && (
         <Box>
           <RevertChangesButton
             onClick={handleRevertChangesConfirm}
             ref={setRevertButtonRef}
             selected={confirmRevertOpen}
+            disabled={group?.schemaType?.readOnly || readOnly}
           />
         </Box>
       )}
     </Stack>
   )
 
-  return (
+  return group?.schemaType?.hidden ? null : (
     <Stack space={1} {...restProps}>
       <ChangeBreadcrumb titlePath={titlePath} />
       {isNestedInDiff || !FieldWrapper ? (

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

@@ -194,6 +194,7 @@ export interface GroupChangeNode {
   key: string
   path: Path
   titlePath: ChangeTitlePath
+  schemaType?: SchemaType
 }
 
 export interface FieldChangeNode {
@@ -209,6 +210,7 @@ export interface FieldChangeNode {
   showHeader: boolean
   showIndex: boolean
   diffComponent?: DiffComponent
+  parentSchema?: ArraySchemaType | ObjectSchemaType
 }
 
 export type ChangeNode = GroupChangeNode | FieldChangeNode

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

@@ -45,6 +45,7 @@ export interface BaseSchemaType {
   icon?: React.ComponentType
   initialValue?: InitialValueProperty
   options?: unknown
+  hidden?: boolean
 
   preview?: {
     select?: PreviewValue