Hacky dynamic applies_to badges for stack versioning system

docs/testing/req.md

@@ -1,5 +1,38 @@
+---
+applies_to:
+  stack: ga 9.1
+---
+
 # Requirements
 
+Current version: **9.0.0**
+
+| `applies_to`                               | result                               |
+|--------------------------------------------|--------------------------------------|
+| `` {applies_to}`stack: preview` ``         | {applies_to}`stack: preview`         |
+| `` {applies_to}`stack: preview 8.18` ``    | {applies_to}`stack: preview 8.18`    |
+| `` {applies_to}`stack: preview 9.0` ``     | {applies_to}`stack: preview 9.0`     |
+| `` {applies_to}`stack: preview 9.1` ``     | {applies_to}`stack: preview 9.1`     |
+| `` {applies_to}`stack: ga` ``              | {applies_to}`stack: ga`              |
+| `` {applies_to}`stack: ga 8.18` ``         | {applies_to}`stack: ga 8.18`         |
+| `` {applies_to}`stack: ga 9.0` ``          | {applies_to}`stack: ga 9.0`          |
+| `` {applies_to}`stack: ga 9.1` ``          | {applies_to}`stack: ga 9.1`          |
+| `` {applies_to}`stack: beta` ``            | {applies_to}`stack: beta`            |
+| `` {applies_to}`stack: beta 8.18` ``       | {applies_to}`stack: beta 8.18`       |
+| `` {applies_to}`stack: beta 9.0` ``        | {applies_to}`stack: beta 9.0`        |
+| `` {applies_to}`stack: beta 9.1` ``        | {applies_to}`stack: beta 9.1`        |
+| `` {applies_to}`stack: deprecated` ``      | {applies_to}`stack: deprecated`      |
+| `` {applies_to}`stack: deprecated 8.18` `` | {applies_to}`stack: deprecated 8.18` |
+| `` {applies_to}`stack: deprecated 9.0` ``  | {applies_to}`stack: deprecated 9.0`  |
+| `` {applies_to}`stack: deprecated 9.1` ``  | {applies_to}`stack: deprecated 9.1`  |
+| `` {applies_to}`stack: removed` ``         | {applies_to}`stack: removed`         |
+| `` {applies_to}`stack: removed 8.18` ``    | {applies_to}`stack: removed 8.18`    |
+| `` {applies_to}`stack: removed 9.0` ``     | {applies_to}`stack: removed 9.0`     |
+| `` {applies_to}`stack: removed 9.1` ``     | {applies_to}`stack: removed 9.1`     |
+
+{applies_to}`stack: deprecated 9.1, removed 9.4`
+
+
 To follow this tutorial you will need to install the following components:
 
 - An installation of Elasticsearch, based on our hosted [Elastic Cloud](https://www.elastic.co/cloud) service (which includes a free trial period), or a self-hosted service that you run on your own computer. See the Install Elasticsearch section above for installation instructions.
@@ -9,4 +42,4 @@
 
 - Python development
 - The [Flask](https://flask.palletsprojects.com/) web framework for Python.
-- The command prompt or terminal application in your operating system.
+- The command prompt or terminal application in your operating system.

src/Elastic.Documentation.Site/Assets/main.ts

@@ -11,6 +11,7 @@ import 'htmx-ext-head-support'
 import 'htmx-ext-preload'
 import 'htmx.org'
 import { $, $$ } from 'select-dom'
+import tippy from 'tippy.js'
 import { UAParser } from 'ua-parser-js'
 
 const { getOS } = new UAParser()
@@ -24,6 +25,9 @@ document.addEventListener('htmx:load', function () {
     initSmoothScroll()
     openDetailsWithAnchor()
     initDismissibleBanner()
+    tippy('[data-tippy-content]:not([data-tippy-content=""])', {
+        delay: [400, 100],
+    })
 })
 
 // Don't remove style tags because they are used by the elastic global nav.

src/Elastic.Documentation.Site/Assets/styles.css

@@ -17,6 +17,7 @@
 @import './archive.css';
 @import './markdown/stepper.css';
 @import './api-docs.css';
+@import 'tippy.js/dist/tippy.css';
 
 :root {
 	--outline-size: max(2px, 0.08em);
@@ -162,6 +163,7 @@
 		}
 
 		.applicable-info {
+			cursor: default;
 			padding: calc(var(--spacing) * 0.5);
 			padding-left: calc(var(--spacing) * 2);
 			padding-right: calc(var(--spacing) * 2);
@@ -173,6 +175,9 @@
 			background-color: var(--color-white);
 			border: 1px solid var(--color-grey-20);
 			font-weight: normal;
+			&[data-tippy-content]:not([data-tippy-content='']) {
+				cursor: help;
+			}
 		}
 		.applicable-version {
 			font-weight: bold;

src/Elastic.Documentation.Site/package.json

@@ -59,6 +59,7 @@
     "htmx.org": "2.0.5",
     "select-dom": "9.3.1",
     "tailwindcss": "4.1.10",
+    "tippy.js": "6.3.7",
     "ua-parser-js": "2.0.3"
   }
 }

src/Elastic.Markdown/Myst/Components/ApplicableToComponent.cshtml

@@ -1,3 +1,4 @@
+@using Elastic.Documentation
 @using Elastic.Markdown.Myst.FrontMatter
 @inherits RazorSlice<Elastic.Markdown.Myst.Components.ApplicableToViewModel>
 
@@ -61,23 +62,98 @@
 
 	private IHtmlContent RenderProduct(string name, AppliesCollection applications)
 	{
+		var currentStackVersion = new SemVersion(9, 0, 0);
 		foreach (var applicability in applications)
 		{
+
+			var tooltip = "";
+			var badgeText = name;
+
+			if (name == "Elastic Stack")
+			{
+				switch (applicability.Lifecycle)
+				{
+					case ProductLifecycle.TechnicalPreview:
+						if (applicability.Version is not null && applicability.Version > currentStackVersion)
+						{
+							badgeText = "Planned";
+							tooltip = "We plan to add this functionality in a future update. Plans may change without notice.";
+						}
+						else
+						{
+							tooltip = "This functionality is in technical preview and may be changed or removed in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.";
+						}
+						break;
+					case ProductLifecycle.Beta:
+						if (applicability.Version is not null && applicability.Version > currentStackVersion)
+						{
+							badgeText = "Planned";
+							tooltip = "We plan to add this functionality in a future update. Plans may change without notice.";
+						}
+						else
+						{
+							tooltip = "This functionality is in beta and is subject to change. The design and code is less mature than official GA features and is being provided as-is with no warranties. Beta features are not subject to the support SLA of official GA features.";
+						}
+
+						break;
+					case ProductLifecycle.GenerallyAvailable:
+						if (applicability.Version is not null && applicability.Version > currentStackVersion)
+						{
+							badgeText = "Planned";
+							tooltip = "We plan to add this functionality in a future update. Plans may change without notice.";
+						}
+
+						break;
+					case ProductLifecycle.Deprecated:
+						if (applicability.Version is not null && applicability.Version > currentStackVersion)
+						{
+							badgeText = "Deprecation planned";
+							tooltip = "We plan to deprecate this functionality in a future update. Plans may change without notice.";
+						}
+
+						break;
+					case ProductLifecycle.Removed:
+						if (applicability.Version is not null && applicability.Version > currentStackVersion)
+						{
+							badgeText = "Removal planned";
+							tooltip = "We plan to remove this functionality in a future update. Plans may change without notice.";
+						}
+						break;
+				}
+			}
+
 			var lifecycleClass = applicability.GetLifeCycleName().ToLowerInvariant().Replace(" ", "-");
-			<span class="applicable-info">
-				@name
+			<span class="applicable-info" data-tippy-content="@tooltip">
+				@if (name == "Elastic Stack")
+				{
+					@badgeText
+				}
+				else
+				{
+					@name
+				}
 				<span class="applicable-meta applicable-meta-@lifecycleClass">
-				@if (applicability.Lifecycle != ProductLifecycle.GenerallyAvailable)
+				@if (applicability.Lifecycle != ProductLifecycle.GenerallyAvailable && badgeText == name)
 				{
 					<span class="applicable-lifecycle applicable-lifecycle-@lifecycleClass">@applicability.GetLifeCycleName()</span>
 				}
 				@if (applicability.Version is not null and not AllVersions)
 				{
-					<span class="applicable-version applicable-version-@lifecycleClass">@applicability.Version</span>
+					if (name == "Elastic Stack")
+					{
+						if (applicability.Version <= currentStackVersion)
+						{
+							<span class="applicable-version applicable-version-@lifecycleClass">@applicability.Version</span>
+						}
+					}
+					else
+					{
+						<span class="applicable-version applicable-version-@lifecycleClass">@applicability.Version</span>
+					}
 				}
 				</span>
 			</span>
 		}
 		return HtmlString.Empty;
 	}
-}
+}

tests/authoring/Inline/AppliesToRole.fs

@@ -30,11 +30,9 @@ This is an inline {applies_to}`stack: preview 9.1` element.
         markdown |> convertsToHtml """
         <p>This is an inline
             <span class="applies-inline">
-                <span class="applicable-info">
-                    Elastic Stack
+                <span class="applicable-info" data-tippy-content="We plan to add this functionality in a future update. Plans may change without notice.">
+                    Planned
                     <span class="applicable-meta applicable-meta-technical-preview">
-                        <span class="applicable-lifecycle applicable-lifecycle-technical-preview">Technical Preview</span>
-                        <span class="applicable-version applicable-version-technical-preview">9.1.0</span>
                     </span>
                 </span>
             </span>
@@ -72,4 +70,3 @@ This is an inline {preview}`9.1` element.
         directives |> appliesToDirective (ApplicableTo(
             Product=AppliesCollection.op_Explicit "preview 9.1.0"
         ))
-