Skip to content

Commit 1b7ddfa

Browse files
reakaleekreakaleek
authored
Hacky dynamic applies_to badges for stack versioning system (#1448)
* Hacky dynamic `applies_to` badges for stack versioning system * Prettier * Fix backwards-compatibility logic * Fix test * Show `help` cursor if tooltip is available * Add tooltip delay
1 parent 1233c5a commit 1b7ddfa

File tree

7 files changed

+144
-10
lines changed

7 files changed

+144
-10
lines changed

‎docs/testing/req.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
1+
---
2+
applies_to:
3+
stack: ga 9.1
4+
---
5+
16
# Requirements
27

8+
Current version: **9.0.0**
9+
10+
| `applies_to` | result |
11+
|--------------------------------------------|--------------------------------------|
12+
| `` {applies_to}`stack: preview` `` | {applies_to}`stack: preview` |
13+
| `` {applies_to}`stack: preview 8.18` `` | {applies_to}`stack: preview 8.18` |
14+
| `` {applies_to}`stack: preview 9.0` `` | {applies_to}`stack: preview 9.0` |
15+
| `` {applies_to}`stack: preview 9.1` `` | {applies_to}`stack: preview 9.1` |
16+
| `` {applies_to}`stack: ga` `` | {applies_to}`stack: ga` |
17+
| `` {applies_to}`stack: ga 8.18` `` | {applies_to}`stack: ga 8.18` |
18+
| `` {applies_to}`stack: ga 9.0` `` | {applies_to}`stack: ga 9.0` |
19+
| `` {applies_to}`stack: ga 9.1` `` | {applies_to}`stack: ga 9.1` |
20+
| `` {applies_to}`stack: beta` `` | {applies_to}`stack: beta` |
21+
| `` {applies_to}`stack: beta 8.18` `` | {applies_to}`stack: beta 8.18` |
22+
| `` {applies_to}`stack: beta 9.0` `` | {applies_to}`stack: beta 9.0` |
23+
| `` {applies_to}`stack: beta 9.1` `` | {applies_to}`stack: beta 9.1` |
24+
| `` {applies_to}`stack: deprecated` `` | {applies_to}`stack: deprecated` |
25+
| `` {applies_to}`stack: deprecated 8.18` `` | {applies_to}`stack: deprecated 8.18` |
26+
| `` {applies_to}`stack: deprecated 9.0` `` | {applies_to}`stack: deprecated 9.0` |
27+
| `` {applies_to}`stack: deprecated 9.1` `` | {applies_to}`stack: deprecated 9.1` |
28+
| `` {applies_to}`stack: removed` `` | {applies_to}`stack: removed` |
29+
| `` {applies_to}`stack: removed 8.18` `` | {applies_to}`stack: removed 8.18` |
30+
| `` {applies_to}`stack: removed 9.0` `` | {applies_to}`stack: removed 9.0` |
31+
| `` {applies_to}`stack: removed 9.1` `` | {applies_to}`stack: removed 9.1` |
32+
33+
{applies_to}`stack: deprecated 9.1, removed 9.4`
34+
35+
336
To follow this tutorial you will need to install the following components:
437

538
- 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.

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import 'htmx-ext-head-support'
1111
import 'htmx-ext-preload'
1212
import 'htmx.org'
1313
import { $, $$ } from 'select-dom'
14+
import tippy from 'tippy.js'
1415
import { UAParser } from 'ua-parser-js'
1516

1617
const { getOS } = new UAParser()
@@ -24,6 +25,9 @@ document.addEventListener('htmx:load', function () {
2425
initSmoothScroll()
2526
openDetailsWithAnchor()
2627
initDismissibleBanner()
28+
tippy('[data-tippy-content]:not([data-tippy-content=""])', {
29+
delay: [400, 100],
30+
})
2731
})
2832

2933
// Don't remove style tags because they are used by the elastic global nav.

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
@import './archive.css';
1818
@import './markdown/stepper.css';
1919
@import './api-docs.css';
20+
@import 'tippy.js/dist/tippy.css';
2021

2122
:root {
2223
--outline-size: max(2px, 0.08em);
@@ -162,6 +163,7 @@
162163
}
163164

164165
.applicable-info {
166+
cursor: default;
165167
padding: calc(var(--spacing) * 0.5);
166168
padding-left: calc(var(--spacing) * 2);
167169
padding-right: calc(var(--spacing) * 2);
@@ -173,6 +175,9 @@
173175
background-color: var(--color-white);
174176
border: 1px solid var(--color-grey-20);
175177
font-weight: normal;
178+
&[data-tippy-content]:not([data-tippy-content='']) {
179+
cursor: help;
180+
}
176181
}
177182
.applicable-version {
178183
font-weight: bold;

‎src/Elastic.Documentation.Site/package-lock.json‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Elastic.Documentation.Site/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
"htmx.org": "2.0.5",
6060
"select-dom": "9.3.1",
6161
"tailwindcss": "4.1.10",
62+
"tippy.js": "6.3.7",
6263
"ua-parser-js": "2.0.3"
6364
}
6465
}

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

