types-codemod

aslilac · aslilac · commit 4f997b87cc97 · 2024-12-05T22:08:50.000Z
diff --git a/site/src/components/Conditionals/ChooseOne.tsx b/site/src/components/Conditionals/ChooseOne.tsx
@@ -3,6 +3,7 @@ import {
 	type FC,
 	type PropsWithChildren,
 	type ReactNode,
+	type JSX,
 } from "react";
 
 export interface CondProps {
diff --git a/site/src/components/Icons/CoderIcon.tsx b/site/src/components/Icons/CoderIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 /**
  * CoderIcon represents the cloud with brackets Coder brand icon. It does not
diff --git a/site/src/components/Icons/DockerIcon.tsx b/site/src/components/Icons/DockerIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const DockerIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 32 32">
diff --git a/site/src/components/Icons/EditSquare.tsx b/site/src/components/Icons/EditSquare.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const EditSquare = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 48 48">
diff --git a/site/src/components/Icons/ErrorIcon.tsx b/site/src/components/Icons/ErrorIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const ErrorIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 24 24">
diff --git a/site/src/components/Icons/FileCopyIcon.tsx b/site/src/components/Icons/FileCopyIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const FileCopyIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 20 20">
diff --git a/site/src/components/Icons/GitIcon.tsx b/site/src/components/Icons/GitIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const GitIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 96 96">
diff --git a/site/src/components/Icons/GitlabIcon.tsx b/site/src/components/Icons/GitlabIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const GitlabIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 194 186">
diff --git a/site/src/components/Icons/JetBrainsIcon.tsx b/site/src/components/Icons/JetBrainsIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const JetBrainsIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 100 100">
diff --git a/site/src/components/Icons/MarkdownIcon.tsx b/site/src/components/Icons/MarkdownIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const MarkdownIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 32 32">
diff --git a/site/src/components/Icons/RocketIcon.tsx b/site/src/components/Icons/RocketIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const RocketIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 24 24">
diff --git a/site/src/components/Icons/TerminalIcon.tsx b/site/src/components/Icons/TerminalIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const TerminalIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 24 24">
diff --git a/site/src/components/Icons/TerraformIcon.tsx b/site/src/components/Icons/TerraformIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const TerraformIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 32 32">
diff --git a/site/src/components/Icons/VSCodeIcon.tsx b/site/src/components/Icons/VSCodeIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const VSCodeIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 100 100">
diff --git a/site/src/components/Icons/VSCodeInsidersIcon.tsx b/site/src/components/Icons/VSCodeInsidersIcon.tsx
@@ -1,4 +1,5 @@
 import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
+import type { JSX } from "react";
 
 export const VSCodeInsidersIcon = (props: SvgIconProps): JSX.Element => (
 	<SvgIcon {...props} viewBox="0 0 256 256">
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
@@ -13,7 +13,7 @@ const widthBySize: Record<Size, number> = {
 	small: containerWidth / 3,
 };
 
-type MarginsProps = JSX.IntrinsicElements["div"] & {
+type MarginsProps = React.ComponentProps<"div"> & {
 	size?: Size;
 };
 
diff --git a/site/src/components/MoreMenu/MoreMenu.tsx b/site/src/components/MoreMenu/MoreMenu.tsx
@@ -16,7 +16,7 @@ import {
 } from "react";
 
 type MoreMenuContextValue = {
-	triggerRef: React.RefObject<HTMLButtonElement>;
+	triggerRef: React.RefObject<HTMLButtonElement | null>;
 	close: () => void;
 	open: () => void;
 	isOpen: boolean;
@@ -61,7 +61,7 @@ export const MoreMenuTrigger: FC<HTMLProps<HTMLButtonElement>> = ({
 }) => {
 	const menu = useMoreMenuContext();
 
-	return cloneElement(children as ReactElement, {
+	return cloneElement(children as ReactElement<any>, {
 		"aria-haspopup": "true",
 		...props,
 		ref: menu.triggerRef,
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
@@ -21,7 +21,7 @@ import {
 
 type TriggerMode = "hover" | "click";
 
-type TriggerRef = RefObject<HTMLElement>;
+type TriggerRef = RefObject<HTMLElement | null>;
 
 // Have to append ReactNode type to satisfy React's cloneElement function. It
 // has absolutely no bearing on what happens at runtime
@@ -62,7 +62,12 @@ type ControlledPopoverProps = BasePopoverProps & {
 
 export type PopoverProps = UncontrolledPopoverProps | ControlledPopoverProps;
 
-export const Popover: FC<PopoverProps> = (props) => {
+export const Popover: FC<PopoverProps> = ({
+	mode,
+	open,
+	onOpenChange,
+	children,
+}) => {
 	const hookId = useId();
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
 	const triggerRef: TriggerRef = useRef(null);
@@ -79,15 +84,13 @@ export const Popover: FC<PopoverProps> = (props) => {
 	const value: PopoverContextValue = {
 		triggerRef,
 		id: `${hookId}-popover`,
-		mode: props.mode ?? "click",
-		open: props.open ?? uncontrolledOpen,
-		setOpen: props.onOpenChange ?? setUncontrolledOpen,
+		mode: mode ?? "click",
+		open: open ?? uncontrolledOpen,
+		setOpen: onOpenChange ?? setUncontrolledOpen,
 	};
 
 	return (
-		<PopoverContext.Provider value={value}>
-			{props.children}
-		</PopoverContext.Provider>
+		<PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>
 	);
 };
 
@@ -113,10 +116,14 @@ type PopoverTriggerProps = Readonly<
 	}
 >;
 
-export const PopoverTrigger: FC<PopoverTriggerProps> = (props) => {
+export const PopoverTrigger: FC<PopoverTriggerProps> = ({
+	children,
+	onClick,
+	onPointerEnter,
+	onPointerLeave,
+	...elementProps
+}) => {
 	const popover = usePopover();
-	const { children, onClick, onPointerEnter, onPointerLeave, ...elementProps } =
-		props;
 
 	const clickProps = {
 		onClick: (event: PointerEvent<HTMLElement>) => {
diff --git a/site/src/components/Timeline/Timeline.tsx b/site/src/components/Timeline/Timeline.tsx
@@ -1,5 +1,5 @@
 import { TimelineDateRow } from "components/Timeline/TimelineDateRow";
-import { Fragment } from "react";
+import { Fragment, type JSX } from "react";
 
 type GetDateFn<TData> = (data: TData) => Date;
 
diff --git a/site/src/hooks/useClickable.ts b/site/src/hooks/useClickable.ts
@@ -23,7 +23,7 @@ export type UseClickableResult<
 	TElement extends ClickableElement = ClickableElement,
 	TRole extends ClickableAriaRole = ClickableAriaRole,
 > = Readonly<{
-	ref: RefObject<TElement>;
+	ref: RefObject<TElement | null>;
 	tabIndex: 0;
 	role: TRole;
 	onClick: MouseEventHandler<TElement>;
diff --git a/site/src/hooks/useClipboard.ts b/site/src/hooks/useClipboard.ts
@@ -44,7 +44,7 @@ export const useClipboard = (input: UseClipboardInput): UseClipboardResult => {
 	const { textToCopy, onError: errorCallback } = input;
 	const [showCopiedSuccess, setShowCopiedSuccess] = useState(false);
 	const [error, setError] = useState<Error>();
-	const timeoutIdRef = useRef<number | undefined>();
+	const timeoutIdRef = useRef<number | undefined>(undefined);
 
 	useEffect(() => {
 		const clearIdOnUnmount = () => window.clearTimeout(timeoutIdRef.current);
diff --git a/site/src/hooks/useWorkspaceBuildLogs.ts b/site/src/hooks/useWorkspaceBuildLogs.ts
@@ -9,7 +9,7 @@ export const useWorkspaceBuildLogs = (
 	enabled = true,
 ) => {
 	const [logs, setLogs] = useState<ProvisionerJobLog[]>();
-	const socket = useRef<WebSocket>();
+	const socket = useRef<WebSocket | undefined>(undefined);
 
 	useEffect(() => {
 		if (!buildId || !enabled) {
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -19,7 +19,7 @@ import { CopyButton } from "components/CopyButton/CopyButton";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { usePopover } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
-import type { FC } from "react";
+import type { FC, JSX } from "react";
 import { Link } from "react-router-dom";
 
 export const Language = {
diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
@@ -1,7 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
 import type { WorkspaceAgentLogSource } from "api/typesGenerated";
-import { type ComponentProps, forwardRef, useMemo } from "react";
+import { type ComponentProps, forwardRef, useMemo, type JSX } from "react";
 import { FixedSizeList as List } from "react-window";
 import {
 	AGENT_LOG_LINE_HEIGHT,
diff --git a/site/src/modules/resources/ResourceCard.stories.tsx b/site/src/modules/resources/ResourceCard.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
+import type { JSX } from "react";
 import {
 	MockProxyLatencies,
 	MockWorkspaceResource,
diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx
@@ -6,7 +6,7 @@ import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
-import { Children, type FC, useState } from "react";
+import { Children, type FC, useState, type JSX } from "react";
 import { ResourceAvatar } from "./ResourceAvatar";
 import { SensitiveValue } from "./SensitiveValue";
 
diff --git a/site/src/modules/resources/Resources.stories.tsx b/site/src/modules/resources/Resources.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import { ProxyContext, getPreferredProxy } from "contexts/ProxyContext";
+import type { JSX } from "react";
 import {
 	MockProxyLatencies,
 	MockWorkspaceResource,
diff --git a/site/src/modules/resources/Resources.tsx b/site/src/modules/resources/Resources.tsx
@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "components/Stack/Stack";
-import { type FC, useState } from "react";
+import { type FC, type JSX, useState } from "react";
 import { ResourceCard } from "./ResourceCard";
 
 const countAgents = (resource: WorkspaceResource) => {
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.tsx
@@ -6,7 +6,13 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { SimpleTreeView, TreeItem } from "@mui/x-tree-view";
 import { DockerIcon } from "components/Icons/DockerIcon";
-import { type CSSProperties, type ElementType, type FC, useState } from "react";
+import {
+	type CSSProperties,
+	type ElementType,
+	type FC,
+	type JSX,
+	useState,
+} from "react";
 import type { FileTree } from "utils/filetree";
 
 const isFolder = (content?: FileTree | string): content is FileTree =>
diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -19,7 +19,7 @@ type BuildLogsDrawerProps = {
 	open: boolean;
 	onClose: () => void;
 	templateVersion: TemplateVersion | undefined;
-	variablesSectionRef: React.RefObject<HTMLDivElement>;
+	variablesSectionRef: React.RefObject<HTMLDivElement | null>;
 };
 
 export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -180,7 +180,7 @@ export type CreateTemplateFormProps = (
 	jobError?: string;
 	logs?: ProvisionerJobLog[];
 	allowAdvancedScheduling: boolean;
-	variablesSectionRef: React.RefObject<HTMLDivElement>;
+	variablesSectionRef: React.RefObject<HTMLDivElement | null>;
 	showOrganizationPicker?: boolean;
 };
 
diff --git a/site/src/pages/CreateTemplatePage/types.ts b/site/src/pages/CreateTemplatePage/types.ts
@@ -3,7 +3,7 @@ import type { CreateTemplateOptions } from "api/queries/templates";
 export type CreateTemplatePageViewProps = {
 	onCreateTemplate: (options: CreateTemplateOptions) => Promise<void>;
 	onOpenBuildLogsDrawer: () => void;
-	variablesSectionRef: React.RefObject<HTMLDivElement>;
+	variablesSectionRef: React.RefObject<HTMLDivElement | null>;
 	error: unknown;
 	isCreating: boolean;
 };
diff --git a/site/src/pages/DeploymentSettingsPage/Fieldset.tsx b/site/src/pages/DeploymentSettingsPage/Fieldset.tsx
@@ -1,6 +1,6 @@
 import { type CSSObject, useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
-import type { FC, FormEventHandler, ReactNode } from "react";
+import type { FC, FormEventHandler, JSX, ReactNode } from "react";
 
 interface FieldsetProps {
 	children: ReactNode;
diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/ChartSection.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/ChartSection.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import Paper from "@mui/material/Paper";
-import type { FC, HTMLProps, ReactNode } from "react";
+import type { FC, HTMLProps, JSX, ReactNode } from "react";
 
 export interface ChartSectionProps {
 	/**
diff --git a/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/UserAuthSettingsPage/UserAuthSettingsPageView.tsx
@@ -2,6 +2,7 @@ import type { SerpentOption } from "api/typesGenerated";
 import { Badges, DisabledBadge, EnabledBadge } from "components/Badges/Badges";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
+import type { JSX } from "react";
 import {
 	deploymentGroupHasParent,
 	useDeploymentOptions,
diff --git a/site/src/pages/HealthPage/Content.tsx b/site/src/pages/HealthPage/Content.tsx
@@ -155,7 +155,7 @@ export const SectionLabel: FC<HTMLAttributes<HTMLHeadingElement>> = (props) => {
 };
 
 type PillProps = HTMLAttributes<HTMLDivElement> & {
-	icon: ReactElement;
+	icon: ReactElement<{ className?: string }>;
 };
 
 export const Pill = forwardRef<HTMLDivElement, PillProps>((props, ref) => {
diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx
@@ -159,7 +159,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 	}, [triggerPreview]);
 
 	// Automatically switch to the template preview tab when the build succeeds.
-	const previousVersion = useRef<TemplateVersion>();
+	const previousVersion = useRef<TemplateVersion | undefined>(undefined);
 	useEffect(() => {
 		if (!previousVersion.current) {
 			previousVersion.current = templateVersion;
@@ -542,6 +542,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									}}
 								>
 									<button
+										type="button"
 										disabled={!buildLogs}
 										css={styles.tab}
 										className={selectedTab === "logs" ? "active" : ""}
@@ -553,6 +554,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									</button>
 
 									<button
+										type="button"
 										disabled={!canPublish}
 										css={styles.tab}
 										className={selectedTab === "resources" ? "active" : ""}
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -99,7 +99,7 @@ const TerminalPage: FC = () => {
 	}, [handleWebLink]);
 
 	// Create the terminal!
-	const fitAddonRef = useRef<FitAddon>();
+	const fitAddonRef = useRef<FitAddon | undefined>(undefined);
 	useEffect(() => {
 		if (!terminalWrapperRef.current || config.isLoading) {
 			return;
diff --git a/site/src/pages/UsersPage/ResetPasswordDialog.tsx b/site/src/pages/UsersPage/ResetPasswordDialog.tsx
@@ -1,7 +1,7 @@
 import type * as TypesGen from "api/typesGenerated";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
-import type { FC } from "react";
+import type { FC, JSX } from "react";
 
 export interface ResetPasswordDialogProps {
 	open: boolean;
diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -120,7 +120,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 	);
 	const deadlinePlusEnabled = maxDeadlineIncrease >= 1;
 	const deadlineMinusEnabled = maxDeadlineDecrease >= 1;
-	const deadlineUpdateTimeout = useRef<number>();
+	const deadlineUpdateTimeout = useRef<number | undefined>(undefined);
 	const lastStableDeadline = useRef<Dayjs>(deadline);
 
 	const updateWorkspaceDeadlineQueryData = (deadline: Dayjs) => {
diff --git a/site/src/testHelpers/renderHelpers.tsx b/site/src/testHelpers/renderHelpers.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";`
	`2`	`+import type { JSX } from "react";`
`2`	`3`
`3`	`4`	`/**`
`4`	`5`	`* CoderIcon represents the cloud with brackets Coder brand icon. It does not`