feat: hook up project resources API to resources widget

frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx

@@ -14,6 +14,8 @@ import { Link } from 'react-router-dom';
 import ApiKeyIcon from '@mui/icons-material/Key';
 import SegmentsIcon from '@mui/icons-material/DonutLarge';
 import ConnectedIcon from '@mui/icons-material/Cable';
+import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
+import useLoading from 'hooks/useLoading';
 
 const Wrapper = styled('article')(({ theme }) => ({
     backgroundColor: theme.palette.envAccordion.expanded,
@@ -88,18 +90,19 @@ const ListItem: FC<
     <ListItemRow>
         <ItemContent>
             {icon}
-            <span>{children}</span>
+            <span data-loading-resources>{children}</span>
         </ItemContent>
         <Link to={linkUrl}>{linkText}</Link>
     </ListItemRow>
 );
 
 export const ProjectResources = () => {
     const projectId = useRequiredPathParam('projectId');
-    const { project, loading: loadingProject } = useProjectOverview(projectId);
-    const { tokens, loading: loadingTokens } = useProjectApiTokens(projectId);
-    const { segments, loading: loadingSegments } = useSegments();
-    // todo: add sdk connections
+    const { project } = useProjectOverview(projectId);
+    const { tokens } = useProjectApiTokens(projectId);
+    const { segments } = useSegments();
+    const { data: projectStatus, loading: loadingResources } =
+        useProjectStatus(projectId);
 
     const segmentCount = useMemo(
         () =>
@@ -108,8 +111,10 @@ export const ProjectResources = () => {
         [segments, projectId],
     );
 
+    const loadingStatusRef = useLoading(true, '[data-loading-resources=true]');
+
     return (
-        <Wrapper>
+        <Wrapper ref={loadingStatusRef}>
             <ProjectResourcesInner>
                 <Typography variant='h3' sx={{ margin: 0 }}>
                     Project Resources
@@ -136,7 +141,8 @@ export const ProjectResources = () => {
                         linkText='View connections'
                         icon={<ConnectedIcon />}
                     >
-                        1 connected environment(s)
+                        {projectStatus?.resources?.connectedEnvironments}{' '}
+                        connected environment(s)
                     </ListItem>
 
                     <ListItem

frontend/src/openapi/models/projectStatusSchema.ts

@@ -11,4 +11,10 @@ import type { ProjectActivitySchema } from './projectActivitySchema';
 export interface ProjectStatusSchema {
     /** Array of activity records with date and count, representing the project’s daily activity statistics. */
     activityCountByDate: ProjectActivitySchema;
+
+    /** Key resources within the project */
+    resources: {
+        /** Handwritten placeholder */
+        connectedEnvironments: number;
+    };
 }

src/lib/openapi/spec/project-status-schema.ts

@@ -22,6 +22,7 @@ export const projectStatusSchema = {
             properties: {
                 connectedEnvironments: {
                     type: 'number',
+                    minimum: 0,
                     description:
                         'The number of environments that have received SDK traffic in this project.',
                 },