New version dropdown: Disable non-existing items and pass current version to react component

Author: reakaleek

src/Elastic.ApiExplorer/Endpoints/EndpointView.cshtml

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

src/Elastic.ApiExplorer/Landing/LandingView.cshtml

@@ -13,6 +13,7 @@
 		NavigationHtml = Model.NavigationHtml,
 		UrlPathPrefix = null,
 		VersionDropdown = null,
+		CurrentVersion = "9.0+",
 		AllowIndexing = false,
 		CanonicalBaseUrl = null,
 		GoogleTagManager = new GoogleTagManagerConfiguration(),

src/Elastic.ApiExplorer/Operations/OperationView.cshtml

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

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

@@ -45,14 +45,16 @@ appendIconComponentCache({
 type VersionDropdownItem = {
     name: string
     href?: string
+    disabled: boolean,
     children?: VersionDropdownItem[]
 }
 
 type VersionDropdownProps = {
+    currentVersion: string
     items: VersionDropdownItem[]
 }
 
-const VersionDropdown = ({ items }: VersionDropdownProps) => {
+const VersionDropdown = ({ currentVersion,items }: VersionDropdownProps) => {
     const [isPopoverOpen, setPopover] = useState(false)
 
     const contextMenuPopoverId = useGeneratedHtmlId({
@@ -74,6 +76,7 @@ const VersionDropdown = ({ items }: VersionDropdownProps) => {
             return {
                 name: item.name,
                 href: item.href,
+                disabled: item.disabled,
             }
         })
     }
@@ -90,6 +93,7 @@ const VersionDropdown = ({ items }: VersionDropdownProps) => {
                     title: item.name,
                     initialFocusedItemIndex: 0,
                     width: WIDTH,
+                    disabled: item.disabled,
                     size: 's',
                     items: item.children ? convertItems(item.children) : [],
                 }
@@ -104,6 +108,7 @@ const VersionDropdown = ({ items }: VersionDropdownProps) => {
             name: item.name,
             panel: item.children?.length ? index + 1 : undefined,
             href: item.href,
+            disabled: item.disabled,
         }
     })
 
@@ -117,7 +122,7 @@ const VersionDropdown = ({ items }: VersionDropdownProps) => {
                     <EuiFlexItem grow={0}>
                         <EuiIcon type="check" />
                     </EuiFlexItem>
-                    <EuiFlexItem grow={1}>Current (9.0+)</EuiFlexItem>
+                    <EuiFlexItem grow={1}>Current ({currentVersion})</EuiFlexItem>
                 </EuiFlexGroup>
             ),
             width: WIDTH,
@@ -149,7 +154,7 @@ const VersionDropdown = ({ items }: VersionDropdownProps) => {
                     font-size: 0.875rem;
                 `}
             >
-                Current (9.0+)
+                Current ({currentVersion})
             </EuiText>
         </EuiButton>
     )
@@ -174,6 +179,7 @@ customElements.define(
     r2wc(VersionDropdown, {
         props: {
             items: 'json',
+            currentVersion: 'string',
         },
     })
 )

src/Elastic.Documentation.Site/Layout/_SecondaryNav.cshtml

@@ -17,7 +17,7 @@
 			@if (Model.Features.IsVersionDropdownEnabled && Model.VersionDropdown is not null)
 			{
 				<div id="version-dropdown">
-					<version-dropdown items='@(new HtmlString(Model.VersionDropdown))' />
+					<version-dropdown current-version='@(Model.CurrentVersion)' items='@(new HtmlString(Model.VersionDropdown))' />
 				</div>
 			}
 		</div>

src/Elastic.Documentation.Site/_ViewModels.cs

@@ -26,6 +26,7 @@ public class GlobalLayoutViewModel
 	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; }

src/Elastic.Markdown/Slices/IndexViewModel.cs

@@ -59,16 +59,17 @@ public class VersionDrownDownItemViewModel
 	[JsonPropertyName("href")]
 	public required string? Href { get; init; }
 
+	[JsonPropertyName("disabled")]
+	public required bool IsDisabled { get; init; }
+
 	[JsonPropertyName("children")]
 	public required VersionDrownDownItemViewModel[]? Children { get; init; }
 
 	// This logic currently only handles one level of children. Although the model supports multiple levels, it is not currently used.
 	public static VersionDrownDownItemViewModel[]? FromLegacyPageMappings(LegacyPageMapping[]? legacyPageMappings)
 	{
 		if (legacyPageMappings is null)
-		{
 			return null;
-		}
 		var groupedVersions = GroupByMajorVersion(legacyPageMappings);
 		return groupedVersions.Select(m =>
 		{
@@ -79,10 +80,12 @@ public class VersionDrownDownItemViewModel
 				{
 					Name = m.Key,
 					Href = null,
+					IsDisabled = false,
 					Children = m.Value.Select(v => new VersionDrownDownItemViewModel
 					{
 						Name = v,
 						Href = legacyPageMappings.First(x => x.Version == v).ToString(),
+						IsDisabled = !legacyPageMappings.First(x => x.Version == v).Exists,
 						Children = null
 					}).ToArray()
 				};
@@ -95,6 +98,7 @@ public class VersionDrownDownItemViewModel
 			{
 				Name = legacyPageMapping.Version,
 				Href = legacyPageMapping.ToString(),
+				IsDisabled = !legacyPageMapping.Exists,
 				Children = null
 			};
 		}).ToArray();

src/Elastic.Markdown/Slices/MarkdownLayoutViewModel.cs

@@ -16,8 +16,6 @@ public class MarkdownLayoutViewModel : GlobalLayoutViewModel
 
 	public required INavigationItem[] Parents { get; init; }
 
-	public required string? CurrentVersion { get; init; }
-
 	public required LegacyPageMapping[]? LegacyPages { get; init; }
 
 	public required IReadOnlyCollection<PageTocItem> PageTocItems { get; init; }