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