Move new version dropdown to sidebar and add missing behaviour from the old dropdown (#1389)

reakaleek · web-flow · commit c7be45eee247 · 2025-06-18T14:52:26.000+02:00
* Move new version dropdown to sidebar and add missing behaviour from the old dropdown

* Add comment

* Add comment
diff --git a/src/Elastic.ApiExplorer/Endpoints/EndpointView.cshtml b/src/Elastic.ApiExplorer/Endpoints/EndpointView.cshtml
@@ -12,8 +12,6 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
-		VersionDropdown = null,
-		CurrentVersion = null,
 		AllowIndexing = false,
 		CanonicalBaseUrl = null,
 		GoogleTagManager = new GoogleTagManagerConfiguration(),
diff --git a/src/Elastic.ApiExplorer/Landing/LandingView.cshtml b/src/Elastic.ApiExplorer/Landing/LandingView.cshtml
@@ -12,8 +12,6 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
-		VersionDropdown = null,
-		CurrentVersion = "9.0+",
 		AllowIndexing = false,
 		CanonicalBaseUrl = null,
 		GoogleTagManager = new GoogleTagManagerConfiguration(),
diff --git a/src/Elastic.ApiExplorer/Operations/OperationView.cshtml b/src/Elastic.ApiExplorer/Operations/OperationView.cshtml
@@ -12,8 +12,6 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
-		VersionDropdown = null,
-		CurrentVersion = null,
 		AllowIndexing = false,
 		CanonicalBaseUrl = null,
 		GoogleTagManager = new GoogleTagManagerConfiguration(),
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/VersionDropdown.tsx b/src/Elastic.Documentation.Site/Assets/web-components/VersionDropdown.tsx
@@ -1,3 +1,5 @@
+'strict'
+
 import {
     EuiButton,
     EuiContextMenu,
@@ -6,7 +8,12 @@ import {
     EuiIcon,
     EuiPopover,
     EuiText,
+    EuiPanel,
+    EuiLink,
+    useEuiOverflowScroll,
     useGeneratedHtmlId,
+    useEuiTheme,
+    useEuiFontSize,
 } 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'
@@ -50,12 +57,18 @@ type VersionDropdownItem = {
 }
 
 type VersionDropdownProps = {
-    currentVersion: string
-    items: VersionDropdownItem[]
+    currentVersion?: string
+    allVersionsUrl?: string
+    items?: VersionDropdownItem[]
 }
 
-const VersionDropdown = ({ currentVersion, items }: VersionDropdownProps) => {
+const VersionDropdown = ({
+    allVersionsUrl,
+    currentVersion,
+    items,
+}: VersionDropdownProps) => {
     const [isPopoverOpen, setPopover] = useState(false)
+    const { euiTheme } = useEuiTheme()
 
     const contextMenuPopoverId = useGeneratedHtmlId({
         prefix: 'contextMenuPopover',
@@ -84,60 +97,112 @@ const VersionDropdown = ({ currentVersion, items }: VersionDropdownProps) => {
     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,
-                    disabled: item.disabled,
-                    size: 's',
-                    items: item.children ? convertItems(item.children) : [],
-                }
-            }
-        })
+        return items == null
+            ? []
+            : items.flatMap((item, index) => {
+                  if (item.children == null) {
+                      return []
+                  } else {
+                      return {
+                          id: index + 1,
+                          title: item.name,
+                          initialFocusedItemIndex: 0,
+                          width: WIDTH,
+                          disabled: item.disabled,
+                          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,
-            disabled: item.disabled,
-        }
-    })
+    const topLevelItems = () =>
+        items.map((item, index) => {
+            return {
+                name: item.name,
+                panel: item.children?.length ? index + 1 : undefined,
+                href: item.href,
+                disabled: item.disabled,
+            }
+        })
 
-    const subpanels = convertToPanels(items)
+    const subpanels = () => convertToPanels(items)
 
-    const panels: EuiContextMenuPanelDescriptor[] = [
+    const panels = (): EuiContextMenuPanelDescriptor[] => [
         {
             id: 0,
             title: (
                 <EuiFlexGroup gutterSize="s" alignItems="center">
                     <EuiFlexItem grow={0}>
-                        <EuiIcon type="check" />
+                        <EuiIcon type="check" size="s" />
                     </EuiFlexItem>
                     <EuiFlexItem grow={1}>
-                        Current ({currentVersion})
+                        <EuiText size="s">{currentVersion}</EuiText>
                     </EuiFlexItem>
                 </EuiFlexGroup>
             ),
             width: WIDTH,
             size: 's',
             items: [
-                ...topLevelItems,
-                {
-                    name: 'All versions',
-                    href: 'https://elastic.co',
-                },
+                ...(items == null
+                    ? [
+                          {
+                              renderItem: () => (
+                                  <EuiPanel paddingSize="s" hasShadow={false}>
+                                      <EuiText size="xs" color="subdued">
+                                          There are no other versions available
+                                          for this page.
+                                      </EuiText>
+                                  </EuiPanel>
+                              ),
+                          },
+                      ]
+                    : topLevelItems()),
+                ...(items?.length === 0
+                    ? [
+                          {
+                              renderItem: () => (
+                                  <EuiPanel paddingSize="s" hasShadow={false}>
+                                      <EuiText size="xs" color="subdued">
+                                          This page was fully migrated to the
+                                          current version.
+                                      </EuiText>
+                                  </EuiPanel>
+                              ),
+                          },
+                      ]
+                    : []),
+                ...(allVersionsUrl != null
+                    ? [
+                          {
+                              renderItem: () => (
+                                  <EuiPanel
+                                      css={css`
+                                          border-top: 1px solid
+                                              ${euiTheme.border.color};
+                                          padding: ${euiTheme.size.s};
+                                      `}
+                                  >
+                                      <EuiLink
+                                          href="/docs/versions"
+                                          color="text"
+                                      >
+                                          <EuiText size="s">
+                                              View all versions
+                                          </EuiText>
+                                      </EuiLink>
+                                  </EuiPanel>
+                              ),
+                          },
+                      ]
+                    : []),
             ],
         },
-        ...subpanels,
+        ...(items != null ? subpanels() : []),
     ]
 
     const button = (
@@ -150,13 +215,12 @@ const VersionDropdown = ({ currentVersion, items }: VersionDropdownProps) => {
             style={{ borderRadius: 9999 }}
         >
             <EuiText
-                size="xs"
                 css={css`
-                    font-weight: 600;
-                    font-size: 0.875rem;
+                    font-weight: ${euiTheme.font.weight.bold};
+                    font-size: ${useEuiFontSize('xs').fontSize};
                 `}
             >
-                Current ({currentVersion})
+                Current version ({currentVersion})
             </EuiText>
         </EuiButton>
     )
@@ -168,10 +232,35 @@ const VersionDropdown = ({ currentVersion, items }: VersionDropdownProps) => {
             isOpen={isPopoverOpen}
             closePopover={closePopover}
             panelPaddingSize="none"
-            anchorPosition="downLeft"
+            anchorPosition="downRight"
             repositionOnScroll={true}
         >
-            <EuiContextMenu initialPanelId={0} size="s" panels={panels} />
+            <EuiContextMenu
+                initialPanelId={0}
+                size="s"
+                panels={panels()}
+                css={css`
+                    max-height: 70vh;
+                    // This is needed because the CSS reset we are using
+                    // is probably not fully compatible with the EUI
+                    button {
+                        cursor: pointer;
+                        &:disabled {
+                            cursor: default;
+                        }
+                    }
+                    .euiContextMenuPanel__title {
+                        position: sticky;
+                        top: 0;
+                        // !important because clicking on the title
+                        // makes the background transparent
+                        // and you unexpectedly see the items behind it.
+                        background-color: ${euiTheme.colors
+                            .backgroundBasePlain} !important;
+                    }
+                    ${useEuiOverflowScroll('y')}
+                `}
+            />
         </EuiPopover>
     )
 }
@@ -182,6 +271,7 @@ customElements.define(
         props: {
             items: 'json',
             currentVersion: 'string',
+            allVersionsUrl: 'string',
         },
     })
 )
diff --git a/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml b/src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml
@@ -13,13 +13,6 @@
 				</label>
 			}
 			<a href="@Model.Link("/")" class="text-lg leading-[1em] hover:text-blue-elastic active:text-blue-elastic-100">Docs</a>
-			
-			@if (Model.Features.IsVersionDropdownEnabled && Model.VersionDropdown is not null)
-			{
-				<div id="version-dropdown">
-					<version-dropdown current-version='@(Model.CurrentVersion)' items='@(new HtmlString(Model.VersionDropdown))' />
-				</div>
-			}
 		</div>
 		<ul class="flex gap-6">
 			<li class="text-nowrap hover:text-blue-elastic active:text-blue-elastic-100">
diff --git a/src/Elastic.Documentation.Site/_ViewModels.cs b/src/Elastic.Documentation.Site/_ViewModels.cs
@@ -25,9 +25,6 @@ public class GlobalLayoutViewModel
 	public required INavigationItem? Previous { get; init; }
 	public required INavigationItem? Next { get; init; }
 
-	public required string? VersionDropdown { get; init; }
-	public required string? CurrentVersion { get; init; }
-
 	public required string NavigationHtml { get; init; }
 	public required string? UrlPathPrefix { get; init; }
 	public required Uri? CanonicalBaseUrl { get; init; }
diff --git a/src/Elastic.Markdown/Slices/HtmlWriter.cs b/src/Elastic.Markdown/Slices/HtmlWriter.cs
@@ -85,6 +85,11 @@ private async Task<string> RenderLayout(MarkdownFile markdown, MarkdownDocument
 			.Distinct()
 			.ToHashSet();
 
+		string? allVersionsUrl = null;
+
+		if (PositionalNavigation.MarkdownNavigationLookup.TryGetValue("docs-content://versions.md", out var item))
+			allVersionsUrl = item.Url;
+
 		var slice = Index.Create(new IndexViewModel
 		{
 			SiteName = siteName,
@@ -111,6 +116,7 @@ private async Task<string> RenderLayout(MarkdownFile markdown, MarkdownDocument
 			StaticFileContentHashProvider = StaticFileContentHashProvider,
 			ReportIssueUrl = reportUrl,
 			CurrentVersion = legacyPages?.Count > 0 ? legacyPages.ElementAt(0).Version : "9.0+",
+			AllVersionsUrl = allVersionsUrl,
 			LegacyPages = legacyPages?.Skip(1).ToArray(),
 			VersionDropdownItems = VersionDrownDownItemViewModel.FromLegacyPageMappings(legacyPages?.Skip(1).ToArray()),
 			Products = allProducts
diff --git a/src/Elastic.Markdown/Slices/Index.cshtml b/src/Elastic.Markdown/Slices/Index.cshtml
@@ -31,7 +31,8 @@
 		ReportIssueUrl = Model.ReportIssueUrl,
 		LegacyPages = Model.LegacyPages,
 		CurrentVersion = Model.CurrentVersion,
-		VersionDropdown = JsonSerializer.Serialize(Model.VersionDropdownItems,
+		AllVersionsUrl = Model.AllVersionsUrl,
+		VersionDropdownSerializedModel = JsonSerializer.Serialize(Model.VersionDropdownItems,
 			ViewModelSerializerContext.Default.VersionDrownDownItemViewModelArray),
 	};
 	protected override Task ExecuteSectionAsync(string name)
diff --git a/src/Elastic.Markdown/Slices/IndexViewModel.cs b/src/Elastic.Markdown/Slices/IndexViewModel.cs
@@ -34,6 +34,8 @@ public class IndexViewModel
 
 	public required string NavigationHtml { get; init; }
 	public required string CurrentVersion { get; init; }
+
+	public required string? AllVersionsUrl { get; init; }
 	public required LegacyPageMapping[]? LegacyPages { get; init; }
 	public required VersionDrownDownItemViewModel[]? VersionDropdownItems { get; init; }
 	public required string? UrlPathPrefix { get; init; }
diff --git a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
@@ -19,6 +19,18 @@
 						Upgrade versions
 					</a>
 				</div>
+				@if (Model.AllVersionsUrl is not null)
+				{
+					<div class="mt-6">
+						<a href="@Model.AllVersionsUrl" class="link">
+							View previous docs versions
+							<svg class="link-arrow"
+							     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
+							</svg>
+						</a>
+					</div>
+				}
 			</div>
 			<div class="flex justify-center items-center">
 				<img src="@Model.Static("web-documentation-hero-illustration.svg")" alt="" width="400">
diff --git a/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml b/src/Elastic.Markdown/Slices/Layout/_TableOfContents.cshtml
diff --git a/src/Elastic.Markdown/Slices/MarkdownLayoutViewModel.cs b/src/Elastic.Markdown/Slices/MarkdownLayoutViewModel.cs
