8000 Add clickable rows to template and workspace list · coder/coder@9f3bd50 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9f3bd50

Browse files
AbhineetJainAbhineetJain
committed
Add clickable rows to template and workspace list
1 parent c82d4fd commit 9f3bd50

File tree

3 files changed

+124
-34
lines changed

3 files changed

+124
-34
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"
@@ -71,6 +73,8 @@ export interface TemplatesPageViewProps {
7173

7274
export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
7375
const styles = useStyles()
76+
const navigate = useNavigate()
77+
7478
return (
7579
<Margins>
7680
<PageHeader>
@@ -85,9 +89,10 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
8589
<Table>
8690
<TableHead>
8791
<TableRow>
88-
<TableCell>{Language.nameLabel}</TableCell>
89-
<TableCell>{Language.usedByLabel}</TableCell>
90-
<TableCell>{Language.lastUpdatedLabel}</TableCell>
92+
<TableCell width="33%">{Language.nameLabel}</TableCell>
93+
<TableCell width="33%">{Language.usedByLabel}</TableCell>
94+
<TableCell width="33%">{Language.lastUpdatedLabel}</TableCell>
95+
<TableCell></TableCell>
9196
</TableRow>
9297
</TableHead>
9398
<TableBody>
@@ -104,21 +109,39 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
104109
</TableCell>
105110
</TableRow>
106111
)}
107-
{props.templates?.map((template) => (
108-
<TableRow key={template.id}>
109-
<TableCell>
110-
<AvatarData
111-
title={template.name}
112-
subtitle={template.description}
113-
link={`/templates/${template.name}`}
114-
/>
115-
</TableCell>
112+
{props.templates?.map((template) => {
113+
const navigateToTemplatePage = () => {
114+
navigate(`/templates/${template.name}`)
115+
}
116+
return (
117+
<TableRow
118+
key={template.id}
119+
hover
120+
data-testid={`template-${template.id}`}
121+
tabIndex={0}
122+
onClick={navigateToTemplatePage}
123+
onKeyDown={(event) => {
124+
if (event.key === "Enter") {
125+
navigateToTemplatePage()
126+
}
127+
}}
128+
className={styles.clickableTableRow}
129+
>
130+
<TableCell>
131+
<AvatarData title={template.name} subtitle={template.description} />
132+
</TableCell>
116133

117-
<TableCell>{Language.developerCount(template.workspace_owner_count)}</TableCell>
134+
<TableCell>{Language.developerCount(template.workspace_owner_count)}</TableCell>
118135

119-
<TableCell data-chromatic="ignore">{dayjs().to(dayjs(template.updated_at))}</TableCell>
120-
</TableRow>
121-
))}
136+
<TableCell data-chromatic="ignore">{dayjs().to(dayjs(template.updated_at))}</TableCell>
137+
<TableCell>
138+
<div className={styles.arrowCell}>
139+
<KeyboardArrowRight className={styles.arrowRight} />
140+
</div>
141+
</TableCell>
142+
</TableRow>
143+
)
144+
})}
122145
</TableBody>
123146
</Table>
124147
</Margins>
@@ -129,4 +152,27 @@ const useStyles = makeStyles((theme) => ({
129152
emptyDescription: {
130153
maxWidth: theme.spacing(62),
131154
},
155+
clickableTableRow: {
156+
cursor: "pointer",
157+
158+
"&:hover td": {
159+
backgroundColor: fade(theme.palette.primary.light, 0.1),
160+
},
161+
162+
"&:focus": {
163+
outline: `1px solid ${theme.palette.secondary.dark}`,
164+
},
165+
166+
"& .MuiTableCell-root:last-child": {
167+
paddingRight: theme.spacing(2),
168+
},
169+
},
170+
arrowRight: {
171+
color: fade(theme.palette.primary.contrastText, 0.7),
172+
width: 20,
173+
height: 20,
174+
},
175+
arrowCell: {
176+
display: "flex",
177+
},
132178
}))

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

