@@ -4,21 +4,22 @@ import InputAdornment from "@material-ui/core/InputAdornment"
4
4
import Link from "@material-ui/core/Link"
5
5
import Menu from "@material-ui/core/Menu"
6
6
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"
8
8
import Table from "@material-ui/core/Table"
9
9
import TableBody from "@material-ui/core/TableBody"
10
10
import TableCell from "@material-ui/core/TableCell"
11
11
import TableHead from "@material-ui/core/TableHead"
12
12
import TableRow from "@material-ui/core/TableRow"
13
13
import TextField from "@material-ui/core/TextField"
14
14
import AddCircleOutline from "@material-ui/icons/AddCircleOutline"
15
+ import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
15
16
import SearchIcon from "@material-ui/icons/Search"
16
17
import useTheme from "@material-ui/styles/useTheme"
17
18
import dayjs from "dayjs"
18
19
import relativeTime from "dayjs/plugin/relativeTime"
19
20
import { FormikErrors , useFormik } from "formik"
20
21
import { FC , useState } from "react"
21
- import { Link as RouterLink } from "react-router-dom"
22
+ import { Link as RouterLink , useNavigate } from "react-router-dom"
22
23
import * as TypesGen from "../../api/typesGenerated"
23
24
import { AvatarData } from "../../components/AvatarData/AvatarData"
24
25
import { CloseDropdown , OpenDropdown } from "../../components/DropdownArrows/DropdownArrows"
@@ -90,6 +91,7 @@ export interface WorkspacesPageViewProps {
90
91
91
92
export const WorkspacesPageView : FC < WorkspacesPageViewProps > = ( { loading, workspaces, filter, onFilter } ) => {
92
93
const styles = useStyles ( )
94
+ const navigate = useNavigate ( )
93
95
const theme : Theme = useTheme ( )
94
96
95
97
const form = useFormik < FilterFormValues > ( {
@@ -190,11 +192,12 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
190
192
< Table >
191
193
< TableHead >
192
194
< 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 >
198
201
</ TableRow >
199
202
</ TableHead >
200
203
< TableBody >
@@ -217,14 +220,25 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
217
220
{ workspaces &&
218
221
workspaces. map ( ( workspace ) => {
219
222
const status = getDisplayStatus ( theme , workspace . latest_build )
223
+ const navigateToWorkspacePage = ( ) => {
224
+ navigate ( `/@${ workspace . owner_name } /${ workspace . name } ` )
225
+ }
220
226
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
+ >
222
240
< 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 } />
228
242
</ TableCell >
229
243
< TableCell > { workspace . template_name } </ TableCell >
230
244
< TableCell >
@@ -242,6 +256,11 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({ loading, works
242
256
< TableCell >
243
257
< span style = { { color : status . color } } > { status . status } </ span >
244
258
</ TableCell >
259
+ < TableCell >
260
+ < div className = { styles . arrowCell } >
261
+ < KeyboardArrowRight className = { styles . arrowRight } />
262
+ </ div >
263
+ </ TableCell >
245
264
</ TableRow >
246
265
)
247
266
} ) }
@@ -286,4 +305,27 @@ const useStyles = makeStyles((theme) => ({
286
305
border : "none" ,
287
306
} ,
288
307
} ,
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
+ } ,
289
331
} ) )
0 commit comments