Skip to content

Commit b1cc9d6

Browse files
presleyppresleyp
committed
Move component and prep
1 parent 568574c commit b1cc9d6

File tree

5 files changed

+63
-54
lines changed

5 files changed

+63
-54
lines changed

‎site/src/components/Workspace/Workspace.tsx

Lines changed: 2 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
import Box from "@material-ui/core/Box"
2-
import Paper from "@material-ui/core/Paper"
31
import { makeStyles } from "@material-ui/core/styles"
42
import Typography from "@material-ui/core/Typography"
5-
import CloudCircleIcon from "@material-ui/icons/CloudCircle"
63
import React from "react"
7-
import { Link } from "react-router-dom"
84
import * as Types from "../../api/types"
95
import { WorkspaceSchedule } from "../WorkspaceSchedule/WorkspaceSchedule"
106
import { WorkspaceSection } from "../WorkspaceSection/WorkspaceSection"
11-
import * as Constants from "./constants"
7+
import { WorkspaceStatusBar } from "../WorkspaceStatusBar/WorkspaceStatusBar"
128

139
export interface WorkspaceProps {
1410
organization: Types.Organization
@@ -25,7 +21,7 @@ export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, wo
2521
return (
2622
<div className={styles.root}>
2723
<div className={styles.vertical}>
28-
<WorkspaceHeader organization={organization} template={template} workspace={workspace} />
24+
<WorkspaceStatusBar organization={organization} template={template} workspace={workspace} />
2925
<div className={styles.horizontal}>
3026
<div className={styles.sidebarContainer}>
3127
<WorkspaceSection title="Applications">
@@ -55,40 +51,6 @@ export const Workspace: React.FC<WorkspaceProps> = ({ organization, template, wo
5551
)
5652
}
5753

58-
/**
59-
* Component for the header at the top of the workspace page
60-
*/
61-
export const WorkspaceHeader: React.FC<WorkspaceProps> = ({ organization, template, workspace }) => {
62-
const styles = useStyles()
63-
64-
const templateLink = `/templates/${organization.name}/${template.name}`
65-
66-
return (
67-
<Paper elevation={0} className={styles.section}>
68-
<div className={styles.horizontal}>
69-
<WorkspaceHeroIcon />
70-
<div className={styles.vertical}>
71-
<Typography variant="h4">{workspace.name}</Typography>
72-
<Typography variant="body2" color="textSecondary">
73-
<Link to={templateLink}>{template.name}</Link>
74-
</Typography>
75-
</div>
76-
</div>
77-
</Paper>
78-
)
79-
}
80-
81-
/**
82-
* Component to render the 'Hero Icon' in the header of a workspace
83-
*/
84-
export const WorkspaceHeroIcon: React.FC = () => {
85-
return (
86-
<Box mr="1em">
87-
<CloudCircleIcon width={Constants.TitleIconSize} height={Constants.TitleIconSize} />
88-
</Box>
89-
)
90-
}
91-
9254
/**
9355
* Temporary placeholder component until we have the sections implemented
9456
* Can be removed once the Workspace page has all the necessary sections
@@ -115,12 +77,6 @@ export const useStyles = makeStyles((theme) => {
11577
display: "flex",
11678
flexDirection: "column",
11779
},
118-
section: {
119-
border: `1px solid ${theme.palette.divider}`,
120-
borderRadius: Constants.CardRadius,
121-
padding: Constants.CardPadding,
122-
margin: theme.spacing(1),
123-
},
12480
sidebarContainer: {
12581
display: "flex",
12682
flexDirection: "column",
@@ -129,9 +85,5 @@ export const useStyles = makeStyles((theme) => {
12985
timelineContainer: {
13086
flex: 1,
13187
},
132-
icon: {
133-
width: Constants.TitleIconSize,
134-
height: Constants.TitleIconSize,
135-
},
13688
}
13789
})

‎site/src/components/Workspace/constants.ts

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎site/src/components/WorkspaceSection/WorkspaceSection.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Paper from "@material-ui/core/Paper"
22
import { makeStyles } from "@material-ui/core/styles"
33
import Typography from "@material-ui/core/Typography"
44
import React from "react"
5-
import { CardPadding, CardRadius } from "../Workspace/constants"
5+
import { CardRadius, CardPadding } from "../../theme/constants"
66

77
export interface WorkspaceSectionProps {
88
title: string

‎site/src/components/WorkspaceStatusBar/WorkspaceStatusBar.tsx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import Box from "@material-ui/core/Box"
2+
import Paper from "@material-ui/core/Paper"
3+
import Typography from "@material-ui/core/Typography"
4+
import React from "react"
5+
import { Link } from "react-router-dom"
6+
import { WorkspaceProps } from "../Workspace/Workspace"
7+
import CloudCircleIcon from "@material-ui/icons/CloudCircle"
8+
import { CardPadding, CardRadius, TitleIconSize } from "../../theme/constants"
9+
import { makeStyles } from "@material-ui/core/styles"
10+
11+
/**
12+
* Component for the header at the top of the workspace page
13+
*/
14+
export const WorkspaceStatusBar: React.FC<WorkspaceProps> = ({ organization, template, workspace }) => {
15+
const styles = useStyles()
16+
17+
const templateLink = `/templates/${organization.name}/${template.name}`
18+
19+
return (
20+
<Paper elevation={0} className={styles.section}>
21+
<div className={styles.horizontal}>
22+
<Box mr="1em">
23+
<CloudCircleIcon width={TitleIconSize} height={TitleIconSize} />
24+
</Box>
25+
<div className={styles.vertical}>
26+
<Typography variant="h4">{workspace.name}</Typography>
27+
<Typography variant="body2" color="textSecondary">
28+
<Link to={templateLink}>{template.name}</Link>
29+
</Typography>
30+
</div>
31+
</div>
32+
</Paper>
33+
)
34+
}
35+
36+
const useStyles = makeStyles((theme) => {
37+
return {
38+
icon: {
39+
width: TitleIconSize,
40+
height: TitleIconSize,
41+
},
42+
horizontal: {
43+
display: "flex",
44+
flexDirection: "row",
45+
},
46+
vertical: {
47+
display: "flex",
48+
flexDirection: "column",
49+
},
50+
section: {
51+
border: `1px solid ${theme.palette.divider}`,
52+
borderRadius: CardRadius,
53+
padding: CardPadding,
54+
margin: theme.spacing(1),
55+
},
56+
}
57+
})

‎site/src/theme/constants.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,6 @@ export const emptyBoxShadow = "none"
99
export const navHeight = 56
1010
export const maxWidth = 1380
1111
export const sidePadding = "50px"
12+
export const TitleIconSize = 48
13+
export const CardRadius = 8
14+
export const CardPadding = 20

0 commit comments

Comments
 (0)