diff --git a/app/client/src/sagas/WidgetOperationUtils.test.ts b/app/client/src/sagas/WidgetOperationUtils.test.ts index 56bb2fa02e..f91f454753 100644 --- a/app/client/src/sagas/WidgetOperationUtils.test.ts +++ b/app/client/src/sagas/WidgetOperationUtils.test.ts @@ -204,4 +204,184 @@ describe("WidgetOperationSaga", () => { "template.Text2.text", ); }); + + it("should returns correct close model reference name after executing handleSpecificCasesWhilePasting", async () => { + const result = handleSpecificCasesWhilePasting( + { + widgetName: "Modal1Copy", + rightColumn: 24, + detachFromLayout: true, + widgetId: "k441huwm77", + topRow: 34, + bottomRow: 58, + parentRowSpace: 10, + canOutsideClickClose: true, + type: "MODAL_WIDGET", + canEscapeKeyClose: true, + version: 1, + parentId: "0", + shouldScrollContents: true, + isLoading: false, + parentColumnSpace: 17.21875, + size: "MODAL_SMALL", + leftColumn: 0, + children: ["ihxw5r23hd"], + renderMode: "CANVAS", + }, + { + k441huwm77: { + widgetName: "Modal1Copy", + rightColumn: 24, + detachFromLayout: true, + widgetId: "k441huwm77", + topRow: 34, + bottomRow: 58, + parentRowSpace: 10, + canOutsideClickClose: true, + type: "MODAL_WIDGET", + canEscapeKeyClose: true, + version: 1, + parentId: "0", + shouldScrollContents: true, + isLoading: false, + parentColumnSpace: 17.21875, + size: "MODAL_SMALL", + leftColumn: 0, + children: ["ihxw5r23hd"], + renderMode: "CANVAS", + }, + suhkuyfpk3: { + widgetName: "Icon1Copy", + rightColumn: 64, + onClick: "{{closeModal('Modal1')}}", + color: "#040627", + iconName: "cross", + widgetId: "suhkuyfpk3", + topRow: 1, + bottomRow: 5, + isVisible: true, + type: "ICON_WIDGET", + version: 1, + parentId: "ihxw5r23hd", + isLoading: false, + leftColumn: 56, + iconSize: 24, + renderMode: "CANVAS", + parentColumnSpace: 2, + parentRowSpace: 3, + }, + twnxjwy3r1: { + widgetName: "Button1Copy", + rightColumn: 48, + onClick: "{{closeModal('Modal1')}}", + isDefaultClickDisabled: true, + widgetId: "twnxjwy3r1", + buttonStyle: "SECONDARY_BUTTON", + topRow: 16, + bottomRow: 20, + isVisible: true, + type: "BUTTON_WIDGET", + version: 1, + parentId: "ihxw5r23hd", + isLoading: false, + dynamicTriggerPathList: [ + { + key: "onClick", + }, + ], + leftColumn: 36, + dynamicBindingPathList: [], + text: "Cancel", + isDisabled: false, + renderMode: "CANVAS", + parentColumnSpace: 2, + parentRowSpace: 3, + }, + }, + { + Modal1: "Modal1Copy", + Canvas1: "Canvas1Copy", + Icon1: "Icon1Copy", + Text1: "Text1Copy", + Button1: "Button1Copy", + Button2: "Button2Copy", + }, + [ + { + widgetName: "Modal1Copy", + rightColumn: 24, + detachFromLayout: true, + widgetId: "k441huwm77", + topRow: 34, + bottomRow: 58, + parentRowSpace: 10, + canOutsideClickClose: true, + type: "MODAL_WIDGET", + canEscapeKeyClose: true, + version: 1, + parentId: "0", + shouldScrollContents: true, + isLoading: false, + parentColumnSpace: 17.21875, + size: "MODAL_SMALL", + leftColumn: 0, + children: ["ihxw5r23hd"], + renderMode: "CANVAS", + }, + { + widgetName: "Icon1Copy", + rightColumn: 64, + onClick: "{{closeModal('Modal1')}}", + color: "#040627", + iconName: "cross", + widgetId: "suhkuyfpk3", + topRow: 1, + bottomRow: 5, + isVisible: true, + type: "ICON_WIDGET", + version: 1, + parentId: "ihxw5r23hd", + isLoading: false, + leftColumn: 56, + iconSize: 24, + renderMode: "CANVAS", + parentColumnSpace: 2, + parentRowSpace: 3, + }, + { + widgetName: "Button1Copy", + rightColumn: 48, + onClick: "{{closeModal('Modal1')}}", + isDefaultClickDisabled: true, + widgetId: "twnxjwy3r1", + buttonStyle: "SECONDARY_BUTTON", + topRow: 16, + bottomRow: 20, + isVisible: true, + type: "BUTTON_WIDGET", + version: 1, + parentId: "ihxw5r23hd", + isLoading: false, + dynamicTriggerPathList: [ + { + key: "onClick", + }, + ], + leftColumn: 36, + dynamicBindingPathList: [], + text: "Cancel", + isDisabled: false, + renderMode: "CANVAS", + parentColumnSpace: 2, + parentRowSpace: 3, + }, + ], + ); + expect(result["suhkuyfpk3"].onClick).toStrictEqual( + "{{closeModal('Modal1Copy')}}", + ); + expect(result["twnxjwy3r1"].onClick).toStrictEqual( + "{{closeModal('Modal1Copy')}}", + ); + }); }); diff --git a/app/client/src/sagas/WidgetOperationUtils.ts b/app/client/src/sagas/WidgetOperationUtils.ts index 8a12124c9d..a4e477b5e3 100644 --- a/app/client/src/sagas/WidgetOperationUtils.ts +++ b/app/client/src/sagas/WidgetOperationUtils.ts @@ -2,7 +2,7 @@ import { MAIN_CONTAINER_WIDGET_ID, WidgetTypes, } from "constants/WidgetConstants"; -import { cloneDeep, get, isString } from "lodash"; +import { cloneDeep, get, isString, filter, set } from "lodash"; import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsReducer"; import { getDynamicBindings } from "utils/DynamicBindingUtils"; @@ -169,6 +169,28 @@ export const handleSpecificCasesWhilePasting = ( }); widgets[widget.widgetId] = widget; + } else if (widget.type === WidgetTypes.MODAL_WIDGET) { + // if Modal is being coppied handle all onClose action rename + const oldWidgetName = Object.keys(widgetNameMap).find( + (key) => widgetNameMap[key] === widget.widgetName, + ); + // get all the button, icon widgets + const copiedBtnIcnWidgets = filter( + newWidgetList, + (copyWidget) => + copyWidget.type === "BUTTON_WIDGET" || + copyWidget.type === "ICON_WIDGET", + ); + // replace oldName with new one if any of this widget have onClick action for old modal + copiedBtnIcnWidgets.map((copyWidget) => { + if (copyWidget.onClick) { + const newOnClick = widgets[copyWidget.widgetId].onClick.replace( + oldWidgetName, + widget.widgetName, + ); + set(widgets[copyWidget.widgetId], "onClick", newOnClick); + } + }); } widgets = handleIfParentIsListWidgetWhilePasting(widget, widgets);