appsmith
appsmith copied to clipboard
appsmithorg
fix: display of group option popup inside Form Widget Container
Description
This fix uses React portal to render the group option popup outside the component and position it based on the position of the grouped components. This allows the popup to be shown without any z-index issues.
PR fixes following issue(s)
Fixes # (7358)https://github.com/appsmithorg/appsmith/issues/7358
Media
Type of change
- Bug fix (non-breaking change which fixes an issue)
Testing
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration.
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
Test Plan
Issues raised during DP testing
Checklist:
Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
QA activity:
- [ ] Speedbreak features have been covered
- [ ] Test plan covers all impacted features and areas of interest
- [ ] Test plan has been peer reviewed by project stakeholders and other QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added
Test Plan Approvedlabel after Cypress tests were reviewed - [ ] Added
Test Plan Approvedlabel after JUnit tests were reviewed
Summary by CodeRabbit
-
Refactor
- Enhanced state management for widget grouping.
- Improved context menu rendering for performance and flexibility.
Walkthrough
The update enhances the WidgetsMultiSelectBox component by introducing state management for the bounding client rectangle and improving the context menu positioning. It shifts to a more flexible StyledActionsContainer, utilizing createPortal for better DOM placement, and refines the box positioning logic for better alignment with the window.
Changes
| File Path | Change Summary |
|---|---|
.../fixedlayout/common/widgetGrouping/WidgetsMultiSelectBox.tsx |
- Added useState for bounding client rectangle management.- Replaced StyledActionsContainer to support createPortal and additional props.- Updated box positioning logic relative to the window. |
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Tips
Chat
There are 3 ways to chat with CodeRabbit:
- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
-
I pushed a fix in commit <commit_id>. -
Generate unit-tests for this file.
-
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:-
@coderabbitai generate unit tests for this file. -
@coderabbitai modularize this function.
-
- PR comments: Tag
@coderabbitaiin a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:-
@coderabbitai generate interesting stats about this repository from git and render them as a table. -
@coderabbitai show all the console.log statements in this repository. -
@coderabbitai read src/utils.ts and generate unit tests. -
@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
-
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.
CodeRabbit Commands (invoked as PR comments)
-
@coderabbitai pauseto pause the reviews on a PR. -
@coderabbitai resumeto resume the paused reviews. -
@coderabbitai reviewto trigger a review. This is useful when automatic reviews are disabled for the repository. -
@coderabbitai resolveresolve all the CodeRabbit review comments. -
@coderabbitai helpto get help.
Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
CodeRabbit Configration File (.coderabbit.yaml)
- You can programmatically configure CodeRabbit by adding a
.coderabbit.yamlfile to the root of your repository. - The JSON schema for the configuration file is available here.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation:
# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json
CodeRabbit Discord Community
Join our Discord Community to get help, request features, and share feedback.
![coderabbitai[bot] avatar](https://avatars.githubusercontent.com/in/347564?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hey @somangshu and @rishabhrathod01 , could you please take a moment to review this fix when you have some free time? I haven't addressed the related Cypress tests yet, but I'll get to them once this fix is confirmed. Thanks a lot!"
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7739415963.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30813.
recreate: .
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
@Rhitottam I think pop up approach is the right way for this issue. However I see some issues in the dp, did not extensively test it.
- When I select only two widgets widget grouping actions should appear, it doesn't right now unless I move them explicitly creating a rerender.
- The actions popup is not sticking to the widgets so when I scroll I see them in the same position.
- In Modal widgets case, actions are not accessible.
Pls do check usecases with nested containers as well as nested and scrollable containers.
Hi @marks0351, I've made some changes to address the initial render issue. To handle scrolling or window resizing issues, I've utilized setInterval to update the position of the options menu. Would you mind taking a look when you have a moment? Thanks a lot! Widgets Multi-Select Box actions menu_ Appsmith.webm
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7779764762.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30813.
recreate: .
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/7811860843.
Workflow: Appsmith External Integration Test Workflow.
Tags: @tag.Widget.
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7811860843. Commit: ``. Cypress dashboard url: Click here! All cypress tests have passed 🎉🎉🎉
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7830284036.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30813.
recreate: .
@Rhitottam this is already great, One nit is that the popup is sticky but is not usable if the top most widget is the group is only partialy visible.
you can use the entries thrown by the IntersectionObserver callback to get the intersection positions to reposition the pop up.
This file app/client/src/layoutSystems/common/canvasArenas/StickyCanvasArena.tsx has such implementation for reference.
Hi @marks0351 I've implemented support for updating the position of the widget group popup based on the intersection area. This ensures that the popup is always displayed as long as the box remains visible in the current viewport. Please check it out! Thank you!
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7874086029.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30813.
recreate: .
Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/7911264368.
Workflow: Appsmith External Integration Test Workflow.
Tags: @tag.Widget.
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7911577504.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30813.
recreate: .
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7911264368. Commit: ``. Cypress dashboard: Click here! The following are new failures, please fix them before merging the PR:
- cypress/e2e/Regression/ClientSide/Widgets/Iframe/IframeTest_spec.ts