Skip to content

Commit 07d5711

Browse files
bryphe-coderbryphe-coder
committed
Add spinner
1 parent ad56a13 commit 07d5711

File tree

4 files changed

+123
-101
lines changed

4 files changed

+123
-101
lines changed

‎site/components/QuestionHelp.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import * as React from "react"
44

55
export const QuestionHelp: React.FC = () => {
66
const styles = useStyles()
7-
return (
8-
<HelpIcon className={styles.icon} />
9-
)
7+
return <HelpIcon className={styles.icon} />
108
}
119

1210
const useStyles = makeStyles((theme) => ({

‎site/components/Workspace/Workspace.tsx

Lines changed: 119 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Paper from "@material-ui/core/Paper"
22
import { makeStyles } from "@material-ui/core/styles"
33
import Typography from "@material-ui/core/Typography"
4+
import OpenInNewIcon from "@material-ui/icons/OpenInNew"
45
import React from "react"
56

67
import * as API from "../../api"
@@ -10,21 +11,20 @@ export interface WorkspaceProps {
1011
}
1112

1213
const useStatusStyles = makeStyles((theme) => {
13-
1414
const common = {
1515
width: theme.spacing(1),
1616
height: theme.spacing(1),
1717
borderRadius: "100%",
1818
backgroundColor: theme.palette.action.disabled,
1919
transition: "background-color 200ms ease",
20-
};
20+
}
2121

2222
return {
2323
inactive: common,
2424
active: {
2525
...common,
2626
backgroundColor: theme.palette.primary.main,
27-
}
27+
},
2828
}
2929
})
3030

@@ -35,14 +35,15 @@ const useStatusStyles = makeStyles((theme) => {
3535
export const StatusIndicator: React.FC<{ status: ResourceStatus }> = ({ status }) => {
3636
const styles = useStatusStyles()
3737

38-
const className = status === "active" ? styles.active : styles.inactive
39-
return (
40-
<div className={className} />
41-
)
38+
if (status == "loading") {
39+
return <CircularProgress width={"16px"} />
40+
} else {
41+
const className = status === "active" ? styles.active : styles.inactive
42+
return <div className={className} />
43+
}
4244
}
4345

44-
45-
type ResourceStatus = "active" | "inactive"
46+
type ResourceStatus = "active" | "inactive" | "loading"
4647

4748
export interface ResourceRowProps {
4849
name: string
@@ -53,20 +54,31 @@ export interface ResourceRowProps {
5354

5455
const ResourceIconSize = 20
5556

56-
export const ResourceRow: React.FC<ResourceRowProps> = ({ icon, /*href,*/ name, status }) => {
57+
export const ResourceRow: React.FC<ResourceRowProps> = ({ icon, href, name, status }) => {
5758
const styles = useResourceRowStyles()
5859

59-
return <div className={styles.root}>
60-
<div className={styles.iconContainer}>
61-
<img src={icon} height={ResourceIconSize} width={ResourceIconSize} />
62-
</div>
63-
<div className={styles.nameContainer}>
64-
{name}
65-
</div>
66-
<div className={styles.statusContainer}>
67-
<StatusIndicator status={status} />
60+
return (
61+
<div className={styles.root}>
62+
<div className={styles.iconContainer}>
63+
<img src={icon} height={ResourceIconSize} width={ResourceIconSize} />
64+
</div>
65+
<div className={styles.nameContainer}>
66+
<Link
67+
color={status === "active" ? "primary" : "initial"}
68+
href={href}
69+
rel="noreferrer noopener"
70+
target="_blank"
71+
underline="none"
72+
>
73+
<span>{name}</span>
74+
<OpenInNewIcon fontSize="inherit" style={{ marginTop: "0.25em", marginLeft: "0.5em" }} />
75+
</Link>
76+
</div>
77+
<div className={styles.statusContainer}>
78+
<StatusIndicator status={status} />
79+
</div>
6880
</div>
69-
</div>
81+
)
7082
}
7183

7284
const useResourceRowStyles = makeStyles((theme) => ({
@@ -97,24 +109,22 @@ const useResourceRowStyles = makeStyles((theme) => ({
97109
display: "flex",
98110
justifyContent: "center",
99111
alignItems: "center",
100-
}
112+
},
101113
}))
102114

103115
export const Title: React.FC = ({ children }) => {
104-
const styles = useTitleStyles();
116+
const styles = useTitleStyles()
105117

106-
return <div className={styles.header}>
107-
<Typography variant="h6">{children}</Typography>
108-
</div>
118+
return <div className={styles.header}>{children}</div>
109119
}
110120

111121
const useTitleStyles = makeStyles((theme) => ({
112122
header: {
113123
alignItems: "center",
114124
borderBottom: `1px solid ${theme.palette.divider}`,
115125
display: "flex",
126+
flexDirection: "row",
116127
height: theme.spacing(6),
117-
justifyContent: "space-between",
118128
marginBottom: theme.spacing(2),
119129
marginTop: -theme.spacing(1),
120130
paddingBottom: theme.spacing(1),
@@ -124,76 +134,92 @@ const useTitleStyles = makeStyles((theme) => ({
124134
}))
125135

126136
import Timeline from "@material-ui/lab/Timeline"
127-
import TimelineItem from '@material-ui/lab/TimelineItem';
128-
import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
129-
import TimelineConnector from '@material-ui/lab/TimelineConnector';
130-
import TimelineContent from '@material-ui/lab/TimelineContent';
131-
import TimelineDot from '@material-ui/lab/TimelineDot';
137+
import TimelineItem from "@material-ui/lab/TimelineItem"
138+
import TimelineSeparator from "@material-ui/lab/TimelineSeparator"
139+
import TimelineConnector from "@material-ui/lab/TimelineConnector"
140+
import TimelineContent from "@material-ui/lab/TimelineContent"
141+
import TimelineDot from "@material-ui/lab/TimelineDot"
132142
import { QuestionHelp } from "../QuestionHelp"
143+
import { CircularProgress, Link } from "@material-ui/core"
133144

134145
export const WorkspaceTimeline: React.FC = () => {
135-
return <Timeline>
136-
<TimelineItem>
137-
<TimelineSeparator>
138-
<TimelineDot />
139-
<TimelineConnector />
140-
</TimelineSeparator>
141-
<TimelineContent>Eat</TimelineContent>
142-
</TimelineItem>
143-
<TimelineItem>
144-
<TimelineSeparator>
145-
<TimelineDot />
146-
<TimelineConnector />
147-
</TimelineSeparator>
148-
<TimelineContent>Code</TimelineContent>
149-
</TimelineItem>
150-
<TimelineItem>
151-
<TimelineSeparator>
152-
<TimelineDot />
153-
</TimelineSeparator>
154-
<TimelineContent>Sleep</TimelineContent>
155-
</TimelineItem>
156-
</Timeline>
146+
return (
147+
<Timeline>
148+
<TimelineItem>
149+
<TimelineSeparator>
150+
<TimelineDot />
151+
<TimelineConnector />
152+
</TimelineSeparator>
153+
<TimelineContent>Eat</TimelineContent>
154+
</TimelineItem>
155+
<TimelineItem>
156+
<TimelineSeparator>
157+
<TimelineDot />
158+
<TimelineConnector />
159+
</TimelineSeparator>
160+
<TimelineContent>Code</TimelineContent>
161+
</TimelineItem>
162+
<TimelineItem>
163+
<TimelineSeparator>
164+
<TimelineDot />
165+
</TimelineSeparator>
166+
<TimelineContent>Sleep</TimelineContent>
167+
</TimelineItem>
168+
</Timeline>
169+
)
157170
}
158171

159172
export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
160173
const styles = useStyles()
161174

162-
return <div className={styles.root}>
163-
<Paper elevation={0} className={styles.section}>
164-
<Typography variant="h4">{workspace.name}</Typography>
165-
<Typography variant="body2" color="textSecondary">
166-
{"TODO: Project"}
167-
</Typography>
168-
</Paper>
169-
<div className={styles.horizontal}>
170-
<div className={styles.sideBar}>
171-
<Paper elevation={0} className={styles.section}>
172-
<Title><span>Applications</span><QuestionHelp /></Title>
173-
174-
<div className={styles.vertical}>
175-
<ResourceRow name={"Code Web"} icon={"/static/vscode.svg"} status={"active"} />
176-
<ResourceRow name={"Terminal"} icon={"/static/terminal.svg"} status={"active"} />
177-
<ResourceRow name={"React App"} icon={"/static/react-icon.svg"} status={"active"} />
178-
179-
</div>
180-
</Paper>
181-
<Paper elevation={0} className={styles.section}>
182-
<Title>Resources</Title>
183-
184-
<div className={styles.vertical}>
185-
<ResourceRow name={"GCS Bucket"} icon={"/static/google-storage-logo.svg"} status={"active"} />
186-
<ResourceRow name={"Windows (x64 - VM)"} icon={"/static/windows-logo.svg"} status={"active"} />
187-
<ResourceRow name={"OSX (M1 - Physical)"} icon={"/static/apple-logo.svg"} status={"active"} />
188-
</div>
175+
return (
176+
<div className={styles.root}>
177+
<Paper elevation={0} className={styles.section}>
178+
<Typography variant="h4">{workspace.name}</Typography>
179+
<Typography variant="body2" color="textSecondary">
180+
{"TODO: Project"}
181+
</Typography>
182+
</Paper>
183+
<div className={styles.horizontal}>
184+
<div className={styles.sideBar}>
185+
<Paper elevation={0} className={styles.section}>
186+
<Title>
187+
<Typography variant="h6">Applications</Typography>
188+
<div style={{ margin: "0em 1em" }}>
189+
<QuestionHelp />
190+
</div>
191+
</Title>
192+
193+
<div className={styles.vertical}>
194+
<ResourceRow name={"Code Web"} icon={"/static/vscode.svg"} status={"active"} />
195+
<ResourceRow name={"Terminal"} icon={"/static/terminal.svg"} status={"active"} />
196+
<ResourceRow name={"React App"} icon={"/static/react-icon.svg"} status={"loading"} />
197+
</div>
198+
</Paper>
199+
<Paper elevation={0} className={styles.section}>
200+
<Title>
201+
<Typography variant="h6">Resources</Typography>
202+
<div style={{ margin: "0em 1em" }}>
203+
<QuestionHelp />
204+
</div>
205+
</Title>
206+
207+
<div className={styles.vertical}>
208+
<ResourceRow name={"GCS Bucket"} icon={"/static/google-storage-logo.svg"} status={"active"} />
209+
<ResourceRow name={"Windows (x64 - VM)"} icon={"/static/windows-logo.svg"} status={"active"} />
210+
<ResourceRow name={"OSX (M1 - Physical)"} icon={"/static/apple-logo.svg"} status={"inactive"} />
211+
</div>
212+
</Paper>
213+
</div>
214+
<Paper elevation={0} className={styles.main}>
215+
<Title>
216+
<Typography variant="h6">Timeline</Typography>
217+
</Title>
218+
<WorkspaceTimeline />
189219
</Paper>
190220
</div>
191-
<Paper elevation={0} className={styles.main}>
192-
<Title>Timeline</Title>
193-
<WorkspaceTimeline />
194-
</Paper>
195221
</div>
196-
</div>
222+
)
197223
}
198224

199225
namespace Constants {
@@ -202,36 +228,35 @@ namespace Constants {
202228
}
203229

204230
export const useStyles = makeStyles((theme) => {
205-
206231
const common = {
207232
border: `1px solid ${theme.palette.divider}`,
208233
borderRadius: Constants.CardRadius,
209234
margin: theme.spacing(1),
210-
padding: Constants.CardPadding
235+
padding: Constants.CardPadding,
211236
}
212237

213238
return {
214239
root: {
215240
display: "flex",
216-
flexDirection: "column"
241+
flexDirection: "column",
217242
},
218243
horizontal: {
219244
display: "flex",
220-
flexDirection: "row"
245+
flexDirection: "row",
221246
},
222247
vertical: {
223248
display: "flex",
224-
flexDirection: "column"
249+
flexDirection: "column",
225250
},
226251
section: common,
227252
sideBar: {
228253
display: "flex",
229254
flexDirection: "column",
230-
width: "400px"
255+
width: "400px",
231256
},
232257
main: {
233258
...common,
234-
flex: 1
235-
}
259+
flex: 1,
260+
},
236261
}
237-
})
262+
})

‎site/components/Workspace/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export * from "./Workspace"
1+
export * from "./Workspace"

‎site/pages/workspaces/[user]/[workspace]/index.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { useUser } from "../../../../contexts/UserContext"
1010
import { Workspace } from "../../../../components/Workspace"
1111
import { MockWorkspace } from "../../../../test_helpers"
1212

13-
1413
const WorkspacesPage: React.FC = () => {
1514
const styles = useStyles()
1615
const router = useRouter()
@@ -39,8 +38,8 @@ const useStyles = makeStyles(() => ({
3938
inner: {
4039
maxWidth: "1380px",
4140
margin: "1em auto",
42-
width: "100%"
43-
}
41+
width: "100%",
42+
},
4443
}))
4544

4645
export default WorkspacesPage

0 commit comments

Comments
 (0)