From 3a1886b738ada2db5e1858a3c7dff767059fd165 Mon Sep 17 00:00:00 2001
From: Sina Javaheri <sinajavaheri@gmail.com>
Date: Fri, 6 Dec 2024 16:09:36 +0100
Subject: [PATCH] fix(compliance-detail): fix the category number

---
 src/locales/de-DE/messages.po                   |  8 ++++----
 src/locales/en-US/messages.po                   |  8 ++++----
 src/pages/panel/compliance/ComplianceDetail.tsx | 12 +++++-------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po
index 997d13fc..2924dbc0 100644
--- a/src/locales/de-DE/messages.po
+++ b/src/locales/de-DE/messages.po
@@ -73,10 +73,6 @@ msgstr ""
 msgid "{0} ago"
 msgstr ""
 
-#: src/pages/panel/compliance/ComplianceDetail.tsx:151
-msgid "{0} categories"
-msgstr ""
-
 #: src/shared/event-button/EventButton.tsx:55
 #: src/shared/event-button/EventButton.tsx:64
 msgid "{0} Cloud account configured, id: {1}"
@@ -133,6 +129,10 @@ msgstr ""
 msgid "{added} configuration lines added and {removed} lines deleted."
 msgstr "{added} Konfigurationszeilen hinzugefügt und {removed} Zeilen gelöscht."
 
+#: src/pages/panel/compliance/ComplianceDetail.tsx:153
+msgid "{categoriesLength, plural, one {One category} =2 {Two categories} =3 {Three categories} other {# categories}}"
+msgstr ""
+
 #: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:237
 #: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:148
 msgid "{cloudAccountsLength, plural, one {# enabled cloud account} other {# enabled cloud accounts}}"
diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po
index 14542970..306a5721 100644
--- a/src/locales/en-US/messages.po
+++ b/src/locales/en-US/messages.po
@@ -73,10 +73,6 @@ msgstr "{0, plural, one {One error reported} two {Two errors reported} other {#
 msgid "{0} ago"
 msgstr "{0} ago"
 
-#: src/pages/panel/compliance/ComplianceDetail.tsx:151
-msgid "{0} categories"
-msgstr "{0} categories"
-
 #: src/shared/event-button/EventButton.tsx:55
 #: src/shared/event-button/EventButton.tsx:64
 msgid "{0} Cloud account configured, id: {1}"
@@ -133,6 +129,10 @@ msgstr "{accounts, plural, one {# account} other {# accounts}}"
 msgid "{added} configuration lines added and {removed} lines deleted."
 msgstr "{added} configuration lines added and {removed} lines deleted."
 
+#: src/pages/panel/compliance/ComplianceDetail.tsx:153
+msgid "{categoriesLength, plural, one {One category} =2 {Two categories} =3 {Three categories} other {# categories}}"
+msgstr "{categoriesLength, plural, one {One category} =2 {Two categories} =3 {Three categories} other {# categories}}"
+
 #: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:237
 #: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:148
 msgid "{cloudAccountsLength, plural, one {# enabled cloud account} other {# enabled cloud accounts}}"
diff --git a/src/pages/panel/compliance/ComplianceDetail.tsx b/src/pages/panel/compliance/ComplianceDetail.tsx
index 1e3fd9f0..57714ea1 100644
--- a/src/pages/panel/compliance/ComplianceDetail.tsx
+++ b/src/pages/panel/compliance/ComplianceDetail.tsx
@@ -1,4 +1,4 @@
-import { t, Trans } from '@lingui/macro'
+import { plural, t, Trans } from '@lingui/macro'
 import { Button, FormControlLabel, Stack, stackClasses, Typography } from '@mui/material'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useState } from 'react'
@@ -134,6 +134,8 @@ export const ComplianceDetail = () => {
       navigate({ pathname: newPathname, search: newSearch })
     }
   }
+  const data = dataWithChildren.length === 1 && dataWithChildren[0].children ? dataWithChildren[0].children : dataWithChildren
+  const categoriesLength = (showEmpty ? data : data.filter((i) => i.children?.length && !i.isManual)).length
   return (
     <Stack spacing={2} width="100%">
       <Stack spacing={3} direction={{ xs: 'column', lg: 'row' }}>
@@ -148,9 +150,7 @@ export const ComplianceDetail = () => {
         <Stack minWidth={1380}>
           <Stack direction="row" py={2} spacing={1} alignItems="center" justifyContent="space-between" color="textPrimary">
             <Typography variant="h4">
-              <Trans>
-                {(showEmpty ? dataWithChildren : dataWithChildren.filter((i) => i.children?.length && !i.isManual)).length} categories
-              </Trans>
+              {plural(categoriesLength, { one: 'One category', 2: 'Two categories', 3: 'Three categories', other: '# categories' })}
             </Typography>
             <Stack direction="row" alignItems="center" spacing={3.75}>
               <FormControlLabel
@@ -199,9 +199,7 @@ export const ComplianceDetail = () => {
             {allData && dataWithChildren ? (
               <ComplianceDetailTree
                 allData={allData}
-                dataWithChildren={
-                  dataWithChildren.length === 1 && dataWithChildren[0].children ? dataWithChildren[0].children : dataWithChildren
-                }
+                dataWithChildren={data}
                 accountId={accountId}
                 benchmarkId={benchmarkId}
                 checkId={checkId}