Upgrade React to v19.2.3 (and fix type errors in useRef hooks) (#4237)

* Initial plan

* Merge React 19 upgrade from dependabot branch

Co-authored-by: d10c <[email protected]>

* Fix React 19 useRef type errors and eslint config

Co-authored-by: d10c <[email protected]>

* Upgrade react-dom to 19.2.3 to match react version

Co-authored-by: d10c <[email protected]>

* Restore correct package versions (revert unintended downgrades from dependabot merge)

Co-authored-by: d10c <[email protected]>

* Security fix: Update glob to 11.1.0 to address command injection vulnerability

Co-authored-by: d10c <[email protected]>

* Upgrade React to 19.2.3 and fix useRef type errors

- Upgrade react and react-dom from 18.3.1 to 19.2.3
- Upgrade @types/react and @types/react-dom to 19.2.3 (matching versions)
- Fix useRef hooks to include explicit initial values (React 19 requirement)
- Update ref prop types to handle React 19's stricter null handling
- Fix eslint config for reactHooks.configs compatibility

Co-authored-by: d10c <[email protected]>

* Fix eslint config: restore .flat accessor for reactHooks.configs

The previous change removed the .flat accessor which caused ESLint to use
the old eslintrc format config (with plugins as array of strings) instead
of the flat config format (with plugins as object). This led to CI failures.

Co-authored-by: d10c <[email protected]>

* Use caret (^) prefix for React package versions

Updated react, react-dom, @types/react, and @types/react-dom to use
"^19.2.3" instead of "19.2.3" to match the convention used by other
dependencies in the project.

Co-authored-by: d10c <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: d10c <[email protected]>

Author: Copilot

extensions/ql-vscode/package-lock.json

@@ -2080,8 +2080,8 @@
     "nanoid": "^5.0.7",
     "p-queue": "^8.0.1",
     "proper-lockfile": "^4.1.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "semver": "^7.6.2",
     "source-map": "^0.7.6",
     "source-map-support": "^0.5.21",
@@ -2135,8 +2135,8 @@
     "@types/js-yaml": "^4.0.6",
     "@types/node": "22.19.*",
     "@types/proper-lockfile": "^4.1.4",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "@types/sarif": "^2.1.2",
     "@types/semver": "^7.5.8",
     "@types/stream-json": "^1.7.1",

extensions/ql-vscode/package.json

@@ -79,7 +79,7 @@ export const ModelAlertsResults = ({
     [modelAlerts.model],
   );
 
-  const ref = useRef<HTMLElement>();
+  const ref = useRef<HTMLElement | undefined>(undefined);
 
   useEffect(() => {
     if (

extensions/ql-vscode/src/view/model-alerts/ModelAlertsResults.tsx

@@ -85,7 +85,7 @@ export type MethodRowProps = {
 export const MethodRow = (props: MethodRowProps) => {
   const { method, methodCanBeModeled, revealedMethodSignature } = props;
 
-  const ref = useRef<HTMLElement>();
+  const ref = useRef<HTMLElement | undefined>(undefined);
 
   useEffect(() => {
     if (method.signature === revealedMethodSignature) {

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -18,7 +18,7 @@ interface Props {
   pathIndex: number;
   resultIndex: number;
   selectedItem: undefined | ResultKey;
-  selectedItemRef: React.RefObject<HTMLTableRowElement>;
+  selectedItemRef: React.RefObject<HTMLTableRowElement | null>;
   databaseUri: string;
   sourceLocationPrefix: string;
   run?: Run;

extensions/ql-vscode/src/view/results/AlertTablePathNodeRow.tsx

@@ -19,7 +19,7 @@ export interface Props {
   resultIndex: number;
   currentPathExpanded: boolean;
   selectedItem: undefined | ResultKey;
-  selectedItemRef: React.RefObject<HTMLTableRowElement>;
+  selectedItemRef: React.RefObject<HTMLTableRowElement | null>;
   databaseUri: string;
   sourceLocationPrefix: string;
   run?: Run;

extensions/ql-vscode/src/view/results/AlertTablePathRow.tsx

@@ -20,7 +20,7 @@ export interface Props {
   resultIndex: number;
   expanded: Set<string>;
   selectedItem: undefined | ResultKey;
-  selectedItemRef: React.RefObject<HTMLTableRowElement>;
+  selectedItemRef: React.RefObject<HTMLTableRowElement | null>;
   databaseUri: string;
   sourceLocationPrefix: string;
   run?: Run;

extensions/ql-vscode/src/view/results/AlertTableResultRow.tsx

@@ -5,7 +5,9 @@ import { createMockResults } from "../../../../test/factories/results/mockresult
 
 describe(AlertTablePathRow.name, () => {
   const render = (props?: Props) => {
-    const mockRef = { current: null } as React.RefObject<HTMLTableRowElement>;
+    const mockRef = {
+      current: null,
+    } as React.RefObject<HTMLTableRowElement | null>;
     const results = createMockResults();
     const threadFlow = results[0]?.codeFlows?.[0]?.threadFlows?.[0];
 

extensions/ql-vscode/src/view/results/__tests__/AlertTablePathRow.spec.tsx

@@ -5,7 +5,9 @@ import { createMockResults } from "../../../../test/factories/results/mockresult
 
 describe(AlertTableResultRow.name, () => {
   const render = (props?: Props) => {
-    const mockRef = { current: null } as React.RefObject<HTMLTableRowElement>;
+    const mockRef = {
+      current: null,
+    } as React.RefObject<HTMLTableRowElement | null>;
     const results = createMockResults();
 
     reactRender(

extensions/ql-vscode/src/view/results/__tests__/AlertTableResultRow.spec.tsx

@@ -1,9 +1,9 @@
 import type { RefObject } from "react";
 import { useEffect } from "react";
 
-export function useScrollIntoView<T>(
+export function useScrollIntoView<T, E extends HTMLElement = HTMLElement>(
   selectedElement: T | undefined,
-  selectedElementRef: RefObject<HTMLElement>,
+  selectedElementRef: RefObject<E | null>,
 ) {
   useEffect(() => {
     const element = selectedElementRef.current;