7d7a601cdc
27 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Ilia
|
26e1c88a7b
|
chore: move anvil widgets to wds (#35812)
## Description - Moved Section and Zone widgets to wds folder Fixes #35810 > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10511698329> > Commit: 67868d550cebe7b2393803c805132b548c6f1046 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10511698329&attempt=3" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Thu, 22 Aug 2024 18:06:57 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Introduced new `WDSSectionWidget` and `WDSZoneWidget` components, reflecting a new namespace for widget organization. - Added new constants and an enumeration for widget configuration in the `wds/constants` module. - **Improvements** - Updated import paths for various constants and components to streamline the codebase organization. - **Collaboration Enhancements** - Updated ownership in the `CODEOWNERS` file to include both the `@appsmithorg/wds-team` and `@appsmithorg/anvil-team` for better collaboration on widget development. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Pawan Kumar
|
66e535df65
|
chore: Rename wds packages (#35686)
/ok-to-test tags="@tag.Widget" ## Description > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10414775054> > Commit: 445dec9a23df945a5b2a965ce39b8369641bd2b8 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10414775054&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Widget` > Spec: > <hr>Fri, 16 Aug 2024 05:45:49 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local> |
||
|
Abhinav Jha
|
c0664e2c52
|
fix: Anvil zone widget default configurations (#35299)
## Description - Zone widget needs the `flexVerticalAlignment` configurations to make the layout stretch to occupy all vertical space in a section - Zone widget's layout configuration needs a `height:100%` to enable highlights in an empty zone. ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10221060293> > Commit: 76b97f97b1ff6b487db00684584a97957094bcba > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10221060293&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Fri, 02 Aug 2024 20:25:54 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new `layoutStyle` property for enhanced border and height control in layout components. - Added `flexVerticalAlignment` property to improve vertical alignment flexibility in widgets, allowing for responsive design enhancements. These changes aim to provide users with greater customization options for layout and widget presentation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Abhinav Jha
|
58f0c0d190
|
chore: Remove unnecessary properties from being stored in Anvil DSLs (#35088)
## Description - Multiple functions from `widgetAdditionSaga` have been removed from the flow when adding new Anvil widgets to Canvas - The removed functions have alternatives specific to Anvil ##Tasks - [x] Move functions and cut down code run during Anvil widget addition flow - [x] Cleanup code Fixes #34896 ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10099580771> > Commit: 50d9f0349f172ebd5cd5695a4345225ac565379c > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10099580771&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.All` > Spec: > <hr>Thu, 25 Jul 2024 19:31:29 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new property to manage default widget properties for improved widget addition efficiency. - Enhanced the application’s capability to manage and display layout information dynamically for the main canvas. - Added new saga functions to facilitate the addition of widgets to the Anvil canvas, improving user interaction with suggested widgets. - **Bug Fixes** - Streamlined widget addition logic for better performance and maintainability in the Anvil canvas. - **Refactor** - Simplified and reorganized the saga functions related to widget addition, improving clarity and efficiency. - Replaced legacy functions with updated methods for handling widget properties and state management. - **Documentation** - Improved comments and descriptions in the code to clarify the new logic and functionality changes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Valera Melnikov
|
05aa9cc354
|
fix: widget overflow behaviour in anvil (#33961)
## Description Fixed overflow operation for widgets in zones. Fixes #32922 #33537 ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/9386697113> > Commit: e0f8f24f3dd34ec39acb10846d35d0c2f020ca02 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9386697113&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced dynamic font size customization using CSS custom properties. - **Improvements** - Adjusted layout behavior for `AnvilFlexComponent` to use `fit-content` for better content fitting. - Enhanced styling for elements with elevation property, including font size and spacing adjustments. - Switched to `isEditOnlyModeSelector` for more accurate layout wrapping behavior in `SectionRow`. - **Removals** - Removed `renderMode` property from `BaseLayoutComponent`, `FlexLayoutProps`, and related components for streamlined functionality. - Simplified imports and prop handling in `AlignedWidgetRowComp`. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Valera Melnikov
|
c4a63d7763
|
fix: anvil layout and some cleanup (#33442)
## Description > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #`Issue Number` _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/9083152704> > Commit: b443ac61370d810a1210715c1fe1566f1cdd94ee > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9083152704&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No |
||
|
Valera Melnikov
|
ed9c55d4c4
|
fix: asymmetric padding for sections and zones (#33204)
## Description Added asymmetric paddings for sections and zones. https://github.com/appsmithorg/appsmith/assets/11555074/1959c6f2-5e26-4fdd-98e3-ea1bb5e09dae Fixes #32209 ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8999510824> > Commit: b714426d3185c9a75523fe98ae4ca75e26f0b249 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8999510824&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> |
||
|
Valera Melnikov
|
e16d50d15b
|
fix: widget wrapper width (#33105)
## Description Added a width 100% for the widget wrapper to make the overlapping work. ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8923972703> > Commit: 295c0441e1107e7c4a59b639d0ba2be799206a12 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8923972703&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No |
||
|
Ashok Kumar M
|
4b1ef98014
|
feat: Anvil DnD Polish(Refactor) (#32839)
[](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=MdeCkAG) ## Description In this PR, - we are refactoring Anvil DnD to use dom elements to render highlights instead of canvas. Why? - Doesn't have the ability to overflow a widget and still allow dnd events(section widget use case) - limitations with respect to being testable - we are adding compensators to dnd layers, so that DnD is not just for layout but for the entire widget. Widget is the appsmith entity. layout is something present in container like widgets like Section and Zone which allow you to contain children widgets based on a the layout structure. What are compensators? - additional padding for DnD layers in a widget - additional position offsets for highlights in a widget so that they don't stick to the layout. Why compensators? - Section widget can be activated to show highlights in areas overlapping with main canvas - DnD should be possible even at spacings created by parent widget like in Zone widget - we are also removing canvas activation logic and moving to using mouse move event to activate a canvas for DnD. Fixes #32016 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8872919856> > Commit: 3f6603bf8480a99437552ac73764c9de1d6f7f95 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8872919856&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Introduced a new layout property for widgets, enhancing customization options. - Added a custom error boundary component to handle and display errors elegantly. - New drag-and-drop components and utilities to improve interaction within the editor canvas. - Adjusted component hierarchies in Anvil editor and viewer for better performance and structure. - **Refactor** - Simplified rendering logic in `AnvilWidgetComponent` by removing conditional boundaries. - Updated the hierarchy within the Anvil editor, enhancing component nesting and interaction. - **Bug Fixes** - Adjusted padding values and added new constants for better UI alignment and interaction feedback. - **Chores** - Renamed and reorganized Cypress locators and methods for clearer and more efficient testing automation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ashok Kumar M
|
79fbdc2b1a
|
chore: RMVF based changes for DnD, Modals, and Space distribution. (#31980)
## Description > [!TIP] > _Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content team)._ > > _Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR._ Fixes #31935 Fixes #32059 _or_ Fixes `Issue URL` > [!WARNING] > _If no issue exists, please create an issue first, and check with the maintainers if the issue is valid._ ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!IMPORTANT] > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8565307211> > Commit: `5d5f682bcabd1b64d69d8743cc0ffbfcad372f92` > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8565307211&attempt=1" target="_blank">Click here!</a> > All cypress tests have passed 🎉🎉🎉 <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Enabled new feature flags for advanced widget and release management. - Introduced a new component for modal layout and enhanced styling for the Anvil Editor. - Added messages for guiding users on where to drop widgets and modals. - Implemented a new route for widget editor enhancements. - **Enhancements** - Improved Anvil Editor's canvas functionality with better activation, selection, and drag-and-drop features. - Enhanced the visual styling and interaction of widgets and modals in the Anvil Editor. - **Bug Fixes** - Corrected import paths and updated selectors for consistent functionality across the Anvil platform. - **Refactor** - Streamlined Anvil Editor components and hooks for better maintainability and readability. - Adjusted import paths and reorganized components to align with the new project structure. - **Style** - Added and updated CSS styles for better UI experience in the Anvil Editor and modal interactions. - **Tests** - Updated Cypress E2E tests to reflect changes in the Anvil Editor's functionality and UI elements. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Valera Melnikov
|
ba6262ffe6
|
chore: widgets alignment (#31923)
## Description Plenty changes related to widgets alignment 1. Paragraph, button, inputs, single checkbox and switch widgets are aligned along the baseline of the text content 2. The icons in the buttons and the single checkbox and switch are now positioned absolutely so as not to affect the height of the components. The height of the components now depends on text content. 3. All unnecessary paddings and borders in the layout have been removed: - Canvas padding: `--outer-spacing-4` - Gap between sections and zones: `--outer-spacing-4` - Zone padding: `--outer-spacing-3` - Gap between widgets: `--outer-spacing-3` 4. In widget selection styles replace `border` with `outline`, since the `outline` one does not take space. 5. Add Changes to the flex-basis calculation method. Now the gap between the zones is taken into account there. 6. Add a lot of small fixes related to the changes described above. https://github.com/appsmithorg/appsmith/assets/11555074/b7c220eb-3e27-4039-9c15-6281bafe8008 Fixes #29364 ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!IMPORTANT] > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/8375537665> > Commit: `f85b63c0a49f30b9762379c2f8c3bd38c7a8355f` > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8375537665&attempt=2" target="_blank">Click here!</a> > All cypress tests have passed 🎉🎉🎉 <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Improved handling of CSS variable values in Flex components. - Enhanced styling and layout configurations for a better user experience. - **Bug Fixes** - Fixed label positioning and styling issues in Checkbox and Switch components. - Adjusted padding, margin, and sizing for consistency and alignment. - **Refactor** - Enhanced flex layout handling and space distribution logic for improved layout flexibility. - **Style** - Updated component styles for refined user interface aesthetics. - **Chores** - Updated feature flags and configurations for widgets and components to enable new functionalities. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Preet Sidhu
|
ae396eb976
|
fix: clipping issue for excessive hug widgets in an alignment (#31053)
## Description 1. Restores the original behaviour of grow and shrink for alignments, that had regressed after introduction of sizing tokens. 2. Fix clipping issue in alignments. If an alignments width equals or exceeds the width of the row on larger screens, enable flex wrap. #### 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. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new style property for `AnvilFlexComponent` to enhance layout sizing. - Added a function to determine if default alignment styles need to be overridden. - Launched a new React component for dynamic alignment of widgets within a row, adaptable to different viewport sizes. - **Refactor** - Simplified the rendering process in `AlignedWidgetRow` by improving component organization. - Enhanced logic and structure in rendering functions for better alignment and layout management. - **Bug Fixes** - Fixed incorrect import paths in test and utility files. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Abhinav Jha
|
e67f6a8f89
|
feat: WDS - Anvil compatible Modal Widget (#30351)
## Description This PR primarily adds the modal widget to WDS. The following changes were made: 1. WidgetNameCanvas now listens to modal body scrolls to position widget name components correctly 2. Modal Widget is rendered as a detached widget that is outside of the layout flow of the main canvas 3. Main container resizer now has a higher z-index to show even if the modal is open in the preview mode 4. Widget selection flow in Anvil layout system has been modified to be handled in a central location (`AnvilMainCanvas`) 5. Modal widget's type in modal sagas are selected via a selector that checks for the feature flag. 6. Modal widget has its own preset that (at present) is similar to the Main container's layout preset #### PR fixes following issue(s) Fixes #28588 Fixes #28328 Fixes #27459 #### Media https://github.com/appsmithorg/appsmith/assets/103687/bf350be4-2202-49f3-a860-3e38681ab32e #### Type of change - New feature (non-breaking change which adds functionality) - This change requires a documentation update ## Testing > #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress ## 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](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced Modal components with additional styling and customization options. - Introduced a new event type for modal submission actions. - Added a `--on-canvas-ui-z-index` CSS variable for improved layering control. - Implemented a new method for widget focus management in the editor. - **Improvements** - Modal components now use context hooks for close actions. - Improved the handling of detached widgets in various layout systems. - Simplified the drag-and-drop state management for widgets. - Upgraded the visual presentation of the widget drop area. - Enhanced widget selection with new custom event dispatching. - Updated the modal widget configuration with default settings and property pane structure. - **Bug Fixes** - Fixed an issue with modal scrolling to behave consistently with the main container. - Addressed a problem where the `id` was not found during layout element position updates. - **Style** - Adjusted modal overlay positioning and content width with new CSS standards. - Updated zIndex references to use CSS variables for consistent styling. - **Refactor** - Reorganized the `Widgets` array into categorized groups for better clarity. - Simplified the `modalPreset` function's parameters and layout declaration. - **Documentation** - Added default values for feature flags in the documentation. - **Chores** - Altered feature flags to enable new functionalities by default. - **Tests** - No visible changes to end-users in this category. - **Revert** - No visible changes to end-users in this category. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Preet Sidhu <preetsidhu.bits@gmail.com> Co-authored-by: Valera Melnikov <valera@appsmith.com> |
||
|
Preet Sidhu
|
c396fc5499
|
feat: Add copy paste functionality for Anvil. (#30217)
## Description 1. Copy paste functionality for Anvil. 2. Handle automatic creation of sections and zones based on different scenarios. 3. Handle space distribution on paste. #### Type of change - New feature (non-breaking change which adds functionality) ## 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. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] 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 - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new paste functionality for widgets within the Anvil layout system. - **Improvements** - Refined widget movement logic to accommodate different canvas types. - Expanded widget pasting capabilities with additional checks and operations. - **Bug Fixes** - Addressed potential issues with dragging blocks by ensuring existence checks before mapping. - **Refactor** - Streamlined sagas for widget operations to better align with the Anvil layout system. - Consolidated widget position utility functions for more efficient layout management. - **User Interface** - Implemented user-friendly error messaging for paste operations that fail. - **Documentation** - Updated messages and constants to support new paste functionality and error handling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> |
||
|
Valera Melnikov
|
10a98f9563
|
fix: use wds tokens in sections and zones (#30479)
## Description - Added tokens to the anvil config - Removed redundant functions for calculating widget sizes - I cleaned the widget configs - Added a zero-state to the input component - Optimised the responsiveness of the action group component https://github.com/appsmithorg/appsmith/assets/11555074/e9e0513a-cf3f-42ef-b960-820bb4980858 #### PR fixes following issue(s) Fixes #29507 #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Chore (housekeeping or task changes that don't impact user perception) ## 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. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced `MenuItem` display with additional text attribute for better accessibility. - Improved user interaction with `TextArea` and `TextInput` components through more effective handling of default and read-only states. - Extended `Flex` component to include click event handling capabilities. - Refined `ActionGroup` styling and dynamic sizing for a more polished UI experience. - **Enhancements** - Updated `Button` styling to ensure consistency across different screen sizes. - Optimized layout and styling of `Menu` items for improved visual hierarchy and responsiveness. - **Refactor** - Simplified `WidgetProvider` and `AnvilEditorWidget` configurations for more streamlined layout management. - Refined `ZoneColumn` rendering for better alignment with layout system principles. - **Bug Fixes** - Fixed minimum width calculation in `useZoneMinWidth` hook to ensure correct layout behavior. - Corrected `AnvilDSLTransformer` padding value for consistent widget spacing. - **Documentation** - Removed redundant Storybook addon to streamline developer experience. - **Style** - Adjusted CSS for various components to align with updated design system standards. - **Tests** - Updated widget property pane configuration tests for better coverage and reliability. - **Chores** - Cleaned up unused imports and methods across multiple widget components for improved code maintenance. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ashok Kumar M
|
be057ff1d8
|
feat: Anvil DnD highlight activation upgrade (#29979)
> Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description In this PR, we are trying to help users figure out wrapped cells and also differentiate cell drops vs new cell drops. we are also enhancing the highlights selection algorithm. - highlights no longer have dropzones - closest vertical highlights(cell drops) are triggered whenever the mouse is deemed to be inside the cell withing a set threshold. Cell is also highlighted for such highlights - horizontal highlights(new cell drops) are triggered whenever the mouse is deemed to be not inside any cell based on set threshold. - post the above filter the closest highlight to the mouse position is selected to be shown on the canvas as a highlight. so except for places like Section padding and Zone padding where there is no Canvas, highlights will always show up. Issues observed while working on this PR: - In safari center highlight seems to not work. - highlights dont trigger in Section + Zone padding areas(will not be addressed in this PR) #### PR fixes following issue(s) Fixes # (issue number) > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## 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. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new highlight feature for the app's layout components. - Enhanced search functionality with immediate activation for specific feature flags. - **Improvements** - Improved the visual feedback during drag-and-drop operations with optimized highlight rendering. - Streamlined the logic for determining viable drop positions within the layout system. - Added conditional styling capabilities based on the application's state. - **Bug Fixes** - Corrected the feature flag behavior to ensure consistent feature access. - **Refactor** - Removed unused constants and properties related to drop zones to simplify layout calculations. - Enhanced type safety in selector functions for better maintainability. - **Style** - Added a new color constant for highlight effects, improving the visual experience. - **Tests** - Updated tests to reflect changes in layout highlight logic and removal of drop zones. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ashok Kumar M
|
cdf2bc6cef
|
fix: Anvil widget borders (#29940)
> Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description - fixed border design to match existing designs in fixed and auto. - Added crispness to canvas renders - fixed cropping of zone borders. - fixed issues with space distribution coz of overflow css Bug: Zone highlights cropped <img width="854" alt="Screenshot 2023-12-29 at 1 59 20 PM" src="https://github.com/appsmithorg/appsmith/assets/35134347/8523870e-a370-44e3-877b-1d0f402617b4"> Fixed: <img width="896" alt="Screenshot 2023-12-29 at 1 57 09 PM" src="https://github.com/appsmithorg/appsmith/assets/35134347/d575d6c1-13bb-414e-97c2-ed2642c0d03e"> Bug: Zone borders cropped <img width="409" alt="Screenshot 2023-12-29 at 2 00 27 PM" src="https://github.com/appsmithorg/appsmith/assets/35134347/9881ef3f-d482-461c-af0e-6e6af2f6ed86"> Fixed: <img width="434" alt="Screenshot 2023-12-29 at 2 00 44 PM" src="https://github.com/appsmithorg/appsmith/assets/35134347/9b7db171-4746-4349-8194-1ba4cdf67306"> Bug: Borders in Dark mode <img width="443" alt="Screenshot 2023-12-29 at 2 01 58 PM" src="https://github.com/appsmithorg/appsmith/assets/35134347/3a5e4578-0279-408b-9f6b-a59021ad94cb"> Fixed: <img width="437" alt="Screenshot 2023-12-29 at 2 01 38 PM" src="https://github.com/appsmithorg/appsmith/assets/35134347/d885e7f8-43ea-415d-b1a7-f49a0637d388"> Bug: Space distribution min width animation not happening https://github.com/appsmithorg/appsmith/assets/35134347/2c8ea694-5f5f-4d15-a5a1-6ef3d35e795c Fixed: https://github.com/appsmithorg/appsmith/assets/35134347/1192a2a8-f7d1-42a0-90ca-1ea58072e287 Box shadow looks consistent: Before: <img width="784" alt="Screenshot 2023-12-29 at 2 08 25 PM" src="https://github.com/appsmithorg/appsmith/assets/35134347/30e7fc46-a541-422c-ba8a-58603c9d43cb"> After: <img width="838" alt="Screenshot 2023-12-29 at 2 09 32 PM" src="https://github.com/appsmithorg/appsmith/assets/35134347/93a98ae0-315a-4564-8f6b-7c3b0d42b5b5"> #### PR fixes following issue(s) Fixes # (issue number) > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## 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. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new constant to manage widget outline offset. - **Enhancements** - Improved visibility and styling of internal components with updated overflow handling. - Enhanced widget border styling by using shadow effects for better visual clarity. - Ensured consistent class naming in layout components with fail-safe defaults. - **Bug Fixes** - Fixed canvas rendering issues by refining pixel ratio calculations and adjustments. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Abhinav Jha
|
e05313c943
|
feat: Anvil themeing and Anvil vertical alignment (#29907)
## Description This PR adds the features of proper vertical alignment and themeing to Anvil. - A separate `Container` component is created for Anvil, that is used as the layer on top of which the themeing tokens are applied. - A default `min-height` is set using tokens for all widgets in Anvil. - Anvil now stops considering any `min-height` configurations provided by the widgets. It is the widgets responsibility to take care of their own heights, and Anvil will accommodate them -- no matter the height. - Table widget's default height is now set to the min height that was configured for it earlier. - `AnvilFlexComponent` now has `overflow:visible` to allow the shadows for zones and sections to not be cut-off. - All widgets are aligned center vertically by default. This will apply if they're smaller than the set `min-height` - Zones and Sections have elevation styles applied suing the `Container` component mentioned above. - Zones and Sections don't have any styling property other than `Background`, we'll add more as we understand more about the product. > Conditional vertical margin applied to widgets. > If in a row of widgets (.aligned-widget-row), one of the widgets has a label ([data-field-label-wrapper]), then > all widgets (.anvil-widget-wrapper) in the row other than the widget with the label, will shift down using the > margin-block-start property. This is to ensure that the widgets are aligned vertically. > The value of the margin-block-start property is calculated based on the spacing tokens used by the labels in input > like components > #### PR fixes following issue(s) Fixes #29073 Fixes #28591 Fixes #28592 Fixes #28593 #### Media  #### Type of change - New feature (non-breaking change which adds functionality) ## Testing #### How Has This Been Tested? - [x] 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](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced conditional vertical margins for widgets to ensure alignment within rows. - Added a new `Container` component for thematic elevation styles in Anvil widgets. - Implemented elevation style options and semantic background settings for Section and Zone widgets. - **Enhancements** - Improved visual layout and alignment of AnvilFlexComponent with updated styling properties. - Added `className` properties to various layout components for enhanced CSS targeting. - **Style** - Updated widget styles to accommodate new background and elevation features. - **Refactor** - Simplified padding logic in WDSParagraphWidget. - Streamlined dimensions calculation in WDSTableWidget. - **Documentation** - Renamed sections in property panes to better reflect background styling options. - **Chores** - Added `Elevations` enum to manage elevation values consistently across components. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ashok Kumar M
|
830ccaa692
|
feat: Anvil section space redistribution (#29632)
## Description Anvil Section Space distribution In this pr, we are adding a feature to sections to redistribute a sections space within its zones. you can find details of it over [here](https://www.notion.so/Sections-and-Zones-design-WIP-cbcb8b0ab2514aaf90d04aa3309ad56c) As part of it we have three parts of changes - UI components - Middleware(Redux and Sagas) - Space redistribution algorithm UI/UX: https://github.com/appsmithorg/appsmith/assets/35134347/092ba31f-d2e5-400e-80d7-45878d75ff98 Middleware changes: - have added a new state in WidgetDragResizeState `anvil` and into it have added `isDistributingSpace` to capture when space distribution is active. - added `anvilSpaceDistributionSagas` to capture all sagas wrt space redistribution Space redistribution algorithm: - Have added algorithm for redistributing space, have noted down details about it [here](https://www.notion.so/appsmith/Space-distribution-and-responsiveness-questions-517d140e83864c2287765c99dcd7c8da?pvs=4#9b33c84bcea24cfca63d7caef036f896). > #### PR fixes following issue(s) Fixes # (issue number) > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## 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. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced widget resizing capabilities with space distribution handles in Anvil layout system. - Introduced preview mode support for widget size configuration. - **Enhancements** - Improved Anvil layout system with dynamic space distribution during resizing. - Added flexibility to widget size configuration by considering preview mode. - **Bug Fixes** - Corrected widget border styles to reflect space distribution and resizing states. - **Refactor** - Streamlined space distribution logic in Anvil layout sagas and selectors. - Updated `AnvilFlexComponent` to conditionally assign `flexGrow` property. - **Documentation** - Updated comments to clarify new space distribution behavior in Anvil layout. - **Style** - Adjusted styles for space distribution handles in section layouts. - **Chores** - Added new action types for Anvil space distribution process. - Enhanced Redux state structure for drag and resize operations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Preet <preetsidhu.bits@gmail.com> |
||
|
Preet Sidhu
|
fa7bd6a543
|
feat: add layouts and widgets for sections and zones. (#29713)
## Description 1. Create Section Widget. 2. Create Zone Widget. 3. Create layouts and presets for Sections and zones. 4. Upate layout for Anvil Main Canvas. 5. Refactor BaseLayoutComponent. Separate renderer for edit and view modes. 6. Add childrenMap context to avoid prop drilling through all layouts. 7. Add Anvil Config for WDS widgets. #### Type of change - New feature (non-breaking change which adds functionality) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress #### Test Plan ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced a new `Zone Stepper Control` component for UI interaction. - Added `AnvilCanvas` and `AnvilMainCanvas` components with improved performance and interaction features. - Implemented `LayoutProvider` and `useClickToClearSelections` for better layout management. - Launched `AnvilCanvasDraggingArena` and `AnvilHighlightingCanvas` components with enhanced drag-and-drop capabilities. - New `useZoneMinWidth` hook to calculate minimum zone width based on child widgets. - Added `SectionRow`, `Section`, `ZoneColumn`, and `Zone` components for advanced layout structuring. - New `WidgetRenderer` component for dynamic child widget rendering. - **Enhancements** - Improved canvas activation and deactivation logic with `useCanvasActivation` and `useCanvasActivationStates`. - Enhanced drag-and-drop experience with updated `useCanvasDragging` logic. - Streamlined `AnvilMainCanvas` integration with conditional rendering based on `renderMode`. - Optimized `FlexLayout` component to handle new `isContainer` and `layoutType` properties. - **Bug Fixes** - Fixed issues with widget positioning and event handling in `WidgetNamesCanvas` components. - Corrected `PageView` width property type for consistent page rendering. - **Refactor** - Consolidated Anvil layout update management with `anvilSagas` and `anvilChecksSagas`. - Refined `SectionWidget` and `ZoneWidget` configuration for improved stability and performance. - Streamlined `LayoutElementPositionsObserver` with `layoutType` enhancements. - **Documentation** - Updated comments and added clarifications for better developer understanding of canvas-related hooks and components. - **Style** - Modified `.anvil-canvas` class styles for full-width and height presentation. - **Chores** - Cleaned up import statements and removed unused code across various components and utilities. - **Tests** - Enhanced Cypress tests with additional selectors and interaction commands for `AutoDimension` feature verification. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> |
||
|
Ashok Kumar M
|
d727ecf7c5
|
chore: register offset values as per parent drop target in Anvil (#28757)
> Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description In this PR we are making changes to layout elements position observer to capture offset values of drag parents(layouts that can have widgets) relative to their own immediate dragparents. Why? once we have these offset values of each droptarget wrt to main canvas droptarget we can clearly detect offsetvalues of widgets, since each widget's positions that are captured already are wrt to main canvas, with the calculated offset from the above process we can calculated widget positions relative to their immediate parent as well. #### PR fixes following issue(s) Fixes #28561 Fixes #28585 > if no issue exists, please create an issue and ask the maintainers about this first > > #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change > Please delete options that are not relevant. - Bug fix (non-breaking change which fixes an issue) - New feature (non-breaking change which adds functionality) - Breaking change (fix or feature that would cause existing functionality to not work as expected) - Chore (housekeeping or task changes that don't impact user perception) - This change requires a documentation update > > > ## 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. > Delete anything that is not relevant - [ ] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) > > > ## 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](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed |
||
|
Preet Sidhu
|
e9c3034c1c
|
chore: add mousemove listener to konva and bug fixes. (#28381)
## Description Add ``mousemove`` event listener to WidgetName canvas. This allows the canvas to toggle its own pointerEvents back to ``none`` when the mouse is not hovering over a widget name component. Additionally: 1. Removes highlights for empty ``AlignedWidgetRow``. 2. Fix layout preset for container widget. New layoutIDs are generated for every instance. 3. Add an action to remove unobserved elements from layout positions redux store. 4. Bottom padding of MainCanvas layout. #### PR fixes following issue(s) Fixes #28380 Fixes #28415 #### 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. - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] 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 - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed |
||
|
Preet Sidhu
|
79823158e2
|
chore: update highlight logic to disregard empty layouts. (#28339)
## Description 1. Update drop zone calculation logic for highlights. 2. Discard highlights from empty non drop target layouts. 3. Use single ``rowGap`` value. 4. Fix multi delete issue, where ghost highlights are visible after deleting all widgets at once. #### PR fixes following issue(s) Fixes #28325 Fixes #28342 #### Type of change - Bug fix (non-breaking change which fixes an issue) #### 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. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [ ] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed |
||
|
Preet Sidhu
|
159a26fb6e
|
chore: Add MutuationObserver to track changes in positions of widgets and layouts. (#28315) | ||
|
Preet Sidhu
|
69f4a412bf
|
chore: add highlight calculation logic for layouts. (#27980)
## Description 1. Add LayoutComponent functionality. 2. Create Basic LayoutComponents. 3. Create LayoutPresets needed for Container-like widgets. 4. Add highlight calculation logic for all basic Layout Components. 5. Create dragging sagas for Anvil. 6. Create DraggingArena associated functionality to handle DnD in Anvil. #### PR fixes following issue(s) Fixes #27004 #### Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## Testing #### How Has This Been Tested? - [ ] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com> |
||
|
Abhinav Jha
|
fce5524aa8
|
chore: Add observer to LayoutElements (#27993)
## Description - Create a hook based on the `LayoutElementPositionsObserver` and use it in `AnvilFlexComponent` such that all widgets in Anvil have their positions registered in the `LayoutElementPositionsReducer` - Do the same for `layouts` in Anvil. Added in the `FlexLayout` component. #### PR fixes following issue(s) Fixes #26947 Fixes #27287 #### Type of change - New feature (non-breaking change which adds functionality) |
||
|
Preet Sidhu
|
46dcf3a8f0
|
chore: Create layout system structure for Anvil and AnvilFlexComponent. (#27178)
## Description
1. Add new ```appPositioningType``` : ANVIL.
2. Create new code path and folder structure for Anvil layout system.
3. Move common pieces of functionalities between autoLayout and anvil to
anvil folder structure (e.g. ```CanvasResizer```).
4. Create ```AnvilFlexComponent```.
5. Use WDS Flex component in AnvilFlexComponent.
6. Pass min max size props in a data structure that is supported by
container queries in the Flex component.
e.g. min-width: { base: "120px", "480px": "200px" }
7. Supply the following flex properties (flex-grow flex-shrink
flex-basis) to widgets depending on their ```responsiveBehvaiour```:
a) Fill: ```flex: 1 1 0%;```
b) Hug: ```flex: 0 0 auto;```
#### PR fixes following issue(s)
Fixes # (issue number)
1. [#26987](https://github.com/appsmithorg/appsmith/issues/26987)
2. [#26609](https://github.com/appsmithorg/appsmith/issues/26609)
3. [#26611](https://github.com/appsmithorg/appsmith/issues/26611)
#### Type of change
- New feature (non-breaking change which adds functionality)
## 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.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [x] Jest
- [ ] Cypress
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] 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
- [x] 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
- [x] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#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 Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---------
Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Aswath K <aswath.sana@gmail.com>
Co-authored-by: rahulramesha <rahul@appsmith.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
|
