From 9a5d965636a728cdfbad0f6f6b244a672581bb90 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Tue, 5 Nov 2024 07:55:13 +0100
Subject: [PATCH] feat: style project resources component (#8636)

This PR adds full styling for the project resources UI widget, adding
icons, links, and sorting out the layout.

Light mode:
<img width="663" alt="image"
src="https://github.com/user-attachments/assets/51231c67-1a0f-4018-9603-c476dac3b03a">

Dark mode:
<img width="663" alt="image"
src="https://github.com/user-attachments/assets/8943e479-2ecb-4917-9fad-fb6e1f1649a5">

On narrower screens:
<img width="474" alt="image"
src="https://github.com/user-attachments/assets/e0133f79-c389-444c-8d82-226cffd1015c">
---
 .../ProjectStatus/ProjectResources.tsx        | 126 ++++++++++++++++--
 1 file changed, 117 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
index 976f2d1971ac..751728d191f9 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
@@ -1,22 +1,99 @@
-import { styled } from '@mui/material';
+import { Typography, 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';
+import {
+    type ReactNode,
+    useMemo,
+    type FC,
+    type PropsWithChildren,
+} from 'react';
+import UsersIcon from '@mui/icons-material/Group';
+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';
 
 const Wrapper = styled('article')(({ theme }) => ({
     backgroundColor: theme.palette.envAccordion.expanded,
-    padding: theme.spacing(2),
+    padding: theme.spacing(3),
     borderRadius: theme.shape.borderRadiusExtraLarge,
 }));
 
 const ProjectResourcesInner = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: '1rem',
+    gap: theme.spacing(2),
+    containerType: 'inline-size',
 }));
 
+const ItemContent = styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    flexFlow: 'row nowrap',
+    gap: theme.spacing(1),
+    svg: {
+        fill: theme.palette.primary.main,
+    },
+}));
+
+const onNarrowWidget = (css: object) => ({
+    '@container (max-width: 400px)': css,
+    '@supports not (container-type: inline-size)': {
+        '@media (max-width: 400px)': css,
+    },
+});
+
+const ListItemRow = styled('li')(({ theme }) => {
+    return {
+        display: 'flex',
+        flexFlow: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: theme.spacing(1),
+
+        ...onNarrowWidget({
+            flexFlow: 'column',
+            alignItems: 'flex-start',
+            justifyContent: 'unset',
+            '& + li': {
+                marginTop: theme.spacing(5),
+            },
+        }),
+    };
+});
+
+const ResourceList = styled('ul')(({ theme }) => ({
+    margin: 0,
+    listStyle: 'none',
+    padding: 0,
+    'li + li': {
+        marginTop: theme.spacing(2),
+    },
+
+    ...onNarrowWidget({
+        'li + li': {
+            marginTop: theme.spacing(4),
+        },
+    }),
+}));
+
+const ListItem: FC<
+    PropsWithChildren<{
+        linkUrl: string;
+        linkText: string;
+        icon: ReactNode;
+    }>
+> = ({ children, linkUrl, linkText, icon }) => (
+    <ListItemRow>
+        <ItemContent>
+            {icon}
+            <span>{children}</span>
+        </ItemContent>
+        <Link to={linkUrl}>{linkText}</Link>
+    </ListItemRow>
+);
+
 export const ProjectResources = () => {
     const projectId = useRequiredPathParam('projectId');
     const { project, loading: loadingProject } = useProjectOverview(projectId);
@@ -34,11 +111,42 @@ export const ProjectResources = () => {
     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>
+                <Typography variant='h3' sx={{ margin: 0 }}>
+                    Project Resources
+                </Typography>
+                <ResourceList>
+                    <ListItem
+                        linkUrl={`/projects/${projectId}/settings/access`}
+                        linkText='Add members'
+                        icon={<UsersIcon />}
+                    >
+                        {project.members} project member(s)
+                    </ListItem>
+
+                    <ListItem
+                        linkUrl={`/projects/${projectId}/settings/api-access`}
+                        linkText='Add new key'
+                        icon={<ApiKeyIcon />}
+                    >
+                        {tokens.length} API key(s)
+                    </ListItem>
+
+                    <ListItem
+                        linkUrl={`/projects/${projectId}/settings/placeholder`}
+                        linkText='View connections'
+                        icon={<ConnectedIcon />}
+                    >
+                        1 connected environment(s)
+                    </ListItem>
+
+                    <ListItem
+                        linkUrl={`/projects/${projectId}/settings/segments`}
+                        linkText='Add segments'
+                        icon={<SegmentsIcon />}
+                    >
+                        {segmentCount} project segment(s)
+                    </ListItem>
+                </ResourceList>
             </ProjectResourcesInner>
         </Wrapper>
     );