[DOC] Update Dev Tools for navigation changes (#4874)

Update UI screenshots and make copy edits to content

---------

Signed-off-by: Melissa Vagi <vagimeli@amazon.com>
Co-authored-by: Nathan Bower <nbower@amazon.com>

_dashboards/dev-tools/index-dev.md

@@ -7,14 +7,15 @@ has_children: true
 
 # Dev Tools
 
-Interact directly with OpenSearch by using **Dev Tools** to set up your OpenSearch Dashboards environment, run queries, explore data, and debug problems. To access the Dev Tools console, select **Dev Tools** from the **Management** menu on the OpenSearch Dashboards home page. The following are examples of how you can use the Dev Tools console in OpenSearch Dashboards: 
+**Dev Tools** is a development environment that lets you set up your OpenSearch Dashboards environment, run queries, explore data, and debug problems. You can use the Dev Tools console to: 
 
-- Set up your OpenSearch Dashboards environment. For example, you can use the console to configure authentication settings for your OpenSearch Dashboards instance. 
-- [Run queries to explore your data]({{site.url}}{{site.baseurl}}/dashboards/dev-tools/run-queries/). For example, you can use the console to run a query to find all the documents in your index that contain a specific word.
-- Debug problems with your queries. For example, if your query is not returning the results you expect, you can use the console to look for error messages and identify the problem.
-- Learn about the APIs in OpenSearch. For example, you can use the API reference documentation linked in the console (select the question circle icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/question-circle.png" class="inline-icon" alt="question circle icon"/>{:/})) to look up the syntax for different API calls.
-- Develop custom visualizations. For example, you can use the console to create Vega visualizations. 
-- Customize the appearance and behavior of dashboards. For example, you can use the console to customize dashboard visualization colors or to add new filters. 
-- Identify and fix bugs. For example, you can use the console to view logs and identify the cause of the problem.
+- **Set up your OpenSearch Dashboards environment.** For example, you can use the console to configure authentication settings for your OpenSearch Dashboards instance. 
+- **[Run queries to explore your data]({{site.url}}{{site.baseurl}}/dashboards/dev-tools/run-queries/).** For example, you can use the console to tune your queries for relevance.
+- **Debug problems with your queries.** For example, if your query is not returning the results you expect, you can use the console to identify the problem.
+- **Learn about the APIs in OpenSearch.** For example, you can use the API reference documentation linked in the console to look up the syntax for different API calls (select the question circle icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/question-circle.png" class="inline-icon" alt="question circle icon"/>{:/})).
+- **Develop custom visualizations.** For example, you can use the console to create [Vega visualizations]({{site.url}}{{site.baseurl}}/dashboards/visualize/viz-index/#vega). 
+- **Customize the appearance and behavior of dashboards.** For example, you can use the console to customize dashboard visualization colors or to add new filters. 
 
-The Dev Tools console is a valuable resource for developers, analysts, and anyone else who works with OpenSearch data.
+To access the console, go to the OpenSearch Dashboards main menu and select **Management** > **Dev Tools**. An example is shown in the following image.
+
+<img src="{{site.url}}{{site.baseurl}}/images/dashboards/dev-tools-ui.png" alt="Dev Tools console interface" width="700"/>

_dashboards/dev-tools/run-queries.md

@@ -9,44 +9,36 @@ redirect_from:
 
 # Running queries in the Dev Tools console
 
-Use the Dev Tools console to send queries to OpenSearch. To access the Dev Tools console, select **Dev Tools** under the **Management** menu on the OpenSearch Dashboards home page. 
+The Dev Tools console can be used to send queries to OpenSearch. To access the console, go to the OpenSearch Dashboards main menu and select **Management** > **Dev Tools**.
+## Writing queries
 
-## Writing queries 
+OpenSearch provides a query domain-specific language (DSL) called [Query DSL]({{site.url}}{{site.baseurl}}/opensearch/query-dsl/). It is a flexible language with a JSON interface. 
 
-Write your queries in the editor pane on the left side of the console:
+To write your queries, use the editor pane on the left side of the console. To send a query to OpenSearch, select the query by placing the cursor in the query text and then selecting the play icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/play-icon.png" class="inline-icon" alt="play icon"/>{:/}) on the upper right of the request or press `Ctrl/Cmd+Enter`. The response from OpenSearch is displayed in the response pane on the right side of the console. To run multiple commands simultaneously, select all the commands in the editor pane, and then select the play icon or press `Ctrl/Cmd+Enter`. 
 
-<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/dev-tools-request.png" alt="Request pane">{: .img-fluid }
+An example of the query and response panes is shown in the following image.
 
-Collapse or expand your query by selecting the triangle next to the line numbers.
-{: .tip}
+<img src="{{site.url}}{{site.baseurl}}/images/dashboards/query-request-ui.png" alt="Console UI with query and request">
 
-To learn more about writing queries in OpenSearch domain-specific language (DSL), see [Query DSL]({{site.url}}{{site.baseurl}}/opensearch/query-dsl).
+### Query options 
 
-### Comments
+When writing queries using the console, there are common actions that can help you write queries more efficiently and accurately. The following table describes these features and how you can use them.
 
-Use `#` at the beginning of a line to write single-line comments.
-
-### Autocomplete
-
-OpenSearch provides autocomplete suggestions for fields, indexes and their aliases, and templates. To configure autocomplete preferences, update them in [Console Settings](#updating-the-console-settings).
-
-## Sending the request 
-
-To send a query to OpenSearch, select the query by placing the cursor anywhere in the query text. Then choose the play icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/play-icon.png" class="inline-icon" alt="play icon"/>{:/}) on the upper right of the request or press `Ctrl/Cmd+Enter`:
-
-<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/dev-tools-send.png" alt="Send request">
-
-OpenSearch displays the response in the response pane on the right side of the console:
-
-<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/dev-tools-response.png" alt="Response pane">{: .img-fluid }
+Feature | How to use |
+--------|------------|
+**Collapsing or expanding a query** | To hide or show details of your query, select the expander arrow ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/arrow-down-icon.png" class="inline-icon" alt="arrow down icon"/>{:/}) next to the line number. |
+**Auto indenting** | To use auto indent, select the queries that you want to format, then select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}), and choose **Auto indent**. |
+**Autocomplete** | To define your preferences for autocomplete suggestions, configure them in **Settings**. |
+**Request history** | To view request history, select **History** from the top menu. If you select the request you want to view from the left pane, the query is shown in the right pane. To copy the query into the editor pane, select the query text and then select **Apply**. To clear the history, select **Clear**. |
+**Keyboard shortcuts** | To view all available keyboard shortcuts, select **Help** from the top menu. |
+**Documentation access from the console** | To access OpenSearch documentation from the console, select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}) and choose **Open documentation**. |
 
 ## Working in the cURL and console formats
 
-The console uses an easier syntax to format REST requests than the `curl` command. 
+The console uses a simplified syntax to format REST requests instead of the `curl` command. If you paste a `curl` command directly into the console, the command is automatically converted into the format used by the console. To import a query in cURL format, select the query, then select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/icons/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}), and choose **Copy as cURL**. 
 
 For example, the following `curl` command runs a search query:
 
