fix: Copied modal close and mobile modal bug fix (#8497)

* fix for copied widget

* copied modal paste on maincontainer fix

* mobile modal fix

* added logic to paste modal widget on the main container only

* added check only for modal Widget close since the saga seems to be shared for other scenarios

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js

@@ -33,4 +33,24 @@ describe("Modal Widget Functionality", function() {
 
     cy.get(commonlocators.toastmsg).contains("test");
   });
+
+  it("should paste modal widgets with main container as parentId", () => {
+    const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl";
+
+    cy.SearchEntityandOpen("Modal1");
+    cy.wait(200);
+    cy.get("body").type(`{${modifierKey}}c`);
+    cy.get(commonlocators.toastBody)
+      .first()
+      .contains("Copied");
+
+    cy.get(widgets.iconWidgetBtn).click({ force: true });
+
+    cy.get("body").type(`{${modifierKey}}v`);
+
+    cy.get('.bp3-collapse-body > [step="2"]')
+      .first()
+      .children()
+      .should("have.length", 2);
+  });
 });

app/client/src/constants/Layers.tsx

@@ -23,7 +23,7 @@ export const Layers = {
   // All Widgets Parent layer
   positionedWidget: Indices.Layer1,
   // Modal needs to higher than other widgets.
-  modalWidget: Indices.Layer2,
+  modalWidget: Indices.Layer3,
   // Dropdown portaled to the canvas
   dropdownWidget: Indices.Layer2,
   // dropdown portaled to Modal Container with higher index than Overlay

app/client/src/sagas/ModalSagas.ts

@@ -45,6 +45,7 @@ import AppsmithConsole from "utils/AppsmithConsole";
 
 import WidgetFactory from "utils/WidgetFactory";
 import { Toaster } from "components/ads/Toast";
+import { deselectAllInitAction } from "actions/widgetSelectionActions";
 const WidgetTypes = WidgetFactory.widgetTypes;
 
 export function* createModalSaga(action: ReduxAction<{ modalName: string }>) {
@@ -201,6 +202,10 @@ export function* closeModalSaga(
         ),
       );
     }
+    if (modalName) {
+      yield put(deselectAllInitAction());
+      yield put(focusWidget(MAIN_CONTAINER_WIDGET_ID));
+    }
   } catch (error) {
     log.error(error);
   }

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -94,6 +94,7 @@ import {
   createWidgetCopy,
   getNextWidgetName,
   getParentWidgetIdForGrouping,
+  isCopiedModalWidget,
 } from "./WidgetOperationUtils";
 import { getSelectedWidgets } from "selectors/ui";
 import { widgetSelectionSagas } from "./WidgetSelectionSagas";
@@ -747,6 +748,8 @@ function* pasteWidgetSaga(action: ReduxAction<{ groupWidgets: boolean }>) {
       copiedWidgetGroups,
       pastingIntoWidgetId,
     );
+  } else if (isCopiedModalWidget(copiedWidgetGroups, widgets)) {
+    pastingIntoWidgetId = MAIN_CONTAINER_WIDGET_ID;
   }
 
   // to avoid invoking old copied widgets

app/client/src/sagas/WidgetOperationUtils.ts

@@ -312,6 +312,19 @@ 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 checkIfPastingIntoListWidget = function(
   canvasWidgets: CanvasWidgetsReduxState,
   selectedWidget: FlattenedWidgetProps | undefined,

app/client/src/widgets/ModalWidget/widget/index.tsx

@@ -19,6 +19,7 @@ import { AppState } from "reducers";
 import { getWidget } from "sagas/selectors";
 import { commentModeSelector } from "selectors/commentsSelectors";
 import { snipingModeSelector } from "selectors/editorSelectors";
+import { deselectAllInitAction } from "actions/widgetSelectionActions";
 
 const minSize = 100;
 
@@ -44,14 +45,6 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
             isBindProperty: false,
             isTriggerProperty: false,
           },
-          {
-            propertyName: "canOutsideClickClose",
-            label: "Quick Dismiss",
-            helpText: "Allows dismissing the modal when user taps outside",
-            controlType: "SWITCH",
-            isBindProperty: false,
-            isTriggerProperty: false,
-          },
         ],
       },
       {
@@ -108,6 +101,7 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
         },
       });
     }
+    this.props.deselectAllWidgets();
   };
 
   onModalResize = (dimensions: UIElementSize) => {
@@ -230,6 +224,7 @@ export interface ModalWidgetProps extends WidgetProps {
   width: number;
   height: number;
   showPropertyPane: (widgetId?: string) => void;
+  deselectAllWidgets: () => void;
   canEscapeKeyClose?: boolean;
   shouldScrollContents?: boolean;
   size: string;
@@ -253,6 +248,9 @@ const mapDispatchToProps = (dispatch: any) => ({
       payload: { widgetId, callForDragOrResize, force },
     });
   },
+  deselectAllWidgets: () => {
+    dispatch(deselectAllInitAction());
+  },
 });
 
 const mapStateToProps = (state: AppState) => {