Revert "DOP-4715: Upgrade consistent nav to "v2.1.0"" (#1120)

mongodb · Jun 7, 2024 · d013255 · d013255
1 parent ba68ab8
commit d013255
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -98,7 +98,7 @@
     "@leafygreen-ui/tooltip": "^11.0.4",
     "@leafygreen-ui/typography": "^18.3.0",
     "@loadable/component": "^5.14.1",
-    "@mdb/consistent-nav": "^2.1.1-rc.1",
+    "@mdb/consistent-nav": "^2.0.7",
     "@mdb/flora": "^1.5.6",
     "@mdx-js/react": "^2.2.1",
     "abort-controller": "^3.0.0",

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,10 +1,42 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useLocation } from '@gatsbyjs/reach-router';
 import { UnifiedFooter } from '@mdb/consistent-nav';
-import { AVAILABLE_LANGUAGES, getCurrLocale, onSelectLocale } from '../utils/locale';
+import { isBrowser } from '../utils/is-browser';
+import { AVAILABLE_LANGUAGES, STORAGE_KEY_PREF_LOCALE, getCurrLocale, localizePath } from '../utils/locale';
+import { setLocalValue } from '../utils/browser-storage';
 
 const Footer = () => {
-  const enabledLocales = AVAILABLE_LANGUAGES.map((language) => language.localeCode);
-  return <UnifiedFooter onSelectLocale={onSelectLocale} locale={getCurrLocale()} enabledLocales={enabledLocales} />;
+  const location = useLocation();
+
+  const onSelectLocale = (locale) => {
+    if (isBrowser) {
+      setLocalValue(STORAGE_KEY_PREF_LOCALE, locale);
+      const localizedPath = localizePath(location.pathname, locale);
+      window.location.href = localizedPath;
+    }
+  };
+
+  // A workaround to remove the other locale options
+  useEffect(() => {
+    const footer = document.getElementById('footer-container');
+    const footerUlElement = footer?.querySelector('ul[role=listbox]');
+    if (footerUlElement) {
+      // For DOP-4296 we only want to support English, Simple Chinese, Korean, and Portuguese.
+      const availableOptions = Array.from(footerUlElement.childNodes).reduce((accumulator, child) => {
+        if (AVAILABLE_LANGUAGES.find(({ language }) => child.textContent === language)) {
+          accumulator.push(child);
+        }
+        return accumulator;
+      }, []);
+
+      footerUlElement.innerHTML = null;
+      availableOptions.forEach((child) => {
+        footerUlElement.appendChild(child);
+      });
+    }
+  }, []);
+
+  return <UnifiedFooter onSelectLocale={onSelectLocale} locale={getCurrLocale()} />;
 };
 
 export default Footer;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -5,7 +5,6 @@ import { UnifiedNav } from '@mdb/consistent-nav';
 import { SidenavMobileMenuDropdown } from '../Sidenav';
 import SiteBanner from '../Banner/SiteBanner';
 import { theme } from '../../theme/docsTheme';
-import { AVAILABLE_LANGUAGES, getCurrLocale, onSelectLocale } from '../../utils/locale';
 
 const StyledHeaderContainer = styled.header(
   (props) => `
@@ -19,22 +18,11 @@ const StyledHeaderContainer = styled.header(
 const Header = ({ sidenav, eol, template }) => {
   const unifiedNavProperty = 'DOCS';
 
-  const enabledLocales = AVAILABLE_LANGUAGES.map((language) => language.localeCode);
   return (
     <StyledHeaderContainer template={template}>
       <SiteBanner />
       <>
-        {!eol && (
-          <UnifiedNav
-            fullWidth="true"
-            position="relative"
-            property={{ name: unifiedNavProperty }}
-            showLanguageSelector={true}
-            onSelectLocale={onSelectLocale}
-            locale={getCurrLocale()}
-            enabledLocales={enabledLocales}
-          />
-        )}
+        {!eol && <UnifiedNav fullWidth="true" position="relative" property={{ name: unifiedNavProperty }} />}
         {sidenav && <SidenavMobileMenuDropdown />}
       </>
     </StyledHeaderContainer>

diff --git a/src/utils/locale.js b/src/utils/locale.js
@@ -3,7 +3,6 @@ import { assertTrailingSlash } from './assert-trailing-slash';
 import { isBrowser } from './is-browser';
 import { normalizePath } from './normalize-path';
 import { removeLeadingSlash } from './remove-leading-slash';
-import { setLocalValue } from './browser-storage';
 
 /**
  * Key used to access browser storage for user's preferred locale
@@ -140,10 +139,3 @@ export const getLocaleMapping = (siteUrl, slug) => {
 
   return localeHrefMap;
 };
-
-export const onSelectLocale = (locale) => {
-  const location = window.location;
-  setLocalValue(STORAGE_KEY_PREF_LOCALE, locale);
-  const localizedPath = localizePath(location.pathname, locale);
-  window.location.href = localizedPath;
-};