Add spinner

coder · bryphe-coder · Jan 27, 2022 · Jan 29, 2022 · Jan 31, 2022 · Jan 31, 2022
commit 07d5711c1143875d370b447c9c093ab41f95d44f
diff --git a/site/components/QuestionHelp.tsx b/site/components/QuestionHelp.tsx
@@ -4,9 +4,7 @@ import * as React from "react"
 
 export const QuestionHelp: React.FC = () => {
   const styles = useStyles()
-  return (
-    <HelpIcon className={styles.icon} />
-  )
+  return <HelpIcon className={styles.icon} />
 }
 
 const useStyles = makeStyles((theme) => ({

diff --git a/site/components/Workspace/Workspace.tsx b/site/components/Workspace/Workspace.tsx
@@ -1,6 +1,7 @@
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
+import OpenInNewIcon from "@material-ui/icons/OpenInNew"
 import React from "react"
 
 import * as API from "../../api"
@@ -10,21 +11,20 @@ export interface WorkspaceProps {
 }
 
 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,
-    }
+    },
   }
 })
 
@@ -35,14 +35,15 @@ const useStatusStyles = makeStyles((theme) => {
 export const StatusIndicator: React.FC<{ status: ResourceStatus }> = ({ status }) => {
   const styles = useStatusStyles()
 
-  const className = status === "active" ? styles.active : styles.inactive
-  return (
-    <div className={className} />
-  )
+  if (status == "loading") {
+    return <CircularProgress width={"16px"} />
+  } else {
+    const className = status === "active" ? styles.active : styles.inactive
+    return <div className={className} />
+  }
 }
 
-
-type ResourceStatus = "active" | "inactive"
+type ResourceStatus = "active" | "inactive" | "loading"
 
 export interface ResourceRowProps {
   name: string
@@ -53,20 +54,31 @@ export interface ResourceRowProps {
 
 const ResourceIconSize = 20
 
-export const ResourceRow: React.FC<ResourceRowProps> = ({ icon, /*href,*/ name, status }) => {
+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} />
+  return (
+    <div className={styles.root}>
+      <div className={styles.iconContainer}>
+        <img src={icon} height={ResourceIconSize} width={ResourceIconSize} />
+      </div>
+      <div className={styles.nameContainer}>
+        <Link
+          color={status === "active" ? "primary" : "initial"}
+          href={href}
+          rel="noreferrer noopener"
+          target="_blank"
+          underline="none"
+        >
+          <span>{name}</span>
+          <OpenInNewIcon fontSize="inherit" style={{ marginTop: "0.25em", marginLeft: "0.5em" }} />
+        </Link>
+      </div>
+      <div className={styles.statusContainer}>
+        <StatusIndicator status={status} />
+      </div>
     </div>
-  </div>
+  )
 }
 
 const useResourceRowStyles = makeStyles((theme) => ({
@@ -97,24 +109,22 @@ const useResourceRowStyles = makeStyles((theme) => ({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-  }
+  },
 }))
 
 export const Title: React.FC = ({ children }) => {
-  const styles = useTitleStyles();
+  const styles = useTitleStyles()
 
-  return <div className={styles.header}>
-    <Typography variant="h6">{children}</Typography>
-  </div>
+  return <div className={styles.header}>{children}</div>
 }
 
 const useTitleStyles = makeStyles((theme) => ({
   header: {
     alignItems: "center",
     borderBottom: `1px solid ${theme.palette.divider}`,
     display: "flex",
+    flexDirection: "row",
     height: theme.spacing(6),
-    justifyContent: "space-between",
     marginBottom: theme.spacing(2),
     marginTop: -theme.spacing(1),
     paddingBottom: theme.spacing(1),
@@ -124,76 +134,92 @@ const useTitleStyles = makeStyles((theme) => ({
 }))
 
 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';
+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"
 import { QuestionHelp } from "../QuestionHelp"
+import { CircularProgress, Link } from "@material-ui/core"
 
 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>
+  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}>
-      <Typography variant="h4">{workspace.name}</Typography>
-      <Typography variant="body2" color="textSecondary">
-        {"TODO: Project"}
-      </Typography>
-    </Paper>
-    <div className={styles.horizontal}>
-      <div className={styles.sideBar}>
-        <Paper elevation={0} className={styles.section}>
-          <Title><span>Applications</span><QuestionHelp /></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>
+  return (
+    <div className={styles.root}>
+      <Paper elevation={0} className={styles.section}>
+        <Typography variant="h4">{workspace.name}</Typography>
+        <Typography variant="body2" color="textSecondary">
+          {"TODO: Project"}
+        </Typography>
+      </Paper>
+      <div className={styles.horizontal}>
+        <div className={styles.sideBar}>
+          <Paper elevation={0} className={styles.section}>
+            <Title>
+              <Typography variant="h6">Applications</Typography>
+              <div style={{ margin: "0em 1em" }}>
+                <QuestionHelp />
+              </div>
+            </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={"loading"} />
+            </div>
+          </Paper>
+          <Paper elevation={0} className={styles.section}>
+            <Title>
+              <Typography variant="h6">Resources</Typography>
+              <div style={{ margin: "0em 1em" }}>
+                <QuestionHelp />
+              </div>
+            </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={"inactive"} />
+            </div>
+          </Paper>
+        </div>
+        <Paper elevation={0} className={styles.main}>
+          <Title>
+            <Typography variant="h6">Timeline</Typography>
+          </Title>
+          <WorkspaceTimeline />
         </Paper>
       </div>
-      <Paper elevation={0} className={styles.main}>
-        <Title>Timeline</Title>
-        <WorkspaceTimeline />
-      </Paper>
     </div>
-  </div>
+  )
 }
 
 namespace Constants {
@@ -202,36 +228,35 @@ namespace Constants {
 }
 
 export const useStyles = makeStyles((theme) => {
-
   const common = {
     border: `1px solid ${theme.palette.divider}`,
     borderRadius: Constants.CardRadius,
     margin: theme.spacing(1),
-    padding: Constants.CardPadding
+    padding: Constants.CardPadding,
   }
 
   return {
     root: {
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
     },
     horizontal: {
       display: "flex",
-      flexDirection: "row"
+      flexDirection: "row",
     },
     vertical: {
       display: "flex",
-      flexDirection: "column"
+      flexDirection: "column",
     },
     section: common,
     sideBar: {
       display: "flex",
       flexDirection: "column",
-      width: "400px"
+      width: "400px",
     },
     main: {
       ...common,
-      flex: 1
-    }
+      flex: 1,
+    },
   }
-})
+})
diff --git a/site/components/Workspace/index.ts b/site/components/Workspace/index.ts
@@ -1 +1 @@
-export * from "./Workspace"
+export * from "./Workspace"
diff --git a/site/pages/workspaces/[user]/[workspace]/index.tsx b/site/pages/workspaces/[user]/[workspace]/index.tsx
@@ -10,7 +10,6 @@ import { useUser } from "../../../../contexts/UserContext"
 import { Workspace } from "../../../../components/Workspace"
 import { MockWorkspace } from "../../../../test_helpers"
 
-
 const WorkspacesPage: React.FC = () => {
   const styles = useStyles()
   const router = useRouter()
@@ -39,8 +38,8 @@ const useStyles = makeStyles(() => ({
   inner: {
     maxWidth: "1380px",
     margin: "1em auto",
-    width: "100%"
-  }
+    width: "100%",
+  },
 }))
 
 export default WorkspacesPage
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from "./Workspace"
		export * from "./Workspace"