docs: updates for empty dashboard state (#65573)

* empty dashboard related updates

* updated steps to clearly indicate button names

Some steps indicated the heading as the thing to click rather than the button text. Also some of the button text wasn't quite accurate.

* remove incorrect instruction

* apply suggestion from review

Co-authored-by: Christopher Moyer <35463610+chri2547@users.noreply.github.com>

* pushing empty commit to trigger linting

* triggering linting

---------

Co-authored-by: Christopher Moyer <35463610+chri2547@users.noreply.github.com>

docs/sources/dashboards/build-dashboards/create-dashboard/index.md

@@ -23,19 +23,20 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
 
 **To create a dashboard**:
 
-1. Sign in to Grafana, hover your cursor over **Dashboard**, and click **+ New Dashboard**.
+1. Click **Dashboards** in the left-side menu.
-1. Click **Add a new panel**.
+1. Click **New** and select **New Dashboard**.
-1. In the first line of the **Query** tab, click the drop-down list and select a data source.
+1. On the empty dashboard, click **+ Add visualization**.
+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.
 
    For more information about data sources, refer to [Data sources]({{< relref "../../../datasources/" >}}) for specific guidelines.
 
-1. In the Visualization list, select a visualization type.
+1. In the visualization list, select a visualization type.
+
+   ![Visualization selector](/media/docs/grafana/dashboards/screenshot-select-visualization-9-5.png)
 
    Grafana displays a preview of your query results with the visualization applied.
 
-   ![](/static/img/docs/panel-editor/select-visualization-8-0.png)
-
    For more information about individual visualizations, refer to [Visualizations options]({{< relref "../../../panels-visualizations/visualizations/" >}}).
 
 1. Refer to the following documentation for ways you can adjust panel settings.
@@ -48,9 +49,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee
    - [Configure thresholds]({{< relref "../../../panels-visualizations/configure-thresholds/" >}})
    - [Configure standard options]({{< relref "../../../panels-visualizations/configure-standard-options/" >}})
 
-1. Add a note to describe the visualization (or describe your changes) and then click **Save** in the upper-right corner of the page.
+1. When you've finished editing your panel, click **Save** in the top right corner.
-
+1. Enter a name for your dashboard and select a folder, if applicable.
-   Notes can be helpful if you need to revert the dashboard to a previous version.
+1. Click **Save**.
 
 ## Configure repeating rows
 
@@ -64,13 +65,15 @@ To see an example of repeating rows, refer to [Dashboard with repeating rows](ht
 
 **To configure repeating rows:**
 
-1. On the dashboard home page, click **Add panel**.
+1. Click **Dashboards** in the left-side menu.
+1. Navigate to the dashboard you want to work on.
+1. At the top of the dashboard, click **Add** and select **Row** in the dropdown.
 
-1. On the **Add a panel** dialog box, click **Add a new row**.
+   If the dashboard is empty, you can click the **+ Add row** button in the middle of the dashboard.
 
 1. Hover over the row title and click the cog icon.
-
+1. In the **Row Options** dialog box, add a title and select the variable for which you want to add repeating rows.
-1. On the **Row Options** dialog box, add a title and select the variable for which you want to add repeating rows.
+1. Click **Update**.
 
 > **Note:** To provide context to dashboard users, add the variable to the row title.
 
@@ -78,14 +81,14 @@ To see an example of repeating rows, refer to [Dashboard with repeating rows](ht
 
 You can place a panel on a dashboard in any location.
 
-1. Open the dashboard.
+1. Click **Dashboards** in the left-side menu.
-
+1. Navigate to the dashboard you want to work on.
 1. Click the panel title and drag the panel to the new location.
 
 ## Resize a panel
 
 You can size a dashboard panel to suits your needs.
 
-1. Open the dashboard.
+1. Click **Dashboards** in the left-side menu.
-
+1. Navigate to the dashboard you want to work on.
 1. To adjust the size of the panel, click and drag the lower-right corner of the panel.

docs/sources/dashboards/build-dashboards/manage-library-panels/index.md

@@ -40,12 +40,9 @@ Once created, you can modify the library panel using any dashboard on which it a
 
 Add a Grafana library panel to a dashboard when you want to provide visualizations to other dashboard users.
 
-1. Hover over the **Dashboards** option on the left menu, then select **New dashboard** from the drop-down options.
+1. Click **Dashboards** in the left-side menu.
-
+1. Click **New** and select **New Dashboard**.
-   The **Add** panel dialog opens.
+1. On the empty dashboard, click **+ Import library panel**.
-   {{< figure src="/static/img/docs/library-panels/add-library-panel-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}}
-
-1. Click the **Add a panel from the panel library** option.
 
    You will see a list of your library panels.
 
@@ -56,17 +53,20 @@ Add a Grafana library panel to a dashboard when you want to provide visualizatio
 
 Unlink a library panel when you want to make a change to the panel and not affect other instances of the library panel.
 
-1. Hover over **Dashboard** on the left menu, and then click **Library panels**.
+1. Click **Dashboards** in the left-side menu.
+1. Click **Library panels**.
 1. Select a library panel that is being used in different dashboards.
 1. Select the panel you want to unlink.
-1. Click the title of the panel and then click **Edit**. The panel opens in edit mode.
+1. Hover over any part of the panel to display the actions menu on the top right corner.
-1. Click the **Unlink** option on the top right corner of the page.
+1. Click the menu and select **Edit**.
+1. Click **Unlink** on the top right corner of the page.
 
 ## View a list of library panels
 
 You can view a list of available library panels and search for a library panel.
 
-1. Hover over the **Dashboard** option on the left menu, then click **Library panels**.
+1. Click **Dashboards** in the left-side menu.
+1. Click **Library panels**.
 
    You can see a list of previously defined library panels.
    {{< figure src="/static/img/docs/library-panels/library-panel-list-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}}
@@ -79,8 +79,6 @@ You can view a list of available library panels and search for a library panel.
 
 Delete a library panel when you no longer need it.
 
-1. Hover over **Dashboard** on the left menu, and select **Library panels**.
+1. Click **Dashboards** in the left-side menu.
-
+1. Click **Library panels**.
-1. Select the panel you want to delete.
-
 1. Click the delete icon next to the library panel name.

docs/sources/getting-started/build-first-dashboard.md

@@ -40,15 +40,15 @@ To sign in to Grafana for the first time:
 To create your first dashboard:
 
 1. Click **Dashboards** in the left-side menu.
-1. On the Dashboards, click **New** and select **New Dashboard** from dropdown menu.
+1. On the Dashboards page, click **New** and select **New Dashboard** from the dropdown menu.
-1. On the dashboard, click **Add a new panel**.
+1. On the dashboard, click **+ Add visualization**.
 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.
 
    This generates the Random Walk dashboard.
 
 1. Click **Save** in the top right corner of your screen to save the dashboard.
-1. Add a descriptive name, and then click **Save**.
+1. Add a descriptive name for the dashboard, and then click **Save**.
 
 Congratulations, you have created your first dashboard and it is displaying results.
 

docs/sources/tutorials/grafana-fundamentals/index.md

@@ -215,16 +215,17 @@ Dashboards consist of _panels_, each representing a part of the story you want y
 
 Every panel consists of a _query_ and a _visualization_. The query defines _what_ data you want to display, whereas the visualization defines _how_ the data is displayed.
 
-1. In the sidebar, hover your cursor over the **Create** (plus sign) icon and then click **Dashboard**.
+1. Click **Dashboard** in the left-side menu.
-1. Click **Add a new panel**.
+1. On the Dashboards page, click **New** and select **New Dashboard** in the dropdown.
-1. In the **Query editor** below the graph, enter the query from earlier and then press Shift + Enter:
+1. Click **+ Add visualization**.
+1. In the **Query** tab below the graph, enter the query from earlier and then press Shift + Enter:
 
    ```
    sum(rate(tns_request_duration_seconds_count[5m])) by(route)
    ```
 
 1. In the **Legend** field, enter **{{route}}** to rename the time series in the legend. The graph legend updates when you click outside the field.
-1. In the Panel editor on the right, under **Settings**, change the panel title to "Traffic".
+1. In the panel editor on the right, under **Panel options**, change the panel title to "Traffic".
 1. Click **Apply** in the top-right corner to save the panel and go back to the dashboard view.
 1. Click the **Save dashboard** (disk) icon at the top of the dashboard to save your dashboard.
 1. Enter a name in the **Dashboard name** field and then click **Save**.