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>
Unleash · Apr 9, 2024 · fb9855c · fb9855c
1 parent 032419a
commit fb9855c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 36 deletions.
diff --git a/...ntsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip-InfoSummary.test.tsx b/...ntsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip-InfoSummary.test.tsx
diff --git a/.../insights/componentsChart/MetricsSummaryChart/MetricsChartTooltip/MetricsChartTooltip.tsx b/.../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}