empty commit to start release 2.55.0

CHANGELOG.md

@@ -48,6 +48,7 @@ Changes can also be flagged with a GitHub label for tracking purposes. The URL o
 - Fixed `window.Fides.experience` of FidesJS to be a merged version of the minimal and full experience. [#5726](https://github.com/ethyca/fides/pull/5726)
 - Fixed vendor count template string on FidesJS embedded layer 2 descriptions [#5736](https://github.com/ethyca/fides/pull/5736)
 - Allowing a list with a single dataset in the YAML dataset editor [#5750](https://github.com/ethyca/fides/pull/5750)
+- Fixed edge case translation string issue on FidesJS embedded layer 2 (#5749)[https://github.com/ethyca/fides/pull/5749]
 
 ## [2.54.0](https://github.com/ethyca/fides/compare/2.53.0...2.54.0)
 

clients/admin-ui/src/features/common/nav/MainSideNav.tsx

@@ -1,11 +1,4 @@
-import {
-  AntButton,
-  AntMenuProps as MenuProps,
-  Box,
-  Icons,
-  Link,
-  VStack,
-} from "fidesui";
+import { AntButton, Box, Icons, VStack } from "fidesui";
 import palette from "fidesui/src/palette/palette.module.scss";
 import NextLink from "next/link";
 import { useRouter } from "next/router";
@@ -39,8 +32,6 @@ export const UnconnectedMainSideNav = ({
   handleLogout: any;
   username: string;
 }) => {
-  const router = useRouter();
-
   const navMenuItems = groups.map((group) => ({
     key: group.title,
     icon: group.icon,
@@ -49,9 +40,13 @@ export const UnconnectedMainSideNav = ({
       key: child.path,
       // child label needs left margin/padding to align with group title
       label: (
-        <span data-testid={`${child.title}-nav-link`} className="ml-4 pl-0.5">
+        <NextLink
+          href={child.path}
+          data-testid={`${child.title}-nav-link`}
+          className="ml-4 pl-0.5"
+        >
           {child.title}
-        </span>
+        </NextLink>
       ),
     })),
   }));
@@ -75,10 +70,6 @@ export const UnconnectedMainSideNav = ({
 
   const activeKey = getActiveKeyFromUrl();
 
-  const handleMenuItemClick: MenuProps["onClick"] = ({ key: path }) => {
-    router.push(path);
-  };
-
   // When the nav is first loaded, we want to open the toggles that were open when the user last visited
   // the page. This is stored in local storage so that it persists across refreshes.
   const getStartupOpenKeys = () => {
@@ -132,13 +123,12 @@ export const UnconnectedMainSideNav = ({
         <Box width="100%">
           <Box pb={6}>
             <Box px={2}>
-              <Link as={NextLink} href={INDEX_ROUTE} display="flex">
+              <NextLink href={INDEX_ROUTE}>
                 <Image src={logoImage} alt="Fides Logo" width={116} />
-              </Link>
+              </NextLink>
             </Box>
           </Box>
           <NavMenu
-            onClick={handleMenuItemClick}
             items={navMenuItems}
             selectedKeys={activeKey ? [activeKey] : []}
             onOpenChange={handleOpenChange}

clients/admin-ui/src/features/common/nav/NavMenu.tsx

@@ -1,4 +1,4 @@
-import { AntMenu as Menu, Icons } from "fidesui";
+import { AntMenu as Menu } from "fidesui";
 import { ComponentProps } from "react";
 
 import styles from "./NavMenu.module.scss";
@@ -10,12 +10,6 @@ export const NavMenu = ({ className, ...props }: MenuProps) => (
     mode="inline"
     theme="dark"
     inlineIndent={8}
-    expandIcon={
-      <div>
-        {/* The wrapper div is required otherwise the size of the icon is ignored */}
-        <Icons.ChevronDown size={14} />
-      </div>
-    }
     {...props}
     className={`${styles.menu} ${className}`}
   />

clients/admin-ui/src/theme/global.scss

@@ -40,17 +40,36 @@ h6 {
 // Custom styles for dark submenus
 .ant-menu-dark .ant-menu-sub {
   // The unselected submenu item should be light gray
-  > .ant-menu-item > .ant-menu-title-content {
+  > .ant-menu-item > .ant-menu-title-content a {
     color: var(--fidesui-neutral-200);
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: var(--fidesui-full-white);
     }
+    &:focus-visible {
+      text-decoration: underline;
+    }
   }
   // The selected submenu item should be dark, because the background is light
   // But using the token "darkItemSelectedColor" also affect the group title,
   // therefore we need this css rule
-  > .ant-menu-item.ant-menu-item-selected > .ant-menu-title-content {
+  > .ant-menu-item.ant-menu-item-selected > .ant-menu-title-content a {
     color: var(--fidesui-minos);
   }
 }
+
+.ant-menu {
+  .ant-menu-submenu-arrow {
+    // Remove rounding from submenu arrow
+    // to better match the style Carbon icons
+    --ant-border-radius: 0px;
+
+    // fix missing pixel in the arrow icon
+    // (it's the same width as ant only changing 0.6 to 0.65 here)
+    &::before,
+    &::after {
+      width: calc(calc(var(--ant-font-size) / 7 * 5) * 0.65);
+    }
+  }
+}

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

@@ -165,8 +165,9 @@ const Overlay: FunctionComponent<Props> = ({
   }, [experience, handleOpenModal, options.fidesEmbed]);
 
   useEffect(() => {
+    document.body.classList.add("fides-overlay-modal-link-shown");
     // If empty string is explicitly set, do not attempt to bind the modal link to the click handler.
-    // developers using `Fides.showModal();` can use this to prevent polling for the modal link.
+    // developers using `Fides.showModal();` can use this to prevent polling for the modal link. Developers should always be able to rely on the .fides-overlay-modal-link-shown classname to show their custom modal link.
     if (!modalLinkIsDisabled) {
       if (modalLink) {
         fidesDebugger(
@@ -175,7 +176,6 @@ const Overlay: FunctionComponent<Props> = ({
         modalLinkRef.current = modalLink;
         modalLinkRef.current.addEventListener("click", window.Fides.showModal);
         // show the modal link in the DOM
-        document.body.classList.add("fides-overlay-modal-link-shown");
         modalLinkRef.current.classList.add("fides-modal-link-shown");
       } else {
         fidesDebugger(`Searching for Modal link element #${modalLinkId}...`);

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

@@ -110,6 +110,7 @@
   }, [currentLocale, minExperienceLocale, setCurrentLocale]);
 
   const { gvlTranslations, setGvlTranslations } = useGvl();
+  const [isGVLLangLoading, setIsGVLLangLoading] = useState(false);
   const loadGVLTranslations = async (locale: string) => {
     const gvlTranslationObjects = await fetchGvlTranslations(
       options.fidesApiUrl,
@@ -149,8 +150,6 @@
   const [experience, setExperience] = useState<PrivacyExperience>();
 
   useEffect(() => {
-    let isGVLLangLoading = false;
-
     if (!!userlocale && bestLocale !== minExperienceLocale) {
       // The minimal experience translation is different from the user's language.
       // This occurs when the customer has set their overrides on the window object
@@ -166,9 +165,9 @@
       // We can only get English GVL translations from the experience.
       // If the user's locale is not English, we need to load them from the api.
       // This only affects the modal.
-      isGVLLangLoading = true;
+      setIsGVLLangLoading(true);
       loadGVLTranslations(bestLocale).then(() => {
-        isGVLLangLoading = false;
+        setIsGVLLangLoading(false);
       });
     }
     fidesDebugger("Fetching full TCF experience...");
@@ -192,20 +191,6 @@
           window.Fides.experience.minimal_tcf = false;
 
           setExperience(fullExperience);
-          loadMessagesFromExperience(
-            i18n,
-            fullExperience,
-            translationOverrides,
-          );
-          if (!userlocale || bestLocale === defaultLocale) {
-            // English (default) GVL translations are part of the full experience, so we load them here.
-            loadGVLMessagesFromExperience(i18n, fullExperience);
-          } else {
-            setCurrentLocale(bestLocale);
-            if (!isGVLLangLoading) {
-              setIsI18nLoading(false);
-            }
-          }
         }
       }
     });
@@ -220,6 +205,16 @@
     if (!experience) {
       setDraftIds(EMPTY_ENABLED_IDS);
     } else {
+      loadMessagesFromExperience(i18n, experience, translationOverrides);
+      if (!userlocale || bestLocale === defaultLocale) {
+        // English (default) GVL translations are part of the full experience, so we load them here.
+        loadGVLMessagesFromExperience(i18n, experience);
+      } else {
+        setCurrentLocale(bestLocale);
+        if (!isGVLLangLoading) {
+          setIsI18nLoading(false);
+        }
+      }
       const {
         tcf_purpose_consents: consentPurposes = [],
         privacy_notices: customPurposes = [],
@@ -245,7 +240,7 @@
         vendorsLegint: getEnabledIds([...legintVendors, ...legintSystems]),
       });
     }
   }, [experience]);
 
   useEffect(() => {
     if (experienceMinimal.vendor_count && setVendorCount) {

clients/privacy-center/cypress/e2e/show-modal.cy.ts

@@ -35,6 +35,7 @@ describe("Fides.showModal", () => {
       });
 
       it("Should not show modal link in favor of showModal", () => {
+        cy.get("body").should("have.class", "fides-overlay-modal-link-shown");
         cy.get("#fides-modal-link").should("not.be.visible");
         cy.waitUntilFidesInitialized().then(() => {
           cy.window().its("Fides").invoke("showModal");

src/fides/api/service/connectors/datahub_connector.py

@@ -1,6 +1,7 @@
 from typing import Generic, Optional
 
-from datahub.ingestion.graph.client import DataHubGraph, DataHubGraphConfig
+from datahub.ingestion.graph.client import DataHubGraph
+from datahub.ingestion.graph.config import DatahubClientConfig
 from loguru import logger
 
 from fides.api.models.connectionconfig import ConnectionConfig, ConnectionTestStatus
@@ -15,9 +16,11 @@ class DatahubConnector(Generic[DB_CONNECTOR_TYPE]):
     def __init__(self, configuration: ConnectionConfig):
         self.configuration = configuration
         self.config = DatahubSchema(**configuration.secrets or {})
-        # TODO: use token for authentication
         self.datahub_client = DataHubGraph(
-            DataHubGraphConfig(server=str(self.config.datahub_server_url))
+            DatahubClientConfig(
+                server=str(self.config.datahub_server_url),
+                token=str(self.config.datahub_token),
+            )
         )
 
     def test_connection(self) -> Optional[ConnectionTestStatus]: