Merge branch 'DOP-4616' into DOP-4991-dark-announcement

mongodb · Sep 17, 2024 · 188d672 · 188d672
2 parents 6ab4257 + ff46c6d
commit 188d672
Show file tree

Hide file tree

Showing 44 changed files with 2,364 additions and 1,055 deletions.
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -5,8 +5,9 @@ import { renderToString } from 'react-dom/server';
 import { theme } from './src/theme/docsTheme';
 import EuclidCircularASemiBold from './src/styles/fonts/EuclidCircularA-Semibold-WebXL.woff';
 import redirectBasedOnLang from './src/utils/head-scripts/redirect-based-on-lang';
+import { getHtmlLangFormat } from './src/utils/locale';
 
-export const onRenderBody = ({ setHeadComponents }) => {
+export const onRenderBody = ({ setHeadComponents, setHtmlAttributes }) => {
   const headComponents = [
     // GTM Pathway
     <script
@@ -84,6 +85,10 @@ export const onRenderBody = ({ setHeadComponents }) => {
       />
     );
   }
+  setHtmlAttributes({
+    // Help work with translated content locally; Smartling should handle rewriting the lang
+    lang: process.env.GATSBY_LOCALE ? getHtmlLangFormat(process.env.GATSBY_LOCALE) : 'en',
+  });
   setHeadComponents(headComponents);
 };
 

diff --git a/src/components/ActionBar/SearchInput.js b/src/components/ActionBar/SearchInput.js
@@ -14,6 +14,7 @@ import debounce from '../../utils/debounce';
 import { isBrowser } from '../../utils/is-browser';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
 import { SuspenseHelper } from '../SuspenseHelper';
+import { getCurrLocale } from '../../utils/locale';
 import { searchIconStyling, searchInputStyling, StyledInputContainer } from './styles';
 import { ShortcutIcon, SparkleIcon } from './SparkIcon';
 const Chatbot = lazy(() => import('mongodb-chatbot-ui'));
@@ -60,6 +61,8 @@ const SearchInput = ({ className, slug }) => {
   const [selectedOption, setSelectedOption] = useState(0);
   const [mobileSearchActive, setMobileSearchActive] = useState(false);
   const { search } = useLocation();
+  const locale = getCurrLocale();
+  const isEnglish = locale === 'en-us';
 
   useBackdropClick(
     () => {
@@ -80,24 +83,27 @@ const SearchInput = ({ className, slug }) => {
     return () => debounced();
   }, [searchValue]);
 
-  const keyPressHandler = useCallback(async (event) => {
-    // cmd+k or ctrl+k focuses search bar,
-    // unless already focused on an input field
-    const holdingCtrlCmd = (navigator.userAgent.includes('Mac') && event.metaKey) || event.ctrlKey;
-    if (holdingCtrlCmd && event.key === 'k' && document.activeElement.tagName.toLowerCase() !== 'input') {
-      event.preventDefault();
-      inputRef.current?.focus();
-      return;
-    }
+  const keyPressHandler = useCallback(
+    async (event) => {
+      // cmd+k or ctrl+k focuses search bar,
+      // unless already focused on an input field
+      const holdingCtrlCmd = (navigator.userAgent.includes('Mac') && event.metaKey) || event.ctrlKey;
+      if (holdingCtrlCmd && event.key === 'k' && document.activeElement.tagName.toLowerCase() !== 'input') {
+        event.preventDefault();
+        inputRef.current?.focus();
+        return;
+      }
 
-    // if currently focused on search input,
-    // activates the chatbot modal
-    if (event.target.isSameNode(inputRef.current) && event.key === '/') {
-      event.preventDefault();
-      setIsOpen(false);
-      return menuRef.current?.select(1);
-    }
-  }, []);
+      // if currently focused on search input and on English site (therefore, chatbot is an option),
+      // activates the chatbot modal
+      if (event.target.isSameNode(inputRef.current) && event.key === '/' && isEnglish) {
+        event.preventDefault();
+        setIsOpen(false);
+        return menuRef.current?.select(1);
+      }
+    },
+    [isEnglish]
+  );
 
   // adding keyboard shortcuts document wide
   useEffect(() => {
@@ -164,7 +170,7 @@ const SearchInput = ({ className, slug }) => {
       }
 
       case keyMap.ArrowDown: {
-        if (isOpen) {
+        if (isOpen && isEnglish) {
           setSelectedOption((selectedOption + 1) % 2);
           inputRef.current?.focus();
           e.preventDefault();
@@ -173,7 +179,7 @@ const SearchInput = ({ className, slug }) => {
       }
 
       case keyMap.ArrowUp: {
-        if (isOpen) {
+        if (isOpen && isEnglish) {
           setSelectedOption(Math.abs(selectedOption - (1 % 2)));
           inputRef.current?.focus();
           e.preventDefault();

diff --git a/src/components/ActionBar/SearchMenu.js b/src/components/ActionBar/SearchMenu.js
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import { useAllDocsets } from '../../hooks/useAllDocsets';
 import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import { assertTrailingSlash } from '../../utils/assert-trailing-slash';
-import { localizePath } from '../../utils/locale';
+import { getCurrLocale, localizePath } from '../../utils/locale';
 import { reportAnalytics } from '../../utils/report-analytics';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
 import { suggestionStyling } from './styles';
@@ -22,6 +22,7 @@ const SearchMenu = forwardRef(function SearchMenu({ searchValue, searchBoxRef, i
   const { project } = useSnootyMetadata();
   const docsets = useAllDocsets();
   const { snootyEnv } = useSiteMetadata();
+  const locale = getCurrLocale();
 
   // get search url for staging and prod environments
   // all other environments will fall back to prod
@@ -83,33 +84,36 @@ const SearchMenu = forwardRef(function SearchMenu({ searchValue, searchBoxRef, i
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
+  const searchOptions = useMemo(() => {
+    const useChatbot = !!conversation.conversationId && locale === 'en-us';
+    return SEARCH_SUGGESTIONS.slice(0, useChatbot ? SEARCH_SUGGESTIONS.length : 1);
+  }, [conversation, locale]);
+
   return (
     <>
       <SearchResultsMenu open={isOpen} refEl={searchBoxRef} ref={menuRef}>
-        {SEARCH_SUGGESTIONS.slice(0, !conversation.conversationId ? 1 : SEARCH_SUGGESTIONS.length).map(
-          (suggestion, i) => {
-            const { copy } = suggestion;
-            const isChatbot = i === 1;
-            return (
-              <SearchResult
-                className={cx(suggestionStyling({ copy }))}
-                key={`result-${i}`}
-                id={`result-${i}`}
-                onClick={async () => handleSearchResultClick(i === 1)}
-                highlighted={selectedOption === i}
-              >
-                {!isChatbot && <>{searchValue}</>}
-                {isChatbot && (
-                  <>
-                    {suggestion.icon}
-                    {searchValue}
-                    {suggestion.shortcutIcon}
-                  </>
-                )}
-              </SearchResult>
-            );
-          }
-        )}
+        {searchOptions.map((suggestion, i) => {
+          const { copy } = suggestion;
+          const isChatbot = i === 1;
+          return (
+            <SearchResult
+              className={cx(suggestionStyling({ copy }))}
+              key={`result-${i}`}
+              id={`result-${i}`}
+              onClick={async () => handleSearchResultClick(i === 1)}
+              highlighted={selectedOption === i}
+            >
+              {!isChatbot && <>{searchValue}</>}
+              {isChatbot && (
+                <>
+                  {suggestion.icon}
+                  {searchValue}
+                  {suggestion.shortcutIcon}
+                </>
+              )}
+            </SearchResult>
+          );
+        })}
       </SearchResultsMenu>
       <ModalView
         inputBottomText={

diff --git a/src/components/ComponentFactory.js b/src/components/ComponentFactory.js
@@ -61,6 +61,7 @@ import Subscript from './Subscript';
 import SubstitutionReference from './SubstitutionReference';
 import Superscript from './Superscript';
 import Tabs from './Tabs';
+import TabSelectors from './Tabs/TabSelectors';
 import Target from './Target';
 import Text from './Text';
 import Time from './Time';
@@ -88,7 +89,6 @@ const IGNORED_NAMES = new Set([
   'raw',
   'short-description',
   'tabs-pillstrip',
-  'tabs-selector',
   'toctree',
   'meta',
   'facet',
@@ -183,6 +183,7 @@ const componentMap = {
   strong: Strong,
   substitution_reference: SubstitutionReference,
   tabs: Tabs,
+  'tabs-selector': TabSelectors,
   target: Target,
   text: Text,
   time: Time,

diff --git a/src/components/Contents/index.js b/src/components/Contents/index.js
@@ -1,23 +1,15 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { theme } from '../../theme/docsTheme';
 import { formatText } from '../../utils/format-text';
 import { ContentsContext } from './contents-context';
 import ContentsList from './ContentsList';
 import ContentsListItem from './ContentsListItem';
 
-const StyledContents = styled('div')`
-  @media ${theme.screenSize.largeAndUp} {
-    display: ${(props) => (props.displayOnDesktopOnly ? '' : 'none')};
-  }
-`;
-
 const formatTextOptions = {
   literalEnableInline: true,
 };
 
-const Contents = ({ displayOnDesktopOnly }) => {
+const Contents = ({ className }) => {
   const { activeHeadingId, headingNodes, showContentsComponent } = useContext(ContentsContext);
 
   if (headingNodes.length === 0 || !showContentsComponent) {
@@ -27,7 +19,7 @@ const Contents = ({ displayOnDesktopOnly }) => {
   const label = 'On this page';
 
   return (
-    <StyledContents displayOnDesktopOnly={displayOnDesktopOnly}>
+    <div className={className}>
       <ContentsList label={label}>
         {headingNodes.map(({ depth, id, title }) => {
           // Depth of heading nodes refers to their depth in the AST
@@ -39,12 +31,12 @@ const Contents = ({ displayOnDesktopOnly }) => {
           );
         })}
       </ContentsList>
-    </StyledContents>
+    </div>
   );
 };
 
 Contents.propTypes = {
-  displayOnDesktopOnly: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 export default Contents;
diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js
@@ -1,7 +1,6 @@
 import React, { useState, lazy } from 'react';
 import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
-import { Global, css } from '@emotion/react';
 import { ImageContextProvider } from '../context/image-context';
 import { usePresentationMode } from '../hooks/use-presentation-mode';
 import { useCanonicalUrl } from '../hooks/use-canonical-url';
@@ -11,11 +10,11 @@ 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 { getCurrentLocaleFontFamilyValue } from '../utils/locale';
 import { getSiteTitle } from '../utils/get-site-title';
 import { PageContext } from '../context/page-context';
 import { useBreadcrumbs } from '../hooks/use-breadcrumbs';
 import { isBrowser } from '../utils/is-browser';
+import { TEMPLATE_CONTAINER_ID } from '../constants';
 import SEO from './SEO';
 import FootnoteContext from './Footnote/footnote-context';
 import ComponentFactory from './ComponentFactory';
@@ -79,12 +78,11 @@ const getAnonymousFootnoteReferences = (index, numAnonRefs) => {
   return index > numAnonRefs ? [] : [`id${index + 1}`];
 };
 
-const fontFamily = getCurrentLocaleFontFamilyValue();
-
 const DocumentBody = (props) => {
   const { data, pageContext } = props;
   const page = data?.page?.ast;
   const { slug, template, repoBranches } = pageContext;
+  const tabsMainColumn = page?.options?.['tabs-selector-position'] === 'main';
 
   const initialization = () => {
     const pageNodes = getNestedValue(['children'], page) || [];
@@ -141,8 +139,8 @@ const DocumentBody = (props) => {
         <InstruqtProvider hasLabDrawer={page?.options?.instruqt}>
           <ImageContextProvider images={props.data?.pageImage?.images ?? []}>
             <FootnoteContext.Provider value={{ footnotes }}>
-              <PageContext.Provider value={{ page, template, slug }}>
-                <div id="template-container">
+              <PageContext.Provider value={{ page, template, slug, options: page?.options, tabsMainColumn }}>
+                <div id={TEMPLATE_CONTAINER_ID}>
                   <Template {...props} useChatbot={useChatbot}>
                     {pageNodes.map((child, index) => (
                       <ComponentFactory
@@ -168,13 +166,6 @@ const DocumentBody = (props) => {
           </SuspenseHelper>
         </div>
       )}
-      <Global
-        styles={css`
-          #template-container *:not(:is(code, code *)) {
-            font-family: ${fontFamily};
-          }
-        `}
-      />
     </>
   );
 };

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { UnifiedFooter } from '@mdb/consistent-nav';
-import { AVAILABLE_LANGUAGES, getCurrLocale, onSelectLocale } from '../utils/locale';
+import { getAvailableLanguages, getCurrLocale, onSelectLocale } from '../utils/locale';
 
 const Footer = () => {
-  const enabledLocales = AVAILABLE_LANGUAGES.map((language) => language.localeCode);
+  const enabledLocales = getAvailableLanguages().map((language) => language.localeCode);
   return <UnifiedFooter onSelectLocale={onSelectLocale} locale={getCurrLocale()} enabledLocales={enabledLocales} />;
 };
 

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 import { UnifiedNav } from '@mdb/consistent-nav';
 import SiteBanner from '../Banner/SiteBanner';
 import { theme } from '../../theme/docsTheme';
-import { AVAILABLE_LANGUAGES, getCurrLocale, onSelectLocale } from '../../utils/locale';
+import { getAvailableLanguages, getCurrLocale, onSelectLocale } from '../../utils/locale';
 import { HeaderContext } from './header-context';
 
 const StyledHeaderContainer = styled.header(
@@ -19,7 +19,7 @@ const StyledHeaderContainer = styled.header(
 const Header = ({ eol, template }) => {
   const unifiedNavProperty = 'DOCS';
 
-  const enabledLocales = AVAILABLE_LANGUAGES.map((language) => language.localeCode);
+  const enabledLocales = getAvailableLanguages().map((language) => language.localeCode);
   const { bannerContent } = useContext(HeaderContext);
 
   return (