diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
index 3dcf55fc5e..f397a38b8e 100644
--- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx
+++ b/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}
-
- Your roles in this project:{' '}
- Member{' '}
- Another
+
+ {activeProject ? (
+
+ ) : null}
diff --git a/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx b/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
new file mode 100644
index 0000000000..fedfe86bdf
--- /dev/null
+++ b/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 (
+
+
+ Your roles in this project:
+ {roles.map((role) => (
+
+ {role}
+
+ ))}
+
+
+ Project owner{owners.length > 1 ? 's' : ''}
+
+
+
+ );
+};