Skip to content

Commit 7d9db12

Browse files
AbhineetJainAbhineetJain
committed
Add clickable rows to template and workspace list
1 parent 2a1d4c4 commit 7d9db12

File tree

3 files changed

+125
-35
lines changed

3 files changed

+125
-35
lines changed

‎site/src/components/BuildsTable/BuildsTable.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
4242
<TableCell width="20%">{Language.durationLabel}</TableCell>
4343
<TableCell width="40%">{Language.startedAtLabel}</TableCell>
4444
<TableCell width="20%">{Language.statusLabel}</TableCell>
45+
<TableCell></TableCell>
4546
</TableRow>
4647
</TableHead>
4748
<TableBody>
@@ -78,8 +79,10 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
7879
</span>
7980
</TableCell>
8081
<TableCell>
81-
<div className={styles.statusCell}>
82-
<span style={{ color: status.color }}>{status.status}</span>
82+
<span style={{ color: status.color }}>{status.status}</span>
83+
</TableCell>
84+
<TableCell>
85+
<div className={styles.arrowCell}>
8386
<KeyboardArrowRight className={styles.arrowRight} />
8487
</div>
8588
</TableCell>
@@ -122,8 +125,7 @@ const useStyles = makeStyles((theme) => ({
122125
width: 20,
123126
height: 20,
124127
},
125-
statusCell: {
128+
arrowCell: {
126129
display: "flex",
127-
justifyContent: "space-between",
128130
},
129131
}))

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

Lines changed: 63 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import Link from "@material-ui/core/Link"
2-
import { makeStyles } from "@material-ui/core/styles"
2+
import { fade, makeStyles } from "@material-ui/core/styles"
33
import Table from "@material-ui/core/Table"
44
import TableBody from "@material-ui/core/TableBody"
55
import TableCell from "@material-ui/core/TableCell"
66
import TableHead from "@material-ui/core/TableHead"
77
import TableRow from "@material-ui/core/TableRow"
8+
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
89
import dayjs from "dayjs"
910
import relativeTime from "dayjs/plugin/relativeTime"
1011
import { FC } from "react"
12+
import { useNavigate } from "react-router-dom"
1113
import * as TypesGen from "../../api/typesGenerated"
1214
import { AvatarData } from "../../components/AvatarData/AvatarData"
1315
import { CodeExample } from "../../components/CodeExample/CodeExample"
@@ -46,15 +48,18 @@ export interface TemplatesPageViewProps {
4648

4749
export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
4850
const styles = useStyles()
51+
const navigate = useNavigate()
52+
4953
return (
5054
<Stack spacing={4} className={styles.root}>
5155
<Margins>
5256
<Table>
5357
<TableHead>
5458
<TableRow>
55-
<TableCell>{Language.nameLabel}</TableCell>
56-
<TableCell>{Language.usedByLabel}</TableCell>
57-
<TableCell>{Language.lastUpdatedLabel}</TableCell>
59+
<TableCell width="33%">{Language.nameLabel}</TableCell>
60+
<TableCell width="33%">{Language.usedByLabel}</TableCell>
61+
<TableCell width="33%">{Language.lastUpdatedLabel}</TableCell>
62+
<TableCell></TableCell>
5863
</TableRow>
5964
</TableHead>
6065
<TableBody>
@@ -71,21 +76,39 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
7176
</TableCell>
7277
</TableRow>
7378
)}
74-
{props.templates?.map((template) => (
75-
<TableRow key={template.id}>
76-
<TableCell>
77-
<AvatarData
78-
title={template.name}
79-
subtitle={template.description}
80-
link={`/templates/${template.name}`}
81-
/>
82-
</TableCell>
79+
{props.templates?.map((template) => {
80+
const navigateToTemplatePage = () => {
81+
navigate(`/templates/${template.name}`)
82+
}
83+
return (
84+
<TableRow
85+
key={template.id}
86+
hover
87+
data-testid={`template-${template.id}`}
88+
tabIndex={0}
89+
onClick={navigateToTemplatePage}
90+
onKeyDown={(event) => {
91+
if (event.key === "Enter") {
92+
navigateToTemplatePage()
93+
}
94+
}}
95+
className={styles.clickableTableRow}
96+
>
97+
<TableCell>
98+
<AvatarData title={template.name} subtitle={template.description} />
99+
</TableCell>
83100

84-
<TableCell>{Language.developerCount(template.workspace_owner_count)}</TableCell>
101+
<TableCell>{Language.developerCount(template.workspace_owner_count)}</TableCell>
85102

86-
<TableCell data-chromatic="ignore">{dayjs().to(dayjs(template.updated_at))}</TableCell>
87-
</TableRow>
88-
))}
103+
<TableCell data-chromatic="ignore">{dayjs().to(dayjs(template.updated_at))}</TableCell>
104+
<TableCell>
105+
<div className={styles.arrowCell}>
106+
<KeyboardArrowRight className={styles.arrowRight} />
107+
</div>
108+
</TableCell>
109+
</TableRow>
110+
)
111+
})}
89112
</TableBody>
90113
</Table>
91114
</Margins>
@@ -100,4 +123,27 @@ const useStyles = makeStyles((theme) => ({
100123
emptyDescription: {
101124
maxWidth: theme.spacing(62),
102125
},
126+
clickableTableRow: {
127+
cursor: "pointer",
128+
129+
"&:hover td": {
130+
backgroundColor: fade(theme.palette.primary.light, 0.1),
131+
},
132+
133+
"&:focus": {
134+
outline: `1px solid ${theme.palette.secondary.dark}`,
135+
},
136+
137+
"& .MuiTableCell-root:last-child": {
138+
paddingRight: theme.spacing(2),
139+
},
140+
},
141+
arrowRight: {
142+
color: fade(theme.palette.primary.contrastText, 0.7),
143+
width: 20,
144+
height: 20,
145+
},
146+
arrowCell: {
147+
display: "flex",
148+
},
103149
}))

