From e37027f8088d1ce3112e9aaa2625da6b9d2f83d0 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 15 Nov 2022 11:54:20 +0000
Subject: [PATCH] Use explicit actions for opening and closing side panels, and
 automatically close side panels when using form blocks

---
 .../actions/CloseSidePanel.svelte             |  8 +++++
 ...eSidePanel.svelte => OpenSidePanel.svelte} | 30 ++-----------------
 .../ButtonActionEditor/actions/index.js       |  3 +-
 .../controls/ButtonActionEditor/manifest.json | 10 +++++--
 .../components/app/blocks/FormBlock.svelte    |  6 ++++
 packages/client/src/utils/buttonActions.js    | 15 ++++++----
 6 files changed, 35 insertions(+), 37 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseSidePanel.svelte
 rename packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/{UpdateSidePanel.svelte => OpenSidePanel.svelte} (60%)

diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseSidePanel.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseSidePanel.svelte
new file mode 100644
index 0000000000..ed0ca2c72b
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/CloseSidePanel.svelte
@@ -0,0 +1,8 @@
+<div class="root">This action doesn't require any settings.</div>
+
+<style>
+  .root {
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte
similarity index 60%
rename from packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte
rename to packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte
index 1e8a5d6a9e..eb0c7b4db6 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/OpenSidePanel.svelte
@@ -1,22 +1,10 @@
 <script>
   import { Select, Label } from "@budibase/bbui"
-  import { onMount } from "svelte"
   import { selectedScreen } from "builderStore"
   import { findAllMatchingComponents } from "builderStore/componentUtils"
 
   export let parameters
 
-  const typeOptions = [
-    {
-      label: "Show side panel",
-      value: "show",
-    },
-    {
-      label: "Hide side panel",
-      value: "hide",
-    },
-  ]
-
   $: sidePanelOptions = getSidePanelOptions($selectedScreen)
 
   const getSidePanelOptions = screen => {
@@ -29,25 +17,11 @@
       value: sidePanel._id,
     }))
   }
-
-  onMount(() => {
-    if (!parameters.type) {
-      parameters.type = "show"
-    }
-  })
 </script>
 
 <div class="root">
-  <Label small>Type</Label>
-  <Select
-    placeholder={null}
-    bind:value={parameters.type}
-    options={typeOptions}
-  />
-  {#if parameters.type === "show"}
-    <Label small>Side Panel</Label>
-    <Select bind:value={parameters.id} options={sidePanelOptions} />
-  {/if}
+  <Label small>Side Panel</Label>
+  <Select bind:value={parameters.id} options={sidePanelOptions} />
 </div>
 
 <style>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
index 842df25b0d..4a9640312d 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
@@ -16,4 +16,5 @@ export { default as ExportData } from "./ExportData.svelte"
 export { default as ContinueIf } from "./ContinueIf.svelte"
 export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
 export { default as ShowNotification } from "./ShowNotification.svelte"
-export { default as UpdateSidePanel } from "./UpdateSidePanel.svelte"
+export { default as OpenSidePanel } from "./OpenSidePanel.svelte"
+export { default as CloseSidePanel } from "./CloseSidePanel.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
index 40ef31ff40..521ad85f0a 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
@@ -118,9 +118,15 @@
       "dependsOnFeature": "showNotificationAction"
     },
     {
-      "name": "Update Side Panel",
+      "name": "Open Side Panel",
       "type": "application",
-      "component": "UpdateSidePanel",
+      "component": "OpenSidePanel",
+      "dependsOnFeature": "sidePanel"
+    },
+    {
+      "name": "Close Side Panel",
+      "type": "application",
+      "component": "CloseSidePanel",
       "dependsOnFeature": "sidePanel"
     }
   ]
diff --git a/packages/client/src/components/app/blocks/FormBlock.svelte b/packages/client/src/components/app/blocks/FormBlock.svelte
index 3311ddd7bb..315333f09f 100644
--- a/packages/client/src/components/app/blocks/FormBlock.svelte
+++ b/packages/client/src/components/app/blocks/FormBlock.svelte
@@ -49,6 +49,9 @@
     {
       "##eventHandlerType": "Close Screen Modal",
     },
+    {
+      "##eventHandlerType": "Close Side Panel",
+    },
     {
       "##eventHandlerType": "Navigate To",
       parameters: {
@@ -69,6 +72,9 @@
     {
       "##eventHandlerType": "Close Screen Modal",
     },
+    {
+      "##eventHandlerType": "Close Side Panel",
+    },
     {
       "##eventHandlerType": "Navigate To",
       parameters: {
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index e0bd399835..ffdea28c58 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -313,15 +313,17 @@ const showNotificationHandler = action => {
   notificationStore.actions[type]?.(message, autoDismiss)
 }
 
-const UpdateSidePanelHandler = action => {
-  const { type, id } = action.parameters
-  if (type === "hide") {
-    sidePanelStore.actions.close()
-  } else if (id) {
+const OpenSidePanelHandler = action => {
+  const { id } = action.parameters
+  if (id) {
     sidePanelStore.actions.open(id)
   }
 }
 
+const CloseSidePanelHandler = () => {
+  sidePanelStore.actions.close()
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Duplicate Row"]: duplicateRowHandler,
@@ -341,7 +343,8 @@ const handlerMap = {
   ["Export Data"]: exportDataHandler,
   ["Continue if / Stop if"]: continueIfHandler,
   ["Show Notification"]: showNotificationHandler,
-  ["Update Side Panel"]: UpdateSidePanelHandler,
+  ["Open Side Panel"]: OpenSidePanelHandler,
+  ["Close Side Panel"]: CloseSidePanelHandler,
 }
 
 const confirmTextMap = {