Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a22f1ab

Browse files
kylecarbskylecarbs
committed
Add single template
1 parent 15637bd commit a22f1ab

File tree

4 files changed

+160
-0
lines changed

4 files changed

+160
-0
lines changed

‎site/src/pages/TemplatePage/TemplatePage.test.tsx

Whitespace-only changes.

‎site/src/pages/TemplatePage/TemplatePage.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from "react"
2+
3+
const TemplatePage: React.FC = () => {
4+
return <div>Template page</div>
5+
}
6+
7+
export default TemplatePage

‎site/src/pages/TemplatePage/TemplatePageView.stories.tsx

Whitespace-only changes.

‎site/src/pages/TemplatePage/TemplatePageView.tsx

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import Avatar from "@material-ui/core/Avatar"
2+
import Button from "@material-ui/core/Button"
3+
import Link from "@material-ui/core/Link"
4+
import { makeStyles } from "@material-ui/core/styles"
5+
import Table from "@material-ui/core/Table"
6+
import TableBody from "@material-ui/core/TableBody"
7+
import TableCell from "@material-ui/core/TableCell"
8+
import TableHead from "@material-ui/core/TableHead"
9+
import TableRow from "@material-ui/core/TableRow"
10+
import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
11+
import dayjs from "dayjs"
12+
import relativeTime from "dayjs/plugin/relativeTime"
13+
import React from "react"
14+
import { Link as RouterLink } from "react-router-dom"
15+
import * as TypesGen from "../../api/typesGenerated"
16+
import { Margins } from "../../components/Margins/Margins"
17+
import { Stack } from "../../components/Stack/Stack"
18+
import { firstLetter } from "../../util/firstLetter"
19+
20+
dayjs.extend(relativeTime)
21+
22+
export const Language = {
23+
createButton: "Create Template",
24+
emptyViewCreate: "to standardize development workspaces for your team.",
25+
emptyViewNoPerms: "No templates have been created! Contact your Coder administrator.",
26+
}
27+
28+
export interface TemplatesPageViewProps {
29+
loading?: boolean
30+
canCreateTemplate?: boolean
31+
templates?: TypesGen.Template[]
32+
error?: unknown
33+
}
34+
35+
export const TemplatesPageView: React.FC<TemplatesPageViewProps> = (props) => {
36+
const styles = useStyles()
37+
return (
38+
<Stack spacing={4}>
39+
<Margins>
40+
<div className={styles.actions}>
41+
{props.canCreateTemplate && <Button startIcon={<AddCircleOutline />}>{Language.createButton}</Button>}
42+
</div>
43+
<Table>
44+
<TableHead>
45+
<TableRow>
46+
<TableCell>Name</TableCell>
47+
<TableCell>Used By</TableCell>
48+
<TableCell>Last Updated</TableCell>
49+
</TableRow>
50+
</TableHead>
51+
<TableBody>
52+
{!props.loading && !props.templates?.length && (
53+
<TableRow>
54+
<TableCell colSpan={999}>
55+
<div className={styles.welcome}>
56+
{props.canCreateTemplate ? (
57+
<span>
58+
<Link component={RouterLink} to="/templates/new">
59+
Create a template
60+
</Link>
61+
&nbsp;{Language.emptyViewCreate}
62+
</span>
63+
) : (
64+
<span>{Language.emptyViewNoPerms}</span>
65+
)}
66+
</div>
67+
</TableCell>
68+
</TableRow>
69+
)}
70+
{props.templates?.map((template) => {
71+
return (
72+
<TableRow key={template.id} className={styles.templateRow}>
73+
<TableCell>
74+
<div className={styles.templateName}>
75+
<Avatar variant="square" className={styles.templateAvatar}>
76+
{firstLetter(template.name)}
77+
</Avatar>
78+
<Link component={RouterLink} to={`/templates/${template.id}`} className={styles.templateLink}>
79+
<b>{template.name}</b>
80+
<span>{template.description}</span>
81+
</Link>
82+
</div>
83+
</TableCell>
84+
<TableCell>
85+
{template.workspace_owner_count} developer{template.workspace_owner_count !== 1 && "s"}
86+
</TableCell>
87+
<TableCell>{dayjs().to(dayjs(template.updated_at))}</TableCell>
88+
</TableRow>
89+
)
90+
})}
91+
</TableBody>
92+
</Table>
93+
</Margins>
94+
</Stack>
95+
)
96+
}
97+
98+
const useStyles = makeStyles((theme) => ({
99+
actions: {
100+
marginTop: theme.spacing(3),
101+
marginBottom: theme.spacing(3),
102+
display: "flex",
103+
height: theme.spacing(6),
104+
105+
"& button": {
106+
marginLeft: "auto",
107+
},
108+
},
109+
welcome: {
110+
paddingTop: theme.spacing(12),
111+
paddingBottom: theme.spacing(12),
112+
display: "flex",
113+
flexDirection: "column",
114+
alignItems: "center",
115+
justifyContent: "center",
116+
"& span": {
117+
maxWidth: 600,
118+
textAlign: "center",
119+
fontSize: theme.spacing(2),
120+
lineHeight: `${theme.spacing(3)}px`,
121+
},
122+
},
123+
templateRow: {
124+
"& > td": {
125+
paddingTop: theme.spacing(2),
126+
paddingBottom: theme.spacing(2),
127+
},
128+
},
129+
templateAvatar: {
130+
borderRadius: 2,
131+
marginRight: theme.spacing(1),
132+
width: 24,
133+
height: 24,
134+
fontSize: 16,
135+
},
136+
templateName: {
137+
display: "flex",
138+
alignItems: "center",
139+
},
140+
templateLink: {
141+
display: "flex",
142+
flexDirection: "column",
143+
color: theme.palette.text.primary,
144+
textDecoration: "none",
145+
"&:hover": {
146+
textDecoration: "underline",
147+
},
148+
"& span": {
149+
fontSize: 12,
150+
color: theme.palette.text.secondary,
151+
},
152+
},
153+
}))

0 commit comments

Comments
 (0)