feat: make panels collapsible

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>
         );

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}

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>

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 />

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"
             `,
     }),

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}

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