From 3c80962f687ee1d25fc990d3454de219cc03af24 Mon Sep 17 00:00:00 2001
From: Andrea De Pirro <andrea.depirro@elastic.co>
Date: Fri, 16 Oct 2026 13:37:59 +0200
Subject: [PATCH] Let API union variants fold their fields behind a toggle

Variants behind chips showed their fields with no way to collapse them, while object rows fold. The fields still start expanded; a "hide properties" toggle now shortens the view.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../PropertyTree/_Partials/_UnionOptions.cshtml       | 11 ++++++-----
 .../UnionOptionsRenderingTests.cs                     |  5 +++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/Elastic.ApiExplorer/Components/PropertyTree/_Partials/_UnionOptions.cshtml b/src/Elastic.ApiExplorer/Components/PropertyTree/_Partials/_UnionOptions.cshtml
index 61c96b3726..3e11acadab 100644
--- a/src/Elastic.ApiExplorer/Components/PropertyTree/_Partials/_UnionOptions.cshtml
+++ b/src/Elastic.ApiExplorer/Components/PropertyTree/_Partials/_UnionOptions.cshtml
@@ -66,15 +66,16 @@
 		var variant = Model.Variants[i];
 		// A picked chip is the choice to read that variant: its fields show at once, and its chip already names it, so
 		// the label keeps only what the chip does not say (the discriminator value, the link to the type's page, or
-		// that the variant is an array).
-		var collapsible = variant.IsCollapsible && !Model.UseChips;
+		// that the variant is an array). The fields still fold behind the toggle, for a shorter view.
+		var collapsible = variant.IsCollapsible;
+		var expanded = Model.UseChips || variant.DefaultExpanded;
 		var folded = variant.UseHidden && !Model.UseChips;
 		// An array variant keeps its "X[]" heading, so its fields read as each item's; a primitive keeps its type, which is
 		// all its panel has to show.
 		var showName = !Model.UseChips || variant.PageUrl is { Length: > 0 } || variant.IsArrayVariant || !variant.IsObjectType;
 		var showLabel = showName || variant.DiscriminatorLabel is { Length: > 0 };
 
-		<div class="union-variant-item @(variant.ShowProperties ? "has-children" : "") @(collapsible ? (variant.DefaultExpanded ? "expanded" : "collapsed") : "")" id="@variant.AnchorId" hidden="@(Model.UseChips && i > 0 ? "until-found" : null)">
+		<div class="union-variant-item @(variant.ShowProperties ? "has-children" : "") @(collapsible ? (expanded ? "expanded" : "collapsed") : "")" id="@variant.AnchorId" hidden="@(Model.UseChips && i > 0 ? "until-found" : null)">
 			@if (showLabel)
 			{
 			<div class="union-variant-label">
@@ -109,8 +110,8 @@
 				{
 					<div class="expand-toggle-row union-expand-toggle">
 						<button class="expand-toggle">
-							<span class="toggle-icon">@(variant.DefaultExpanded ? "−" : "+")</span>
-							<span class="toggle-label">@(variant.DefaultExpanded ? "hide" : "show") properties</span>
+							<span class="toggle-icon">@(expanded ? "−" : "+")</span>
+							<span class="toggle-label">@(expanded ? "hide" : "show") properties</span>
 						</button>
 					</div>
 				}
diff --git a/tests/Elastic.ApiExplorer.Tests/UnionOptionsRenderingTests.cs b/tests/Elastic.ApiExplorer.Tests/UnionOptionsRenderingTests.cs
index 6158e9200f..e623afd6eb 100644
--- a/tests/Elastic.ApiExplorer.Tests/UnionOptionsRenderingTests.cs
+++ b/tests/Elastic.ApiExplorer.Tests/UnionOptionsRenderingTests.cs
@@ -70,11 +70,12 @@ public async Task Render_ThreeVariants_ShowsChipsAndOnlyTheFirstVariant()
 	}
 
 	[Test]
-	public async Task Render_ThreeVariants_ShowsTheFieldsAtOnceWithoutRepeatingTheName()
+	public async Task Render_ThreeVariants_ShowsTheFieldsAtOnceWithAToggleAndWithoutRepeatingTheName()
 	{
 		var html = await Render(3, foldable: true);
 
-		html.Should().NotContain("show properties", "picking a chip is the choice to read that variant");
+		html.Should().Contain("hide properties", "the fields show at once, and a toggle offers a shorter view");
+		html.Should().NotContain("show properties", "nothing starts folded");
 		html.Should().Contain("""<div class="nested-properties" id="v-0--children">""", "the fields are not folded");
 		html.Should().NotContain(">Variant0</span></code>", "the chip already names the variant");
 		html.Should().Contain(