Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3e8d333

Browse files
AbhineetJainkylecarbs
authored andcommitted
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 parente61d568 commit3e8d333

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
importBoxfrom"@material-ui/core/Box"
2-
import{makeStyles,Theme}from"@material-ui/core/styles"
2+
import{fade,makeStyles,Theme}from"@material-ui/core/styles"
33
importTablefrom"@material-ui/core/Table"
44
importTableBodyfrom"@material-ui/core/TableBody"
55
importTableCellfrom"@material-ui/core/TableCell"
66
importTableHeadfrom"@material-ui/core/TableHead"
77
importTableRowfrom"@material-ui/core/TableRow"
8+
importKeyboardArrowRightfrom"@material-ui/icons/KeyboardArrowRight"
89
importuseThemefrom"@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
<TableCellwidth="20%">{Language.durationLabel}</TableCell>
4243
<TableCellwidth="40%">{Language.startedAtLabel}</TableCell>
4344
<TableCellwidth="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
<spanstyle={{color:status.color}}>{status.status}</span>
8183
</TableCell>
84+
<TableCell>
85+
<divclassName={styles.arrowCell}>
86+
<KeyboardArrowRightclassName={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
importLinkfrom"@material-ui/core/Link"
2-
import{makeStyles}from"@material-ui/core/styles"
2+
import{fade,makeStyles}from"@material-ui/core/styles"
33
importTablefrom"@material-ui/core/Table"
44
importTableBodyfrom"@material-ui/core/TableBody"
55
importTableCellfrom"@material-ui/core/TableCell"
66
importTableHeadfrom"@material-ui/core/TableHead"
77
importTableRowfrom"@material-ui/core/TableRow"
8+
importKeyboardArrowRightfrom"@material-ui/icons/KeyboardArrowRight"
89
importdayjsfrom"dayjs"
910
importrelativeTimefrom"dayjs/plugin/relativeTime"
1011
import{FC}from"react"
12+
import{useNavigate}from"react-router-dom"
1113
import*asTypesGenfrom"../../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
exportconstTemplatesPageView:FC<TemplatesPageViewProps>=(props)=>{
7375
conststyles=useStyles()
76+
constnavigate=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+
<TableCellwidth="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-
<TableRowkey={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+
constnavigateToTemplatePage=()=>{
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+
<AvatarDatatitle={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-
<TableCelldata-chromatic="ignore">{dayjs().to(dayjs(template.updated_at))}</TableCell>
120-
</TableRow>
121-
))}
136+
<TableCelldata-chromatic="ignore">{dayjs().to(dayjs(template.updated_at))}</TableCell>
137+
<TableCell>
138+
<divclassName={styles.arrowCell}>
139+
<KeyboardArrowRightclassName={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
importLinkfrom"@material-ui/core/Link"
55
importMenufrom"@material-ui/core/Menu"
66
importMenuItemfrom"@material-ui/core/MenuItem"
7-
import{makeStyles,Theme}from"@material-ui/core/styles"
7+
import{fade,makeStyles,Theme}from"@material-ui/core/styles"
88
importTablefrom"@material-ui/core/Table"
99
importTableBodyfrom"@material-ui/core/TableBody"
1010
importTableCellfrom"@material-ui/core/TableCell"
1111
importTableHeadfrom"@material-ui/core/TableHead"
1212
importTableRowfrom"@material-ui/core/TableRow"
1313
importTextFieldfrom"@material-ui/core/TextField"
1414
importAddCircleOutlinefrom"@material-ui/icons/AddCircleOutline"
15+
importKeyboardArrowRightfrom"@material-ui/icons/KeyboardArrowRight"
1516
importSearchIconfrom"@material-ui/icons/Search"
1617
importuseThemefrom"@material-ui/styles/useTheme"
1718
importdayjsfrom"dayjs"
1819
importrelativeTimefrom"dayjs/plugin/relativeTime"
1920
import{FormikErrors,useFormik}from"formik"
2021
import{FC,useState}from"react"
21-
import{LinkasRouterLink}from"react-router-dom"
22+
import{LinkasRouterLink,useNavigate}from"react-router-dom"
2223
import*asTypesGenfrom"../../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
exportconstWorkspacesPageView:FC<WorkspacesPageViewProps>=({ loading, workspaces, filter, onFilter})=>{
9293
conststyles=useStyles()
94+
constnavigate=useNavigate()
9395
consttheme:Theme=useTheme()
9496

9597
constform=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+
<TableCellwidth="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
conststatus=getDisplayStatus(theme,workspace.latest_build)
234+
constnavigateToWorkspacePage=()=>{
235+
navigate(`/@${workspace.owner_name}/${workspace.name}`)
236+
}
231237
return(
232-
<TableRowkey={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+
<AvatarDatatitle={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
<spanstyle={{color:status.color}}>{status.status}</span>
255269
</TableCell>
270+
<TableCell>
271+
<divclassName={styles.arrowCell}>
272+
<KeyboardArrowRightclassName={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)
[8]ページ先頭
©2009-2025 Movatter.jp