feat: handle owners and project roles in the UI (#8315)

This commit uses the now-included project owner and role information
to populate the owner/role section. If you have no roles, we'll tell
you that you don't instead of displaying an empty set of badges.

frontend/src/component/personalDashboard/MyProjects.tsx

@@ -163,10 +163,12 @@ export const MyProjects: FC<{
             </SpacedGridItem>
             <SpacedGridItem item lg={4} md={1} />
             <SpacedGridItem item lg={8} md={1}>
-                {activeProject ? (
+                {personalDashboardProjectDetails ? (
                     <RoleAndOwnerInfo
-                        roles={['owner', 'custom']}
+                        roles={personalDashboardProjectDetails.roles.map(
-                        owners={[{ ownerType: 'system' }]}
+                            (role) => role.name,
+                        )}
+                        owners={personalDashboardProjectDetails.owners}
                     />
                 ) : null}
             </SpacedGridItem>

frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx

@@ -25,12 +25,18 @@ export const RoleAndOwnerInfo = ({ roles, owners }: Props) => {
     return (
         <Wrapper>
             <InfoSection>
+                {roles.length > 0 ? (
+                    <>
                         <span>Your roles in this project:</span>
                         {roles.map((role) => (
                             <Badge key={role} color='secondary'>
                                 {role}
                             </Badge>
                         ))}
+                    </>
+                ) : (
+                    <span>You have no project roles in this project.</span>
+                )}
             </InfoSection>
             <InfoSection>
                 <span>Project owner{owners.length > 1 ? 's' : ''}</span>