Lines changed: 55 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,22 @@ import InputAdornment from "@material-ui/core/InputAdornment"
44
import Link from "@material-ui/core/Link"
55
import Menu from "@material-ui/core/Menu"
66
import MenuItem from "@material-ui/core/MenuItem"
7-
import { makeStyles, Theme } from "@material-ui/core/styles"
7+
import { fade, makeStyles, Theme } from "@material-ui/core/styles"
88
import Table from "@material-ui/core/Table"
99
import TableBody from "@material-ui/core/TableBody"
1010
import TableCell from "@material-ui/core/TableCell"
1111
import TableHead from "@material-ui/core/TableHead"
1212
import TableRow from "@material-ui/core/TableRow"
1313
import TextField from "@material-ui/core/TextField"
1414
import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
15+
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
1516
import SearchIcon from "@material-ui/icons/Search"
1617
import useTheme from "@material-ui/styles/useTheme"
1718
import dayjs from "dayjs"
1819
import relativeTime from "dayjs/plugin/relativeTime"
1920
import { FormikErrors, useFormik } from "formik"
2021
import { FC, useState } from "react"
21-
import { Link as RouterLink } from "react-router-dom"
22+
import { Link as RouterLink, useNavigate } from "react-router-dom"
2223
import * as TypesGen from "../../api/typesGenerated"
2324
import { AvatarData } from "../../components/AvatarData/AvatarData"
2425
import { CloseDropdown, OpenDropdown } from "../../components/DropdownArrows/DropdownArrows"
@@ -90,6 +91,7 @@ export interface WorkspacesPageViewProps {
9091

9192
export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, workspaces, filter, onFilter }) => {
9293
const styles = useStyles()
94+
const navigate = useNavigate()
9395
const theme: Theme = useTheme()
9496

9597
const form = useFormik<FilterFormValues>({
@@ -190,11 +192,12 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
190192
<Table>
191193
<TableHead>
192194
<TableRow>
193-
<TableCell>Name</TableCell>
194-
<TableCell>Template</TableCell>
195-
<TableCell>Version</TableCell>
196-
<TableCell>Last Built</TableCell>
197-
<TableCell>Status</TableCell>
195+
<TableCell width="20%">Name</TableCell>
196+
<TableCell width="20%">Template</TableCell>
197+
<TableCell width="20%">Version</TableCell>
198+
<TableCell width="20%">Last Built</TableCell>
199+
<TableCell width="20%">Status</TableCell>
200+
<TableCell></TableCell>
198201
</TableRow>
199202
</TableHead>
200203
<TableBody>
@@ -217,14 +220,25 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
217220
{workspaces &&
218221
workspaces.map((workspace) => {
219222
const status = getDisplayStatus(theme, workspace.latest_build)
223+
const navigateToWorkspacePage = () => {
224+
navigate(`/@${workspace.owner_name}/${workspace.name}`)
225+
}
220226
return (
221-
<TableRow key={workspace.id}>
227+
<TableRow
228+
key={workspace.id}
229+
hover
230+
data-testid={`workspace-${workspace.id}`}
231+
tabIndex={0}
232+
onClick={navigateToWorkspacePage}
233+
onKeyDown={(event) => {
234+
if (event.key === "Enter") {
235+
navigateToWorkspacePage()
236+
}
237+
}}
238+
className={styles.clickableTableRow}
239+
>
222240
<TableCell>
223-
<AvatarData
224-
title={workspace.name}
225-
subtitle={workspace.owner_name}
226-
link={`/@${workspace.owner_name}/${workspace.name}`}
227-
/>
241+
<AvatarData title={workspace.name} subtitle={workspace.owner_name} />
228242
</TableCell>
229243
<TableCell>{workspace.template_name}</TableCell>
230244
<TableCell>
@@ -242,6 +256,11 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
242256
<TableCell>
243257
<span style={{ color: status.color }}>{status.status}</span>
244258
</TableCell>
259+
<TableCell>
260+
<div className={styles.arrowCell}>
261+
<KeyboardArrowRight className={styles.arrowRight} />
262+
</div>
263+
</TableCell>
245264
</TableRow>
246265
)
247266
})}
@@ -286,4 +305,27 @@ const useStyles = makeStyles((theme) => ({
286305
border: "none",
287306
},
288307
},
308+
clickableTableRow: {
309+
cursor: "pointer",
310+
311+
"&:hover td": {
312+
backgroundColor: fade(theme.palette.primary.light, 0.1),
313+
},
314+
315+
"&:focus": {
316+
outline: `1px solid ${theme.palette.secondary.dark}`,
317+
},
318+
319+
"& .MuiTableCell-root:last-child": {
320+
paddingRight: theme.spacing(2),
321+
},
322+
},
323+
arrowRight: {
324+
color: fade(theme.palette.primary.contrastText, 0.7),
325+
width: 20,
326+
height: 20,
327+
},
328+
arrowCell: {
329+
display: "flex",
330+
},
289331
}))

0 commit comments

Comments
 (0)
0