Skip to content

Commit c0eaf63

Browse files
authored
feat(teams): enhance TeamCard with repository display and improved styling
1 parent 852d5fa commit c0eaf63

File tree

1 file changed

+92
-59
lines changed

1 file changed

+92
-59
lines changed

web-server/src/components/TeamsList.tsx

+92-59
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import {
33
Button,
44
Card,
55
Divider,
6+
Avatar,
7+
AvatarGroup,
68
Menu,
79
MenuItem,
810
TextField
@@ -206,6 +208,32 @@ const TeamCard: React.FC<TeamCardProps> = ({ team, onEdit, onView }) => {
206208
);
207209
const visibleReposName = assignedReposToTeam.slice(0, VISIBLE_REPOS_COUNT);
208210

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+
209237
const tooltipRepos = useMemo(
210238
() =>
211239
assignedReposToTeam
@@ -220,70 +248,75 @@ const TeamCard: React.FC<TeamCardProps> = ({ team, onEdit, onView }) => {
220248
}, [teamName]);
221249

222250
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>
235272
</FlexBox>
273+
<FlexBox gap={1}>
274+
<EditTeam teamId={teamId} onEdit={onEdit} />
275+
<MoreOptions teamId={team.id} />
276+
</FlexBox>
277+
</FlexBox>
236278

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
266304
</Line>
267305
</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+
)}
283309
</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>
287320
</FlexBox>
288321
</FlexBox>
289322
</FlexBox>

0 commit comments

Comments
 (0)