fix: Do not show the MetricsChartTooltip InfoSummary when all projects

Signed-off-by: andreas-unleash <[email protected]>
Unleash · Apr 9, 2024 · 73a1bd5 · 73a1bd5
1 parent 48b8df8
commit 73a1bd5
Show file tree

Hide file tree

Showing 2 changed files with 35 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,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}