TCF purpose override page

CHANGELOG.md

@@ -24,14 +24,13 @@ The types of changes are:
 - New purposes endpoint and indices to improve system lookups [#4452](https://github.com/ethyca/fides/pull/4452)
 - Cypress tests for fides.js GPP extension [#4476](https://github.com/ethyca/fides/pull/4476)
 - Add support for global TCF Purpose Overrides [#4464](https://github.com/ethyca/fides/pull/4464)
+- TCF override management [#4484](https://github.com/ethyca/fides/pull/4484)
 - Readonly consent management table and modal [#4456](https://github.com/ethyca/fides/pull/4456), [#4477](https://github.com/ethyca/fides/pull/4477)
 - Access and erasure support for Gong [#4461](https://github.com/ethyca/fides/pull/4461)
 
 ### Changed
 - Increased max number of preferences allowed in privacy preference API calls [#4469](https://github.com/ethyca/fides/pull/4469)
 - Reduce size of tcf_consent payload in fides_consent cookie [#4480](https://github.com/ethyca/fides/pull/4480)
-
-### Changed
 - Change log level for FidesUserPermission retrieval to `debug` [#4482](https://github.com/ethyca/fides/pull/4482)
 
 ### Fixed

clients/admin-ui/src/features/common/api.slice.ts

@@ -51,6 +51,7 @@ export const baseApi = createApi({
     "Roles",
     "User",
     "Configuration Settings",
+    "TCF Purpose Override",
   ],
   endpoints: () => ({}),
 });

clients/admin-ui/src/features/common/form/inputs.tsx

@@ -989,7 +989,7 @@ export const CustomNumberInput = ({
 };
 
 interface CustomSwitchProps {
-  label: string;
+  label?: string;
   tooltip?: string;
   variant?: "inline" | "condensed" | "stacked";
   isDisabled?: boolean;
@@ -998,6 +998,7 @@ export const CustomSwitch = ({
   label,
   tooltip,
   variant = "inline",
+  onChange,
   isDisabled,
   ...props
 }: CustomSwitchProps & FieldHookConfig<boolean>) => {
@@ -1008,7 +1009,13 @@ export const CustomSwitch = ({
     <Switch
       name={field.name}
       isChecked={field.checked}
-      onChange={field.onChange}
+      onChange={(e) => {
+        field.onChange(e);
+        if (onChange) {
+          // @ts-ignore - it got confused between select/input element events
+          onChange(e);
+        }
+      }}
       onBlur={field.onBlur}
       colorScheme="purple"
       mr={2}

clients/admin-ui/src/features/common/nav/v2/nav-config.ts

@@ -175,6 +175,16 @@ export const NAV_CONFIG: NavConfigGroup[] = [
           ScopeRegistryEnum.CONFIG_UPDATE,
         ],
       },
+      {
+        title: "Consent",
+        path: routes.GLOABL_CONSENT_CONFIG_ROUTE,
+        requiresPlus: true,
+        requiresFidesCloud: false,
+        scopes: [
+          ScopeRegistryEnum.TCF_PUBLISHER_OVERRIDE_READ,
+          ScopeRegistryEnum.TCF_PUBLISHER_OVERRIDE_UPDATE,
+        ],
+      },
       {
         title: "About Fides",
         path: routes.ABOUT_ROUTE,

clients/admin-ui/src/features/common/nav/v2/routes.ts

@@ -30,3 +30,4 @@ export const CUSTOM_FIELDS_ROUTE = "/management/custom-fields";
 export const EMAIL_TEMPLATES_ROUTE = "/management/email-templates";
 export const DOMAIN_RECORDS_ROUTE = "/management/domain-records";
 export const CORS_CONFIGURATION_ROUTE = "/management/cors-configuration";
+export const GLOABL_CONSENT_CONFIG_ROUTE = "/management/consent";

clients/admin-ui/src/features/plus/plus.slice.ts

@@ -40,6 +40,7 @@ import {
   SystemScannerStatus,
   SystemScanResponse,
   SystemsDiff,
+  TCFPurposeOverrideSchema,
 } from "~/types/api";
 import {
   DataUseDeclaration,
@@ -428,6 +429,24 @@ const plusApi = baseApi.injectEndpoints({
       // Creating a connection config also creates a dataset behind the scenes
       invalidatesTags: () => ["Datastore Connection", "Datasets", "System"],
     }),
+    getTcfPurposeOverrides: build.query<TCFPurposeOverrideSchema[], void>({
+      query: () => ({
+        url: `plus/tcf/purpose_overrides`,
+        method: "GET",
+      }),
+      providesTags: ["TCF Purpose Override"],
+    }),
+    patchTcfPurposeOverrides: build.mutation<
+      TCFPurposeOverrideSchema[],
+      TCFPurposeOverrideSchema[]
+    >({
+      query: (overrides) => ({
+        url: `plus/tcf/purpose_overrides`,
+        method: "PATCH",
+        body: overrides,
+      }),
+      invalidatesTags: ["TCF Purpose Override"],
+    }),
   }),
 });
 
@@ -465,6 +484,8 @@ export const {
   useUpdateCustomAssetMutation,
   usePatchPlusSystemConnectionConfigsMutation,
   useCreatePlusSaasConnectionConfigMutation,
+  useGetTcfPurposeOverridesQuery,
+  usePatchTcfPurposeOverridesMutation,
 } = plusApi;
 
 export const selectHealth: (state: RootState) => HealthCheck | undefined =

clients/admin-ui/src/features/privacy-requests/privacy-requests.slice.ts

@@ -374,11 +374,14 @@ export const privacyRequestApi = baseApi.injectEndpoints({
       }),
       invalidatesTags: ["Configuration Settings"],
     }),
-    getConfigurationSettings: build.query<Record<string, any>, void>({
-      query: () => ({
+    getConfigurationSettings: build.query<
+      Record<string, any>,
+      { api_set: boolean }
+    >({
+      query: ({ api_set }) => ({
         url: `/config`,
         method: "GET",
-        params: { api_set: true },
+        params: { api_set },
       }),
       providesTags: ["Configuration Settings"],
     }),
@@ -502,7 +505,9 @@ export const selectCORSOrigins = () =>
   createSelector(
     [
       (state) => state,
-      privacyRequestApi.endpoints.getConfigurationSettings.select(),
+      privacyRequestApi.endpoints.getConfigurationSettings.select({
+        api_set: true,
+      }),
     ],
     (_, { data }) => {
       const hasCorsOrigins = narrow(
@@ -525,7 +530,9 @@ export const selectApplicationConfig = () =>
   createSelector(
     [
       (state) => state,
-      privacyRequestApi.endpoints.getConfigurationSettings.select(),
+      privacyRequestApi.endpoints.getConfigurationSettings.select({
+        api_set: true,
+      }),
     ],
     (_, { data }) => data as ApplicationConfig
   );