Feature: Modal Widget (#3092)

* Feature: Modal Widget(DIP) * Adding cypress tests.
appsmithorg · Feb 23, 2021 · d1822a9 · d1822a9
1 parent 0eab199
commit d1822a9
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 3 deletions.
diff --git a/app/client/cypress/fixtures/ModalDsl.json b/app/client/cypress/fixtures/ModalDsl.json
@@ -0,0 +1,129 @@
+
+{
+  "dsl": {
+      "widgetName": "MainContainer",
+      "backgroundColor": "none",
+      "rightColumn": 1224,
+      "snapColumns": 16,
+      "detachFromLayout": true,
+      "widgetId": "0",
+      "topRow": 0,
+      "bottomRow": 1280,
+      "containerStyle": "none",
+      "snapRows": 33,
+      "parentRowSpace": 1,
+      "type": "CANVAS_WIDGET",
+      "canExtend": true,
+      "version": 10,
+      "minHeight": 1292,
+      "parentColumnSpace": 1,
+      "dynamicBindingPathList": [],
+      "leftColumn": 0,
+      "children": [
+        {
+          "size": "MODAL_SMALL",
+          "canEscapeKeyClose": true,
+          "detachFromLayout": true,
+          "canOutsideClickClose": true,
+          "shouldScrollContents": true,
+          "widgetName": "Modal1",
+          "children": [
+            {
+              "isVisible": true,
+              "widgetName": "Canvas1",
+              "detachFromLayout": true,
+              "canExtend": true,
+              "isDisabled": false,
+              "shouldScrollContents": false,
+              "children": [
+                {
+                  "isVisible": true,
+                  "widgetName": "Icon1",
+                  "iconName": "cross",
+                  "iconSize": 24,
+                  "color": "#040627",
+                  "type": "ICON_WIDGET",
+                  "isLoading": false,
+                  "leftColumn": 14,
+                  "rightColumn": 16,
+                  "topRow": 0,
+                  "bottomRow": 1,
+                  "parentId": "yyyrxs383y",
+                  "widgetId": "kxdvolusyp",
+                  "onClick": "{{closeModal('Modal1')}}"
+                },
+                {
+                  "isVisible": true,
+                  "text": "Modal Title",
+                  "textStyle": "HEADING",
+                  "textAlign": "LEFT",
+                  "widgetName": "Text1",
+                  "type": "TEXT_WIDGET",
+                  "isLoading": false,
+                  "leftColumn": 0,
+                  "rightColumn": 10,
+                  "topRow": 0,
+                  "bottomRow": 1,
+                  "parentId": "yyyrxs383y",
+                  "widgetId": "3fugqdtg8g"
+                },
+                {
+                  "isVisible": true,
+                  "text": "Cancel",
+                  "buttonStyle": "SECONDARY_BUTTON",
+                  "widgetName": "Button1",
+                  "isDisabled": false,
+                  "isDefaultClickDisabled": true,
+                  "type": "BUTTON_WIDGET",
+                  "isLoading": false,
+                  "leftColumn": 9,
+                  "rightColumn": 12,
+                  "topRow": 4,
+                  "bottomRow": 5,
+                  "parentId": "yyyrxs383y",
+                  "widgetId": "6cjfbnjfa4"
+                },
+                {
+                  "isVisible": true,
+                  "text": "Confirm",
+                  "buttonStyle": "PRIMARY_BUTTON",
+                  "widgetName": "Button2",
+                  "isDisabled": false,
+                  "isDefaultClickDisabled": true,
+                  "type": "BUTTON_WIDGET",
+                  "isLoading": false,
+                  "leftColumn": 12,
+                  "rightColumn": 16,
+                  "topRow": 4,
+                  "bottomRow": 5,
+                  "parentId": "yyyrxs383y",
+                  "widgetId": "3tmnukkm7m"
+                }
+              ],
+              "minHeight": 240,
+              "type": "CANVAS_WIDGET",
+              "isLoading": false,
+              "parentColumnSpace": 1,
+              "parentRowSpace": 1,
+              "leftColumn": 0,
+              "rightColumn": 444,
+              "topRow": 0,
+              "bottomRow": 240,
+              "parentId": "287u6pannr",
+              "widgetId": "yyyrxs383y"
+            }
+          ],
+          "type": "MODAL_WIDGET",
+          "isLoading": false,
+          "parentColumnSpace": 74,
+          "parentRowSpace": 40,
+          "leftColumn": 5,
+          "rightColumn": 11,
+          "topRow": 15,
+          "bottomRow": 21,
+          "parentId": "0",
+          "widgetId": "287u6pannr"
+        }
+      ]
+  }
+}
diff --git a/app/client/cypress/integration/Smoke_TestSuite/DisplayWidgets/Modal_spec.js b/app/client/cypress/integration/Smoke_TestSuite/DisplayWidgets/Modal_spec.js
@@ -0,0 +1,25 @@
+const dsl = require("../../../fixtures/ModalDsl.json");
+const publishPage = require("../../../locators/publishWidgetspage.json");
+const explorer = require("../../../locators/explorerlocators.json");
+
+describe("Modal Widget Functionality", function() {
+  beforeEach(() => {
+    cy.addDsl(dsl);
+  });
+
+  it("Add new Modal", () => {
+    cy.get(explorer.addWidget).click();
+    cy.dragAndDropToCanvas("modalwidget", { x: 300, y: -300 });
+    cy.get(".t--modal-widget").should("exist");
+  });
+
+  it("Open Existing Modal from created Widgets list", () => {
+    cy.get(".bp3-icon-caret-right ~ .t--entity-name:contains(Widgets)").click({
+      multiple: true,
+    });
+    cy.get(".bp3-icon-caret-right ~ .t--entity-name:contains(Modal1)").click({
+      multiple: true,
+    });
+    cy.get(".t--modal-widget").should("exist");
+  });
+});
diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx
@@ -47,6 +47,7 @@ export const ReduxActionTypes: { [key: string]: string } = {
   SAVE_PAGE_SUCCESS: "SAVE_PAGE_SUCCESS",
   UPDATE_LAYOUT: "UPDATE_LAYOUT",
   WIDGET_ADD_CHILD: "WIDGET_ADD_CHILD",
+  WIDGET_CHILD_ADDED: "WIDGET_CHILD_ADDED",
   WIDGET_REMOVE_CHILD: "WIDGET_REMOVE_CHILD",
   WIDGET_MOVE: "WIDGET_MOVE",
   WIDGET_RESIZE: "WIDGET_RESIZE",

diff --git a/app/client/src/mockResponses/WidgetConfigResponse.tsx b/app/client/src/mockResponses/WidgetConfigResponse.tsx
@@ -226,8 +226,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
       },
     },
     MODAL_WIDGET: {
-      rows: 456,
-      columns: 456,
+      rows: 6,
+      columns: 6,
       size: "MODAL_SMALL",
       canEscapeKeyClose: true,
       detachFromLayout: true,

diff --git a/app/client/src/mockResponses/WidgetSidebarResponse.tsx b/app/client/src/mockResponses/WidgetSidebarResponse.tsx
@@ -93,6 +93,11 @@ const WidgetSidebarResponse: WidgetCardProps[] = [
     widgetCardName: "Video",
     key: generateReactKey(),
   },
+  {
+    type: "MODAL_WIDGET",
+    widgetCardName: "Modal",
+    key: generateReactKey(),
+  },
 ];
 
 export default WidgetSidebarResponse;
