Abstract option

coder · kylecarbs · Oct 17, 2022 · Sep 20, 2022 · Sep 20, 2022 · Sep 22, 2022
commit 0e57abbb531aee41c01753423069a76f9b398d2a
@@ -1,48 +1,10 @@
 import Button from "@material-ui/core/Button"
 import { makeStyles } from "@material-ui/core/styles"
 import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
-import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
-import LockRounded from "@material-ui/icons/LockRounded"
-import BarChartOutlined from "@material-ui/icons/BarChartOutlined"
 import { Margins } from "components/Margins/Margins"
 import { Stack } from "components/Stack/Stack"
-import React, { ElementType, PropsWithChildren, ReactNode } from "react"
-import { NavLink } from "react-router-dom"
-import { combineClasses } from "util/combineClasses"
-
-const Sidebar: React.FC<PropsWithChildren> = ({ children }) => {
-  const styles = useStyles()
-  return <nav className={styles.sidebar}>{children}</nav>
-}
-
-const SidebarNavItem: React.FC<
-  PropsWithChildren<{ href: string; icon: ReactNode }>
-> = ({ children, href, icon }) => {
-  const styles = useStyles()
-  return (
-    <NavLink
-      to={href}
-      className={({ isActive }) =>
-        combineClasses([
-          styles.sidebarNavItem,
-          isActive ? styles.sidebarNavItemActive : undefined,
-        ])
-      }
-    >
-      <Stack alignItems="center" spacing={1.5} direction="row">
-        {icon}
-        {children}
-      </Stack>
-    </NavLink>
-  )
-}
-
-const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
-  icon: Icon,
-}) => {
-  const styles = useStyles()
-  return <Icon className={styles.sidebarNavItemIcon} />
-}
+import { Sidebar } from "./Sidebar"
+import React, { PropsWithChildren } from "react"
 
 export const SettingsHeader: React.FC<{
   title: string
@@ -105,33 +67,7 @@ export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
   return (
     <Margins>
       <Stack className={styles.wrapper} direction="row" spacing={5}>
-        <Sidebar>
-          <SidebarNavItem
-            href="/settings/general"
-            icon={<SidebarNavItemIcon icon={LaunchOutlined} />}
-          >
-            General
-          </SidebarNavItem>
-          <SidebarNavItem
-            href="/settings/security"
-            icon={<SidebarNavItemIcon icon={LockRounded} />}
-          >
-            Security
-          </SidebarNavItem>
-          <SidebarNavItem
-            href="/settings/metrics"
-            icon={<SidebarNavItemIcon icon={BarChartOutlined} />}
-          >
-            Metrics / observability
-          </SidebarNavItem>
-          <SidebarNavItem
-            href="/settings/auth"
-            icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
-          >
-            Authentication
-          </SidebarNavItem>
-        </Sidebar>
-
+        <Sidebar />
         <main className={styles.content}>{children}</main>
       </Stack>
     </Margins>
@@ -191,7 +127,7 @@ const useStyles = makeStyles((theme) => ({
 
   headingGroup: {
     maxWidth: 420,
-    marginBottom: theme.spacing(4),
+    marginBottom: theme.spacing(2),
   },
 
   title: {

@@ -0,0 +1,36 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React, { PropsWithChildren } from "react"
+import { MONOSPACE_FONT_FAMILY } from "theme/constants"
+
+export const OptionName: React.FC<PropsWithChildren> = ({ children }) => {
+  const styles = useStyles()
+  return <span className={styles.optionName}>{children}</span>
+}
+
+export const OptionDescription: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const styles = useStyles()
+  return <span className={styles.optionDescription}>{children}</span>
+}
+
+export const OptionValue: React.FC<PropsWithChildren> = ({ children }) => {
+  const styles = useStyles()
+  return <span className={styles.optionValue}>{children}</span>
+}
+
+const useStyles = makeStyles((theme) => ({
+  optionName: {
+    display: "block",
+  },
+  optionDescription: {
+    display: "block",
+    color: theme.palette.text.secondary,
+    fontSize: 14,
+    marginTop: theme.spacing(0.5),
+  },
+  optionValue: {
+    fontSize: 14,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+  },
+}))
@@ -0,0 +1,114 @@
+import { makeStyles } from "@material-ui/core/styles"
+import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
+import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
+import LockRounded from "@material-ui/icons/LockRounded"
+import BarChartOutlined from "@material-ui/icons/BarChartOutlined"
+import { Stack } from "components/Stack/Stack"
+import React, { ElementType, PropsWithChildren, ReactNode } from "react"
+import { NavLink } from "react-router-dom"
+import { combineClasses } from "util/combineClasses"
+
+const SidebarNavItem: React.FC<
+  PropsWithChildren<{ href: string; icon: ReactNode }>
+> = ({ children, href, icon }) => {
+  const styles = useStyles()
+  return (
+    <NavLink
+      to={href}
+      className={({ isActive }) =>
+        combineClasses([
+          styles.sidebarNavItem,
+          isActive ? styles.sidebarNavItemActive : undefined,
+        ])
+      }
+    >
+      <Stack alignItems="center" spacing={1.5} direction="row">
+        {icon}
+        {children}
+      </Stack>
+    </NavLink>
+  )
+}
+
+const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
+  icon: Icon,
+}) => {
+  const styles = useStyles()
+  return <Icon className={styles.sidebarNavItemIcon} />
+}
+
+export const Sidebar: React.FC = () => {
+  const styles = useStyles()
+
+  return (
+    <nav className={styles.sidebar}>
+      <SidebarNavItem
+        href="/settings/general"
+        icon={<SidebarNavItemIcon icon={LaunchOutlined} />}
+      >
+        General
+      </SidebarNavItem>
+      <SidebarNavItem
+        href="/settings/security"
+        icon={<SidebarNavItemIcon icon={LockRounded} />}
+      >
+        Security
+      </SidebarNavItem>
+      <SidebarNavItem
+        href="/settings/metrics"
+        icon={<SidebarNavItemIcon icon={BarChartOutlined} />}
+      >
+        Metrics / observability
+      </SidebarNavItem>
+      <SidebarNavItem
+        href="/settings/auth"
+        icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
+      >
+        Authentication
+      </SidebarNavItem>
+    </nav>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  sidebar: {
+    width: 245,
+  },
+
+  sidebarNavItem: {
+    color: "inherit",
+    display: "block",
+    fontSize: 16,
+    textDecoration: "none",
+    padding: theme.spacing(1.5, 1.5, 1.5, 3),
+    borderRadius: theme.shape.borderRadius / 2,
+    transition: "background-color 0.15s ease-in-out",
+    marginBottom: 1,
+    position: "relative",
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+
+  sidebarNavItemActive: {
+    backgroundColor: theme.palette.action.hover,
+
+    "&:before": {
+      content: '""',
+      display: "block",
+      width: 3,
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      backgroundColor: theme.palette.secondary.dark,
+      borderRadius: theme.shape.borderRadius,
+    },
+  },
+
+  sidebarNavItemIcon: {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+  },
+}))
@@ -1,4 +1,3 @@
-import { makeStyles } from "@material-ui/core/styles"
 import Table from "@material-ui/core/Table"
 import TableBody from "@material-ui/core/TableBody"
 import TableCell from "@material-ui/core/TableCell"
@@ -9,76 +8,58 @@ import {
   DeploySettingsLayout,
   SettingsHeader,
 } from "components/DeploySettingsLayout/DeploySettingsLayout"
+import {
+  OptionDescription,
+  OptionName,
+  OptionValue,
+} from "components/DeploySettingsLayout/Option"
 import React from "react"
-import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 
 export const GeneralSettingsPage: React.FC = () => {
-  const styles = useStyles()
-
   return (
     <DeploySettingsLayout>
-      <div>
-        <SettingsHeader
-          title="General"
-          description="Deployment and networking settings"
-          docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
-        />
+      <SettingsHeader
+        title="General"
+        description="Deployment and networking settings"
+        docsHref="https://coder.com/docs/coder-oss/latest/admin/auth#openid-connect-with-google"
+      />
 
-        <TableContainer>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell width="50%">Option</TableCell>
-                <TableCell width="50%">Value</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              <TableRow>
-                <TableCell>
-                  <span className={styles.optionName}>Access URL</span>
-                  <span className={styles.optionDescription}>
-                    The address to serve the API and dashboard.
-                  </span>
-                </TableCell>
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell width="50%">Option</TableCell>
+              <TableCell width="50%">Value</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableRow>
+              <TableCell>
+                <OptionName>Access URL</OptionName>
+                <OptionDescription>
+                  The address to serve the API and dashboard.
+                </OptionDescription>
+              </TableCell>
 
-                <TableCell>
-                  <span className={styles.optionValue}>127.0.0.1:3000</span>
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell>
-                  <span className={styles.optionName}>Wildcard Access URL</span>
-                  <span className={styles.optionDescription}>
-                    Specifies the external URL to access Coder.
-                  </span>
-                </TableCell>
+              <TableCell>
+                <OptionValue>127.0.0.1:3000</OptionValue>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>
+                <OptionName>Wildcard Access URL</OptionName>
+                <OptionDescription>
+                  Specifies the external URL to access Coder.
+                </OptionDescription>
+              </TableCell>
 
-                <TableCell>
-                  <span className={styles.optionValue}>
-                    https://www.dev.coder.com
-                  </span>
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </div>
+              <TableCell>
+                <OptionValue>https://www.dev.coder.com</OptionValue>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
     </DeploySettingsLayout>
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  optionName: {
-    display: "block",
-  },
-  optionDescription: {
-    display: "block",
-    color: theme.palette.text.secondary,
-    fontSize: 14,
-    marginTop: theme.spacing(0.5),
-  },
-  optionValue: {
-    fontSize: 14,
-    fontFamily: MONOSPACE_FONT_FAMILY,
-  },
-}))