Make WorkspaceSection more reusable

presleyp · presleyp · commit 0da5e7e4afe3 · 2022-05-05T18:15:39.000Z
diff --git a/site/src/components/WorkspaceSection/WorkspaceSection.tsx b/site/src/components/WorkspaceSection/WorkspaceSection.tsx
@@ -5,19 +5,21 @@ import React from "react"
 import { CardRadius, CardPadding } from "../../theme/constants"
 
 export interface WorkspaceSectionProps {
-  title: string
+  title?: string
 }
 
 export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
   const styles = useStyles()
 
   return (
     <Paper elevation={0} className={styles.root}>
-      <div className={styles.headerContainer}>
-        <div className={styles.header}>
-          <Typography variant="h6">{title}</Typography>
+      {title &&
+        <div className={styles.headerContainer}>
+          <div className={styles.header}>
+            <Typography variant="h6">{title}</Typography>
+          </div>
         </div>
-      </div>
+      }
 
       <div className={styles.contents}>{children}</div>
     </Paper>
diff --git a/site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx b/site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx
@@ -7,6 +7,7 @@ import { WorkspaceProps } from "../Workspace/Workspace"
 import CloudCircleIcon from "@material-ui/icons/CloudCircle"
 import { CardPadding, CardRadius, TitleIconSize } from "../../theme/constants"
 import { makeStyles } from "@material-ui/core/styles"
+import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
 
 /**
  * Component for the header at the top of the workspace page
@@ -17,7 +18,7 @@ export const WorkspaceStatusBar: React.FC<WorkspaceProps> = ({ organization, tem
   const templateLink = `/templates/${organization.name}/${template.name}`
 
   return (
-    <Paper elevation={0} className={styles.section}>
+    <WorkspaceSection>
       <div className={styles.horizontal}>
         <Box mr="1em">
           <CloudCircleIcon width={TitleIconSize} height={TitleIconSize} />
@@ -29,7 +30,7 @@ export const WorkspaceStatusBar: React.FC<WorkspaceProps> = ({ organization, tem
           </Typography>
         </div>
       </div>
-    </Paper>
+    </WorkspaceSection>
   )
 }
 
@@ -47,11 +48,5 @@ const useStyles = makeStyles((theme) => {
       display: "flex",
       flexDirection: "column",
     },
-    section: {
-      border: `1px solid ${theme.palette.divider}`,
-      borderRadius: CardRadius,
-      padding: CardPadding,
-      margin: theme.spacing(1),
-    },
   }
 })
