feat(core): array editing improvements

[RitaDias]

Description

This pull request introduces a new experience for editing arrays of objects. The form now allows for navigation through a single dialog instead of multiple dialogs layered on top of each other.

What to review

• General review of the code
• Make sure the feature is behaving as expected.
  • The tree structure navigation in the sidebar
  • The search
  • The breadcrumbs navigation
• Everything should work as it currently does, except that the new dialog is being used.
• ⚠️ Since this is a shadow release, the most crucial aspect to review is that the feature is only visible in the Studio if it is enabled in the config (see below). If it is not present or is disabled in the configuration, the new way of editing arrays should not be visible.

export default defineConfig({
  // ...

  features: {
    beta: {
      treeArrayEditing: {
        enabled: true
      }
    }
  }
})

• It should be possible to opt out of tree editing for an array by setting options.treeEditing to false in the schema. Note that if the array field has any nested array fields, these will also opt out of tree editing.

import {type defineField} from 'sanity'

export const array = defineField({
  type: 'array',
  name: 'myArray',
  options: {
    treeEditing: false
  },
  of: [
    // ...
  ]
})

Testing

• Unit, Component and e2e tests were written to target the most important parts of this PR
• A couple of our clients had early access to this via a canary to gather feedback

Notes

• Arrays within the The Portable Text Editor will continue to use the existing solution.

Notes for release

N/A – this is a shadow release

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 6:44am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 6:44am
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 6:44am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 6:44am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 24, 2024 6:44am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Jun 24, 2024 6:44am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jun 24, 2024 6:55 AM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	41s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	7s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	27s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	32s	11	7	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	15s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	9s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	45s	2	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	37s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 16s	20	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 9s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	8s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	22s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	16s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	❌ Failed (Inspect)	1m 14s	20	0	1
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	55s	18	0	0