Lines changed: 81 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@using Elastic.Documentation
12
@using Elastic.Markdown.Myst.FrontMatter
23
@inherits RazorSlice<Elastic.Markdown.Myst.Components.ApplicableToViewModel>
34

@@ -81,23 +82,98 @@
8182

8283
private IHtmlContent RenderProduct(string name, AppliesCollection applications)
8384
{
85+
var currentStackVersion = new SemVersion(9, 0, 0);
8486
foreach (var applicability in applications)
8587
{
88+
89+
var tooltip = "";
90+
var badgeText = name;
91+
92+
if (name == "Elastic Stack")
93+
{
94+
switch (applicability.Lifecycle)
95+
{
96+
case ProductLifecycle.TechnicalPreview:
97+
if (applicability.Version is not null && applicability.Version > currentStackVersion)
98+
{
99+
badgeText = "Planned";
100+
tooltip = "We plan to add this functionality in a future update. Plans may change without notice.";
101+
}
102+
else
103+
{
104+
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.";
105+
}
106+
break;
107+
case ProductLifecycle.Beta:
108+
if (applicability.Version is not null && applicability.Version > currentStackVersion)
109+
{
110+
badgeText = "Planned";
111+
tooltip = "We plan to add this functionality in a future update. Plans may change without notice.";
112+
}
113+
else
114+
{
115+
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.";
116+
}
117+
118+
break;
119+
case ProductLifecycle.GenerallyAvailable:
120+
if (applicability.Version is not null && applicability.Version > currentStackVersion)
121+
{
122+
badgeText = "Planned";
123+
tooltip = "We plan to add this functionality in a future update. Plans may change without notice.";
124+
}
125+
126+
break;
127+
case ProductLifecycle.Deprecated:
128+
if (applicability.Version is not null && applicability.Version > currentStackVersion)
129+
{
130+
badgeText = "Deprecation planned";
131+
tooltip = "We plan to deprecate this functionality in a future update. Plans may change without notice.";
132+
}
133+
134+
break;
135+
case ProductLifecycle.Removed:
136+
if (applicability.Version is not null && applicability.Version > currentStackVersion)
137+
{
138+
badgeText = "Removal planned";
139+
tooltip = "We plan to remove this functionality in a future update. Plans may change without notice.";
140+
}
141+
break;
142+
}
143+
}
144+
86145
var lifecycleClass = applicability.GetLifeCycleName().ToLowerInvariant().Replace(" ", "-");
87-
<span class="applicable-info">
88-
@name
146+
<span class="applicable-info" data-tippy-content="@tooltip">
147+
@if (name == "Elastic Stack")
148+
{
149+
@badgeText
150+
}
151+
else
152+
{
153+
@name
154+
}
89155
<span class="applicable-meta applicable-meta-@lifecycleClass">
90-
@if (applicability.Lifecycle != ProductLifecycle.GenerallyAvailable)
156+
@if (applicability.Lifecycle != ProductLifecycle.GenerallyAvailable && badgeText == name)
91157
{
92158
<span class="applicable-lifecycle applicable-lifecycle-@lifecycleClass">@applicability.GetLifeCycleName()</span>
93159
}
94160
@if (applicability.Version is not null and not AllVersions)
95161
{
96-
<span class="applicable-version applicable-version-@lifecycleClass">@applicability.Version</span>
162+
if (name == "Elastic Stack")
163+
{
164+
if (applicability.Version <= currentStackVersion)
165+
{
166+
<span class="applicable-version applicable-version-@lifecycleClass">@applicability.Version</span>
167+
}
168+
}
169+
else
170+
{
171+
<span class="applicable-version applicable-version-@lifecycleClass">@applicability.Version</span>
172+
}
97173
}
98174
</span>
99175
</span>
100176
}
101177
return HtmlString.Empty;
102178
}
103-
}
179+
}

‎tests/authoring/Inline/AppliesToRole.fs‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,9 @@ This is an inline {applies_to}`stack: preview 9.1` element.
3030
markdown |> convertsToHtml """
3131
<p>This is an inline
3232
<span class="applies-inline">
33-
<span class="applicable-info">
34-
Elastic Stack
33+
<span class="applicable-info" data-tippy-content="We plan to add this functionality in a future update. Plans may change without notice.">
34+
Planned
3535
<span class="applicable-meta applicable-meta-technical-preview">
36-
<span class="applicable-lifecycle applicable-lifecycle-technical-preview">Technical Preview</span>
37-
<span class="applicable-version applicable-version-technical-preview">9.1.0</span>
3836
</span>
3937
</span>
4038
</span>
@@ -72,4 +70,3 @@ This is an inline {preview}`9.1` element.
7270
directives |> appliesToDirective (ApplicableTo(
7371
Product=AppliesCollection.op_Explicit "preview 9.1.0"
7472
))
75-

0 commit comments

Comments
 (0)