#8868: slice 4: re-write EllipsisMenu using the react menu library #8887

grahamlangford · 2024-07-19T13:52:41Z

What does this PR do?

Part of Slice 4: Re-write ActionMenu.tsx using the react-menu library #8868
To be followed by https://github.com/pixiebrix/pixiebrix-app/pull/5520
Allows us to implement submenus in a follow-on slice
- See: https://szhsin.github.io/react-menu#submenu

Discussion

Longer loom to go over the slight styling differences between the old and new menu
I've decided not to pursue further tweaking of the styles as I don't think the differences are enough to warrant the effort

Remaining Work

Repin App to latest Extension release to resolve TS errors
Confirm functionality/styling in App

Demo

Extension

https://www.loom.com/share/17c203a873a647b3b09cb4a81daea1ae

App

https://www.loom.com/share/18e275412f23428f9c03c99c1a723026

Future Work

After merge, repin App to use the latest version of Extension in this branch:

Checklist

This PR introduces a new library: double check it's MIT/Apache2/permissively licensed
- @szhsin/react-menu: MIT

For more information on our expectations for the PR process, see the
code review principles doc

…8868-slice-4-re-write-actionmenutsx-using-the-react-menu-library

codecov · 2024-07-19T13:59:45Z

Codecov Report

Attention: Patch coverage is 95.23810% with 1 line in your changes missing coverage. Please review.

Project coverage is 74.47%. Comparing base (8318d74) to head (0d4d50c).
Report is 115 commits behind head on main.

Files	Patch %	Lines
src/components/ellipsisMenu/EllipsisMenu.tsx	92.30%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8887      +/-   ##
==========================================
+ Coverage   74.24%   74.47%   +0.22%     
==========================================
  Files        1332     1339       +7     
  Lines       40817    41205     +388     
  Branches     7634     7702      +68     
==========================================
+ Hits        30306    30688     +382     
- Misses      10511    10517       +6

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2024-07-19T14:03:49Z

Playwright test results

125 passed
1 flaky
4 skipped

Details

Open report ↗︎
130 tests across 40 suites
8 minutes, 59 seconds
0d4d50c
For more information on how to debug and view this report, see our readme

Flaky tests

edge › tests/regressions/welcomeStarterBricks.spec.ts › #8740: can view the starter mods on the pixiebrix.com/welcome page

Skipped tests

chrome › tests/regressions/doNotCloseSidebarOnPageEditorSave.spec.ts › #8104: Do not automatically close the sidebar when saving in the Page Editor
edge › tests/regressions/doNotCloseSidebarOnPageEditorSave.spec.ts › #8104: Do not automatically close the sidebar when saving in the Page Editor
chrome › tests/runtime/googleSheetsIntegration.spec.ts › can activate a google spreadsheet mod with config options
edge › tests/runtime/googleSheetsIntegration.spec.ts › can activate a google spreadsheet mod with config options

grahamlangford · 2024-07-19T14:05:47Z

src/components/ellipsisMenu/EllipsisMenu.module.scss

