From 47340c6c71689c1ee37a2db927d0ff707dce9b2f Mon Sep 17 00:00:00 2001
From: mmeigs <matt.meigs@mongodb.com>
Date: Mon, 11 Nov 2024 10:37:49 -0500
Subject: [PATCH] DOP-4945: Default tab for drivers tabs (#1301)

---
 src/components/DocumentBody.js     |  2 +-
 src/components/Tabs/tab-context.js | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js
index f30c3678b..b9d097a6b 100644
--- a/src/components/DocumentBody.js
+++ b/src/components/DocumentBody.js
@@ -136,7 +136,7 @@ const DocumentBody = (props) => {
 
   return (
     <>
-      <TabProvider selectors={page?.options?.selectors}>
+      <TabProvider selectors={page?.options?.selectors} defaultTabs={page?.options?.default_tabs}>
         <InstruqtProvider hasLabDrawer={page?.options?.instruqt}>
           <ImageContextProvider images={props.data?.pageImage?.images ?? []}>
             <FootnoteContext.Provider value={{ footnotes }}>
diff --git a/src/components/Tabs/tab-context.js b/src/components/Tabs/tab-context.js
index 24aac1aa3..8bf393f18 100644
--- a/src/components/Tabs/tab-context.js
+++ b/src/components/Tabs/tab-context.js
@@ -28,14 +28,17 @@ const reducer = (prevState, newState) => {
 };
 
 // Helper fn to get default tabs for fallback (when no local storage found).
-// If drivers tabs, return 'nodejs' if found.
+// For drivers tabs,
+// 1. return default tab if available
+// 2. return 'nodejs' if found
 // Otherwise, return first choice.
-const getDefaultTabs = (choicesPerSelector) =>
+const getDefaultTabs = (choicesPerSelector, defaultTabs) =>
   Object.keys(choicesPerSelector || {}).reduce((res, selectorKey) => {
-    const nodeOptionIdx = choicesPerSelector[selectorKey].findIndex((tab) => tab.value === 'nodejs');
+    const defaultTabId = defaultTabs[selectorKey] ?? 'nodejs';
+    const defaultOptionIdx = choicesPerSelector[selectorKey].findIndex((tab) => tab.value === defaultTabId);
     // NOTE: default tabs should be specified here
-    if (selectorKey === 'drivers' && nodeOptionIdx > -1) {
-      res[selectorKey] = 'nodejs';
+    if (selectorKey === 'drivers' && defaultOptionIdx > -1) {
+      res[selectorKey] = defaultTabId;
     } else {
       res[selectorKey] = choicesPerSelector[selectorKey][0].value;
     }
@@ -53,7 +56,7 @@ const getLocalTabs = (localTabs, selectors) =>
     return res;
   }, {});
 
-const TabProvider = ({ children, selectors = {} }) => {
+const TabProvider = ({ children, selectors = {}, defaultTabs = {} }) => {
   // init value to {} to match server and client side
   const [activeTabs, setActiveTab] = useReducer(reducer, {});
   const { setActiveSelectorIds } = useContext(ContentsContext);
@@ -87,7 +90,7 @@ const TabProvider = ({ children, selectors = {} }) => {
       });
       return res;
     }, {});
-    const defaultRes = getDefaultTabs(choicesPerSelector);
+    const defaultRes = getDefaultTabs(choicesPerSelector, defaultTabs);
     // get local active tabs and set as active tabs
     // if they exist on page.
     // otherwise, defaults will take precedence