Skip to content

Commit 4b82509

Browse files
AbhineetJainAbhineetJain
authored
feat: Make workspaces, timeline, templates rows obviously clickable (#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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy