[v17] Update docs to mention PostgreSQL access through WebUI (#50569)

* feat(docs): add mention to postgres webui access

* Apply suggestions from code review

Co-authored-by: Paul Gottschling <[email protected]>
Co-authored-by: STeve (Xin) Huang <[email protected]>

* refactor(docs): code review suggestions

* refactor(docs): expand limitations section

* docs: fix typo

---------

Co-authored-by: Paul Gottschling <[email protected]>
Co-authored-by: STeve (Xin) Huang <[email protected]>

docs/pages/connect-your-client/web-ui.mdx

@@ -65,3 +65,57 @@ After you save and exit the editor, `tctl` will update the resource:
 cluster networking configuration has been updated
 ```
 
+## Starting a database session
+
+Starting from version `17.1`, users can establish database sessions using the
+Teleport Web UI. Currently, it is supported in PostgreSQL databases. 
+
+To start a new session, locate your database in the resources list and click
+"Connect".
+
+![Resources list](../../img/connect-your-client/webui-db-sessions/resources-list.png)
+
+For supported databases, the dialog will present the option to start
+the session in your browser.
+
+![Resources list database connect dialog](../../img/connect-your-client/webui-db-sessions/resources-connect-dialog.png)
+
+After clicking on the "Connect in the browser" button, a new tab will open with
+a form. Teleport will pre-fill this form based on your permissions, but you can
+adjust the options as needed.
+
+![New database session connect dialog](../../img/connect-your-client/webui-db-sessions/connect-dialog.png)
+
+If your user has wildcard permissions (*), you can type custom values into the
+form fields. This allows flexibility in selecting specific databases or
+credentials.
+
+![New database session connect dialog with custom values](../../img/connect-your-client/webui-db-sessions/connect-dialog-custom.png)
+
+Once you've filled in the session details, click the "Connect" button. Your
+session will start, and a terminal interface will appear in the browser.
+
+The browser-based terminal allows you to execute queries and interact with your
+database. Follow the on-screen instructions to see available commands and
+limitations.
+
+![Database session terminal](../../img/connect-your-client/webui-db-sessions/session-terminal.png)
+
+<Admonition type="note" title="Database CLI compatibility">
+  While the terminal interface provided in the Teleport Web UI is designed to
+  resemble popular database CLIs such as `psql`, it is a custom implementation
+  with some differences and limitations:
+  - **Feature Set:** Not all features available in `psql` are implemented.
+    For instance, scripting capabilities, query cancellation, or informational
+    commands like `\d` or `\dt` are currently unsupported.
+  - **Error Handling:** Error messages and diagnostics might differ from what
+    users are accustomed to in `psql`.
+
+  These distinctions are designed to maintain a lightweight and secure interface
+  directly in your browser. For more complex operations, you may prefer
+  accessing your database from your terminal using `tsh` and your preferred
+  tool.
+
+  Future updates may expand functionality or address feedback based on user
+  needs and supported databases.
+</Admonition>

docs/pages/enroll-resources/database-access/enroll-aws-databases/postgres-redshift.mdx

@@ -205,6 +205,8 @@ $ tsh db connect --db-user=role/example-iam-role --db-name=dev my-redshift
 </TabItem>
 </Tabs>
 
+(!docs/pages/includes/database-access/pg-access-webui.mdx!)
+
 To log out of the database and remove credentials:
 
 ```code

docs/pages/enroll-resources/database-access/enroll-aws-databases/rds.mdx

@@ -295,6 +295,8 @@ Retrieve credentials for the database and connect to it as the `alice` user:
 $ tsh db connect --db-user=alice --db-name=postgres rds-example
 ```
 
+(!docs/pages/includes/database-access/pg-access-webui.mdx!)
+
 <Admonition type="note" title="Note">
   The appropriate database command-line client (`psql`, `mysql`, `mariadb`) should be
   available in `PATH` in order to be able to connect.

docs/pages/enroll-resources/database-access/enroll-aws-databases/redshift-serverless.mdx

@@ -235,6 +235,8 @@ Type "help" for help.
 dev=>
 ```
 
+(!docs/pages/includes/database-access/pg-access-webui.mdx!)
+
 To log out of the database and remove credentials:
 
 ```code

docs/pages/enroll-resources/database-access/enroll-azure-databases/azure-postgres-mysql.mdx

@@ -428,6 +428,8 @@ $ tsh db connect --db-user=teleport --db-name=postgres azure-db
 </TabItem>
 </Tabs>
 
+(!docs/pages/includes/database-access/pg-access-webui.mdx!)
+
 <Admonition type="note">
 The appropriate database command-line client (`psql`, `mysql`) should be
 available in the `PATH` of the machine you're running `tsh db connect` from.

docs/pages/enroll-resources/database-access/enroll-google-cloud-databases/postgres-cloudsql.mdx

@@ -149,6 +149,8 @@ Retrieve credentials for the "cloudsql" example database and connect to it:
 $ tsh db connect --db-user=cloudsql-user@<Var name="project-id"/>.iam --db-name=postgres cloudsql
 ```
 
+(!docs/pages/includes/database-access/pg-access-webui.mdx!)
+
 To log out of the database and remove credentials:
 
 ```code

docs/pages/enroll-resources/database-access/enroll-self-hosted-databases/postgres-self-hosted.mdx

@@ -142,6 +142,8 @@ To retrieve credentials for a database and connect to it:
 $ tsh db connect --db-user=postgres --db-name=postgres example-postgres
 ```
 
+(!docs/pages/includes/database-access/pg-access-webui.mdx!)
+
 To log out of the database and remove credentials:
 
 ```code

docs/pages/includes/database-access/auto-user-provisioning/connect.mdx

@@ -2,6 +2,8 @@
 
 Now, log into your Teleport cluster and connect to the database:
 
+(!docs/pages/includes/database-access/pg-access-webui.mdx!)
+
 ```code
 $ tsh login --proxy=teleport.example.com
 $ tsh db connect --db-name <database> example

docs/pages/includes/database-access/pg-access-webui.mdx

@@ -0,0 +1,3 @@
+<Admonition type="tip" title="Tip">
+  Starting from version `17.1`, you can now [access your PostgreSQL databases using the Web UI.](../../connect-your-client/web-ui.mdx#starting-a-database-session)
+</Admonition>

docs/pages/includes/database-access/rds-proxy.mdx

@@ -184,6 +184,8 @@ Retrieve credentials for the database and connect to it as the `alice` user:
 $ tsh db connect --db-user=alice --db-name=dev rds-proxy
 ```
 
+(!docs/pages/includes/database-access/pg-access-webui.mdx!)
+
 To log out of the database and remove credentials:
 
 ```code