Add :applies_to: prop to dropdown directive (#1949)

reakaleek · web-flow · commit edf52c6a00ad · 2025-09-29T13:25:36.000+02:00
* Add `:applies_to:` prop to dropdown directive

* Fix styling

* Run prettier

* Fix centering

* Run dotnet format

* Don't replace substitions in applies_to prop

* Fix
diff --git a/docs/syntax/dropdowns.md b/docs/syntax/dropdowns.md
@@ -50,3 +50,55 @@ Dropdown content
 ::::
 
 :::::
+
+## With applies_to badge
+
+You can add an applies_to badge to the dropdown title by specifying the `:applies_to:` option. This displays a badge indicating which deployment types, versions, or other applicability criteria the dropdown content applies to.
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
+:::{dropdown} Dropdown Title
+:applies_to: stack: ga 9.0
+Dropdown content for Stack GA 9.0
+:::
+
+::::
+
+::::{tab-item} Markdown
+```markdown
+:::{dropdown} Dropdown Title
+:applies_to: stack: ga 9.0
+Dropdown content for Stack GA 9.0
+:::
+```
+::::
+
+:::::
+
+## Multiple applies_to definitions
+
+You can specify multiple `applies_to` definitions using YAML object notation with curly braces `{}`. This is useful when content applies to multiple deployment types or versions simultaneously.
+
+:::::{tab-set}
+
+::::{tab-item} Output
+
+:::{dropdown} Dropdown Title
+:applies_to: { ece:, ess: }
+Dropdown content for ECE and ECH
+:::
+
+::::
+
+::::{tab-item} Markdown
+```markdown
+:::{dropdown} Dropdown Title
+:applies_to: { ece:, ess: }
+Dropdown content for ECE and ECH
+:::
+```
+::::
+
+:::::
diff --git a/src/Elastic.Documentation.Site/Assets/markdown/dropdown.css b/src/Elastic.Documentation.Site/Assets/markdown/dropdown.css
@@ -7,7 +7,7 @@
 		details.dropdown {
 			@apply border-grey-20 mt-4 block rounded-sm border-1 shadow-xs;
 			summary.dropdown-title {
-				@apply text-ink-dark flex cursor-pointer items-center justify-between px-4 py-2 font-sans font-bold;
+				@apply text-ink-dark flex cursor-pointer items-stretch justify-between font-sans font-bold;
 			}
 
 			&[open] .dropdown-title {
@@ -20,6 +20,37 @@
 			.dropdown-content {
 				@apply px-4 pb-4;
 			}
+
+			.dropdown-title__container {
+				@apply flex items-stretch;
+			}
+
+			.dropdown-title__separator {
+				@apply bg-grey-20 block w-[1px];
+			}
+
+			.dropdown-title__icon {
+				@apply flex items-center justify-center px-4 py-2;
+			}
+
+			.dropdown-title__summary-text {
+				@apply flex items-center px-4 py-2;
+			}
+
+			.applies-dropdown {
+				@apply flex cursor-pointer items-center gap-1 p-2 px-4 font-normal;
+				.applicable-info {
+					@apply cursor-pointer border-none bg-transparent p-0;
+					&:not(:last-child):after {
+						@apply text-sm;
+						content: ',';
+					}
+				}
+				.applicable-name,
+				.applicable-meta {
+					@apply text-sm;
+				}
+			}
 		}
 	}
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Admonition/AdmonitionBlock.cs b/src/Elastic.Markdown/Myst/Directives/Admonition/AdmonitionBlock.cs
@@ -2,6 +2,7 @@
 // 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 Elastic.Documentation.AppliesTo;
 using Elastic.Markdown.Helpers;
 
 namespace Elastic.Markdown.Myst.Directives.Admonition;
@@ -31,17 +32,40 @@ public AdmonitionBlock(DirectiveBlockParser parser, string admonition, ParserCon
 
 	public string Title { get; private set; }
 
+	public string? AppliesToDefinition { get; private set; }
+
+	public ApplicableTo? AppliesTo { get; private set; }
+
 	public override void FinalizeAndValidate(ParserContext context)
 	{
 		CrossReferenceName = Prop("name");
 		DropdownOpen = TryPropBool("open");
 		if (DropdownOpen.HasValue)
 			Classes = "dropdown";
 
+		// Parse applies_to property if present
+		AppliesToDefinition = Prop("applies_to");
+		if (!string.IsNullOrEmpty(AppliesToDefinition))
+			AppliesTo = ParseApplicableTo(AppliesToDefinition);
+
 		if (Admonition is "admonition" or "dropdown" && !string.IsNullOrEmpty(Arguments))
 			Title = Arguments;
 		else if (!string.IsNullOrEmpty(Arguments))
 			Title += $" {Arguments}";
 		Title = Title.ReplaceSubstitutions(context);
 	}
+
+	private ApplicableTo? ParseApplicableTo(string yaml)
+	{
+		try
+		{
+			var applicableTo = YamlSerialization.Deserialize<ApplicableTo>(yaml, Build.ProductsConfiguration);
+			return applicableTo;
+		}
+		catch
+		{
+			// If parsing fails, return null
+			return null;
+		}
+	}
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/Admonition/AdmonitionViewModel.cs b/src/Elastic.Markdown/Myst/Directives/Admonition/AdmonitionViewModel.cs
@@ -2,6 +2,10 @@
 // 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 Elastic.Documentation;
+using Elastic.Documentation.AppliesTo;
+using Elastic.Documentation.Configuration;
+
 namespace Elastic.Markdown.Myst.Directives.Admonition;
 
 public class AdmonitionViewModel : DirectiveViewModel
@@ -11,4 +15,7 @@ public class AdmonitionViewModel : DirectiveViewModel
 	public required string? CrossReferenceName { get; init; }
 	public required string? Classes { get; init; }
 	public required string? Open { get; init; }
+	public string? AppliesToDefinition { get; init; }
+	public ApplicableTo? AppliesTo { get; init; }
+	public required BuildContext BuildContext { get; init; }
 }
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveBlockParser.cs
@@ -208,12 +208,13 @@ public override BlockState TryContinue(BlockProcessor processor, Block block)
 		if (block is not DirectiveBlock directiveBlock)
 			return base.TryContinue(processor, block);
 
-		var tokens = line.ToString().Split(':', 3, RemoveEmptyEntries | TrimEntries);
+		var tokens = line.ToString().Split(':', 2, RemoveEmptyEntries | TrimEntries);
 		if (tokens.Length < 1)
 			return base.TryContinue(processor, block);
 
 		var name = tokens[0];
-		var data = tokens.Length > 1 ? string.Join(":", tokens[1..]) : string.Empty;
+		var data = tokens.Length > 1 ? tokens[1] : string.Empty;
+
 		directiveBlock.AddProperty(name, data);
 
 		return BlockState.Continue;
diff --git a/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs b/src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs
@@ -220,7 +220,10 @@ private static void WriteAdmonition(HtmlRenderer renderer, AdmonitionBlock block
 			CrossReferenceName = block.CrossReferenceName,
 			Classes = block.Classes,
 			Title = block.Title,
-			Open = block.DropdownOpen.GetValueOrDefault() ? "open" : null
+			Open = block.DropdownOpen.GetValueOrDefault() ? "open" : null,
+			AppliesToDefinition = block.AppliesToDefinition,
+			AppliesTo = block.AppliesTo,
+			BuildContext = block.Build
 		});
 		RenderRazorSlice(slice, renderer);
 	}
