From 8868e1a93cd4ed69cee5d550ad57f348c8e9cc1c Mon Sep 17 00:00:00 2001 From: Durgaprasad M L Date: Sat, 4 Jul 2026 23:32:30 +0530 Subject: [PATCH 1/2] test(table): fix search dropdown conditionally rendering tests (#41772) --- .../src/AgGridTable/index.tsx | 22 ++++--- .../test/AgGridTableChart.test.tsx | 66 +++++++++++++++++++ .../src/DataTable/DataTable.tsx | 22 ++++--- .../test/TableChart.test.tsx | 50 ++++++++++++++ 4 files changed, 140 insertions(+), 20 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/index.tsx b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/index.tsx index 0dc74c8ac58f..9b9b2fc8e3e6 100644 --- a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/index.tsx +++ b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/index.tsx @@ -470,16 +470,18 @@ const AgGridDataTable: FunctionComponent = memo( )} {includeSearch && (
- {serverPagination && ( -
- {t('Search by')}: - -
- )} + {serverPagination && + searchOptions && + searchOptions.length > 0 && ( +
+ {t('Search by')}: + +
+ )}
diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/test/AgGridTableChart.test.tsx b/superset-frontend/plugins/plugin-chart-ag-grid-table/test/AgGridTableChart.test.tsx index 875f49331a3b..ae5ab2630880 100644 --- a/superset-frontend/plugins/plugin-chart-ag-grid-table/test/AgGridTableChart.test.tsx +++ b/superset-frontend/plugins/plugin-chart-ag-grid-table/test/AgGridTableChart.test.tsx @@ -191,6 +191,72 @@ test('AgGridTableChart renders with search enabled', async () => { expect(searchInput).toHaveAttribute('id', 'filter-text-box'); }); +test('AgGridTableChart hides Search by dropdown if includeSearch is false', async () => { + const props = transformProps({ + ...testData.basic, + rawFormData: { + ...testData.basic.rawFormData, + server_pagination: true, + include_search: false, + }, + }); + props.serverPagination = true; + props.includeSearch = false; + props.searchOptions = [{ label: 'Name', value: 'name' }]; + + render( + ProviderWrapper({ + children: ( + + ), + }), + ); + + await waitFor(() => { + const grid = document.querySelector('.ag-container'); + expect(grid).toBeInTheDocument(); + }); + + expect(screen.queryByText(/Search by/i)).not.toBeInTheDocument(); +}); + +test('AgGridTableChart renders Search by dropdown if includeSearch is true and there are search options', async () => { + const props = transformProps({ + ...testData.basic, + rawFormData: { + ...testData.basic.rawFormData, + server_pagination: true, + include_search: true, + }, + }); + props.serverPagination = true; + props.includeSearch = true; + props.searchOptions = [{ label: 'Name', value: 'name' }]; + + render( + ProviderWrapper({ + children: ( + + ), + }), + ); + + await waitFor(() => { + const grid = document.querySelector('.ag-container'); + expect(grid).toBeInTheDocument(); + }); + + expect(screen.getByText(/Search by/i)).toBeInTheDocument(); +}); + test('AgGridTableChart renders with totals', async () => { const props = transformProps({ ...testData.basic, 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 374609b6bb9e..321721861eca 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx @@ -582,16 +582,18 @@ export default typedMemo(function DataTable({ {searchInput && ( <> - {serverPagination && ( - - {t('Search by')} - - - )} + {serverPagination && + searchOptions && + searchOptions.length > 0 && ( + + {t('Search by')} + + + )} searchInput={ typeof searchInput === 'boolean' ? undefined : searchInput diff --git a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx index ddfc27e59577..80bcdfa606ef 100644 --- a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx +++ b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx @@ -2383,6 +2383,56 @@ describe('plugin-chart-table', () => { expect(filters[0].val).toEqual(['Michael']); }); }); + + test('does not render "Search by" if there are no search options (server pagination enabled)', () => { + const props = transformProps({ + ...testData.raw, + rawFormData: { + ...testData.raw.rawFormData, + server_pagination: true, + include_search: true, + }, + queriesData: [ + { + ...testData.raw.queriesData[0], + colnames: ['num'], + coltypes: [GenericDataType.Numeric], + data: [{ num: 1 }, { num: 2 }], + }, + ], + }); + render( + ProviderWrapper({ + children: , + }), + ); + expect(screen.queryByText('Search by')).not.toBeInTheDocument(); + }); + + test('renders "Search by" if include_search is true and there are search options (server pagination enabled)', () => { + const props = transformProps({ + ...testData.raw, + rawFormData: { + ...testData.raw.rawFormData, + server_pagination: true, + include_search: true, + }, + queriesData: [ + { + ...testData.raw.queriesData[0], + colnames: ['name'], + coltypes: [GenericDataType.String], + data: [{ name: 'Michael' }, { name: 'John' }], + }, + ], + }); + render( + ProviderWrapper({ + children: , + }), + ); + expect(screen.queryByText('Search by')).toBeInTheDocument(); + }); }); /** From e66405238533dd1e88ad775ae9869ac99ce50f05 Mon Sep 17 00:00:00 2001 From: Durgaprasad M L Date: Mon, 6 Jul 2026 00:21:12 +0530 Subject: [PATCH 2/2] fix(table): resolve AgGridTableChart test typing regression --- .../src/utils/useColDefs.ts | 17 +++++++++++------ .../test/AgGridTableChart.test.tsx | 2 -- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useColDefs.ts b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useColDefs.ts index 1ade82887d4e..b13622f212dc 100644 --- a/superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useColDefs.ts +++ b/superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useColDefs.ts @@ -18,7 +18,12 @@ * under the License. */ import { t } from '@apache-superset/core/translation'; -import { ColDef } from '@superset-ui/core/components/ThemedAgGridReact'; +import { + ColDef, + ValueFormatterParams, + ValueGetterParams, + CellClassParams, +} from '@superset-ui/core/components/ThemedAgGridReact'; import { useCallback, useMemo } from 'react'; import { DataRecord, DataRecordValue, JsonObject } from '@superset-ui/core'; import { GenericDataType } from '@apache-superset/core/common'; @@ -290,9 +295,9 @@ export const useColDefs = ({ return { field: colId, headerName: getHeaderLabel(col), - valueFormatter: p => valueFormatter(p, col), - valueGetter: p => valueGetter(p, col), - cellStyle: p => { + valueFormatter: (p: ValueFormatterParams) => valueFormatter(p, col), + valueGetter: (p: ValueGetterParams) => valueGetter(p, col), + cellStyle: (p: CellClassParams) => { const cellSurfaceColor = p.node?.rowPinned != null ? theme.colorBgBase @@ -316,7 +321,7 @@ export const useColDefs = ({ return getCellStyle(cellStyleParams); }, - cellClass: p => + cellClass: (p: CellClassParams) => getCellClass({ ...p, col, @@ -478,7 +483,7 @@ export const useColDefs = ({ headerName: t('№'), headerClass: 'ag-header-center', field: ROW_NUMBER_COL_ID, - valueGetter: params => { + valueGetter: (params: ValueGetterParams) => { if (params.node?.rowPinned != null) return ''; if (serverPagination && serverPaginationData) { return currentPage * pageSize + (params.node?.rowIndex ?? 0) + 1; diff --git a/superset-frontend/plugins/plugin-chart-ag-grid-table/test/AgGridTableChart.test.tsx b/superset-frontend/plugins/plugin-chart-ag-grid-table/test/AgGridTableChart.test.tsx index ae5ab2630880..3f69cfa30ff2 100644 --- a/superset-frontend/plugins/plugin-chart-ag-grid-table/test/AgGridTableChart.test.tsx +++ b/superset-frontend/plugins/plugin-chart-ag-grid-table/test/AgGridTableChart.test.tsx @@ -202,7 +202,6 @@ test('AgGridTableChart hides Search by dropdown if includeSearch is false', asyn }); props.serverPagination = true; props.includeSearch = false; - props.searchOptions = [{ label: 'Name', value: 'name' }]; render( ProviderWrapper({ @@ -235,7 +234,6 @@ test('AgGridTableChart renders Search by dropdown if includeSearch is true and t }); props.serverPagination = true; props.includeSearch = true; - props.searchOptions = [{ label: 'Name', value: 'name' }]; render( ProviderWrapper({