chore: Reduce DSL size by removing runtime values from the DSL. (#34894)
## Description
Today, the DSL contains many properties that are not necessary to be
persisted, as these are properties which are inherent to the widget type
and are statically available in the codebase and during runtime.
`getChildWidgetProps` is the lowest level function the widget addition
flow that is not used in recursion and does not need to return these
runtime properties for proper functioning of the widget addition flow.
The flow is as follows:
`addChildSaga` -> `getUpdateDSLAfterCreatingChild` ->
`generateChildWidgets` -> `getChildWidgetProps` -> `generateWidgetProps`
(Don't understand the distinction in the names of the functions? Me
neither)
In this PR, we're selectively deleting the properties which are going to
be set into the DSL and are not required by the DSL. This is done in the
`getChildWidgetProps` function.
DSL Before:
```{
"isVisible": true,
"type": "BUTTON_WIDGET",
"animateLoading": true,
"text": "Submit",
"buttonVariant": "PRIMARY",
"placement": "CENTER",
"widgetName": "Button1",
"isDisabled": false,
"isDefaultClickDisabled": true,
"disabledWhenInvalid": false,
"resetFormOnClick": false,
"recaptchaType": "V3",
"version": 1,
"responsiveBehavior": "hug",
"minWidth": 120,
"searchTags": ["click", "submit"],
"tags": ["Buttons"],
"hideCard": false,
"isDeprecated": false,
"displayName": "Button",
"key": "yngxey92vx",
"iconSVG": "https://release-appcdn.appsmith.com/static/media/icon.7a418b9e1899a550d7e8f33b48cbde12.svg",
"thumbnailSVG": "https://release-appcdn.appsmith.com/static/media/thumbnail.a348658e996feaad96cadc30d99374ff.svg",
"needsErrorInfo": false,
"onCanvasUI": {
"selectionBGCSSVar": "--on-canvas-ui-widget-selection",
"focusBGCSSVar": "--on-canvas-ui-widget-focus",
"selectionColorCSSVar": "--on-canvas-ui-widget-focus",
"focusColorCSSVar": "--on-canvas-ui-widget-selection",
"disableParentSelection": false
},
"widgetId": "3du74sjd24",
"renderMode": "CANVAS",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none",
"isLoading": false,
"parentColumnSpace": 16.21875,
"parentRowSpace": 10,
"leftColumn": 16,
"rightColumn": 32,
"topRow": 27,
"bottomRow": 31,
"mobileLeftColumn": 16,
"mobileRightColumn": 32,
"mobileTopRow": 27,
"mobileBottomRow": 31,
"parentId": "0",
"dynamicBindingPathList": [
{ "key": "buttonColor" },
{ "key": "borderRadius" }
]
}
```
DSL After:
```
{
"isVisible": true,
"type": "BUTTON_WIDGET",
"animateLoading": true,
"text": "Submit",
"buttonVariant": "PRIMARY",
"placement": "CENTER",
"widgetName": "Button1",
"isDisabled": false,
"isDefaultClickDisabled": true,
"disabledWhenInvalid": false,
"resetFormOnClick": false,
"recaptchaType": "V3",
"version": 1,
"responsiveBehavior": "hug",
"minWidth": 120,
"key": "gtjsfondgr",
"needsErrorInfo": false,
"widgetId": "cszodka6p1",
"renderMode": "CANVAS",
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"boxShadow": "none",
"isLoading": false,
"parentColumnSpace": 16.21875,
"parentRowSpace": 10,
"leftColumn": 18,
"rightColumn": 34,
"topRow": 28,
"bottomRow": 32,
"mobileLeftColumn": 18,
"mobileRightColumn": 34,
"mobileTopRow": 28,
"mobileBottomRow": 32,
"parentId": "0",
"dynamicBindingPathList": [
{ "key": "buttonColor" },
{ "key": "borderRadius" }
]
}
```
Fixes #21825
## 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/9904027497>
> Commit: b6eac580e47dcdd0b056acdb574aac7b8c7cba2f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9904027497&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 12 Jul 2024 08:10:58 UTC
<!-- 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
- **Refactor**
- Improved the drag state generation logic for fixed layouts to enhance
performance and maintainability.
- Simplified the `widget` object in the `WidgetAdditionSagas` to remove
unnecessary properties, improving clarity and efficiency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
81d738d1de
commit
d858eee763
|
|
@ -41,7 +41,16 @@ export const AutoLayoutEditorWidgetOnion = (props: BaseWidgetProps) => {
|
|||
} = props;
|
||||
const generateDragState = useCallback(
|
||||
(e: React.DragEvent<Element>, draggableRef: HTMLElement) => {
|
||||
return generateDragStateForFixedLayout(e, draggableRef, props);
|
||||
return generateDragStateForFixedLayout(e, draggableRef, {
|
||||
bottomRow,
|
||||
topRow,
|
||||
leftColumn,
|
||||
rightColumn,
|
||||
parentColumnSpace,
|
||||
parentRowSpace,
|
||||
parentId,
|
||||
widgetId,
|
||||
});
|
||||
},
|
||||
[
|
||||
bottomRow,
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export const generateDragStateForFixedLayout = (
|
|||
rightColumn,
|
||||
topRow,
|
||||
widgetId,
|
||||
}: BaseWidgetProps,
|
||||
}: Omit<BaseWidgetProps, "widgetName" | "type" | "isLoading" | "version">,
|
||||
): SetDraggingStateActionPayload => {
|
||||
const widgetHeight = bottomRow - topRow;
|
||||
const widgetWidth = rightColumn - leftColumn;
|
||||
|
|
|
|||
|
|
@ -186,6 +186,26 @@ function* getChildWidgetProps(
|
|||
}
|
||||
|
||||
widget.widgetId = newWidgetId;
|
||||
// Remove props that don't belong in the DSL and can be accessed using
|
||||
// the widget type's static methods and configurations
|
||||
// Fixes #21825
|
||||
widget.rows = undefined;
|
||||
widget.columns = undefined;
|
||||
widget.name = undefined;
|
||||
widget.iconSVG = undefined;
|
||||
widget.thumbnailSVG = undefined;
|
||||
widget.hideCard = undefined;
|
||||
widget.isDeprecated = undefined;
|
||||
widget.needsMeta = undefined;
|
||||
widget.searchTags = undefined;
|
||||
widget.tags = undefined;
|
||||
widget.displayName = undefined;
|
||||
widget.onCanvasUI = undefined;
|
||||
widget.eagerRender = undefined;
|
||||
widget.needsHeightForContent = undefined;
|
||||
widget.features = undefined;
|
||||
widget.replacement = undefined;
|
||||
|
||||
/**
|
||||
* un-evaluated childStylesheet used by widgets; so they are to be excluded
|
||||
* from the dynamicBindingPathList and they are not included as a part of
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user