From ce453fd2597d431c0d1559ff4e386c9d913f9f76 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Thu, 28 Oct 2021 07:41:19 +0530 Subject: [PATCH] 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 --- .../DisplayWidgets/Modal_spec.js | 20 +++++++++++++++++++ app/client/src/constants/Layers.tsx | 2 +- app/client/src/sagas/ModalSagas.ts | 5 +++++ app/client/src/sagas/WidgetOperationSagas.tsx | 3 +++ app/client/src/sagas/WidgetOperationUtils.ts | 13 ++++++++++++ .../src/widgets/ModalWidget/widget/index.tsx | 14 ++++++------- 6 files changed, 48 insertions(+), 9 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js index 9c2a9e6461..9880629534 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js +++ b/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); + }); }); diff --git a/app/client/src/constants/Layers.tsx b/app/client/src/constants/Layers.tsx index 5cccb2f860..e885a77061 100644 --- a/app/client/src/constants/Layers.tsx +++ b/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 diff --git a/app/client/src/sagas/ModalSagas.ts b/app/client/src/sagas/ModalSagas.ts index 12c83dd8dd..84985507fa 100644 --- a/app/client/src/sagas/ModalSagas.ts +++ b/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); } diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index d78409a8ff..e7f25ee31a 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/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 diff --git a/app/client/src/sagas/WidgetOperationUtils.ts b/app/client/src/sagas/WidgetOperationUtils.ts index a95c2f11e5..3dca05a28d 100644 --- a/app/client/src/sagas/WidgetOperationUtils.ts +++ b/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, diff --git a/app/client/src/widgets/ModalWidget/widget/index.tsx b/app/client/src/widgets/ModalWidget/widget/index.tsx index b3681bfef3..aaca9f8190 100644 --- a/app/client/src/widgets/ModalWidget/widget/index.tsx +++ b/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 { 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 { }, }); } + 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) => {