a30adfa5b3
20 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
|
2e2f4419bd
|
chore: add tests for app theming (#34839)
/ok-to-test tags="@tag.Anvil" <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced theme setting and snapshot verification for various widgets in different modes (Canvas, Preview, Deploy). - Added a new CSS rule to enhance the styling of input elements based on specific conditions. - **Refactor** - Renamed existing snapshot verification methods to more descriptive names across multiple widget snapshot files. - Added methods to handle theme settings and detailed snapshot matching. - **Tests** - Enhanced testing functionality for widgets with updated methods for snapshot verification across different themes. These updates ensure more detailed and theme-specific snapshot testing for various widget states, improving test coverage and accuracy, as well as enhancing the layout consistency of input elements. <!-- end of auto-generated comment: release notes by coderabbit.ai --> <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10046186626> > Commit: a6232ae795f77bd46bff4c854f46c5671a518ff6 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10046186626&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Anvil` > Spec: > <hr>Mon, 22 Jul 2024 18:43:52 UTC <!-- end of auto-generated comment: Cypress test results --> --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local> Co-authored-by: Valera Melnikov <valera@appsmith.com> |
||
|
|
c041360b6c
|
chore: Add tests for copy paste for anvil widgets. (#34895)
Fixes #33982 /ok-to-test tags="@tag.Anvil" <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/9952206667> > Commit: d70ec63edc6cbc9a760c0c1471f9f4249557ee2f > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9952206667&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Anvil` > Spec: > <hr>Tue, 16 Jul 2024 07:23:09 UTC <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced tests for paste functionality in the Anvil editor, covering various scenarios to ensure correct behavior when pasting widgets. - **Improvement** - Enhanced the paste function in Anvil editor to skip processing when no copied widgets are present. - **Tests** - Added comprehensive test cases to verify the paste functionality, including drag-and-drop, keyboard shortcuts, and validation of widget placement and attributes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local> |
||
|
|
08c3ea9b94
|
chore: cypress snapshot types (#34722)
## Description 1. Add scripts for local e2e testing in the docker container. 2. Add types for cypress-image-snapshot In this PR, I also added the following PRS as they affect screenshot tests as well. I did this to speed up the process and unblock the team. #34528 #34546 #34676 #34729 #34638 #34639 #34511 To run E2E tests locally in docker, you need to do the following: 1. Run FE locally and prepare the tests for local launch. See the instructions [here](https://github.com/appsmithorg/appsmith/blob/release/contributions/ClientSetup.md). 2. Run `yarn cypress:snapshot:docker:build` — this will create a docker container with the necessary environment. 3. Run `yarn cypress:snapshot:docker "./cypress/e2e/Regression/ClientSide/Anvil/Widgets/*_spec.ts" updateSnapshots=false`. Here we can use the path to a specific file, or set `updateSnapshots=true` flag to update the screenshots. ## 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/9844579277> > Commit: 75f26599b149f831051fbd631aaa059084b226dd > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9844579277&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Anvil` > Spec: > <hr>Mon, 08 Jul 2024 18:37:36 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** - Added support for image snapshot testing with the `@types/cypress-image-snapshot` dependency. - **Refactor** - Updated test specifications by removing unnecessary `triggerInputInvalidState()` calls. - Reorganized and improved efficiency of image snapshot methods for various devices. - **Chores** - Updated `Dockerfile` to configure the Cypress environment with specific versions for dependencies. - Changed import paths in `e2e.js` for better module resolution. - **Style** - Fixed a comment typo in Cypress plugin configuration. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local> Co-authored-by: unknown <vadim@appsmith.com> |
||
|
|
963ae31b11
|
chore: add snapshots for input type widgets (#34436)
/ok-to-test tags="@tag.Anvil" <!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/9678081244> > Commit: d73f2d7f37c9d62ba1ca622b78d9a0ce4d0e3db8 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9678081244&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Anvil` <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced comprehensive test cases for Currency Input, Phone Input, and General Input Widgets in the Anvil editor covering Canvas, Preview, and Deploy modes. - Added complex layout structures for Currency and Phone Input Widgets in the "MainContainer" canvas widget. - **Enhancements** - Implemented debouncing for validation status and error message handling in the Currency Input Widget to improve timing accuracy. - Added `defaultValue` property to Currency Input Widget configurations. - Corrected typos and improved clarity in widget property names and validation logic. - **Bug Fixes** - Fixed validation status typo in Phone Input Widget. - **Refactor** - Reordered static property declarations in Input Widgets for better code organization. - Modified method access controls in AnvilSnapshot for external usage. - **Tests** - Added snapshot testing for Currency, Phone, and General Input Widgets within the Anvil editor. - **Chores** - Added a new method `Createpage(pageName: string)` to streamline page creation in tests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local> |
||
|
|
ed497dbe9c
|
chore: add tests for anvil modal. (#34347)
[](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=9GEnyEC) ## 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 #33740 _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/9643638292> > Commit: bcc4bbddaa50b0be16e41a3a51db4f6abe732e79 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9643638292&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Anvil` <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced test cases for Anvil modals, covering interactions like opening, closing, drag and drop operations, and handling modal functions. - **Bug Fixes** - Enhanced testing capabilities with `data-testid` attributes for better identification and testing of components, particularly in detached widget drop areas. - **Refactor** - Updated the `Modal` component to use `dataAttributes` instead of `size` prop to streamline attribute handling. - Dynamic generation of modal class names based on properties for better styling and consistency. - **Style** - Adjusted styling for SVG elements within the `EntityExplorer` component, specifically modifying the height and width properties. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local> |
||
|
|
e01b34ec5d
|
chore: tests for wds button widget (#34242)
/ok-to-test tags="@tag.Anvil" <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Introduced test cases for Anvil Button Widgets, including Canvas, Preview, and Deploy modes. - **Bug Fixes** - Updated CSS and HTML selectors for better element targeting and testing reliability. - **Style** - Improved styling logic for buttons in the InlineButtons component. - **Chores** - Added `data-testid` attributes for better test targeting. - Refactored code for string concatenations and URL constructions in DeployModeHelper. <!-- end of auto-generated comment: release notes by coderabbit.ai --><!-- This is an auto-generated comment: Cypress test results --> > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/9597157402> > Commit: c551705fe01aace94962fcc7fa91dff253136721 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9597157402&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Anvil` <!-- end of auto-generated comment: Cypress test results --> --------- Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local> |
||
|
|
99fa93d61e
|
chore: Adding specs/tests for space distribution and copy paste sagas (#34063)
[](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=mFGYFxI) ## Description - Adding additional specs for space distribution and section deletion. - Adding unit tests for anvil pasting. Fixes #33739 _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/9443154667> > Commit: 4a770670aaf2f00d175066b597680345d840cd60 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9443154667&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 - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added new test cases for verifying section removal and visual aspects of background-less zones in the Anvil layout system. - Introduced methods to handle mouse events for space distribution within sections. - Added mock data generation functionality for widgets, sections, zones, and layouts. - **Tests** - Implemented tests for paste operations in the Anvil layout system, including various mock functions and scenarios. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
699222c5ee
|
feat: Preliminary set of test cases and test utils for Anvil DnD and Space distribution. (#33827)
[](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=NPM_l3J) ## Description In this PR we are - adding more testcases for Anvil DnD and space redistribution - create a structure for adding more utils for Anvil - adding utilities to perform operations in anvil - cleaning up anvil based locators Fixes #33738 _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/9297777615> > Commit: 21572b8a99cb22fb622729c807737ac133cfd073 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9297777615&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 |
||
|
|
88111acba8
|
fix: Anvil App Navigation Spec (#33584)
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local> |
||
|
|
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> |
||
|
|
7b527c9024
|
chore: Merge wds and anvil feature flags (#32609)
[](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=M7zehz4) ## Description Cleaning up three patterns of checks to enable wds and anvil into two. wds and anvil had to have different flags coz anvil had to play catch up with wds, now that's not the case so it does not make sense to have two flags. Old patterns - checking if the wds feature flag is enabled - checking if the anvil feature flag is enabled - checking if the layout system of the app is anvil New Pattern - checking if anvil feature flag is enabled (used only for creating an anvil app) - checking if layout system of the app is anvil Fixes #32590 _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.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/8663918496> > Commit: e10cc2a84ed680b29c49c5b2e8175df4c18da2f8 > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8663918496&attempt=1" target="_blank">Click here!</a> <!-- end of auto-generated comment: Cypress test results --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Refactor** - Consolidated the usage of layout system checks across the application to use a unified Anvil layout selector, enhancing consistency in layout-related conditional logic. - **Bug Fixes** - Removed outdated feature flags related to the Anvil + WDS integration, ensuring the application's feature toggling aligns with the current development strategy. - **Tests** - Updated unit tests to align with the new method of layout system determination, ensuring test environments accurately reflect production behavior. - **Chores** - Cleaned up redundant code and feature flags that are no longer in use, simplifying the codebase and reducing potential for errors. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
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 --> |
||
|
|
036f9b0f1b
|
chore: Anvil Canvas and Widget intearction separation (#32025)
## Description In this PR, we are separating widget and canvas interactions. going forward - Wigdets can be interacted with only in Preview mode. - Canvas based interactions will only be allowed in edit mode. Fixes #32138 Fixes #31570 Fixes #32058 _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/8506204162> > Commit: `d42107de5931bb39b656817b220e72737a30b5d0` > Cypress dashboard url: <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8506204162&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 - **New Features** - Enabled new Anvil editor functionality for all users. - Improved user interaction with widgets and modal widgets inside the Anvil editor. - **Refactor** - Streamlined feature flag handling for a more consistent user experience. - Enhanced canvas interaction in Anvil editor by adjusting pointer events settings. - **Tests** - Updated and refined Cypress end-to-end tests for better reliability and coverage. - **Style** - Introduced new CSS rules for better handling of user interactions within the Anvil editor environment. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
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 --> |
||
|
|
55487f5865
|
fix: Deselect all widgets on canvas click (#31653)
## Description
Clicking on the canvas in Anvil layouts did not deselect all widgets.
This PR fixes it. Now all widgets
## Approach
In the `AnvilMainCanvas` we check if the origin of the click event is
the Main Canvas. If it is, we allow the function to deselect all widgets
to run.
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- end of auto-generated comment: Cypress test results -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Refactor**
- Improved the logic for clearing widget selections to enhance user
experience when interacting with the main canvas.
- **Tests**
- Added a test case to ensure clicking on the canvas deselects all
widgets and verifies the border color of widgets within the main canvas.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
|
128e7bc686
|
fix: Enable multi widget selection in Anvil (#31305)
> Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description Fixing Selection to allow multi selection of widgets. > #### 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 - **Refactor** - Enhanced widget selection and interaction by updating event handling across components. - Modified types to align with event handling needs. - Updated event detail objects and handling in various hooks and utilities. - **Tests** - Added new test cases for widget selection with Ctrl + Click. - Updated existing test cases for improved coverage and accuracy. - Enhanced test case descriptions for better clarity. - Introduced a new parameter in a test function for improved testing capabilities. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
f7d41891b8
|
fix: Anvil toggleable widgets not working when native callbacks are used for AnvilFlexComponent (#31125)
> Pull Request Template > > Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request. > ## Description In last weeks effort of cleaning up Editor and Viewer parts of AnvilFlexComponent I had changed synthetic React callbacks to native ones #30780 . This has resulted in regression of widget toggling of widgets like Checkbox, Switch, etc. so changing them back to synthetic events by passing callbacks and props to the viewer part of AnvilFlexComponent. #### 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 testing suite for validating widget interactions in Anvil Layout Mode, focusing on switch and checkbox widgets. - Added new functionalities for switch and checkbox widgets, including selection toggling and state verification. - Enhanced Anvil editor components to support custom click behaviors, improving widget interaction in edit mode. - **Bug Fixes** - Addressed issues with native click callbacks interfering with widget events. - **Tests** - Added comprehensive test cases for new widget functionalities and interactions. - **Refactor** - Updated internal logic for widget selection and style adjustments based on interaction states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
c40b634185
|
fix: Fixing Anvil Section DnD Test cases. (#30995)
> 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 fixing the way events are dispatched and how position values are used to activate a section. This is still not set in stone as I need to write more utils based on alignment. but the current changes would be fail proof for the time being. #### 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 - **Refactor** - Improved app navigation settings and layout validation. - Enhanced widget placement accuracy on the ANVIL canvas. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
c37d0c283f
|
fix: Anvil Widgets not accessible when widget has no content. (#30780)
> 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 fixing a few issues and also destructuring AnvilFlexComponent for edit and view. Issues Fixed - Widgets without any content like a text widget without text are not hoverable - Modal once opened does not close when other widgets on the canvas are selected via the enitty explorer. Anvil Flex Component was common component inspired from PositionedContainer of Fixed layout. It had all features of Edit and View together in one place. This mean viewer was unnecessarily interpreting more code. Now AnvilFlexComponent has been broken into AnvilFlexComponent and AnvilEditorFlexComponent. AnvilEditorFlexComponent is a wrapper around AnvilFlexComponent with abilities needed for Edit Mode. Another issue addressed in the PR is removal of DraggableComponennt, which was just making dragging possible and providing a few styles like fading the widget when it is being dragged. With this PR all the above mentioned functions will be taken care of by AnvilEditorFlexComponent. #### PR fixes following issue(s) Fixes #30734 > 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 ## Summary by CodeRabbit - **New Features** - Enhanced feature flag management with additional flags for better control over application features. - Introduced a new editor component for Anvil layout system, improving layout and behavior management in edit mode. - Added a custom hook for managing hover states on Anvil widgets, enhancing user interaction. - **Refactor** - Updated AnvilFlexComponent to use `forwardRef` for better ref management and optimized widget configuration and rendering logic. - Modified selector logic to simplify the retrieval of layout system type, enhancing code maintainability. - Adjusted test methodologies to improve reliability and accuracy. - **Bug Fixes** - Corrected assertions in Cypress end-to-end tests to accurately locate and interact with widgets in the Anvil canvas, ensuring test reliability. - **Chores** - Updated common locators and assertion methods in Cypress support files for consistency and clarity in test scripts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
6765888eb0
|
chore: Anvil cypress tests (#30580)
> 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 writing tests to validate a few preliminary cases of the Anvil Editor. the purpose of the task is to be able to run anvil tests along side the present suite of test cases. Things to note for Anvil based test cases - ANVIL_EDITOR_TEST tag is used for Anvil based tests to make sure relevant feature flags are set(using featureFlagIntercept) before creating pages so that Anvil pages are created. - each test case in a Anvil spec file also use featureFlagIntercept to set the relevant flags since pages are reloded before running tests. #### 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 Anvil editor with the ability to test app navigation, drag and drop functionality, and suggested widgets feature. - Improved accessibility and interaction capabilities within the Anvil canvas. - **Tests** - Added comprehensive end-to-end tests for new Anvil editor features, including app navigation settings, widget drag and drop, and suggested widgets integration. - **Refactor** - Introduced new constants and locators for better test structure and readability. - **Style** - Updated components with new attributes for improved accessibility and testing. - **Chores** - Added new tags for organizing tests related to the Anvil editor. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |