From fb9855c3fad883ca9d595a7ff79bd8d055a02c84 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Tue, 9 Apr 2024 17:48:04 +0300
Subject: [PATCH] fix: Do not show the MetricsChartTooltip InfoSummary when all
 projects (#6810)

What it says on the tin

Closes #
[](https://linear.app/unleash/issue/1-2275/hide-bottom-part-of-metrics-tooltip-when-all-projects)
<img width="1677" alt="Screenshot 2024-04-09 at 16 57 13"
src="https://github.com/Unleash/unleash/assets/104830839/2369c6f4-a136-4635-b77b-63aa0087338e">
<img width="1678" alt="Screenshot 2024-04-09 at 16 55 53"
src="https://github.com/Unleash/unleash/assets/104830839/b29ec13d-5611-40a2-8dc6-af4c5a4ec97a">

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../MetricsChartTooltip-InfoSummary.test.tsx  | 18 -------
 .../MetricsChartTooltip.tsx                   | 51 ++++++++++++-------
 2 files changed, 33 insertions(+), 36 deletions(-)
 delete mode 100644 frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip-InfoSummary.test.tsx

diff --git a/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip-InfoSummary.test.tsx b/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip-InfoSummary.test.tsx
deleted file mode 100644
index dc60887b68..0000000000
--- a/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip-InfoSummary.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { InfoSummary } from './MetricsChartTooltip';
-
-test('Renders apps, flags, and environments, even when their data is `N/A`', () => {
-    render(
-        <InfoSummary
-            data={[
-                { key: 'Flags', value: 'N/A' },
-                { key: 'Environments', value: 'N/A' },
-                { key: 'Apps', value: 'N/A' },
-            ]}
-        />,
-    );
-
-    screen.getByText('Environments');
-    screen.getByText('Apps');
-    screen.getByText('Flags');
-});
diff --git a/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx b/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
index 6cd3c5b48e..9054c162ff 100644
--- a/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
+++ b/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
@@ -2,6 +2,7 @@ import type { VFC } from 'react';
 import type { InstanceInsightsSchemaMetricsSummaryTrendsItem } from 'openapi';
 import { Box, Divider, Paper, styled, Typography } from '@mui/material';
 import type { TooltipState } from 'component/insights/components/LineChart/ChartTooltip/ChartTooltip';
+import { ConditionallyRender } from '../../../../common/ConditionallyRender/ConditionallyRender';
 
 const StyledTooltipItemContainer = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(2),
@@ -126,24 +127,38 @@ export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
                         title={`Not exposed: ${point.value.totalNo ?? 0}`}
                         color={'error'}
                     />
-                    <Divider
-                        sx={(theme) => ({ margin: theme.spacing(1.5, 0) })}
-                    />
-                    <InfoSummary
-                        data={[
-                            {
-                                key: 'Flags',
-                                value: point.value.totalFlags ?? 'N/A',
-                            },
-                            {
-                                key: 'Environments',
-                                value: point.value.totalEnvironments ?? 'N/A',
-                            },
-                            {
-                                key: 'Apps',
-                                value: point.value.totalApps ?? 'N/A',
-                            },
-                        ]}
+                    <ConditionallyRender
+                        condition={
+                            Boolean(point.value.totalApps) &&
+                            Boolean(point.value.totalEnvironments) &&
+                            Boolean(point.value.totalFlags)
+                        }
+                        show={
+                            <>
+                                <Divider
+                                    sx={(theme) => ({
+                                        margin: theme.spacing(1.5, 0),
+                                    })}
+                                />
+                                <InfoSummary
+                                    data={[
+                                        {
+                                            key: 'Flags',
+                                            value: point.value.totalFlags,
+                                        },
+                                        {
+                                            key: 'Environments',
+                                            value: point.value
+                                                .totalEnvironments,
+                                        },
+                                        {
+                                            key: 'Apps',
+                                            value: point.value.totalApps,
+                                        },
+                                    ]}
+                                />
+                            </>
+                        }
                     />
                 </StyledTooltipItemContainer>
             )) || null}