feat: hook up project resources API to resources widget (#8657)

This PR wires up the connectedenvironments data from the API to the
resources widget.

Additionally, it adjusts the orval schema to add the new
connectedEnvironments property, and adds a loading state indicator for
the resource values based on the project status endpoint response.

As was discussed in a previous PR, I think this is a good time to update
the API to include all the information required for this view. This
would get rid of three hooks, lots of loading state indicators (because
we **can** do them individually; check out
0a334f9892)
and generally simplify this component a bit.

Here's the loading state:

![image](https://github.com/user-attachments/assets/c9938383-afcd-4f4b-92df-c64b83f5b1df)

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,
@@ -89,7 +91,7 @@ const ListItem: FC<
     <ListItemRow>
         <ItemContent>
             {icon}
-            <span>{children}</span>
+            <span data-loading-resources>{children}</span>
         </ItemContent>
         <Link to={linkUrl}>{linkText}</Link>
     </ListItemRow>
@@ -97,10 +99,11 @@ const ListItem: FC<
 
 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(
         () =>
@@ -109,8 +112,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
@@ -137,7 +142,8 @@ export const ProjectResources = () => {
                         linkText='View connections'
                         icon={<ConnectedIcon />}
                     >
-                        1 connected environment(s)
+                        {projectStatus?.resources?.connectedEnvironments}{' '}
+                        connected environment(s)
                     </ListItem>
 
                     <ListItem

frontend/src/hooks/api/getters/useProjectStatus/useProjectStatus.ts

@@ -6,6 +6,7 @@ const path = (projectId: string) => `api/admin/projects/${projectId}/status`;
 
 const placeholderData: ProjectStatusSchema = {
     activityCountByDate: [],
+    resources: { connectedEnvironments: 0 },
 };
 
 export const useProjectStatus = (projectId: string) => {

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.',
                 },