From 506fb823dcabcacb96bc34a55071d03c98c3bb7f Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Mon, 19 Aug 2024 16:55:05 -0400
Subject: [PATCH 1/8] get customDisplay showing on selected version

---
 website/dbt-versions.js                       |   3 +-
 website/src/stores/VersionContext.js          |   5 +-
 .../theme/NavbarItem/DropdownNavbarItem.js    | 113 ++++++++++--------
 3 files changed, 71 insertions(+), 50 deletions(-)

diff --git a/website/dbt-versions.js b/website/dbt-versions.js
index 7430450da50..4e1c2c2162e 100644
--- a/website/dbt-versions.js
+++ b/website/dbt-versions.js
@@ -2,6 +2,7 @@ exports.versions = [
   {
     version: "1.9",
     isPrerelease: true, 
+    customDisplay: "dbt Cloud"
   },
   {
     version: "1.8",
@@ -169,4 +170,4 @@ exports.versionedCategories = [
     "category": "Build your metrics",
     "firstVersion": "1.6",
   }
-]
\ No newline at end of file
+]
diff --git a/website/src/stores/VersionContext.js b/website/src/stores/VersionContext.js
index a87ceb3e429..bedf65cd1bd 100644
--- a/website/src/stores/VersionContext.js
+++ b/website/src/stores/VersionContext.js
@@ -66,9 +66,12 @@ export const VersionContextProvider = ({ value = "", children }) => {
 
   // Determine isPrerelease status + End of Life date for current version
   const currentVersion = versions.find(ver => ver.version === version)
-  if(currentVersion)
+  if(currentVersion) {
+    console.log("currentVersion", currentVersion);
     context.EOLDate = currentVersion.EOLDate
     context.isPrerelease = currentVersion?.isPrerelease
+    context.customDisplay = currentVersion?.customDisplay;
+  }
   
   // Get latest stable release
   const latestStableRelease = versions.find(ver => !ver?.isPrerelease)
diff --git a/website/src/theme/NavbarItem/DropdownNavbarItem.js b/website/src/theme/NavbarItem/DropdownNavbarItem.js
index 8c29daeac21..54ca495a6a6 100644
--- a/website/src/theme/NavbarItem/DropdownNavbarItem.js
+++ b/website/src/theme/NavbarItem/DropdownNavbarItem.js
@@ -79,73 +79,90 @@ function DropdownNavbarItemDesktop({
     setShowVersionDropdown(true)
   }, [showVersionDropdown])
 
+  console.log("versionContext", versionContext);
+  
   return (
     <div
       ref={dropdownRef}
-      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
-        'dropdown--right': position === 'right',
-        'dropdown--show': showDropdown,
-        'dropdown--version--hide': !showVersionDropdown,
-      })}>
+      className={clsx("navbar__item", "dropdown", "dropdown--hoverable", {
+        "dropdown--right": position === "right",
+        "dropdown--show": showDropdown,
+        "dropdown--version--hide": !showVersionDropdown,
+      })}
+    >
       <NavbarNavLink
         aria-haspopup="true"
         aria-expanded={showDropdown}
         role="button"
