[DOC] Update Dev Tools for navigation changes

_dashboards/dev-tools/index-dev.md

@@ -7,14 +7,16 @@ 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: 
+Interact directly with OpenSearch by using **Dev Tools** to 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 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.
 
-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 
+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`.
 
-Write your queries in the editor pane on the left side of the console:
+An example of the query and response panes is shown in the following image.
 
-<img src="{{site.url}}{{site.baseurl}}/images/dev-tools/dev-tools-request.png" alt="Request pane">{: .img-fluid }
+<img src="{{site.url}}{{site.baseurl}}/images/dashboards/query-request-ui.png" alt="Console UI with query and request">
 
-Collapse or expand your query by selecting the triangle next to the line numbers.
-{: .tip}
+### Query options 
 
-To learn more about writing queries in OpenSearch domain-specific language (DSL), see [Query DSL]({{site.url}}{{site.baseurl}}/opensearch/query-dsl).
+When writing queries using the console, there are common features that can help you write queries more efficiently and accurately. The following table describes these features and how you can use them.
 
-### Comments
-
-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 | Description | How to use |
+--------|-------------|------------|
+**Collapsing or expanding a query** | Helpful to use when you have a long query or only want to focus on a specific part of the 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. |
+**OpenSearch search language** | Helpful to use when you need flexibility in writing complex queries. | To learn how to use the OpenSearch query domain-specific language (DSL), see [Query DSL]({{site.url}}{{site.baseurl}}/opensearch/query-dsl/). |
+**Single-line comments** | Helpful to use when you want to explain what the query does or to exclude parts of a query. | To add notes that are not interpreted by OpenSearch to your queries, use a hash (`#`) to start the single-line comment. |
+**Autocomplete** | Helpful to use when for suggestions for correct syntax and keywords, avoiding typos and errors, and reducing the amount of typing you do. | To define your preferences for autocomplete suggestions, configure them in **Settings**. |
+**Auto indenting** | Helpful to use to put the request body on a single line, which is useful for working with [bulk APIs]({{site.url}}{{site.baseurl}}/api-reference/document-apis/bulk/). Auto indenting a collapsed query expands it. | 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**. |
+**Request history** | Helpful for displaying 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**. |
+**Keyboard shortcuts** | Helpful for saving time, improving efficiency, and avoiding typos and errors. | To view all available keyboard shortcuts, select **Help** from the top menu. |
+**Documentation access from the console** | Helpful for improving documentation discoverability. | 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 in place of the `curl` command. If you paste a `curl` command directly into the console, the command is automatically converted into the format that 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/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.