DOP-3424: "On this page" subnav incorrectly displays headings for all language tabs

src/components/Contents/contents-context.js

@@ -6,23 +6,23 @@ const defaultContextValue = {
   activeHeadingId: null,
   headingNodes: [],
   showContentsComponent: true,
-  activeSelectorId: null,
-  setActiveSelectorId: () => {},
+  activeSelectorIds: {},
+  setActiveSelectorIds: () => {},
 };
 
 const ContentsContext = React.createContext(defaultContextValue);
 
 const ContentsProvider = ({ children, headingNodes = [] }) => {
   const activeHeadingId = useActiveHeading(headingNodes);
-  const [activeSelectorId, setActiveSelectorId] = useState(null);
+  const [activeSelectorIds, setActiveSelectorIds] = useState({});
 
   const { project } = useSnootyMetadata();
   // The guides site is the only site that takes advantage of headings, but never uses the Contents component
   const showContentsComponent = project !== 'guides';
 
   return (
     <ContentsContext.Provider
-      value={{ activeHeadingId, headingNodes, showContentsComponent, activeSelectorId, setActiveSelectorId }}
+      value={{ activeHeadingId, headingNodes, showContentsComponent, activeSelectorIds, setActiveSelectorIds }}
     >
       {children}
     </ContentsContext.Provider>

src/components/Contents/index.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { isEmpty } from 'lodash';
 import PropTypes from 'prop-types';
 import { formatText } from '../../utils/format-text';
 import { ContentsContext } from './contents-context';
@@ -9,13 +10,44 @@ const formatTextOptions = {
   literalEnableInline: true,
 };
 
+/* recursively go through selector ids defined by parser
+everything in headingSelectorIds must be present in activeSelectorIds
+activeSelectorIds structure:
+{
+  methodSelector?: str,
+  tab?: [str],
+}
+headingSelectorIds structure (comes from parser):
+{
+  method-option | tab: str,
+  children?: {
+    tab: str,
+    children?: {
+      tab: str,
+      ...
+    }
+  }
+} 
+*/
+const isHeadingVisible = (headingSelectorIds, activeSelectorIds) => {
+  if (!headingSelectorIds || isEmpty(headingSelectorIds)) return true;
+  const headingsMethodParent = headingSelectorIds['method-option'];
+  const headingsTabParent = headingSelectorIds['tab'];
+  if (
+    (headingsMethodParent && headingsMethodParent !== activeSelectorIds.methodSelector) ||
+    (headingsTabParent && !activeSelectorIds.tab?.includes(headingsTabParent))
+  ) {
+    return false;
+  }
+  return isHeadingVisible(headingSelectorIds.children ?? {}, activeSelectorIds);
+};
+
 const Contents = ({ className }) => {
-  const { activeHeadingId, headingNodes, showContentsComponent, activeSelectorId } = useContext(ContentsContext);
+  const { activeHeadingId, headingNodes, showContentsComponent, activeSelectorIds } = useContext(ContentsContext);
 
-  // Don't filter if selector_id is null/undefined
-  const filteredNodes = headingNodes.filter(
-    (headingNode) => !headingNode.selector_id || headingNode.selector_id === activeSelectorId
-  );
+  const filteredNodes = headingNodes.filter((headingNode) => {
+    return isHeadingVisible(headingNode.selector_ids, activeSelectorIds);
+  });
 
   if (filteredNodes.length === 0 || !showContentsComponent) {
     return null;

src/components/MethodSelector/MethodSelector.js

@@ -105,9 +105,10 @@ const hrStyle = css`
 const MethodSelector = ({ nodeData: { children } }) => {
   const optionCount = children.length;
   const [selectedMethod, setSelectedMethod] = useState(children[0]?.options?.id);
-  const { setActiveSelectorId } = useContext(ContentsContext);
+  const { activeSelectorIds, setActiveSelectorIds } = useContext(ContentsContext);
   const [selectedIdx, setSelectedIdx] = useState(0);
 
+  // set on initial load
   // Load method ID saved from last session, if applicable.
   useEffect(() => {
     const savedMethodId = getLocalValue(STORAGE_KEY);
@@ -119,12 +120,12 @@ const MethodSelector = ({ nodeData: { children } }) => {
     if (savedMethodId && validOptions.includes(savedMethodId)) {
       setSelectedMethod(savedMethodId);
       setSelectedIdx(validOptions.indexOf(savedMethodId));
+      if (activeSelectorIds?.methodSelector !== savedMethodId)
+        setActiveSelectorIds({ ...activeSelectorIds, methodSelector: savedMethodId });
+    } else if (activeSelectorIds?.methodSelector !== children[0]?.options?.id) {
+      setActiveSelectorIds({ ...activeSelectorIds, methodSelector: children[0]?.options?.id });
     }
-  }, [children]);
-
-  useEffect(() => {
-    setActiveSelectorId(selectedMethod);
-  }, [selectedMethod, setActiveSelectorId]);
+  }, [activeSelectorIds, setActiveSelectorIds, children]);
 
   return (
     <>
@@ -135,6 +136,7 @@ const MethodSelector = ({ nodeData: { children } }) => {
           onChange={({ target: { defaultValue } }) => {
             const [id, idx] = defaultValue.split('-');
             setSelectedMethod(id);
+            setActiveSelectorIds({ ...activeSelectorIds, methodSelector: id });
             setSelectedIdx(idx);
             setLocalValue(STORAGE_KEY, id);
             reportAnalytics('MethodOptionSelected', {

src/components/Tabs/index.js

@@ -5,11 +5,12 @@ import { Tabs as LeafyTabs, Tab as LeafyTab } from '@leafygreen-ui/tabs';
 import { palette } from '@leafygreen-ui/palette';
 import { CodeProvider } from '../Code/code-context';
 import ComponentFactory from '../ComponentFactory';
+import { HeadingContextProvider, useHeadingContext } from '../../context/heading-context';
 import { theme } from '../../theme/docsTheme';
 import { reportAnalytics } from '../../utils/report-analytics';
 import { getNestedValue } from '../../utils/get-nested-value';
 import { isBrowser } from '../../utils/is-browser';
-import { HeadingContextProvider, useHeadingContext } from '../../context/heading-context';
+import { getLocalValue } from '../../utils/browser-storage';
 import { getPlaintext } from '../../utils/get-plaintext';
 import { TabContext } from './tab-context';
 
@@ -119,6 +120,20 @@ const Tabs = ({ nodeData: { children, options = {} }, page, ...rest }) => {
   const isProductLanding = page?.options?.template === 'product-landing';
   const { lastHeading } = useHeadingContext();
 
+  const initLoad = useRef(false);
+
+  // get non-TabSelector tabs in localstorage
+  useEffect(() => {
+    if (initLoad.current) return;
+    initLoad.current = true;
+
+    const localTabs = getLocalValue('activeTabs');
+    let activeTabIdx = tabIds.indexOf(localTabs?.[tabsetName]);
+    activeTabIdx = activeTabIdx > -1 ? activeTabIdx : 0;
+    setActiveTabIndex(activeTabIdx);
+    setActiveTab({ [tabsetName]: tabIds[activeTabIdx] });
+  }, [setActiveTab, tabIds, tabsetName]);
+
   useEffect(() => {
     const index = tabIds.indexOf(activeTabs[tabsetName]);
     if (index !== -1) {
@@ -128,6 +143,9 @@ const Tabs = ({ nodeData: { children, options = {} }, page, ...rest }) => {
 
   const handleClick = useCallback(
     (index) => {
+      if (activeTab === index) {
+        return;
+      }
       const tabId = tabIds[index];
       const priorAnchorOffset = getPosition(scrollAnchorRef.current).y;
 
@@ -142,7 +160,7 @@ const Tabs = ({ nodeData: { children, options = {} }, page, ...rest }) => {
         window.scrollTo(0, getPosition(scrollAnchorRef.current).y + window.scrollY - priorAnchorOffset);
       }, 40);
     },
-    [setActiveTab, tabIds, tabsetName] // eslint-disable-line react-hooks/exhaustive-deps
+    [activeTab, setActiveTab, tabIds, tabsetName]
   );
 
   return (

src/components/Tabs/tab-context.js

@@ -5,9 +5,11 @@
  * child components to read and update
  */
 
-import React, { useEffect, useReducer, useRef } from 'react';
+import React, { useContext, useEffect, useReducer, useRef } from 'react';
+import { isEmpty } from 'lodash';
 import { getLocalValue, setLocalValue } from '../../utils/browser-storage';
 import { DRIVER_ICON_MAP } from '../icons/DriverIconMap';
+import { ContentsContext } from '../Contents/contents-context';
 import { makeChoices } from './make-choices';
 
 const defaultContextValue = {
@@ -54,14 +56,23 @@ const getLocalTabs = (localTabs, selectors) =>
 const TabProvider = ({ children, selectors = {} }) => {
   // init value to {} to match server and client side
   const [activeTabs, setActiveTab] = useReducer(reducer, {});
+  const { setActiveSelectorIds } = useContext(ContentsContext);
 
   const initLoaded = useRef(false);
 
   useEffect(() => {
     // dont update local value on initial load
     if (!initLoaded.current) return;
     setLocalValue('activeTabs', activeTabs);
-  }, [activeTabs]);
+
+    if (isEmpty(activeTabs)) {
+      return;
+    }
+
+    // on Tab update, update the active selector ids
+    // so headings can be shown/hidden
+    setActiveSelectorIds((activeSelectorIds) => ({ ...activeSelectorIds, tab: Object.values(activeTabs) }));
+  }, [activeTabs, setActiveSelectorIds]);
 
   // initial effect to read from local storage
   // used in an effect to keep SSG HTML consistent