fix(core): arrays of references support disableActions (#8877)

Author: jordanl17

dev/test-studio/schema/debug/arrayCapabilities.ts

@@ -1,9 +1,9 @@
 import {defineType} from '@sanity/types'
 
-const DISABLED_ACTIONS = ['add', 'addBefore', 'addAfter', 'duplicate', 'remove', 'copy'] as const
+const DISABLED_ACTIONS = ['add', 'duplicate', 'addBefore', 'addAfter', 'remove', 'copy'] as const
 
 export const arrayCapabilities = defineType({
-  name: 'arrayCapabilitiesExample',
+  name: 'arrayCapabilities',
   type: 'document',
   title: 'Array Capabilities test',
   // icon,
@@ -31,6 +31,7 @@ export const arrayCapabilities = defineType({
           fields: [{name: 'first', type: 'string', title: 'First string'}],
         },
       ],
+      initialValue: [{_type: 'something', first: 'First'}],
     },
     {
       name: 'objectArrayAsGrid',
@@ -73,5 +74,17 @@ export const arrayCapabilities = defineType({
         },
       ],
     },
+    {
+      name: 'arrayOfReferences',
+      title: 'Array of references to authors',
+      description: `With disabledActions: ${DISABLED_ACTIONS.join(', ')}`,
+      type: 'array',
+      options: {
+        collapsible: true,
+        collapsed: true,
+        disableActions: DISABLED_ACTIONS,
+      },
+      of: [{type: 'reference', to: [{type: 'author'}]}],
+    },
   ],
 })

packages/sanity/src/core/form/inputs/ReferenceInput/ReferenceItem.tsx

@@ -25,6 +25,7 @@ import {ContextMenuButton} from '../../../components/contextMenuButton'
 import {LoadingBlock} from '../../../components/loadingBlock'
 import {useTranslation} from '../../../i18n'
 import {FieldPresence} from '../../../presence'
+import {EMPTY_ARRAY} from '../../../util/empty'
 import {FormFieldSet, FormFieldValidationStatus} from '../../components/formField'
 import {useDidUpdate} from '../../hooks/useDidUpdate'
 import {useScrollIntoViewOnFocusWithin} from '../../hooks/useScrollIntoViewOnFocusWithin'
@@ -210,6 +211,8 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
     referenceElement: contextMenuButtonElement,
   })
 
+  const disableActions = parentSchemaType.options?.disableActions || EMPTY_ARRAY
+
   const menu = useMemo(
     () =>
       readOnly ? null : (
@@ -230,12 +233,14 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
               <Menu ref={menuRef}>
                 {!readOnly && (
                   <>
-                    <MenuItem
-                      text={t('inputs.reference.action.remove')}
-                      tone="critical"
-                      icon={TrashIcon}
-                      onClick={onRemove}
-                    />
+                    {!disableActions.includes('remove') && (
+                      <MenuItem
+                        text={t('inputs.reference.action.remove')}
+                        tone="critical"
+                        icon={TrashIcon}
+                        onClick={onRemove}
+                      />
+                    )}
                     <MenuItem
                       text={t(
                         hasRef && isEditing
@@ -245,18 +250,25 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
                       icon={hasRef && isEditing ? CloseIcon : ReplaceIcon}
                       onClick={handleReplace}
                     />
-                    <MenuItem
-                      text={t('inputs.reference.action.copy')}
-                      icon={CopyIcon}
-                      onClick={handleCopy}
-                    />
-                    <MenuItem
-                      text={t('inputs.reference.action.duplicate')}
-                      icon={AddDocumentIcon}
-                      onClick={handleDuplicate}
-                    />
-                    {insertBefore.menuItem}
-                    {insertAfter.menuItem}
+                    {!disableActions.includes('copy') && (
+                      <MenuItem
+                        text={t('inputs.reference.action.copy')}
+                        icon={CopyIcon}
+                        onClick={handleCopy}
+                      />
+                    )}
+                    {!disableActions.includes('duplicate') && (
+                      <MenuItem
+                        text={t('inputs.reference.action.duplicate')}
+                        icon={AddDocumentIcon}
+                        onClick={handleDuplicate}
+                      />
+                    )}
+                    {!(disableActions.includes('add') || disableActions.includes('addBefore')) &&
+                      insertBefore.menuItem}
+                    {!disableActions.includes('add') &&
+                      !disableActions.includes('addAfter') &&
+                      insertAfter.menuItem}
                   </>
                 )}
 
@@ -279,6 +291,7 @@ export function ReferenceItem<Item extends ReferenceItemValue = ReferenceItemVal
       ),
     [
       OpenLink,
+      disableActions,
       handleCopy,
       handleDuplicate,
       handleReplace,

packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBar.tsx

@@ -27,7 +27,7 @@ export interface DocumentStatusBarProps {
 
 const CONTAINER_BREAKPOINT = 480 // px
 
-const AnimatedCard = motion(Card)
+const AnimatedCard = motion.create(Card)
 
 export function DocumentStatusBar(props: DocumentStatusBarProps) {
   const {actionsBoxRef, createLinkMetadata} = props

playwright.config.ts

@@ -63,6 +63,7 @@ const playwrightConfig = createPlaywrightConfig({
       reporter: excludeGithub([['list'], ['blob']]),
       use: {
         ...config.use,
+        video: 'retain-on-failure',
         baseURL: 'http://localhost:3339',
         headless: HEADLESS,
         contextOptions: {reducedMotion: 'reduce'},

test/e2e/tests/inputs/array-capabilities.spec.ts

@@ -4,8 +4,12 @@ import {test as base} from '@sanity/test'
 
 const test = base.extend<{testDoc: SanityDocument}>({
   testDoc: async ({page, sanityClient}, use) => {
+    const referenceDoc = await sanityClient.create({
+      _type: 'author',
+      name: 'Test Author',
+    })
     const testDoc = await sanityClient.create({
-      _type: 'arrayCapabilitiesExample',
+      _type: 'arrayCapabilities',
       title: 'e2e fixture',
       objectArray: [
         {_type: 'something', _key: '5b75c4005e47', first: 'First'},
@@ -16,14 +20,16 @@ const test = base.extend<{testDoc: SanityDocument}>({
         {_type: 'something', _key: '630ae68957fb', first: 'Second'},
       ],
       primitiveArray: ['First', 2],
+      arrayOfReferences: [{_type: 'reference', _ref: referenceDoc._id}],
     })
     await use(testDoc)
     await sanityClient.delete(testDoc._id)
+    await sanityClient.delete(referenceDoc._id)
   },
 })
 
 test(`Scenario: Disabling all array capabilities`, async ({page, testDoc}) => {
-  await page.goto(`/test/content/arrayCapabilitiesExample;${testDoc._id}`)
+  await page.goto(`/test/content/input-debug;arrayCapabilities;${testDoc._id}`)
   await expect(page.getByTestId('document-panel-scroller')).toBeAttached({
     timeout: 40000,
   })