Add button action for showing/hiding side panels

packages/builder/src/builderStore/store/frontend.js

@@ -40,6 +40,7 @@ const INITIAL_FRONTEND_STATE = {
     messagePassing: false,
     continueIfAction: false,
     showNotificationAction: false,
+    sidePanel: false,
   },
   errors: [],
   hasAppPackage: false,

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte

@@ -0,0 +1,63 @@
+<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 => {
+    const sidePanelComponents = findAllMatchingComponents(
+      screen.props,
+      component => component._component.endsWith("/sidepanel")
+    )
+    return sidePanelComponents.map(sidePanel => ({
+      label: sidePanel._instanceName,
+      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}
+</div>
+
+<style>
+  .root {
+    display: grid;
+    column-gap: var(--spacing-l);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 60px 1fr;
+    align-items: center;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+</style>

packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js

@@ -16,3 +16,4 @@ 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"

packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js

@@ -1,6 +1,7 @@
 import * as ActionComponents from "./actions"
 import { get } from "svelte/store"
 import { store } from "builderStore"
+// @ts-ignore
 import ActionDefinitions from "./manifest.json"
 
 // Defines which actions are available to configure in the front end.

packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json

@@ -116,6 +116,12 @@
       "type": "application",
       "component": "ShowNotification",
       "dependsOnFeature": "showNotificationAction"
+    },
+    {
+      "name": "Update Side Panel",
+      "type": "application",
+      "component": "UpdateSidePanel",
+      "dependsOnFeature": "sidePanel"
     }
   ]
 }

packages/client/manifest.json

@@ -9,7 +9,8 @@
     "messagePassing": true,
     "rowSelection": true,
     "continueIfAction": true,
-    "showNotificationAction": true
+    "showNotificationAction": true,
+    "sidePanel": true
   },
   "layout": {
     "name": "Layout",

packages/client/src/components/app/SidePanel.svelte

@@ -43,12 +43,6 @@
 >
   <slot />
 </div>
-<div>
-  <button on:click={() => sidePanelStore.actions.open($component.id)}>
-    open
-  </button>
-  <button on:click={sidePanelStore.actions.close}>close</button>
-</div>
 
 <style>
   .side-panel {

packages/client/src/utils/buttonActions.js

@@ -10,6 +10,7 @@ import {
   dataSourceStore,
   uploadStore,
   rowSelectionStore,
+  sidePanelStore,
 } from "stores"
 import { API } from "api"
 import { ActionTypes } from "constants"
@@ -312,6 +313,15 @@ 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) {
+    sidePanelStore.actions.open(id)
+  }
+}
+
 const handlerMap = {
   ["Save Row"]: saveRowHandler,
   ["Duplicate Row"]: duplicateRowHandler,
@@ -331,6 +341,7 @@ const handlerMap = {
   ["Export Data"]: exportDataHandler,
   ["Continue if / Stop if"]: continueIfHandler,
   ["Show Notification"]: showNotificationHandler,
+  ["Update Side Panel"]: UpdateSidePanelHandler,
 }
 
 const confirmTextMap = {