chore: no inline prop type definitions

coder · aslilac · Jan 2, 2024 · Dec 21, 2023 · Dec 21, 2023 · Dec 21, 2023
commit dec9d721800ad8aa8fd1d8e9e1f5c856eb6a0c0c
@@ -1,13 +1,14 @@
+import { type FC } from "react";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { LicenseBannerView } from "./LicenseBannerView";
 
-export const LicenseBanner: React.FC = () => {
+export const LicenseBanner: FC = () => {
   const { entitlements } = useDashboard();
   const { errors, warnings } = entitlements;
 
-  if (errors.length > 0 || warnings.length > 0) {
-    return <LicenseBannerView errors={errors} warnings={warnings} />;
-  } else {
+  if (errors.length === 0 && warnings.length === 0) {
     return null;
   }
+
+  return <LicenseBannerView errors={errors} warnings={warnings} />;
 };
@@ -1,7 +1,8 @@
+import { type FC } from "react";
 import { useDashboard } from "components/Dashboard/DashboardProvider";
 import { ServiceBannerView } from "./ServiceBannerView";
 
-export const ServiceBanner: React.FC = () => {
+export const ServiceBanner: FC = () => {
   const { appearance } = useDashboard();
   const { message, background_color, enabled } =
     appearance.config.service_banner;
@@ -10,15 +11,13 @@ export const ServiceBanner: React.FC = () => {
     return null;
   }
 
-  if (message !== undefined && background_color !== undefined) {
-    return (
-      <ServiceBannerView
-        message={message}
-        backgroundColor={background_color}
-        isPreview={appearance.isPreview}
-      />
-    );
-  } else {
-    return null;
-  }
+  if (message === undefined || background_color === undefined) return null;
+
+  return (
+    <ServiceBannerView
+      message={message}
+      backgroundColor={background_color}
+      isPreview={appearance.isPreview}
+    />
+  );
 };
@@ -1,15 +1,22 @@
 import Button from "@mui/material/Button";
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
-import type { FC } from "react";
+import type { FC, ReactNode } from "react";
 import { useTheme } from "@emotion/react";
 import { Stack } from "components/Stack/Stack";
 
-export const Header: FC<{
-  title: string | JSX.Element;
-  description?: string | JSX.Element;
+interface HeaderProps {
+  title: ReactNode;
+  description?: ReactNode;
   secondary?: boolean;
   docsHref?: string;
-}> = ({ title, description, docsHref, secondary }) => {
+}
+
+export const Header: FC<HeaderProps> = ({
+  title,
+  description,
+  docsHref,
+  secondary,
+}) => {
   const theme = useTheme();
 
   return (

@@ -1,5 +1,5 @@
 import MuiDialog, { DialogProps as MuiDialogProps } from "@mui/material/Dialog";
-import { type ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import { ConfirmDialogType } from "./types";
 import { type Interpolation, type Theme } from "@emotion/react";
 import LoadingButton, { LoadingButtonProps } from "@mui/lab/LoadingButton";
@@ -30,7 +30,7 @@ const typeToColor = (type: ConfirmDialogType): LoadingButtonProps["color"] => {
 /**
  * Quickly handles most modals actions, some combination of a cancel and confirm button
  */
-export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
+export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
   cancelText = "Cancel",
   confirmText = "Confirm",
   confirmLoading = false,
@@ -159,13 +159,7 @@ const styles = {
 export type DialogProps = MuiDialogProps;
 
 /**
- * Wrapper around Material UI's Dialog component. Conveniently exports all of
- * Dialog's components in one import, so for example `<DialogContent />` becomes
- * `<Dialog.Content />` etc. Also contains some custom Dialog components listed below.
- *
- * See original component's Material UI documentation here: https://material-ui.com/components/dialogs/
+ * Re-export of MUI's Dialog component, for convenience.
+ * @link See original documentation here: https://mui.com/material-ui/react-dialog/
  */
-export const Dialog: React.FC<DialogProps> = (props) => {
-  // Wrapped so we can add custom attributes below
-  return <MuiDialog {...props} />;
-};
+export { MuiDialog as Dialog };
@@ -1,15 +1,16 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
-import { WorkspaceAgent } from "api/typesGenerated";
-import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import WarningRounded from "@mui/icons-material/WarningRounded";
+import Link from "@mui/material/Link";
+import { type FC } from "react";
+import type { WorkspaceAgent } from "api/typesGenerated";
+import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import {
   HelpTooltip,
   HelpTooltipContent,
   HelpTooltipText,
   HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
-import Link from "@mui/material/Link";
 import { PopoverTrigger } from "components/Popover/Popover";
 
 // If we think in the agent status and lifecycle into a single enum/state I’d
@@ -18,7 +19,7 @@ import { PopoverTrigger } from "components/Popover/Popover";
 // connected:ready, connected:shutting_down, connected:shutdown_timeout,
 // connected:shutdown_error, connected:off.
 
-const ReadyLifecycle = () => {
+const ReadyLifecycle: FC = () => {
   return (
     <div
       role="status"
@@ -29,7 +30,7 @@ const ReadyLifecycle = () => {
   );
 };
 
-const StartingLifecycle: React.FC = () => {
+const StartingLifecycle: FC = () => {
   return (
     <Tooltip title="Starting...">
       <div
@@ -41,9 +42,11 @@ const StartingLifecycle: React.FC = () => {
   );
 };
 
-const StartTimeoutLifecycle: React.FC<{
+interface AgentStatusProps {
   agent: WorkspaceAgent;
-}> = ({ agent }) => {
+}
+
+const StartTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
   return (
     <HelpTooltip>
       <PopoverTrigger role="status" aria-label="Agent timeout">
@@ -68,9 +71,7 @@ const StartTimeoutLifecycle: React.FC<{
   );
 };
 
-const StartErrorLifecycle: React.FC<{
-  agent: WorkspaceAgent;
-}> = ({ agent }) => {
+const StartErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
   return (
     <HelpTooltip>
       <PopoverTrigger role="status" aria-label="Start error">
@@ -94,7 +95,7 @@ const StartErrorLifecycle: React.FC<{
   );
 };
 
-const ShuttingDownLifecycle: React.FC = () => {
+const ShuttingDownLifecycle: FC = () => {
   return (
     <Tooltip title="Stopping...">
       <div
@@ -106,9 +107,7 @@ const ShuttingDownLifecycle: React.FC = () => {
   );
 };
 
-const ShutdownTimeoutLifecycle: React.FC<{
-  agent: WorkspaceAgent;
-}> = ({ agent }) => {
+const ShutdownTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
   return (
     <HelpTooltip>
       <PopoverTrigger role="status" aria-label="Stop timeout">
@@ -132,9 +131,7 @@ const ShutdownTimeoutLifecycle: React.FC<{
   );
 };
 
-const ShutdownErrorLifecycle: React.FC<{
-  agent: WorkspaceAgent;
-}> = ({ agent }) => {
+const ShutdownErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
   return (
     <HelpTooltip>
       <PopoverTrigger role="status" aria-label="Stop error">
@@ -158,7 +155,7 @@ const ShutdownErrorLifecycle: React.FC<{
   );
 };
 
-const OffLifecycle: React.FC = () => {
+const OffLifecycle: FC = () => {
   return (
     <Tooltip title="Stopped">
       <div
@@ -170,9 +167,7 @@ const OffLifecycle: React.FC = () => {
   );
 };
 
-const ConnectedStatus: React.FC<{
-  agent: WorkspaceAgent;
-}> = ({ agent }) => {
+const ConnectedStatus: FC<AgentStatusProps> = ({ agent }) => {
   // This is to support legacy agents that do not support
   // reporting the lifecycle_state field.
   if (agent.scripts.length === 0) {
@@ -208,7 +203,7 @@ const ConnectedStatus: React.FC<{
   );
 };
 
-const DisconnectedStatus: React.FC = () => {
+const DisconnectedStatus: FC = () => {
   return (
     <Tooltip title="Disconnected">
       <div
@@ -220,7 +215,7 @@ const DisconnectedStatus: React.FC = () => {
   );
 };
 
-const ConnectingStatus: React.FC = () => {
+const ConnectingStatus: FC = () => {
   return (
     <Tooltip title="Connecting...">
       <div
@@ -232,9 +227,7 @@ const ConnectingStatus: React.FC = () => {
   );
 };
 
-const TimeoutStatus: React.FC<{
-  agent: WorkspaceAgent;
-}> = ({ agent }) => {
+const TimeoutStatus: FC<AgentStatusProps> = ({ agent }) => {
   return (
     <HelpTooltip>
       <PopoverTrigger role="status" aria-label="Timeout">
@@ -258,9 +251,7 @@ const TimeoutStatus: React.FC<{
   );
 };
 
-export const AgentStatus: React.FC<{
-  agent: WorkspaceAgent;
-}> = ({ agent }) => {
+export const AgentStatus: FC<AgentStatusProps> = ({ agent }) => {
   return (
     <ChooseOne>
       <Cond condition={agent.status === "connected"}>

@@ -3,12 +3,19 @@ import type { WorkspaceAgent } from "api/typesGenerated";
 import { agentVersionStatus, getDisplayVersionStatus } from "utils/workspace";
 import { AgentOutdatedTooltip } from "./AgentOutdatedTooltip";
 
-export const AgentVersion: FC<{
+interface AgentVersionProps {
   agent: WorkspaceAgent;
   serverVersion: string;
   serverAPIVersion: string;
   onUpdate: () => void;
-}> = ({ agent, serverVersion, serverAPIVersion, onUpdate }) => {
+}
+
+export const AgentVersion: FC<AgentVersionProps> = ({
+  agent,
+  serverVersion,
+  serverAPIVersion,
+  onUpdate,
+}) => {
   const { status } = getDisplayVersionStatus(
     agent.version,
     serverVersion,

@@ -1,15 +1,17 @@
-import { WorkspaceApp } from "api/typesGenerated";
-import { FC } from "react";
 import ComputerIcon from "@mui/icons-material/Computer";
+import { type FC } from "react";
+import type { WorkspaceApp } from "api/typesGenerated";
 
-export const BaseIcon: FC<{ app: WorkspaceApp }> = ({ app }) => {
+interface BaseIconProps {
+  app: WorkspaceApp;
+}
+
+export const BaseIcon: FC<BaseIconProps> = ({ app }) => {
   return app.icon ? (
     <img
       alt={`${app.display_name} Icon`}
       src={app.icon}
-      style={{
-        pointerEvents: "none",
-      }}
+      style={{ pointerEvents: "none" }}
     />
   ) : (
     <ComputerIcon />

@@ -3,15 +3,19 @@ import Tooltip from "@mui/material/Tooltip";
 import VisibilityOffOutlined from "@mui/icons-material/VisibilityOffOutlined";
 import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
 import { type FC, useState } from "react";
-import { css } from "@emotion/react";
+import { css, type Interpolation, type Theme } from "@emotion/react";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 
 const Language = {
   showLabel: "Show value",
   hideLabel: "Hide value",
 };
 
-export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
+interface SensitiveValueProps {
+  value: string;
+}
+
+export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
   const [shouldDisplay, setShouldDisplay] = useState(false);
   const displayValue = shouldDisplay ? value : "••••••••";
   const buttonLabel = shouldDisplay ? Language.hideLabel : Language.showLabel;
@@ -29,28 +33,12 @@ export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
         gap: 4,
       }}
     >
-      <CopyableValue
-        value={value}
-        css={{
-          // 22px is the button width
-          width: "calc(100% - 22px)",
-          overflow: "hidden",
-          whiteSpace: "nowrap",
-          textOverflow: "ellipsis",
-        }}
-      >
+      <CopyableValue value={value} css={styles.value}>
         {displayValue}
       </CopyableValue>
       <Tooltip title={buttonLabel}>
         <IconButton
-          css={css`
-            color: inherit;
-
-            & .MuiSvgIcon-root {
-              width: 16px;
-              height: 16px;
-            }
-          `}
+          css={styles.button}
           onClick={() => {
             setShouldDisplay((value) => !value);
           }}
@@ -63,3 +51,22 @@ export const SensitiveValue: FC<{ value: string }> = ({ value }) => {
     </div>
   );
 };
+
+const styles = {
+  value: {
+    // 22px is the button width
+    width: "calc(100% - 22px)",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+  },
+
+  button: css`
+    color: inherit;
+
+    & .MuiSvgIcon-root {
+      width: 16px;
+      height: 16px;
+    }
+  `,
+} satisfies Record<string, Interpolation<Theme>>;
@@ -160,7 +160,7 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
   );
 };
 
-const RichParameterField: React.FC<RichParameterInputProps> = ({
+const RichParameterField: FC<RichParameterInputProps> = ({
   disabled,
   onChange,
   parameter,