-.toggle:global(.dropdown-toggle)::after {
-  display: none;
-}
+.button {


This is the most widely used styling (Integration Card, active mods)

src/components/ellipsisMenu/EllipsisMenu.tsx

grahamlangford · 2024-07-19T14:06:36Z

src/components/ellipsisMenu/EllipsisMenu.tsx

@@ -85,104 +68,64 @@ type EllipsisMenuProps = {
   * The boundary element for the dropdown menu popup
   * @see DropdownMenuProps.popperConfig
   */
-  menuBoundary?: Element;
+  boundingBoxRef?: MutableRefObject<HTMLElement | null>;


Same behavior as the menuBoundary, but different implementation

fungairino · 2024-07-19T14:12:15Z

src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx

-        <Tab.Content className={dataPanelStyles.tabContent}>
+        <Tab.Content
+          className={dataPanelStyles.tabContent}
+          ref={(element: HTMLElement) => {


nice refactor using ref.

grahamlangford · 2024-07-19T14:13:57Z

src/pageEditor/documentBuilder/preview/DocumentPreview.test.tsx

+    const [activeElement, setActiveElement] = useReduxState(
+      selectActiveBuilderPreviewElement,
+      actions.setActiveBuilderPreviewElement,
+    );


There's at least one hook that gets activeElement from redux using useSelector. Using useState here was causing the store not to be updated, leading to an NPE when running one of the tests,

I understand why the test was failing, I don't understand how it ever passed.

Maybe the tests just aren't covering behavior relevant to those hooks? 🤷‍♂️

src/components/ellipsisMenu/EllipsisMenu.tsx

src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx

…e-react-menu-library

…8868-slice-4-re-write-actionmenutsx-using-the-react-menu-library

github-actions · 2024-07-23T17:19:34Z

When the PR is merged, the first loom link found on this PR will be posted to #sprint-demo on Slack. Do not edit this comment manually.

grahamlangford added 8 commits July 17, 2024 14:50

initial implementation

718b67d

styling fixes

77c2e55

Merge branch 'main' of github.com:pixiebrix/pixiebrix-extension into …

dccddf2

…8868-slice-4-re-write-actionmenutsx-using-the-react-menu-library

override styles for the add element action

3dde771

improve styling

7bb4e0f

update snapshots

3387095

fix test

4e8f345

update snapshots to include data-testid

48c9640

grahamlangford linked an issue Jul 19, 2024 that may be closed by this pull request

Slice 4: Re-write ActionMenu.tsx using the react-menu library #8868

Closed

grahamlangford requested review from fungairino, BLoe, twschiller and mnholtz July 19, 2024 14:01

remove unused import

0f35c97

vercel bot deployed to Preview July 19, 2024 14:04 View deployment

grahamlangford commented Jul 19, 2024

View reviewed changes

src/components/ellipsisMenu/EllipsisMenu.tsx Show resolved Hide resolved

grahamlangford commented Jul 19, 2024

View reviewed changes

grahamlangford marked this pull request as draft July 19, 2024 14:08

fungairino reviewed Jul 19, 2024

View reviewed changes

grahamlangford commented Jul 19, 2024

View reviewed changes

fungairino reviewed Jul 19, 2024

View reviewed changes

src/components/ellipsisMenu/EllipsisMenu.tsx Show resolved Hide resolved

twschiller assigned grahamlangford Jul 19, 2024

BLoe reviewed Jul 19, 2024

View reviewed changes

src/pageEditor/tabs/editTab/dataPanel/DataPanel.tsx Outdated Show resolved Hide resolved

Merge branch 'main' into 8868-slice-4-re-write-actionmenutsx-using-th…

e028224

…e-react-menu-library

vercel bot deployed to Preview July 19, 2024 19:55 View deployment

reset popupBoundarRef to null if not showDocumentPreview

d388a83

vercel bot deployed to Preview July 19, 2024 20:21 View deployment

Merge branch 'main' of github.com:pixiebrix/pixiebrix-extension into …

b506093

…8868-slice-4-re-write-actionmenutsx-using-the-react-menu-library

grahamlangford added this to the 2.0.6 milestone Jul 23, 2024

update selectors for library change

08f88d3

vercel bot deployed to Preview July 23, 2024 15:48 View deployment

grahamlangford added 2 commits July 23, 2024 10:57

fix locators

19bb52a

Merge branch 'main' of github.com:pixiebrix/pixiebrix-extension into …

0d4d50c

…8868-slice-4-re-write-actionmenutsx-using-the-react-menu-library

grahamlangford marked this pull request as ready for review July 23, 2024 15:58

vercel bot deployed to Preview July 23, 2024 16:00 View deployment

BLoe approved these changes Jul 23, 2024

View reviewed changes

grahamlangford merged commit ee9627f into main Jul 23, 2024
29 checks passed

grahamlangford deleted the 8868-slice-4-re-write-actionmenutsx-using-the-react-menu-library branch July 23, 2024 18:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#8868: slice 4: re-write EllipsisMenu using the react menu library #8887

#8868: slice 4: re-write EllipsisMenu using the react menu library #8887

grahamlangford commented Jul 19, 2024 •

edited

Loading

codecov bot commented Jul 19, 2024 •

edited

Loading

github-actions bot commented Jul 19, 2024 •

edited

Loading

grahamlangford Jul 19, 2024

grahamlangford Jul 19, 2024

fungairino Jul 19, 2024

grahamlangford Jul 19, 2024

BLoe Jul 23, 2024

github-actions bot commented Jul 23, 2024

#8868: slice 4: re-write EllipsisMenu using the react menu library #8887

#8868: slice 4: re-write EllipsisMenu using the react menu library #8887

Conversation

grahamlangford commented Jul 19, 2024 • edited Loading

What does this PR do?

Discussion

Remaining Work

Demo

Extension

App

Future Work

Checklist

codecov bot commented Jul 19, 2024 • edited Loading

Codecov Report

github-actions bot commented Jul 19, 2024 • edited Loading

Playwright test results

Details

grahamlangford Jul 19, 2024

Choose a reason for hiding this comment

grahamlangford Jul 19, 2024

Choose a reason for hiding this comment

fungairino Jul 19, 2024

Choose a reason for hiding this comment

grahamlangford Jul 19, 2024

Choose a reason for hiding this comment

BLoe Jul 23, 2024

Choose a reason for hiding this comment

github-actions bot commented Jul 23, 2024

grahamlangford commented Jul 19, 2024 •

edited

Loading

codecov bot commented Jul 19, 2024 •

edited

Loading

github-actions bot commented Jul 19, 2024 •

edited

Loading