From d858eee7639529b26057393c843a40a76c804a30 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Tue, 16 Jul 2024 09:47:55 +0530 Subject: [PATCH] chore: Reduce DSL size by removing runtime values from the DSL. (#34894) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: b6eac580e47dcdd0b056acdb574aac7b8c7cba2f > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Fri, 12 Jul 2024 08:10:58 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## 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. --- .../editor/AutoLayoutEditorWidgetOnion.tsx | 11 +++++++++- .../layoutSystems/fixedlayout/common/utils.ts | 2 +- app/client/src/sagas/WidgetAdditionSagas.ts | 20 +++++++++++++++++++ 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/app/client/src/layoutSystems/autolayout/editor/AutoLayoutEditorWidgetOnion.tsx b/app/client/src/layoutSystems/autolayout/editor/AutoLayoutEditorWidgetOnion.tsx index 940ad0e19e..edd63d2db3 100644 --- a/app/client/src/layoutSystems/autolayout/editor/AutoLayoutEditorWidgetOnion.tsx +++ b/app/client/src/layoutSystems/autolayout/editor/AutoLayoutEditorWidgetOnion.tsx @@ -41,7 +41,16 @@ export const AutoLayoutEditorWidgetOnion = (props: BaseWidgetProps) => { } = props; const generateDragState = useCallback( (e: React.DragEvent, draggableRef: HTMLElement) => { - return generateDragStateForFixedLayout(e, draggableRef, props); + return generateDragStateForFixedLayout(e, draggableRef, { + bottomRow, + topRow, + leftColumn, + rightColumn, + parentColumnSpace, + parentRowSpace, + parentId, + widgetId, + }); }, [ bottomRow, diff --git a/app/client/src/layoutSystems/fixedlayout/common/utils.ts b/app/client/src/layoutSystems/fixedlayout/common/utils.ts index 40846d8c70..e3590d01ae 100644 --- a/app/client/src/layoutSystems/fixedlayout/common/utils.ts +++ b/app/client/src/layoutSystems/fixedlayout/common/utils.ts @@ -13,7 +13,7 @@ export const generateDragStateForFixedLayout = ( rightColumn, topRow, widgetId, - }: BaseWidgetProps, + }: Omit, ): SetDraggingStateActionPayload => { const widgetHeight = bottomRow - topRow; const widgetWidth = rightColumn - leftColumn; diff --git a/app/client/src/sagas/WidgetAdditionSagas.ts b/app/client/src/sagas/WidgetAdditionSagas.ts index e79c5c9760..0c5cc07a5d 100644 --- a/app/client/src/sagas/WidgetAdditionSagas.ts +++ b/app/client/src/sagas/WidgetAdditionSagas.ts @@ -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