Use explicit actions for opening and closing side panels, and automatically close side panels when using form blocks

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>

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>

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"

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"
     }
   ]

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: {

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 = {