From 6be51fda7d219a4a4ddcf1ddf10f04c5c752e370 Mon Sep 17 00:00:00 2001
From: Bryan Phelps <bryan@coder.com>
Date: Mon, 21 Feb 2022 22:22:50 +0000
Subject: [PATCH 1/2] refactor: Add some simple workspace sections

---
 site/components/Workspace/Workspace.tsx       | 57 ++++++++++++++---
 .../components/Workspace/WorkspaceSection.tsx | 61 +++++++++++++++++++
 site/components/Workspace/constants.ts        |  3 +
 3 files changed, 113 insertions(+), 8 deletions(-)
 create mode 100644 site/components/Workspace/WorkspaceSection.tsx
 create mode 100644 site/components/Workspace/constants.ts

diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx
index 23d9cf07d32d9..f7e22fbef7b49 100644
--- a/site/components/Workspace/Workspace.tsx
+++ b/site/components/Workspace/Workspace.tsx
@@ -5,19 +5,14 @@ import { makeStyles } from "@material-ui/core/styles"
 import CloudCircleIcon from "@material-ui/icons/CloudCircle"
 import Link from "next/link"
 import React from "react"
-
+import * as Constants from "./constants"
 import * as API from "../../api"
+import { WorkspaceSection } from "./WorkspaceSection"
 
 export interface WorkspaceProps {
   workspace: API.Workspace
 }
 
-namespace Constants {
-  export const TitleIconSize = 48
-  export const CardRadius = 8
-  export const CardPadding = 20
-}
-
 /**
  * Workspace is the top-level component for viewing an individual workspace
  */
@@ -26,7 +21,32 @@ export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
 
   return (
     <div className={styles.root}>
-      <WorkspaceHeader workspace={workspace} />
+      <div className={styles.vertical}>
+        <WorkspaceHeader workspace={workspace} />
+        <div className={styles.horizontal}>
+          <div className={styles.sidebarContainer}>
+            <WorkspaceSection title="Applications">
+              <Placeholder />
+            </WorkspaceSection>
+            <WorkspaceSection title="Dev URLs">
+              <Placeholder />
+            </WorkspaceSection>
+            <WorkspaceSection title="Resources">
+              <Placeholder />
+            </WorkspaceSection>
+          </div>
+          <div className={styles.timelineContainer}>
+            <WorkspaceSection title="Timeline">
+              <div
+                className={styles.vertical}
+                style={{ justifyContent: "center", alignItems: "center", height: "300px" }}
+              >
+                <Placeholder />
+              </div>
+            </WorkspaceSection>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }
@@ -63,6 +83,18 @@ export const WorkspaceHeroIcon: React.FC = () => {
   )
 }
 
+/**
+ * Temporary placeholder component until we have the sections implemented
+ * Can be removed once the Workspace page has all the necessary sections
+ */
+const Placeholder: React.FC = () => {
+  return (
+    <div style={{ textAlign: "center", opacity: "0.5" }}>
+      <Typography variant="caption">Not yet implemented</Typography>
+    </div>
+  )
+}
+
 export const useStyles = makeStyles((theme) => {
   return {
     root: {
@@ -81,6 +113,15 @@ export const useStyles = makeStyles((theme) => {
       border: `1px solid ${theme.palette.divider}`,
       borderRadius: Constants.CardRadius,
       padding: Constants.CardPadding,
+      margin: theme.spacing(1),
+    },
+    sidebarContainer: {
+      display: "flex",
+      flexDirection: "column",
+      flex: "0 0 350px",
+    },
+    timelineContainer: {
+      flex: 1,
     },
     icon: {
       width: Constants.TitleIconSize,
diff --git a/site/components/Workspace/WorkspaceSection.tsx b/site/components/Workspace/WorkspaceSection.tsx
new file mode 100644
index 0000000000000..d8c3bebdbb526
--- /dev/null
+++ b/site/components/Workspace/WorkspaceSection.tsx
@@ -0,0 +1,61 @@
+import Paper from "@material-ui/core/Paper"
+import { makeStyles } from "@material-ui/core/styles"
+import Typography from "@material-ui/core/Typography"
+import React from "react"
+import { QuestionHelp } from "./QuestionHelp"
+import { CardPadding, CardRadius } from "./constants"
+
+export interface WorkspaceSectionProps {
+  title: string
+  helpUrl?: string
+}
+
+export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, helpUrl, children }) => {
+  const styles = useStyles()
+
+  let questionHelp = null
+
+  if (helpUrl) {
+    questionHelp = (
+      <div style={{ margin: "0em 1em" }}>
+        <QuestionHelp />
+      </div>
+    )
+  }
+
+  return (
+    <Paper elevation={0} className={styles.root}>
+      <div className={styles.headerContainer}>
+        <div className={styles.header}>
+          <Typography variant="h6">{title}</Typography>
+          {questionHelp}
+        </div>
+      </div>
+
+      <div className={styles.contents}>{children}</div>
+    </Paper>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: CardRadius,
+    margin: theme.spacing(1),
+  },
+  headerContainer: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
+  contents: {
+    margin: theme.spacing(2),
+  },
+  header: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
+    paddingLeft: CardPadding + theme.spacing(1),
+    paddingRight: CardPadding / 2,
+  },
+}))
diff --git a/site/components/Workspace/constants.ts b/site/components/Workspace/constants.ts
new file mode 100644
index 0000000000000..44919f96f5399
--- /dev/null
+++ b/site/components/Workspace/constants.ts
@@ -0,0 +1,3 @@
+export const TitleIconSize = 48
+export const CardRadius = 8
+export const CardPadding = 20

From 6434098258accb8560e989ee644b410985c97190 Mon Sep 17 00:00:00 2001
From: Bryan Phelps <bryan@coder.com>
Date: Mon, 21 Feb 2022 22:26:57 +0000
Subject: [PATCH 2/2] Remove unused QuestionHelp component

---
 site/components/Workspace/WorkspaceSection.tsx | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/site/components/Workspace/WorkspaceSection.tsx b/site/components/Workspace/WorkspaceSection.tsx
index d8c3bebdbb526..57192b8daf82e 100644
--- a/site/components/Workspace/WorkspaceSection.tsx
+++ b/site/components/Workspace/WorkspaceSection.tsx
@@ -2,33 +2,20 @@ import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { QuestionHelp } from "./QuestionHelp"
 import { CardPadding, CardRadius } from "./constants"
 
 export interface WorkspaceSectionProps {
   title: string
-  helpUrl?: string
 }
 
-export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, helpUrl, children }) => {
+export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
   const styles = useStyles()
 
-  let questionHelp = null
-
-  if (helpUrl) {
-    questionHelp = (
-      <div style={{ margin: "0em 1em" }}>
-        <QuestionHelp />
-      </div>
-    )
-  }
-
   return (
     <Paper elevation={0} className={styles.root}>
       <div className={styles.headerContainer}>
         <div className={styles.header}>
           <Typography variant="h6">{title}</Typography>
-          {questionHelp}
         </div>
       </div>