Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(core): support insert menu options in array item context menus #6921

Merged
merged 6 commits into from
Jun 21, 2024

Conversation

christianhg
Copy link
Contributor

@christianhg christianhg commented Jun 13, 2024

Description

Building on top of #6853, this PR adds the insert menu options to the context menu of each item in an array field. The old submenu in the context menu has been replaced with a popover, allowing for a fuller insert menu if that is configured.

Screenshot 2024-06-13 at 19 14 32
Screenshot 2024-06-13 at 19 14 38


Works for reference items as well:

Screenshot 2024-06-17 at 08 35 30
Screenshot 2024-06-17 at 08 35 34


Arrays of primitive values still use the old context menu sub menu:

Screenshot 2024-06-13 at 12 39 11

What to review

Review that you can still insert items as before and that the new insert menu options optionally can be configured and thereby will take effect in the context menu again. You can use the pnpm dev:page-builder-studio to play around with the insert menu options if you like.

Testing

Notes for release

Copy link

vercel bot commented Jun 13, 2024

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 18, 2024 8:38am
performance-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2024 8:38am
test-compiled-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2024 8:38am
test-next-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2024 8:38am
test-studio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 18, 2024 8:38am
1 Ignored Deployment
Name Status Preview Comments Updated (UTC)
studio-workshop ⬜️ Ignored (Inspect) Visit Preview Jun 18, 2024 8:38am

Copy link
Contributor

No changes to documentation

Copy link
Contributor

github-actions bot commented Jun 13, 2024

Component Testing Report Updated Jun 18, 2024 8:45 AM (UTC)

File Status Duration Passed Skipped Failed
comments/CommentInput.spec.tsx ✅ Passed (Inspect) 37s 15 0 0
formBuilder/ArrayInput.spec.tsx ✅ Passed (Inspect) 6s 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) 52s 1 0 0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx ✅ Passed (Inspect) 37s 15 0 0
formBuilder/inputs/PortableText/Input.spec.tsx ✅ Passed (Inspect) 1m 15s 20 0 0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx ✅ Passed (Inspect) 1m 5s 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) 30s 12 0 0

@christianhg christianhg force-pushed the feat-insert-menu-options-in-context-menu-take-2 branch from 7c4d610 to afdaeac Compare June 13, 2024 08:39
@christianhg christianhg force-pushed the feat-insert-menu-options-in-context-menu-take-2 branch from afdaeac to 87cf8ea Compare June 13, 2024 10:29
@christianhg christianhg force-pushed the feat-insert-menu-options-in-context-menu-take-2 branch from 87cf8ea to a401544 Compare June 13, 2024 10:43
Copy link
Contributor

@ricokahler ricokahler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code looks great! I had one UX suggestion in there but besides that I couldn't find any other issues.

I would like to encourage adding more tests if you have the time. On the studio team, we're trying to stricter about quality and culturally we want everyone to include tests for new surfaces added in the stduio. this can be e2e or jest.

},
popoverProps: {
referenceElement: props.referenceElement,
placement: 'top-end',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you think it would be better to have this be consistent with insertAfter? I personally think setting them both to prefer 'bottom-end' feels better.

This video is the current experience.

CleanShot.2024-06-17.at.14.17.15.mp4

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The decision to alter between top-end and bottom-end is primarily made by @mariuslundgard. The idea is that the placement gives a little more context in terms of where the item is inserted (above or below).

@christianhg christianhg force-pushed the feat-insert-menu-options-in-context-menu-take-2 branch from e8a7997 to af0ba05 Compare June 18, 2024 08:33
@christianhg
Copy link
Contributor Author

The code looks great! I had one UX suggestion in there but besides that I couldn't find any other issues.

I would like to encourage adding more tests if you have the time. On the studio team, we're trying to stricter about quality and culturally we want everyone to include tests for new surfaces added in the stduio. this can be e2e or jest.

Thank you for the feedback, @ricokahler !

I agree that it's a good idea to add some test cases so I've now written some: af0ba05

I appreciate the UX suggestion, but I think I'll leave it as it is unless @mariuslundgard says otherwise.

Copy link
Contributor

@ricokahler ricokahler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thank you for the e2e tests. they look awesome!

@ricokahler ricokahler added this pull request to the merge queue Jun 21, 2024
Merged via the queue into next with commit 784cfd3 Jun 21, 2024
44 checks passed
@ricokahler ricokahler deleted the feat-insert-menu-options-in-context-menu-take-2 branch June 21, 2024 20:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants