feat: show user's roles and project owners (#8253)

This change shows the user's roles and project owners in the personal
dashboard.

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -25,6 +25,7 @@ import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/use
 import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
 import type { PersonalDashboardSchema } from '../../openapi';
 import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
+import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
 
 const ScreenExplanation = styled(Typography)(({ theme }) => ({
     marginTop: theme.spacing(1),
@@ -285,15 +286,13 @@ export const PersonalDashboard = () => {
                     ) : null}
                 </SpacedGridItem>
                 <SpacedGridItem item lg={4} md={1} />
-                <SpacedGridItem
-                    item
-                    lg={8}
-                    md={1}
-                    sx={{ display: 'flex', gap: 1, alignItems: 'center' }}
-                >
-                    <span>Your roles in this project:</span>{' '}
-                    <Badge color='secondary'>Member</Badge>{' '}
-                    <Badge color='secondary'>Another</Badge>
+                <SpacedGridItem item lg={8} md={1}>
+                    {activeProject ? (
+                        <RoleAndOwnerInfo
+                            roles={['owner', 'custom']}
+                            owners={[{ ownerType: 'system' }]}
+                        />
+                    ) : null}
                 </SpacedGridItem>
             </ContentGrid>
             <ContentGrid container columns={{ lg: 12, md: 1 }} sx={{ mt: 2 }}>

frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx

@@ -0,0 +1,64 @@
+import { styled } from '@mui/material';
+import { AvatarGroup } from 'component/common/AvatarGroup/AvatarGroup';
+import { Badge } from 'component/common/Badge/Badge';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import type { ProjectSchemaOwners } from 'openapi';
+
+type Props = {
+    roles: string[];
+    owners: ProjectSchemaOwners;
+};
+
+const Wrapper = styled('div')(({ theme }) => ({
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(1),
+    justifyContent: 'space-between',
+}));
+
+const InfoSection = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+}));
+
+const mapOwners =
+    (unleashUrl?: string) => (owner: ProjectSchemaOwners[number]) => {
+        if (owner.ownerType === 'user') {
+            return {
+                name: owner.name,
+                imageUrl: owner.imageUrl || undefined,
+                email: owner.email || undefined,
+            };
+        }
+        if (owner.ownerType === 'group') {
+            return {
+                name: owner.name,
+            };
+        }
+        return {
+            name: 'System',
+            imageUrl: `${unleashUrl}/logo-unleash.png`,
+        };
+    };
+
+export const RoleAndOwnerInfo = ({ roles, owners }: Props) => {
+    const { uiConfig } = useUiConfig();
+    const mappedOwners = owners.map(mapOwners(uiConfig.unleashUrl));
+    return (
+        <Wrapper>
+            <InfoSection>
+                <span>Your roles in this project:</span>
+                {roles.map((role) => (
+                    <Badge key={role} color='secondary'>
+                        {role}
+                    </Badge>
+                ))}
+            </InfoSection>
+            <InfoSection>
+                <span>Project owner{owners.length > 1 ? 's' : ''}</span>
+                <AvatarGroup users={mappedOwners} avatarLimit={3} />
+            </InfoSection>
+        </Wrapper>
+    );
+};