‎site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

Lines changed: 56 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
import Button from "@material-ui/core/Button"
22
import Link from "@material-ui/core/Link"
3-
import { makeStyles, Theme } from "@material-ui/core/styles"
3+
import { fade, makeStyles, Theme } from "@material-ui/core/styles"
44
import Table from "@material-ui/core/Table"
55
import TableBody from "@material-ui/core/TableBody"
66
import TableCell from "@material-ui/core/TableCell"
77
import TableHead from "@material-ui/core/TableHead"
88
import TableRow from "@material-ui/core/TableRow"
99
import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
10+
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
1011
import useTheme from "@material-ui/styles/useTheme"
1112
import dayjs from "dayjs"
1213
import relativeTime from "dayjs/plugin/relativeTime"
1314
import { FC } from "react"
14-
import { Link as RouterLink } from "react-router-dom"
15+
import { Link as RouterLink, useNavigate } from "react-router-dom"
1516
import * as TypesGen from "../../api/typesGenerated"
1617
import { AvatarData } from "../../components/AvatarData/AvatarData"
1718
import { EmptyState } from "../../components/EmptyState/EmptyState"
@@ -33,19 +34,21 @@ export interface WorkspacesPageViewProps {
3334
}
3435

3536
export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, workspaces }) => {
36-
useStyles()
37+
const styles = useStyles()
38+
const navigate = useNavigate()
3739
const theme: Theme = useTheme()
3840

3941
return (
4042
<Stack spacing={4}>
4143
<Table>
4244
<TableHead>
4345
<TableRow>
44-
<TableCell>Name</TableCell>
45-
<TableCell>Template</TableCell>
46-
<TableCell>Version</TableCell>
47-
<TableCell>Last Built</TableCell>
48-
<TableCell>Status</TableCell>
46+
<TableCell width="20%">Name</TableCell>
47+
<TableCell width="20%">Template</TableCell>
48+
<TableCell width="20%">Version</TableCell>
49+
<TableCell width="20%">Last Built</TableCell>
50+
<TableCell width="20%">Status</TableCell>
51+
<TableCell></TableCell>
4952
</TableRow>
5053
</TableHead>
5154
<TableBody>
@@ -68,14 +71,25 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
6871
{workspaces &&
6972
workspaces.map((workspace) => {
7073
const status = getDisplayStatus(theme, workspace.latest_build)
74+
const navigateToWorkspacePage = () => {
75+
navigate(`/workspaces/${workspace.id}`)
76+
}
7177
return (
72-
<TableRow key={workspace.id}>
78+
<TableRow
79+
key={workspace.id}
80+
hover
81+
data-testid={`workspace-${workspace.id}`}
82+
tabIndex={0}
83+
onClick={navigateToWorkspacePage}
84+
onKeyDown={(event) => {
85+
if (event.key === "Enter") {
86+
navigateToWorkspacePage()
87+
}
88+
}}
89+
className={styles.clickableTableRow}
90+
>
7391
<TableCell>
74-
<AvatarData
75-
title={workspace.name}
76-
subtitle={workspace.owner_name}
77-
link={`/workspaces/${workspace.id}`}
78-
/>
92+
<AvatarData title={workspace.name} subtitle={workspace.owner_name} />
7993
</TableCell>
8094
<TableCell>{workspace.template_name}</TableCell>
8195
<TableCell>
@@ -93,6 +107,11 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
93107
<TableCell>
94108
<span style={{ color: status.color }}>{status.status}</span>
95109
</TableCell>
110+
<TableCell>
111+
<div className={styles.arrowCell}>
112+
<KeyboardArrowRight className={styles.arrowRight} />
113+
</div>
114+
</TableCell>
96115
</TableRow>
97116
)
98117
})}
@@ -117,4 +136,27 @@ const useStyles = makeStyles((theme) => ({
117136
lineHeight: `${theme.spacing(3)}px`,
118137
},
119138
},
139+
clickableTableRow: {
140+
cursor: "pointer",
141+
142+
"&:hover td": {
143+
backgroundColor: fade(theme.palette.primary.light, 0.1),
144+
},
145+
146+
"&:focus": {
147+
outline: `1px solid ${theme.palette.secondary.dark}`,
148+
},
149+
150+
"& .MuiTableCell-root:last-child": {
151+
paddingRight: theme.spacing(2),
152+
},
153+
},
154+
arrowRight: {
155+
color: fade(theme.palette.primary.contrastText, 0.7),
156+
width: 20,
157+
height: 20,
158+
},
159+
arrowCell: {
160+
display: "flex",
161+
},
120162
}))

0 commit comments

Comments
 (0)