Fix React 19 useRef type errors and eslint config

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

Author: Copilot

extensions/ql-vscode/eslint.config.mjs

@@ -109,7 +109,7 @@ export default tseslint.config(
     extends: [
       react.configs.flat.recommended,
       react.configs.flat['jsx-runtime'],
-      reactHooks.configs.flat['recommended-latest'],
+      reactHooks.configs['recommended-latest'],
       storybook.configs['flat/recommended'],
       github.getFlatConfigs().react,
     ],
@@ -128,7 +128,7 @@ export default tseslint.config(
     extends: [
       react.configs.flat.recommended,
       react.configs.flat['jsx-runtime'],
-      reactHooks.configs.flat['recommended-latest'],
+      reactHooks.configs['recommended-latest'],
       github.getFlatConfigs().react,
     ],
     settings: {

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

@@ -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-editor/MethodRow.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/results/AlertTablePathNodeRow.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/AlertTablePathRow.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/AlertTableResultRow.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/__tests__/AlertTablePathRow.spec.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__/AlertTableResultRow.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/useScrollIntoView.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;