From e6abaaccfba2bd57e17cb5e898beb0d0cbeb9e25 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 14 Oct 2024 13:58:24 +0200
Subject: [PATCH] refactor: extract YourAdmins component

---
 .../ContentGridNoProjects.tsx                 | 55 +----------------
 .../personalDashboard/ProjectDetailsError.tsx |  4 +-
 .../personalDashboard/YourAdmins.tsx          | 60 +++++++++++++++++++
 3 files changed, 64 insertions(+), 55 deletions(-)
 create mode 100644 frontend/src/component/personalDashboard/YourAdmins.tsx

diff --git a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
index 68041240dc..30c01b2952 100644
--- a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
+++ b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
@@ -1,6 +1,5 @@
 import { Typography, styled } from '@mui/material';
 import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners';
-import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
 import type { PersonalDashboardSchemaAdminsItem } from 'openapi/models/personalDashboardSchemaAdminsItem';
 import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi/models/personalDashboardSchemaProjectOwnersItem';
 import { Link } from 'react-router-dom';
@@ -10,6 +9,7 @@ import {
     ProjectGrid,
     GridItem,
 } from './SharedComponents';
+import { YourAdmins } from './YourAdmins';
 
 const PaddedEmptyGridItem = styled(EmptyGridItem)(({ theme }) => ({
     padding: theme.spacing(4),
@@ -48,62 +48,11 @@ const BoxMainContent = styled('article')(({ theme }) => ({
     gap: theme.spacing(2),
 }));
 
-const AdminList = styled('ul')(({ theme }) => ({
-    padding: 0,
-    'li + li': {
-        marginTop: theme.spacing(2),
-    },
-}));
-
-const AdminListItem = styled('li')(({ theme }) => ({
-    display: 'flex',
-    flexFlow: 'row',
-    gap: theme.spacing(2),
-}));
-
 type Props = {
     owners: PersonalDashboardSchemaProjectOwnersItem[];
     admins: PersonalDashboardSchemaAdminsItem[];
 };
 
-export const AdminListRendered: React.FC<Pick<Props, 'admins'>> = ({
-    admins,
-}) => {
-    return (
-        <BoxMainContent>
-            {admins.length ? (
-                <>
-                    <p>
-                        Your Unleash administrator
-                        {admins.length > 1 ? 's are' : ' is'}:
-                    </p>
-                    <AdminList>
-                        {admins.map((admin) => {
-                            return (
-                                <AdminListItem key={admin.id}>
-                                    <UserAvatar
-                                        sx={{
-                                            margin: 0,
-                                        }}
-                                        user={admin}
-                                    />
-                                    <Typography>
-                                        {admin.name ||
-                                            admin.username ||
-                                            admin.email}
-                                    </Typography>
-                                </AdminListItem>
-                            );
-                        })}
-                    </AdminList>
-                </>
-            ) : (
-                <p>You have no Unleash administrators to contact.</p>
-            )}
-        </BoxMainContent>
-    );
-};
-
 export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
     return (
         <ContentGridContainer>
@@ -130,7 +79,7 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
                             <NeutralCircleContainer>1</NeutralCircleContainer>
                             Contact Unleash admin
                         </TitleContainer>
-                        <AdminListRendered admins={admins} />
+                        <YourAdmins admins={admins} />
                     </GridContent>
                 </GridItem>
                 <GridItem gridArea='box2'>
diff --git a/frontend/src/component/personalDashboard/ProjectDetailsError.tsx b/frontend/src/component/personalDashboard/ProjectDetailsError.tsx
index 37a62743e8..6ce4c99f61 100644
--- a/frontend/src/component/personalDashboard/ProjectDetailsError.tsx
+++ b/frontend/src/component/personalDashboard/ProjectDetailsError.tsx
@@ -1,7 +1,7 @@
 import { styled } from '@mui/material';
 import type { PersonalDashboardSchemaAdminsItem } from 'openapi';
 import type { FC } from 'react';
-import { AdminListRendered } from './ContentGridNoProjects';
+import { YourAdmins } from './YourAdmins';
 
 const TitleContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -48,7 +48,7 @@ export const ContactAdmins: FC<{
             <TitleContainer>
                 Consider contacting one of your Unleash admins for help.
             </TitleContainer>
-            <AdminListRendered admins={admins} />
+            <YourAdmins admins={admins} />
         </ActionBox>
     );
 };
diff --git a/frontend/src/component/personalDashboard/YourAdmins.tsx b/frontend/src/component/personalDashboard/YourAdmins.tsx
new file mode 100644
index 0000000000..d7371a8cf9
--- /dev/null
+++ b/frontend/src/component/personalDashboard/YourAdmins.tsx
@@ -0,0 +1,60 @@
+import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
+import { Typography, styled } from '@mui/material';
+import type { PersonalDashboardSchemaAdminsItem } from 'openapi';
+
+const StyledList = styled('ul')(({ theme }) => ({
+    padding: 0,
+    'li + li': {
+        marginTop: theme.spacing(2),
+    },
+}));
+
+const StyledListItem = styled('li')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'row',
+    gap: theme.spacing(2),
+}));
+
+const Wrapper = styled('article')(({ theme }) => ({
+    display: 'flex',
+    flexFlow: 'column',
+    gap: theme.spacing(2),
+}));
+
+export const YourAdmins: React.FC<{
+    admins: PersonalDashboardSchemaAdminsItem[];
+}> = ({ admins }) => {
+    return (
+        <Wrapper>
+            {admins.length ? (
+                <>
+                    <p>
+                        Your Unleash administrator
+                        {admins.length > 1 ? 's are' : ' is'}:
+                    </p>
+                    <StyledList>
+                        {admins.map((admin) => {
+                            return (
+                                <StyledListItem key={admin.id}>
+                                    <UserAvatar
+                                        sx={{
+                                            margin: 0,
+                                        }}
+                                        user={admin}
+                                    />
+                                    <Typography>
+                                        {admin.name ||
+                                            admin.username ||
+                                            admin.email}
+                                    </Typography>
+                                </StyledListItem>
+                            );
+                        })}
+                    </StyledList>
+                </>
+            ) : (
+                <p>You have no Unleash administrators to contact.</p>
+            )}
+        </Wrapper>
+    );
+};