From fc1a92cf50d4c7ed9b1372c897f5c7a58be8cfb0 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 1 Nov 2024 15:47:38 +0100
Subject: [PATCH] chore: stub out project resources for status model (#8631)

This PR begins to stub out the project resources widget. I still need
one more piece of data and then to work on the styling, but it's a
placeholder for now. I've also moved the project status modal to its own
folder so we can group the widgets etc. I'd like to get that merged
quickly to avoid any future conflicts, which is why I'm making the PR
ready now.
---
 .../src/component/project/Project/Project.tsx |  2 +-
 .../ProjectStatus/ProjectResources.tsx        | 45 +++++++++++++++++++
 .../ProjectStatusModal.tsx                    |  6 ++-
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
 rename frontend/src/component/project/Project/{ => ProjectStatus}/ProjectStatusModal.tsx (75%)

diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 0a3f6f0e45..f42d8ecce8 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -56,7 +56,7 @@ import { ProjectArchived } from './ArchiveProject/ProjectArchived';
 import { usePlausibleTracker } from '../../../hooks/usePlausibleTracker';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { useActionableChangeRequests } from 'hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests';
-import { ProjectStatusModal } from './ProjectStatusModal';
+import { ProjectStatusModal } from './ProjectStatus/ProjectStatusModal';
 
 const StyledBadge = styled(Badge)(({ theme }) => ({
     position: 'absolute',
diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
new file mode 100644
index 0000000000..976f2d1971
--- /dev/null
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
@@ -0,0 +1,45 @@
+import { styled } from '@mui/material';
+import { useProjectApiTokens } from 'hooks/api/getters/useProjectApiTokens/useProjectApiTokens';
+import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { useMemo } from 'react';
+
+const Wrapper = styled('article')(({ theme }) => ({
+    backgroundColor: theme.palette.envAccordion.expanded,
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadiusExtraLarge,
+}));
+
+const ProjectResourcesInner = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1rem',
+}));
+
+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 segmentCount = useMemo(
+        () =>
+            segments?.filter((segment) => segment.project === projectId)
+                .length ?? 0,
+        [segments, projectId],
+    );
+
+    return (
+        <Wrapper>
+            <ProjectResourcesInner>
+                <h3>Project Resources</h3>
+                <span>{project.members} project member(s)</span>
+                <span>{tokens.length} API key(s)</span>
+                <span>1 SDK connection(s)</span>
+                <span>{segmentCount} project segment(s)</span>
+            </ProjectResourcesInner>
+        </Wrapper>
+    );
+};
diff --git a/frontend/src/component/project/Project/ProjectStatusModal.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
similarity index 75%
rename from frontend/src/component/project/Project/ProjectStatusModal.tsx
rename to frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
index fbea8e31b3..45f48e64c4 100644
--- a/frontend/src/component/project/Project/ProjectStatusModal.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectStatusModal.tsx
@@ -1,9 +1,9 @@
 import { styled } from '@mui/material';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+import { ProjectResources } from './ProjectResources';
 
 const ModalContentContainer = styled('div')(({ theme }) => ({
     minHeight: '100vh',
-    display: 'flex',
     backgroundColor: theme.palette.background.default,
 }));
 
@@ -15,7 +15,9 @@ type Props = {
 export const ProjectStatusModal = ({ open, close }: Props) => {
     return (
         <SidebarModal open={open} onClose={close} label='Project status'>
-            <ModalContentContainer />
+            <ModalContentContainer>
+                <ProjectResources />
+            </ModalContentContainer>
         </SidebarModal>
     );
 };