fix(theming): Fix ag-grid theming regression in SQL Lab (#34675)

Co-authored-by: Claude <noreply@anthropic.com>

superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTable/index.tsx

@@ -27,7 +27,9 @@ import {
   useEffect,
 } from 'react';
 
+import { ThemedAgGridReact } from '@superset-ui/core/components';
 import {
+  AgGridReact,
   AllCommunityModule,
   ClientSideRowModelModule,
   type ColDef,
@@ -36,9 +38,7 @@ import {
   GridState,
   CellClickedEvent,
   IMenuActionParams,
-  themeQuartz,
-} from 'ag-grid-community';
-import { AgGridReact } from 'ag-grid-react';
+} from '@superset-ui/core/components/ThemedAgGridReact';
 import { type FunctionComponent } from 'react';
 import { JsonObject, DataRecordValue, DataRecord, t } from '@superset-ui/core';
 import { SearchOutlined } from '@ant-design/icons';
@@ -257,11 +257,7 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
     };
 
     return (
-      <div
-        className="ag-theme-quartz"
-        style={containerStyles}
-        ref={containerRef}
-      >
+      <div style={containerStyles} ref={containerRef}>
         <div className="dropdown-controls-container">
           {renderTimeComparisonDropdown && (
             <div className="time-comparison-dropdown">
@@ -301,10 +297,9 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
           )}
         </div>
 
-        <AgGridReact
+        <ThemedAgGridReact
           ref={gridRef}
           onGridReady={onGridReady}
-          theme={themeQuartz}
           className="ag-container"
           rowData={rowData}
           headerHeight={36}

superset-frontend/plugins/plugin-chart-ag-grid-table/src/AgGridTableChart.tsx

@@ -26,7 +26,10 @@ import {
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import { isEqual } from 'lodash';
 
-import { CellClickedEvent, IMenuActionParams } from 'ag-grid-community';
+import {
+  CellClickedEvent,
+  IMenuActionParams,
+} from '@superset-ui/core/components/ThemedAgGridReact';
 import {
   AgGridTableChartTransformedProps,
   InputColumn,

superset-frontend/plugins/plugin-chart-ag-grid-table/src/renderers/NumericCellRenderer.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { styled } from '@superset-ui/core';
-import { CustomCellRendererProps } from 'ag-grid-react';
+import { CustomCellRendererProps } from '@superset-ui/core/components/ThemedAgGridReact';
 import { BasicColorFormatterType, InputColumn } from '../types';
 import { useIsDark } from '../utils/useTableTheme';
 

superset-frontend/plugins/plugin-chart-ag-grid-table/src/styles/index.tsx

@@ -342,8 +342,15 @@ export const StyledChartContainer = styled.div<{
       height: fit-content;
     }
 
-    .ag-header,
-    .ag-row,
+    .ag-header {
+      font-size: ${theme.fontSizeSM}px;
+      font-weight: ${theme.fontWeightStrong};
+    }
+
+    .ag-row {
+      font-size: ${theme.fontSizeSM}px;
+    }
+
     .ag-spanned-row {
       font-size: ${theme.fontSizeSM}px;
       font-weight: ${theme.fontWeightStrong};

superset-frontend/plugins/plugin-chart-ag-grid-table/src/types.ts

@@ -36,8 +36,12 @@ import {
   JsonObject,
   Metric,
 } from '@superset-ui/core';
-import { ColDef, Column, IHeaderParams } from 'ag-grid-community';
-import { CustomCellRendererProps } from 'ag-grid-react';
+import {
+  ColDef,
+  Column,
+  IHeaderParams,
+  CustomCellRendererProps,
+} from '@superset-ui/core/components/ThemedAgGridReact';
 
 export type CustomFormatter = (value: DataRecordValue) => string;
 

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/filterValueGetter.ts

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ValueGetterParams } from 'ag-grid-community';
+import { ValueGetterParams } from '@superset-ui/core/components/ThemedAgGridReact';
 
 const filterValueGetter = (params: ValueGetterParams) => {
   const raw = params.data[params.colDef.field as string];

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/formatValue.ts

@@ -25,7 +25,10 @@ import {
   isProbablyHTML,
   sanitizeHtml,
 } from '@superset-ui/core';
-import { ValueFormatterParams, ValueGetterParams } from 'ag-grid-community';
+import {
+  ValueFormatterParams,
+  ValueGetterParams,
+} from '@superset-ui/core/components/ThemedAgGridReact';
 import { DataColumnMeta, InputColumn } from '../types';
 import DateWithFormatter from './DateWithFormatter';
 

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/getCellClass.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { CellClassParams } from 'ag-grid-community';
+import { CellClassParams } from '@superset-ui/core/components/ThemedAgGridReact';
 import { InputColumn } from '../types';
 
 type GetCellClassParams = CellClassParams & {

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/getCellStyle.ts

@@ -18,7 +18,7 @@
  */
 
 import { ColorFormatters } from '@superset-ui/chart-controls';
-import { CellClassParams } from 'ag-grid-community';
+import { CellClassParams } from '@superset-ui/core/components/ThemedAgGridReact';
 import { BasicColorFormatterType, InputColumn } from '../types';
 
 type CellStyleParams = CellClassParams & {

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/getInitialSortState.ts

@@ -17,7 +17,10 @@
  * under the License.
  */
 // All ag grid sort related stuff
-import { GridState, SortModelItem } from 'ag-grid-community';
+import {
+  GridState,
+  SortModelItem,
+} from '@superset-ui/core/components/ThemedAgGridReact';
 import { SortByItem } from '../types';
 
 const getInitialSortState = (sortBy?: SortByItem[]): SortModelItem[] => {

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useColDefs.ts

@@ -17,7 +17,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ColDef } from 'ag-grid-community';
+import { ColDef } from '@superset-ui/core/components/ThemedAgGridReact';
 import { useCallback, useMemo } from 'react';
 import { DataRecord, GenericDataType } from '@superset-ui/core';
 import { ColorFormatters } from '@superset-ui/chart-controls';

superset-frontend/plugins/plugin-chart-ag-grid-table/src/utils/useTableTheme.ts

@@ -21,7 +21,7 @@ import {
   colorSchemeDark,
   colorSchemeLight,
   themeQuartz,
-} from 'ag-grid-community';
+} from '@superset-ui/core/components/ThemedAgGridReact';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import tinycolor from 'tinycolor2';