More prototyping

coder · bryphe-coder · Jan 27, 2022 · Jan 29, 2022 · Jan 31, 2022 · Jan 31, 2022
commit fa6c8c390d831ef0761d571f1b69159a004b9289
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "@material-ui/core": "4.9.4",
     "@material-ui/icons": "4.5.1",
-    "@material-ui/lab": "4.0.0-alpha.42",
+    "@material-ui/lab": "4.0.0-alpha.60",
     "@testing-library/react": "12.1.2",
     "@types/express": "4.17.13",
     "@types/jest": "27.4.0",

diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx
@@ -1,5 +1,6 @@
 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 * as API from "../../api"
@@ -8,19 +9,187 @@ export interface WorkspaceProps {
   workspace: API.Workspace
 }
 
+const useStatusStyles = makeStyles((theme) => {
+
+  const common = {
+    width: theme.spacing(1),
+    height: theme.spacing(1),
+    borderRadius: "100%",
+    backgroundColor: theme.palette.action.disabled,
+    transition: "background-color 200ms ease",
+  };
+
+  return {
+    inactive: common,
+    active: {
+      ...common,
+      backgroundColor: theme.palette.primary.main,
+    }
+  }
+})
+
+/**
+ * A component that displays the Dev URL indicator. The indicator status represents
+ * loading, online, offline, or error.
+ */
+export const StatusIndicator: React.FC<{ status: ResourceStatus }> = ({ status }) => {
+  const styles = useStatusStyles()
+
+  const className = status === "active" ? styles.active : styles.inactive
+  return (
+    <div className={className} />
+  )
+}
+
+
+type ResourceStatus = "active" | "inactive"
+
+export interface ResourceRowProps {
+  name: string
+  icon: string
+  //href: string
+  status: ResourceStatus
+}
+
+const ResourceIconSize = 20
+
+export const ResourceRow: React.FC<ResourceRowProps> = ({ icon, /*href,*/ name, status }) => {
+  const styles = useResourceRowStyles()
+
+  return <div className={styles.root}>
+    <div className={styles.iconContainer}>
+      <img src={icon} height={ResourceIconSize} width={ResourceIconSize} />
+    </div>
+    <div className={styles.nameContainer}>
+      {name}
+    </div>
+    <div className={styles.statusContainer}>
+      <StatusIndicator status={status} />
+    </div>
+  </div>
+}
+
+const useResourceRowStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: ResourceIconSize + theme.spacing(1),
+    height: ResourceIconSize + theme.spacing(1),
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flex: 0,
+  },
+  nameContainer: {
+    margin: theme.spacing(1),
+    paddingLeft: theme.spacing(1),
+    flex: 1,
+    width: "100%",
+  },
+  statusContainer: {
+    width: 24,
+    height: 24,
+    flex: 0,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  }
+}))
+
+export const Title: React.FC = ({ children }) => {
+  const styles = useTitleStyles();
+
+  return <div className={styles.header}>
+    <Typography variant="h6">{children}</Typography>
+  </div>
+}
+
+const useTitleStyles = makeStyles((theme) => ({
+  header: {
+    alignItems: "center",
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    display: "flex",
+    height: theme.spacing(6),
+    justifyContent: "space-between",
+    marginBottom: theme.spacing(2),
+    marginTop: -theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: Constants.CardPadding + theme.spacing(1),
+    paddingRight: Constants.CardPadding / 2,
+  },
+}))
+
+import Timeline from "@material-ui/lab/Timeline"
+import TimelineItem from '@material-ui/lab/TimelineItem';
+import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
+import TimelineConnector from '@material-ui/lab/TimelineConnector';
+import TimelineContent from '@material-ui/lab/TimelineContent';
+import TimelineDot from '@material-ui/lab/TimelineDot';
+
+export const WorkspaceTimeline: React.FC = () => {
+  return <Timeline>
+    <TimelineItem>
+      <TimelineSeparator>
+        <TimelineDot />
+        <TimelineConnector />
+      </TimelineSeparator>
+      <TimelineContent>Eat</TimelineContent>
+    </TimelineItem>
+    <TimelineItem>
+      <TimelineSeparator>
+        <TimelineDot />
+        <TimelineConnector />
+      </TimelineSeparator>
+      <TimelineContent>Code</TimelineContent>
+    </TimelineItem>
+    <TimelineItem>
+      <TimelineSeparator>
+        <TimelineDot />
+      </TimelineSeparator>
+      <TimelineContent>Sleep</TimelineContent>
+    </TimelineItem>
+  </Timeline>
+}
+
 export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
   const styles = useStyles()
 
   return <div className={styles.root}>
     <Paper elevation={0} className={styles.section}>
