PROD-2230: Fix table cell formatting for vendors

CHANGELOG.md

@@ -46,7 +46,8 @@ The types of changes are:
 - Fixed validations for privacy declaration taxonomy labels when creating/updating a System [#4982](https://github.com/ethyca/fides/pull/4982)
 - Allow property-specific messaging to work with non-custom templates [#4986](https://github.com/ethyca/fides/pull/4986)
 - Fixed an issue where config object was being passed twice to `fides.js` output [#5010](https://github.com/ethyca/fides/pull/5010)
-- Disabling Fides initializtion now also disables GPP initialization [#5010](https://github.com/ethyca/fides/pull/5010)
+- Disabling Fides initialization now also disables GPP initialization [#5010](https://github.com/ethyca/fides/pull/5010)
+- Fixes Vendor table formatting [#5013](https://github.com/ethyca/fides/pull/5013)
 
 ## [2.38.1](https://github.com/ethyca/fides/compare/2.38.0...2.38.1)
 

clients/admin-ui/src/features/common/table/v2/cells.tsx

@@ -94,6 +94,38 @@ export const BadgeCell = ({
   </BadgeCellContainer>
 );
 
+export const BadgeCellCount = ({
+  count,
+  singSuffix,
+  plSuffix,
+  ...badgeProps
+}: {
+  count: number;
+  singSuffix?: string;
+  plSuffix?: string;
+} & BadgeProps) => {
+  // If count is 1, display count with singular suffix
+  let badge = null;
+  if (count === 1) {
+    badge = (
+      <FidesBadge {...badgeProps}>
+        {count}
+        {singSuffix ? ` ${singSuffix}` : null}
+      </FidesBadge>
+    );
+  }
+  // If count is 0 or > 1, display count with plural suffix
+  else {
+    badge = (
+      <FidesBadge {...badgeProps}>
+        {count}
+        {plSuffix ? ` ${plSuffix}` : null}
+      </FidesBadge>
+    );
+  }
+  return <BadgeCellContainer>{badge}</BadgeCellContainer>;
+};
+
 export const GroupCountBadgeCell = ({
   value,
   suffix,

clients/admin-ui/src/features/common/table/v2/index.ts

@@ -1,5 +1,6 @@
 export {
   BadgeCell,
+  BadgeCellCount,
   DefaultCell,
   DefaultHeaderCell,
   GroupCountBadgeCell,

clients/admin-ui/src/features/configure-consent/ConsentManagementTable.tsx

@@ -6,7 +6,7 @@ import {
 } from "@tanstack/react-table";
 import { useFeatures } from "common/features";
 import {
-  BadgeCell,
+  BadgeCellCount,
   DefaultCell,
   DefaultHeaderCell,
   FidesTableV2,
@@ -163,33 +163,55 @@ export const ConsentManagementTable = () => {
       columnHelper.accessor((row) => row.data_uses, {
         id: "tcf_purpose",
         cell: (props) => (
-          <BadgeCell suffix="purposes" value={props.getValue()} />
+          <BadgeCellCount
+            plSuffix="purposes"
+            singSuffix="purpose"
+            count={props.getValue()}
+          />
         ),
         header: (props) => <DefaultHeaderCell value="TCF purpose" {...props} />,
       }),
       columnHelper.accessor((row) => row.data_uses, {
         id: "data_uses",
         cell: (props) => (
-          <BadgeCell suffix="data uses" value={props.getValue()} />
+          <BadgeCellCount
+            plSuffix="data uses"
+            singSuffix="data use"
+            count={props.getValue()}
+          />
         ),
         header: (props) => <DefaultHeaderCell value="Data use" {...props} />,
       }),
       columnHelper.accessor((row) => row.legal_bases, {
         id: "legal_bases",
-        cell: (props) => <BadgeCell suffix="bases" value={props.getValue()} />,
+        cell: (props) => (
+          <BadgeCellCount
+            plSuffix="bases"
+            singSuffix="basis"
+            count={props.getValue()}
+          />
+        ),
         header: (props) => <DefaultHeaderCell value="Legal basis" {...props} />,
       }),
       columnHelper.accessor((row) => row.consent_categories, {
         id: "consent_categories",
         cell: (props) => (
-          <BadgeCell suffix="Categories" value={props.getValue()} />
+          <BadgeCellCount
+            plSuffix="categories"
+            singSuffix="category"
+            count={props.getValue()}
+          />
         ),
         header: (props) => <DefaultHeaderCell value="Categories" {...props} />,
       }),
       columnHelper.accessor((row) => row.cookies, {
         id: "cookies",
         cell: (props) => (
-          <BadgeCell suffix="Cookies" value={props.getValue()} />
+          <BadgeCellCount
+            plSuffix="cookies"
+            singSuffix="cookie"
+            count={props.getValue()}
+          />
         ),
         header: (props) => <DefaultHeaderCell value="Cookies" {...props} />,
       }),

clients/admin-ui/src/features/datamap/reporting/DatamapReportTable.tsx

@@ -786,7 +786,7 @@ export const DatamapReportTable = () => {
         id: COLUMN_IDS.RESPONSIBILITY,
         cell: (props) => (
           <GroupCountBadgeCell
-            suffix="responsibilitlies"
+            suffix="responsibilities"
             value={props.getValue()}
             {...props}
           />