chore: Upgrade to React 18 (#38563)

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Evan Rusackas <evan@preset.io>

superset-frontend/plugins/plugin-chart-ag-grid-table/package.json

@@ -39,14 +39,13 @@
     "@apache-superset/core": "*",
     "@superset-ui/chart-controls": "*",
     "@superset-ui/core": "*",
-    "@testing-library/dom": "^8.20.1",
+    "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "*",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "*",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "*",
     "@types/react": "*",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -247,7 +247,7 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
       [serverPagination, debouncedSearch, searchId],
     );
 
-    const handleColSort = (colId: string, sortDir: string) => {
+    const handleColSort = (colId: string, sortDir: string | null) => {
       const isSortable = shouldSort({
         colId,
         sortDir,
@@ -301,10 +301,12 @@ const AgGridDataTable: FunctionComponent<AgGridTableProps> = memo(
     };
 
     const handleColumnHeaderClick = useCallback(
-      params => {
+      (params: { column?: { colId?: string; sort?: string | null } }) => {
         const colId = params?.column?.colId;
         const sortDir = params?.column?.sort;
-        handleColSort(colId, sortDir);
+        if (colId && sortDir !== undefined) {
+          handleColSort(colId, sortDir);
+        }
       },
       [serverPagination, gridInitialState, percentMetrics, onSortChange],
     );

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

@@ -147,7 +147,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
   ]);
 
   const handleColumnStateChange = useCallback(
-    agGridState => {
+    (agGridState: Record<string, unknown>) => {
       if (onChartStateChange) {
         onChartStateChange(agGridState);
       }

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

@@ -70,5 +70,9 @@ export const TextCellRenderer = (params: CellRendererProps) => {
     }
   }
 
-  return <div>{valueFormatted ?? value}</div>;
+  return (
+    <div>
+      {valueFormatted ?? (value instanceof Date ? value.toISOString() : value)}
+    </div>
+  );
 };

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

@@ -43,7 +43,7 @@ export const shouldSort = ({
   gridInitialState,
 }: {
   colId: string;
-  sortDir: string;
+  sortDir: string | null;
   percentMetrics: string[];
   serverPagination: boolean;
   gridInitialState: GridState;

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

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { GenericDataType } from '@apache-superset/core/common';
 import {
   supersetTheme,