Commit Graph

11 Commits

Author SHA1 Message Date
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
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
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>
2024-01-26 09:30:57 +05:30
Ashok Kumar M
6b2c79f48e
feat: Space redistribution UX upgrade and implicit space distribution (#30242)
> 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 implementing two features
- When space distribution is happening via the implicit/explicit method,
distribution handle is attracted to the nearest node once mouse pointer
is near to it.


https://github.com/appsmithorg/appsmith/assets/35134347/a83e4adf-2e1b-413a-9a59-331707c3aa7a


- Implicit space distribution, space distribution can also be done via
section/zone property pane.


https://github.com/appsmithorg/appsmith/assets/35134347/4123d7dd-659e-483b-91f3-d454e7e0a31d



#### 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 `Section Splitter Control` for enhanced space
distribution within property pane sections.
- Added a `Zone Stepper Control` to manage zone counts through a
user-friendly interface.

- **Enhancements**
  - Improved feature flag logic for more consistent user experience.
- Refined space distribution with new constants and utility functions
for Anvil layout system.
- Streamlined Anvil editor widget structure for better performance and
simplicity.

- **User Interface**
- Implemented new property pane sections for `SectionWidget` and
`ZoneWidget` to improve user interaction and configuration options.

- **Bug Fixes**
- Fixed feature flag retrieval behavior to ensure correct feature
access.

- **Refactor**
- Optimized selectors and hooks for better maintainability and
readability.
- Updated import paths and renamed modules for clearer codebase
navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-01-24 07:56:23 +05:30
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>
2023-12-27 16:05:41 +05:30
Ashok Kumar M
a6e0c54d72
fix: Anvil fixes and enhancements post R0 (#28711)
> 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
- suggested widgets feature in Anvil
- implementing isVisible prop based rendering in Anvil
- remove main canvas resizer in edit mode of Anvil
- cleaning up sniping mode based changes for anvil since its only used
via sign posting flow which is a fixed layout only feature right now.
- adding buffer for main canvas DnD
- fixing glitches in first time DnD
#### PR fixes following issue(s)
Fixes #28577

> 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
2023-11-15 18:01:54 +05:30
Ashok Kumar M
b1933e347f
fix: Fixing Anvil DnD for nested containers (#28362)
> 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 sure layouts inside dragged widgets are not activated
- we are making sure layoutId is newly generated when a widget with a
canvas is added instead of using the defaults layoutId coz its a frozen
object which was using same set of layoutIds for every time we add
widgets.
This fix works only for one level on the canvas widgets, bringing this
to your notice @prsidhu

#### PR fixes following issue(s)
Fixes #28337
> 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
2023-10-26 11:54:24 +05:30
Preet Sidhu
159a26fb6e
chore: Add MutuationObserver to track changes in positions of widgets and layouts. (#28315) 2023-10-24 07:37:06 -04:00
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>
2023-10-19 16:27:40 -04:00
Ashok Kumar M
703048b7b5
chore: Layout system wise restructuring of Canvas Widget (#27496)
> 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 cleaning up Canvas Widget implementation and taking
measures to remove it from the widget suite.
more detailed explanation of Why and How of the solution
[here](https://www.notion.so/Canvas-Widget-73776a3364ba42eb8f783c79046777d0)

In this solution we are going to remove implementation of Editing and
Layouting Specific implementation from Canvas Widget and create a new
view component which is Layout system specific.

#### PR fixes following issue(s)
Fixes #27003
#### 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.
- 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
- [X] 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
2023-10-04 17:23:29 +05:30
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>
2023-10-02 15:41:05 -04:00