3
3
Button ,
4
4
Card ,
5
5
Divider ,
6
+ Avatar ,
7
+ AvatarGroup ,
6
8
Menu ,
7
9
MenuItem ,
8
10
TextField
@@ -206,6 +208,32 @@ const TeamCard: React.FC<TeamCardProps> = ({ team, onEdit, onView }) => {
206
208
) ;
207
209
const visibleReposName = assignedReposToTeam . slice ( 0 , VISIBLE_REPOS_COUNT ) ;
208
210
211
+ const renderVisibleRepos = (
212
+ < FlexBox alignCenter gap = { 1 } >
213
+ < AvatarGroup
214
+ max = { VISIBLE_REPOS_COUNT }
215
+ sx = { {
216
+ marginRight : 1 ,
217
+ '& .MuiAvatar-root' : {
218
+ border : '1px solid #f0f0f0' ,
219
+ width : 28 ,
220
+ height : 28
221
+ }
222
+ } }
223
+ >
224
+ { visibleReposName . map ( ( repo ) => (
225
+ < Avatar
226
+ key = { repo . id || repo . name }
227
+ src = { `https://github.com/${ repo . org_name } .png?size=28` }
228
+ />
229
+ ) ) }
230
+ </ AvatarGroup >
231
+ < Line secondary sx = { { fontSize : '0.85rem' } } >
232
+ { visibleReposName . map ( ( repo ) => repo . name ) . join ( ', ' ) }
233
+ </ Line >
234
+ </ FlexBox >
235
+ ) ;
236
+
209
237
const tooltipRepos = useMemo (
210
238
( ) =>
211
239
assignedReposToTeam
@@ -220,70 +248,75 @@ const TeamCard: React.FC<TeamCardProps> = ({ team, onEdit, onView }) => {
220
248
} , [ teamName ] ) ;
221
249
222
250
return (
223
- < FlexBox component = { Card } p = { 2 } minHeight = { '144px' } gap2 >
224
- < FlexBox fullWidth col gap2 justifyBetween >
225
- < FlexBox col gap2 >
226
- < FlexBox justifyBetween alignStart >
227
- < FlexBox
228
- title = { minifiedName === teamName ? null : teamName }
229
- tooltipPlacement = "right"
230
- >
231
- < Line big semibold >
232
- { minifiedName }
233
- </ Line >
234
- </ FlexBox >
251
+ < FlexBox
252
+ component = { Card }
253
+ p = { 2.5 }
254
+ minHeight = { '150px' }
255
+ sx = { {
256
+ borderRadius : '8px' ,
257
+ boxShadow : '0 2px 10px rgba(0,0,0,0.08)' ,
258
+ '&:hover' : { boxShadow : '0 4px 12px rgba(0,0,0,0.12)' }
259
+ } }
260
+ >
261
+ < FlexBox fullWidth col gap = { 2 } flex = { 1 } >
262
+ < FlexBox justifyBetween alignCenter >
263
+ < FlexBox
264
+ title = { minifiedName === teamName ? null : teamName }
265
+ tooltipPlacement = "right"
266
+ alignCenter
267
+ gap = { 1 }
268
+ >
269
+ < Line big semibold sx = { { color : 'primary.dark' } } >
270
+ { minifiedName }
271
+ </ Line >
235
272
</ FlexBox >
273
+ < FlexBox gap = { 1 } >
274
+ < EditTeam teamId = { teamId } onEdit = { onEdit } />
275
+ < MoreOptions teamId = { team . id } />
276
+ </ FlexBox >
277
+ </ FlexBox >
236
278
237
- < FlexBox gap2 alignCenter minHeight = { '64px' } >
238
- < FlexBox gap1 alignCenter >
239
- < Line bigish bold sx = { { whiteSpace : 'nowrap' } } >
240
- { assignedReposToTeam . length } { ' ' }
241
- { pluralize ( 'Repo' , assignedReposToTeam . length ) } Added
242
- </ Line >
243
- </ FlexBox >
244
- { Boolean ( assignedReposToTeam . length ) && (
245
- < >
246
- < Divider orientation = "vertical" flexItem />
247
- < FlexBox justifyBetween alignCenter fullWidth >
248
- < Line secondary >
249
- { visibleReposName . map ( ( r ) => r . name ) . join ( ', ' ) } { ' ' }
250
- { assignedReposToTeam . length > VISIBLE_REPOS_COUNT && (
251
- < FlexBox
252
- inline
253
- sx = { {
254
- userSelect : 'none'
255
- } }
256
- title = {
257
- < FlexBox maxWidth = { '250px' } > { tooltipRepos } </ FlexBox >
258
- }
259
- >
260
- < Line info >
261
- +{ assignedReposToTeam . length - VISIBLE_REPOS_COUNT } { ' ' }
262
- more
263
- </ Line >
264
- </ FlexBox >
265
- ) }
279
+ < Divider />
280
+
281
+ < FlexBox col gap = { 2 } flex = { 1 } >
282
+ < FlexBox gap = { 1 } alignCenter >
283
+ < Line bigish bold sx = { { color : 'text.primary' } } >
284
+ { assignedReposToTeam . length } { ' ' }
285
+ { pluralize ( 'Repository' , assignedReposToTeam . length ) }
286
+ </ Line >
287
+ </ FlexBox >
288
+
289
+ { Boolean ( assignedReposToTeam . length ) && (
290
+ < FlexBox col gap = { 1 } >
291
+ { renderVisibleRepos }
292
+
293
+ { assignedReposToTeam . length > VISIBLE_REPOS_COUNT && (
294
+ < FlexBox
295
+ inline
296
+ sx = { {
297
+ userSelect : 'none' ,
298
+ mr : 20
299
+ } }
300
+ title = { < FlexBox maxWidth = { '250px' } > { tooltipRepos } </ FlexBox > }
301
+ >
302
+ < Line info sx = { { ml : 10 } } >
303
+ +{ assignedReposToTeam . length - VISIBLE_REPOS_COUNT } more
266
304
</ Line >
267
305
</ FlexBox >
268
- </ >
269
- ) }
270
- </ FlexBox >
271
- </ FlexBox >
272
- </ FlexBox >
273
- < FlexBox col justifyBetween minHeight = { '70px' } alignCenter >
274
- < FlexBox
275
- title = { 'View Dora Metrics' }
276
- centered
277
- width = { '1.2em' }
278
- maxWidth = { '1.2em' }
279
- pointer
280
- onClick = { ( ) => onView ( team ) }
281
- >
282
- < DoraIcon />
306
+ ) }
307
+ </ FlexBox >
308
+ ) }
283
309
</ FlexBox >
284
- < EditTeam teamId = { teamId } onEdit = { onEdit } />
285
- < FlexBox pointer >
286
- < MoreOptions teamId = { team . id } />
310
+
311
+ < FlexBox justifyCenter mt = { 1 } >
312
+ < Button
313
+ sx = { { width : '100%' } }
314
+ variant = "contained"
315
+ onClick = { ( ) => onView ( team ) }
316
+ startIcon = { < DoraIcon style = { { width : 20 , height : 20 } } /> }
317
+ >
318
+ View DORA Metrics
319
+ </ Button >
287
320
</ FlexBox >
288
321
</ FlexBox >
289
322
</ FlexBox >
0 commit comments