chore: remove most usage of PropsWithChildren (#11859)

site/src/components/Conditionals/ChooseOne.tsx

@@ -1,7 +1,13 @@
-import { Children, PropsWithChildren } from "react";
+import {
+  Children,
+  type FC,
+  type PropsWithChildren,
+  type ReactNode,
+} from "react";
 
 export interface CondProps {
   condition?: boolean;
+  children?: ReactNode;
 }
 
 /**
@@ -11,9 +17,7 @@ export interface CondProps {
  * @param condition boolean expression indicating whether the child should be rendered, or undefined
  * @returns child. Note that Cond alone does not enforce the condition; it should be used inside ChooseOne.
  */
-export const Cond = ({
-  children,
-}: PropsWithChildren<CondProps>): JSX.Element => {
+export const Cond: FC<CondProps> = ({ children }) => {
   return <>{children}</>;
 };
 
@@ -24,9 +28,7 @@ export const Cond = ({
  * @returns one of its children, or null if there are no children
  * @throws an error if its last child has a condition prop, or any non-final children do not have a condition prop
  */
-export const ChooseOne = ({
-  children,
-}: PropsWithChildren): JSX.Element | null => {
+export const ChooseOne: FC<PropsWithChildren> = ({ children }) => {
   const childArray = Children.toArray(children) as JSX.Element[];
   if (childArray.length === 0) {
     return null;

site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

@@ -1,10 +1,10 @@
 import DialogActions from "@mui/material/DialogActions";
 import { type Interpolation, type Theme } from "@emotion/react";
-import { type FC, type PropsWithChildren, type ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import {
   Dialog,
   DialogActionButtons,
-  DialogActionButtonsProps,
+  type DialogActionButtonsProps,
 } from "../Dialog";
 import type { ConfirmDialogType } from "../types";
 
@@ -98,7 +98,7 @@ const styles = {
  * Quick-use version of the Dialog component with slightly alternative styles,
  * great to use for dialogs that don't have any interaction beyond yes / no.
  */
-export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
+export const ConfirmDialog: FC<ConfirmDialogProps> = ({
   cancelText,
   confirmLoading,
   confirmText,

site/src/components/Expander/Expander.tsx

@@ -1,15 +1,16 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
+import { type FC, type ReactNode } from "react";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
-import { type FC, type PropsWithChildren } from "react";
 
 export interface ExpanderProps {
   expanded: boolean;
   setExpanded: (val: boolean) => void;
+  children?: ReactNode;
 }
 
-export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
+export const Expander: FC<ExpanderProps> = ({
   expanded,
   setExpanded,
   children,

site/src/components/Form/Form.tsx

@@ -5,6 +5,7 @@ import {
   type HTMLProps,
   type PropsWithChildren,
   useContext,
+  ReactNode,
 } from "react";
 import { AlphaBadge, DeprecatedBadge } from "components/Badges/Badges";
 import { Stack } from "components/Stack/Stack";
@@ -67,19 +68,20 @@ export const VerticalForm: FC<HTMLProps<HTMLFormElement>> = ({
   );
 };
 
-export const FormSection: FC<
-  PropsWithChildren & {
-    title: string | JSX.Element;
-    description: string | JSX.Element;
-    classes?: {
-      root?: string;
-      sectionInfo?: string;
-      infoTitle?: string;
-    };
-    alpha?: boolean;
-    deprecated?: boolean;
-  }
-> = ({
+interface FormSectionProps {
+  children?: ReactNode;
+  title: ReactNode;
+  description: ReactNode;
+  classes?: {
+    root?: string;
+    sectionInfo?: string;
+    infoTitle?: string;
+  };
+  alpha?: boolean;
+  deprecated?: boolean;
+}
+
+export const FormSection: FC<FormSectionProps> = ({
   children,
   title,
   description,
@@ -166,7 +168,7 @@ const styles = {
   },
 } satisfies Record<string, Interpolation<Theme>>;
 
-export const FormFooter = (props: Exclude<FormFooterProps, "styles">) => (
+export const FormFooter: FC<Exclude<FormFooterProps, "styles">> = (props) => (
   <BaseFormFooter {...props} styles={footerStyles} />
 );
 

site/src/components/FullPageForm/FullPageForm.tsx

@@ -9,9 +9,10 @@ import {
 export interface FullPageFormProps {
   title: string;
   detail?: ReactNode;
+  children?: ReactNode;
 }
 
-export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
+export const FullPageForm: FC<FullPageFormProps> = ({
   title,
   detail,
   children,

site/src/components/FullPageForm/FullPageHorizontalForm.tsx

@@ -1,21 +1,25 @@
+import Button from "@mui/material/Button";
+import { type FC, type ReactNode } from "react";
 import { Margins } from "components/Margins/Margins";
-import { FC, ReactNode } from "react";
 import {
   PageHeader,
   PageHeaderTitle,
   PageHeaderSubtitle,
 } from "components/PageHeader/PageHeader";
-import Button from "@mui/material/Button";
 
 export interface FullPageHorizontalFormProps {
   title: string;
   detail?: ReactNode;
   onCancel?: () => void;
+  children?: ReactNode;
 }
 
-export const FullPageHorizontalForm: FC<
-  React.PropsWithChildren<FullPageHorizontalFormProps>
-> = ({ title, detail, onCancel, children }) => {
+export const FullPageHorizontalForm: FC<FullPageHorizontalFormProps> = ({
+  title,
+  detail,
+  onCancel,
+  children,
+}) => {
   return (
     <Margins size="medium">
       <PageHeader

site/src/components/HelpTooltip/HelpTooltip.tsx

@@ -7,14 +7,15 @@ import {
   type HTMLAttributes,
   type ReactNode,
   forwardRef,
-  ComponentProps,
 } from "react";
 import { Stack } from "components/Stack/Stack";
 import { type CSSObject } from "@emotion/css";
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import {
   Popover,
+  type PopoverProps,
   PopoverContent,
+  type PopoverContentProps,
   PopoverTrigger,
   usePopover,
 } from "components/Popover/Popover";
@@ -25,13 +26,11 @@ type Size = "small" | "medium";
 
 export const HelpTooltipIcon = HelpIcon;
 
-export const HelpTooltip: FC<ComponentProps<typeof Popover>> = (props) => {
+export const HelpTooltip: FC<PopoverProps> = (props) => {
   return <Popover mode="hover" {...props} />;
 };
 
-export const HelpTooltipContent = (
-  props: ComponentProps<typeof PopoverContent>,
-) => {
+export const HelpTooltipContent: FC<PopoverContentProps> = (props) => {
   const theme = useTheme();
 
   return (
@@ -125,10 +124,12 @@ export const HelpTooltipText: FC<HTMLAttributes<HTMLParagraphElement>> = ({
   );
 };
 
-export const HelpTooltipLink: FC<PropsWithChildren<{ href: string }>> = ({
-  children,
-  href,
-}) => {
+interface HelpTooltipLink {
+  children?: ReactNode;
+  href: string;
+}
+
+export const HelpTooltipLink: FC<HelpTooltipLink> = ({ children, href }) => {
   return (
     <Link href={href} target="_blank" rel="noreferrer" css={styles.link}>
       <OpenInNewIcon css={styles.linkIcon} />

site/src/components/PageHeader/FullWidthPageHeader.tsx

@@ -1,9 +1,15 @@
 import { type CSSObject, useTheme } from "@emotion/react";
-import { type FC, type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
 
-export const FullWidthPageHeader: FC<
-  PropsWithChildren & { sticky?: boolean }
-> = ({ children, sticky = true }) => {
+interface FullWidthPageHeaderProps {
+  children?: ReactNode;
+  sticky?: boolean;
+}
+
+export const FullWidthPageHeader: FC<FullWidthPageHeaderProps> = ({
+  children,
+  sticky = true,
+}) => {
   const theme = useTheme();
   return (
     <header

site/src/components/PageHeader/PageHeader.tsx

@@ -4,9 +4,10 @@ import { Stack } from "../Stack/Stack";
 export interface PageHeaderProps {
   actions?: ReactNode;
   className?: string;
+  children?: ReactNode;
 }
 
-export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
+export const PageHeader: FC<PageHeaderProps> = ({
   children,
   actions,
   className,
@@ -48,9 +49,7 @@ export const PageHeader: FC<PropsWithChildren<PageHeaderProps>> = ({
   );
 };
 
-export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
-  children,
-}) => {
+export const PageHeaderTitle: FC<PropsWithChildren> = ({ children }) => {
   return (
     <h1
       css={{
@@ -67,9 +66,15 @@ export const PageHeaderTitle: FC<PropsWithChildren<unknown>> = ({
   );
 };
 
-export const PageHeaderSubtitle: FC<
-  PropsWithChildren<{ condensed?: boolean }>
-> = ({ children, condensed }) => {
+interface PageHeaderSubtitleProps {
+  children?: ReactNode;
+  condensed?: boolean;
+}
+
+export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
+  children,
+  condensed,
+}) => {
   return (
     <h2
       css={(theme) => ({

site/src/components/PaginationWidget/PageButtons.tsx

@@ -1,6 +1,6 @@
-import { type FC, type PropsWithChildren } from "react";
 import Button from "@mui/material/Button";
 import { useTheme } from "@emotion/react";
+import { type FC, type ReactNode } from "react";
 
 type NumberedPageButtonProps = {
   pageNumber: number;
@@ -31,9 +31,10 @@ export const NumberedPageButton: FC<NumberedPageButtonProps> = ({
   );
 };
 
-type PlaceholderPageButtonProps = PropsWithChildren<{
+type PlaceholderPageButtonProps = {
   pagesOmitted: number;
-}>;
+  children?: ReactNode;
+};
 
 export const PlaceholderPageButton: FC<PlaceholderPageButtonProps> = ({
   pagesOmitted,
@@ -50,14 +51,14 @@ export const PlaceholderPageButton: FC<PlaceholderPageButtonProps> = ({
   );
 };
 
-type BasePageButtonProps = PropsWithChildren<{
+type BasePageButtonProps = {
+  children?: ReactNode;
+  onClick?: () => void;
   name: string;
   "aria-label": string;
-
-  onClick?: () => void;
   highlighted?: boolean;
   disabled?: boolean;
-}>;
+};
 
 const BasePageButton: FC<BasePageButtonProps> = ({
   children,

site/src/components/Popover/Popover.tsx

@@ -40,7 +40,7 @@ const PopoverContext = createContext<PopoverContextValue | undefined>(
   undefined,
 );
 
-interface PopoverProps {
+export interface PopoverProps {
   children: ReactNode | ((popover: PopoverContextValue) => ReactNode); // Allows inline usage
   mode?: TriggerMode;
   isDefaultOpen?: boolean;
@@ -112,7 +112,7 @@ export const PopoverTrigger = (
 
 type Horizontal = "left" | "right";
 
-type PopoverContentProps = Omit<
+export type PopoverContentProps = Omit<
   MuiPopoverProps,
   "open" | "onClose" | "anchorEl"
 > & {

site/src/components/Resources/ResourceCard.tsx

@@ -76,7 +76,7 @@ export interface ResourceCardProps {
   agentRow: (agent: WorkspaceAgent) => JSX.Element;
 }
 
-const p = ({ children }: PropsWithChildren) => {
+const p: FC<PropsWithChildren> = ({ children }) => {
   const childrens = Children.toArray(children);
   if (childrens.every((child) => typeof child === "string")) {
     return <CopyableValue value={childrens.join("")}>{children}</CopyableValue>;

site/src/components/Resources/Resources.tsx

@@ -1,11 +1,10 @@
-import { type Interpolation, type Theme } from "@emotion/react";
 import Button from "@mui/material/Button";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { type FC, useState } from "react";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "../Stack/Stack";
 import { ResourceCard } from "./ResourceCard";
-import { useTheme } from "@mui/material/styles";
 
 const countAgents = (resource: WorkspaceResource) => {
   return resource.agents ? resource.agents.length : 0;
@@ -16,10 +15,7 @@ interface ResourcesProps {
   agentRow: (agent: WorkspaceAgent, numberOfAgents: number) => JSX.Element;
 }
 
-export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
-  resources,
-  agentRow,
-}) => {
+export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
   const theme = useTheme();
   const [shouldDisplayHideResources, setShouldDisplayHideResources] =
     useState(false);

site/src/components/Resources/SSHButton/SSHButton.tsx

@@ -1,5 +1,5 @@
 import { type Interpolation, type Theme } from "@emotion/react";
-import { type FC, type PropsWithChildren } from "react";
+import { type FC } from "react";
 import {
   HelpTooltipLink,
   HelpTooltipLinksGroup,
@@ -24,7 +24,7 @@ export interface SSHButtonProps {
   sshPrefix?: string;
 }
 
-export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
+export const SSHButton: FC<SSHButtonProps> = ({
   workspaceName,
   agentName,
   isDefaultOpen = false,

site/src/components/TemplateResourcesTable/TemplateResourcesTable.tsx

@@ -1,15 +1,15 @@
+import { type FC } from "react";
+import type { WorkspaceResource } from "api/typesGenerated";
 import { AgentRowPreview } from "components/Resources/AgentRowPreview";
 import { Resources } from "components/Resources/Resources";
-import { FC } from "react";
-import { WorkspaceResource } from "api/typesGenerated";
 
 export interface TemplateResourcesProps {
   resources: WorkspaceResource[];
 }
 
-export const TemplateResourcesTable: FC<
-  React.PropsWithChildren<TemplateResourcesProps>
-> = ({ resources }) => {
+export const TemplateResourcesTable: FC<TemplateResourcesProps> = ({
+  resources,
+}) => {
   return (
     <Resources
       resources={resources}

site/src/components/Timeline/TimelineEntry.tsx

@@ -1,16 +1,14 @@
 import TableRow, { type TableRowProps } from "@mui/material/TableRow";
-import { type PropsWithChildren, forwardRef } from "react";
+import { forwardRef } from "react";
 
-type TimelineEntryProps = PropsWithChildren<
-  TableRowProps & {
-    clickable?: boolean;
-  }
->;
+interface TimelineEntryProps extends TableRowProps {
+  clickable?: boolean;
+}
 
-export const TimelineEntry = forwardRef(function TimelineEntry(
-  { children, clickable = true, ...props }: TimelineEntryProps,
-  ref?: React.ForwardedRef<HTMLTableRowElement>,
-) {
+export const TimelineEntry = forwardRef<
+  HTMLTableRowElement,
+  TimelineEntryProps
+>(function TimelineEntry({ children, clickable = true, ...props }, ref) {
   return (
     <TableRow
       ref={ref}

site/src/pages/DeploySettingsPage/GeneralSettingsPage/ChartSection.tsx

@@ -1,22 +1,18 @@
 import { useTheme } from "@emotion/react";
 import Paper from "@mui/material/Paper";
-import {
-  type HTMLProps,
-  type ReactNode,
-  type FC,
-  type PropsWithChildren,
-} from "react";
+import { type HTMLProps, type ReactNode, type FC } from "react";
 
 export interface ChartSectionProps {
   /**
    * action appears in the top right of the section card
    */
   action?: ReactNode;
+  children?: ReactNode;
   contentsProps?: HTMLProps<HTMLDivElement>;
   title?: string | JSX.Element;
 }
 
-export const ChartSection: FC<PropsWithChildren<ChartSectionProps>> = ({
+export const ChartSection: FC<ChartSectionProps> = ({
   action,
   children,
   contentsProps,

site/src/pages/LoginPage/SignInForm.tsx

@@ -1,11 +1,11 @@
 import { type Interpolation, type Theme } from "@emotion/react";
-import { ReactNode, type FC } from "react";
+import { type FC, type ReactNode } from "react";
 import type { AuthMethods } from "api/typesGenerated";
-import { PasswordSignInForm } from "./PasswordSignInForm";
-import { OAuthSignInForm } from "./OAuthSignInForm";
 import { Alert } from "components/Alert/Alert";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { getApplicationName } from "utils/appearance";
+import { PasswordSignInForm } from "./PasswordSignInForm";
+import { OAuthSignInForm } from "./OAuthSignInForm";
 
 export const Language = {
   emailLabel: "Email",
@@ -69,7 +69,7 @@ export interface SignInFormProps {
   onSubmit: (credentials: { email: string; password: string }) => void;
 }
 
-export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
+export const SignInForm: FC<SignInFormProps> = ({
   authMethods,
   redirectTo,
   isSigningIn,

site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

@@ -181,7 +181,7 @@ export interface TemplatePermissionsPageViewProps {
 }
 
 export const TemplatePermissionsPageView: FC<
-  React.PropsWithChildren<TemplatePermissionsPageViewProps>
+  TemplatePermissionsPageViewProps
 > = ({
   templateACL,
   canUpdatePermissions,

site/src/pages/TemplateSettingsPage/TemplateSchedulePage/ScheduleDialog.tsx

@@ -1,5 +1,5 @@
 import DialogActions from "@mui/material/DialogActions";
-import { type FC, type PropsWithChildren } from "react";
+import { type FC } from "react";
 import Checkbox from "@mui/material/Checkbox";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import { Stack } from "@mui/system";
@@ -18,7 +18,7 @@ export interface ScheduleDialogProps extends ConfirmDialogProps {
   readonly deletionValueChanged: boolean;
 }
 
-export const ScheduleDialog: FC<PropsWithChildren<ScheduleDialogProps>> = ({
+export const ScheduleDialog: FC<ScheduleDialogProps> = ({
   cancelText,
   confirmLoading,
   disabled = false,

site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx

@@ -1,6 +1,6 @@
 import Button from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
-import { type FC, type PropsWithChildren } from "react";
+import { type FC } from "react";
 import { useTheme } from "@emotion/react";
 import type { GitSSHKey } from "api/typesGenerated";
 import { CodeExample } from "components/CodeExample/CodeExample";
@@ -14,7 +14,7 @@ export interface SSHKeysPageViewProps {
   onRegenerateClick: () => void;
 }
 
-export const SSHKeysPageView: FC<PropsWithChildren<SSHKeysPageViewProps>> = ({
+export const SSHKeysPageView: FC<SSHKeysPageViewProps> = ({
   isLoading,
   getSSHKeyError,
   sshKey,

site/src/pages/UserSettingsPage/SchedulePage/ScheduleForm.tsx

@@ -1,20 +1,20 @@
 import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import LoadingButton from "@mui/lab/LoadingButton";
 import { FormikContextType, useFormik } from "formik";
-import { FC, useEffect, useState } from "react";
+import { type FC, useEffect, useState } from "react";
 import * as Yup from "yup";
 import { getFormHelpers } from "utils/formUtils";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { Form, FormFields } from "components/Form/Form";
-import {
+import type {
   UpdateUserQuietHoursScheduleRequest,
   UserQuietHoursScheduleResponse,
 } from "api/typesGenerated";
-import MenuItem from "@mui/material/MenuItem";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Form, FormFields } from "components/Form/Form";
 import { Stack } from "components/Stack/Stack";
-import { timeZones, getPreferredTimezone } from "utils/timeZones";
 import { Alert } from "components/Alert/Alert";
 import { timeToCron, quietHoursDisplay, validTime } from "utils/schedule";
-import LoadingButton from "@mui/lab/LoadingButton";
+import { timeZones, getPreferredTimezone } from "utils/timeZones";
 
 export interface ScheduleFormValues {
   time: string;
@@ -45,7 +45,7 @@ export interface ScheduleFormProps {
   now?: Date;
 }
 
-export const ScheduleForm: FC<React.PropsWithChildren<ScheduleFormProps>> = ({
+export const ScheduleForm: FC<ScheduleFormProps> = ({
   isLoading,
   initialValues,
   submitError,

site/src/pages/UserSettingsPage/WorkspaceProxyPage/WorkspaceProxyView.tsx

@@ -4,15 +4,15 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import { type FC } from "react";
+import type { Region } from "api/typesGenerated";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import { Stack } from "components/Stack/Stack";
 import { TableEmpty } from "components/TableEmpty/TableEmpty";
 import { TableLoader } from "components/TableLoader/TableLoader";
-import { FC } from "react";
-import { Region } from "api/typesGenerated";
-import { ProxyRow } from "./WorkspaceProxyRow";
 import { ProxyLatencyReport } from "contexts/useProxyLatency";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { ProxyRow } from "./WorkspaceProxyRow";
 
 export interface WorkspaceProxyViewProps {
   proxies?: Region[];
@@ -24,9 +24,7 @@ export interface WorkspaceProxyViewProps {
   selectProxyError?: unknown;
 }
 
-export const WorkspaceProxyView: FC<
-  React.PropsWithChildren<WorkspaceProxyViewProps>
-> = ({
+export const WorkspaceProxyView: FC<WorkspaceProxyViewProps> = ({
   proxies,
   proxyLatencies,
   getWorkspaceProxiesError,

site/src/pages/UsersPage/ResetPasswordDialog.tsx

@@ -22,9 +22,14 @@ export const Language = {
   confirmText: "Reset password",
 };
 
-export const ResetPasswordDialog: FC<
-  React.PropsWithChildren<ResetPasswordDialogProps>
-> = ({ open, onClose, onConfirm, user, newPassword, loading }) => {
+export const ResetPasswordDialog: FC<ResetPasswordDialogProps> = ({
+  open,
+  onClose,
+  onConfirm,
+  user,
+  newPassword,
+  loading,
+}) => {
   const description = (
     <>
       <p>{Language.message(user?.username)}</p>

site/src/pages/UsersPage/UsersPageView.tsx

@@ -1,13 +1,12 @@
 import { type ComponentProps, type FC } from "react";
 import type * as TypesGen from "api/typesGenerated";
 import { type GroupsByUserId } from "api/queries/groups";
-
-import { UsersTable } from "./UsersTable/UsersTable";
-import { UsersFilter } from "./UsersFilter";
 import {
   PaginationContainer,
   type PaginationResult,
 } from "components/PaginationWidget/PaginationContainer";
+import { UsersTable } from "./UsersTable/UsersTable";
+import { UsersFilter } from "./UsersFilter";
 
 export interface UsersPageViewProps {
   users?: TypesGen.User[];
@@ -35,7 +34,7 @@ export interface UsersPageViewProps {
   usersQuery: PaginationResult;
 }
 
-export const UsersPageView: FC<React.PropsWithChildren<UsersPageViewProps>> = ({
+export const UsersPageView: FC<UsersPageViewProps> = ({
   users,
   roles,
   onSuspendUser,

site/src/pages/UsersPage/UsersTable/UsersTable.tsx

@@ -1,13 +1,12 @@
-import { type FC } from "react";
-import type * as TypesGen from "api/typesGenerated";
-import { type GroupsByUserId } from "api/queries/groups";
-
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import { type FC } from "react";
+import type * as TypesGen from "api/typesGenerated";
+import { type GroupsByUserId } from "api/queries/groups";
 import { Stack } from "components/Stack/Stack";
 import { TableColumnHelpTooltip } from "./TableColumnHelpTooltip";
 import { UsersTableBody } from "./UsersTableBody";
@@ -45,7 +44,7 @@ export interface UsersTableProps {
   authMethods?: TypesGen.AuthMethods;
 }
 
-export const UsersTable: FC<React.PropsWithChildren<UsersTableProps>> = ({
+export const UsersTable: FC<UsersTableProps> = ({
   users,
   roles,
   onSuspendUser,

site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx

@@ -62,9 +62,7 @@ interface UsersTableBodyProps {
   oidcRoleSyncEnabled: boolean;
 }
 
-export const UsersTableBody: FC<
-  React.PropsWithChildren<UsersTableBodyProps>
-> = ({
+export const UsersTableBody: FC<UsersTableBodyProps> = ({
   users,
   authMethods,
   roles,

site/src/pages/WorkspacePage/ResourceMetadata.tsx

@@ -1,9 +1,14 @@
+import { type Interpolation, type Theme } from "@emotion/react";
+import {
+  Children,
+  type FC,
+  type HTMLAttributes,
+  type PropsWithChildren,
+} from "react";
+import type { WorkspaceResource } from "api/typesGenerated";
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
 import { SensitiveValue } from "components/Resources/SensitiveValue";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
-import { WorkspaceResource } from "api/typesGenerated";
-import { Children, FC, HTMLAttributes, PropsWithChildren } from "react";
-import { Interpolation, Theme } from "@emotion/react";
 
 type ResourceMetadataProps = Omit<HTMLAttributes<HTMLElement>, "resource"> & {
   resource: WorkspaceResource;
@@ -49,7 +54,7 @@ export const ResourceMetadata: FC<ResourceMetadataProps> = ({
   );
 };
 
-const MetaValue = ({ children }: PropsWithChildren) => {
+const MetaValue: FC<PropsWithChildren> = ({ children }) => {
   const childrenArray = Children.toArray(children);
   if (childrenArray.every((child) => typeof child === "string")) {
     return (

site/src/pages/WorkspacePage/WorkspaceDeletedBanner.tsx

@@ -1,14 +1,14 @@
 import Button from "@mui/material/Button";
-import { FC } from "react";
+import { type FC } from "react";
 import { Alert } from "components/Alert/Alert";
 
 export interface WorkspaceDeletedBannerProps {
   handleClick: () => void;
 }
 
-export const WorkspaceDeletedBanner: FC<
-  React.PropsWithChildren<WorkspaceDeletedBannerProps>
-> = ({ handleClick }) => {
+export const WorkspaceDeletedBanner: FC<WorkspaceDeletedBannerProps> = ({
+  handleClick,
+}) => {
   const NewWorkspaceButton = (
     <Button onClick={handleClick} size="small" variant="text">
       Create new workspace

site/src/pages/WorkspaceSettingsPage/WorkspaceSchedulePage/WorkspaceScheduleForm.tsx

@@ -33,7 +33,6 @@ import Tooltip from "@mui/material/Tooltip";
 import { formatDuration, intervalToDuration } from "date-fns";
 import { DisabledBadge } from "components/Badges/Badges";
 import { TemplateAutostartRequirement } from "api/typesGenerated";
-import { PropsWithChildren } from "react";
 
 // REMARK: some plugins depend on utc, so it's listed first. Otherwise they're
 //         sorted alphabetically.
@@ -184,9 +183,7 @@ export const validationSchema = Yup.object({
     }),
 });
 
-export const WorkspaceScheduleForm: FC<
-  PropsWithChildren<WorkspaceScheduleFormProps>
-> = ({
+export const WorkspaceScheduleForm: FC<WorkspaceScheduleFormProps> = ({
   submitScheduleError,
   initialValues,
   isLoading,