From aaf2dbb34a2bd695b1bdeed59ee4d5c6d5779cae Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 15 Oct 2024 09:49:44 +0200
Subject: [PATCH] refactor: handle more cases

---
 .../AskOwnerToAddYouToTheirProject.tsx        | 29 +++++++++++++++++++
 .../personalDashboard/ConnectSDK.tsx          | 11 +------
 .../personalDashboard/MyProjects.tsx          |  8 +++++
 .../NoProjectsContactAdmin.tsx                | 22 ++++++++++++++
 .../personalDashboard/SharedComponents.tsx    | 10 +++++++
 5 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/component/personalDashboard/AskOwnerToAddYouToTheirProject.tsx
 create mode 100644 frontend/src/component/personalDashboard/NoProjectsContactAdmin.tsx

diff --git a/frontend/src/component/personalDashboard/AskOwnerToAddYouToTheirProject.tsx b/frontend/src/component/personalDashboard/AskOwnerToAddYouToTheirProject.tsx
new file mode 100644
index 0000000000..501ea855cf
--- /dev/null
+++ b/frontend/src/component/personalDashboard/AskOwnerToAddYouToTheirProject.tsx
@@ -0,0 +1,29 @@
+import { ActionBox } from './ActionBox';
+import { NeutralCircleContainer } from './SharedComponents';
+import type { PersonalDashboardSchemaProjectOwnersItem } from 'openapi';
+import type { FC } from 'react';
+import { AvatarGroupFromOwners } from 'component/common/AvatarGroupFromOwners/AvatarGroupFromOwners';
+
+export const AskOwnerToAddYouToTheirProject: FC<{
+    owners: PersonalDashboardSchemaProjectOwnersItem[];
+}> = ({ owners }) => {
+    return (
+        <ActionBox
+            title={
+                <>
+                    <NeutralCircleContainer>2</NeutralCircleContainer>
+                    Ask a project owner to add you to their project
+                </>
+            }
+        >
+            {owners.length ? (
+                <>
+                    <p>Project owners in Unleash:</p>
+                    <AvatarGroupFromOwners users={owners} avatarLimit={9} />
+                </>
+            ) : (
+                <p>There are no project owners in Unleash to ask for access.</p>
+            )}
+        </ActionBox>
+    );
+};
diff --git a/frontend/src/component/personalDashboard/ConnectSDK.tsx b/frontend/src/component/personalDashboard/ConnectSDK.tsx
index 815947357f..8de7b85019 100644
--- a/frontend/src/component/personalDashboard/ConnectSDK.tsx
+++ b/frontend/src/component/personalDashboard/ConnectSDK.tsx
@@ -3,16 +3,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import type { FC } from 'react';
 import { ActionBox } from './ActionBox';
 import { Link } from 'react-router-dom';
-
-const NeutralCircleContainer = styled('span')(({ theme }) => ({
-    width: '28px',
-    height: '28px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.palette.neutral.border,
-    borderRadius: '50%',
-}));
+import { NeutralCircleContainer } from './SharedComponents';
 
 const MainCircleContainer = styled(NeutralCircleContainer)(({ theme }) => ({
     backgroundColor: theme.palette.primary.main,
diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx
index e325b79330..c428cfc3b3 100644
--- a/frontend/src/component/personalDashboard/MyProjects.tsx
+++ b/frontend/src/component/personalDashboard/MyProjects.tsx
@@ -33,6 +33,8 @@ import { ContactAdmins, DataError } from './ProjectDetailsError';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { Link } from 'react-router-dom';
 import { ActionBox } from './ActionBox';
+import { NoProjectsContactAdmin } from './NoProjectsContactAdmin';
+import { AskOwnerToAddYouToTheirProject } from './AskOwnerToAddYouToTheirProject';
 
 const ActiveProjectDetails: FC<{
     project: PersonalDashboardSchemaProjectsItem;
@@ -140,6 +142,7 @@ export const MyProjects = forwardRef<
             setActiveProject,
             activeProject,
             admins,
+            owners,
         },
         ref,
     ) => {
@@ -158,6 +161,7 @@ export const MyProjects = forwardRef<
 
         const box1Content = () => {
             if (state === 'no projects') {
+                return <NoProjectsContactAdmin admins={admins} />;
             }
 
             if (state === 'projects with error') {
@@ -185,6 +189,10 @@ export const MyProjects = forwardRef<
         };
 
         const box2Content = () => {
+            if (state === 'no projects') {
+                return <AskOwnerToAddYouToTheirProject owners={owners} />;
+            }
+
             if (state === 'projects with error') {
                 return <ContactAdmins admins={admins} />;
             }
diff --git a/frontend/src/component/personalDashboard/NoProjectsContactAdmin.tsx b/frontend/src/component/personalDashboard/NoProjectsContactAdmin.tsx
new file mode 100644
index 0000000000..6cfb0dad67
--- /dev/null
+++ b/frontend/src/component/personalDashboard/NoProjectsContactAdmin.tsx
@@ -0,0 +1,22 @@
+import { ActionBox } from './ActionBox';
+import { YourAdmins } from './YourAdmins';
+import { NeutralCircleContainer } from './SharedComponents';
+import type { PersonalDashboardSchemaAdminsItem } from 'openapi';
+import type { FC } from 'react';
+
+export const NoProjectsContactAdmin: FC<{
+    admins: PersonalDashboardSchemaAdminsItem[];
+}> = ({ admins }) => {
+    return (
+        <ActionBox
+            title={
+                <>
+                    <NeutralCircleContainer>1</NeutralCircleContainer>
+                    Contact Unleash admin
+                </>
+            }
+        >
+            <YourAdmins admins={admins} />
+        </ActionBox>
+    );
+};
diff --git a/frontend/src/component/personalDashboard/SharedComponents.tsx b/frontend/src/component/personalDashboard/SharedComponents.tsx
index 97e6a8d058..1ef21beb0d 100644
--- a/frontend/src/component/personalDashboard/SharedComponents.tsx
+++ b/frontend/src/component/personalDashboard/SharedComponents.tsx
@@ -130,3 +130,13 @@ export const StyledCardTitle = styled('div')<{ lines?: number }>(
         wordBreak: 'break-word',
     }),
 );
+
+export const NeutralCircleContainer = styled('span')(({ theme }) => ({
+    width: '28px',
+    height: '28px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.palette.neutral.border,
+    borderRadius: '50%',
+}));