fix a bunch of weird things

coder · aslilac · Mar 5, 2024 · Mar 4, 2024 · Mar 4, 2024 · Mar 4, 2024
commit 4efd2909d043ae0ca86e6cbef0c42eb3d857058c
diff --git a/site/e2e/helpers.ts b/site/e2e/helpers.ts
@@ -1,8 +1,7 @@
 import type { Page } from "@playwright/test";
 import { expect } from "@playwright/test";
 import axios from "axios";
-import type { ChildProcess } from "child_process";
-import { exec, spawn } from "child_process";
+import { type ChildProcess, exec, spawn } from "child_process";
 import { randomUUID } from "crypto";
 import express from "express";
 import capitalize from "lodash/capitalize";
@@ -16,15 +15,17 @@ import type {
 import { TarWriter } from "utils/tar";
 import { prometheusPort, agentPProfPort } from "./constants";
 import { port } from "./playwright.config";
-import type {
-  App,
-  ParseComplete,
-  PlanComplete,
-  ApplyComplete,
-  Resource,
-  RichParameter,
+import {
+  Agent,
+  type App,
+  AppSharingLevel,
+  type ParseComplete,
+  type PlanComplete,
+  type ApplyComplete,
+  type Resource,
+  Response,
+  type RichParameter,
 } from "./provisionerGenerated";
-import { Agent, AppSharingLevel, Response } from "./provisionerGenerated";
 
 // createWorkspace creates a workspace for a template.
 // It does not wait for it to be running, but it does navigate to the page.

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1,7 +1,7 @@
 import axios, { isAxiosError } from "axios";
 import type dayjs from "dayjs";
 import userAgentParser from "ua-parser-js";
-import { delay } from "../utils/delay";
+import { delay } from "utils/delay";
 import * as TypesGen from "./typesGenerated";
 // This needs to include the `../`, otherwise it breaks when importing into
 // vscode-coder.

diff --git a/site/src/api/queries/settings.ts b/site/src/api/queries/settings.ts
@@ -1,8 +1,8 @@
-import { type QueryClient, type QueryOptions } from "react-query";
+import type { QueryClient, QueryOptions } from "react-query";
 import * as API from "api/api";
-import {
-  type UserQuietHoursScheduleResponse,
-  type UpdateUserQuietHoursScheduleRequest,
+import type {
+  UpdateUserQuietHoursScheduleRequest,
+  UserQuietHoursScheduleResponse,
 } from "api/typesGenerated";
 
 export const userQuietHoursScheduleKey = (userId: string) => [

diff --git a/site/src/api/queries/workspaces.ts b/site/src/api/queries/workspaces.ts
@@ -1,8 +1,8 @@
 import type { Dayjs } from "dayjs";
 import type {
   QueryClient,
-  UseMutationOptions,
   QueryOptions,
+  UseMutationOptions,
 } from "react-query";
 import * as API from "api/api";
 import { putWorkspaceExtension } from "api/api";

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -1,8 +1,8 @@
 import { useTheme } from "@emotion/react";
-import type { ChartOptions } from "chart.js";
 import {
   CategoryScale,
   Chart as ChartJS,
+  type ChartOptions,
   defaults,
   Filler,
   Legend,

diff --git a/site/src/components/Alert/ErrorAlert.tsx b/site/src/components/Alert/ErrorAlert.tsx
@@ -1,8 +1,7 @@
 import AlertTitle from "@mui/material/AlertTitle";
 import type { FC } from "react";
 import { getErrorMessage, getErrorDetail } from "api/errors";
-import type { AlertProps } from "./Alert";
-import { Alert, AlertDetail } from "./Alert";
+import { Alert, AlertDetail, type AlertProps } from "./Alert";
 
 export const ErrorAlert: FC<
   Omit<AlertProps, "severity" | "children"> & { error: unknown }

diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
@@ -1,7 +1,11 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
-import { forwardRef } from "react";
-import type { FC, HTMLAttributes, PropsWithChildren } from "react";
+import {
+  type FC,
+  forwardRef,
+  type HTMLAttributes,
+  type PropsWithChildren,
+} from "react";
 import { Stack } from "components/Stack/Stack";
 
 const styles = {

diff --git a/site/src/components/BuildAvatar/BuildAvatar.tsx b/site/src/components/BuildAvatar/BuildAvatar.tsx
@@ -3,8 +3,7 @@ import { useTheme } from "@emotion/react";
 import Badge from "@mui/material/Badge";
 import { type FC } from "react";
 import type { WorkspaceBuild } from "api/typesGenerated";
-import type { AvatarProps } from "components/Avatar/Avatar";
-import { Avatar } from "components/Avatar/Avatar";
+import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
 import { BuildIcon } from "components/BuildIcon/BuildIcon";
 import { useClassName } from "hooks/useClassName";
 import { getDisplayWorkspaceBuildStatus } from "utils/workspace";

diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
@@ -1,8 +1,8 @@
 import { type Interpolation, type Theme } from "@emotion/react";
-import type { LoadingButtonProps } from "@mui/lab/LoadingButton";
-import LoadingButton from "@mui/lab/LoadingButton";
-import type { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
-import MuiDialog from "@mui/material/Dialog";
+import LoadingButton, { type LoadingButtonProps } from "@mui/lab/LoadingButton";
+import MuiDialog, {
+  type DialogProps as MuiDialogProps,
+} from "@mui/material/Dialog";
 import { type FC, type ReactNode } from "react";
 import type { ConfirmDialogType } from "./types";
 

diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
@@ -3,8 +3,7 @@ import { getUsers } from "api/api";
 import { useMe } from "contexts/auth/useMe";
 import { UserAvatar } from "../UserAvatar/UserAvatar";
 import { FilterSearchMenu, OptionItem } from "./filter";
-import type { UseFilterMenuOptions } from "./menu";
-import { useFilterMenu } from "./menu";
+import { useFilterMenu, type UseFilterMenuOptions } from "./menu";
 import type { BaseOption } from "./options";
 
 export type UserOption = BaseOption & {

diff --git a/site/src/components/FullPageForm/FullPageForm.stories.tsx b/site/src/components/FullPageForm/FullPageForm.stories.tsx
@@ -1,12 +1,12 @@
 import TextField from "@mui/material/TextField";
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
+import { type FC } from "react";
 import { FormFooter } from "../FormFooter/FormFooter";
 import { Stack } from "../Stack/Stack";
-import type { FullPageFormProps } from "./FullPageForm";
-import { FullPageForm } from "./FullPageForm";
+import { FullPageForm, type FullPageFormProps } from "./FullPageForm";
 
-const Template = (props: FullPageFormProps) => (
+const Template: FC<FullPageFormProps> = (props) => (
   <FullPageForm {...props}>
     <form
       onSubmit={(e) => {

diff --git a/site/src/components/FullPageLayout/Topbar.tsx b/site/src/components/FullPageLayout/Topbar.tsx
@@ -1,19 +1,16 @@
 import { css } from "@emotion/css";
 import { useTheme } from "@emotion/react";
-import type { ButtonProps } from "@mui/material/Button";
-import Button from "@mui/material/Button";
-import type { IconButtonProps } from "@mui/material/IconButton";
-import IconButton from "@mui/material/IconButton";
+import Button, { type ButtonProps } from "@mui/material/Button";
+import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
 import {
+  cloneElement,
   type FC,
   type ForwardedRef,
+  forwardRef,
   type HTMLAttributes,
   type ReactElement,
-  cloneElement,
-  forwardRef,
 } from "react";
-import type { AvatarProps } from "components/Avatar/Avatar";
-import { ExternalAvatar } from "components/Avatar/Avatar";
+import { type AvatarProps, ExternalAvatar } from "components/Avatar/Avatar";
 
 export const Topbar: FC<HTMLAttributes<HTMLElement>> = (props) => {
   const theme = useTheme();

diff --git a/site/src/components/GlobalSnackbar/utils.test.ts b/site/src/components/GlobalSnackbar/utils.test.ts
@@ -1,9 +1,10 @@
-import type { NotificationMsg, NotificationTextPrefixed } from "./utils";
 import {
   displayError,
   displaySuccess,
   isNotificationTextPrefixed,
   MsgType,
+  type NotificationMsg,
+  type NotificationTextPrefixed,
   SnackbarEventType,
 } from "./utils";
 

diff --git a/site/src/components/Icons/CoderIcon.tsx b/site/src/components/Icons/CoderIcon.tsx
@@ -1,5 +1,4 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 /**
  * 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,5 +1,4 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 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,5 +1,4 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 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,5 +1,4 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 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,7 +1,6 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
-export const FileCopyIcon = (props: SvgIconProps) => (
+export const FileCopyIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 20 20">
     <path
       d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"

diff --git a/site/src/components/Icons/GitIcon.tsx b/site/src/components/Icons/GitIcon.tsx
@@ -1,7 +1,6 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
-export const GitIcon = (props: SvgIconProps) => (
+export const GitIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 96 96">
     <path d="M92.71 44.408 52.591 4.291c-2.31-2.311-6.057-2.311-8.369 0l-8.33 8.332L46.459 23.19c2.456-.83 5.272-.273 7.229 1.685 1.969 1.97 2.521 4.81 1.67 7.275l10.186 10.185c2.465-.85 5.307-.3 7.275 1.671 2.75 2.75 2.75 7.206 0 9.958-2.752 2.751-7.208 2.751-9.961 0-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997c.67.332 1.303.774 1.861 1.332 2.75 2.75 2.75 7.206 0 9.959-2.75 2.749-7.209 2.749-9.957 0-2.75-2.754-2.75-7.21 0-9.959.68-.679 1.467-1.193 2.307-1.537v-25.23c-.84-.344-1.625-.853-2.307-1.537-2.083-2.082-2.584-5.14-1.516-7.698L31.798 16.715 4.288 44.222c-2.311 2.313-2.311 6.06 0 8.371l40.121 40.118c2.31 2.311 6.056 2.311 8.369 0L92.71 52.779c2.311-2.311 2.311-6.06 0-8.371z" />
   </SvgIcon>

diff --git a/site/src/components/Icons/GitlabIcon.tsx b/site/src/components/Icons/GitlabIcon.tsx
@@ -1,5 +1,4 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 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,7 +1,6 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
-export const JetBrainsIcon = (props: SvgIconProps) => (
+export const JetBrainsIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 100 100">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="180">
       <path

diff --git a/site/src/components/Icons/MarkdownIcon.tsx b/site/src/components/Icons/MarkdownIcon.tsx
@@ -1,5 +1,4 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 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,7 +1,6 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
-export const RocketIcon = (props: SvgIconProps) => (
+export const RocketIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 24 24">
     <path d="M12 2.5s4.5 2.04 4.5 10.5c0 2.49-1.04 5.57-1.6 7H9.1c-.56-1.43-1.6-4.51-1.6-7C7.5 4.54 12 2.5 12 2.5zm2 8.5c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-6.31 9.52c-.48-1.23-1.52-4.17-1.67-6.87l-1.13.75c-.56.38-.89 1-.89 1.67V22l3.69-1.48zM20 22v-5.93c0-.67-.33-1.29-.89-1.66l-1.13-.75c-.15 2.69-1.2 5.64-1.67 6.87L20 22z" />
   </SvgIcon>

diff --git a/site/src/components/Icons/TerminalIcon.tsx b/site/src/components/Icons/TerminalIcon.tsx
@@ -1,7 +1,6 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
-export const TerminalIcon = (props: SvgIconProps) => (
+export const TerminalIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 24 24">
     <path d="M20 4H4c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H4V8h16v10zm-2-1h-6v-2h6v2zM7.5 17l-1.41-1.41L8.67 13l-2.59-2.59L7.5 9l4 4-4 4z" />
   </SvgIcon>

diff --git a/site/src/components/Icons/TerraformIcon.tsx b/site/src/components/Icons/TerraformIcon.tsx
@@ -1,5 +1,4 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
 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,7 +1,6 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
-export const VSCodeIcon = (props: SvgIconProps) => (
+export const VSCodeIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 100 100">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
       <mask

diff --git a/site/src/components/Icons/VSCodeInsidersIcon.tsx b/site/src/components/Icons/VSCodeInsidersIcon.tsx
@@ -1,7 +1,6 @@
-import type { SvgIconProps } from "@mui/material/SvgIcon";
-import SvgIcon from "@mui/material/SvgIcon";
+import SvgIcon, { type SvgIconProps } from "@mui/material/SvgIcon";
 
-export const VSCodeInsidersIcon = (props: SvgIconProps) => (
+export const VSCodeInsidersIcon = (props: SvgIconProps): JSX.Element => (
   <SvgIcon {...props} viewBox="0 0 256 256">
     <svg
       width="256"

diff --git a/site/src/components/MoreMenu/MoreMenu.tsx b/site/src/components/MoreMenu/MoreMenu.tsx
@@ -1,18 +1,18 @@
 import MoreVertOutlined from "@mui/icons-material/MoreVertOutlined";
-import type { IconButtonProps } from "@mui/material/IconButton";
-import IconButton from "@mui/material/IconButton";
-import type { MenuProps } from "@mui/material/Menu";
-import Menu from "@mui/material/Menu";
-import type { MenuItemProps } from "@mui/material/MenuItem";
-import MenuItem from "@mui/material/MenuItem";
-import type { ReactNode, HTMLProps, ReactElement } from "react";
+import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
+import Menu, { type MenuProps } from "@mui/material/Menu";
+import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
 import {
-  useRef,
-  useState,
-  createContext,
-  useContext,
   cloneElement,
+  createContext,
+  type FC,
   forwardRef,
+  type HTMLProps,
+  type PropsWithChildren,
+  type ReactElement,
+  useContext,
+  useRef,
+  useState,
 } from "react";
 
 type MoreMenuContextValue = {
@@ -26,7 +26,7 @@ const MoreMenuContext = createContext<MoreMenuContextValue | undefined>(
   undefined,
 );
 
-export const MoreMenu = (props: { children: ReactNode }) => {
+export const MoreMenu: FC<PropsWithChildren> = ({ children }) => {
   const triggerRef = useRef<HTMLButtonElement>(null);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -40,7 +40,7 @@ export const MoreMenu = (props: { children: ReactNode }) => {
 
   return (
     <MoreMenuContext.Provider value={{ close, open, triggerRef, isOpen }}>
-      {props.children}
+      {children}
     </MoreMenuContext.Provider>
   );
 };
@@ -55,10 +55,10 @@ const useMoreMenuContext = () => {
   return ctx;
 };
 
-export const MoreMenuTrigger = ({
+export const MoreMenuTrigger: FC<HTMLProps<HTMLButtonElement>> = ({
   children,
   ...props
-}: HTMLProps<HTMLButtonElement>) => {
+}) => {
   const menu = useMoreMenuContext();
 
   return cloneElement(children as ReactElement, {
@@ -84,7 +84,9 @@ export const ThreeDotsButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
-export const MoreMenuContent = (props: Omit<MenuProps, "open" | "onClose">) => {
+export const MoreMenuContent: FC<Omit<MenuProps, "open" | "onClose">> = (
+  props,
+) => {
   const menu = useMoreMenuContext();
 
   return (
@@ -99,10 +101,16 @@ export const MoreMenuContent = (props: Omit<MenuProps, "open" | "onClose">) => {
   );
 };
 
-export const MoreMenuItem = (
-  props: MenuItemProps & { closeOnClick?: boolean; danger?: boolean },
-) => {
-  const { closeOnClick = true, danger = false, ...menuItemProps } = props;
+interface MoreMenuItemProps extends MenuItemProps {
+  closeOnClick?: boolean;
+  danger?: boolean;
+}
+
+export const MoreMenuItem: FC<MoreMenuItemProps> = ({
+  closeOnClick = true,
+  danger = false,
+  ...menuItemProps
+}) => {
   const ctx = useContext(MoreMenuContext);
 
   if (!ctx) {