Fix broken formatting in dashboard controls step 2#5664
Fix broken formatting in dashboard controls step 2#5664florent-leborgne wants to merge 10 commits intomainfrom
Conversation
Replace inline {applies_to} directives with applies-switch/applies-item
blocks so version-specific instructions render as proper switchable tabs
instead of stacked badges with disconnected content.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
🔍 Preview links for changed docs |
Vale Linting ResultsSummary: 1 suggestion found 💡 Suggestions (1)
The Vale linter checks documentation changes against the Elastic Docs style guide. To use Vale locally or report issues, refer to Elastic style guide for Vale. |
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Intro: convert standalone inline applies_to badges to note with :applies_to: option for pinned/unpinned concept - Step 6: add missing search techniques (Prefix/Contains/Exact) to 9.4 Options list tab (verified against codebase) - Step 6: fix non-standard 9.0-9.3+ syntax to 9.0-9.3 - Steps: renumber 8-10 to 7-9 (step 7 was merged into step 6) - Step 8: convert inline applies_to to applies-switch for chaining - Time slider: convert step 2 to applies-switch; use :applies_to: option on warning callout - Configure settings: clarify 9.4 tab with link to creation flow; fix 9.0-9.3+ syntax; remove stale serverless badge - Variable controls: merge two inline badges into single badge on same line as paragraph text - Fix "Pin to top" label to match codebase: "Pin to Dashboard" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Edit controls: applies-switch for 9.4 (panel menu) vs 9.0-9.3 (hover pencil icon), fix "Save and close" to "Save" (matches code) - Fix inconsistent capitalization: "Control" → "control" in step 3 - Scope "ES|QL controls" version note to 9.0-9.1 with applies_to - Remove duplicated filter scope paragraph from variable controls section (already covered in intro note) - Add "Clear control" tip with eraser icon (exists in all versions) - Add chaining behavior to "Configure controls" 9.4 tab so users who jump to this section via TOC understand controls are always chained Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Wrap comma-separated applies_to values in curly braces to prevent the YAML parser from interpreting colons as mapping indicators. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Multiple conditions in applies-item arguments and inline applies_to roles must use object notation with curly braces to prevent the YAML parser from treating the second colon as an invalid mapping. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Intro: make pinned/unpinned a core concept in the main paragraph (not a version-scoped note), with a note for 9.0-9.3 clarifying controls were always pinned to the header - Variable controls: convert inline applies_to badge for ES|QL rename to a proper note callout scoped to 9.0-9.1 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
benironside
left a comment
There was a problem hiding this comment.
Looks good! Left a few questions and suggestions. Hope they're helpful
| * {applies_to}`stack: ga 9.4` **Unpinned** control: Lives in the dashboard body; when a control is inside a [collapsible section](arrange-panels.md#collapsible-sections), its filters apply only to panels within that section. Controls outside sections (or pinned) have global scope. Refer to [Organize dashboard panels](arrange-panels.md#collapsible-sections) for how section placement affects filter scope. | ||
| :::{note} | ||
| :applies_to: stack: ga 9.0-9.3 | ||
| Up until version 9.3, controls are always pinned to the dashboard header and some settings such as chaining and validation apply to all controls at once. Refer to [Configure the controls settings](#configure-controls-settings) to manage these shared settings. |
There was a problem hiding this comment.
| Up until version 9.3, controls are always pinned to the dashboard header and some settings such as chaining and validation apply to all controls at once. Refer to [Configure the controls settings](#configure-controls-settings) to manage these shared settings. | |
| Controls are always pinned to the dashboard header and some settings such as chaining and validation apply to all controls at once. Refer to [Configure the controls settings](#configure-controls-settings) to manage these shared settings. |
Maybe redundant? I'm curious for your perspective though. When do you think it's helpful to reiterate what applies-to labels say?
| In **Edit** mode, select **Add** > **Controls** > **Control** in the toolbar. | ||
| ::: | ||
| :::{applies-item} stack: ga 9.0-9.1 | ||
| In **Edit** mode, select **Controls** > **Add control** in the dashboard toolbar. |
There was a problem hiding this comment.
| In **Edit** mode, select **Controls** > **Add control** in the dashboard toolbar. | |
| In **Edit** mode, select **Controls** > **Add control** in the toolbar. |
Suggesting to remove this to match line 63
| When you add a variable control from an {{esql}} panel, for example, by choosing **Create control** from the autocomplete menu, you can place it **beside** the panel so the control appears directly next to the visualization that uses it. This enables controls that only apply to specific panels in your dashboards, and exposes visualization configuration such as date histogram interval controls to dashboard users. | ||
|
|
||
| A control's filter scope depends on where you place it: controls inside a [collapsible section](arrange-panels.md#collapsible-sections) apply only to panels in that section, while controls outside sections or pinned to the dashboard apply to all panels. | ||
| {applies_to}`{ serverless: ga, stack: ga 9.4 }` When you add a variable control from an {{esql}} panel, for example, by choosing **Create control** from the autocomplete menu, you can place it **beside** the panel so the control appears directly next to the visualization that uses it. This enables controls that only apply to specific panels in your dashboards, and exposes visualization configuration such as date histogram interval controls to dashboard users. |
There was a problem hiding this comment.
Something about the last sentence here isn't parsing easily for me. Maybe for one thing what "enables" means here is confusing. Is this saying that when you put a control beside the panel, that control only applies to specific panels in my dashboards?
| * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` In **Edit** mode, select **Add** > **Controls** > **Time slider control** in the toolbar. | ||
| * {applies_to}`stack: ga 9.0-9.1` In **Edit** mode, select **Controls** > **Add time slider control**. | ||
| ::::{applies-switch} | ||
| :::{applies-item} { serverless: ga, stack: ga 9.2 } |
|
|
||
| 1. Configure the control settings. | ||
|
|
||
| * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` In **Edit** mode, select **Add** > **Controls** > **Settings** in the toolbar. |
There was a problem hiding this comment.
These three lines each have an applies to, but none of them seem to have either a + or a 9.4, which seems to suggest that the future behavior isn't described here, is that right?
| Change the settings for Options list and Range slider controls. | ||
|
|
||
| ::::{applies-switch} | ||
| :::{applies-item} { serverless: ga, stack: ga 9.4 } |
There was a problem hiding this comment.
should it be 9.4+ instead of 9.4?
|
|
||
| ::::{applies-switch} | ||
| :::{applies-item} stack: ga 9.4 | ||
| :::{applies-item} { serverless: ga, stack: ga 9.4 } |
Summary
Comprehensive fix for the dashboard controls documentation page (
add-controls.md), addressing formatting issues introduced by #5154 (which closed #4676) and verifying all settings against the Kibana source code for both 9.4/serverless and 9.0-9.3.Formatting fixes
{applies_to}badges (pinned/unpinned concept) with a:::{note}using:applies_to:option{applies_to}toapplies-switchfor version-specific "Add a control" pathsoptions_list_editor_options.tsx{applies_to}toapplies-switchfor chaining behavior{applies_to}toapplies-switch; use:applies_to:on warning calloutapplies-switch— 9.4 uses panel menu, 9.0-9.3 uses hover pencil icon{applies_to}toapplies-switchVersion scoping fixes
serverless: gaalongsidestack: ga 9.4on all applies-items9.0-9.3+syntax with9.0-9.3(the+on closed ranges is undocumented)serverless:badges from 9.0-9.3 tabs:applies_to:options in{ }braces (required by YAML parser)Content fixes
pin_control_action.tsx)data_control_constants.tsxin both 9.3 and 9.4)Verification
Test plan
applies-switchblocksRelates to #4676, #5154
🤖 Generated with Claude Code