PromucFlow_constructor/app/client/src/components/propertyControls
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
..
__snapshots__ feat: add property hideNoneIcon to IconSelectControl (#27281) 2023-09-18 18:37:03 +05:30
ActionSelectorControl.tsx fix: type error on ee (#29807) 2023-12-22 13:46:58 +05:30
BaseControl.tsx chore: Custom widget (alpha) (#27571) 2023-11-14 10:03:37 +05:30
BorderRadiusOptionsControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
BoxShadowOptionsControl.tsx fix: updated Box shadow UI (#23795) 2023-06-08 06:53:28 +05:30
ButtonBorderRadiusControl.tsx chore: Move the widget config to widget class (#26073) 2023-09-06 17:45:04 +05:30
ButtonControl.tsx chore: Custom widget (alpha) (#27571) 2023-11-14 10:03:37 +05:30
ButtonListControl.tsx feat: WDS button group widget integration (#28205) 2023-10-30 17:32:13 +05:30
ButtonTabControl.test.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
ButtonTabControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
ChartDataControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
CodeEditorControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
ColorPickerComponentV2.test.tsx chore: add color validation + native color picker (#25355) 2023-08-07 11:55:10 +03:00
ColorPickerComponentV2.tsx fix: save checked full color picker between renders (#27028) 2023-09-08 12:05:46 +03:00
ColorPickerControl.test.tsx chore: Adds canDisplayValue to property controls (#13309) 2022-06-03 10:37:02 +05:30
ColorPickerControl.tsx chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> 2023-03-16 17:11:47 +05:30
ColumnActionSelectorControl.tsx fix: Passsing dataTreePath to CodeEditor for AI events (#26601) 2023-09-01 17:43:24 +05:30
ComputeTablePropertyControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
DatePickerControl.tsx perf: reduce the bundle size, vol. 2 (#24969) 2023-07-17 00:19:41 +05:30
DraggableListCard.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
DraggableListComponent.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
DropDownControl.test.tsx chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> 2023-03-16 17:11:47 +05:30
DropDownControl.tsx chore: update eslint and dependencies then fix revealed errors (#27908) 2023-10-11 10:14:38 +03:00
FieldConfigurationControl.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
HTMLDocumentBuilderControl.tsx chore: Custom widget (alpha) (#27571) 2023-11-14 10:03:37 +05:30
IconSelectControl.test.tsx feat: add property hideNoneIcon to IconSelectControl (#27281) 2023-09-18 18:37:03 +05:30
IconSelectControl.tsx feat: add property hideNoneIcon to IconSelectControl (#27281) 2023-09-18 18:37:03 +05:30
IconTabControl.test.tsx chore: Adds canDisplayValue to property controls (#13309) 2022-06-03 10:37:02 +05:30
IconTabControl.tsx fix: Issue with the Segmented control in property pane (#18533) 2023-06-07 16:33:22 +05:30
index.ts feat: add layouts and widgets for sections and zones. (#29713) 2023-12-26 09:16:58 -05:00
InputTextControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
JSONFormComputeControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
KeyValueComponent.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
LabelAlignmentOptionsControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
ListComputeControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
LocationSearchControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
MenuButtonDynamicItemsControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
MenuItemsControl.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
MultiSwitchControl.tsx chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> 2023-03-16 17:11:47 +05:30
NumericInputControl.test.ts fix: JS toggle issue with Numeric Input & multi select dropdown controls (#14892) 2022-07-07 05:37:50 +00:00
NumericInputControl.tsx fix: Map widget zoom control suffix (#25031) 2023-07-07 18:28:47 +05:30
OneClickBindingControl.tsx feat: JSON form widget one click binding integration (#25873) 2023-10-03 13:40:51 +05:30
OpenConfigPanelControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
OptionControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
PrimaryColumnColorPickerControl.tsx chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> 2023-03-16 17:11:47 +05:30
PrimaryColumnColorPickerControlV2.tsx chore: upgrade to prettier v2 + enforce import types (#21013)Co-authored-by: Satish Gandham <hello@satishgandham.com> Co-authored-by: Satish Gandham <satish.iitg@gmail.com> 2023-03-16 17:11:47 +05:30
PrimaryColumnDropdownControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
PrimaryColumnsControl.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
PrimaryColumnsControlV2.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
SelectDefaultValueControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
StepControl.test.tsx feat: upgrade to create react app 5 (#14000) 2022-06-21 19:27:34 +05:30
StepControl.tsx fix: Map widget zoom control suffix (#25031) 2023-07-07 18:28:47 +05:30
StyledControls.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
SwitchControl.test.tsx chore: Adds canDisplayValue to property controls (#13309) 2022-06-03 10:37:02 +05:30
SwitchControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
TabControl.tsx chore: add consistent-type-definitions rule (#27907) 2023-10-11 10:35:24 +03:00
TableComputeValue.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
TableInlineEditValidationControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
TableInlineEditValidPropertyControl.tsx feat: [epic] appsmith design system version 2 deduplication (#22030) 2023-05-20 00:07:06 +05:30
utils.ts feat: select and multiselect label value (#24964) 2023-07-25 10:26:33 +05:30
WrappedCodeEditorControl.tsx chore: sunset assistive binding (#29119) 2023-11-28 14:25:46 +05:30
ZoneStepperControl.tsx feat: add layouts and widgets for sections and zones. (#29713) 2023-12-26 09:16:58 -05:00