-        href={props.to ? undefined : '#'}
-        className={clsx('navbar__link', className)}
+        href={props.to ? undefined : "#"}
+        className={clsx("navbar__link", className)}
         {...props}
         onClick={props.to ? undefined : (e) => e.preventDefault()}
         onKeyDown={(e) => {
-          if (e.key === 'Enter') {
+          if (e.key === "Enter") {
             e.preventDefault();
             setShowDropdown(!showDropdown);
           }
         }}
-        label={className === "nav-versioning" ? `v${versionContext.version} ${versionContext?.isPrerelease ? "(Beta)" : ""}` : props.children ?? props.label}
+        label={
+          className === "nav-versioning"
+            ? `${versionContext?.customDisplay ? `${versionContext.customDisplay}` : `v${versionContext.version} ${versionContext?.isPrerelease ? "(Beta)" : ""}`}`
+            : props.children ?? props.label
+        }
       >
         {props.children ?? props.label}
       </NavbarNavLink>
       <ul className="dropdown__menu">
-        {items.map((childItemProps, i) => (
-          <React.Fragment key={i}>
-            {className === "nav-versioning" ? (
-              <li>
-                <a
-                  className='dropdown__link nav-versioning-dropdown__link'
-                  onClick={(e) => {
-                    handleVersionMenuClick()
-                    versionContext.updateVersion(e)
-                  }
-                  }
-                >{childItemProps.label}
-                  {versions.find((version) => (childItemProps.label == version.version))?.isPrerelease && " (Beta)"}</a>
-              </li>
-            ) : (
-              <NavbarItem
-                isDropdownItem
-                onKeyDown={(e) => {
-                  if (i === items.length - 1 && e.key === 'Tab') {
-                    e.preventDefault();
-                    setShowDropdown(false);
-                    const nextNavbarItem = dropdownRef.current.nextElementSibling;
-                    if (nextNavbarItem) {
-                      const targetItem =
-                        nextNavbarItem instanceof HTMLAnchorElement
-                          ? nextNavbarItem
-                          : // Next item is another dropdown; focus on the inner
-                          // anchor element instead so there's outline
-                          nextNavbarItem.querySelector('a');
-                      targetItem.focus();
+        {items.map((childItemProps, i) => {
+          console.log("childItemProps", childItemProps);
+          const thisVersion = versions.find(
+            (version) => childItemProps.label == version.version
+          );
+          const versionDisplay = `${childItemProps.label} ${thisVersion?.isPrerelease ? " (Beta)" : ""}`;
+                    
+          return (
+            <React.Fragment key={i}>
+              {className === "nav-versioning" ? (
+                <li>
+                  <a
+                    className="dropdown__link nav-versioning-dropdown__link"
+                    onClick={(e) => {
+                      handleVersionMenuClick();
+                      versionContext.updateVersion(e);
+                    }}
+                  >
+                    {versionDisplay}
+                  </a>
+                </li>
+              ) : (
+                <NavbarItem
+                  isDropdownItem
+                  onKeyDown={(e) => {
+                    if (i === items.length - 1 && e.key === "Tab") {
+                      e.preventDefault();
+                      setShowDropdown(false);
+                      const nextNavbarItem =
+                        dropdownRef.current.nextElementSibling;
+                      if (nextNavbarItem) {
+                        const targetItem =
+                          nextNavbarItem instanceof HTMLAnchorElement
+                            ? nextNavbarItem
+                            : // Next item is another dropdown; focus on the inner
+                              // anchor element instead so there's outline
+                              nextNavbarItem.querySelector("a");
+                        targetItem.focus();
+                      }
                     }
-                  }
-                }}
-                activeClassName="dropdown__link--active"
-                {...childItemProps}
-                key={i}
-              />
-            )}
-          </React.Fragment>
-        ))}
+                  }}
+                  activeClassName="dropdown__link--active"
+                  {...childItemProps}
+                  key={i}
+                />
+              )}
+            </React.Fragment>
+          );
+        } 
+        )}
       </ul>
     </div>
   );

From bdd3fc5fb37a7697b230e724772fac126d40faed Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Tue, 20 Aug 2024 15:21:55 -0400
Subject: [PATCH 2/8] show custom display name if set for desktop nav

---
 website/src/theme/NavbarItem/DropdownNavbarItem.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/theme/NavbarItem/DropdownNavbarItem.js b/website/src/theme/NavbarItem/DropdownNavbarItem.js
index 54ca495a6a6..4e8eeccfa5a 100644
--- a/website/src/theme/NavbarItem/DropdownNavbarItem.js
+++ b/website/src/theme/NavbarItem/DropdownNavbarItem.js
@@ -114,11 +114,10 @@ function DropdownNavbarItemDesktop({
       </NavbarNavLink>
       <ul className="dropdown__menu">
         {items.map((childItemProps, i) => {
-          console.log("childItemProps", childItemProps);
           const thisVersion = versions.find(
             (version) => childItemProps.label == version.version
           );
-          const versionDisplay = `${childItemProps.label} ${thisVersion?.isPrerelease ? " (Beta)" : ""}`;
+          const versionDisplay = thisVersion?.customDisplay ? thisVersion.customDisplay : `${childItemProps.label} ${thisVersion?.isPrerelease ? " (Beta)" : ""}`;
                     
           return (
             <React.Fragment key={i}>
@@ -126,6 +125,7 @@ function DropdownNavbarItemDesktop({
                 <li>
                   <a
                     className="dropdown__link nav-versioning-dropdown__link"
+                    data-dbt-version={childItemProps.label}
                     onClick={(e) => {
                       handleVersionMenuClick();
                       versionContext.updateVersion(e);

From 4da24881810de17b60ae73d7d8e81b6e98bb90bb Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Tue, 20 Aug 2024 16:44:00 -0400
Subject: [PATCH 3/8] add data attribute to store version rather than storing
 in the nav text

---
 website/src/stores/VersionContext.js          |  8 +++-
 .../theme/NavbarItem/DropdownNavbarItem.js    | 40 +++++++++++++------
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/website/src/stores/VersionContext.js b/website/src/stores/VersionContext.js
index bedf65cd1bd..c908dc1d566 100644
--- a/website/src/stores/VersionContext.js
+++ b/website/src/stores/VersionContext.js
@@ -51,9 +51,13 @@ export const VersionContextProvider = ({ value = "", children }) => {
     if(!e.target)
       return
       
-    const vRegex = /(?:v)?(\d+(\.\d+)*)/ // Regex that will parse out the version number, even if there is/isn't a 'v' in front of version number and a '(Beta)' afterwards.
-    const versionValue = e.target.text.match(vRegex)[1]
+    
+    // const vRegex = /(?:v)?(\d+(\.\d+)*)/ // Regex that will parse out the version number, even if there is/isn't a 'v' in front of version number and a '(Beta)' afterwards.
+    // const versionValue = e.target.text.match(vRegex)[1]
 
+    const versionValue = e.target?.dataset?.dbtVersion
+    console.log('versionValue', versionValue)
+    
     versionValue &&
       setVersion(versionValue)
       window.localStorage.setItem('dbtVersion', versionValue)
diff --git a/website/src/theme/NavbarItem/DropdownNavbarItem.js b/website/src/theme/NavbarItem/DropdownNavbarItem.js
index 4e8eeccfa5a..4c38cffc092 100644
--- a/website/src/theme/NavbarItem/DropdownNavbarItem.js
+++ b/website/src/theme/NavbarItem/DropdownNavbarItem.js
@@ -188,42 +188,56 @@ function DropdownNavbarItemMobile({
   }, [localPathname, containsActive, setCollapsed]);
   return (
     <li
-      className={clsx('menu__list-item', {
-        'menu__list-item--collapsed': collapsed,
-      })}>
+      className={clsx("menu__list-item", {
+        "menu__list-item--collapsed": collapsed,
+      })}
+    >
       <NavbarNavLink
         role="button"
         className={clsx(
-          'menu__link menu__link--sublist menu__link--sublist-caret',
-          className,
+          "menu__link menu__link--sublist menu__link--sublist-caret",
+          className
         )}
         {...props}
         onClick={(e) => {
           e.preventDefault();
           toggleCollapsed();
         }}
-        label={className === "nav-versioning" ? `v${versionContext.version} ${versionContext.isPrerelease ? "(Beta)" : ""}` : props.children ?? props.label}
+        label={
+          className === "nav-versioning"
+            ? `${versionContext?.customDisplay ? `${versionContext.customDisplay}` : `v${versionContext.version} ${versionContext?.isPrerelease ? "(Beta)" : ""}`}`
+            : props.children ?? props.label
+        }
       >
         {props.children ?? props.label}
       </NavbarNavLink>
       <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
         {items.map((childItemProps, i) => {
-          childItemProps.label = versions.find((version) => (childItemProps.label == version.version))?.isPrerelease ? `${childItemProps.label} (Beta)` : `${childItemProps.label}`;
+          const thisVersion = versions.find(
+            (version) => childItemProps.label == version.version
+          );
+          const versionDisplay = thisVersion?.customDisplay
+            ? thisVersion.customDisplay
+            : `${childItemProps.label} ${thisVersion?.isPrerelease ? " (Beta)" : ""}`;
+
+          // TODO: issue here setting label to custom display
+          childItemProps.label = versionDisplay;
           return (
             <NavbarItem
               mobile
               isDropdownItem
-              onClick={className === "nav-versioning" 
-                ? (e) => versionContext.updateVersion(e)
-                : onClick
+              data-dbt-version={childItemProps.label}
+              onClick={
+                className === "nav-versioning"
+                  ? (e) => versionContext.updateVersion(e)
+                  : onClick
               }
               activeClassName="menu__link--active"
               {...childItemProps}
               key={i}
             />
-          )
-        } 
-        )}
+          );
+        })}
       </Collapsible>
     </li>
   );

From 0d81104dbac2b76b019b2312cdbe3fab2038cee3 Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Mon, 26 Aug 2024 09:52:04 -0400
Subject: [PATCH 4/8] show custom display name for label attr on mobile

---
 website/src/theme/NavbarItem/DropdownNavbarItem.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/website/src/theme/NavbarItem/DropdownNavbarItem.js b/website/src/theme/NavbarItem/DropdownNavbarItem.js
index 4c38cffc092..613925859df 100644
--- a/website/src/theme/NavbarItem/DropdownNavbarItem.js
+++ b/website/src/theme/NavbarItem/DropdownNavbarItem.js
@@ -220,8 +220,6 @@ function DropdownNavbarItemMobile({
             ? thisVersion.customDisplay
             : `${childItemProps.label} ${thisVersion?.isPrerelease ? " (Beta)" : ""}`;
 
-          // TODO: issue here setting label to custom display
-          childItemProps.label = versionDisplay;
           return (
             <NavbarItem
               mobile
@@ -234,6 +232,7 @@ function DropdownNavbarItemMobile({
               }
               activeClassName="menu__link--active"
               {...childItemProps}
+              label={versionDisplay}
               key={i}
             />
           );

From ab65fe10f9383669c44e5a36493e5cea762fce95 Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Mon, 26 Aug 2024 09:54:02 -0400
Subject: [PATCH 5/8] cleanup consoles and comments

---
 website/src/stores/VersionContext.js               | 6 ------
 website/src/theme/NavbarItem/DropdownNavbarItem.js | 2 --
 2 files changed, 8 deletions(-)

diff --git a/website/src/stores/VersionContext.js b/website/src/stores/VersionContext.js
index c908dc1d566..fbda4a2ce8c 100644
--- a/website/src/stores/VersionContext.js
+++ b/website/src/stores/VersionContext.js
@@ -50,13 +50,8 @@ export const VersionContextProvider = ({ value = "", children }) => {
   const updateVersion = (e) => {
     if(!e.target)
       return
-      
-    
-    // const vRegex = /(?:v)?(\d+(\.\d+)*)/ // Regex that will parse out the version number, even if there is/isn't a 'v' in front of version number and a '(Beta)' afterwards.
-    // const versionValue = e.target.text.match(vRegex)[1]
 
     const versionValue = e.target?.dataset?.dbtVersion
-    console.log('versionValue', versionValue)
     
     versionValue &&
       setVersion(versionValue)
@@ -71,7 +66,6 @@ export const VersionContextProvider = ({ value = "", children }) => {
   // Determine isPrerelease status + End of Life date for current version
   const currentVersion = versions.find(ver => ver.version === version)
   if(currentVersion) {
-    console.log("currentVersion", currentVersion);
     context.EOLDate = currentVersion.EOLDate
     context.isPrerelease = currentVersion?.isPrerelease
     context.customDisplay = currentVersion?.customDisplay;
diff --git a/website/src/theme/NavbarItem/DropdownNavbarItem.js b/website/src/theme/NavbarItem/DropdownNavbarItem.js
index 613925859df..dc86692dcac 100644
--- a/website/src/theme/NavbarItem/DropdownNavbarItem.js
+++ b/website/src/theme/NavbarItem/DropdownNavbarItem.js
@@ -78,8 +78,6 @@ function DropdownNavbarItemDesktop({
   useEffect(() => {
     setShowVersionDropdown(true)
   }, [showVersionDropdown])
-
-  console.log("versionContext", versionContext);
   
   return (
     <div

From 9c267d818c774523ec4ff49e9e8dac207a58a001 Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Tue, 27 Aug 2024 13:06:38 -0400
Subject: [PATCH 6/8] add comment for versionValue var

---
 website/src/stores/VersionContext.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/website/src/stores/VersionContext.js b/website/src/stores/VersionContext.js
index fbda4a2ce8c..522994c441b 100644
--- a/website/src/stores/VersionContext.js
+++ b/website/src/stores/VersionContext.js
@@ -51,6 +51,7 @@ export const VersionContextProvider = ({ value = "", children }) => {
     if(!e.target)
       return
 
+    // Get selected version value from `dbt-version` data attribute
     const versionValue = e.target?.dataset?.dbtVersion
     
     versionValue &&

From 0cd0beff6543272ea74f8d346c50baa0de9f2eed Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Tue, 27 Aug 2024 16:11:29 -0400
Subject: [PATCH 7/8] remove demo customDisplay property

---
 website/dbt-versions.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/website/dbt-versions.js b/website/dbt-versions.js
index 4e1c2c2162e..5ad3a3048c5 100644
--- a/website/dbt-versions.js
+++ b/website/dbt-versions.js
@@ -2,7 +2,6 @@ exports.versions = [
   {
     version: "1.9",
     isPrerelease: true, 
-    customDisplay: "dbt Cloud"
   },
   {
     version: "1.8",

From 907a901248fdef69ae0dd263eea19a6c89d7ee66 Mon Sep 17 00:00:00 2001
From: Jason Karlavige <jkarlavige@gmail.com>
Date: Tue, 27 Aug 2024 16:36:21 -0400
Subject: [PATCH 8/8] add type defs to better document available options in
 dbt-versions file

---
 website/dbt-versions.js | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/website/dbt-versions.js b/website/dbt-versions.js
index 5ad3a3048c5..d35968f76a9 100644
--- a/website/dbt-versions.js
+++ b/website/dbt-versions.js
@@ -1,7 +1,20 @@
+/**
+ * Sets the available dbt versions available in the navigation
+ * @type {Array.<{
+ * version: string,
+ * EOLDate: string, 
+ * isPrerelease: boolean, 
+ * customDisplay: string,
+ * }>}
+ * @property {string} version The version number
+ * @property {string} EOLDate "End of Life" date which is used to show the EOL banner
+ * @property {boolean} isPrerelease Boolean used for showing the prerelease banner
+ * @property {string} customDisplay Allows setting a custom display name for the current version
+ */
 exports.versions = [
   {
     version: "1.9",
-    isPrerelease: true, 
+    isPrerelease: true,
   },
   {
     version: "1.8",
@@ -17,6 +30,15 @@ exports.versions = [
   },
 ]
 
+/**
+ * Controls doc page visibility in the sidebar based on the current version
+ * @type {Array.<{
+ * page: string,
+ * lastVersion: string,
+ * }>}
+ * @property {string} page The target page to hide/show in the sidebar
+ * @property {string} lastVersion The last version the page is visible in the sidebar
+ */
 exports.versionedPages = [
   {
     "page": "/reference/resource-configs/target_database",
@@ -160,6 +182,15 @@ exports.versionedPages = [
   }
 ]
 
+/**
+ * Controls doc category visibility in the sidebar based on the current version
+ * @type {Array.<{
+ * category: string,
+ * firstVersion: string,
+ * }>}
+ * @property {string} category The target category to hide/show in the sidebar
+ * @property {string} firstVersion The first version the category is visible in the sidebar
+ */
 exports.versionedCategories = [
   {
     "category": "Model governance",