From 8b941df5ff07afd2d0b2c0fdbbede01e71262a8f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 14 Nov 2022 15:47:14 +0000
Subject: [PATCH] Update tables to use button actions rather than link settings

---
 packages/bbui/src/Icon/Icon.svelte            |  2 +-
 packages/client/manifest.json                 | 28 ++++-----------
 .../client/src/components/app/Layout.svelte   |  9 +++--
 .../src/components/app/SidePanel.svelte       |  1 +
 .../src/components/app/table/Table.svelte     | 34 ++++++++++++-------
 5 files changed, 36 insertions(+), 38 deletions(-)

diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index f2cae14f0b..8290acd7cc 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -64,7 +64,7 @@
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
   }
   svg.hoverable:hover {
-    color: var(--spectrum-alias-icon-color-selected-hover);
+    color: var(--spectrum-alias-icon-color-selected-hover) !important;
     cursor: pointer;
   }
 
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index edd2b9804d..3808447cdb 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3786,29 +3786,13 @@
         "info": "Row selection is only compatible with internal or SQL tables"
       },
       {
-        "type": "boolean",
-        "label": "Link table rows",
-        "key": "linkRows"
-      },
-      {
-        "type": "boolean",
-        "label": "Open link screens in modal",
-        "key": "linkPeek"
-      },
-      {
-        "type": "url",
-        "label": "Link screen",
-        "key": "linkURL"
-      },
-      {
-        "section": true,
-        "name": "Advanced",
-        "settings": [
+        "type": "event",
+        "label": "On row click",
+        "key": "onClick",
+        "context": [
           {
-            "type": "field",
-            "label": "ID column for linking (appended to URL)",
-            "key": "linkColumn",
-            "placeholder": "Default"
+            "label": "Clicked row",
+            "key": "row"
           }
         ]
       }
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index eb6e922a1f..03a0d33f56 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -249,7 +249,12 @@
   </div>
   <div id="side-panel-container" class:open={$sidePanelStore.open}>
     <div class="side-panel-header">
-      <Icon name="Close" hoverable on:click={sidePanelStore.actions.close} />
+      <Icon
+        color="var(--spectrum-global-color-gray-600)"
+        name="RailRightClose"
+        hoverable
+        on:click={sidePanelStore.actions.close}
+      />
     </div>
   </div>
 </div>
@@ -345,7 +350,7 @@
     margin-right: -410px;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-xl);
+    gap: 30px;
     overflow-y: auto;
     border-left: 1px solid var(--spectrum-global-color-gray-300);
   }
diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte
index b181c70c8d..77e853725f 100644
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/packages/client/src/components/app/SidePanel.svelte
@@ -46,6 +46,7 @@
 
 <style>
   .side-panel {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte
index f56d91d7c8..7d1c7413e2 100644
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@@ -11,12 +11,15 @@
   export let rowCount
   export let quiet
   export let size
+  export let allowSelectRows
+  export let compact
+  export let onClick
+
+  // Legacy settings, still supported for old apps
   export let linkRows
   export let linkURL
   export let linkColumn
   export let linkPeek
-  export let allowSelectRows
-  export let compact
 
   const component = getContext("component")
   const { styleable, getAction, ActionTypes, routeStore, rowSelectionStore } =
@@ -28,7 +31,9 @@
       component: SlotRenderer,
     },
   ]
+
   let selectedRows = []
+
   $: hasChildren = $component.children
   $: loading = dataProvider?.loading ?? false
   $: data = dataProvider?.rows || []
@@ -40,7 +45,6 @@
     ActionTypes.SetDataProviderSorting
   )
   $: table = dataProvider?.datasource?.type === "table"
-
   $: {
     rowSelectionStore.actions.updateSelection(
       $component.id,
@@ -118,17 +122,21 @@
     })
   }
 
-  const onClick = e => {
-    if (!linkRows || !linkURL) {
-      return
+  const handleClick = e => {
+    if (onClick) {
+      onClick({ row: e.detail })
     }
-    const col = linkColumn || "_id"
-    const id = e.detail?.[col]
-    if (!id) {
-      return
+
+    // Handle legacy settings
+    else if (linkRows && linkURL) {
+      const col = linkColumn || "_id"
+      const id = e.detail?.[col]
+      if (!id) {
+        return
+      }
+      const split = linkURL.split("/:")
+      routeStore.actions.navigate(`${split[0]}/${id}`, linkPeek)
     }
-    const split = linkURL.split("/:")
-    routeStore.actions.navigate(`${split[0]}/${id}`, linkPeek)
   }
 
   onDestroy(() => {
@@ -153,7 +161,7 @@
     disableSorting
     autoSortColumns={!columns?.length}
     on:sort={onSort}
-    on:click={onClick}
+    on:click={handleClick}
   >
     <slot />
   </Table>