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

Commit7d9db12

Browse files
committed
Add clickable rows to template and workspace list
1 parent2a1d4c4 commit7d9db12

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
<TableCellwidth="20%">{Language.durationLabel}</TableCell>
4343
<TableCellwidth="40%">{Language.startedAtLabel}</TableCell>
4444
<TableCellwidth="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-
<divclassName={styles.statusCell}>
82-
<spanstyle={{color:status.color}}>{status.status}</span>
82+
<spanstyle={{color:status.color}}>{status.status}</span>
83+
</TableCell>
84+
<TableCell>
85+
<divclassName={styles.arrowCell}>
8386
<KeyboardArrowRightclassName={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
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"
@@ -46,15 +48,18 @@ export interface TemplatesPageViewProps {
4648

4749
exportconstTemplatesPageView:FC<TemplatesPageViewProps>=(props)=>{
4850
conststyles=useStyles()
51+
constnavigate=useNavigate()
52+
4953
return(
5054
<Stackspacing={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+
<TableCellwidth="33%">{Language.nameLabel}</TableCell>
60+
<TableCellwidth="33%">{Language.usedByLabel}</TableCell>
61+
<TableCellwidth="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-
<TableRowkey={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+
constnavigateToTemplatePage=()=>{
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+
<AvatarDatatitle={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-
<TableCelldata-chromatic="ignore">{dayjs().to(dayjs(template.updated_at))}</TableCell>
87-
</TableRow>
88-
))}
103+
<TableCelldata-chromatic="ignore">{dayjs().to(dayjs(template.updated_at))}</TableCell>
104+
<TableCell>
105+
<divclassName={styles.arrowCell}>
106+
<KeyboardArrowRightclassName={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
importButtonfrom"@material-ui/core/Button"
22
importLinkfrom"@material-ui/core/Link"
3-
import{makeStyles,Theme}from"@material-ui/core/styles"
3+
import{fade,makeStyles,Theme}from"@material-ui/core/styles"
44
importTablefrom"@material-ui/core/Table"
55
importTableBodyfrom"@material-ui/core/TableBody"
66
importTableCellfrom"@material-ui/core/TableCell"
77
importTableHeadfrom"@material-ui/core/TableHead"
88
importTableRowfrom"@material-ui/core/TableRow"
99
importAddCircleOutlinefrom"@material-ui/icons/AddCircleOutline"
10+
importKeyboardArrowRightfrom"@material-ui/icons/KeyboardArrowRight"
1011
importuseThemefrom"@material-ui/styles/useTheme"
1112
importdayjsfrom"dayjs"
1213
importrelativeTimefrom"dayjs/plugin/relativeTime"
1314
import{FC}from"react"
14-
import{LinkasRouterLink}from"react-router-dom"
15+
import{LinkasRouterLink,useNavigate}from"react-router-dom"
1516
import*asTypesGenfrom"../../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
exportconstWorkspacesPageView:FC<WorkspacesPageViewProps>=({ loading, workspaces})=>{
36-
useStyles()
37+
conststyles=useStyles()
38+
constnavigate=useNavigate()
3739
consttheme:Theme=useTheme()
3840

3941
return(
4042
<Stackspacing={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+
<TableCellwidth="20%">Name</TableCell>
47+
<TableCellwidth="20%">Template</TableCell>
48+
<TableCellwidth="20%">Version</TableCell>
49+
<TableCellwidth="20%">Last Built</TableCell>
50+
<TableCellwidth="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
conststatus=getDisplayStatus(theme,workspace.latest_build)
74+
constnavigateToWorkspacePage=()=>{
75+
navigate(`/workspaces/${workspace.id}`)
76+
}
7177
return(
72-
<TableRowkey={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+
<AvatarDatatitle={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
<spanstyle={{color:status.color}}>{status.status}</span>
95109
</TableCell>
110+
<TableCell>
111+
<divclassName={styles.arrowCell}>
112+
<KeyboardArrowRightclassName={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)
[8]ページ先頭
©2009-2025 Movatter.jp