Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
16,937 Commits 1 Branch 0 Tags 507 MiB
fc4100b747
Commit Graph

8 Commits

Author SHA1 Message Date
Ashok Kumar M
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 -->
 2024-04-01 15:00:24 +05:30
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 -->
 2024-03-22 16:53:29 +03:00
Abhinav Jha
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 -->
 2024-03-11 20:45:47 +05:30
Ashok Kumar M
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 -->
 2024-03-01 15:20:09 +05:30
Ashok Kumar M
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 -->
 2024-02-15 11:00:57 +05:30
Ashok Kumar M
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 -->
 2024-02-08 14:12:09 +05:30
Ashok Kumar M
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 -->
 2024-02-05 18:00:50 +05:30
Ashok Kumar M
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 -->
 2024-01-31 11:02:38 +05:30