From e07fa95368e20aba84a514a6d3184b526e49c417 Mon Sep 17 00:00:00 2001 From: Matt Shaver <60105315+matthewshaver@users.noreply.github.com> Date: Tue, 21 Jan 2025 18:25:04 -0500 Subject: [PATCH] Adding new version option --- website/dbt-versions.js | 2 +- .../theme/NavbarItem/DropdownNavbarItem.js | 177 +++++++++++------- 2 files changed, 112 insertions(+), 67 deletions(-) diff --git a/website/dbt-versions.js b/website/dbt-versions.js index bee90e3b9ed..c827da97721 100644 --- a/website/dbt-versions.js +++ b/website/dbt-versions.js @@ -20,7 +20,7 @@ exports.versions = [ }, { version: "1.9", - customDisplay: "1.9 (Compatible)", + isCloudCompatible: true, EOLDate: "2025-12-08", }, { diff --git a/website/src/theme/NavbarItem/DropdownNavbarItem.js b/website/src/theme/NavbarItem/DropdownNavbarItem.js index dc86692dcac..0cc1fc4b60a 100644 --- a/website/src/theme/NavbarItem/DropdownNavbarItem.js +++ b/website/src/theme/NavbarItem/DropdownNavbarItem.js @@ -8,18 +8,8 @@ import { import { isSamePath, useLocalPathname } from '@docusaurus/theme-common/internal'; import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'; import NavbarItem from '@theme/NavbarItem'; - -/* dbt Customizations: - * Import VersionsNavbarItem component and context - * Pass versionContext prop into DropdownNavbarItemDesktop or DropdownNavbarItemMobile - * Custom state to handle version dropdown on click - * Show version dropdown on version state change - * Pass versionContext to Comp - * -*/ -// import VersionsNavbarItem from './VersionsNavItem'; import VersionContext from '../../stores/VersionContext'; -import { versions } from '../../../dbt-versions' +import { versions } from '../../../dbt-versions'; function isItemActive(item, localPathname) { if (isSamePath(item.to, localPathname)) { @@ -33,9 +23,11 @@ function isItemActive(item, localPathname) { } return false; } + function containsActiveItems(items, localPathname) { return items.some((item) => isItemActive(item, localPathname)); } + function DropdownNavbarItemDesktop({ items, position, @@ -46,9 +38,12 @@ function DropdownNavbarItemDesktop({ }) { const dropdownRef = useRef(null); const [showDropdown, setShowDropdown] = useState(false); - - // dbt Custom: handle version dropdown state on click const [showVersionDropdown, setShowVersionDropdown] = useState(true); + const [selectedLabel, setSelectedLabel] = useState( + versionContext?.customDisplay + ? versionContext.customDisplay + : `v${versionContext.version} ${versionContext?.isPrerelease ? "(Beta)" : ""}` + ); useEffect(() => { const handleClickOutside = (event) => { @@ -65,20 +60,22 @@ function DropdownNavbarItemDesktop({ }; }, [dropdownRef]); - // dbt Custom: Hide version dropdown on click - // This adds dropdown--version--hide class on line 87 - const handleVersionMenuClick = () => { - setShowVersionDropdown(false) - } + const handleVersionMenuClick = (newLabel) => { + setShowVersionDropdown(false); + setSelectedLabel(newLabel); + }; + + useEffect(() => { + setShowVersionDropdown(true); + }, [showVersionDropdown]); - // Run when showVersionDropdown state changes - // which occurs during version menu item clicked - // This resets version dropdown to original state - // and removes the dropdown--version--hide class + // Ensure the version label doesn't revert if "Cloud (Compatible)" was selected useEffect(() => { - setShowVersionDropdown(true) - }, [showVersionDropdown]) - + if (versionContext?.isCloudCompatible) { + setSelectedLabel("Cloud (Compatible)"); + } + }, [versionContext]); + return (
@@ -113,25 +110,43 @@ function DropdownNavbarItemDesktop({
); } + function DropdownNavbarItemMobile({ items, className, @@ -178,12 +191,24 @@ function DropdownNavbarItemMobile({ const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({ initialState: () => !containsActive, }); - // Expand/collapse if any item active after a navigation + const [selectedLabel, setSelectedLabel] = useState( + versionContext?.customDisplay + ? versionContext.customDisplay + : `v${versionContext.version} ${versionContext?.isPrerelease ? "(Beta)" : ""}` + ); + useEffect(() => { if (containsActive) { setCollapsed(!containsActive); } }, [localPathname, containsActive, setCollapsed]); + + useEffect(() => { + if (versionContext?.isCloudCompatible) { + setSelectedLabel("Cloud (Compatible)"); + } + }, [versionContext]); + return (
  • @@ -212,38 +237,58 @@ function DropdownNavbarItemMobile({ {items.map((childItemProps, i) => { const thisVersion = versions.find( - (version) => childItemProps.label == version.version + (version) => childItemProps.label === version.version ); const versionDisplay = thisVersion?.customDisplay ? thisVersion.customDisplay : `${childItemProps.label} ${thisVersion?.isPrerelease ? " (Beta)" : ""}`; return ( - versionContext.updateVersion(e) - : onClick - } - activeClassName="menu__link--active" - {...childItemProps} - label={versionDisplay} - key={i} - /> + + {thisVersion?.isCloudCompatible && ( + { + setSelectedLabel("Cloud (Compatible)"); + versionContext.updateVersion(e); + } + : onClick + } + activeClassName="menu__link--active" + label="Cloud (Compatible)" + /> + )} + { + setSelectedLabel(versionDisplay); + versionContext.updateVersion(e); + } + : onClick + } + activeClassName="menu__link--active" + {...childItemProps} + label={versionDisplay} + /> + ); })}
    • ); } + export default function DropdownNavbarItem({ mobile = false, ...props }) { const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop; - - // dbt Custom - const versionContext = useContext(VersionContext) + const versionContext = useContext(VersionContext); return ; }