diff --git a/docs/testing/req.md b/docs/testing/req.md index 4617b62d4..58ac2f891 100644 --- a/docs/testing/req.md +++ b/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 @@ The tutorial assumes that you have no previous knowledge of Elasticsearch or gen - Python development - The [Flask](https://flask.palletsprojects.com/) web framework for Python. -- The command prompt or terminal application in your operating system. \ No newline at end of file +- The command prompt or terminal application in your operating system. diff --git a/src/Elastic.Documentation.Site/Assets/main.ts b/src/Elastic.Documentation.Site/Assets/main.ts index f14b3f989..c475d8799 100644 --- a/src/Elastic.Documentation.Site/Assets/main.ts +++ b/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. diff --git a/src/Elastic.Documentation.Site/Assets/styles.css b/src/Elastic.Documentation.Site/Assets/styles.css index 216ed3950..1702e69fa 100644 --- a/src/Elastic.Documentation.Site/Assets/styles.css +++ b/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; diff --git a/src/Elastic.Documentation.Site/package-lock.json b/src/Elastic.Documentation.Site/package-lock.json index fb6b696af..110d01e9c 100644 --- a/src/Elastic.Documentation.Site/package-lock.json +++ b/src/Elastic.Documentation.Site/package-lock.json @@ -15,6 +15,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" }, "devDependencies": { @@ -2772,6 +2773,15 @@ "@parcel/core": "^2.15.4" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@r2wc/core": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@r2wc/core/-/core-1.2.0.tgz", @@ -7585,6 +7595,14 @@ "dev": true, "license": "MIT" }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/src/Elastic.Documentation.Site/package.json b/src/Elastic.Documentation.Site/package.json index 647a0a263..28f9b835e 100644 --- a/src/Elastic.Documentation.Site/package.json +++ b/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" } } diff --git a/src/Elastic.Markdown/Myst/Components/ApplicableToComponent.cshtml b/src/Elastic.Markdown/Myst/Components/ApplicableToComponent.cshtml index 62241dd76..09575e429 100644 --- a/src/Elastic.Markdown/Myst/Components/ApplicableToComponent.cshtml +++ b/src/Elastic.Markdown/Myst/Components/ApplicableToComponent.cshtml @@ -1,3 +1,4 @@ +@using Elastic.Documentation @using Elastic.Markdown.Myst.FrontMatter @inherits RazorSlice @@ -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(" ", "-"); - - @name + + @if (name == "Elastic Stack") + { + @badgeText + } + else + { + @name + } - @if (applicability.Lifecycle != ProductLifecycle.GenerallyAvailable) + @if (applicability.Lifecycle != ProductLifecycle.GenerallyAvailable && badgeText == name) { @applicability.GetLifeCycleName() } @if (applicability.Version is not null and not AllVersions) { - @applicability.Version + if (name == "Elastic Stack") + { + if (applicability.Version <= currentStackVersion) + { + @applicability.Version + } + } + else + { + @applicability.Version + } } } return HtmlString.Empty; } -} \ No newline at end of file +} diff --git a/tests/authoring/Inline/AppliesToRole.fs b/tests/authoring/Inline/AppliesToRole.fs index 7778ccf5b..d911e533c 100644 --- a/tests/authoring/Inline/AppliesToRole.fs +++ b/tests/authoring/Inline/AppliesToRole.fs @@ -30,11 +30,9 @@ This is an inline {applies_to}`stack: preview 9.1` element. markdown |> convertsToHtml """

This is an inline - - Elastic Stack + + Planned - Technical Preview - 9.1.0 @@ -72,4 +70,3 @@ This is an inline {preview}`9.1` element. directives |> appliesToDirective (ApplicableTo( Product=AppliesCollection.op_Explicit "preview 9.1.0" )) -