Fix Vendor list logic (#6830)

Restore isConsent to LI (#6840)

Author: gilluminate

CHANGELOG.md

@@ -51,6 +51,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Fixed a bug where the "Request manager" navigation item wouldn't return users to the main request view [#6814](https://github.com/ethyca/fides/pull/6814)
 - Fixed incorrect positioning on "Add system" button on system inventory page when Compass was disabled [#6812](https://github.com/ethyca/fides/pull/6812)
 - Fixed missing reference value validation in SaaS requests to apply to all access requests [#6782](https://github.com/ethyca/fides/pull/6782)
+- Fixed an issue where some Special purpose vendors were displaying incorrectly in the TCF modal [#6830](https://github.com/ethyca/fides/pull/6830)
 
 ### Changed
 - Switch to use `classify_params.llm_model_override` instead of `classify_params.model_override` in monitor config form [#6805](https://github.com/ethyca/fides/pull/6805)

clients/fides-js/src/components/tcf/TcfVendors.tsx

@@ -244,11 +244,13 @@ const ToggleChild = ({
 };
 
 const PagedVendorData = ({
+  activeTab,
   experience,
   vendors,
   enabledIds,
   onChange,
 }: {
+  activeTab: string;
   experience: PrivacyExperience;
   vendors: VendorRecord[];
   enabledIds: string[];
@@ -258,22 +260,23 @@ const PagedVendorData = ({
   const { activeChunk, ...paging } = usePaging(vendors);
 
   const {
-    gvlVendors,
-    specialPurposeOnlyGvlVendors,
-    otherVendors,
+    consentGvlVendors,
+    legintGvlVendors,
+    specialPurposeGvlVendors,
+    nonGVLVendors,
   }: {
-    gvlVendors: VendorRecord[];
-    specialPurposeOnlyGvlVendors: VendorRecord[];
-    otherVendors: VendorRecord[];
+    consentGvlVendors: VendorRecord[];
+    legintGvlVendors: VendorRecord[];
+    specialPurposeGvlVendors: VendorRecord[];
+    nonGVLVendors: VendorRecord[];
   } = useMemo(
     () => ({
-      gvlVendors: activeChunk?.filter(
-        (v) => v.isGvl && (v.isConsent || v.isLegint),
+      nonGVLVendors: activeChunk?.filter((v) => !v.isGvl),
+      consentGvlVendors: activeChunk?.filter((v) => v.isGvl && v.isConsent),
+      legintGvlVendors: activeChunk?.filter((v) => v.isGvl && v.isLegint),
+      specialPurposeGvlVendors: activeChunk?.filter(
+        (v) => v.isGvl && v.isSpecial && !v.isLegint,
       ),
-      specialPurposeOnlyGvlVendors: activeChunk?.filter(
-        (v) => v.isGvl && v.isSpecial && !v.isConsent && !v.isLegint,
-      ),
-      otherVendors: activeChunk?.filter((v) => !v.isGvl),
     }),
     [activeChunk],
   );
@@ -282,13 +285,67 @@ const PagedVendorData = ({
     return null;
   }
 
+  if (activeTab === LegalBasisEnum.LEGITIMATE_INTERESTS.toString()) {
+    return (
+      <Fragment>
+        {legintGvlVendors.length > 0 && (
+          <RecordsList<VendorRecord>
+            type="vendors"
+            title={i18n.t("static.tcf.vendors.iab")}
+            items={legintGvlVendors}
+            enabledIds={enabledIds}
+            onToggle={onChange}
+            renderBadgeLabel={(vendor) =>
+              vendorGvlEntry(vendor.id, experience.gvl)
+                ? "IAB TCF" // NOTE: As this is the proper name of the standard, it should not be localized!
+                : undefined
+            }
+            renderDropdownChild={(vendor) => (
+              <ToggleChild vendor={vendor} experience={experience} />
+            )}
+          />
+        )}
+        {specialPurposeGvlVendors.length > 0 && (
+          <RecordsList<VendorRecord>
+            type="vendors"
+            title={i18n.t("static.tcf.special_purposes")}
+            items={specialPurposeGvlVendors}
+            enabledIds={[]}
+            renderBadgeLabel={(vendor) =>
+              vendorGvlEntry(vendor.id, experience.gvl)
+                ? "IAB TCF" // NOTE: As this is the proper name of the standard, it should not be localized!
+                : undefined
+            }
+            renderDropdownChild={(vendor) => (
+              <ToggleChild vendor={vendor} experience={experience} />
+            )}
+            hideToggles
+          />
+        )}
+        {nonGVLVendors.length > 0 && (
+          <RecordsList<VendorRecord>
+            type="vendors"
+            title={i18n.t("static.tcf.vendors.other")}
+            items={nonGVLVendors}
+            enabledIds={enabledIds}
+            onToggle={onChange}
+            renderDropdownChild={(vendor) => (
+              <ToggleChild vendor={vendor} experience={experience} />
+            )}
+          />
+        )}
+        <PagingButtons {...paging} />
+      </Fragment>
+    );
+  }
+
   return (
     <Fragment>
-      {gvlVendors.length > 0 && (
+      {consentGvlVendors.length > 0 && (
         <RecordsList<VendorRecord>
           type="vendors"
           title={i18n.t("static.tcf.vendors.iab")}
-          items={gvlVendors}
+          items={consentGvlVendors}
           enabledIds={enabledIds}
           onToggle={onChange}
           renderBadgeLabel={(vendor) =>
@@ -301,28 +358,11 @@ const PagedVendorData = ({
           )}
         />
       )}
-      {specialPurposeOnlyGvlVendors.length > 0 && (
-        <RecordsList<VendorRecord>
-          type="vendors"
-          title={i18n.t("static.tcf.special_purposes")}
-          items={specialPurposeOnlyGvlVendors}
-          enabledIds={[]}
-          renderBadgeLabel={(vendor) =>
-            vendorGvlEntry(vendor.id, experience.gvl)
-              ? "IAB TCF" // NOTE: As this is the proper name of the standard, it should not be localized!
-              : undefined
-          }
-          renderDropdownChild={(vendor) => (
-            <ToggleChild vendor={vendor} experience={experience} />
-          )}
-          hideToggles
-        />
-      )}
-      {otherVendors.length > 0 && (
+      {nonGVLVendors.length > 0 && (
         <RecordsList<VendorRecord>
           type="vendors"
           title={i18n.t("static.tcf.vendors.other")}
-          items={otherVendors}
+          items={nonGVLVendors}
           enabledIds={enabledIds}
           onToggle={onChange}
           renderDropdownChild={(vendor) => (
@@ -366,6 +406,21 @@ const TcfVendors = ({
       activeLegalBasisOption.value === LegalBasisEnum.CONSENT.toString()
         ? vendors.filter((v) => v.isConsent)
         : vendors.filter((v) => v.isLegint || v.isSpecial);
+    if (
+      activeLegalBasisOption.value ===
+      LegalBasisEnum.LEGITIMATE_INTERESTS.toString()
+    ) {
+      // sort by isLegint first, then isSpecial
+      legalBasisFiltered.sort((a, b) => {
+        if (a.isLegint && !b.isLegint) {
+          return -1;
+        }
+        if (!a.isLegint && b.isLegint) {
+          return 1;
+        }
+        return 0;
+      });
+    }
     // Put "other vendors" last in the list
     return [
       ...legalBasisFiltered.filter((v) => v.isGvl),
@@ -381,6 +436,7 @@ const TcfVendors = ({
         onChange={setActiveLegalBasisOption}
       />
       <PagedVendorData
+        activeTab={activeLegalBasisOption.value}
         experience={experience}
         vendors={filteredVendors}
         enabledIds={

clients/privacy-center/cypress/e2e/fides-js/consent-banner-tcf.cy.ts

@@ -1104,8 +1104,8 @@ describe("Fides-js TCF", () => {
                 cy.get("input").should("be.checked");
               });
               cy.get("button").contains("Legitimate interest").click();
-              cy.getByTestId(`toggle-${VENDOR_1.name}`).within(() => {
-                cy.get("input").should("not.be.checked");
+              cy.getByTestId(`toggle-${SYSTEM_1.name}`).within(() => {
+                cy.get("input").should("be.checked");
               });
             });
             cy.get("@FidesUIChanged").should("have.been.calledOnce");