-````
 ```bash
 curl -XGET http://localhost:9200/shakespeare/_search?pretty -H 'Content-Type: application/json' -d'
 {
@@ -58,11 +50,9 @@ curl -XGET http://localhost:9200/shakespeare/_search?pretty -H 'Content-Type: ap
 }'
 ```
 {% include copy.html %}
-````
 
-The same query has a simpler syntax in the console format:
+The same query has a simplified syntax in the console format, as shown in the following example:
 
-````
 ```json
 GET shakespeare/_search
 {
@@ -74,41 +64,3 @@ GET shakespeare/_search
 }
 ```
 {% include copy-curl.html %}
-````
-
-If you paste a `curl` command directly into the console, the command is automatically converted into the format the console uses. 
-
-To import a query in cURL format, select the query, select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}), and choose **Copy as cURL**:
-
-<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/dev-tools-tools.png" alt="Console tools">
-
-## Viewing documentation
-
-To view the OpenSearch documentation, select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}) and choose **Open documentation**.
-
-## Auto indenting
-
-To use auto indent, select the queries that you want to format, select the wrench icon ({::nomarkdown}<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/wrench-icon.png" class="inline-icon" alt="wrench icon"/>{:/}), and choose **Auto indent**.
-
-Auto indenting a collapsed query expands it.
-
-Auto indenting a well-formatted query puts the request body on a single line. This is useful for working with [bulk APIs]({{site.url}}{{site.baseurl}}/api-reference/document-apis/bulk/).
-{: .tip}
-
-## Viewing your request history
-
-You can view up to the 500 most recent requests that OpenSearch ran successfully. To view request history, select **History** from the top menu. If you select the request you want to view from the left pane, the query is shown in the right pane. 
-
-To copy the query into the editor pane, select the query text and then select **Apply**. 
-
-To clear the history, select **Clear**.
-
-## Updating the console settings
-
-To update your preferences, select **Settings** from the top menu:
-
-<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/dev-tools-settings.png" width=400 alt="Settings">
-
-## Using keyboard shortcuts
-
-To view all available keyboard shortcuts, select **Help** from the top menu.