diff --git a/app/client/src/sagas/ModalSagas.ts b/app/client/src/sagas/ModalSagas.ts
@@ -89,6 +89,17 @@ export function* showModalByNameSaga(
   }
 }
 
+export function* showIfModalSaga(
+  action: ReduxAction<{ widgetId: string; type: string }>,
+) {
+  if (action.payload.type === "MODAL_WIDGET") {
+    yield put({
+      type: ReduxActionTypes.SHOW_MODAL,
+      payload: { modalId: action.payload.widgetId },
+    });
+  }
+}
+
 export function* showModalSaga(action: ReduxAction<{ modalId: string }>) {
   // First we close the currently open modals (if any)
   // Notice the empty payload.
@@ -184,5 +195,6 @@ export default function* modalSagas() {
     takeLatest(ReduxActionTypes.CREATE_MODAL_INIT, createModalSaga),
     takeLatest(ReduxActionTypes.SHOW_MODAL, showModalSaga),
     takeLatest(ReduxActionTypes.SHOW_MODAL_BY_NAME, showModalByNameSaga),
+    takeLatest(ReduxActionTypes.WIDGET_CHILD_ADDED, showIfModalSaga),
   ]);
 }
diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx
@@ -239,7 +239,6 @@ export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
     const start = performance.now();
     Toaster.clear();
     const { widgetId } = addChildAction.payload;
-
     // Get the current parent widget whose child will be the new widget.
     const stateParent: FlattenedWidgetProps = yield select(getWidget, widgetId);
     // const parent = Object.assign({}, stateParent);
@@ -262,6 +261,13 @@ export function* addChildSaga(addChildAction: ReduxAction<WidgetAddChild>) {
 
     widgets[parent.widgetId] = parent;
     log.debug("add child computations took", performance.now() - start, "ms");
+    yield put({
+      type: ReduxActionTypes.WIDGET_CHILD_ADDED,
+      payload: {
+        widgetId: childWidgetPayload.widgetId,
+        type: addChildAction.payload.type,
+      },
+    });
     yield put(updateAndSaveLayout(widgets));
   } catch (error) {
     yield put({

diff --git a/app/client/src/utils/WidgetRegistry.tsx b/app/client/src/utils/WidgetRegistry.tsx
@@ -435,5 +435,20 @@ export default class WidgetBuilderRegistry {
       SkeletonWidget.getDefaultPropertiesMap(),
       SkeletonWidget.getMetaPropertiesMap(),
     );
+
+    WidgetFactory.registerWidgetBuilder(
+      WidgetTypes.MODAL_WIDGET,
+      {
+        buildWidget(widgetData: ModalWidgetProps): JSX.Element {
+          return <ProfiledModalWidget {...widgetData} />;
+        },
+      },
+      ModalWidget.getPropertyValidationMap(),
+      ModalWidget.getDerivedPropertiesMap(),
+      ModalWidget.getTriggerPropertyMap(),
+      ModalWidget.getDefaultPropertiesMap(),
+      ModalWidget.getMetaPropertiesMap(),
+      ModalWidget.getPropertyPaneConfig(),
+    );
   }
 }