From 73a1bd5492fec3e175d64606f6518b5a77e93a37 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Tue, 9 Apr 2024 16:56:43 +0300
Subject: [PATCH 1/2] fix: Do not show the MetricsChartTooltip InfoSummary when
 all projects

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../MetricsChartTooltip-InfoSummary.test.tsx  | 18 -------
 .../MetricsChartTooltip.tsx                   | 53 ++++++++++++-------
 2 files changed, 35 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 dc60887b68d6..000000000000
--- 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 6cd3c5b48e41..b4f6cac3c112 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,40 @@ 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),
+                        )}
+                        show={
+                            <>
+                                <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',
+                                        },
+                                    ]}
+                                />
+                            </>
+                        }
                     />
                 </StyledTooltipItemContainer>
             )) || null}

From 9a182fa2f7a08cd5bc521c38e43477db721bc040 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Tue, 9 Apr 2024 17:06:19 +0300
Subject: [PATCH 2/2] fix: Do not show the MetricsChartTooltip InfoSummary when
 all projects

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../MetricsChartTooltip.tsx                   | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx b/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
index b4f6cac3c112..9054c162ff56 100644
--- a/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
+++ b/frontend/src/component/insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx
@@ -128,10 +128,11 @@ export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
                         color={'error'}
                     />
                     <ConditionallyRender
-                        condition={Boolean(
-                            point.value.totalApps &&
-                                Boolean(point.value.totalEnvironments),
-                        )}
+                        condition={
+                            Boolean(point.value.totalApps) &&
+                            Boolean(point.value.totalEnvironments) &&
+                            Boolean(point.value.totalFlags)
+                        }
                         show={
                             <>
                                 <Divider
@@ -143,19 +144,16 @@ export const MetricsSummaryTooltip: VFC<{ tooltip: TooltipState | null }> = ({
                                     data={[
                                         {
                                             key: 'Flags',
-                                            value:
-                                                point.value.totalFlags ?? 'N/A',
+                                            value: point.value.totalFlags,
                                         },
                                         {
                                             key: 'Environments',
-                                            value:
-                                                point.value.totalEnvironments ??
-                                                'N/A',
+                                            value: point.value
+                                                .totalEnvironments,
                                         },
                                         {
                                             key: 'Apps',
-                                            value:
-                                                point.value.totalApps ?? 'N/A',
+                                            value: point.value.totalApps,
                                         },
                                     ]}
                                 />