Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-19 17:52:45 +02:00
Code Issues Projects Releases Wiki Activity

refactor: extract YourAdmins component

Browse Source
This commit is contained in:
Thomas Heartman 2024-10-14 13:58:24 +02:00
parent 9d49070cee
commit e6abaaccfb
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
3 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
View File

@ -1,6 +1,5 @@
import { Typography, styled } from '@mui/material';
import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import type { PersonalDashboardSchemaAdminsItem } from 'openapi/models/personalDashboardSchemaAdminsItem';
import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi/models/personalDashboardSchemaProjectOwnersItem';
import { Link } from 'react-router-dom';
@ -10,6 +9,7 @@ import {
ProjectGrid,
GridItem,
} from './SharedComponents';
import { YourAdmins } from './YourAdmins';
const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({
padding: theme.spacing(4),
@ -48,62 +48,11 @@ const BoxMainContent = styled('article')(({ theme }) => ({
gap: theme.spacing(2),
}));
const AdminList = styled('ul')(({ theme }) => ({
padding: 0,
'li + li': {
marginTop: theme.spacing(2),
},
}));
const AdminListItem = styled('li')(({ theme }) => ({
display: 'flex',
flexFlow: 'row',
gap: theme.spacing(2),
}));
type Props = {
owners: PersonalDashboardSchemaProjectOwnersItem[];
admins: PersonalDashboardSchemaAdminsItem[];
};
export const AdminListRendered: React.FC<Pick<Props, 'admins'>> = ({
admins,
}) => {
return (
<BoxMainContent>
{admins.length ? (
<>
<p>
Your Unleash administrator
{admins.length > 1 ? 's are' : ' is'}:
</p>
<AdminList>
{admins.map((admin) => {
return (
<AdminListItem key={admin.id}>
<UserAvatar
sx={{
margin: 0,
}}
user={admin}
/>
<Typography>
{admin.name ||
admin.username ||
admin.email}
</Typography>
</AdminListItem>
);
})}
</AdminList>
</>
) : (
<p>You have no Unleash administrators to contact.</p>
)}
</BoxMainContent>
);
};
export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
return (
<ContentGridContainer>
@ -130,7 +79,7 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
<NeutralCircleContainer>1</NeutralCircleContainer>
Contact Unleash admin
</TitleContainer>
<AdminListRendered admins={admins} />
<YourAdmins admins={admins} />
</GridContent>
</GridItem>
<GridItem gridArea='box2'>

4
frontend/src/component/personalDashboard/ProjectDetailsError.tsx
View File

@ -1,7 +1,7 @@
import { styled } from '@mui/material';
import type { PersonalDashboardSchemaAdminsItem } from 'openapi';
import type { FC } from 'react';
import { AdminListRendered } from './ContentGridNoProjects';
import { YourAdmins } from './YourAdmins';
const TitleContainer = styled('div')(({ theme }) => ({
display: 'flex',
@ -48,7 +48,7 @@ export const ContactAdmins: FC<{
<TitleContainer>
Consider contacting one of your Unleash admins for help.
</TitleContainer>
<AdminListRendered admins={admins} />
<YourAdmins admins={admins} />
</ActionBox>
);
};

60
frontend/src/component/personalDashboard/YourAdmins.tsx Normal file
View File

@ -0,0 +1,60 @@
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import { Typography, styled } from '@mui/material';
import type { PersonalDashboardSchemaAdminsItem } from 'openapi';
const StyledList = styled('ul')(({ theme }) => ({
padding: 0,
'li + li': {
marginTop: theme.spacing(2),
},
}));
const StyledListItem = styled('li')(({ theme }) => ({
display: 'flex',
flexFlow: 'row',
gap: theme.spacing(2),
}));
const Wrapper = styled('article')(({ theme }) => ({
display: 'flex',
flexFlow: 'column',
gap: theme.spacing(2),
}));
export const YourAdmins: React.FC<{
admins: PersonalDashboardSchemaAdminsItem[];
}> = ({ admins }) => {
return (
<Wrapper>
{admins.length ? (
<>
<p>
Your Unleash administrator
{admins.length > 1 ? 's are' : ' is'}:
</p>
<StyledList>
{admins.map((admin) => {
return (
<StyledListItem key={admin.id}>
<UserAvatar
sx={{
margin: 0,
}}
user={admin}
/>
<Typography>
{admin.name ||
admin.username ||
admin.email}
</Typography>
</StyledListItem>
);
})}
</StyledList>
</>
) : (
<p>You have no Unleash administrators to contact.</p>
)}
</Wrapper>
);
};