From aa81e0451a3ab98fd725093c47ee657c43bec098 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Nov 2022 15:02:57 +0000
Subject: [PATCH] Add button action for showing/hiding side panels

---
 .../src/builderStore/store/frontend.js        |  1 +
 .../actions/UpdateSidePanel.svelte            | 63 +++++++++++++++++++
 .../ButtonActionEditor/actions/index.js       |  1 +
 .../controls/ButtonActionEditor/index.js      |  1 +
 .../controls/ButtonActionEditor/manifest.json |  6 ++
 packages/client/manifest.json                 |  3 +-
 .../src/components/app/SidePanel.svelte       |  6 --
 packages/client/src/utils/buttonActions.js    | 11 ++++
 8 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 1291f81294..4e8c480772 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/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,
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/UpdateSidePanel.svelte
new file mode 100644
index 0000000000..1e8a5d6a9e
--- /dev/null
+++ b/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>
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 1ecd8f474a..842df25b0d 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,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"
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js
index 8fc7563526..ea6cc4ed37 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/index.js
+++ b/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.
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 5d11a27636..40ef31ff40 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
+++ b/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"
     }
   ]
 }
\ No newline at end of file
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 4e4e84c9f3..edd2b9804d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -9,7 +9,8 @@
     "messagePassing": true,
     "rowSelection": true,
     "continueIfAction": true,
-    "showNotificationAction": true
+    "showNotificationAction": true,
+    "sidePanel": true
   },
   "layout": {
     "name": "Layout",
diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte
index 655b3d5d3b..b181c70c8d 100644
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/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 {
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 6fcef37182..e0bd399835 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/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 = {