add data attribute to store version rather than storing in the nav text

dbt-labs · Aug 20, 2024 · 4da2488 · 4da2488
1 parent bdd3fc5
commit 4da2488
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git 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
@@ -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>
   );