From 3447b03e1c211e08d93d24a40cf8fbf1dab34add Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 3 Apr 2025 10:43:58 +0200
Subject: [PATCH] Fix(1-3564)/hide project owner if system (#9686)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../personalDashboard/RoleAndOwnerInfo.tsx    | 39 +++++++++++++------
 .../ProjectCardFooter/ProjectCardFooter.tsx   | 12 +++++-
 .../ProjectOwners/ProjectOwners.tsx           |  4 +-
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx b/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
index f0b62053e6..3cf1f93e18 100644
--- a/frontend/src/component/personalDashboard/RoleAndOwnerInfo.tsx
+++ b/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>
     );
diff --git a/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectCardFooter.tsx b/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
index 43051b731c..4a0d32c922 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectCardFooter.tsx
+++ b/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>
     );
diff --git a/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectOwners/ProjectOwners.tsx b/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectOwners/ProjectOwners.tsx
index ba1405348c..35798de4f5 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCardFooter/ProjectOwners/ProjectOwners.tsx
+++ b/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]) => {