Commit Graph

31 Commits

Author SHA1 Message Date
Ashok Kumar M
c86fad8af0
fix: Anvil Modal rendering issues when added via property pane. (#33161)
[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX19nRDyX3aNPwOb6Od0BRbu3Cn36Wq9Vqqg%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=zKx2Ri3)
## 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 #31889
Fixes #33205
_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/8983872645>
> Commit: a2432936b5941e441d19d569a9b93785ce0e213d
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8983872645&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
2024-05-07 16:30:01 +05:30
Abhinav Jha
10faa6a36d
feat: Add action to open property control with error in a widget (#33070)
## Description
A set of DUCK type, action and saga that opens the first property
control with error for a given `widgetId`.
Note: This assumes that an error exists when calling the action.

Fixes #33073

## 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/8906908304>
> Commit: 3e397ff84c830bd64b4652b2bbddad987ed7414a
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8906908304&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
2024-05-01 13:51:00 +05:30
Ashok Kumar M
3f222e5002
fix: Reverting Anvil currently open modal state implementation (#33067)
[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX1p4H4db8lSv1xTwGoYFAZnRwWdBNC5Y%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=MA2NqRe)
## 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._

In #33040 we added a state exclusively to capture modals that are
opened/closed to avoid computing which modal is open based on meta
state.
However the problem with this approach that I had understood after
testing it with deployed apps is that closing a modal is not done only
via the saga, but is done via actions and the modal itself without
dispatching the common saga.
Obviously the above implementation dunked.

Reverting to the previous implementation of relying on meta state to
select visible detached widgets.


Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8895170744>
> Commit: 517ffc6ac5302bae6940b17b76774a963a18f773
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8895170744&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
2024-04-30 19:27:18 +05:30
Ashok Kumar M
16fce05930
fix: render only the currently open detached widgets. (#33040)
[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX10brntLuWYYLQvefXZQ5n0RiHTmmIq6M%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=M62wKah)
## Description
Currently we render all the detached widgets(Modal) via a hook and the
widget shows up when the metaValue for visibility is toggled for a
modal.

Problems with this:
- we render all modal widgets even before they are needed.
- everytime something on the canvas changes the widgets are rendered.

To solve this we are going to rely on a state that captures the
currently open detached widgets in anvil
`anvilDetachedWidgets.currentlyOpenDetachedWidgets`
This is captured and reset currently based on show and close operations
of a modal.

we now have the modals that are currently open, we simply use this state
to render detached widgets by extracting the widget from the
`canvasWidgetsStructure` in the `useDetachedChildren` hook.

PS: we are taking advantage of the fact that modal widgets can only be a
child of main canvas in anvil. extracting modal states/props from
`canvasWidgetsStructure` becomes more performant coz its a targetted
search now.

Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8890517497>
> Commit: b68ad19c09f768b99d28b72626ceefaa1b79056d
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8890517497&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->






## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new component for rendering detached child widgets within
the Anvil layout system.
- **Refactor**
- Updated the handling and rendering process of detached widgets across
various components in the Anvil system.
- **Bug Fixes**
- Adjusted selector logic to correctly retrieve and manage detached
widget states.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-04-30 14:57:04 +05:30
Ashok Kumar M
4b1ef98014
feat: Anvil DnD Polish(Refactor) (#32839)
[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX18VSEOqElAtQ747ag1P1M0EAgrsJtMy4pQ%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=MdeCkAG)
## Description
In this PR, 
- we are refactoring Anvil DnD to use dom elements to render highlights
instead of canvas.

  Why?
- Doesn't have the ability to overflow a widget and still allow dnd
events(section widget use case)
  - limitations with respect to being testable

- we are adding compensators to dnd layers, so that DnD is not just for
layout but for the entire widget.
  Widget is the appsmith entity.
layout is something present in container like widgets like Section and
Zone which allow you to contain children widgets based on a the layout
structure.
  
  What are compensators?
  - additional padding for DnD layers in a widget
- additional position offsets for highlights in a widget so that they
don't stick to the layout.
  
  Why compensators?
- Section widget can be activated to show highlights in areas
overlapping with main canvas
- DnD should be possible even at spacings created by parent widget like
in Zone widget

- we are also removing canvas activation logic and moving to using mouse
move event to activate a canvas for DnD.

Fixes #32016
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8872919856>
> Commit: 3f6603bf8480a99437552ac73764c9de1d6f7f95
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8872919856&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->












## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Introduced a new layout property for widgets, enhancing customization
options.
- Added a custom error boundary component to handle and display errors
elegantly.
- New drag-and-drop components and utilities to improve interaction
within the editor canvas.
- Adjusted component hierarchies in Anvil editor and viewer for better
performance and structure.

- **Refactor**
- Simplified rendering logic in `AnvilWidgetComponent` by removing
conditional boundaries.
- Updated the hierarchy within the Anvil editor, enhancing component
nesting and interaction.

- **Bug Fixes**
- Adjusted padding values and added new constants for better UI
alignment and interaction feedback.

- **Chores**
- Renamed and reorganized Cypress locators and methods for clearer and
more efficient testing automation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-04-29 11:32:08 +05:30
Ashok Kumar M
353c91b8fa
fix: jest test failures coz of getIsAnvilLayout (#32664)
[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX1JO6UjhWrZEl6JP180WytEbimcxoUzA0%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=8xbfQu9)
## 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 #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.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/8679486679>
> Commit: fe97e718498f1974e3604ae20160e99918f9c35c
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8679486679&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**
- Simplified the logic for determining the layout system type in the
app.
- **Tests**
- Updated test files to remove unnecessary mock implementations related
to layout system checks.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-04-15 09:17:23 +05:30
Ashok Kumar M
7b527c9024
chore: Merge wds and anvil feature flags (#32609)
[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX1LNwrMHgs05enX0VDk8QxZH7uP7Ii4HE%2Fcollaboration.svg%3FcacheSeconds%3D60)](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 -->
2024-04-12 22:54:04 +05:30
Ashok Kumar M
79fbdc2b1a
chore: RMVF based changes for DnD, Modals, and Space distribution. (#31980)
## Description
> [!TIP]  
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._

Fixes #31935
Fixes #32059

_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]  
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8565307211>
> Commit: `5d5f682bcabd1b64d69d8743cc0ffbfcad372f92`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8565307211&attempt=1"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉

<!-- end of auto-generated comment: Cypress test results  -->








<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Enabled new feature flags for advanced widget and release management.
- Introduced a new component for modal layout and enhanced styling for
the Anvil Editor.
- Added messages for guiding users on where to drop widgets and modals.
  - Implemented a new route for widget editor enhancements.

- **Enhancements**
- Improved Anvil Editor's canvas functionality with better activation,
selection, and drag-and-drop features.
- Enhanced the visual styling and interaction of widgets and modals in
the Anvil Editor.

- **Bug Fixes**
- Corrected import paths and updated selectors for consistent
functionality across the Anvil platform.

- **Refactor**
- Streamlined Anvil Editor components and hooks for better
maintainability and readability.
- Adjusted import paths and reorganized components to align with the new
project structure.

- **Style**
- Added and updated CSS styles for better UI experience in the Anvil
Editor and modal interactions.

- **Tests**
- Updated Cypress E2E tests to reflect changes in the Anvil Editor's
functionality and UI elements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-04-05 11:16:07 +05:30
Ashok Kumar M
c209b47671
chore: clean up space distribution feature in Anvil (#31468)
> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
This PR addresses two particular things with space distribution
- Issue: Space distribution distributing more than max column limit
space
- Enhancement: Replace flew grow css for zones to flex basis to make
sure column widths are even irresepective of number of zones in a
section.

Additional Fixes:
- replaced test id of widgets editor to abide by repo standards.
- disable crud app generation feature for Anvil.
#### 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**
	- Enabled new feature flags to enhance application capabilities.
- Introduced dynamic space redistribution for improved layout
management.
- Added "Generate App" functionality for users with specific feature
access.
- **Enhancements**
	- Updated UI selectors for better consistency and reliability.
- Refined layout system logic to always utilize the Anvil layout system.
- **Refactor**
	- Optimized feature flag selection logic for efficiency.
- Improved flex property handling in layout components for more accurate
space distribution.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-03-06 12:59:44 +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
Preet Sidhu
c1207db0f5
fix: preserve order of widgets during multiple widget drag and drop (#31273)
## Description

Issues:
1. Order of widgets is not preserved during DnD.
2. DnD of small and large widgets together results in them being added
to the same row.

Fix:
1. Reuse zone utils to manage DnD of small and large widgets.
2. Account for the number of entities being added to preserve the order
of addition.

#### Media



https://github.com/appsmithorg/appsmith/assets/5424788/cc936242-4ea0-412e-b1bf-e62a196e228f



#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] 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 movement logic for improved layout management.
- Introduced tracking for the number of items added to a section,
optimizing layout adjustments.
- **Refactor**
- Updated widget movement and relationship management functions for
better efficiency and clarity.
- **Documentation**
- Added explanatory comments in paste functionality for better
understanding of the logic involved.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-02-27 11:55:35 +05:30
Preet Sidhu
ae396eb976
fix: clipping issue for excessive hug widgets in an alignment (#31053)
## Description

1. Restores the original behaviour of grow and shrink for alignments,
that had regressed after introduction of sizing tokens.
2. Fix clipping issue in alignments. If an alignments width equals or
exceeds the width of the row on larger screens, enable flex wrap.

#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing

#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new style property for `AnvilFlexComponent` to enhance
layout sizing.
- Added a function to determine if default alignment styles need to be
overridden.
- Launched a new React component for dynamic alignment of widgets within
a row, adaptable to different viewport sizes.
- **Refactor**
- Simplified the rendering process in `AlignedWidgetRow` by improving
component organization.
- Enhanced logic and structure in rendering functions for better
alignment and layout management.
- **Bug Fixes**
	- Fixed incorrect import paths in test and utility files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-02-15 17:02:26 +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
Preet Sidhu
c396fc5499
feat: Add copy paste functionality for Anvil. (#30217)
## Description

1. Copy paste functionality for Anvil.
2. Handle automatic creation of sections and zones based on different
scenarios.
3. Handle space distribution on paste.

#### Type of change
- New feature (non-breaking change which adds functionality)

## Testing

#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new paste functionality for widgets within the Anvil
layout system.

- **Improvements**
  - Refined widget movement logic to accommodate different canvas types.
- Expanded widget pasting capabilities with additional checks and
operations.

- **Bug Fixes**
- Addressed potential issues with dragging blocks by ensuring existence
checks before mapping.

- **Refactor**
- Streamlined sagas for widget operations to better align with the Anvil
layout system.
- Consolidated widget position utility functions for more efficient
layout management.

- **User Interface**
- Implemented user-friendly error messaging for paste operations that
fail.

- **Documentation**
- Updated messages and constants to support new paste functionality and
error handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
2024-01-24 21:55:08 +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
be057ff1d8
feat: Anvil DnD highlight activation upgrade (#29979)
> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
In this PR, we are trying to help users figure out wrapped cells and
also differentiate cell drops vs new cell drops.
we are also enhancing the highlights selection algorithm.
- highlights no longer have dropzones
- closest vertical highlights(cell drops) are triggered whenever the
mouse is deemed to be inside the cell withing a set threshold. Cell is
also highlighted for such highlights
- horizontal highlights(new cell drops) are triggered whenever the mouse
is deemed to be not inside any cell based on set threshold.
- post the above filter the closest highlight to the mouse position is
selected to be shown on the canvas as a highlight. so except for places
like Section padding and Zone padding where there is no Canvas,
highlights will always show up.

Issues observed while working on this PR:
- In safari center highlight seems to not work.
- highlights dont trigger in Section + Zone padding areas(will not be
addressed in this PR)
#### PR fixes following issue(s)
Fixes # (issue number)
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
  - Introduced a new highlight feature for the app's layout components.
- Enhanced search functionality with immediate activation for specific
feature flags.

- **Improvements**
- Improved the visual feedback during drag-and-drop operations with
optimized highlight rendering.
- Streamlined the logic for determining viable drop positions within the
layout system.
- Added conditional styling capabilities based on the application's
state.

- **Bug Fixes**
- Corrected the feature flag behavior to ensure consistent feature
access.

- **Refactor**
- Removed unused constants and properties related to drop zones to
simplify layout calculations.
- Enhanced type safety in selector functions for better maintainability.

- **Style**
- Added a new color constant for highlight effects, improving the visual
experience.

- **Tests**
- Updated tests to reflect changes in layout highlight logic and removal
of drop zones.


<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-01-11 21:31:38 +05:30
Preet Sidhu
dbda916f09
fix: undo action and highlight positions on right and bottom edges (#29909)
## Description

1. Make store updates atomic to ensure that undo operation works as
expected.
2. Add another guard to ensure that entire highlight is always visible,
esp along bottom and right edges of a layout.

#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing

#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Refactor**
  - Improved the layout saving process within the Anvil layout system.
- Enhanced the calculation of highlight positions in the layout editor.

- **Chores**
  - Removed unused `SAVE_ANVIL_LAYOUT` action type and related sagas.

- **Bug Fixes**
- Fixed positioning calculations for layout highlights to ensure
accurate alignment and distribution.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2023-12-29 08:11:49 +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
Preet Sidhu
fa7bd6a543
feat: add layouts and widgets for sections and zones. (#29713)
## Description

1. Create Section Widget.
2. Create Zone Widget.
3. Create layouts and presets for Sections and zones.
4. Upate layout for Anvil Main Canvas.
5. Refactor BaseLayoutComponent. Separate renderer for edit and view
modes.
6. Add childrenMap context to avoid prop drilling through all layouts.
7. Add Anvil Config for WDS widgets.

#### Type of change
- New feature (non-breaking change which adds functionality)

## Testing
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

#### Test Plan

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new `Zone Stepper Control` component for UI interaction.
- Added `AnvilCanvas` and `AnvilMainCanvas` components with improved
performance and interaction features.
- Implemented `LayoutProvider` and `useClickToClearSelections` for
better layout management.
- Launched `AnvilCanvasDraggingArena` and `AnvilHighlightingCanvas`
components with enhanced drag-and-drop capabilities.
- New `useZoneMinWidth` hook to calculate minimum zone width based on
child widgets.
- Added `SectionRow`, `Section`, `ZoneColumn`, and `Zone` components for
advanced layout structuring.
  - New `WidgetRenderer` component for dynamic child widget rendering.

- **Enhancements**
- Improved canvas activation and deactivation logic with
`useCanvasActivation` and `useCanvasActivationStates`.
- Enhanced drag-and-drop experience with updated `useCanvasDragging`
logic.
- Streamlined `AnvilMainCanvas` integration with conditional rendering
based on `renderMode`.
- Optimized `FlexLayout` component to handle new `isContainer` and
`layoutType` properties.

- **Bug Fixes**
- Fixed issues with widget positioning and event handling in
`WidgetNamesCanvas` components.
- Corrected `PageView` width property type for consistent page
rendering.

- **Refactor**
- Consolidated Anvil layout update management with `anvilSagas` and
`anvilChecksSagas`.
- Refined `SectionWidget` and `ZoneWidget` configuration for improved
stability and performance.
- Streamlined `LayoutElementPositionsObserver` with `layoutType`
enhancements.

- **Documentation**
- Updated comments and added clarifications for better developer
understanding of canvas-related hooks and components.

- **Style**
- Modified `.anvil-canvas` class styles for full-width and height
presentation.

- **Chores**
- Cleaned up import statements and removed unused code across various
components and utilities.

- **Tests**
- Enhanced Cypress tests with additional selectors and interaction
commands for `AutoDimension` feature verification.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
2023-12-26 09:16:58 -05:00
Pawan Kumar
c1884fa25c
chore: Integrate Radio Group (#29026)
Fixes #29001
2023-11-23 11:21:23 +03:00
Ashok Kumar M
d727ecf7c5
chore: register offset values as per parent drop target in Anvil (#28757)
> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
In this PR we are making changes to layout elements position observer to
capture offset values of drag parents(layouts that can have widgets)
relative to their own immediate dragparents.

Why?
once we have these offset values of each droptarget wrt to main canvas
droptarget we can clearly detect offsetvalues of widgets, since each
widget's positions that are captured already are wrt to main canvas,
with the calculated offset from the above process we can calculated
widget positions relative to their immediate parent as well.

#### PR fixes following issue(s)
Fixes #28561
Fixes #28585
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
2023-11-15 18:02:12 +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
Rudraprasad Das
cda27eb6f3
feat: branch protection (#28526)
## Description
- Adds server endpoints for getting and setting protected branches
- Adds protected canvas view for branch protection
- Adds default branch and protected branch in git modal settings

#### PR fixes following issue(s)
Fixes #28434, #28056

#### Media
Protected View -
<img width="1728" alt="image"
src="https://github.com/appsmithorg/appsmith/assets/8724051/4fb26450-61e1-4fc0-a66d-0ebaa28ff90c">

Branch Protection Settings -
<img width="1728" alt="image"
src="https://github.com/appsmithorg/appsmith/assets/8724051/fb6d16b6-0a3c-42fd-be1a-9b3677048663">


#### 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
- [ ] 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

---------

Co-authored-by: Nayan <nayan@appsmith.com>
2023-11-03 22:43:36 +05:30
Preet Sidhu
e9c3034c1c
chore: add mousemove listener to konva and bug fixes. (#28381)
## Description

Add ``mousemove`` event listener to WidgetName canvas. This allows the
canvas to toggle its own pointerEvents back to ``none`` when the mouse
is not hovering over a widget name component.

Additionally:
1. Removes highlights for empty ``AlignedWidgetRow``.
2. Fix layout preset for container widget. New layoutIDs are generated
for every instance.
3. Add an action to remove unobserved elements from layout positions
redux store.
4. Bottom padding of MainCanvas layout.

#### PR fixes following issue(s)
Fixes #28380 
Fixes #28415 


#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing

#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress


## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [x] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
2023-10-27 11:54:26 +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
Ashok Kumar M
492eece3c9
fix: widget dimensions for anvil widgets (#28356)
> 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 supplying width and height by computing rows and
columns defaults provided for fixed layout.
This is temporary, The actual implementation would be that widgets would
compute their own dimensions.
#### 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
2023-10-26 09:50:28 +05:30
Abhinav Jha
3d42333539
fix: Fix widget name canvas issues (#28314)
## Description
Fixes the following from #28310
- Use LayoutSystemType or LayoutSystemFeatures instead of feature flags
in
[app/client/src/pages/Editor/CanvasPropertyPane/index.tsx](e7603fd213 (diff-6ffc62fd8fff7633da84c1bbf822394ff49f1d89dc4ad073fff16e2f5e5d41fd))
- In WidgetNamesCanvas use SetDragginStateFnType or
SetDraggingStateActionPayload and remove the other from the codebase.

#### PR fixes following issue(s)
Fixes #28312
Fixes #28310

#### Type of change
- Bug fix (non-breaking change which fixes an issue)

#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [x] 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
2023-10-25 11:10:43 +05:30
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
Abhinav Jha
fce5524aa8
chore: Add observer to LayoutElements (#27993)
## Description
- Create a hook based on the `LayoutElementPositionsObserver` and use it
in `AnvilFlexComponent` such that all widgets in Anvil have their
positions registered in the `LayoutElementPositionsReducer`
- Do the same for `layouts` in Anvil. Added in the `FlexLayout`
component.

#### PR fixes following issue(s)
Fixes #26947 
Fixes #27287 

#### Type of change
- New feature (non-breaking change which adds functionality)
2023-10-18 19:09:07 +05:30
Valera Melnikov
9eac55a380
chore: add consistent-type-definitions rule (#27907)
## Description
Add consistent-type-definitions rule
2023-10-11 10:35:24 +03:00
rahulramesha
8a35e05923
chore: code changes for widget position observer and widget name on canvas (#27367)
## Description
The PR contains non integrated code changes for below new features, The
changes are not integrated to work but only contains the ground work
code changes that can be added to css based layout/ Anvil once that is
available in Release.

- **Widget Position observer-** Since we are moving to css based layout,
the positions of widgets will be unknown. To solve the issue we have
introduced the above feature that stores/updates position of widgets on
Redux state whenever a widget position updates. without manually
triggering any action
- **Widget Name on Canvas-** For the New Layout the existing widget name
is inconsistent as it would cut off or visually not visible. to solve
that the widget name will now be drawn on html canvas than it being a
dom node component

#### PR fixes following issue(s)
Fixes #26945 
Fixes #26948 


#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)


## Testing
#### How Has This Been Tested?
- [ ] Manual
- [ ] JUnit
- [ ] Jest

#### 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

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Abhinav Jha <abhinav@appsmith.com>
2023-10-06 15:37:43 +05:30