From 85226f48ccb4b9b7d6b60361ee393e882633d29f Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 25 Oct 2024 16:54:52 +0530 Subject: [PATCH] chore: fix blueprint operation inconsistency for zone (#36980) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In anvil, when widgets are dropped on canvas, we create a zone which has `visual separation` marked as true by default. Now, There is a usecase for the chat widget in which we want to modify the zone`s `Visual separation` to false on creation of zone. The code for bleuprint operation for chat widget would like this: ```js blueprint: { operations: [ { type: BlueprintOperationTypes.MODIFY_PROPS, fn: ( widget: FlattenedWidgetProps, widgets: CanvasWidgetsReduxState, parent: FlattenedWidgetProps, layoutSystemType: LayoutSystemTypes, ) => { if (layoutSystemType !== LayoutSystemTypes.ANVIL) return []; const updates: UpdatePropertyArgs[] = []; const parentId = widget.parentId; if (!parentId) return updates; const parentWidget = widgets[parentId]; // we want to proceed only if the parent is a zone widget and has no children if ( parentWidget.children?.length === 0 && parentWidget.type === "ZONE_WIDGET" ) { updates.push({ widgetId: parentId, propertyName: "elevatedBackground", propertyValue: false, }); } return updates; }, }, ], }, ``` This should work fine, but in the code where we create zone and attaching widgets to it, after running the blueprint operations, we were not using the correct updated zone that returned from blueprint operations of the child widgets. This PR uses the correct zone. Also there is a case where blueprint operation is not able to update the existing widgets because all properties of existing widgets were readonly. So cloned the widgets from redux before passing to widget addition saga functions. /ok-to-test tags="@tag.All" ## Summary by CodeRabbit - **New Features** - Improved clarity in widget handling by renaming parameters related to dragged widgets. - Streamlined the process of adding widgets to zones by simplifying parameter structures. - **Bug Fixes** - Enhanced immutability in widget property updates within the state management process. - **Style** - Updated CSS styles for the `.markdown` class, removing unnecessary pseudo-elements for improved formatting. > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 8a385eec313142b40f848eed20310d3774c0705c > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Wed, 23 Oct 2024 09:47:24 UTC ## Summary by CodeRabbit - **New Features** - Improved clarity in widget handling by renaming parameters related to dragged widgets. - Enhanced functionality for adding widgets to zones by simplifying the data structure used. - Implemented safer state manipulation for widget addition using a deep copy approach. - **Bug Fixes** - Addressed potential issues with direct state mutation during widget addition. - **Style** - Updated CSS styles for the Markdown component by removing unnecessary pseudo-elements. --- .../components/Markdown/src/styles.module.css | 6 ------ .../sagas/anvilWidgetAdditionSagas/index.ts | 4 +++- .../utils/layouts/update/sectionUtils.ts | 4 ++-- .../anvil/utils/layouts/update/zoneUtils.ts | 20 +++++++------------ 4 files changed, 12 insertions(+), 22 deletions(-) diff --git a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css index 7b60c6ee7e..9d930398df 100644 --- a/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css +++ b/app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css @@ -1,12 +1,6 @@ .markdown { color: var(--color-fg); - &::after, - &::before { - /* This is required to remove the compensators of capsizing that comes up due to use of `wds-body-text` class */ - content: none !important; - } - table { border: var(--border-width-1) solid var(--color-bd); border-collapse: separate; diff --git a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts index c121a45835..730772a90e 100644 --- a/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts +++ b/app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts @@ -27,6 +27,7 @@ import log from "loglevel"; import { generateDefaultLayoutPreset } from "layoutSystems/anvil/layoutComponents/presets/DefaultLayoutPreset"; import { addWidgetsToPreset } from "layoutSystems/anvil/utils/layouts/update/additionUtils"; import { addNewAnvilWidgetToDSL } from "./helpers"; +import { klona } from "klona"; // The suggested widget functionality allows users to bind data from the Query pane // to a new or existing widget on the Canvas. @@ -109,7 +110,8 @@ export function* getUpdatedListOfWidgetsAfterAddingNewWidget( isSection: boolean, // Indicates if the drop zone is a section ) { const { alignment, canvasId } = highlight; - const allWidgets: CanvasWidgetsReduxState = yield select(getWidgets); + const allWidgetsFromRedux: CanvasWidgetsReduxState = yield select(getWidgets); + const allWidgets = klona(allWidgetsFromRedux) as CanvasWidgetsReduxState; const parentWidgetWithLayout = allWidgets[canvasId]; diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts b/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts index 9a4f5df405..8cb4c9d447 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts @@ -19,7 +19,7 @@ import { addNewAnvilWidgetToDSL } from "layoutSystems/anvil/integrations/sagas/a export function* createSectionAndAddWidget( allWidgets: CanvasWidgetsReduxState, highlight: AnvilHighlightInfo, - widgets: WidgetLayoutProps[], + draggedWidgets: WidgetLayoutProps[], parentId: string, ) { /** @@ -48,7 +48,7 @@ export function* createSectionAndAddWidget( yield call( addWidgetsToSection, updatedWidgets, - widgets, + draggedWidgets, highlight, sectionProps, ); diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts b/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts index acffc10949..09cef91128 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts @@ -58,7 +58,7 @@ export function* createZoneAndAddWidgets( updatedWidgets, draggedWidgets, highlight, - zoneProps, + zoneProps.widgetId, ); return res; @@ -68,13 +68,11 @@ export function* addWidgetsToZone( allWidgets: CanvasWidgetsReduxState, draggedWidgets: WidgetLayoutProps[], highlight: AnvilHighlightInfo, - zone: WidgetProps, + zoneWidgetId: string, ) { let updatedWidgets: CanvasWidgetsReduxState = { ...allWidgets }; - const zoneProps = { ...zone }; - const preset: LayoutProps[] = zoneProps.layout; + const preset: LayoutProps[] = updatedWidgets[zoneWidgetId].layout; let zoneLayout: LayoutProps = preset[0]; - const { widgetId: zoneWidgetId } = zoneProps; /** * If dragged widget is a new widget, @@ -86,7 +84,6 @@ export function* addWidgetsToZone( zoneWidgetId, draggedWidgets, ); - zoneProps.children = updatedWidgets[zoneWidgetId].children; /** * Split new widgets based on type. @@ -127,14 +124,11 @@ export function* addWidgetsToZone( /** * Update zone widget with the updated preset. */ - zoneProps.layout = [zoneLayout]; + updatedWidgets[zoneWidgetId].layout = [zoneLayout]; return { - canvasWidgets: { - ...updatedWidgets, - [zoneProps.widgetId]: zoneProps, - }, - zone: zoneProps, + canvasWidgets: updatedWidgets, + zone: updatedWidgets[zoneWidgetId], }; } @@ -219,7 +213,7 @@ function* moveWidgetsToNewLayout( widgets, transformMovedWidgets(widgets, movedWidgets, highlight), highlight, - zone, + zone.widgetId, ); return canvasWidgets;