From 41da6a52fc490d57203315543532a3f3b3627181 Mon Sep 17 00:00:00 2001
From: Yevhenii Ushakov <y.ushakov@seedium.io>
Date: Fri, 22 Nov 2024 15:52:25 +0200
Subject: [PATCH] fix(table): select all control

---
 .../src/DataTable/DataTable.tsx               |  1 +
 .../plugin-chart-table/src/TableChart.tsx     | 10 +++++++---
 .../plugin-chart-table/src/controlPanel.tsx   | 19 +++++++++++++++++++
 .../plugin-chart-table/src/transformProps.ts  |  2 ++
 .../plugins/plugin-chart-table/src/types.ts   |  2 ++
 5 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
index b23131b1b921..bf072b3bb463 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
@@ -70,6 +70,7 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
   onColumnOrderChange: () => void;
   isRoundStyles?: boolean;
   roundChartTitle?: string;
+  showAllSizeOption?: boolean;
 }
 
 export interface RenderHTMLCellProps extends HTMLProps<HTMLTableCellElement> {
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 8b954a543386..edc6ffe52738 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -277,6 +277,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
     allowRearrangeColumns = false,
     onContextMenu,
     emitCrossFilters,
+    showAllSizeOption,
   } = props;
   const timestampFormatter = useCallback(
     value => getTimeFormatterForGranularity(timeGrain)(value),
@@ -293,10 +294,12 @@ export default function TableChart<D extends DataRecord = DataRecord>(
   // only take relevant page size options
   const pageSizeOptions = useMemo(() => {
     const getServerPagination = (n: number) => n <= rowCount;
-    return PAGE_SIZE_OPTIONS.filter(([n]) =>
+    return PAGE_SIZE_OPTIONS.filter(item =>
+      !showAllSizeOption ? item[0] !== 0 : showAllSizeOption,
+    ).filter(([n]) =>
       serverPagination ? getServerPagination(n) : n <= 2 * data.length,
     ) as SizeOption[];
-  }, [data.length, rowCount, serverPagination]);
+  }, [data.length, rowCount, serverPagination, showAllSizeOption]);
 
   const getValueRange = useCallback(
     function getValueRange(key: string, alignPositiveNegative: boolean) {
@@ -788,7 +791,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         )}
         isRoundStyles={isRoundStyles}
         roundChartTitle={roundChartTitle}
-        pageSize={pageSize}
+        pageSize={showAllSizeOption ? pageSize : pageSize === 0 ? 10 : pageSize}
         serverPaginationData={serverPaginationData}
         pageSizeOptions={pageSizeOptions}
         width={fullDisplay ? '100%' : widthFromState}
@@ -798,6 +801,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
         onColumnOrderChange={() => setColumnOrderToggle(!columnOrderToggle)}
         maxPageItemCount={5}
         noResults={getNoResultsMessage}
+        showAllSizeOption={showAllSizeOption}
         searchInput={includeSearch && SelectedSearchInput}
         selectPageSize={pageSize !== null && SelectPageSize}
         // not in use in Superset, but needed for unit tests
diff --git a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
index 1e4687d1319a..b44e0e984ff2 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
@@ -145,6 +145,25 @@ const percentMetricsControl: typeof sharedControls.metrics = {
 
 const config: ControlPanelConfig = {
   controlPanelSections: [
+    {
+      label: t('Table Options'),
+      expanded: true,
+      controlSetRows: [
+        [
+          {
+            name: 'showAllSizeOption',
+            config: {
+              type: 'CheckboxControl',
+              label: 'Show select all size option',
+              renderTrigger: true,
+              default: false,
+              initialValue: false,
+              description: 'Show select all size option',
+            },
+          },
+        ],
+      ],
+    },
     {
       label: t('Show Loader'),
       expanded: true,
diff --git a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
index 754e8ff7d6a9..4c1f689754f3 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
@@ -242,6 +242,7 @@ const transformProps = (
     show_totals: showTotals,
     conditional_formatting: conditionalFormatting,
     allow_rearrange_columns: allowRearrangeColumns,
+    showAllSizeOption,
   } = formData;
   const timeGrain = extractTimegrain(formData);
 
@@ -300,6 +301,7 @@ const transformProps = (
     timeGrain,
     allowRearrangeColumns,
     onContextMenu,
+    showAllSizeOption: !!showAllSizeOption,
   };
 };
 
diff --git a/superset-frontend/plugins/plugin-chart-table/src/types.ts b/superset-frontend/plugins/plugin-chart-table/src/types.ts
index 2b29b37c66ed..9db5f54d96c0 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/types.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/types.ts
@@ -80,6 +80,7 @@ export type TableChartFormData = QueryFormData & {
   include_search?: boolean;
   query_mode?: QueryMode;
   showPopUpLegend?: boolean;
+  showAllSizeOption?: boolean;
   showPopUpVideoLegend?: boolean;
   page_length?: string | number | null; // null means auto-paginate
   metrics?: QueryFormMetric[] | null;
@@ -131,6 +132,7 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
   noMainBorder?: boolean;
   hideControlsOnCustomerView?: boolean;
   isRoundStyles?: boolean;
+  showAllSizeOption?: boolean;
   roundChartTitle?: string;
   // These are dashboard filters, don't be confused with in-chart search filter
   // enabled by `includeSearch`