Skip to content

Commit c0824d5

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor templates table
1 parent 4cef295 commit c0824d5

File tree

2 files changed

+76
-52
lines changed

2 files changed

+76
-52
lines changed

‎site/src/components/TableLoader/TableLoader.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import Box from "@material-ui/core/Box"
12
import CircularProgress from "@material-ui/core/CircularProgress"
23
import { makeStyles } from "@material-ui/core/styles"
34
import TableCell from "@material-ui/core/TableCell"
@@ -10,7 +11,9 @@ export const TableLoader: React.FC = () => {
1011
return (
1112
<TableRow>
1213
<TableCell colSpan={999} className={styles.cell}>
13-
<CircularProgress size={30} />
14+
<Box p={4}>
15+
<CircularProgress size={26} />
16+
</Box>
1417
</TableCell>
1518
</TableRow>
1619
)

‎site/src/pages/TemplatesPages/TemplatesPage.tsx

Lines changed: 72 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1+
import Box from "@material-ui/core/Box"
12
import { makeStyles } from "@material-ui/core/styles"
3+
import Table from "@material-ui/core/Table"
4+
import TableBody from "@material-ui/core/TableBody"
5+
import TableCell from "@material-ui/core/TableCell"
6+
import TableHead from "@material-ui/core/TableHead"
7+
import TableRow from "@material-ui/core/TableRow"
28
import React from "react"
39
import { Link } from "react-router-dom"
410
import useSWR from "swr"
@@ -7,72 +13,87 @@ import { CodeExample } from "../../components/CodeExample/CodeExample"
713
import { EmptyState } from "../../components/EmptyState/EmptyState"
814
import { ErrorSummary } from "../../components/ErrorSummary/ErrorSummary"
915
import { Header } from "../../components/Header/Header"
10-
import { FullScreenLoader } from "../../components/Loader/FullScreenLoader"
1116
import { Margins } from "../../components/Margins/Margins"
1217
import { Stack } from "../../components/Stack/Stack"
13-
import { Column, Table } from "../../components/Table/Table"
18+
import { TableHeaderRow } from "../../components/TableHeaders/TableHeaders"
19+
import { TableLoader } from "../../components/TableLoader/TableLoader"
20+
import { TableTitle } from "../../components/TableTitle/TableTitle"
21+
22+
export const Language = {
23+
title: "Templates",
24+
tableTitle: "All templates",
25+
nameLabel: "Name",
26+
emptyMessage: "No templates have been created yet",
27+
emptyDescription: "Run the following command to get started:",
28+
}
1429

1530
export const TemplatesPage: React.FC = () => {
1631
const styles = useStyles()
1732
const { data: orgs, error: orgsError } = useSWR<TypesGen.Organization[], Error>("/api/v2/users/me/organizations")
1833
const { data: templates, error } = useSWR<TypesGen.Template[] | null, Error>(
1934
orgs ? `/api/v2/organizations/${orgs[0].id}/templates` : null,
2035
)
21-
22-
if (error) {
23-
return <ErrorSummary error={error} />
24-
}
25-
26-
if (orgsError) {
27-
return <ErrorSummary error={error} />
28-
}
29-
30-
if (!templates || !orgs) {
31-
return <FullScreenLoader />
32-
}
33-
36+
const isLoading = !templates || !orgs
37+
const subTitle = templates ? `${templates.length} total` : undefined
38+
const hasError = orgsError || error
3439
// Create a dictionary of organization ID -> organization Name
3540
// Needed to properly construct links to dive into a template
36-
const orgDictionary = orgs.reduce((acc: Record<string, string>, curr: TypesGen.Organization) => {
37-
return {
38-
...acc,
39-
[curr.id]: curr.name,
40-
}
41-
}, {})
42-
43-
const columns: Column<TypesGen.Template>[] = [
44-
{
45-
key: "name",
46-
name: "Name",
47-
renderer: (nameField: string, data: TypesGen.Template) => {
48-
return <Link to={`/templates/${orgDictionary[data.organization_id]}/${nameField}`}>{nameField}</Link>
49-
},
50-
},
51-
]
52-
53-
const description = (
54-
<div>
55-
<div className={styles.descriptionLabel}>Run the following command to get started:</div>
56-
<CodeExample code="coder templates create" />
57-
</div>
58-
)
59-
60-
const emptyState = <EmptyState message="No templates have been created yet" description={description} />
61-
62-
const tableProps = {
63-
title: "All Templates",
64-
columns: columns,
65-
emptyState: emptyState,
66-
data: templates,
67-
}
68-
69-
const subTitle = `${templates.length} total`
41+
const orgDictionary =
42+
orgs &&
43+
orgs.reduce((acc: Record<string, string>, curr: TypesGen.Organization) => {
44+
return {
45+
...acc,
46+
[curr.id]: curr.name,
47+
}
48+
}, {})
7049

7150
return (
7251
<Stack spacing={4}>
73-
<Header title="Templates" subTitle={subTitle} />
52+
<Header title={Language.title} subTitle={subTitle} />
7453
<Margins>
75-
<Table {...tableProps} />
54+
{error && <ErrorSummary error={error} />}
55+
{orgsError && <ErrorSummary error={orgsError} />}
56+
{!hasError && (
57+
<Table>
58+
<TableHead>
59+
<TableTitle title={Language.tableTitle} />
60+
<TableHeaderRow>
61+
<TableCell size="small">{Language.nameLabel}</TableCell>
62+
</TableHeaderRow>
63+
</TableHead>
64+
<TableBody>
65+
{isLoading && <TableLoader />}
66+
{templates &&
67+
orgs &&
68+
orgDictionary &&
69+
templates.map((t) => (
70+
<TableRow key={t.id}>
71+
<TableCell>
72+
<Link to={`/templates/${orgDictionary[t.organization_id]}/${t.name}`}>{t.name}</Link>
73+
</TableCell>
74+
</TableRow>
75+
))}
76+
77+
{templates && templates.length === 0 && (
78+
<TableRow>
79+
<TableCell colSpan={999}>
80+
<Box p={4}>
81+
<EmptyState
82+
message={Language.emptyMessage}
83+
description={
84+
<div>
85+
<div className={styles.descriptionLabel}>{Language.emptyDescription}</div>
86+
<CodeExample code="coder templates create" />
87+
</div>
88+
}
89+
/>
90+
</Box>
91+
</TableCell>
92+
</TableRow>
93+
)}
94+
</TableBody>
95+
</Table>
96+
)}
7697
</Margins>
7798
</Stack>
7899
)

0 commit comments

Comments
 (0)