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:
Abhinav Jha 2024-07-16 09:47:55 +05:30 committed by GitHub
parent 81d738d1de
commit d858eee763
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 2 deletions

View File

@ -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,

View File

@ -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;

View File

@ -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