docs: update dashboard panel workflows for the Add to dashboard flyout (#6353) (#7189)

## Summary

A bit overdue. Did a few phrasing tricks to keep instructions true
without splitting into too many applies_to bullets, which are conscious
choices and may explain some unusual ways to phrase some menu
instructions.

This PR addresses #6353. In 9.5, clicking **Add** on a dashboard no
longer opens a popover; it opens a single **Add to dashboard** flyout
with **New** and **From library** tabs, featured **Visualization** and
**Visualization (query)** items, a renamed **Other visualizations**
group (was "Visualizations"), and **Vega** (was "Custom visualization").
These changes update the affected panel-adding workflows across the
docs, using the cumulative model so earlier-version steps are preserved.

- **`explore-analyze/visualize.md`**: Adds a canonical description of
the **Add to dashboard** flyout (New / From library tabs, featured
items, grouped panel types), updates "Add panel" flow/menu wording to
the version-neutral **Add** menu, and renames the panel-type entry to
**Vega**.
- **`explore-analyze/dashboards/drilldowns.md`**: Adds a 9.5+ flyout
variant for the "add from library" and "create visualization" steps and
caps the popover wording at 9.2–9.4 (issue-requested).
- **`explore-analyze/visualize/esorql.md`**,
**`_snippets/emoji-table-esql.md`**,
**`kibana-data-exploration-learning-tutorial.md`**: Updates the ES|QL
panel steps — the removed **New panel** item and the renamed **Other
visualizations** group — to use the **Visualization (query)** featured
item in 9.5+.
- **`explore-analyze/visualize/link-panels.md`**, **`text-panels.md`**,
**`image-panels.md`**, **`alert-panels.md`**: Normalizes the "add a
panel" / "add from library" steps to the flyout, with cumulative version
bullets.
- **`explore-analyze/discover/save-open-search.md`**: Updates the
"create a Discover session on the dashboard" steps (Discover session now
sits under **Other visualizations** in 9.5+).
- **`explore-analyze/visualize/custom-visualizations-with-vega.md`**:
Renames **Custom visualization** to **Vega** (label change verified in
source).

All UI strings were verified against `elastic/kibana` at `origin/main`
(HEAD), not just the original PR diff — see note below.

## Resolves

Closes #6353

## Verification notes

- Feature shipped in
[elastic/kibana#264457](elastic/kibana#264457)
(v9.5.0). A follow-up,
[elastic/kibana#271437](elastic/kibana#271437),
moved the two featured items from a hardcoded list to actions on a
`FEATURED_ADD_PANEL_TRIGGER`; the visible result is unchanged, but the
original PR's `featured_menu_items.ts` no longer exists, so all labels
were re-confirmed at HEAD.
- Confirmed strings: **Add** button, **Add to dashboard** flyout,
**New** / **From library** tabs, **Visualization** ("Build charts,
metrics, and tables with a point-and-click editor."), **Visualization
(query)** ("Build charts, metrics, and tables with ES|QL."), **Other
visualizations** group, **Vega**. Discover session is registered under
`ADD_PANEL_VISUALIZATION_GROUP` (**Other visualizations**).

## Out of scope (intentional)

- Tutorial steps that read `Select **Add** > **Visualization**` in
`create-dashboard-of-panels-with-ecommerce-data.md` and
`create-dashboard-of-panels-with-web-server-data.md` were left
unchanged: the label path still resolves correctly in the 9.5 flyout
(**Add**, then the **Visualization** featured item).
- `add-controls.md` (`Add > Controls > …`) was left unchanged; the
controls flow is a separate area not covered by this redesign issue.
- `create-dashboard.md` was left unchanged: it describes panel-adding at
a high level and links to `visualize.md`, where the flyout is now
documented.

## Screenshots to add or update

- [x] `explore-analyze/visualize.md` — new **Add to dashboard** flyout:
consider adding a screenshot of the flyout (New tab with featured items)
since it is a new, visually distinct surface for evaluators and new
users. Prose describes it, but the layout is easier to grasp visually.
-> no value, not adding

---

> **AI-generated draft** — created with Claude Opus 4.8.
> Review all generated content for factual accuracy before merging.

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Visha Angelova <91186315+vishaangelova@users.noreply.github.com>

Author: 3 people

explore-analyze/dashboards/drilldowns.md

@@ -62,8 +62,8 @@ Use the [**Sample web logs**](../index.md#gs-get-data-into-kibana) data to creat
 1. Add the **Sample web logs** data.
 2. Create a new dashboard.
 
-    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** > **From library** in the application menu.
-    * {applies_to}`stack: ga 9.0-9.1` Click **Add from library** in the dashboard toolbar.
+    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu, then select **From library**.
+    * {applies_to}`stack: ga 9.0-9.1` Select **Add from library** in the application menu.
 
 3. Add the following panel:
 
@@ -118,8 +118,8 @@ For example, if you have a dashboard that shows data from a Github repository, y
 3. In the application menu, click **Edit**.
 4. Create a pie chart.
 
-    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** > **Visualization** in the application menu.
-    * {applies_to}`stack: ga 9.0-9.1` Click **Create visualization** in the dashboard toolbar.
+    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu, then select **Visualization**.
+    * {applies_to}`stack: ga 9.0-9.1` Select **Create visualization** in the application menu.
 
 2. From the **Chart type** dropdown, select **Pie**.
 3. From the **Available fields** list, drag **machine.os.keyword** to the workspace.

explore-analyze/discover/save-open-search.md

@@ -189,10 +189,9 @@ Use this option to create a single-tab Discover session directly on the dashboar
 
 You need permission to access Discover, and the dashboard must be in **Edit** mode.
 
-1. On the dashboard, select **Add panel** > **New panel**.
-2. In the **Visualizations** group, select {icon}`app_discover` **Discover session**. Discover opens in embedded editor mode.
-3. Configure the session: enter a query, adjust columns, sort, and other view settings as needed.
-4. Select **Save and return** in the application menu to add the configured panel to the dashboard.
+1. From the application menu, add a new **Discover session** panel.
+2. Configure the session: enter a query, adjust columns, sort, and apply other view settings as needed.
+3. Select **Save and return** in the application menu to add the configured panel to the dashboard.
 
 ### Manage Discover session panels on a dashboard [manage-discover-session-panels]
 

explore-analyze/kibana-data-exploration-learning-tutorial.md

@@ -282,8 +282,8 @@ You can also add panels powered by {{esql}} queries directly from the dashboard.
 
 1. Add a new panel:
 
-   - {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** > **New panel** in the toolbar, then select **{{esql}}** under **Visualizations**.
-   - {applies_to}`stack: ga 9.0-9.1` Select **Add panel** in the toolbar, then select **{{esql}}** under **Visualizations**.
+   - {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu, then select **Visualization (query)** or **New panel** → **{{esql}}** under **Visualizations**, depending on your {{kib}} version.
+   - {applies_to}`stack: ga 9.0-9.1` Select **Add panel** in the application menu, then select **{{esql}}** under **Visualizations**.
 
 2. Enter the following query and run it:
 
@@ -1038,7 +1038,7 @@ One of {{kib}}'s strengths is how you can move between exploring raw data and vi
 :   Select {icon}`pencil` on any panel to open the inline **Configuration** flyout. For deeper changes, select **Edit in Lens** in the flyout to switch to the full editor, then **Save and return** to go back to the dashboard.
 
 **Add a new visualization directly from a dashboard**
-:   From a dashboard, select **Add** > **Visualization** to open the Lens editor, or **Add** > **New panel** and then **ES|QL** under **Visualizations** to create a chart from an {{esql}} query without going through Discover first.
+:   From a dashboard, select **Add**, then select **Visualization** to open the Lens editor, or **Visualization (query)** to create a chart from an {{esql}} query without going through Discover first.
 
 :::{tip}
 This back-and-forth workflow is especially useful when investigating anomalies: spot something unusual on a dashboard, jump to Discover to examine the raw events, refine your query, then save an updated visualization back to the dashboard.

explore-analyze/visualize.md

@@ -20,10 +20,10 @@ $$$panels-editors$$$
 | --- | --- | --- |
 | Visualizations | [Lens](visualize/lens.md) | Create powerful charts in {{kib}}. This is the default editor. |
 |  | [{{esql}}](/explore-analyze/query-filter/languages/esql-kibana.md) | Create visualizations from {{esql}} queries |
-|  | [Discover sessions](discover.md) {applies_to}`stack: ga 9.4` {applies_to}`serverless: ga` | Create a Discover session directly in your dashboard. Saved sessions can be added to multiple dashboards from the **Add panel** flow. |
+|  | [Discover sessions](discover.md) {applies_to}`stack: ga 9.4` {applies_to}`serverless: ga` | Create a Discover session directly in your dashboard. Saved sessions can be added to multiple dashboards from the dashboard **Add** menu. |
 |  | [Maps](visualize/maps.md) | Create beautiful displays of your geographical data |
 |  | [Alerts](visualize/alert-panels.md) | View Observability or Security alerts in your dashboard |
-|  | [Custom visualizations](visualize/custom-visualizations-with-vega.md) | Use Vega to create new types of visualizations |
+|  | [Vega or custom visualizations](visualize/custom-visualizations-with-vega.md) | Use Vega to create new types of visualizations |
 |  | | |
 | Annotations and navigation | [Collapsible sections](dashboards/arrange-panels.md#collapsible-sections) | Organize your dashboard into sections that can be collapsed and save loading time |
 |  | [Markdown text](visualize/text-panels.md) | Add context to your dashboard with markdown-based **text** |
@@ -44,5 +44,5 @@ $$$panels-editors$$$
 |  | [TSVB](visualize/legacy-editors/tsvb.md) | Visualize time-based data through various panel types |
 
 :::{note}
-Legacy panel types only appear in the **Add panel** dashboard menu if you already have such panels in your dashboards. If you have never used these panel types, use Lens instead.
+Legacy panel types only appear in the dashboard **Add** menu if you already have such panels in your dashboards. If you have never used these panel types, use Lens instead.
 :::

explore-analyze/visualize/_snippets/emoji-table-esql.md

@@ -17,8 +17,8 @@ To create the visualization:
 
 1. Open a dashboard and add a new {{esql}} visualization:
 
-    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** > **New panel** in the toolbar, then choose **{{esql}}** under **Visualizations**.
-    * {applies_to}`stack: ga 9.0-9.1` Click **Add panel** in the dashboard toolbar, then choose **{{esql}}**.
+    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu, then select **Visualization (query)** or **New panel** → **{{esql}}** under **Visualizations**, depending on your {{kib}} version.
+    * {applies_to}`stack: ga 9.0-9.1` Select **Add panel** in the application menu, then select **{{esql}}**.
 
 2. Enter the following query:
 

explore-analyze/visualize/alert-panels.md

@@ -12,8 +12,12 @@ To view alerts in a dashboard, add **Alerts** panels that show selected alerts.
 
 ## Create an alerts panel
 
-1. From your dashboard, select **Add panel**.
-2. In the **Add panel** flyout, select **Alerts**. The configuration flyout appears.
+1. Open the panel menu from your dashboard.
+
+    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu and, if required, **New panel**.
+    * {applies_to}`stack: ga 9.1` Select **Add panel** in the application menu.
+
+2. Select **Alerts**. The configuration flyout appears.
 3. ({{stack}} deployments only) Under **Solution**, select either **Observability** or **Security** to specify the type of alerts you want to display. 
 4. Under **Filter by** select either **Rule tags** or **Rule types**. 
 5. (Optional) To use both types of filters, first define one filter, then use the boolean **+ OR** or **+ AND** options that appear to define the second filter.

explore-analyze/visualize/custom-visualizations-with-vega.md

@@ -61,7 +61,7 @@ Before starting, add the eCommerce sample data that you’ll use in your spec, t
 
 Open **Vega-Lite** and change the time range.
 
-1. On the dashboard, click **Select type**, then select **Custom visualization**.
+1. In the application menu, select **Vega** or **Custom visualization**, depending on your {{kib}} version.
 
     A pre-populated line chart displays the total number of documents.
 

explore-analyze/visualize/esorql.md

@@ -36,14 +36,16 @@ You can then **Save** and add it to an existing or a new dashboard using the sav
 
 1. Add a new panel from your dashboard.
 
-    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** > **New panel** in the toolbar.
-    * {applies_to}`stack: ga 9.0-9.1` Click **Add panel** in the dashboard toolbar.
+    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu and, if required, **New panel**.
+    * {applies_to}`stack: ga 9.0-9.1` Select **Add panel** in the application menu.
 
    ::::{tip}
    If you haven't created a [data view](/explore-analyze/find-and-organize/data-views.md) and you don't have a dashboard yet, the **Dashboards** page offers you the possibility to **Try ES|QL** right away. By selecting this option, a dashboard is created with an ES|QL visualization that you can interact with and configure using ES|QL.
    ::::
 
-2. Choose **ES|QL** under **Visualizations**. An ES|QL editor appears and lets you configure your query and its associated visualization. The **Suggestions** panel can help you find alternative ways to configure the visualization.
+2. Select **Visualization (query)** or **ES|QL** under **Visualizations**, depending on your {{kib}} version.
+
+   An ES|QL editor appears and lets you configure your query and its associated visualization. The **Suggestions** panel can help you find alternative ways to configure the visualization.
 
    ::::{tip}
    Check the [ES|QL reference](elasticsearch://reference/query-languages/esql.md) to get familiar with the syntax and [optimize your query](elasticsearch://reference/query-languages/esql/esql-query-performance.md).

explore-analyze/visualize/image-panels.md

@@ -20,8 +20,12 @@ Image uploads are limited to 10 MiB.
 
 You can upload images from your computer, select previously uploaded images, or add images from an external link.
 
-1. From your dashboard, select **Add panel**.
-2. In the **Add panel** flyout, select **Image**. The **Add image** flyout appears and lets you add and configure the image you want to display.
+1. From your dashboard, open the panel menu.
+
+    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu and, if required, **New panel**.
+    * {applies_to}`stack: ga 9.0-9.1` Select **Add panel** in the application menu.
+
+2. Select **Image**. The **Add image** flyout appears and lets you add and configure the image you want to display.
 3. Add your image and configure the settings, and then click **Save**.
 
 :::{image} /explore-analyze/images/kibana-dashboard_addImageEditor_8.7.0.png

explore-analyze/visualize/link-panels.md

@@ -24,12 +24,12 @@ You can use **Links** panels to create links to other dashboards or external web
 
 ## Add a links panel [add-links-panel]
 
-1. Add a new panel.
+1. Open the panel menu.
 
-    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** > **New panel** in the toolbar.
-    * {applies_to}`stack: ga 9.0-9.1` Click **Add panel** in the dashboard toolbar.
+    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu and, if required, **New panel**.
+    * {applies_to}`stack: ga 9.0-9.1` Select **Add panel** in the application menu.
 
-2. In the **Add panel** flyout, select **Links**. The **Create links panel** flyout appears and lets you add the link you want to display.
+2. Select **Links**. The **Create links panel** flyout appears and lets you add the link you want to display.
 3. Choose between the panel displaying vertically or horizontally on your dashboard and add your link.
 4. Specify the following:
 
@@ -46,10 +46,10 @@ You can use **Links** panels to create links to other dashboards or external web
 
 To add a previously saved links panel to another dashboard:
 
-1. Open the **Add from library** flyout.
+1. Open the library panel menu.
 
-    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** > **From library** in the toolbar.
-    * {applies_to}`stack: ga 9.0-9.1` Click **Add from library** in the dashboard toolbar.
+    * {applies_to}`serverless:` {applies_to}`stack: ga 9.2+` Select **Add** in the application menu, then select **From library**.
+    * {applies_to}`stack: ga 9.0-9.1` Select **Add from library** in the application menu.
 
 2. Select **Links** from the **Types** dropdown and then select the Links panel you want to add.
 3. Click **Save**.