feat: make panels collapsible (#8395)

This PR makes the projects and flags panels collapsible. The panels are expanded by default and can be collapsed by clicking on the panel header. The state of the panels is saved in localstorage. As part of this, it also: - moves the flag exposure metrics next to the metric selectors - fixes the alignment of the "no exposure" line ![image](https://github.com/user-attachments/assets/b41ca808-f5f0-4e17-8bb1-b1388256354d) Line alignment: before: ![image](https://github.com/user-attachments/assets/119320d6-d39d-4c34-815a-8a25c6856ad6) after: ![image](https://github.com/user-attachments/assets/f5b0fe51-1cda-49f9-8b22-e03988429799)
Unleash · Oct 9, 2024 · 23b0401 · 23b0401
1 parent ca831f7
commit 23b0401
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 133 deletions.
diff --git a/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx b/frontend/src/component/feature/FeatureView/FeatureEnvironmentSeen/FeatureEnvironmentSeen.tsx
@@ -74,6 +74,11 @@ const TooltipContainer: FC<{
     );
 };
 
+const LineBox = styled(Box)({
+    display: 'grid',
+    placeItems: 'center',
+});
+
 export const FeatureEnvironmentSeen = ({
     featureLastSeen,
     environments,
@@ -91,9 +96,9 @@ export const FeatureEnvironmentSeen = ({
                 tooltip='No usage reported from connected applications'
             >
                 <Box data-loading>
-                    <Box>
+                    <LineBox>
                         <UsageLine />
-                    </Box>
+                    </LineBox>
                 </Box>
             </TooltipContainer>
         );

diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure.tsx
@@ -12,7 +12,8 @@ export const FlagExposure: FC<{
     project: string;
     flagName: string;
     onArchive: () => void;
-}> = ({ project, flagName, onArchive }) => {
+    className?: string;
+}> = ({ project, flagName, onArchive, className }) => {
     const { feature, refetchFeature } = useFeature(project, flagName);
     const lastSeenEnvironments: ILastSeenEnvironments[] =
         feature.environments?.map((env) => ({
@@ -27,7 +28,7 @@ export const FlagExposure: FC<{
         useState(false);
 
     return (
-        <Box sx={{ display: 'flex' }}>
+        <Box sx={{ display: 'flex' }} className={className}>
             <FeatureEnvironmentSeen
                 sx={{ pt: 0, pb: 0 }}
                 featureLastSeen={feature.lastSeenAt}

diff --git a/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx b/frontend/src/component/personalDashboard/ContentGridNoProjects.tsx
@@ -108,12 +108,6 @@ export const ContentGridNoProjects: React.FC<Props> = ({ owners, admins }) => {
     return (
         <ContentGridContainer>
             <ProjectGrid>
-                <GridItem gridArea='header'>
-                    <Typography variant='h3'>My projects</Typography>
-                </GridItem>
-                <GridItem gridArea='onboarding'>
-                    <Typography>Potential next steps</Typography>
-                </GridItem>
                 <GridItem gridArea='projects'>
                     <GridContent>
                         <Typography>

diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -23,6 +23,7 @@ import {
     createPlaceholderBarChartOptions,
 } from './createChartOptions';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
+import { FlagExposure } from 'component/feature/FeatureView/FeatureOverview/FeatureLifecycle/FlagExposure';
 
 const defaultYes = [0, 14, 28, 21, 33, 31, 31, 22, 26, 37, 31, 14, 21, 14, 0];
 
@@ -140,7 +141,7 @@ const EnvironmentSelect: FC<{
     );
 };
 
-const MetricsSelectors = styled(Box)(({ theme }) => ({
+const ExposureAndSelectors = styled(Box)(({ theme }) => ({
     display: 'flex',
     justifyContent: 'flex-end',
     gap: theme.spacing(2),
@@ -154,9 +155,14 @@ const ChartContainer = styled('div')(({ theme }) => ({
     alignItems: 'center',
 }));
 
+const StyledExposure = styled(FlagExposure)({
+    alignItems: 'center',
+});
+
 export const FlagMetricsChart: FC<{
     flag: { name: string; project: string };
-}> = ({ flag }) => {
+    onArchive: () => void;
+}> = ({ flag, onArchive }) => {
     const [hoursBack, setHoursBack] = useState(48);
 
     const { environment, setEnvironment, activeEnvironments } =
@@ -168,7 +174,12 @@ export const FlagMetricsChart: FC<{
 
     return (
         <ChartContainer>
-            <MetricsSelectors>
+            <ExposureAndSelectors>
+                <StyledExposure
+                    project={flag.project}
+                    flagName={flag.name}
+                    onArchive={onArchive}
+                />
                 {environment ? (
                     <EnvironmentSelect
                         environment={environment}
@@ -180,7 +191,7 @@ export const FlagMetricsChart: FC<{
                     hoursBack={hoursBack}
                     setHoursBack={setHoursBack}
                 />
-            </MetricsSelectors>
+            </ExposureAndSelectors>
 
             {noData ? (
                 <PlaceholderFlagMetricsChart />

diff --git a/frontend/src/component/personalDashboard/Grid.tsx b/frontend/src/component/personalDashboard/Grid.tsx
@@ -10,7 +10,6 @@ const ContentGrid = styled('article')(({ theme }) => {
         backgroundColor: theme.palette.divider,
         borderRadius: `${theme.shape.borderRadiusLarge}px`,
         overflow: 'hidden',
-        border: `0.5px solid ${theme.palette.divider}`,
         gap: `1px`,
         display: 'flex',
         flexFlow: 'column nowrap',
@@ -41,7 +40,6 @@ export const ProjectGrid = styled(ContentGrid)(
         gridTemplateColumns: '1fr 1fr 1fr',
         display: 'grid',
         gridTemplateAreas: `
-                "header header header"
                 "projects box1 box2"
                 ". owners owners"
             `,
@@ -53,7 +51,6 @@ export const FlagGrid = styled(ContentGrid)(
         gridTemplateColumns: '1fr 1fr 1fr',
         display: 'grid',
         gridTemplateAreas: `
-                "title lifecycle lifecycle"
                 "flags chart chart"
             `,
     }),

diff --git a/frontend/src/component/personalDashboard/MyProjects.tsx b/frontend/src/component/personalDashboard/MyProjects.tsx
@@ -189,9 +189,6 @@ export const MyProjects = forwardRef<
         return (
             <ContentGridContainer ref={ref}>
                 <ProjectGrid>
-                    <GridItem gridArea='header'>
-                        <Typography variant='h3'>My projects</Typography>
-                    </GridItem>
                     <SpacedGridItem gridArea='projects'>
                         <List
                             disablePadding={true}

diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.test.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.test.tsx
@@ -114,7 +114,9 @@ const setupNewProject = () => {
     });
 };
 
-// @ts-ignore
+// @ts-expect-error The return type here isn't correct, but it's not
+// an issue for the tests. We just need to override it because it's
+// not implemented in jsdom.
 HTMLCanvasElement.prototype.getContext = () => {};
 
 //scrollIntoView is not implemented in jsdom
@@ -134,7 +136,7 @@ test('Render personal dashboard for a long running project', async () => {
     await screen.findByText('projectName');
     await screen.findByText('10'); // members
     await screen.findByText('100'); // features
-    await screen.findByText('80%'); // health
+    await screen.findAllByText('80%'); // health
 
     await screen.findByText('Project health');
     await screen.findByText('70%'); // avg health past window