@@ -234,7 +237,10 @@ private static void WriteDropdown(HtmlRenderer renderer, DropdownBlock block)
 			CrossReferenceName = block.CrossReferenceName,
 			Classes = block.Classes,
 			Title = block.Title,
-			Open = block.DropdownOpen.GetValueOrDefault() ? "open" : null
+			Open = block.DropdownOpen.GetValueOrDefault() ? "open" : null,
+			AppliesToDefinition = block.AppliesToDefinition,
+			AppliesTo = block.AppliesTo,
+			BuildContext = block.Build
 		});
 		RenderRazorSlice(slice, renderer);
 	}
diff --git a/src/Elastic.Markdown/Myst/Directives/Dropdown/DropdownView.cshtml b/src/Elastic.Markdown/Myst/Directives/Dropdown/DropdownView.cshtml
@@ -1,16 +1,35 @@
+@using Elastic.Markdown.Myst.Components
 @inherits RazorSlice<Elastic.Markdown.Myst.Directives.Admonition.AdmonitionViewModel>
 <details class="dropdown @Model.Classes" id="@Model.CrossReferenceName" open="@Model.Open">
 	<summary class="dropdown-title">
-		<span class="sd-summary-text">@Model.Title</span>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke-width="1.5"
-			stroke="currentColor"
-			class="w-4 mr-1 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer text-ink">
-			<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
-		</svg>
+		<div class="dropdown-title__container">
+			@if (Model.AppliesTo is not null)
+			{
+				<span class="applies applies-dropdown">
+					@await RenderPartialAsync(ApplicableToComponent.Create(new ApplicableToViewModel
+					{
+						AppliesTo = Model.AppliesTo,
+						Inline = true,
+						ShowTooltip = false,
+						VersionsConfig = Model.BuildContext.VersionsConfiguration
+					}))
+				</span>
+				<span class="dropdown-title__separator"></span>
+			}
+			<span class="dropdown-title__summary-text">@Model.Title</span>
+		</div>
+		<div class="dropdown-title__icon">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="w-4 mr-1 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer text-ink">
+				<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
+			</svg>
+		</div>
+		
 	</summary>
 	<div class="dropdown-content">
 		@Model.RenderBlock()
