Fix react ref types

Author: robertbrignull

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);
 
   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);
 
   useEffect(() => {
     if (method.signature === revealedMethodSignature) {

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

@@ -44,7 +44,7 @@ export function AlertTable({
     undefined,
   );
 
-  const selectedItemRef = useRef<HTMLTableRowElement>(null);
+  const selectedItemRef = useRef<HTMLTableRowElement>(undefined);
   useScrollIntoView(selectedItem, selectedItemRef);
 
   /**

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 | undefined>;
   databaseUri: string;
   sourceLocationPrefix: string;
   run?: Run;
@@ -61,7 +61,11 @@ export function AlertTablePathNodeRow(props: Props) {
   const zebraIndex = resultIndex + stepIndex;
   return (
     <tr
-      ref={isSelected ? selectedItemRef : undefined}
+      ref={
+        isSelected && selectedItemRef.current !== undefined
+          ? (selectedItemRef as React.RefObject<HTMLTableRowElement>)
+          : undefined
+      }
       className={isSelected ? "vscode-codeql__selected-path-node" : undefined}
     >
       <td className="vscode-codeql__icon-cell">

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 | undefined>;
   databaseUri: string;
   sourceLocationPrefix: string;
   run?: Run;
@@ -55,7 +55,11 @@ export function AlertTablePathRow(props: Props) {
   return (
     <>
       <tr
-        ref={isPathSpecificallySelected ? selectedItemRef : undefined}
+        ref={
+          isPathSpecificallySelected && selectedItemRef.current !== undefined
+            ? (selectedItemRef as React.RefObject<HTMLTableRowElement>)
+            : undefined
+        }
         {...selectableZebraStripe(isPathSpecificallySelected, resultIndex)}
       >
         <td className="vscode-codeql__icon-cell">

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 | undefined>;
   databaseUri: string;
   sourceLocationPrefix: string;
   run?: Run;
@@ -93,7 +93,11 @@ export function AlertTableResultRow(props: Props) {
   return (
     <>
       <tr
-        ref={resultRowIsSelected ? selectedItemRef : undefined}
+        ref={
+          resultRowIsSelected && selectedItemRef.current !== undefined
+            ? (selectedItemRef as React.RefObject<HTMLTableRowElement>)
+            : undefined
+        }
         {...selectableZebraStripe(resultRowIsSelected, resultIndex)}
       >
         {result.codeFlows === undefined ? (

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

@@ -38,7 +38,7 @@ export function RawTable({
 }: RawTableProps) {
   const [selectedItem, setSelectedItem] = useState<TableItem | undefined>();
 
-  const selectedItemRef = useRef<HTMLTableCellElement>(null);
+  const selectedItemRef = useRef<HTMLTableCellElement>(undefined);
   useScrollIntoView(selectedItem, selectedItemRef);
 
   const setSelection = useCallback((row: number, column: number): void => {

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

@@ -8,7 +8,7 @@ interface Props {
   databaseUri: string;
   className?: string;
   selectedColumn?: number;
-  selectedItemRef?: React.Ref<HTMLTableCellElement>;
+  selectedItemRef?: React.RefObject<HTMLTableCellElement | undefined>;
   onSelected?: (row: number, column: number) => void;
 }
 
@@ -24,7 +24,11 @@ export default function RawTableRow(props: Props) {
         const isSelected = props.selectedColumn === columnIndex;
         return (
           <td
-            ref={isSelected ? props.selectedItemRef : undefined}
+            ref={
+              isSelected && props.selectedItemRef?.current !== undefined
+                ? (props.selectedItemRef as React.RefObject<HTMLTableCellElement>)
+                : undefined
+            }
             key={columnIndex}
             {...(isSelected ? { className: selectedRowClassName } : {})}
           >

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: undefined } as React.RefObject<
+      HTMLTableRowElement | undefined
+    >;
     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: undefined } as React.RefObject<
+      HTMLTableRowElement | undefined
+    >;
     const results = createMockResults();
 
     reactRender(