feat(core): new insert menu for arrays with filtering, type preview support

[christianhg]

Description

Instead of using a MenuButton the "array of objects" now renders the insert
menu using the InsertMenu from the new @sanity/insert-menu package. This
insert menu allows more configuration in the form of InsertMenuOptions which
are exposed on the ArrayOptions interface.

---

These are the options available:

/** @alpha This API may change */
export interface InsertMenuOptions {
  /**
   * @defaultValue `'auto'`
   * `filter: 'auto'` automatically turns on filtering if there are more than 5
   * schema types added to the menu.
   */
  filter?: 'auto' | 'on' | 'off'
  groups?: Array<{name: string; title?: string; of?: Array<string>}>
  /** defaultValue `true` */
  showIcons?: boolean
  /** @defaultValue `[{name: 'list'}]` */
  views?: Array<
    {name: 'list'} | {name: 'grid'; previewImageUrl: (schemaTypeName: string) => string | undefined}
  >
}

And this if how they are made available:

/** @public */
export interface ArrayOptions<V = unknown> extends SearchConfiguration {
  // ...
  /** @alpha This API may change */
  insertMenu?: InsertMenuOptions
}

If you enable filter, add some groups and add grid and list views then you end up with something like this:

Instead of the usual:

(You can play around with the options in the page-building-studio)

The options still don't take effect in the context menu:

This is implemented in #6921

What to review

What's most important is that no existing functionality breaks. We are releasing this as @alpha to try it out internally before start promoting the new options.

Testing

I could definitely look into writing some tests for this. Let me know if you think this is a blocker for merging. I just didn't want to spend the time until the API/behaviour was somewhat decided upon. This PR adds a test for the multi-type array field to make sure the existing insert menu still works 🎉

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Jun 17, 2024 9:43am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Jun 17, 2024 9:47 AM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	39s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	6s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	25s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	31s	11	7	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	13s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	8s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	51s	1	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	34s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 14s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 3s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	7s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	20s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	15s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	29s	12	0	0

[christianhg]

@mariuslundgard, @rexxars , I think this logic is a tiny bit flawed now that we have auto-filtering. The original idea was to make the width of the menu match the button if filtering was turned on, but we can't infer from the outside that the menu decides to auto-enable filtering.

But now we might need

1. An alternate way to infer full width
2. A way for the menu to tell the call site that filtering is enabled

What do you think?

---

Array input with no insert menu options configured:

Array input with filter: 'on':

Array input with everything configured except filter:

[rexxars]

I'll defer to @mariuslundgard :)