From da214735271e312271d75f83ce9b7dce48a8f9bb Mon Sep 17 00:00:00 2001
From: Isabel <76437239+imatwawana@users.noreply.github.com>
Date: Mon, 8 May 2023 14:24:23 -0400
Subject: [PATCH] docs: add empty dashboard & Add dropdown screenshots (#67588)

* added empty dashboard screenshots

* added Add dropdown screenshots

* removed screenshot from build first dashboard

* added Add dropdown guidance in panel editor page; updated headings

* added intro text in panel editor
---
 .../build-dashboards/create-dashboard/index.md         |  6 ++++++
 docs/sources/getting-started/build-first-dashboard.md  |  3 +++
 .../panel-editor-overview/index.md                     | 10 +++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/docs/sources/dashboards/build-dashboards/create-dashboard/index.md b/docs/sources/dashboards/build-dashboards/create-dashboard/index.md
index 7fc28605de7..f1cb628faf9 100644
--- a/docs/sources/dashboards/build-dashboards/create-dashboard/index.md
+++ b/docs/sources/dashboards/build-dashboards/create-dashboard/index.md
@@ -26,6 +26,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
 1. Click **Dashboards** in the left-side menu.
 1. Click **New** and select **New Dashboard**.
 1. On the empty dashboard, click **+ Add visualization**.
+
+   ![Empty dashboard state](/media/docs/grafana/dashboards/empty-dashboard-9.5.png)
+
 1. In the first line of the **Query** tab, click the dropdown list and select a data source.
 1. Write or construct a query in the query language of your data source.
 
@@ -59,6 +62,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
 
 1. Enter a name for your dashboard and select a folder, if applicable.
 1. Click **Save**.
+1. To add more panels to the dashboard, click **Add** in the dashboard header and select **Visualization** in the dropdown.
+
+   ![Add dropdown](/media/docs/grafana/dashboards/screenshot-add-dropdown-9.5.png)
 
 ## Configure repeating rows
 
diff --git a/docs/sources/getting-started/build-first-dashboard.md b/docs/sources/getting-started/build-first-dashboard.md
index c8a7378b812..8029ca3df1a 100644
--- a/docs/sources/getting-started/build-first-dashboard.md
+++ b/docs/sources/getting-started/build-first-dashboard.md
@@ -44,6 +44,9 @@ To create your first dashboard using the built-in `Grafana` data source:
 1. Click **Dashboards** in the left-side menu.
 1. On the Dashboards page, click **New** and select **New Dashboard** from the dropdown menu.
 1. On the dashboard, click **+ Add visualization**.
+
+   ![Empty dashboard state](/media/docs/grafana/dashboards/empty-dashboard-9.5.png)
+
 1. In the New dashboard/Edit panel view, go to the **Query** tab.
 1. Configure your [query]({{< relref "../panels-visualizations/query-transform-data/#add-a-query" >}}) by selecting `-- Grafana --` from the data source selector.
 
diff --git a/docs/sources/panels-visualizations/panel-editor-overview/index.md b/docs/sources/panels-visualizations/panel-editor-overview/index.md
index 2a74243d074..883e09b926a 100644
--- a/docs/sources/panels-visualizations/panel-editor-overview/index.md
+++ b/docs/sources/panels-visualizations/panel-editor-overview/index.md
@@ -24,8 +24,16 @@ weight: 1
 
 # Panel editor overview
 
+In the panel editor, you can update all the elements of a visualization including the data source, queries, time range, and visualization display options.
+
 ![Panel editor](/media/docs/grafana/panels-visualizations/screenshot-panel-editor-view.png)
 
+To add a panel in a new dashboard click **+ Add visualization** in the middle of the dashboard. To add a panel to an existing dashboard, click **Add** in the dashboard header and select **Visualization** in the dropdown:
+
+![Add dropdown](/media/docs/grafana/dashboards/screenshot-add-dropdown-9.5.png)
+
+## Panel editor
+
 This section describes the areas of the Grafana panel editor.
 
 1. Panel header: The header section lists the dashboard in which the panel appears and the following controls:
@@ -49,7 +57,7 @@ This section describes the areas of the Grafana panel editor.
 
 1. Panel display options: The display options section contains tabs where you configure almost every aspect of your data visualization.
 
-## Open the panel inspect drawer
+## Panel inspect drawer
 
 The inspect drawer helps you understand and troubleshoot your panels. You can view the raw data for any panel, export that data to a comma-separated values (CSV) file, view query requests, and export panel and data JSON.