coder · aslilac · Jan 26, 2024 · Jan 26, 2024
diff --git a/site/src/components/Conditionals/ChooseOne.tsx b/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;

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx b/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,

diff --git a/site/src/components/Expander/Expander.tsx b/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,

diff --git a/site/src/components/Form/Form.tsx b/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} />
 );
 

diff --git a/site/src/components/FullPageForm/FullPageForm.tsx b/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,

diff --git a/site/src/components/FullPageForm/FullPageHorizontalForm.tsx b/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

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/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} />

diff --git a/site/src/components/PageHeader/FullWidthPageHeader.tsx b/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

diff --git a/site/src/components/PageHeader/PageHeader.tsx b/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) => ({

diff --git a/site/src/components/PaginationWidget/PageButtons.tsx b/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,

diff --git a/site/src/components/Popover/Popover.tsx b/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"
 > & {

diff --git a/site/src/components/Resources/ResourceCard.tsx b/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>;

diff --git a/site/src/components/Resources/Resources.tsx b/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);

diff --git a/site/src/components/Resources/SSHButton/SSHButton.tsx b/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,