Merge branch 'main' into jpople/system-form-fixes

CHANGELOG.md

@@ -17,11 +17,6 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.24.0...main)
 
-### Added
-- Adds support for custom get experiences fn and custom patch notices served fn [#4410](https://github.com/ethyca/fides/pull/4410)
-
-### Fixed
-- User preferences from cookie should always override experience preferences [#4405](https://github.com/ethyca/fides/pull/4405)
 
 ## [2.24.0](https://github.com/ethyca/fides/compare/2.23.3...2.24.0)
 
@@ -36,6 +31,8 @@ The types of changes are:
 - Erasure support for Typeform [#4366](https://github.com/ethyca/fides/pull/4366)
 - Added notice that a system is GVL when adding/editing from system form [#4327](https://github.com/ethyca/fides/pull/4327)
 - Added the ability to select the request types to enable per integration (for plus users) [#4374](https://github.com/ethyca/fides/pull/4374)
+- Adds support for custom get experiences fn and custom patch notices served fn [#4410](https://github.com/ethyca/fides/pull/4410)
+- Adds more granularity to tracking consent method, updates custom savePreferencesFn and FidesUpdated event to take consent method [#4419](https://github.com/ethyca/fides/pull/4419)
 
 ### Changed
 - Add filtering and pagination to bulk vendor add table [#4351](https://github.com/ethyca/fides/pull/4351)
@@ -45,10 +42,13 @@ The types of changes are:
 - "is_service_specific" default updated when building TC strings on the backend [#4377](https://github.com/ethyca/fides/pull/4377)
 - "isServiceSpecific" default updated when building TC strings on the frontend [#4384](https://github.com/ethyca/fides/pull/4384)
 - Redact cli, database, and redis configuration information from GET api/v1/config API request responses. [#4379](https://github.com/ethyca/fides/pull/4379)
+- Button ordering in fides.js UI [#4407](https://github.com/ethyca/fides/pull/4407)
+- Add different classnames to consent buttons for easier selection [#4411](https://github.com/ethyca/fides/pull/4411)
 
 ### Fixed
 - Persist bulk system add filter modal state [#4412](https://github.com/ethyca/fides/pull/4412)
 - Fixing labels for request type field [#4414](https://github.com/ethyca/fides/pull/4414)
+- User preferences from cookie should always override experience preferences [#4405](https://github.com/ethyca/fides/pull/4405)
 
 ## [2.23.3](https://github.com/ethyca/fides/compare/2.23.2...2.23.3)
 

clients/admin-ui/src/types/api/models/ConsentMethod.ts

@@ -6,7 +6,11 @@
  * An enumeration.
  */
 export enum ConsentMethod {
-  BUTTON = "button",
+  BUTTON = "button", // deprecated- keeping for backwards-compatibility
+  REJECT = "reject",
+  ACCEPT = "accept",
+  SAVE = "save",
+  DISMISS = "dismiss",
   GPC = "gpc",
   INDIVIDUAL_NOTICE = "individual_notice",
 }

clients/fides-js/src/components/Button.tsx

@@ -5,17 +5,19 @@ interface ButtonProps {
   buttonType: ButtonType;
   label?: string;
   onClick?: () => void;
+  className?: string;
 }
 
 const Button: FunctionComponent<ButtonProps> = ({
   buttonType,
   label,
   onClick,
+  className = "",
 }) => (
   <button
     type="button"
     id={`fides-banner-button-${buttonType.valueOf()}`}
-    className={`fides-banner-button fides-banner-button-${buttonType.valueOf()}`}
+    className={`fides-banner-button fides-banner-button-${buttonType.valueOf()} ${className}`}
     onClick={onClick}
     data-testid={`${label}-btn`}
   >

clients/fides-js/src/components/ConsentButtons.tsx

@@ -1,33 +1,31 @@
-import { ComponentChildren, h, VNode } from "preact";
+import { VNode, h } from "preact";
 import Button from "./Button";
 import {
   ButtonType,
-  PrivacyExperience,
   ConsentMechanism,
-  PrivacyNotice,
+  ConsentMethod,
   ExperienceConfig,
+  PrivacyExperience,
+  PrivacyNotice,
 } from "../lib/consent-types";
+import PrivacyPolicyLink from "./PrivacyPolicyLink";
 
 export const ConsentButtons = ({
   experienceConfig,
   onManagePreferencesClick,
   firstButton,
-  middleButton,
   onAcceptAll,
   onRejectAll,
-  children,
   isMobile,
+  includePrivacyPolicy,
 }: {
   experienceConfig: ExperienceConfig;
   onManagePreferencesClick?: () => void;
   firstButton?: VNode;
-  /** Used to add a button between the "manage preferences" button and the "accept/reject" buttons */
-  middleButton?: VNode;
   onAcceptAll: () => void;
   onRejectAll: () => void;
-  /** Added as siblings to the button group after the "accept/reject" buttons */
-  children?: ComponentChildren;
   isMobile: boolean;
+  includePrivacyPolicy?: boolean;
 }) => (
   <div id="fides-button-group">
     {onManagePreferencesClick ? (
@@ -36,10 +34,13 @@ export const ConsentButtons = ({
           buttonType={isMobile ? ButtonType.SECONDARY : ButtonType.TERTIARY}
           label={experienceConfig.privacy_preferences_link_label}
           onClick={onManagePreferencesClick}
+          className="fides-manage-preferences-button"
         />
       </div>
     ) : null}
-    {middleButton || null}
+    {includePrivacyPolicy ? (
+      <PrivacyPolicyLink experience={experienceConfig} />
+    ) : null}
     <div
       className={
         firstButton ? "fides-modal-button-group" : "fides-banner-button-group"
@@ -50,28 +51,27 @@ export const ConsentButtons = ({
         buttonType={ButtonType.PRIMARY}
         label={experienceConfig.reject_button_label}
         onClick={onRejectAll}
+        className="fides-reject-all-button"
       />
       <Button
         buttonType={ButtonType.PRIMARY}
         label={experienceConfig.accept_button_label}
         onClick={onAcceptAll}
+        className="fides-accept-all-button"
       />
     </div>
-    {children}
   </div>
 );
 
 type NoticeKeys = Array<PrivacyNotice["notice_key"]>;
 
 interface NoticeConsentButtonProps {
   experience: PrivacyExperience;
-  onSave: (noticeKeys: NoticeKeys) => void;
+  onSave: (consentMethod: ConsentMethod, noticeKeys: NoticeKeys) => void;
   onManagePreferencesClick?: () => void;
   enabledKeys: NoticeKeys;
   isAcknowledge: boolean;
   isInModal?: boolean;
-  children?: ComponentChildren;
-  middleButton?: VNode;
   isMobile: boolean;
 }
 
@@ -82,8 +82,6 @@ export const NoticeConsentButtons = ({
   enabledKeys,
   isInModal,
   isAcknowledge,
-  children,
-  middleButton,
   isMobile,
 }: NoticeConsentButtonProps) => {
   if (!experience.experience_config || !experience.privacy_notices) {
@@ -92,19 +90,23 @@ export const NoticeConsentButtons = ({
   const { experience_config: config, privacy_notices: notices } = experience;
 
   const handleAcceptAll = () => {
-    onSave(notices.map((n) => n.notice_key));
+    onSave(
+      ConsentMethod.accept,
+      notices.map((n) => n.notice_key)
+    );
   };
 
   const handleRejectAll = () => {
     onSave(
+      ConsentMethod.reject,
       notices
         .filter((n) => n.consent_mechanism === ConsentMechanism.NOTICE_ONLY)
         .map((n) => n.notice_key)
     );
   };
 
   const handleSave = () => {
-    onSave(enabledKeys);
+    onSave(ConsentMethod.save, enabledKeys);
   };
 
   if (isAcknowledge) {
@@ -118,6 +120,7 @@ export const NoticeConsentButtons = ({
           buttonType={ButtonType.PRIMARY}
           label={config.acknowledge_button_label}
           onClick={handleAcceptAll}
+          className="fides-acknowledge-button"
         />
       </div>
     );
@@ -135,13 +138,12 @@ export const NoticeConsentButtons = ({
             buttonType={ButtonType.SECONDARY}
             label={config.save_button_label}
             onClick={handleSave}
+            className="fides-save-button"
           />
         ) : undefined
       }
-      middleButton={middleButton}
       isMobile={isMobile}
-    >
-      {children}
-    </ConsentButtons>
+      includePrivacyPolicy={!isInModal}
+    />
   );
 };

clients/fides-js/src/components/fides.css

@@ -67,6 +67,7 @@
   --fides-overlay-container-border-radius: 12px;
   --fides-overlay-component-border-radius: 4px;
   --fides-overlay-banner-offset: 48px;
+  --fides-banner-font-size-title: var(--16px);
 }
 
 div#fides-overlay {
@@ -182,7 +183,7 @@ div#fides-banner-heading {
 }
 
 div#fides-banner-title {
-  font-size: var(--fides-overlay-font-size-title);
+  font-size: var(--fides-banner-font-size-title);
   font-weight: 600;
   line-height: 1.5em;
   min-width: 33%;
@@ -358,6 +359,7 @@ div#fides-modal .fides-modal-header {
 
 div#fides-consent-content {
   overflow: auto;
+  scrollbar-gutter: stable;
 }
 
 div#fides-consent-content .fides-modal-title {
@@ -372,7 +374,6 @@ div#fides-consent-content .fides-modal-body {
   overflow-y: auto;
   padding-inline: var(--fides-overlay-padding);
   height: 100%;
-  scrollbar-gutter: stable;
 }
 
 .fides-modal-footer {
@@ -406,9 +407,8 @@ div#fides-consent-content .fides-modal-description {
 .fides-tcf-banner-container
   div#fides-banner
   div#fides-banner-inner
-  div#fides-button-group
-  .fides-banner-button-group {
-  padding-left: 24px;
+  div#fides-button-group {
+  gap: 12px;
 }
 
 /* Responsive overlay */
@@ -1001,12 +1001,6 @@ div#fides-banner-inner .fides-privacy-policy {
   border-width: 1px 0 0 0;
   padding: 24px 40px 40px 40px;
 }
-.fides-tcf-banner-container
-  div#fides-banner
-  div#fides-banner-inner
-  div#fides-button-group {
-  justify-content: flex-start;
-}
 .fides-tcf-banner-container #fides-privacy-policy-link {
-  margin-left: auto;
+  margin: auto;
 }

clients/fides-js/src/components/notices/NoticeOverlay.tsx

@@ -86,7 +86,10 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
   };
 
   const handleUpdatePreferences = useCallback(
-    (enabledPrivacyNoticeKeys: Array<PrivacyNotice["notice_key"]>) => {
+    (
+      consentMethod: ConsentMethod,
+      enabledPrivacyNoticeKeys: Array<PrivacyNotice["notice_key"]>
+    ) => {
       const consentPreferencesToSave = createConsentPreferencesToSave(
         privacyNotices,
         enabledPrivacyNoticeKeys,
@@ -96,7 +99,7 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
       updateConsentPreferences({
         consentPreferencesToSave,
         experience,
-        consentMethod: ConsentMethod.button,
+        consentMethod,
         options,
         userLocationString: fidesRegionString,
         cookie,
@@ -154,12 +157,14 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
               experience={experience}
               onManagePreferencesClick={onManagePreferencesClick}
               enabledKeys={draftEnabledNoticeKeys}
-              onSave={(keys) => {
-                handleUpdatePreferences(keys);
+              onSave={(
+                consentMethod: ConsentMethod,
+                keys: Array<PrivacyNotice["notice_key"]>
+              ) => {
+                handleUpdatePreferences(consentMethod, keys);
                 onSave();
               }}
               isAcknowledge={isAllNoticeOnly}
-              middleButton={<PrivacyPolicyLink experience={experienceConfig} />}
               isMobile={isMobile}
             />
           )}
@@ -184,8 +189,11 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
           <NoticeConsentButtons
             experience={experience}
             enabledKeys={draftEnabledNoticeKeys}
-            onSave={(keys) => {
-              handleUpdatePreferences(keys);
+            onSave={(
+              consentMethod: ConsentMethod,
+              keys: Array<PrivacyNotice["notice_key"]>
+            ) => {
+              handleUpdatePreferences(consentMethod, keys);
               onClose();
             }}
             isInModal

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

@@ -1,16 +1,16 @@
-import { ComponentChildren, VNode, h } from "preact";
+import { VNode, h } from "preact";
 
-import { PrivacyExperience } from "../../lib/consent-types";
+import { ConsentMethod, PrivacyExperience } from "../../lib/consent-types";
 import { ConsentButtons } from "../ConsentButtons";
 import type { EnabledIds, TcfModels } from "../../lib/tcf/types";
 
 interface TcfConsentButtonProps {
   experience: PrivacyExperience;
   onManagePreferencesClick?: () => void;
-  onSave: (keys: EnabledIds) => void;
+  onSave: (consentMethod: ConsentMethod, keys: EnabledIds) => void;
   firstButton?: VNode;
-  children?: ComponentChildren;
   isMobile: boolean;
+  includePrivacyPolicy?: boolean;
 }
 
 const getAllIds = (modelList: TcfModels) => {
@@ -25,8 +25,8 @@ export const TcfConsentButtons = ({
   onManagePreferencesClick,
   onSave,
   firstButton,
-  children,
   isMobile,
+  includePrivacyPolicy,
 }: TcfConsentButtonProps) => {
   if (!experience.experience_config) {
     return null;
@@ -48,7 +48,7 @@ export const TcfConsentButtons = ({
         ...(experience.tcf_system_legitimate_interests || []),
       ]),
     };
-    onSave(allIds);
+    onSave(ConsentMethod.accept, allIds);
   };
   const handleRejectAll = () => {
     const emptyIds: EnabledIds = {
@@ -60,7 +60,7 @@ export const TcfConsentButtons = ({
       vendorsConsent: [],
       vendorsLegint: [],
     };
-    onSave(emptyIds);
+    onSave(ConsentMethod.reject, emptyIds);
   };
 
   return (
@@ -71,8 +71,7 @@ export const TcfConsentButtons = ({
       onRejectAll={handleRejectAll}
       firstButton={firstButton}
       isMobile={isMobile}
-    >
-      {children}
-    </ConsentButtons>
+      includePrivacyPolicy={includePrivacyPolicy}
+    />
   );
 };