diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx
index c428cfc3b3..d509a93c37 100644
--- a/frontend/src/component/personalDashboard/MyProjects.tsx
+++ b/frontend/src/component/personalDashboard/MyProjects.tsx
@@ -11,7 +11,7 @@ import { ProjectSetupComplete } from './ProjectSetupComplete';
import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
import { LatestProjectEvents } from './LatestProjectEvents';
import { RoleAndOwnerInfo } from './RoleAndOwnerInfo';
-import { forwardRef, useEffect, useRef, type FC } from 'react';
+import { type ReactNode, forwardRef, useEffect, useRef, type FC } from 'react';
import type {
PersonalDashboardProjectDetailsSchema,
PersonalDashboardSchemaAdminsItem,
@@ -159,108 +159,132 @@ export const MyProjects = forwardRef<
activeProjectStage === 'onboarding-started' ||
activeProjectStage === 'first-flag-created';
- const box1Content = () => {
- if (state === 'no projects') {
- return ;
- }
+ const getGridContents = (): {
+ list: ReactNode;
+ box1: ReactNode;
+ box2: ReactNode;
+ } => {
+ switch (state) {
+ case 'no projects':
+ return {
+ list: (
+
+
+ You don't currently have access to any
+ projects in the system.
+
+
+ To get started, you can{' '}
+
+ create your own project
+
+ . Alternatively, you can review the
+ available projects in the system and ask the
+ owner for access.
+
+
+ ),
+ box1: ,
+ box2: (
+
+ ),
+ };
- if (state === 'projects with error') {
- return ;
- }
+ case 'projects with error':
+ return {
+ list: (
+
+ {projects.map((project) => (
+
+ setActiveProject(project.id)
+ }
+ />
+ ))}
+
+ ),
+ box1: ,
+ box2: ,
+ };
- if (
- activeProjectStage === 'onboarded' &&
- personalDashboardProjectDetails
- ) {
- return (
-
- );
- } else if (
- activeProjectStage === 'onboarding-started' ||
- activeProjectStage === 'loading'
- ) {
- return ;
- } else if (activeProjectStage === 'first-flag-created') {
- return ;
- }
- };
-
- const box2Content = () => {
- if (state === 'no projects') {
- return ;
- }
-
- if (state === 'projects with error') {
- return ;
- }
-
- if (
- activeProjectStage === 'onboarded' &&
- personalDashboardProjectDetails
- ) {
- return (
- {
+ if (
+ activeProjectStage === 'onboarded' &&
+ personalDashboardProjectDetails
+ ) {
+ return (
+
+ );
+ } else if (
+ activeProjectStage === 'onboarding-started' ||
+ activeProjectStage === 'loading'
+ ) {
+ return ;
+ } else if (
+ activeProjectStage === 'first-flag-created'
+ ) {
+ return ;
}
- />
- );
- }
+ })();
- if (setupIncomplete || activeProjectStage === 'loading') {
- return ;
+ const box2 = (() => {
+ if (
+ activeProjectStage === 'onboarded' &&
+ personalDashboardProjectDetails
+ ) {
+ return (
+
+ );
+ } else if (
+ setupIncomplete ||
+ activeProjectStage === 'loading'
+ ) {
+ return ;
+ }
+ })();
+
+ return {
+ list: (
+
+ {projects.map((project) => (
+
+ setActiveProject(project.id)
+ }
+ />
+ ))}
+
+ ),
+ box1,
+ box2,
+ };
+ }
}
};
- const projectListContent = () => {
- if (state === 'no projects') {
- return (
-
-
- You don't currently have access to any projects in
- the system.
-
-
- To get started, you can{' '}
-
- create your own project
-
- . Alternatively, you can review the available
- projects in the system and ask the owner for access.
-
-
- );
- }
-
- return (
-
- {projects.map((project) => (
- setActiveProject(project.id)}
- />
- ))}
-
- );
- };
-
+ const { list, box1, box2 } = getGridContents();
return (
-
- {projectListContent()}
-
-
- {box1Content()}
-
-
- {box2Content()}
-
+ {list}
+ {box1}
+ {box2}