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)
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