refactor: handle more cases

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>
+    );
+};

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';
-
+import { NeutralCircleContainer } from './SharedComponents';
-const NeutralCircleContainer = styled('span')(({ theme }) => ({
-    width: '28px',
-    height: '28px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.palette.neutral.border,
-    borderRadius: '50%',
-}));
 
 const MainCircleContainer = styled(NeutralCircleContainer)(({ theme }) => ({
     backgroundColor: theme.palette.primary.main,

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} />;
             }

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>
+    );
+};

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%',
+}));