🧹

aslilac · aslilac · commit 505f24bf0a5e · 2023-11-20T18:00:18.000Z
diff --git a/site/src/components/DeploySettingsLayout/Option.tsx b/site/src/components/DeploySettingsLayout/Option.tsx
@@ -4,14 +4,11 @@ import type { HTMLAttributes, PropsWithChildren, FC } from "react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
 import { DisabledBadge, EnabledBadge } from "../Badges/Badges";
 
-export const OptionName: FC<PropsWithChildren> = (props) => {
-  const { children } = props;
-
+export const OptionName: FC<PropsWithChildren> = ({ children }) => {
   return <span css={{ display: "block" }}>{children}</span>;
 };
 
-export const OptionDescription: FC<PropsWithChildren> = (props) => {
-  const { children } = props;
+export const OptionDescription: FC<PropsWithChildren> = ({ children }) => {
   const theme = useTheme();
 
   return (
@@ -36,31 +33,20 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
   const { children: value } = props;
   const theme = useTheme();
 
-  const optionStyles = css`
-    font-size: 14px;
-    font-family: ${MONOSPACE_FONT_FAMILY};
-    overflow-wrap: anywhere;
-    user-select: all;
-
-    & ul {
-      padding: 16px;
-    }
-  `;
-
   if (typeof value === "boolean") {
     return value ? <EnabledBadge /> : <DisabledBadge />;
   }
 
   if (typeof value === "number") {
-    return <span css={optionStyles}>{value}</span>;
+    return <span css={styles.option}>{value}</span>;
   }
 
   if (!value || value.length === 0) {
-    return <span css={optionStyles}>Not set</span>;
+    return <span css={styles.option}>Not set</span>;
   }
 
   if (typeof value === "string") {
-    return <span css={optionStyles}>{value}</span>;
+    return <span css={styles.option}>{value}</span>;
   }
 
   if (typeof value === "object" && !Array.isArray(value)) {
@@ -72,7 +58,7 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
             <li
               key={option}
               css={[
-                optionStyles,
+                styles.option,
                 !isEnabled && {
                   marginLeft: 32,
                   color: theme.palette.text.disabled,
@@ -107,24 +93,27 @@ export const OptionValue: FC<OptionValueProps> = (props) => {
     return (
       <ul css={{ listStylePosition: "inside" }}>
         {value.map((item) => (
-          <li key={item} css={optionStyles}>
+          <li key={item} css={styles.option}>
             {item}
           </li>
         ))}
       </ul>
     );
   }
 
-  return <span css={optionStyles}>{JSON.stringify(value)}</span>;
+  return <span css={styles.option}>{JSON.stringify(value)}</span>;
 };
 
 interface OptionConfigProps extends HTMLAttributes<HTMLDivElement> {
   source?: boolean;
 }
 
 // OptionConfig takes a source bool to indicate if the Option is the source of the configured value.
-export const OptionConfig = (props: OptionConfigProps) => {
-  const { children, source, ...attrs } = props;
+export const OptionConfig: FC<OptionConfigProps> = ({
+  children,
+  source,
+  ...attrs
+}) => {
   const theme = useTheme();
   const borderColor = source
     ? theme.palette.primary.main
@@ -156,8 +145,11 @@ interface OptionConfigFlagProps extends HTMLAttributes<HTMLDivElement> {
   source?: boolean;
 }
 
-export const OptionConfigFlag = (props: OptionConfigFlagProps) => {
-  const { children, source, ...attrs } = props;
+export const OptionConfigFlag: FC<OptionConfigFlagProps> = ({
+  children,
+  source,
+  ...attrs
+}) => {
   const theme = useTheme();
 
   return (
@@ -178,3 +170,16 @@ export const OptionConfigFlag = (props: OptionConfigFlagProps) => {
     </div>
   );
 };
+
+const styles = {
+  option: css`
+    font-size: 14px;
+    font-family: ${MONOSPACE_FONT_FAMILY};
+    overflow-wrap: anywhere;
+    user-select: all;
+
+    & ul {
+      padding: 16px;
+    }
+  `,
+};
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -1,8 +1,8 @@
 import { Stack } from "@mui/system";
 import { type FC } from "react";
 import { useQuery } from "react-query";
-import { useMe } from "hooks/useMe";
 import { useOrganizationId } from "hooks";
+import { useMe } from "hooks/useMe";
 import { usePermissions } from "hooks/usePermissions";
 import { groupsForUser } from "api/queries/groups";
 import { useAuth } from "components/AuthProvider/AuthProvider";
diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountUserGroups.tsx
@@ -1,24 +1,24 @@
+import Grid from "@mui/material/Grid";
 import { useTheme } from "@emotion/react";
+import { type FC } from "react";
 import { isApiError } from "api/errors";
-import { type Group } from "api/typesGenerated";
-
+import type { Group } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { AvatarCard } from "components/AvatarCard/AvatarCard";
 import { Loader } from "components/Loader/Loader";
 import { Section } from "components/SettingsLayout/Section";
-import Grid from "@mui/material/Grid";
 
 type AccountGroupsProps = {
   groups: readonly Group[] | undefined;
   error: unknown;
   loading: boolean;
 };
 
-export function AccountUserGroups({
+export const AccountUserGroups: FC<AccountGroupsProps> = ({
   groups,
   error,
   loading,
-}: AccountGroupsProps) {
+}) => {
   const theme = useTheme();
 
   return (
@@ -71,4 +71,4 @@ export function AccountUserGroups({
       </div>
     </Section>
   );
-}
+};
diff --git a/site/src/pages/WorkspacesPage/WorkspacesButton.tsx b/site/src/pages/WorkspacesPage/WorkspacesButton.tsx
@@ -179,10 +179,10 @@ const WorkspaceResultsRow: FC<WorkspaceResultsRowProps> = ({ template }) => {
   );
 };
 
-function PopoverLink(props: RouterLinkProps) {
+const PopoverLink: FC<RouterLinkProps> = ({ children, ...linkProps }) => {
   return (
     <RouterLink
-      {...props}
+      {...linkProps}
       css={(theme) => ({
         color: theme.palette.text.primary,
         padding: "8px 16px",
@@ -197,9 +197,11 @@ function PopoverLink(props: RouterLinkProps) {
           backgroundColor: theme.palette.action.hover,
         },
       })}
-    />
+    >
+      {children}
+    </RouterLink>
   );
-}
+};
 
 function sortTemplatesByUsersDesc(
   templates: readonly Template[],
