PromucFlow_constructor/app/client/src/layoutSystems/anvil/index.ts

58 lines
1.6 KiB
TypeScript
Raw Normal View History

chore: Create layout system structure for Anvil and AnvilFlexComponent. (#27178) ## Description 1. Add new ```appPositioningType``` : ANVIL. 2. Create new code path and folder structure for Anvil layout system. 3. Move common pieces of functionalities between autoLayout and anvil to anvil folder structure (e.g. ```CanvasResizer```). 4. Create ```AnvilFlexComponent```. 5. Use WDS Flex component in AnvilFlexComponent. 6. Pass min max size props in a data structure that is supported by container queries in the Flex component. e.g. min-width: { base: "120px", "480px": "200px" } 7. Supply the following flex properties (flex-grow flex-shrink flex-basis) to widgets depending on their ```responsiveBehvaiour```: a) Fill: ```flex: 1 1 0%;``` b) Hug: ```flex: 0 0 auto;``` #### PR fixes following issue(s) Fixes # (issue number) 1. [#26987](https://github.com/appsmithorg/appsmith/issues/26987) 2. [#26609](https://github.com/appsmithorg/appsmith/issues/26609) 3. [#26611](https://github.com/appsmithorg/appsmith/issues/26611) #### Type of change - New feature (non-breaking change which adds functionality) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
2023-10-02 19:41:05 +00:00
import { RenderModes } from "constants/WidgetConstants";
import { AnvilEditorWrapper } from "./editor/AnvilEditorWrapper";
import { AnvilViewerWrapper } from "./viewer/AnvilViewerWrapper";
import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
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 20:27:40 +00:00
import type { LayoutSystem } from "layoutSystems/types";
import { AnvilCanvas } from "./canvas/AnvilCanvas";
chore: Create layout system structure for Anvil and AnvilFlexComponent. (#27178) ## Description 1. Add new ```appPositioningType``` : ANVIL. 2. Create new code path and folder structure for Anvil layout system. 3. Move common pieces of functionalities between autoLayout and anvil to anvil folder structure (e.g. ```CanvasResizer```). 4. Create ```AnvilFlexComponent```. 5. Use WDS Flex component in AnvilFlexComponent. 6. Pass min max size props in a data structure that is supported by container queries in the Flex component. e.g. min-width: { base: "120px", "480px": "200px" } 7. Supply the following flex properties (flex-grow flex-shrink flex-basis) to widgets depending on their ```responsiveBehvaiour```: a) Fill: ```flex: 1 1 0%;``` b) Hug: ```flex: 0 0 auto;``` #### PR fixes following issue(s) Fixes # (issue number) 1. [#26987](https://github.com/appsmithorg/appsmith/issues/26987) 2. [#26609](https://github.com/appsmithorg/appsmith/issues/26609) 3. [#26611](https://github.com/appsmithorg/appsmith/issues/26611) #### Type of change - New feature (non-breaking change which adds functionality) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
2023-10-02 19:41:05 +00:00
/**
* getAnvilSystemPropsEnhancer
*
* utility function to enhance BaseWidgetProps with Anvil specific props
*
*/
const getAnvilSystemPropsEnhancer = (props: BaseWidgetProps) => {
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 20:27:40 +00:00
return props;
chore: Create layout system structure for Anvil and AnvilFlexComponent. (#27178) ## Description 1. Add new ```appPositioningType``` : ANVIL. 2. Create new code path and folder structure for Anvil layout system. 3. Move common pieces of functionalities between autoLayout and anvil to anvil folder structure (e.g. ```CanvasResizer```). 4. Create ```AnvilFlexComponent```. 5. Use WDS Flex component in AnvilFlexComponent. 6. Pass min max size props in a data structure that is supported by container queries in the Flex component. e.g. min-width: { base: "120px", "480px": "200px" } 7. Supply the following flex properties (flex-grow flex-shrink flex-basis) to widgets depending on their ```responsiveBehvaiour```: a) Fill: ```flex: 1 1 0%;``` b) Hug: ```flex: 0 0 auto;``` #### PR fixes following issue(s) Fixes # (issue number) 1. [#26987](https://github.com/appsmithorg/appsmith/issues/26987) 2. [#26609](https://github.com/appsmithorg/appsmith/issues/26609) 3. [#26611](https://github.com/appsmithorg/appsmith/issues/26611) #### Type of change - New feature (non-breaking change which adds functionality) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
2023-10-02 19:41:05 +00:00
};
const getAnvilSystemWrapper = (renderMode: RenderModes) => {
if (renderMode === RenderModes.CANVAS) return AnvilEditorWrapper;
return AnvilViewerWrapper;
};
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 20:27:40 +00:00
/**
* getAnvilCanvasWrapper
*
* utility function to return the anvil system canvas implementation.
*
* @returns current canvas component.
*/
const getAnvilCanvasWrapper = () => {
return AnvilCanvas;
};
/**
* getAnvilCanvasPropsEnhancer
*
* utility function to return the anvil system wrapper.
* wrapper is the component that wraps around a widget to provide layout-ing ability and enable editing experience.
*
* @returns current render mode specific wrapper.
*/
const getAnvilCanvasPropsEnhancer = (props: BaseWidgetProps) => {
return props;
};
export function getAnvilLayoutSystem(renderMode: RenderModes): LayoutSystem {
chore: Create layout system structure for Anvil and AnvilFlexComponent. (#27178) ## Description 1. Add new ```appPositioningType``` : ANVIL. 2. Create new code path and folder structure for Anvil layout system. 3. Move common pieces of functionalities between autoLayout and anvil to anvil folder structure (e.g. ```CanvasResizer```). 4. Create ```AnvilFlexComponent```. 5. Use WDS Flex component in AnvilFlexComponent. 6. Pass min max size props in a data structure that is supported by container queries in the Flex component. e.g. min-width: { base: "120px", "480px": "200px" } 7. Supply the following flex properties (flex-grow flex-shrink flex-basis) to widgets depending on their ```responsiveBehvaiour```: a) Fill: ```flex: 1 1 0%;``` b) Hug: ```flex: 0 0 auto;``` #### PR fixes following issue(s) Fixes # (issue number) 1. [#26987](https://github.com/appsmithorg/appsmith/issues/26987) 2. [#26609](https://github.com/appsmithorg/appsmith/issues/26609) 3. [#26611](https://github.com/appsmithorg/appsmith/issues/26611) #### Type of change - New feature (non-breaking change which adds functionality) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
2023-10-02 19:41:05 +00:00
return {
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 20:27:40 +00:00
canvasSystem: {
Canvas: getAnvilCanvasWrapper(),
propertyEnhancer: getAnvilCanvasPropsEnhancer,
},
widgetSystem: {
WidgetWrapper: getAnvilSystemWrapper(renderMode),
propertyEnhancer: getAnvilSystemPropsEnhancer,
},
chore: Create layout system structure for Anvil and AnvilFlexComponent. (#27178) ## Description 1. Add new ```appPositioningType``` : ANVIL. 2. Create new code path and folder structure for Anvil layout system. 3. Move common pieces of functionalities between autoLayout and anvil to anvil folder structure (e.g. ```CanvasResizer```). 4. Create ```AnvilFlexComponent```. 5. Use WDS Flex component in AnvilFlexComponent. 6. Pass min max size props in a data structure that is supported by container queries in the Flex component. e.g. min-width: { base: "120px", "480px": "200px" } 7. Supply the following flex properties (flex-grow flex-shrink flex-basis) to widgets depending on their ```responsiveBehvaiour```: a) Fill: ```flex: 1 1 0%;``` b) Hug: ```flex: 0 0 auto;``` #### PR fixes following issue(s) Fixes # (issue number) 1. [#26987](https://github.com/appsmithorg/appsmith/issues/26987) 2. [#26609](https://github.com/appsmithorg/appsmith/issues/26609) 3. [#26611](https://github.com/appsmithorg/appsmith/issues/26611) #### Type of change - New feature (non-breaking change which adds functionality) ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [x] Manual - [ ] JUnit - [x] Jest - [ ] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: rahulramesha <rahul@appsmith.com> Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
2023-10-02 19:41:05 +00:00
};
}