Add new version drop down feature flag and enhance existing version dropdown (#1361)

* Create initial versions config

* Add new version dropdown feature flag and enhance existing dropdown

* Comment config

* Fix config and representation

* Revert navigation.yml

* Prettier

* Remove console.logs

* Fix tests

* Fix eslint errors

* Prettier

* Remove legacy_versions from assembler 'versions' config draft

* Remove commented code from TableOfContents view

* Remove commented code from VersionDropdown.tsx

* Revert Products.cs changes

* Apply suggestions from code review

Co-authored-by: Martijn Laarman <[email protected]>

* Refactor naming and add comments

* Add more comments

* Fix merge conflicts

---------

Co-authored-by: Martijn Laarman <[email protected]>

Author: reakaleek

src/Elastic.ApiExplorer/Endpoints/EndpointView.cshtml

@@ -12,6 +12,7 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
+		VersionDropdown = null,
 		AllowIndexing = false,
 		CanonicalBaseUrl = null,
 		GoogleTagManager = new GoogleTagManagerConfiguration(),

src/Elastic.ApiExplorer/Landing/LandingView.cshtml

@@ -12,6 +12,7 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
+		VersionDropdown = null,
 		AllowIndexing = false,
 		CanonicalBaseUrl = null,
 		GoogleTagManager = new GoogleTagManagerConfiguration(),

src/Elastic.ApiExplorer/Operations/OperationView.cshtml

@@ -12,6 +12,7 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
+		VersionDropdown = null,
 		AllowIndexing = false,
 		CanonicalBaseUrl = null,
 		GoogleTagManager = new GoogleTagManagerConfiguration(),

src/Elastic.Documentation.Configuration/Assembler/AssemblyConfiguration.cs

@@ -67,6 +67,9 @@ private static TRepository RepositoryDefaults<TRepository>(TRepository r, string
 		return repository;
 	}
 
+	[YamlMember(Alias = "versions")]
+	public Dictionary<string, VersionEntry> Versions { get; set; } = [];
+
 	[YamlMember(Alias = "narrative")]
 	public NarrativeRepository Narrative { get; set; } = new();
 

src/Elastic.Documentation.Configuration/Assembler/VersionEntry.cs

@@ -0,0 +1,19 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using YamlDotNet.Serialization;
+
+namespace Elastic.Documentation.Configuration.Assembler;
+
+public record VersionEntry
+{
+	[YamlMember(Alias = "base")]
+	public string? Base { get; set; }
+
+	[YamlMember(Alias = "current")]
+	public string? Current { get; set; }
+
+	[YamlMember(Alias = "legacy_versions")]
+	public IReadOnlyList<string> LegacyVersions { get; set; } = [];
+}

src/Elastic.Documentation.Configuration/Builder/FeatureFlags.cs

@@ -7,7 +7,7 @@ namespace Elastic.Documentation.Configuration.Builder;
 public class FeatureFlags(Dictionary<string, bool> featureFlags)
 {
 	public bool IsPrimaryNavEnabled => IsEnabled("primary-nav");
-	public bool IsLandingPageEnabled => IsEnabled("landing-page");
+	public bool IsVersionDropdownEnabled => IsEnabled("version-dropdown");
 	private bool IsEnabled(string key)
 	{
 		var envKey = $"FEATURE_{key.ToUpperInvariant().Replace('-', '_')}";

src/Elastic.Documentation.Configuration/Serialization/YamlStaticContext.cs

@@ -14,4 +14,5 @@ namespace Elastic.Documentation.Configuration.Serialization;
 [YamlSerializable(typeof(PublishEnvironment))]
 [YamlSerializable(typeof(GoogleTagManager))]
 [YamlSerializable(typeof(ContentSource))]
+[YamlSerializable(typeof(VersionEntry))]
 public partial class YamlStaticContext;

src/Elastic.Documentation.Site/Assets/main.ts

@@ -6,6 +6,7 @@ import { initNav } from './pages-nav'
 import { initSmoothScroll } from './smooth-scroll'
 import { initTabs } from './tabs'
 import { initTocNav } from './toc-nav'
+import './web-components/VersionDropdown'
 import 'htmx-ext-head-support'
 import 'htmx-ext-preload'
 import 'htmx.org'

src/Elastic.Documentation.Site/Assets/web-components/VersionDropdown.tsx

@@ -0,0 +1,179 @@
+import {
+    EuiButton,
+    EuiContextMenu,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiIcon,
+    EuiPopover,
+    EuiText,
+    useGeneratedHtmlId,
+} from '@elastic/eui'
+import { icon as EuiIconVisualizeApp } from '@elastic/eui/es/components/icon/assets/app_visualize'
+import { icon as EuiIconArrowDown } from '@elastic/eui/es/components/icon/assets/arrow_down'
+import { icon as EuiIconArrowLeft } from '@elastic/eui/es/components/icon/assets/arrow_left'
+import { icon as EuiIconArrowRight } from '@elastic/eui/es/components/icon/assets/arrow_right'
+import { icon as EuiIconCheck } from '@elastic/eui/es/components/icon/assets/check'
+import { icon as EuiIconDocument } from '@elastic/eui/es/components/icon/assets/document'
+import { icon as EuiIconSearch } from '@elastic/eui/es/components/icon/assets/search'
+import { icon as EuiIconTrash } from '@elastic/eui/es/components/icon/assets/trash'
+import { icon as EuiIconUser } from '@elastic/eui/es/components/icon/assets/user'
+import { icon as EuiIconWrench } from '@elastic/eui/es/components/icon/assets/wrench'
+import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon'
+import {
+    EuiContextMenuPanelDescriptor,
+    EuiContextMenuPanelItemDescriptor,
+} from '@elastic/eui/src/components/context_menu/context_menu'
+import { css } from '@emotion/react'
+import r2wc from '@r2wc/react-to-web-component'
+import * as React from 'react'
+import { useState } from 'react'
+
+// One or more icons are passed in as an object of iconKey (string): IconComponent
+appendIconComponentCache({
+    arrowDown: EuiIconArrowDown,
+    arrowLeft: EuiIconArrowLeft,
+    arrowRight: EuiIconArrowRight,
+    document: EuiIconDocument,
+    search: EuiIconSearch,
+    trash: EuiIconTrash,
+    user: EuiIconUser,
+    wrench: EuiIconWrench,
+    visualizeApp: EuiIconVisualizeApp,
+    check: EuiIconCheck,
+})
+
+type VersionDropdownItem = {
+    name: string
+    href?: string
+    children?: VersionDropdownItem[]
+}
+
+type VersionDropdownProps = {
+    items: VersionDropdownItem[]
+}
+
+const VersionDropdown = ({ items }: VersionDropdownProps) => {
+    const [isPopoverOpen, setPopover] = useState(false)
+
+    const contextMenuPopoverId = useGeneratedHtmlId({
+        prefix: 'contextMenuPopover',
+    })
+
+    const onButtonClick = () => {
+        setPopover(!isPopoverOpen)
+    }
+
+    const closePopover = () => {
+        setPopover(false)
+    }
+
+    const convertItems = (
+        items: VersionDropdownItem[]
+    ): EuiContextMenuPanelItemDescriptor[] => {
+        return items.map((item) => {
+            return {
+                name: item.name,
+                href: item.href,
+            }
+        })
+    }
+
+    const convertToPanels = (
+        items: VersionDropdownItem[]
+    ): EuiContextMenuPanelDescriptor[] => {
+        return items.flatMap((item, index) => {
+            if (item.children == null) {
+                return []
+            } else {
+                return {
+                    id: index + 1,
+                    title: item.name,
+                    initialFocusedItemIndex: 0,
+                    width: WIDTH,
+                    size: 's',
+                    items: item.children ? convertItems(item.children) : [],
+                }
+            }
+        })
+    }
+
+    const WIDTH = 175
+
+    const topLevelItems = items.map((item, index) => {
+        return {
+            name: item.name,
+            panel: item.children?.length ? index + 1 : undefined,
+            href: item.href,
+        }
+    })
+
+    const subpanels = convertToPanels(items)
+
+    const panels: EuiContextMenuPanelDescriptor[] = [
+        {
+            id: 0,
+            title: (
+                <EuiFlexGroup gutterSize="s" alignItems="center">
+                    <EuiFlexItem grow={0}>
+                        <EuiIcon type="check" />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={1}>Current (9.0+)</EuiFlexItem>
+                </EuiFlexGroup>
+            ),
+            width: WIDTH,
+            size: 's',
+            items: [
+                ...topLevelItems,
+                {
+                    name: 'All versions',
+                    href: 'https://elastic.co',
+                },
+            ],
+        },
+        ...subpanels,
+    ]
+
+    const button = (
+        <EuiButton
+            iconType="arrowDown"
+            iconSide="right"
+            onClick={onButtonClick}
+            size="s"
+            color="text"
+            style={{ borderRadius: 9999 }}
+        >
+            <EuiText
+                size="xs"
+                css={css`
+                    font-weight: 600;
+                    font-size: 0.875rem;
+                `}
+            >
+                Current (9.0+)
+            </EuiText>
+        </EuiButton>
+    )
+
+    return (
+        <EuiPopover
+            id={contextMenuPopoverId}
+            button={button}
+            isOpen={isPopoverOpen}
+            closePopover={closePopover}
+            panelPaddingSize="none"
+            anchorPosition="downLeft"
+            repositionOnScroll={true}
+        >
+            <EuiContextMenu initialPanelId={0} size="s" panels={panels} />
+        </EuiPopover>
+    )
+}
+
+customElements.define(
+    'version-dropdown',
+    r2wc(VersionDropdown, {
+        props: {
+            items: 'json',
+        },
+    })
+)

src/Elastic.Documentation.Site/Htmx.cs

@@ -8,8 +8,7 @@ namespace Elastic.Documentation.Site;
 
 public static class Htmx
 {
-	public static string GetHxSelectOob(bool hasSameTopLevelGroup) => hasSameTopLevelGroup ? "#content-container,#toc-nav" : "#main-container";
-
+	public static string GetHxSelectOob(bool hasSameTopLevelGroup) => "#version-dropdown," + (hasSameTopLevelGroup ? "#content-container,#toc-nav" : "#main-container");
 	public const string Preload = "mousedown";
 	public const string HxSwap = "none";
 	public const string HxPushUrl = "true";