PromucFlow_constructor/app/client/cypress/e2e/Regression/ClientSide/MobileResponsiveTests
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
..
AutoDimension_1_spec.ts feat: add layouts and widgets for sections and zones. (#29713) 2023-12-26 09:16:58 -05:00
AutoDimension_2_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoFillWidgets_Basic_2_spec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoFillWidgets_Basic_spec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoFillWidgets_Reflow_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoHeight_Container_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoHeight_Form_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoHeight_Modal_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoHeight_Tabs_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoLayout_Widgets_Copy_Paste_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
AutoLayoutAutoHeight_spec.ts chore: add action group component (#29645) 2023-12-19 16:04:27 +03:00
AutoScroll_Validation_spec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
ConversionAlgorithm_AutoLayout_Validation_BasicSpec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
ConversionAlgorithm_FixedLayout_Mobile_Validation_Spec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
ConversionAlgorithm_FixedLayout_Validation_Desktop.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
ConversionFlow_Corner_Cases_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
ConversionFlow_Generated_App_spec.ts chore: Exclude failing auto-layout test cases for air gapped instances (#24329) 2023-06-11 20:59:30 +05:30
FillwidgetResizingSpec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
HugWidgetValidationSpec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
ResizingSpec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
Row_Gap_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
Snipping_mode_Basic_test.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
SuggestedWidgets_spec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
TableWidget_height_spec.ts test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
ValidateAutoFillContainerWidgets_spec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30
ValidateAutoFillContainerWithInput_spec.js test: Cypress - tag - @tag.MobileResponsive (#29678) 2023-12-18 17:15:29 +05:30