Merge branch 'main' into feature/open-api-docs-2

Mpdreamz · web-flow · commit 8d3406345bfb · 2025-06-18T16:07:37.000+02:00
diff --git a/src/Elastic.ApiExplorer/Endpoints/EndpointView.cshtml b/src/Elastic.ApiExplorer/Endpoints/EndpointView.cshtml
@@ -12,7 +12,6 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
-		VersionDropdown = 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,7 +12,6 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
-		VersionDropdown = null,
 		AllowIndexing = false,
 		CanonicalBaseUrl = null,
 		GoogleTagManager = new GoogleTagManagerConfiguration(),
diff --git a/src/Elastic.ApiExplorer/Operations/OperationView.cshtml b/src/Elastic.ApiExplorer/Operations/OperationView.cshtml
@@ -15,7 +15,6 @@
 		Next = null,
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
-		VersionDropdown = 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'
@@ -45,15 +52,23 @@ appendIconComponentCache({
 type VersionDropdownItem = {
     name: string
     href?: string
+    disabled: boolean
     children?: VersionDropdownItem[]
 }
 
 type VersionDropdownProps = {
-    items: VersionDropdownItem[]
+    currentVersion?: string
+    allVersionsUrl?: string
+    items?: VersionDropdownItem[]
 }
 
-const VersionDropdown = ({ items }: VersionDropdownProps) => {
+const VersionDropdown = ({
+    allVersionsUrl,
+    currentVersion,
+    items,
+}: VersionDropdownProps) => {
     const [isPopoverOpen, setPopover] = useState(false)
+    const { euiTheme } = useEuiTheme()
 
     const contextMenuPopoverId = useGeneratedHtmlId({
         prefix: 'contextMenuPopover',
@@ -74,63 +89,120 @@ const VersionDropdown = ({ items }: VersionDropdownProps) => {
             return {
                 name: item.name,
                 href: item.href,
+                disabled: item.disabled,
             }
         })
     }
 
     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) : [],
-                }
-            }
-        })
+        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,
-        }
-    })
+    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}>
+                        <EuiText size="s">{currentVersion}</EuiText>
                     </EuiFlexItem>
-                    <EuiFlexItem grow={1}>Current (9.0+)</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 = (
@@ -143,13 +215,12 @@ const VersionDropdown = ({ 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 (9.0+)
+                Current version ({currentVersion})
             </EuiText>
         </EuiButton>
     )
@@ -161,10 +232,35 @@ const VersionDropdown = ({ 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>
     )
 }
@@ -174,6 +270,8 @@ customElements.define(
     r2wc(VersionDropdown, {
         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 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,8 +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 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
@@ -94,6 +94,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,
@@ -120,6 +125,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,18 +31,23 @@
 		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)
 	{
+		if (name == GlobalSections.Head)
+		{
+			<meta class="elastic" name="product_version" content="@Model.CurrentVersion"/>
+			<meta name="DC.identifier" content="@Model.CurrentVersion"/>
+		}
 		if (name == GlobalSections.Head && Model.Products is { Count: > 0 })
 		{
 			var products = string.Join(",", Model.Products.Select(p => p.DisplayName));
 			<meta class="elastic" name="product_name" content="@(products)"/>
 			<meta name="DC.subject" content="@(products)"/>
 		}
-
 		return Task.CompletedTask;
 	}
 }
diff --git a/src/Elastic.Markdown/Slices/IndexViewModel.cs b/src/Elastic.Markdown/Slices/IndexViewModel.cs
diff --git a/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml b/src/Elastic.Markdown/Slices/Layout/_LandingPage.cshtml
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

Original file line number	Diff line number	Diff line change
`@@ -31,18 +31,23 @@`
`31`	`31`	`ReportIssueUrl = Model.ReportIssueUrl,`
`32`	`32`	`LegacyPages = Model.LegacyPages,`
`33`	`33`	`CurrentVersion = Model.CurrentVersion,`
`34`		`- VersionDropdown = JsonSerializer.Serialize(Model.VersionDropdownItems,`
	`34`	`+ AllVersionsUrl = Model.AllVersionsUrl,`
	`35`	`+ VersionDropdownSerializedModel = JsonSerializer.Serialize(Model.VersionDropdownItems,`
`35`	`36`	`ViewModelSerializerContext.Default.VersionDrownDownItemViewModelArray),`
`36`	`37`	`};`
`37`	`38`	`protected override Task ExecuteSectionAsync(string name)`
`38`	`39`	`{`
	`40`	`+ if (name == GlobalSections.Head)`
	`41`	`+ {`
	`42`	`+ <meta class="elastic" name="product_version" content="@Model.CurrentVersion"/>`
	`43`	`+ <meta name="DC.identifier" content="@Model.CurrentVersion"/>`
	`44`	`+ }`
`39`	`45`	`if (name == GlobalSections.Head && Model.Products is { Count: > 0 })`
`40`	`46`	`{`
`41`	`47`	`var products = string.Join(",", Model.Products.Select(p => p.DisplayName));`
`42`	`48`	`<meta class="elastic" name="product_name" content="@(products)"/>`
`43`	`49`	`<meta name="DC.subject" content="@(products)"/>`
`44`	`50`	`}`
`45`		`-`
`46`	`51`	`return Task.CompletedTask;`
`47`	`52`	`}`
`48`	`53`	`}`