diff --git a/tests/Elastic.Markdown.Tests/Directives/AdmonitionTests.cs b/tests/Elastic.Markdown.Tests/Directives/AdmonitionTests.cs
@@ -99,3 +99,140 @@ A regular paragraph.
 	[Fact]
 	public void SetsDropdownOpen() => Block!.DropdownOpen.Should().BeTrue();
 }
+
+public class DropdownAppliesToTests(ITestOutputHelper output) : DirectiveTest<AdmonitionBlock>(output,
+"""
+:::{dropdown} This is my custom dropdown
+:applies_to: stack: ga 9.0
+This is an attention block
+:::
+A regular paragraph.
+"""
+)
+{
+	[Fact]
+	public void SetsCorrectAdmonitionType() => Block!.Admonition.Should().Be("dropdown");
+
+	[Fact]
+	public void SetsCustomTitle() => Block!.Title.Should().Be("This is my custom dropdown");
+
+	[Fact]
+	public void SetsAppliesToDefinition() => Block!.AppliesToDefinition.Should().Be("stack: ga 9.0");
+
+	[Fact]
+	public void ParsesAppliesTo() => Block!.AppliesTo.Should().NotBeNull();
+}
+
+public class DropdownPropertyParsingTests(ITestOutputHelper output) : DirectiveTest<AdmonitionBlock>(output,
+"""
+:::{dropdown} Test Dropdown
+:open:
+:name: test-dropdown
+This is test content
+:::
+A regular paragraph.
+"""
+)
+{
+	[Fact]
+	public void SetsCorrectAdmonitionType() => Block!.Admonition.Should().Be("dropdown");
+
+	[Fact]
+	public void SetsCustomTitle() => Block!.Title.Should().Be("Test Dropdown");
+
+	[Fact]
+	public void SetsDropdownOpen() => Block!.DropdownOpen.Should().BeTrue();
+
+	[Fact]
+	public void SetsCrossReferenceName() => Block!.CrossReferenceName.Should().Be("test-dropdown");
+}
+
+public class DropdownNestedContentTests(ITestOutputHelper output) : DirectiveTest<AdmonitionBlock>(output,
+"""
+::::{dropdown} Nested Content Test
+:open:
+This dropdown contains nested content with colons:
+
+- Time: 10:30 AM
+- URL: https://example.com:8080/path
+- Configuration: key:value pairs
+- Code: `function test() { return "hello:world"; }`
+
+And even nested directives:
+
+:::{note} Nested Note
+This is a nested note with colons: 10:30 AM
+:::
+
+More content after nested directive.
+::::
+A regular paragraph.
+"""
+)
+{
+	[Fact]
+	public void SetsCorrectAdmonitionType() => Block!.Admonition.Should().Be("dropdown");
+
+	[Fact]
+	public void SetsCustomTitle() => Block!.Title.Should().Be("Nested Content Test");
+
+	[Fact]
+	public void SetsDropdownOpen() => Block!.DropdownOpen.Should().BeTrue();
+
+	[Fact]
+	public void ContainsContentWithColons()
+	{
+		var html = Html;
+		html.Should().Contain("Time: 10:30 AM");
+		html.Should().Contain("URL: https://example.com:8080/path");
+		html.Should().Contain("Configuration: key:value pairs");
+		html.Should().Contain("function test() { return &quot;hello:world&quot;; }");
+	}
+
+	[Fact]
+	public void ContainsNestedDirective()
+	{
+		var html = Html;
+		// Output the full HTML for inspection
+		output.WriteLine("Generated HTML:");
+		output.WriteLine(html);
+
+		html.Should().Contain("Nested Note");
+		html.Should().Contain("This is a nested note with colons: 10:30 AM");
+		// Verify the nested note was actually parsed as a directive, not just plain text
+		html.Should().Contain("class=\"admonition note\"");
+		html.Should().Contain("admonition-title");
+		html.Should().Contain("admonition-content");
+	}
+
+	[Fact]
+	public void ContainsContentAfterNestedDirective()
+	{
+		var html = Html;
+		html.Should().Contain("More content after nested directive");
+	}
+}
+
+public class DropdownComplexPropertyTests(ITestOutputHelper output) : DirectiveTest<AdmonitionBlock>(output,
+"""
+:::{dropdown} Complex Properties Test
+:applies_to: stack: ga 9.0
+This is content with applies_to property
+:::
+A regular paragraph.
+"""
+)
+{
+	[Fact]
+	public void SetsCorrectAdmonitionType() => Block!.Admonition.Should().Be("dropdown");
+
+	[Fact]
+	public void SetsCustomTitle() => Block!.Title.Should().Be("Complex Properties Test");
+
+	[Fact]
+	public void ParsesAppliesToWithComplexValue()
+	{
+		Block!.AppliesToDefinition.Should().Be("stack: ga 9.0");
+		Block!.AppliesTo.Should().NotBeNull();
+	}
+}
