From 60262e5d0ba66b010fe3251cd5dd5c4c8f9989f8 Mon Sep 17 00:00:00 2001
From: andreas-unleash <andreas@getunleash.ai>
Date: Tue, 9 Apr 2024 10:52:09 +0300
Subject: [PATCH] fix: total flags and flags per user when all projects (#6787)

Fixes the flag stats flagsPerUser calculation and display value.
Previously the calculation depended on project data which might not be
there with the permission changes

Closes #
[1-2255](https://linear.app/unleash/issue/1-2255/unable-to-render-total-number-of-flags-when-there-are-no-project-data)

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
---
 .../src/component/insights/InsightsCharts.tsx | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx
index 438032346f..25ea374877 100644
--- a/frontend/src/component/insights/InsightsCharts.tsx
+++ b/frontend/src/component/insights/InsightsCharts.tsx
@@ -12,7 +12,11 @@ import { TimeToProduction } from './componentsStat/TimeToProduction/TimeToProduc
 import { TimeToProductionChart } from './componentsChart/TimeToProductionChart/TimeToProductionChart';
 import { MetricsSummaryChart } from './componentsChart/MetricsSummaryChart/MetricsSummaryChart';
 import { UpdatesPerEnvironmentTypeChart } from './componentsChart/UpdatesPerEnvironmentTypeChart/UpdatesPerEnvironmentTypeChart';
-import type { InstanceInsightsSchema } from 'openapi';
+import type {
+    InstanceInsightsSchema,
+    InstanceInsightsSchemaFlags,
+    InstanceInsightsSchemaUsers,
+} from 'openapi';
 import type { GroupedDataByProject } from './hooks/useGroupedProjectTrends';
 import { Box, styled } from '@mui/material';
 import { allOption } from '../common/ProjectSelect/ProjectSelect';
@@ -20,6 +24,7 @@ import type { VFC } from 'react';
 import { chartInfo } from './chart-info';
 
 interface IChartsProps {
+    flags: InstanceInsightsSchema['flags'];
     flagTrends: InstanceInsightsSchema['flagTrends'];
     projectsData: InstanceInsightsSchema['projectFlagTrends'];
     groupedProjectsData: GroupedDataByProject<
@@ -66,6 +71,7 @@ const ChartWidget = styled(Widget)(({ theme }) => ({
 
 export const InsightsCharts: VFC<IChartsProps> = ({
     projects,
+    flags,
     users,
     summary,
     userTrends,
@@ -78,6 +84,16 @@ export const InsightsCharts: VFC<IChartsProps> = ({
     const showAllProjects = projects[0] === allOption.id;
     const isOneProjectSelected = projects.length === 1;
 
+    function getFlagsPerUser(
+        flags: InstanceInsightsSchemaFlags,
+        users: InstanceInsightsSchemaUsers,
+    ) {
+        const flagsPerUserCalculation = flags.total / users.total;
+        return Number.isNaN(flagsPerUserCalculation)
+            ? 'N/A'
+            : flagsPerUserCalculation.toFixed(2);
+    }
+
     return (
         <>
             <StyledGrid>
@@ -122,9 +138,9 @@ export const InsightsCharts: VFC<IChartsProps> = ({
                 />
                 <Widget {...chartInfo.totalFlags}>
                     <FlagStats
-                        count={summary.total}
+                        count={showAllProjects ? flags.total : summary.total}
                         flagsPerUser={
-                            showAllProjects ? summary.flagsPerUser : ''
+                            showAllProjects ? getFlagsPerUser(flags, users) : ''
                         }
                     />
                 </Widget>