modal widget on paste fixes (#14627)

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);
+  });
 });

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

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;

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