From 9516c9a6dba344057cbabb8c9ef34bae909498a0 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Wed, 29 Jun 2022 17:25:07 +0530 Subject: [PATCH] modal widget on paste fixes (#14627) --- .../ClientSideTests/Widgets/Modal_spec.js | 41 +++++++++++++++++++ app/client/src/sagas/WidgetOperationSagas.tsx | 26 ++++++------ app/client/src/sagas/WidgetOperationUtils.ts | 19 ++------- app/client/src/sagas/WidgetSelectionSagas.ts | 6 +++ 4 files changed, 64 insertions(+), 28 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Modal_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Modal_spec.js index 0b01d6c17c..7553475fa3 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Modal_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Modal_spec.js @@ -54,6 +54,7 @@ describe("Modal Widget Functionality", function() { cy.wait(1000); //make sure evaluated value disappears cy.get(widgets.modalCloseButton).click({ force: true }); + cy.get(".t--modal-widget").should("have.length", 0); cy.get("body").type(`{${modifierKey}}v`); @@ -61,6 +62,8 @@ describe("Modal Widget Functionality", function() { .eq(1) .children() .should("have.length", 2); + //make sure modalis open on paste + cy.get(".t--modal-widget").should("have.length", 1); }); it("5. should select modal when clicked on modal label", () => { @@ -86,4 +89,42 @@ describe("Modal Widget Functionality", function() { //verify the modal1 is selected cy.get(".t--property-pane-title").should("contain", "Modal1"); }); + + it("6. It should paste modal widget on main Container even when copied in group and paste when a container is selected", () => { + const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl"; + + cy.get(explorer.addWidget).click(); + //add an additional modal widget and a container widget + cy.dragAndDropToCanvas("modalwidget", { x: 300, y: 300 }); + cy.get(widgets.modalCloseButton).click({ force: true }); + cy.dragAndDropToCanvas("containerwidget", { x: 300, y: 300 }); + cy.get("#switcher--explorer").click(); + cy.get(".t--entity-name") + .contains("WIDGETS") + .click(); + + //select all widgets and copy + cy.get(`#div-selection-0`).click({ + force: true, + }); + cy.get("body").type(`{${modifierKey}}a`); + cy.get("body").type(`{${modifierKey}}c`); + + //select container widget + cy.get(`#div-selection-0`).click({ + force: true, + }); + cy.get(`.t--widget-containerwidget`).click({ + ctrlKey: true, + }); + + //paste + cy.get("body").type(`{${modifierKey}}v`); + + //verify that the two modal widget should have pasted on the main canvas + cy.get('.bp3-collapse-body > [step="0"]') + .eq(1) + .children() + .should("have.length", 6); + }); }); diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index ac4ec33227..51ddba8f5f 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -95,7 +95,6 @@ import { createWidgetCopy, getNextWidgetName, getParentWidgetIdForGrouping, - isCopiedModalWidget, purgeOrphanedDynamicPaths, getReflowedPositions, NewPastePositionVariables, @@ -1277,8 +1276,6 @@ function* pasteWidgetSaga( pastingIntoWidgetId, isThereACollision, )); - } else if (isCopiedModalWidget(copiedWidgetGroups, widgets)) { - pastingIntoWidgetId = MAIN_CONTAINER_WIDGET_ID; } if ( @@ -1452,6 +1449,11 @@ function* pasteWidgetSaga( // If it is the copied widget, update position properties if (widget.widgetId === widgetIdMap[copiedWidget.widgetId]) { + //when the widget is a modal widget, it has to paste on the main container + const pastingParentId = + widget.type === "MODAL_WIDGET" + ? MAIN_CONTAINER_WIDGET_ID + : pastingIntoWidgetId; const { bottomRow, leftColumn, @@ -1462,24 +1464,24 @@ function* pasteWidgetSaga( widget.topRow = topRow; widget.bottomRow = bottomRow; widget.rightColumn = rightColumn; - widget.parentId = pastingIntoWidgetId; + widget.parentId = pastingParentId; // Also, update the parent widget in the canvas widgets // to include this new copied widget's id in the parent's children let parentChildren = [widget.widgetId]; - const widgetChildren = widgets[pastingIntoWidgetId].children; + const widgetChildren = widgets[pastingParentId].children; if (widgetChildren && Array.isArray(widgetChildren)) { // Add the new child to existing children parentChildren = parentChildren.concat(widgetChildren); } const parentBottomRow = getParentBottomRowAfterAddingWidget( - widgets[pastingIntoWidgetId], + widgets[pastingParentId], widget, ); widgets = { ...widgets, - [pastingIntoWidgetId]: { - ...widgets[pastingIntoWidgetId], + [pastingParentId]: { + ...widgets[pastingParentId], bottomRow: Math.max(parentBottomRow, bottomMostRow || 0), children: parentChildren, }, @@ -1487,12 +1489,12 @@ function* pasteWidgetSaga( // If the copied widget's boundaries exceed the parent's // Make the parent scrollable if ( - widgets[pastingIntoWidgetId].bottomRow * + widgets[pastingParentId].bottomRow * widgets[widget.parentId].parentRowSpace <= - widget.bottomRow * widget.parentRowSpace + widget.bottomRow * widget.parentRowSpace && + !widget.detachFromLayout ) { - const parentOfPastingWidget = - widgets[pastingIntoWidgetId].parentId; + const parentOfPastingWidget = widgets[pastingParentId].parentId; if ( parentOfPastingWidget && widget.parentId !== MAIN_CONTAINER_WIDGET_ID diff --git a/app/client/src/sagas/WidgetOperationUtils.ts b/app/client/src/sagas/WidgetOperationUtils.ts index 1a278d87ac..85ef1e50d3 100644 --- a/app/client/src/sagas/WidgetOperationUtils.ts +++ b/app/client/src/sagas/WidgetOperationUtils.ts @@ -254,7 +254,8 @@ export const handleSpecificCasesWhilePasting = ( newWidgetList, (copyWidget) => copyWidget.type === "BUTTON_WIDGET" || - copyWidget.type === "ICON_WIDGET", + copyWidget.type === "ICON_WIDGET" || + copyWidget.type === "ICON_BUTTON_WIDGET", ); // replace oldName with new one if any of this widget have onClick action for old modal copiedBtnIcnWidgets.map((copyWidget) => { @@ -411,19 +412,6 @@ export const getParentWidgetIdForPasting = function*( return newWidgetParentId; }; -export const isCopiedModalWidget = function( - copiedWidgetGroups: CopiedWidgetGroup[], - widgets: CanvasWidgetsReduxState, -) { - if (copiedWidgetGroups.length !== 1) return false; - - const copiedWidget = widgets[copiedWidgetGroups[0].widgetId]; - - if (copiedWidget && copiedWidget.type === "MODAL_WIDGET") return true; - - return false; -}; - export const getSelectedWidgetIfPastingIntoListWidget = function( canvasWidgets: CanvasWidgetsReduxState, selectedWidget: FlattenedWidgetProps | undefined, @@ -444,8 +432,7 @@ export const getSelectedWidgetIfPastingIntoListWidget = function( // if any copiedWidget is a list widget, we will paste into the parent of list widget for (let i = 0; i < copiedWidgets.length; i++) { - const copiedWidgetId = copiedWidgets[i].widgetId; - const copiedWidget = canvasWidgets[copiedWidgetId]; + const copiedWidget = copiedWidgets[i].list[0]; if (copiedWidget?.type === "LIST_WIDGET") { return selectedWidget; diff --git a/app/client/src/sagas/WidgetSelectionSagas.ts b/app/client/src/sagas/WidgetSelectionSagas.ts index d176580e78..9bf3dc5859 100644 --- a/app/client/src/sagas/WidgetSelectionSagas.ts +++ b/app/client/src/sagas/WidgetSelectionSagas.ts @@ -33,6 +33,7 @@ import { getWidgetChildrenIds } from "./WidgetOperationUtils"; import { AppState } from "reducers"; import { checkIsDropTarget } from "components/designSystems/appsmith/PositionedContainer"; import WidgetFactory from "utils/WidgetFactory"; +import { showModal } from "actions/widgetActions"; const WidgetTypes = WidgetFactory.widgetTypes; // The following is computed to be used in the entity explorer // Every time a widget is selected, we need to expand widget entities @@ -302,6 +303,11 @@ function* selectMultipleWidgetsSaga( }); if (doesNotMatchParent) { return; + } else if ( + widgetIds.length === 1 && + allWidgets[widgetIds[0]]?.type === "MODAL_WIDGET" + ) { + yield put(showModal(widgetIds[0])); } else { yield put(selectWidgetAction()); yield put(selectMultipleWidgetsAction(widgetIds));