Merge pull request #4264 from github/copilot/fix-github-actions-workflow-lint-again

Fix TypeScript type errors in VSCode Elements event handlers and refs

Author: d10c

extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx

@@ -1,4 +1,4 @@
-import type { ChangeEvent, SetStateAction } from "react";
+import type { SetStateAction } from "react";
 import { useCallback } from "react";
 import {
   VscodeOption,
@@ -25,8 +25,8 @@ export const CodeFlowsDropdown = ({
   setSelectedCodeFlow,
 }: CodeFlowsDropdownProps) => {
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => {
-      const selectedOption = e.target;
+    (e: Event) => {
+      const selectedOption = e.target as HTMLSelectElement;
       const selectedIndex = parseInt(selectedOption.value);
       setSelectedCodeFlow(codeFlows[selectedIndex]);
     },

extensions/ql-vscode/src/view/common/DataGrid.tsx

@@ -83,7 +83,7 @@ export const DataGridRow = forwardRef(
       "data-testid": testId,
       onClick,
     }: DataGridRowProps,
-    ref?: React.Ref<HTMLElement | undefined>,
+    ref?: React.Ref<HTMLDivElement>,
   ) => (
     <StyledDataGridRow
       $focused={focused}
@@ -135,7 +135,7 @@ export const DataGridCell = forwardRef(
       className,
       children,
     }: DataGridCellProps,
-    ref?: React.Ref<HTMLElement | undefined>,
+    ref?: React.Ref<HTMLDivElement>,
   ) => {
     return (
       <StyledDataGridCell

extensions/ql-vscode/src/view/common/TextButton.tsx

@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 
 type Size = "x-small" | "small" | "medium" | "large" | "x-large";
 
-const StyledButton = styled.button<{ $size: Size }>`
+const StyledButton = styled.button<{ $size?: Size }>`
   background: none;
   color: var(--vscode-textLink-foreground);
   border: none;

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

@@ -20,7 +20,7 @@ type Props = {
 
 export const ModelAlertsSort = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as SortKey);

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 | undefined>(undefined);
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (method.signature === revealedMethodSignature) {
@@ -103,7 +103,7 @@ export const MethodRow = (props: MethodRowProps) => {
   }
 };
 
-const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
+const ModelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
   (props: MethodRowProps, ref) => {
     const {
       method,
@@ -359,39 +359,38 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
 );
 ModelableMethodRow.displayName = "ModelableMethodRow";
 
-const UnmodelableMethodRow = forwardRef<
-  HTMLElement | undefined,
-  MethodRowProps
->((props: MethodRowProps, ref) => {
-  const { method, viewState, revealedMethodSignature } = props;
-
-  const jumpToMethod = useCallback(
-    () => sendJumpToMethodMessage(method),
-    [method],
-  );
-
-  return (
-    <DataGridRow
-      data-testid="unmodelable-method-row"
-      focused={revealedMethodSignature === method.signature}
-    >
-      <DataGridCell ref={ref}>
-        <ApiOrMethodRow>
-          <ModelingStatusIndicator status="saved" />
-          <MethodClassifications method={method} />
-          <MethodName {...props.method} />
-          {viewState.mode === Mode.Application && (
-            <UsagesButton onClick={jumpToMethod}>
-              {method.usages.length}
-            </UsagesButton>
-          )}
-          <ViewLink onClick={jumpToMethod}>View</ViewLink>
-        </ApiOrMethodRow>
-      </DataGridCell>
-      <DataGridCell gridColumn="span 5">Method already modeled</DataGridCell>
-    </DataGridRow>
-  );
-});
+const UnmodelableMethodRow = forwardRef<HTMLDivElement, MethodRowProps>(
+  (props: MethodRowProps, ref) => {
+    const { method, viewState, revealedMethodSignature } = props;
+
+    const jumpToMethod = useCallback(
+      () => sendJumpToMethodMessage(method),
+      [method],
+    );
+
+    return (
+      <DataGridRow
+        data-testid="unmodelable-method-row"
+        focused={revealedMethodSignature === method.signature}
+      >
+        <DataGridCell ref={ref}>
+          <ApiOrMethodRow>
+            <ModelingStatusIndicator status="saved" />
+            <MethodClassifications method={method} />
+            <MethodName {...props.method} />
+            {viewState.mode === Mode.Application && (
+              <UsagesButton onClick={jumpToMethod}>
+                {method.usages.length}
+              </UsagesButton>
+            )}
+            <ViewLink onClick={jumpToMethod}>View</ViewLink>
+          </ApiOrMethodRow>
+        </DataGridCell>
+        <DataGridCell gridColumn="span 5">Method already modeled</DataGridCell>
+      </DataGridRow>
+    );
+  },
+);
 UnmodelableMethodRow.displayName = "UnmodelableMethodRow";
 
 function sendJumpToMethodMessage(method: Method) {

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

@@ -1,4 +1,3 @@
-import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 import type {
   ModeledMethod,
@@ -33,8 +32,8 @@ export const ModelTypeTextbox = ({
     setValue(modeledMethod[typeInfo]);
   }, [modeledMethod, typeInfo]);
 
-  const handleChange = useCallback((e: ChangeEvent<HTMLSelectElement>) => {
-    const target = e.target as HTMLSelectElement;
+  const handleChange = useCallback((e: Event) => {
+    const target = e.target as HTMLInputElement;
 
     setValue(target.value);
   }, []);

extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx

@@ -1,4 +1,3 @@
-import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { styled } from "styled-components";
 import { VscodeCheckbox } from "@vscode-elements/react-elements";
@@ -229,17 +228,18 @@ export const RepoRow = ({
     e.stopPropagation();
   }, []);
   const onChangeCheckbox = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
+    (e: Event) => {
+      const target = e.target as HTMLInputElement;
       // This is called on first render, but we don't really care about this value
-      if (e.target.checked === undefined) {
+      if (target.checked === undefined) {
         return;
       }
 
       if (!repository.id) {
         return;
       }
 
-      onSelectedChange?.(repository.id, e.target.checked);
+      onSelectedChange?.(repository.id, target.checked);
     },
     [onSelectedChange, repository],
   );

extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx

@@ -20,7 +20,7 @@ type Props = {
 
 export const RepositoriesFilter = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as FilterKey);

extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx

@@ -24,7 +24,7 @@ export const RepositoriesResultFormat = ({
   className,
 }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as ResultFormat);

extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx

@@ -20,7 +20,7 @@ type Props = {
 
 export const RepositoriesSort = ({ value, onChange, className }: Props) => {
   const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {
       const target = e.target as HTMLSelectElement;
 
       onChange(target.value as SortKey);