Skip to content

Commit df532d8

Browse files
bryphe-coderbryphe-coder
committed
Merge branch 'main' into bryphe/refactor/fix-lint-issues
2 parents 3b02d21 + 2e12cb9 commit df532d8

File tree

4 files changed

+117
-8
lines changed

4 files changed

+117
-8
lines changed

‎examples/project-with-resource/main.tf

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# For interesting types of variables, check out the terraform docs:
2+
# https://www.terraform.io/language/values/variables#declaring-an-input-variable
3+
variable "message" {
4+
type = string
5+
}
6+
7+
# We can use a "null_resource" to test resources without a cloud provider:
8+
# https://www.terraform.io/language/resources/provisioners/null_resource
9+
resource "null_resource" "minimal_resource" {
10+
11+
# Note that Terraform's `provisioner` concept is generally an anti-pattern -
12+
# more info here: https://www.terraform.io/language/resources/provisioners/syntax
13+
# But it's helpful here for testing a resource.
14+
provisioner "local-exec" {
15+
command = "echo ${var.message}"
16+
}
17+
}

‎site/components/Workspace/Workspace.tsx

Lines changed: 49 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,14 @@ import { makeStyles } from "@material-ui/core/styles"
55
import CloudCircleIcon from "@material-ui/icons/CloudCircle"
66
import Link from "next/link"
77
import React from "react"
8-
8+
import * as Constants from "./constants"
99
import * as API from "../../api"
10+
import { WorkspaceSection } from "./WorkspaceSection"
1011

1112
export interface WorkspaceProps {
1213
workspace: API.Workspace
1314
}
1415

15-
namespace Constants {
16-
export const TitleIconSize = 48
17-
export const CardRadius = 8
18-
export const CardPadding = 20
19-
}
20-
2116
/**
2217
* Workspace is the top-level component for viewing an individual workspace
2318
*/
@@ -26,7 +21,32 @@ export const Workspace: React.FC<WorkspaceProps> = ({ workspace }) => {
2621

2722
return (
2823
<div className={styles.root}>
29-
<WorkspaceHeader workspace={workspace} />
24+
<div className={styles.vertical}>
25+
<WorkspaceHeader workspace={workspace} />
26+
<div className={styles.horizontal}>
27+
<div className={styles.sidebarContainer}>
28+
<WorkspaceSection title="Applications">
29+
<Placeholder />
30+
</WorkspaceSection>
31+
<WorkspaceSection title="Dev URLs">
32+
<Placeholder />
33+
</WorkspaceSection>
34+
<WorkspaceSection title="Resources">
35+
<Placeholder />
36+
</WorkspaceSection>
37+
</div>
38+
<div className={styles.timelineContainer}>
39+
<WorkspaceSection title="Timeline">
40+
<div
41+
className={styles.vertical}
42+
style={{ justifyContent: "center", alignItems: "center", height: "300px" }}
43+
>
44+
<Placeholder />
45+
</div>
46+
</WorkspaceSection>
47+
</div>
48+
</div>
49+
</div>
3050
</div>
3151
)
3252
}
@@ -63,6 +83,18 @@ export const WorkspaceHeroIcon: React.FC = () => {
6383
)
6484
}
6585

86+
/**
87+
* Temporary placeholder component until we have the sections implemented
88+
* Can be removed once the Workspace page has all the necessary sections
89+
*/
90+
const Placeholder: React.FC = () => {
91+
return (
92+
<div style={{ textAlign: "center", opacity: "0.5" }}>
93+
<Typography variant="caption">Not yet implemented</Typography>
94+
</div>
95+
)
96+
}
97+
6698
export const useStyles = makeStyles((theme) => {
6799
return {
68100
root: {
@@ -81,6 +113,15 @@ export const useStyles = makeStyles((theme) => {
81113
border: `1px solid ${theme.palette.divider}`,
82114
borderRadius: Constants.CardRadius,
83115
padding: Constants.CardPadding,
116+
margin: theme.spacing(1),
117+
},
118+
sidebarContainer: {
119+
display: "flex",
120+
flexDirection: "column",
121+
flex: "0 0 350px",
122+
},
123+
timelineContainer: {
124+
flex: 1,
84125
},
85126
icon: {
86127
width: Constants.TitleIconSize,

‎site/components/Workspace/WorkspaceSection.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import Paper from "@material-ui/core/Paper"
2+
import { makeStyles } from "@material-ui/core/styles"
3+
import Typography from "@material-ui/core/Typography"
4+
import React from "react"
5+
import { CardPadding, CardRadius } from "./constants"
6+
7+
export interface WorkspaceSectionProps {
8+
title: string
9+
}
10+
11+
export const WorkspaceSection: React.FC<WorkspaceSectionProps> = ({ title, children }) => {
12+
const styles = useStyles()
13+
14+
return (
15+
<Paper elevation={0} className={styles.root}>
16+
<div className={styles.headerContainer}>
17+
<div className={styles.header}>
18+
<Typography variant="h6">{title}</Typography>
19+
</div>
20+
</div>
21+
22+
<div className={styles.contents}>{children}</div>
23+
</Paper>
24+
)
25+
}
26+
27+
const useStyles = makeStyles((theme) => ({
28+
root: {
29+
border: `1px solid ${theme.palette.divider}`,
30+
borderRadius: CardRadius,
31+
margin: theme.spacing(1),
32+
},
33+
headerContainer: {
34+
borderBottom: `1px solid ${theme.palette.divider}`,
35+
},
36+
contents: {
37+
margin: theme.spacing(2),
38+
},
39+
header: {
40+
alignItems: "center",
41+
display: "flex",
42+
flexDirection: "row",
43+
marginBottom: theme.spacing(1),
44+
marginTop: theme.spacing(1),
45+
paddingLeft: CardPadding + theme.spacing(1),
46+
paddingRight: CardPadding / 2,
47+
},
48+
}))

‎site/components/Workspace/constants.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const TitleIconSize = 48
2+
export const CardRadius = 8
3+
export const CardPadding = 20

0 commit comments

Comments
 (0)