fix(compliance-detail): fix the category number

someengineering · Dec 6, 2024 · 3a1886b · 3a1886b
1 parent e066766
commit 3a1886b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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}