Skip to content

Commit 4b82509

Browse files
AbhineetJainAbhineetJain
authored
feat: Make workspaces, timeline, templates rows obviously clickable (coder#2047)
* add right arrow to build table rows * Add clickable rows to template and workspace list * Specify 1% width for chevron right
1 parent 7258d6a commit 4b82509

File tree

3 files changed

+131
-24
lines changed

3 files changed

+131
-24
lines changed

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import Box from "@material-ui/core/Box"
2-
import { makeStyles, Theme } from "@material-ui/core/styles"
2+
import { fade, makeStyles, Theme } 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 useTheme from "@material-ui/styles/useTheme"
910
import { FC } from "react"
1011
import { useNavigate } from "react-router-dom"
@@ -41,6 +42,7 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
4142
<TableCell width="20%">{Language.durationLabel}</TableCell>
4243
<TableCell width="40%">{Language.startedAtLabel}</TableCell>
4344
<TableCell width="20%">{Language.statusLabel}</TableCell>
45+
<TableCell></TableCell>
4446
</TableRow>
4547
</TableHead>
4648
<TableBody>
@@ -79,6 +81,11 @@ export const BuildsTable: FC<BuildsTableProps> = ({ builds, className }) => {
7981
<TableCell>
8082
<span style={{ color: status.color }}>{status.status}</span>
8183
</TableCell>
84+
<TableCell>
85+
<div className={styles.arrowCell}>
86+
<KeyboardArrowRight className={styles.arrowRight} />
87+
</div>
88+
</TableCell>
8289
</TableRow>
8390
)
8491
})}
@@ -102,11 +109,23 @@ const useStyles = makeStyles((theme) => ({
102109
cursor: "pointer",
103110

104111
"&:hover td": {
105-
backgroundColor: theme.palette.background.default,
112+
backgroundColor: fade(theme.palette.primary.light, 0.1),
106113
},
107114

108115
"&:focus": {
109116
outline: `1px solid ${theme.palette.secondary.dark}`,
110117
},
118+
119+
"& .MuiTableCell-root:last-child": {
120+
paddingRight: theme.spacing(2),
121+
},
122+
},
123+
arrowRight: {
124+
color: fade(theme.palette.primary.contrastText, 0.7),
125+
width: 20,
126+
height: 20,
127+
},
128+
arrowCell: {
129+
display: "flex",
111130
},
112131
}))

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

Lines changed: 60 additions & 14 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>
@@ -88,6 +92,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = (props) => {
8892
<TableCell>{Language.nameLabel}</TableCell>
8993
<TableCell>{Language.usedByLabel}</TableCell>
9094
<TableCell>{Language.lastUpdatedLabel}</TableCell>
95+
<TableCell width="1%"></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: 50 additions & 8 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>({
@@ -196,6 +198,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
196198
<TableCell>Version</TableCell>
197199
<TableCell>Last Built</TableCell>
198200
<TableCell>Status</TableCell>
201+
<TableCell width="1%"></TableCell>
199202
</TableRow>
200203
</TableHead>
201204
<TableBody>
@@ -228,14 +231,25 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
228231
{workspaces &&
229232
workspaces.map((workspace) => {
230233
const status = getDisplayStatus(theme, workspace.latest_build)
234+
const navigateToWorkspacePage = () => {
235+
navigate(`/@${workspace.owner_name}/${workspace.name}`)
236+
}
231237
return (
232-
<TableRow key={workspace.id}>
238+
<TableRow
239+
key={workspace.id}
240+
hover
241+
data-testid={`workspace-${workspace.id}`}
242+
tabIndex={0}
243+
onClick={navigateToWorkspacePage}
244+
onKeyDown={(event) => {
245+
if (event.key === "Enter") {
246+
navigateToWorkspacePage()
247+
}
248+
}}
249+
className={styles.clickableTableRow}
250+
>
233251
<TableCell>
234-
<AvatarData
235-
title={workspace.name}
236-
subtitle={workspace.owner_name}
237-
link={`/@${workspace.owner_name}/${workspace.name}`}
238-
/>
252+
<AvatarData title={workspace.name} subtitle={workspace.owner_name} />
239253
</TableCell>
240254
<TableCell>{workspace.template_name}</TableCell>
241255
<TableCell>
@@ -253,6 +267,11 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
253267
<TableCell>
254268
<span style={{ color: status.color }}>{status.status}</span>
255269
</TableCell>
270+
<TableCell>
271+
<div className={styles.arrowCell}>
272+
<KeyboardArrowRight className={styles.arrowRight} />
273+
</div>
274+
</TableCell>
256275
</TableRow>
257276
)
258277
})}
@@ -297,4 +316,27 @@ const useStyles = makeStyles((theme) => ({
297316
border: "none",
298317
},
299318
},
319+
clickableTableRow: {
320+
cursor: "pointer",
321+
322+
"&:hover td": {
323+
backgroundColor: fade(theme.palette.primary.light, 0.1),
324+
},
325+
326+
"&:focus": {
327+
outline: `1px solid ${theme.palette.secondary.dark}`,
328+
},
329+
330+
"& .MuiTableCell-root:last-child": {
331+
paddingRight: theme.spacing(2),
332+
},
333+
},
334+
arrowRight: {
335+
color: fade(theme.palette.primary.contrastText, 0.7),
336+
width: 20,
337+
height: 20,
338+
},
339+
arrowCell: {
340+
display: "flex",
341+
},
300342
}))

0 commit comments

Comments
 (0)