Fix(1-3564)/hide project owner if system (#9686)

Hides owner avatars in cases where the owner type is "system". Touches
dashboard and project card owners.

Back when all projects required owners, we introduced the new project
cards that have the owner listed in the footer. Because, theoretically,
you weren’t allowed to create projects without owners, the only project
that should ever be without an owner was the default project. So we
thought it made sense to say that it was owned by the system.

But now that owners are optional, that doesn't necessarily make sense
anymore. As such, we'll just hide their avatars to begin with.

<img width="726" alt="image"
src="https://github.com/user-attachments/assets/950cd909-c891-48f1-9ef7-fd74922a5990"
/>

<img width="1497" alt="image"
src="https://github.com/user-attachments/assets/f4d213f5-febb-46f8-89f0-899e77652e07"
/>

Because the components expected the avatars to be there, we now need to
set an explicit min-height on them, so that they don't collapse.
Luckily, we can use the default avatar height (and also force that so
that they change in tandem) and use that in both places.

Author: thomasheartman

frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx

@@ -9,6 +9,8 @@ type Props = {
     owners: ProjectSchemaOwners;
 };
 
+const avatarHeight = 3.5;
+
 const Wrapper = styled('div')(({ theme }) => ({
     width: '100%',
     display: 'flex',
@@ -21,6 +23,7 @@ const InfoSection = styled('div')(({ theme }) => ({
     display: 'flex',
     gap: theme.spacing(1),
     alignItems: 'center',
+    minHeight: theme.spacing(avatarHeight),
 }));
 
 const Roles = styled('ul')(({ theme }) => ({
@@ -43,13 +46,17 @@ const RoleBadge = styled(Badge)({
     whitespace: 'nowrap',
 });
 
-const StyledAvatarGroup = styled(AvatarGroupFromOwners)({
+const StyledAvatarGroup = styled(AvatarGroupFromOwners)(({ theme }) => ({
     width: 'max-content',
-});
+    height: theme.spacing(avatarHeight),
+}));
 
 export const RoleAndOwnerInfo = ({ roles, owners }: Props) => {
     const firstRoles = roles.slice(0, 3);
     const extraRoles = roles.slice(3);
+    const ownersWithoutSystem = owners.filter(
+        (owner) => owner.ownerType !== 'system',
+    );
     return (
         <Wrapper data-loading>
             <InfoSection>
@@ -104,16 +111,24 @@ export const RoleAndOwnerInfo = ({ roles, owners }: Props) => {
                 )}
             </InfoSection>
             <InfoSection>
-                <Typography
-                    variant='body1'
-                    component='h4'
-                    sx={{
-                        whiteSpace: 'nowrap',
-                    }}
-                >
-                    Project owner{owners.length > 1 ? 's' : ''}
-                </Typography>
-                <StyledAvatarGroup users={owners} avatarLimit={3} />
+                {ownersWithoutSystem.length > 0 ? (
+                    <>
+                        <Typography
+                            variant='body1'
+                            component='h4'
+                            sx={{
+                                whiteSpace: 'nowrap',
+                            }}
+                        >
+                            Project owner
+                            {ownersWithoutSystem.length > 1 ? 's' : ''}
+                        </Typography>
+                        <StyledAvatarGroup
+                            users={ownersWithoutSystem as ProjectSchemaOwners}
+                            avatarLimit={3}
+                        />
+                    </>
+                ) : null}
             </InfoSection>
         </Wrapper>
     );

frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectCardFooter.tsx

@@ -5,6 +5,7 @@ import {
     ProjectOwners,
     type IProjectOwnersProps,
 } from './ProjectOwners/ProjectOwners';
+import type { ProjectSchemaOwners } from 'openapi';
 
 interface IProjectCardFooterProps {
     id?: string;
@@ -24,6 +25,8 @@ const StyledFooter = styled(Box)<{ disabled: boolean }>(
         alignItems: 'center',
         justifyContent: 'space-between',
         borderTop: `1px solid ${theme.palette.divider}`,
+        paddingInline: theme.spacing(2),
+        paddingBlock: theme.spacing(1.5),
     }),
 );
 
@@ -32,9 +35,16 @@ export const ProjectCardFooter: FC<IProjectCardFooterProps> = ({
     owners,
     disabled = false,
 }) => {
+    const ownersWithoutSystem = owners?.filter(
+        (owner) => owner.ownerType !== 'system',
+    );
     return (
         <StyledFooter disabled={disabled}>
-            {owners ? <ProjectOwners owners={owners} /> : null}
+            {ownersWithoutSystem ? (
+                <ProjectOwners
+                    owners={ownersWithoutSystem as ProjectSchemaOwners}
+                />
+            ) : null}
             {children}
         </StyledFooter>
     );

frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectOwners/ProjectOwners.tsx

@@ -45,14 +45,16 @@ const StyledHeader = styled('span')(({ theme }) => ({
     marginRight: 'auto',
 }));
 
+const AvatarHeight = 3.5;
 const StyledWrapper = styled('div')(({ theme }) => ({
-    padding: theme.spacing(1.5, 0, 1.5, 2),
     display: 'flex',
     alignItems: 'center',
+    minHeight: theme.spacing(AvatarHeight),
 }));
 
 const StyledAvatarComponent = styled(AvatarComponent)(({ theme }) => ({
     cursor: 'default',
+    height: theme.spacing(AvatarHeight),
 }));
 
 const getOwnerName = (owner?: ProjectSchemaOwners[number]) => {