[8.x] [Docs] Add visuals to the Panels and Visualizations pages + con…

…sistency edits (#194765) (#194850)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Docs] Add visuals to the Panels and Visualizations pages +
consistency edits
(#194765)](#194765)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"wajihaparvez","email":"wajiha.parvez@elastic.co"},"sourceCommit":{"committedDate":"2024-10-03T14:48:44Z","message":"[Docs]
Add visuals to the Panels and Visualizations pages + consistency edits
(#194765)\n\n## Summary\r\n\r\nAdded visuals to the [Panels
and\r\nVisualizations](https://www.elastic.co/guide/en/kibana/master/_panels_and_visualizations.html)\r\npages
+ made some consistency edits to the
text.\r\n\r\nRel:[#457](elastic/platform-docs-team#457)
and\r\n[#466](https://github.com/elastic/platform-docs-team/issues/466)","sha":"29db0bc3ece63e242748006cee1b05755a305307","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Docs","release_note:skip","v9.0.0","v8.16.0","backport:version"],"title":"[Docs]
Add visuals to the Panels and Visualizations pages + consistency
edits","number":194765,"url":"https://github.com/elastic/kibana/pull/194765","mergeCommit":{"message":"[Docs]
Add visuals to the Panels and Visualizations pages + consistency edits
(#194765)\n\n## Summary\r\n\r\nAdded visuals to the [Panels
and\r\nVisualizations](https://www.elastic.co/guide/en/kibana/master/_panels_and_visualizations.html)\r\npages
+ made some consistency edits to the
text.\r\n\r\nRel:[#457](elastic/platform-docs-team#457)
and\r\n[#466](https://github.com/elastic/platform-docs-team/issues/466)","sha":"29db0bc3ece63e242748006cee1b05755a305307"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194765","number":194765,"mergeCommit":{"message":"[Docs]
Add visuals to the Panels and Visualizations pages + consistency edits
(#194765)\n\n## Summary\r\n\r\nAdded visuals to the [Panels
and\r\nVisualizations](https://www.elastic.co/guide/en/kibana/master/_panels_and_visualizations.html)\r\npages
+ made some consistency edits to the
text.\r\n\r\nRel:[#457](elastic/platform-docs-team#457)
and\r\n[#466](https://github.com/elastic/platform-docs-team/issues/466)","sha":"29db0bc3ece63e242748006cee1b05755a305307"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: wajihaparvez <wajiha.parvez@elastic.co>

docs/user/dashboard/create-visualizations.asciidoc

@@ -83,7 +83,7 @@ There are also some common options that you can configure on the various types o
 [[save-to-visualize-library]]
 === Save to the Visualize Library
 
-To use a panel on multiple dashboards, you can save it to the *Visualize Library*. Any updates made to a shared panel is replicated to all dashboards where the panel is added.
+To use a panel on multiple dashboards, you can save it to the *Visualize Library*. Any updates made to a shared panel are replicated to all dashboards where the panel is added.
 //When panels are saved in the *Visualize Library*, image:dashboard/images/visualize-library-icon.png[Visualize Library icon] appears in the panel header.
 
 If you created the panel from a dashboard:
@@ -92,7 +92,7 @@ If you created the panel from a dashboard:
 
 . Enter the *Title* and add any applicable <<managing-tags,*Tags*>>.
 
-. Select *Add to Dashboard after saving* to add the panel to your dashboard at the same time.
+. Select *Add to Dashboards after saving* to add the panel to your dashboard at the same time.
 
 . Click *Save and return*.
 
@@ -108,6 +108,12 @@ If you created the panel from the *Visualize Library*:
 
 * To save the panel only to the *Visualize Library*, select *None*, add any applicable <<managing-tags,*Tags*>>, then click *Save and add to library*.
 
+To add unsaved dashboard panels to the *Visualize Library*:
+
+. Open the panel menu, then select *More > Save to library*.
+
+. Enter the panel title, then click *Save*.
+
 [float]
 [[save-to-the-dashboard]]
 === Save to the dashboard
@@ -138,12 +144,6 @@ If you created the panel from the *Visualize Library*:
 
 * If you want to add the panel to a new dashboard, select *New*, then click *Save and go to Dashboard*.
 
-To add unsaved dashboard panels to the *Visualize Library*:
-
-. Open the panel menu, then select *More > Save to library*.
-
-. Enter the panel title, then click *Save*.
-
 [[explore-the-underlying-documents]]
 === Link to Discover
 
@@ -182,7 +182,7 @@ To make changes without changing the original version, open the panel menu, then
 
 * *Convert to Lens* &mdash; Opens *TSVB* and aggregation-based visualizations in *Lens*.
 
-* *Panel settings* &mdash; Opens the *Panel settings* window to change the *title*, *description*, and *time range*.
+* *Settings* &mdash; Opens the *Settings* window to change the *title*, *description*, and *time range*.
 
 * *More > Replace panel* &mdash; Opens the *Visualize Library* so you can select a new panel to replace the existing panel.
 
@@ -227,27 +227,29 @@ The Maps editor has extensive documentation. For your reading comfort, we have m
 [[field-statistics-dashboard]]
 == Field statistics
 
-**Field statistics** panels allow to display a table with additional field information in your dashboards, such as document count, values, and distribution. 
+**Field statistics** panels allow you to display a table with additional field information in your dashboards, such as document count, values, and distribution. 
 
 . From your dashboard, select **Add panel**.
 . Choose **Field statistics** under **Visualizations**. An ES|QL editor appears and lets you configure your query with the fields and information that you want to show.
 +
 TIP: Check the link:esql-language.html[ES|QL reference] to get familiar with the syntax and optimize your query.
 . When editing your query or its configuration, run the query to update the preview of the visualization.
 +
-image:images/dashboards-field-statistics.png[Editing a field statistics dashboard panel]
+image:https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte2b1371159f5b9ff/66fc6ca13804eb2532b20727/field-statistics-preview-8.16.0.gif[Editing a field statistics dashboard panel and running the query to update the preview]
 . Select **Apply and close** to save the visualization to the dashboard.
 
 include::vega.asciidoc[leveloffset=-1]
 
 [[add-text]]
 == Text panels
 
-To provide context to your dashboard panels, add *Text* panels that display important information, instructions, images, and more. You create *Text* panels using GitHub-flavored Markdown text.
+To provide context to your dashboard panels, add *Text* panels that display important information, instructions, images, and more. You can create *Text* panels using GitHub-flavored Markdown text.
 
-. On the dashboard, click image:images/dashboard_createNewTextButton_7.15.0.png[Create New Text button in dashboard toolbar].
+. From your dashboard, select *Add panel*.
 
-. In the *Markdown* field, enter the text, then click *Update*.
+. In the *Add panel* flyout, select *Text*. A Markdown editor appears and lets you configure the information you want to display.
+
+. In the *Markdown* field, enter your text, then click *Update*.
 
 For example, when you enter:
 
@@ -269,7 +271,7 @@ The following image is displayed:
 [role="screenshot"]
 image::images/markdown_example_4.png[Panel with markdown image]
 
-For detailed information about writing on GitHub, click *Help*.
+For detailed information about writing on GitHub, click *Help* on the top-right of the Markdown editor.
 
 
 
@@ -278,8 +280,11 @@ For detailed information about writing on GitHub, click *Help*.
 
 To personalize your dashboards, add your own logos and graphics with the *Image* panel. You can upload images from your computer, select previously uploaded images, or add images from an external link.
 
-. On the dashboard, click image:images/dashboard_createNewImageButton_8.7.0.png[Create New Image button in dashboard toolbar].
-. Use the editor to add an image.
+. From your dashboard, select *Add panel*.
+
+. In the *Add panel* flyout, select *Image*. The *Add image* flyout appears and lets you add and configure the image you want to display.
+
+. Add your image and configure the settings, and then click *Save*.
 
 [role="screenshot"]
 image::images/dashboard_addImageEditor_8.7.0.png[Add image editor]

docs/user/dashboard/links-panel.asciidoc

@@ -1,44 +1,43 @@
 [[dashboard-links]]
 === Link panels
 
-You can use *Links* panels to create links to other dashboards or external websites. When creating links to other dashboards, you have the option to carry the time range and query and filters to apply to the linked dashboard. Links to external websites follow the <<external-URL-policy,`externalUrl.policy`>> settings. *Links* panels support vertical and horizontal layouts and may be saved to the *Library* for use on other dashboards.
+You can use **Links** panels to create links to other dashboards or external websites. When creating links to other dashboards, you have the option to carry the time range, query, and filters to apply over to the linked dashboard. Links to external websites follow the <<external-URL-policy,`externalUrl.policy`>> settings. **Links** panels support vertical and horizontal layouts and may be saved to the *Library* for use in other dashboards.
 
 [role="screenshot"]
 image::images/dashboard_links_panel.png[A screenshot displaying the new links panel]
 
 * <<add-links-panel, Add a links panel>>
 * <<add-links-panel-from-library, Add a links panel from the library>>
 * <<edit-links-panel, Edit links panels>>
-* <<delete-links-panels, Delete links panels>>
 
 [float]
 [[add-links-panel]]
 ==== Add a links panel
 
-To add a links panel to your dashboards:
+To add a links panel to your dashboard:
+
+. From your dashboard, select **Add panel**.
+
+. In the **Add panel** flyout, select **Links**. The **Create links panel** flyout appears and lets you add the link you want to display. 
+
+. Choose between the panel displaying vertically or horizontally on your dashboard and add your link. 
 
-. On the **Dashboards** page, click the dashboard **Title** you want to open. 
-. Click **Add panel > Links**.
-. In the **Create links panel** flyout choose between the panel displaying vertically or horizontally on your dashboard. 
-. Click **Add link**.
 . Specify the following:
-* **Go to** - Dashboard to link to another dashboard, or URL to link to an external website. 
+* **Go to** - Select *Dashboard* to link to another dashboard, or **URL** to link to an external website. 
 * **Choose destination** - Use the dropdown to select another dashboard or enter an external URL.
 * **Text** - Enter text for the link, which displays in the panel. 
-* **Options** - When linking to another dashboard use the sliders to use the filters and queries from the original dashboard, use the date range from the original dashboard, or open the dashboard in a new tab. When linking to an external URL use the sliders to open the URL in a new tab, or encode the URL. 
+* **Options** - When linking to another dashboard, use the sliders to use the filters and queries from the original dashboard, use the date range from the original dashboard, or open the dashboard in a new tab. When linking to an external URL, use the sliders to open the URL in a new tab, or encode the URL. 
 . Click **Add link**.
-. Click **Save**.
-. Enter the **Title** and **Description**, then click **Save**.
+. Select *Save to library* if you want to reuse the link in other dashboards, and then click **Save**.
 
 [float]
 [[add-links-panel-from-library]]
 ==== Add a links panel from the library
 
-By default links panels are saved to the library. To add a links panel to another dashboard:
+To add a previously saved links panel to another dashboard:
 
-. On the **Dashboards** page, click the dashboard **Title** you want to open. 
-. Click **Add from library**.
-. Select the links panel from the **Add from library** flyout.
+. From your dashboard, select **Add from library**.
+. In the **Add from library** flyout, select **Links** from the **Types** dropdown and then select the Links panel you want to add.
 . Click **Save**.  
 
 [float]
@@ -47,17 +46,10 @@ By default links panels are saved to the library. To add a links panel to anothe
 
 To edit links panels:
 
-. Click image:images/lens_layerActions_8.5.0.png[], then **Edit Links**. 
-. Click image:images/dashboard_controlsEditControl_8.3.0.png[] on the link.
-. Click **Update link**.
-. Click **Save**.
-
-[float]
-[[delete-links-panels]]
-==== Delete links panels
-
-To delete links panels:
-
-. Click image:images/lens_layerActions_8.5.0.png[], then **More**.
-. Click **Delete from dashboard**.
-. Click **Save**.
+. From the panel menu (image:images/lens_layerActions_8.5.0.png[panel menu image]), select **Edit Links**. 
+. Click the Edit icon (image:images/dashboard_controlsEditControl_8.3.0.png[Edit icon image]) next to the link.
++
+[role="screenshot"]
+image::images/edit-links-panel-8.16.0.png[A screenshot displaying the Edit icon next to the link]
+. Edit the link as needed and then click **Update link**.
+. Click **Save**.