-      <div>Hello</div>
+      <Typography variant="h4">{workspace.name}</Typography>
+      <Typography variant="body2" color="textSecondary">
+        {"TODO: Project"}
+      </Typography>
     </Paper>
     <div className={styles.horizontal}>
-      <Paper elevation={0} className={styles.sideBar}>
-        <div>Apps</div>
-      </Paper>
+      <div className={styles.sideBar}>
+        <Paper elevation={0} className={styles.section}>
+          <Title>Applications</Title>
+
+          <div className={styles.vertical}>
+            <ResourceRow name={"Code Web"} icon={"/static/vscode.svg"} status={"active"} />
+            <ResourceRow name={"Terminal"} icon={"/static/terminal.svg"} status={"active"} />
+            <ResourceRow name={"React App"} icon={"/static/react-icon.svg"} status={"active"} />
+
+          </div>
+        </Paper>
+        <Paper elevation={0} className={styles.section}>
+          <Title>Resources</Title>
+
+          <div className={styles.vertical}>
+            <ResourceRow name={"GCS Bucket"} icon={"/static/google-storage-logo.svg"} status={"active"} />
+            <ResourceRow name={"Windows (x64 - VM)"} icon={"/static/windows-logo.svg"} status={"active"} />
+            <ResourceRow name={"OSX (M1 - Physical)"} icon={"/static/apple-logo.svg"} status={"active"} />
+          </div>
+        </Paper>
+      </div>
       <Paper elevation={0} className={styles.main}>
-        <div>Build stuff</div>
+        <Title>Timeline</Title>
+        <WorkspaceTimeline />
       </Paper>
     </div>
   </div>
@@ -49,9 +218,14 @@ export const useStyles = makeStyles((theme) => {
       display: "flex",
       flexDirection: "row"
     },
+    vertical: {
+      display: "flex",
+      flexDirection: "column"
+    },
     section: common,
     sideBar: {
-      ...common,
+      display: "flex",
+      flexDirection: "column",
       width: "400px"
     },
     main: {

diff --git a/site/pages/workspaces/[user]/[workspace]/index.tsx b/site/pages/workspaces/[user]/[workspace]/index.tsx
@@ -11,7 +11,7 @@ import { Workspace } from "../../../../components/Workspace"
 import { MockWorkspace } from "../../../../test_helpers"
 
 
-const ProjectsPage: React.FC = () => {
+const WorkspacesPage: React.FC = () => {
   const styles = useStyles()
   const router = useRouter()
   const { me, signOut } = useUser(true)
@@ -43,4 +43,4 @@ const useStyles = makeStyles(() => ({
   }
 }))
 
-export default ProjectsPage
+export default WorkspacesPage
diff --git a/site/static/apple-logo.svg b/site/static/apple-logo.svg
diff --git a/site/static/google-storage-logo.svg b/site/static/google-storage-logo.svg
diff --git a/site/static/react-icon.svg b/site/static/react-icon.svg
diff --git a/site/static/terminal.svg b/site/static/terminal.svg
diff --git a/site/static/vscode.svg b/site/static/vscode.svg
diff --git a/site/static/windows-logo.svg b/site/static/windows-logo.svg
diff --git a/yarn.lock b/yarn.lock
@@ -606,16 +606,16 @@
   dependencies:
     "@babel/runtime" "^7.4.4"
 
-"@material-ui/lab@4.0.0-alpha.42":
-  version "4.0.0-alpha.42"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.42.tgz#f8789d3ba39a1e5a13f462d618c2eec53f87ae10"
-  integrity sha512-JbKEMIXSslh03u6HNU1Pp1VXd9ycJ1dqkI+iQK6yR+Sng2mvMKzJ80GCV5ROXAXwwNnD8zHOopLZNIpTsEAVgQ==
+"@material-ui/lab@4.0.0-alpha.60":
+  version "4.0.0-alpha.60"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2"
+  integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==
   dependencies:
     "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.7.1"
+    "@material-ui/utils" "^4.11.2"
     clsx "^1.0.4"
     prop-types "^15.7.2"
-    react-is "^16.8.0"
+    react-is "^16.8.0 || ^17.0.0"
 
 "@material-ui/styles@^4.9.0":
   version "4.11.4"