diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx index f397a38b8e99..874ef67ca198 100644 --- a/frontend/src/component/personalDashboard/PersonalDashboard.tsx +++ b/frontend/src/component/personalDashboard/PersonalDashboard.tsx @@ -13,7 +13,6 @@ import { import type { Theme } from '@mui/material/styles/createTheme'; import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; import React, { type FC, useEffect, useState } from 'react'; -import { useProfile } from 'hooks/api/getters/useProfile/useProfile'; import LinkIcon from '@mui/icons-material/Link'; import { Badge } from '../common/Badge/Badge'; import { ConnectSDK, CreateFlag } from './ConnectSDK'; @@ -23,7 +22,10 @@ import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectO import { ProjectSetupComplete } from './ProjectSetupComplete'; import { usePersonalDashboard } from 'hooks/api/getters/usePersonalDashboard/usePersonalDashboard'; import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons'; -import type { PersonalDashboardSchema } from '../../openapi'; +import type { + PersonalDashboardSchema, + PersonalDashboardSchemaProjectsItem, +} from '../../openapi'; import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure'; import { RoleAndOwnerInfo } from './RoleAndOwnerInfo'; @@ -81,13 +83,13 @@ export const StyledCardTitle = styled('div')<{ lines?: number }>( ); const ActiveProjectDetails: FC<{ - project: { flags: number; members: number; health: number }; + project: PersonalDashboardSchemaProjectsItem; }> = ({ project }) => { return ( - {project.flags} + {project.featureCount} flags @@ -95,7 +97,7 @@ const ActiveProjectDetails: FC<{ - {project.members} + {project.memberCount} members @@ -118,17 +120,7 @@ const SpacedGridItem = styled(Grid)(({ theme }) => ({ border: `0.5px solid ${theme.palette.divider}`, })); -const useProjects = () => { - const myProjects = useProfile().profile?.projects || []; - - // TODO: add real data for flags/members/health - const projects = myProjects.map((project) => ({ - name: project, - flags: 0, - members: 1, - health: 100, - })); - +const useProjects = (projects: PersonalDashboardSchemaProjectsItem[]) => { const [activeProject, setActiveProject] = useState(projects[0]?.name); useEffect(() => { @@ -177,8 +169,6 @@ export const PersonalDashboard = () => { const name = user?.name; - const { projects, activeProject, setActiveProject } = useProjects(); - const { personalDashboard, refetch: refetchDashboard } = usePersonalDashboard(); const [activeFlag, setActiveFlag] = useState< @@ -188,7 +178,11 @@ export const PersonalDashboard = () => { if (personalDashboard?.flags.length) { setActiveFlag(personalDashboard.flags[0]); } - }, [JSON.stringify(personalDashboard)]); + }, [JSON.stringify(personalDashboard?.flags)]); + + const { projects, activeProject, setActiveProject } = useProjects( + personalDashboard?.projects || [], + ); const { project: activeProjectOverview, loading } = useProjectOverview(activeProject); diff --git a/frontend/src/openapi/models/personalDashboardSchemaProjectsItem.ts b/frontend/src/openapi/models/personalDashboardSchemaProjectsItem.ts index 7e7422210f5c..6505a9fdfa2e 100644 --- a/frontend/src/openapi/models/personalDashboardSchemaProjectsItem.ts +++ b/frontend/src/openapi/models/personalDashboardSchemaProjectsItem.ts @@ -7,8 +7,14 @@ import type { PersonalDashboardSchemaProjectsItemOwners } from './personalDashbo import type { PersonalDashboardSchemaProjectsItemRolesItem } from './personalDashboardSchemaProjectsItemRolesItem'; export type PersonalDashboardSchemaProjectsItem = { + /** The number of features this project has */ + featureCount: number; + /** An indicator of the [project's health](https://docs.getunleash.io/reference/technical-debt#health-rating) on a scale from 0 to 100 */ + health: number; /** The id of the project */ id: string; + /** The number of members this project has */ + memberCount: number; /** The name of the project */ name: string; /** The users and/or groups that have the "owner" role in this project. If no such users or groups exist, the list will contain the "system" owner instead. */ @@ -17,5 +23,5 @@ export type PersonalDashboardSchemaProjectsItem = { * The list of roles that the user has in this project. * @minItems 1 */ - roles: PersonalDashboardSchemaProjectsItemRolesItem[]; + roles?: PersonalDashboardSchemaProjectsItemRolesItem[]; };