From a9b67245fb764ff789a765b803b663c2137771f1 Mon Sep 17 00:00:00 2001
From: Sherfin Shamsudeen <sherfin94@gmail.com>
Date: Wed, 25 Aug 2021 13:23:52 +0530
Subject: [PATCH] Add action that closes a specified modal (#584)

* Add action that closes a specified modal

* Use EventManager instead of EventSelector for close-modal action

* Return auto-resolving promises from modal show/close action in appUtils.js
---
 frontend/src/Editor/ActionTypes.js            |  7 +++
 .../src/Editor/Inspector/EventManager.jsx     | 20 +++++++
 .../src/Editor/Inspector/EventSelector.jsx    | 16 ++++++
 frontend/src/_helpers/appUtils.js             | 54 +++++++++----------
 4 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/frontend/src/Editor/ActionTypes.js b/frontend/src/Editor/ActionTypes.js
index ff531764e2..c762af2275 100644
--- a/frontend/src/Editor/ActionTypes.js
+++ b/frontend/src/Editor/ActionTypes.js
@@ -34,6 +34,13 @@ export const ActionTypes = [
       { name: 'modal', type: 'text', default: '' }
     ]
   },
+  {
+    name: 'Close Modal',
+    id: 'close-modal',
+    options: [
+      { name: 'modal', type: 'text', default: '' }
+    ]
+  },
   {
     name: 'Copy to clipboard',
     id: 'copy-to-clipboard',
diff --git a/frontend/src/Editor/Inspector/EventManager.jsx b/frontend/src/Editor/Inspector/EventManager.jsx
index 2b6e95e223..5ba3c2eb59 100644
--- a/frontend/src/Editor/Inspector/EventManager.jsx
+++ b/frontend/src/Editor/Inspector/EventManager.jsx
@@ -188,6 +188,26 @@ export const EventManager = ({
                 </div>
               )}
 
+              {event.actionId === 'close-modal' && (
+                <div className="row">
+                  <div className="col-3 p-2">
+                  Modal
+                  </div>
+                  <div className="col-9">
+                    <SelectSearch
+                      options={getModalOptions()}
+                      value={event.model}
+                      search={true}
+                      onChange={(value) => {
+                        handlerChanged(index, 'modal', value);
+                      }}
+                      filterOptions={fuzzySearch}
+                      placeholder="Select.."
+                    />
+                  </div>
+                </div>
+              )}
+
               {event.actionId === 'copy-to-clipboard' && (
                 <div className="p-1">
                   <label className="form-label mt-1">Text</label>
diff --git a/frontend/src/Editor/Inspector/EventSelector.jsx b/frontend/src/Editor/Inspector/EventSelector.jsx
index 394aeb38dd..9afa21c753 100644
--- a/frontend/src/Editor/Inspector/EventSelector.jsx
+++ b/frontend/src/Editor/Inspector/EventSelector.jsx
@@ -156,6 +156,22 @@ export const EventSelector = ({
                 </div>
               )}
 
+              {definition.actionId === 'close-modal' && (
+                <div className="p-1">
+                  <label className="form-label mt-1">Modal</label>
+                  <SelectSearch
+                    options={getModalOptions()}
+                    value={definition.options.model}
+                    search={true}
+                    onChange={(value) => {
+                      eventOptionUpdated(param, 'modal', value, extraData);
+                    }}
+                    filterOptions={fuzzySearch}
+                    placeholder="Select.."
+                  />
+                </div>
+              )}
+
               {definition.actionId === 'copy-to-clipboard' && (
                 <div className="p-1">
                   <label className="form-label mt-1">Text</label>
diff --git a/frontend/src/_helpers/appUtils.js b/frontend/src/_helpers/appUtils.js
index e1abafdb16..5f6ef6d740 100644
--- a/frontend/src/_helpers/appUtils.js
+++ b/frontend/src/_helpers/appUtils.js
@@ -94,6 +94,29 @@ async function copyToClipboard(text) {
   }
 };
 
+function showModal(_ref, modalId, show) {
+  const modalMeta = _ref.state.appDefinition.components[modalId];
+
+  const newState = {
+    currentState: {
+      ..._ref.state.currentState,
+      components: {
+        ..._ref.state.currentState.components,
+        [modalMeta.component.name]: {
+          ..._ref.state.currentState.components[modalMeta.component.name],
+          show: show
+        }
+      }
+    }
+  }
+
+  _ref.setState(newState)
+
+  return new Promise(function (resolve, reject) {
+    resolve();
+  })
+}
+
 function executeAction(_ref, event, mode) {
   if (event) {
     if (event.actionId === 'show-alert') {
@@ -129,34 +152,11 @@ function executeAction(_ref, event, mode) {
       })
     }
 
-    if (event.actionId === 'run-query') {
-      const { queryId, queryName } = event;
-      return runQuery(_ref, queryId, queryName);
-    }
+    if (event.actionId === 'show-modal')
+      return showModal(_ref, event.modal, true)
 
-    if (event.actionId === 'show-modal') {
-      const modalId = event.modal;
-      const modalMeta = _ref.state.appDefinition.components[modalId];
-
-      const newState = {
-        currentState: { 
-          ..._ref.state.currentState,
-          components: {
-            ..._ref.state.currentState.components,
-            [modalMeta.component.name]: {
-              ..._ref.state.currentState.components[modalMeta.component.name],
-              show: true
-            }
-          }
-        }
-      }
-
-      _ref.setState(newState)
-
-      return new Promise(function (resolve, reject) {
-        resolve();
-      })
-    }
+    if (event.actionId === 'close-modal')
+      return showModal(_ref, event.modal, false)
 
     if (event.actionId === 'copy-to-clipboard') {
       const contentToCopy = resolveReferences(event.contentToCopy, _ref.state.currentState);