From faa8fad0b5af83a3a405ff3bd2dceedbcf911799 Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Wed, 14 Feb 2024 10:05:14 +0000
Subject: [PATCH] Add Clear Row Selection action (#13002)

* Add Clear Row Selection action

* update account-portal

* Refactor to use contextActionHandler

* Remove unused code
---
 .../actions/ClearRowSelection.svelte          | 54 +++++++++++++++++++
 .../ButtonActionEditor/actions/index.js       |  1 +
 .../controls/ButtonActionEditor/manifest.json |  5 ++
 packages/client/manifest.json                 |  1 +
 .../src/components/app/table/Table.svelte     |  9 +++-
 packages/client/src/constants.js              |  1 +
 packages/client/src/utils/buttonActions.js    | 10 ++--
 7 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearRowSelection.svelte
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearRowSelection.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearRowSelection.svelte
new file mode 100644
index 0000000000..630d7dbc0b
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/ClearRowSelection.svelte
@@ -0,0 +1,54 @@
+<script>
+  import { Label, Select, Body } from "@budibase/bbui"
+  import { findAllMatchingComponents } from "builderStore/componentUtils"
+  import { currentAsset } from "builderStore"
+
+  export let parameters
+
+  $: tables = findAllMatchingComponents($currentAsset?.props, component =>
+    component._component.endsWith("table")
+  ).map(table => ({
+    label: table._instanceName,
+    value: table._id,
+  }))
+  $: tableBlocks = findAllMatchingComponents($currentAsset?.props, component =>
+    component._component.endsWith("tableblock")
+  ).map(block => ({
+    label: block._instanceName,
+    value: `${block._id}-table`,
+  }))
+  $: componentOptions = tables.concat(tableBlocks)
+</script>
+
+<div class="root">
+  <Body size="S">Clear the row selection from the selected table.</Body>
+  <div class="params">
+    <Label small>Table</Label>
+    <Select bind:value={parameters.componentId} options={componentOptions} />
+  </div>
+</div>
+
+<style>
+  .root {
+    width: 100%;
+    max-width: 500px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
+  }
+
+  .root :global(p) {
+    line-height: 1.5;
+  }
+
+  .params {
+    display: grid;
+    column-gap: var(--spacing-xs);
+    row-gap: var(--spacing-s);
+    grid-template-columns: 90px 1fr;
+    align-items: center;
+  }
+</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 3b3ee6fd00..eb354d6557 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
@@ -21,3 +21,4 @@ export { default as ShowNotification } from "./ShowNotification.svelte"
 export { default as PromptUser } from "./PromptUser.svelte"
 export { default as OpenSidePanel } from "./OpenSidePanel.svelte"
 export { default as CloseSidePanel } from "./CloseSidePanel.svelte"
+export { default as ClearRowSelection } from "./ClearRowSelection.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 6ed545f541..9391baf3dc 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
@@ -156,6 +156,11 @@
       "type": "application",
       "component": "CloseSidePanel",
       "dependsOnFeature": "sidePanel"
+    },
+    {
+      "name": "Clear Row Selection",
+      "type": "data",
+      "component": "ClearRowSelection"
     }
   ]
 }
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 6c7a254cfb..0fee0e7478 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -4639,6 +4639,7 @@
     "illegalChildren": ["section"],
     "hasChildren": true,
     "showEmptyState": false,
+    "actions": ["ClearRowSelection"],
     "size": {
       "width": 600,
       "height": 400
diff --git a/packages/client/src/components/app/table/Table.svelte b/packages/client/src/components/app/table/Table.svelte
index 0afaff0a36..f16e26bc45 100644
--- a/packages/client/src/components/app/table/Table.svelte
+++ b/packages/client/src/components/app/table/Table.svelte
@@ -156,13 +156,20 @@
     }
   }
 
+  const actions = [
+    {
+      type: ActionTypes.ClearRowSelection,
+      callback: () => (selectedRows = []),
+    },
+  ]
+
   onDestroy(() => {
     rowSelectionStore.actions.updateSelection($component.id, [])
   })
 </script>
 
 <div use:styleable={$component.styles} class={size}>
-  <Provider data={dataContext}>
+  <Provider {actions} data={dataContext}>
     <Table
       {data}
       {schema}
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index a4d7411bbd..d3f1ab8be9 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -10,6 +10,7 @@ export const ActionTypes = {
   ClearForm: "ClearForm",
   ChangeFormStep: "ChangeFormStep",
   ScrollTo: "ScrollTo",
+  ClearRowSelection: "ClearRowSelection",
 }
 
 export const DNDPlaceholderID = "dnd-placeholder"
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 259128f6d4..b2068ad152 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -47,6 +47,8 @@ export const getActionContextKey = action => {
       return key(action.parameters.componentId, ActionTypes.ClearForm)
     case "Change Form Step":
       return key(action.parameters.componentId, ActionTypes.ChangeFormStep)
+    case "Clear Row Selection":
+      return key(action.parameters.componentId, ActionTypes.ClearRowSelection)
     default:
       return null
   }
@@ -383,14 +385,14 @@ const showNotificationHandler = action => {
 
 const promptUserHandler = () => {}
 
-const OpenSidePanelHandler = action => {
+const openSidePanelHandler = action => {
   const { id } = action.parameters
   if (id) {
     sidePanelStore.actions.open(id)
   }
 }
 
-const CloseSidePanelHandler = () => {
+const closeSidePanelHandler = () => {
   sidePanelStore.actions.close()
 }
 
@@ -410,8 +412,8 @@ const handlerMap = {
   ["Continue if / Stop if"]: continueIfHandler,
   ["Show Notification"]: showNotificationHandler,
   ["Prompt User"]: promptUserHandler,
-  ["Open Side Panel"]: OpenSidePanelHandler,
-  ["Close Side Panel"]: CloseSidePanelHandler,
+  ["Open Side Panel"]: openSidePanelHandler,
+  ["Close Side Panel"]: closeSidePanelHandler,
 }
 
 const confirmTextMap = {
