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 17e2758c1055..2798e431599f 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 @@ -480,7 +480,7 @@ const AgGridDataTable: FunctionComponent = memo( )} {includeSearch && (
- {serverPagination && ( + {serverPagination && searchOptions?.length > 0 && (
{t('Search by')}: 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 @@ -317,7 +322,7 @@ export const useColDefs = ({ return getCellStyle(cellStyleParams); }, - cellClass: p => + cellClass: (p: CellClassParams) => getCellClass({ ...p, col, @@ -479,7 +484,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 9e233e535433..5babc651906c 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 @@ -195,6 +195,119 @@ 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; + + 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; + + render( + ProviderWrapper({ + children: ( + + ), + }), + ); + + await waitFor(() => { + const grid = document.querySelector('.ag-container'); + expect(grid).toBeInTheDocument(); + }); + + expect(screen.getByText(/Search by/i)).toBeInTheDocument(); +}); + +test('AgGridTableChart does not render Search by dropdown if includeSearch is true but searchOptions is empty', async () => { + const noStringColumnsData = { + ...testData.basic, + queriesData: [ + { + ...testData.basic.queriesData[0], + colnames: ['__timestamp', 'sum__num'], + coltypes: [GenericDataType.Temporal, GenericDataType.Numeric], + data: [ + { + __timestamp: '2020-01-01T12:34:56', + sum__num: 2467063, + }, + ], + }, + ], + }; + + const props = transformProps({ + ...noStringColumnsData, + rawFormData: { + ...noStringColumnsData.rawFormData, + server_pagination: true, + include_search: true, + }, + }); + props.serverPagination = true; + props.includeSearch = true; + + 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 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 d356f6d4a869..19d06b31a44f 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx @@ -582,7 +582,7 @@ export default typedMemo(function DataTable({ {searchInput && ( <> - {serverPagination && ( + {serverPagination && searchOptions?.length > 0 && ( {t('Search by')} { 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(); + }); }); /**