From df292546f5ec8d0c7bb4532fdf01bfa23f45b020 Mon Sep 17 00:00:00 2001
From: Radek Podrazky <rpodrazky@securityscorecard.io>
Date: Mon, 14 Oct 2024 15:35:16 +0200
Subject: [PATCH] feat(DatatableV2): add option to disable selection toolbar

For special cases we need to be able to disable the selection toolbar with batch actions while the selection itself stays enabled. In this setup is necessary to handle the selection state in managed way otherwise there is no other option how to access the state and act upon it.

Closes UXD-1647
---
 src/components/DatatableV2/Datatable.types.ts            | 9 +++++++++
 src/components/DatatableV2/hooks/useOptions.ts           | 2 ++
 src/components/DatatableV2/stories/Selection.stories.tsx | 7 +++++++
 src/components/DatatableV2/table/TableSurface.tsx        | 3 ++-
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/DatatableV2/Datatable.types.ts b/src/components/DatatableV2/Datatable.types.ts
index cd2374a54..e9c10851f 100644
--- a/src/components/DatatableV2/Datatable.types.ts
+++ b/src/components/DatatableV2/Datatable.types.ts
@@ -234,6 +234,7 @@ export interface ParsedDatatableOptions<D>
   enableRowActions?: DatatableOptions<D>['enableRowActions'];
   enableRowsPerPage?: DatatableOptions<D>['enableRowsPerPage'];
   enableSelectAll?: DatatableOptions<D>['enableSelectAll'];
+  enableSelectionToolbar?: DatatableOptions<D>['enableSelectionToolbar'];
   enableTopToolbar?: DatatableOptions<D>['enableTopToolbar'];
   initialState?: DatatableOptions<D>['initialState'];
   onShowColumnSettings?: DatatableOptions<D>['onShowColumnSettings'];
@@ -452,6 +453,14 @@ export interface DatatableOptions<D>
    * @default true
    */
   enableSelectAll?: boolean;
+  /**
+   * Enables/disables the selection toolbar with the batch action buttons. If this is set to `false`
+   * consumers has to control the selection state on their own as the Datatable doesn't provide other
+   * way how to access the interal state.
+   *
+   * @default true
+   */
+  enableSelectionToolbar?: boolean;
   /**
    * Enables/disables table sorting
    *
diff --git a/src/components/DatatableV2/hooks/useOptions.ts b/src/components/DatatableV2/hooks/useOptions.ts
index 9b90e6918..58c38ccb1 100644
--- a/src/components/DatatableV2/hooks/useOptions.ts
+++ b/src/components/DatatableV2/hooks/useOptions.ts
@@ -22,6 +22,7 @@ export const useOptions = <D>({
   enableRowSelection = true,
   enableRowsPerPage = false,
   enableSelectAll = true,
+  enableSelectionToolbar = true,
   enableSorting = true,
   enableSortingRemoval = true,
   enableTopToolbar = true,
@@ -80,6 +81,7 @@ export const useOptions = <D>({
     enableRowSelection,
     enableRowsPerPage,
     enableSelectAll,
+    enableSelectionToolbar,
     enableSorting,
     enableSortingRemoval,
     enableTopToolbar,
diff --git a/src/components/DatatableV2/stories/Selection.stories.tsx b/src/components/DatatableV2/stories/Selection.stories.tsx
index 6e62d3952..04e4d9f75 100644
--- a/src/components/DatatableV2/stories/Selection.stories.tsx
+++ b/src/components/DatatableV2/stories/Selection.stories.tsx
@@ -113,6 +113,13 @@ RowSelectionActions.parameters = {
   screenshot: { skip: false },
 };
 
+export const DisabledSelectionToolbar: Story = Template.bind({});
+DisabledSelectionToolbar.args = {
+  ...SelectionEnabled.args,
+  initialState: RowSelectionActions.args.initialState,
+  enableSelectionToolbar: false,
+};
+
 export const SelectionManagedState: Story = (args) => {
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({
     'e23968c3-3f19-44b2-aee9-c4a1d7c326ee': true,
diff --git a/src/components/DatatableV2/table/TableSurface.tsx b/src/components/DatatableV2/table/TableSurface.tsx
index 6bb57231d..68877d0a6 100644
--- a/src/components/DatatableV2/table/TableSurface.tsx
+++ b/src/components/DatatableV2/table/TableSurface.tsx
@@ -85,7 +85,8 @@ const TableSurface = <D,>({ table }: { table: DatatableInstance<D> }) => {
         {table.options.enableTopToolbar && <TopToolbar table={table} />}
         <Table table={table} />
       </Surface>
-      {table.options.enableRowSelection && <Selection table={table} />}
+      {table.options.enableRowSelection &&
+        table.options.enableSelectionToolbar && <Selection table={table} />}
       {table.options.enablePagination &&
         table.getRowModel().rows.length > 0 && <Pagination table={table} />}
     </DatatableRoot>