feat(core): add support for 'full' array insert menu

[christianhg]

Warning

Maybe this needs to go behind some sort of feature flag before merging. I just haven't figured out yet what the best mechanism is for that.

Description

A new insertMenu array option that allows you to pick a full layout along with optional grouping.

    defineField({
      name: 'blocks',
      title: 'Blocks',
      type: 'array',
      of: [{type: 'hero'}, {type: 'logo-carousel'}, {type: 'testimonials'}],
      options: {
        insertMenu: {
          layout: 'full',
          views: ['grid', 'list'],
          groups: [
            {
              name: 'intro',
              title: 'Intro',
              of: ['hero'],
            },
            {
              name: 'storytelling',
              title: 'Storytelling',
            },
            {
              name: 'upsell',
              title: 'Upsell',
              of: ['testimonials', 'hero'],
            },
          ],
        },
      },

If you leave out groups in the config, then they are left out of the UI as well:

You can use both the groups and the free text field to filter item types in the array:

And you can toggle a grid view on the insert menu (still a WIP):

What to review

1. Does the API for configuring the new insert menu layout (+groups) look OK and does the rendered UI match the expectations?
2. Is it OK to reuse the FieldGroupTabs to render the group tabs?

Testing

No automated tests added so far, but we can look into that before merging.

Known issues

1. It's not possible to TAB in to the list of menu items
   

Notes for 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 4, 2024 7:45am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 4, 2024 7:45am
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 4, 2024 7:45am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 4, 2024 7:45am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 4, 2024 7:45am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Jun 4, 2024 7:45am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jun 4, 2024 7:36 AM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	36s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	7s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	28s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	33s	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/FocusTracking.spec.tsx	✅ Passed (Inspect)	37s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 18s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 4s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	7s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	21s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	15s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	31s	12	0	0

[christianhg]

Closing this in favour of #6853