Docs: Update postgresql and mssql docs (#56011)

* Update mssql docs first draft

* Update postgresql docs first draft

* update image tag

* add missing >

* Update docs/sources/datasources/mssql.md

* Update docs/sources/datasources/mssql.md

* Update docs/sources/datasources/postgres.md

* Update docs/sources/datasources/postgres.md

* Update docs/sources/datasources/postgres.md

* Reflect updated image names

Co-authored-by: Garrett Guillotte <100453168+gguillotte-grafana@users.noreply.github.com>

docs/sources/datasources/mssql.md

@@ -75,18 +75,51 @@ Make sure the user does not get any unwanted privileges from the public role.
 If you're using an older version of Microsoft SQL Server like 2008 and 2008R2 you may need to disable encryption to be able to connect.
 If possible, we recommend you to use the latest service pack available for optimal compatibility.
 
-## Query Editor
+## Query builder
 
-{{< figure src="/static/img/docs/v51/mssql_query_editor.png" class="docs-image--no-shadow" >}}
+{{< figure src="/static/img/docs/v92/mssql_query_builder.png" class="docs-image--no-shadow" >}}
 
-You will find the MSSQL query editor in the metrics tab in Graph, Singlestat or Table panel's edit mode. You enter edit mode by clicking the
-panel title, then edit. The editor allows you to define a SQL query to select data to be visualized.
+The MS SQL query builder is available when editing a panel using a MS SQL data source. The built query can be run by pressing the `Run query` button in the top right corner of the editor.
 
-1. Select _Format as_ `Time series` (for use in Graph or Singlestat panel's among others) or `Table` (for use in Table panel among others).
-1. This is the actual editor where you write your SQL queries.
-1. Show help section for MSSQL below the query editor.
-1. Show actual executed SQL query. Will be available first after a successful query has been executed.
-1. Add an additional query where an additional query editor will be displayed.
+### Format
+
+The response from MS SQL can be formatted as either a table or as a time series. To use the time series format one of the columns must be named `time`.
+
+### Dataset and Table selection
+
+In the dataset dropdown, choose the MS SQL database to query. The dropdown is be populated with the databases that the user has access to.
+When the dataset is selected, the table dropdown is populated with the tables that are available.
+
+### Columns and Aggregation functions (SELECT)
+
+Using the dropdown, select a column to include in the data. You can also specify an optional aggregation function.
+
+Add further value columns by clicking the plus button and another column dropdown appears.
+
+### Filter data (WHERE)
+
+To add a filter, flip the switch at the top of the editor.
+Using the first dropdown, select if all the filters need to match (AND) or if only one of the filters needs to match (OR).
+
+To add more columns to filter on use the plus button.
+
+### Group By
+
+To group the results by column, flip the group switch at the top of the editor. You can then choose which column to group the results by. The group by clause can be removed by pressing the X button.
+
+### Preview
+
+By flipping the preview switch at the top of the editor, you can get a preview of the SQL query generated by the query builder.
+
+## Code editor
+
+{{< figure src="/static/img/docs/v92/sql_code_editor.png" class="docs-image--no-shadow" >}}
+
+To make advanced queries, switch to the code editor by clicking `code` in the top right corner of the editor. The code editor support autocompletion of tables, columns, SQL keywords, standard sql functions, Grafana template variables and Grafana macros. Columns cannot be completed before a table has been specified.
+
+You can expand the code editor by pressing the `chevron` pointing downwards in the lower right corner of the code editor.
+
+`CTRL/CMD + Return` works as a keyboard shortcut to run the query.
 
 <div class="clearfix"></div>