fix: now issue count under application will show correctly (#6553)

Previously if multiple environments had same missing SDK, it was counted
multiple times. Now it will take only unique.

frontend/src/component/application/ApplicationChart.tsx

@@ -14,7 +14,7 @@ import Flag from '@mui/icons-material/Flag';
 import WarningAmberRounded from '@mui/icons-material/WarningAmberRounded';
 import TimeAgo from 'react-timeago';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-import { getApplicationIssueMode } from './ApplicationIssues/ApplicationIssues';
+import { getApplicationIssues } from './ApplicationIssues/ApplicationIssues';
 
 const StyledTable = styled('table')(({ theme }) => ({
     fontSize: theme.fontSizes.smallerBody,
@@ -196,7 +196,7 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => {
     const navigate = useNavigate();
     const theme = useTheme();
 
-    const mode = getApplicationIssueMode(data);
+    const mode = getApplicationIssues(data);
 
     return (
         <Box sx={{ width }}>

frontend/src/component/application/ApplicationIssues/ApplicationIssues.test.tsx

@@ -35,4 +35,40 @@ test('Display all application issues', async () => {
     );
     await screen.findByText(`We detected the following outdated SDKs`);
     await screen.findByText(`unleash-client-php:1.13.0`);
+    await screen.findByText(`We detected 4 issues in this application`);
+});
+
+test('Each SDK version should be displayed once', async () => {
+    const application: ApplicationOverviewSchema = {
+        projects: ['default'],
+        featureCount: 0,
+        environments: [
+            {
+                issues: {
+                    missingFeatures: [],
+                    outdatedSdks: ['unleash-client-php:1.13.0'],
+                },
+                sdks: [],
+                instanceCount: 0,
+                lastSeen: new Date().toISOString(),
+                name: 'development',
+            },
+            {
+                issues: {
+                    missingFeatures: [],
+                    outdatedSdks: ['unleash-client-php:1.13.0'],
+                },
+                sdks: [],
+                instanceCount: 0,
+                lastSeen: new Date().toISOString(),
+                name: 'production',
+            },
+        ],
+        issues: {
+            missingStrategies: [],
+        },
+    };
+    render(<ApplicationIssues application={application} />);
+
+    await screen.findByText(`We detected 1 issue in this application`);
 });

frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx

@@ -95,6 +95,17 @@ interface IOutdatedSDKsProps {
     sdks: string[];
 }
 
+type ApplicationIssues =
+    | {
+          applicationMode: 'success';
+      }
+    | {
+          applicationMode: 'warning';
+          issueCount: number;
+          outdatedSdks: string[];
+          missingFeatures: string[];
+      };
+
 const FeaturesMissing = ({ features }: IFeaturesMissingProps) => {
     const { hasAccess } = useContext(AccessContext);
     const length = features.length;
@@ -186,38 +197,9 @@ const OutdatedSDKs = ({ sdks }: IOutdatedSDKsProps) => {
     );
 };
 
-export const getApplicationIssueMode = (
+export const getApplicationIssues = (
     application: ApplicationOverviewSchema,
-):
-    | {
-          applicationMode: 'success';
-      }
-    | {
-          applicationMode: 'warning';
-          issueCount: number;
-      } => {
-    const issueCount =
-        application.issues.missingStrategies.length +
-        application.environments
-            .map(
-                (env) =>
-                    env.issues.missingFeatures.length +
-                    env.issues.outdatedSdks.length,
-            )
-            .reduce((sum, num) => sum + num, 0);
-
-    return {
-        issueCount,
-        applicationMode: issueCount > 0 ? 'warning' : 'success',
-    };
-};
-
-export const ApplicationIssues = ({ application }: IApplicationIssuesProps) => {
-    const mode = getApplicationIssueMode(application);
-
-    if (mode.applicationMode === 'success') {
-        return null;
-    }
+): ApplicationIssues => {
     const outdatedSdks = [
         ...new Set(
             application.environments.flatMap((env) => env.issues.outdatedSdks),
@@ -230,7 +212,26 @@ export const ApplicationIssues = ({ application }: IApplicationIssuesProps) => {
             ),
         ),
     ];
-    const issueCount = mode.issueCount;
+    const issueCount =
+        outdatedSdks.length +
+        missingFeatures.length +
+        application.issues.missingStrategies.length;
+
+    return {
+        issueCount,
+        outdatedSdks,
+        missingFeatures,
+        applicationMode: issueCount > 0 ? 'warning' : 'success',
+    };
+};
+
+export const ApplicationIssues = ({ application }: IApplicationIssuesProps) => {
+    const mode = getApplicationIssues(application);
+
+    if (mode.applicationMode === 'success') {
+        return null;
+    }
+    const { issueCount, outdatedSdks, missingFeatures } = mode;
     return (
         <WarningContainer>
             <WarningHeader>

frontend/src/component/executiveDashboard/components/DashboardHeader/DashboardHeader.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, VFC, useState } from 'react';
+import { ReactNode, VFC } from 'react';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { useFeedback } from 'component/feedbackNew/useFeedback';
 import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined';
@@ -8,7 +8,6 @@ import {
     styled,
     useMediaQuery,
     useTheme,
-    Box,
 } from '@mui/material';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
 import { Badge } from 'component/common/Badge/Badge';