PromucFlow_constructor/app/client/cypress/e2e/Regression/ClientSide
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
..
ActionExecution test: Cypress | Replace static with Dynamic waits - Part III (#29582) 2023-12-14 22:03:20 +05:30
AdminSettings test: Cypress - added tags - @tag.Git, @tag.JS, @tag.Binding, @tag.Datasource, @tag.ImportExport (#29516) 2023-12-15 18:28:26 +05:30
AppNavigation test: Cypress | Replace static with Dynamic waits - Part IV (#29641) 2023-12-15 18:02:43 +05:30
AuditLogs test: Cypress | Replace static with Dynamic waits - Part IV (#29641) 2023-12-15 18:02:43 +05:30
Autocomplete test: Cypress - added tags - @tag.Git, @tag.JS, @tag.Binding, @tag.Datasource, @tag.ImportExport (#29516) 2023-12-15 18:28:26 +05:30
Binding test: Cypress | Replace static with Dynamic checks (#29664) 2023-12-22 17:20:05 +05:30
Branding test: Cypress - added tags - @tag.Git, @tag.JS, @tag.Binding, @tag.Datasource, @tag.ImportExport (#29516) 2023-12-15 18:28:26 +05:30
BugTests test: Cypress - added tags - @tag.Git, @tag.JS, @tag.Binding, @tag.Datasource, @tag.ImportExport (#29516) 2023-12-15 18:28:26 +05:30
CodeComment test: Cypress - added tag - @tag.AutoHeight, @tag.IDE (#29670) 2023-12-18 12:45:44 +05:30
CommunityTemplate feat: community templates UI (#27302) 2023-09-25 11:57:23 +05:30
Debugger test: Cypress | Replace static with Dynamic waits - Part IV (#29641) 2023-12-15 18:02:43 +05:30
DynamicHeight test: Cypress - added tag - @tag.AutoHeight, @tag.IDE (#29670) 2023-12-18 12:45:44 +05:30
Editor fix: excluding intercom test cases for airgap (#23974) 2023-06-02 12:10:49 +05:30
EmbedSettings test: Cypress - added tag - @tag.AutoHeight, @tag.IDE (#29670) 2023-12-18 12:45:44 +05:30
ExplorerTests test: Cypress - added tag - @tag.AutoHeight, @tag.IDE (#29670) 2023-12-18 12:45:44 +05:30
Fork test: Cypess - added tags - @tag.Fork, @tag.Git (#29672) 2023-12-18 11:56:21 +05:30
FormLogin test: Cypress - added tags - @tag.Git, @tag.JS, @tag.Binding, @tag.Datasource, @tag.ImportExport (#29516) 2023-12-15 18:28:26 +05:30
FormNativeToRawTests test: Gsheet Automation (#25255) 2023-07-26 18:56:24 +05:30
Git test: Cypress | Replace static with Dynamic checks (#29664) 2023-12-22 17:20:05 +05:30
Github test: Cypress - Flaky Fix (#26272) 2023-08-17 16:00:37 +05:30
Google test: Cypress | CI Stablize + Other improvements (#28254) 2023-10-25 19:33:07 +05:30
IDE fix: Widget Context Switching (#29735) 2023-12-20 12:26:16 +05:30
JSLibrary test: Cypress | Replace static with Dynamic checks (#29664) 2023-12-22 17:20:05 +05:30
JSObject test: Cypress - added tags - @tag.IDE, @tag.JS (#29674) 2023-12-18 17:01:22 +05:30
Linting test: Cypress - added tags - @tag.IDE, @tag.JS (#29674) 2023-12-18 17:01:22 +05:30
MobileResponsiveTests feat: add layouts and widgets for sections and zones. (#29713) 2023-12-26 09:16:58 -05:00
Onboarding feat: Create Query asks for Page (#29253) 2023-12-05 11:20:36 +05:30
OneClickBinding test: Cypress - added tag- @tag.Binding (#29679) 2023-12-18 13:07:03 +05:30
OtherUIFeatures feat: Create Query asks for Page (#29253) 2023-12-05 11:20:36 +05:30
PeekOverlay test: Cypress - added tags - @tag.JS, @tag.Perf, @tag.Settings, @tag.PropertyPane, @tag.Theme (#29682) 2023-12-18 17:18:23 +05:30
Performance test: Cypress - added tags - @tag.JS, @tag.Perf, @tag.Settings, @tag.PropertyPane, @tag.Theme (#29682) 2023-12-18 17:18:23 +05:30
ProductRamps test: Cypress - added tags - @tag.JS, @tag.Perf, @tag.Settings, @tag.PropertyPane, @tag.Theme (#29682) 2023-12-18 17:18:23 +05:30
PropertyPane test: Cypress - added tags - @tag.JS, @tag.Perf, @tag.Settings, @tag.PropertyPane, @tag.Theme (#29682) 2023-12-18 17:18:23 +05:30
PublishedApps test: Cypress - added tags - @tag.JS, @tag.Perf, @tag.Settings, @tag.PropertyPane, @tag.Theme (#29682) 2023-12-18 17:18:23 +05:30
Refactoring test: Cypress - added tags - @tag.JS, @tag.Perf, @tag.Settings, @tag.PropertyPane, @tag.Theme (#29682) 2023-12-18 17:18:23 +05:30
SetProperty test: Cypress | Flaky fix SetOptions_Spec.ts for EE failure (#29767) 2023-12-21 14:32:38 +05:30
SettingsPane test: Cypress - added tags - @tag.JS, @tag.Perf, @tag.Settings, @tag.PropertyPane, @tag.Theme (#29682) 2023-12-18 17:18:23 +05:30
Templates feat: improve templates listing page in start with templates flow (#29524) 2023-12-22 13:41:35 +05:30
ThemingTests test: Cypress - added tags - @tag.JS, @tag.Perf, @tag.Settings, @tag.PropertyPane, @tag.Theme (#29682) 2023-12-18 17:18:23 +05:30
UserProfile test: Cypress - added tags - @tag.Settings, @tag.Binding (#29684) 2023-12-18 17:03:54 +05:30
VisualTests test: Cypress - added tags - @tag.Settings, @tag.Binding (#29684) 2023-12-18 17:03:54 +05:30
Walkthrough test: Cypress - added tags - @tag.Settings, @tag.Binding (#29684) 2023-12-18 17:03:54 +05:30
Widgets test: Cypress | Replace static with Dynamic checks (#29664) 2023-12-22 17:20:05 +05:30
Workspace test: Cypress - tags added - @tag.Workspace, @tag.Datasource, @tag.JS, @tag.PropertyPane (#29704) 2023-12-18 17:41:37 +05:30