From ec43864ebe2b690e583686ac41d28b3ed866519e Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Mon, 2 Oct 2023 10:45:18 -0400 Subject: [PATCH 1/8] :sparkles: DOP-4060 adds language selector to unified footer on docs pages --- src/components/DocumentBody.js | 34 ++++++++++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js index 3d0e73963..24ca8830d 100644 --- a/src/components/DocumentBody.js +++ b/src/components/DocumentBody.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { UnifiedFooter } from '@mdb/consistent-nav'; import { usePresentationMode } from '../hooks/use-presentation-mode'; @@ -68,10 +68,29 @@ const getAnonymousFootnoteReferences = (index, numAnonRefs) => { }; const DocumentBody = (props) => { + const HIDE_UNIFIED_FOOTER_LOCALE = process.env['GATSBY_HIDE_UNIFIED_FOOTER_LOCALE'] === 'true'; + const { location, pageContext: { page, slug, template }, } = props; + + useEffect(() => { + // A workaround to remove the other locale options. + if (!HIDE_UNIFIED_FOOTER_LOCALE) { + const footer = document.querySelector('[data-testid=consistent-footer'); + const footerUlElement = footer?.querySelector('[data-testid=options]'); + if (footerUlElement) { + // For DOP-4060 we only want to support English and Simple Chinese (for now) + const en = footerUlElement.firstChild; + const simpleChinese = footerUlElement.lastChild; + footerUlElement.innerHTML = null; + footerUlElement.appendChild(en); + footerUlElement.appendChild(simpleChinese); + } + } + }, [HIDE_UNIFIED_FOOTER_LOCALE]); + const initialization = () => { const pageNodes = getNestedValue(['children'], page) || []; const footnotes = getFootnotes(pageNodes); @@ -90,6 +109,17 @@ const DocumentBody = (props) => { const isInPresentationMode = usePresentationMode()?.toLocaleLowerCase() === 'true'; + const onSelectLocale = (locale) => { + const localeHrefMap = { + 'zh-cn': 'https://mongodbcom-cdn.website.staging.corp.mongodb.com/zh-cn/docs-qa/', + 'en-us': 'https://mongodbcom-cdn.website.staging.corp.mongodb.com/docs-qa/,', + }; + + if (typeof window !== 'undefined') { + window.location.href = localeHrefMap[locale]; + } + }; + return ( <> { {!isInPresentationMode && (
- +
)} From 7a149716c03b1dfd0a6bf5e26ed2edaa4776ed39 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Mon, 2 Oct 2023 10:46:46 -0400 Subject: [PATCH 2/8] :white_check_mark: DOP-4060 added a test for the language selector for the unified footer --- tests/unit/Presentation.test.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/tests/unit/Presentation.test.js b/tests/unit/Presentation.test.js index 0290085b9..9465dde64 100644 --- a/tests/unit/Presentation.test.js +++ b/tests/unit/Presentation.test.js @@ -18,6 +18,13 @@ describe('DocumentBody', () => { expect(footer).toBeVisible(); expect(footer).toMatchSnapshot(); + if (!process.env.GATSBY_HIDE_UNIFIED_FOOTER_LOCALE) { + const languageSelector = screen.getByTestId('options'); + console.log('languageSelector', languageSelector); + expect(languageSelector).toBeInTheDocument(); + expect(languageSelector.querySelectorAll('li')).toHaveLength(9); // need to update this so it can render 2 + } + const feedbackWidget = screen.getByText('Share Feedback'); expect(feedbackWidget).toBeVisible(); expect(feedbackWidget).toMatchSnapshot(); From 66052e957abdf528b03838706b79da1d6c855be4 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Mon, 2 Oct 2023 12:01:30 -0400 Subject: [PATCH 3/8] :bug: DOP-4060 uses id for query on the client and in test --- src/components/DocumentBody.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js index 24ca8830d..06d3c4bd1 100644 --- a/src/components/DocumentBody.js +++ b/src/components/DocumentBody.js @@ -9,6 +9,7 @@ import { getMetaFromDirective } from '../utils/get-meta-from-directive'; import { getPlaintext } from '../utils/get-plaintext'; import { getTemplate } from '../utils/get-template'; import useSnootyMetadata from '../utils/use-snooty-metadata'; +import { isBrowser } from '../utils/is-browser'; import Widgets from './Widgets'; import SEO from './SEO'; import FootnoteContext from './Footnote/footnote-context'; @@ -78,8 +79,8 @@ const DocumentBody = (props) => { useEffect(() => { // A workaround to remove the other locale options. if (!HIDE_UNIFIED_FOOTER_LOCALE) { - const footer = document.querySelector('[data-testid=consistent-footer'); - const footerUlElement = footer?.querySelector('[data-testid=options]'); + const footer = document.getElementById('footer-container'); + const footerUlElement = footer?.querySelector('ul'); if (footerUlElement) { // For DOP-4060 we only want to support English and Simple Chinese (for now) const en = footerUlElement.firstChild; @@ -115,7 +116,7 @@ const DocumentBody = (props) => { 'en-us': 'https://mongodbcom-cdn.website.staging.corp.mongodb.com/docs-qa/,', }; - if (typeof window !== 'undefined') { + if (isBrowser) { window.location.href = localeHrefMap[locale]; } }; @@ -139,7 +140,7 @@ const DocumentBody = (props) => { {!isInPresentationMode && ( -
+ )} From 882f0e864792833928caca013c5b1f20bbad1662 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Mon, 2 Oct 2023 12:03:09 -0400 Subject: [PATCH 4/8] :white_check_mark: DOP-4060 updates test to check for only two options --- tests/unit/Presentation.test.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/tests/unit/Presentation.test.js b/tests/unit/Presentation.test.js index 9465dde64..7be190d7c 100644 --- a/tests/unit/Presentation.test.js +++ b/tests/unit/Presentation.test.js @@ -10,6 +10,9 @@ jest.mock(`../../src/utils/use-snooty-metadata`, () => { }); describe('DocumentBody', () => { + beforeAll(() => { + jest.spyOn(document, 'querySelector'); + }); it('renders the necessary elements', () => { mockLocation(null); render(); @@ -20,9 +23,8 @@ describe('DocumentBody', () => { if (!process.env.GATSBY_HIDE_UNIFIED_FOOTER_LOCALE) { const languageSelector = screen.getByTestId('options'); - console.log('languageSelector', languageSelector); expect(languageSelector).toBeInTheDocument(); - expect(languageSelector.querySelectorAll('li')).toHaveLength(9); // need to update this so it can render 2 + expect(languageSelector.querySelectorAll('li')).toHaveLength(2); } const feedbackWidget = screen.getByText('Share Feedback'); From 2736a47c37e0cdba7f81da6bd169f0cdce5264fd Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Mon, 2 Oct 2023 12:04:18 -0400 Subject: [PATCH 5/8] :camera_flash: DOP-4060 updates snapshot --- .../__snapshots__/Presentation.test.js.snap | 323 ++++++++++++++---- 1 file changed, 259 insertions(+), 64 deletions(-) diff --git a/tests/unit/__snapshots__/Presentation.test.js.snap b/tests/unit/__snapshots__/Presentation.test.js.snap index 571da2e6f..d9300c324 100644 --- a/tests/unit/__snapshots__/Presentation.test.js.snap +++ b/tests/unit/__snapshots__/Presentation.test.js.snap @@ -133,6 +133,132 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } .emotion-7 { + box-sizing: border-box; + margin: 0; + min-width: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin-top: 0px; +} + +@media screen and (min-width: 768px) { + .emotion-7 { + margin-top: 24px; + } +} + +.emotion-8 { + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + display: inline-block; + position: relative; +} + +.emotion-9 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + height: 48px; + border: none; + border-radius: 4px; + box-sizing: border-box; + cursor: pointer; + font-weight: 300; + background-color: transparent; + padding-left: 0; +} + +.emotion-10 { + font-family: Akzidenz-Grotesk Std; + font-size: 16px; + line-height: 16px; + color: #ffffff; + padding-left: 16px; + width: -webkit-min-content; + width: -moz-min-content; + width: min-content; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; +} + +.emotion-11 { + padding: 0 16px; +} + +.emotion-12 { + -webkit-transform: rotateZ(0.5deg); + -moz-transform: rotateZ(0.5deg); + -ms-transform: rotateZ(0.5deg); + transform: rotateZ(0.5deg); + -webkit-transition: -webkit-transform .15s ease-in-out; + transition: transform .15s ease-in-out; + z-index: 0; +} + +.emotion-13 { + stroke: #ffffff; +} + +.emotion-14 { + visibility: hidden; + position: absolute; + z-index: 1000; + display: none; + width: 100%; + min-width: -webkit-min-content; + min-width: -moz-min-content; + min-width: min-content; + padding: 16px; + line-height: 16px; + font-size: 16px; + color: #ffffff; + font-family: Akzidenz-Grotesk Std; + background-color: #21313c; + border: 1px solid #b8c4c2; + border-radius: 8px; + box-sizing: border-box; + box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15); +} + +.emotion-15 { + list-style-type: none; + margin: 0; + padding: 0; +} + +.emotion-16 { + cursor: pointer; + padding: 8px; +} + +.emotion-16:not(:last-child) { + margin-bottom: 8px; +} + +.emotion-16:hover { + border-radius: 2px; + background-color: #3d4f58; + color: #0ad05b; +} + +.emotion-18 { box-sizing: border-box; margin: 0; min-width: 0; @@ -144,12 +270,12 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-7 { + .emotion-18 { display: block; } } -.emotion-8 { +.emotion-19 { box-sizing: border-box; margin: 0; min-width: 0; @@ -160,12 +286,12 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-8 { + .emotion-19 { margin-top: 0px; } } -.emotion-9 { +.emotion-20 { font-family: Akzidenz-Grotesk Std; font-weight: 500; font-size: 16px; @@ -175,12 +301,12 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-9 { + .emotion-20 { margin-top: initial; } } -.emotion-10 { +.emotion-21 { list-style: none; margin: 0; padding: 0; @@ -189,16 +315,16 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-10 { + .emotion-21 { display: block; } } -.emotion-11 { +.emotion-22 { margin-bottom: 24px; } -.emotion-12 { +.emotion-23 { color: #ffffff; -webkit-text-decoration: none; text-decoration: none; @@ -216,11 +342,11 @@ exports[`DocumentBody renders the necessary elements 1`] = ` align-items: center; } -.emotion-39 { +.emotion-50 { margin-right: 16px; } -.emotion-58 { +.emotion-69 { box-sizing: border-box; margin: 0; min-width: 0; @@ -233,13 +359,14 @@ exports[`DocumentBody renders the necessary elements 1`] = ` } @media screen and (min-width: 768px) { - .emotion-58 { + .emotion-69 { display: none; } } +
+ +
+ +
+
    +
  • + English +
    • +
  • + 简体中文 +
    • +
+
+
+
© 2023 MongoDB, Inc.

About

Support

Social

© 2023 MongoDB, Inc.
From 4b7700f25743217dac4ad6de5189b64a91973293 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Mon, 2 Oct 2023 15:12:30 -0400 Subject: [PATCH 6/8] :ok_hand: DOP-4060 makes changes to make language selector more dynamic and some PR feedback --- src/components/DocumentBody.js | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js index 06d3c4bd1..d8cbdaeb3 100644 --- a/src/components/DocumentBody.js +++ b/src/components/DocumentBody.js @@ -68,9 +68,10 @@ const getAnonymousFootnoteReferences = (index, numAnonRefs) => { return index > numAnonRefs ? [] : [`id${index + 1}`]; }; -const DocumentBody = (props) => { - const HIDE_UNIFIED_FOOTER_LOCALE = process.env['GATSBY_HIDE_UNIFIED_FOOTER_LOCALE'] === 'true'; +const AVAILABLE_LANGUAGES = ['English', '简体中文']; +const HIDE_UNIFIED_FOOTER_LOCALE = process.env['GATSBY_HIDE_UNIFIED_FOOTER_LOCALE'] === 'true'; +const DocumentBody = (props) => { const { location, pageContext: { page, slug, template }, @@ -80,17 +81,25 @@ const DocumentBody = (props) => { // A workaround to remove the other locale options. if (!HIDE_UNIFIED_FOOTER_LOCALE) { const footer = document.getElementById('footer-container'); - const footerUlElement = footer?.querySelector('ul'); + const footerUlElement = footer?.querySelector('ul[role=listbox]'); + if (footerUlElement) { // For DOP-4060 we only want to support English and Simple Chinese (for now) - const en = footerUlElement.firstChild; - const simpleChinese = footerUlElement.lastChild; + const children = Array.from(footerUlElement.children).reduce((accum, child) => { + if (AVAILABLE_LANGUAGES.includes(child.innerText)) { + accum.push(child); + } + + return accum; + }, []); + footerUlElement.innerHTML = null; - footerUlElement.appendChild(en); - footerUlElement.appendChild(simpleChinese); + children.forEach((child) => { + footerUlElement.appendChild(child); + }); } } - }, [HIDE_UNIFIED_FOOTER_LOCALE]); + }, []); const initialization = () => { const pageNodes = getNestedValue(['children'], page) || []; From c58679996a06128466e9e7f89a1776f36d0cf21a Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Mon, 2 Oct 2023 15:43:36 -0400 Subject: [PATCH 7/8] :ok_hand: DOP-4060 makes changes to make language selector more dynamic and some PR feedback --- src/components/DocumentBody.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js index d8cbdaeb3..e72e0d70c 100644 --- a/src/components/DocumentBody.js +++ b/src/components/DocumentBody.js @@ -68,8 +68,8 @@ const getAnonymousFootnoteReferences = (index, numAnonRefs) => { return index > numAnonRefs ? [] : [`id${index + 1}`]; }; -const AVAILABLE_LANGUAGES = ['English', '简体中文']; const HIDE_UNIFIED_FOOTER_LOCALE = process.env['GATSBY_HIDE_UNIFIED_FOOTER_LOCALE'] === 'true'; +const AVAILABLE_LANGUAGES = ['English', '简体中文']; const DocumentBody = (props) => { const { @@ -82,19 +82,17 @@ const DocumentBody = (props) => { if (!HIDE_UNIFIED_FOOTER_LOCALE) { const footer = document.getElementById('footer-container'); const footerUlElement = footer?.querySelector('ul[role=listbox]'); - if (footerUlElement) { // For DOP-4060 we only want to support English and Simple Chinese (for now) - const children = Array.from(footerUlElement.children).reduce((accum, child) => { - if (AVAILABLE_LANGUAGES.includes(child.innerText)) { - accum.push(child); + const availableOptions = Array.from(footerUlElement.childNodes).reduce((accumulator, child) => { + if (AVAILABLE_LANGUAGES.includes(child.textContent)) { + accumulator.push(child); } - - return accum; + return accumulator; }, []); footerUlElement.innerHTML = null; - children.forEach((child) => { + availableOptions.forEach((child) => { footerUlElement.appendChild(child); }); } From 82394ef63afb31ad084669b7e6a69d34a6b4bea5 Mon Sep 17 00:00:00 2001 From: Caesar Bell Date: Tue, 3 Oct 2023 13:09:51 -0400 Subject: [PATCH 8/8] Update src/components/DocumentBody.js Co-authored-by: rayangler <27821750+rayangler@users.noreply.github.com> --- src/components/DocumentBody.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js index e72e0d70c..118d27d5e 100644 --- a/src/components/DocumentBody.js +++ b/src/components/DocumentBody.js @@ -120,7 +120,7 @@ const DocumentBody = (props) => { const onSelectLocale = (locale) => { const localeHrefMap = { 'zh-cn': 'https://mongodbcom-cdn.website.staging.corp.mongodb.com/zh-cn/docs-qa/', - 'en-us': 'https://mongodbcom-cdn.website.staging.corp.mongodb.com/docs-qa/,', + 'en-us': 'https://mongodbcom-cdn.website.staging.corp.mongodb.com/docs-qa/', }; if (isBrowser) {