docs: add cloud dashboard v1.4 docs

Co-authored-by: Rikin Kachhia <54616969+rikinsk@users.noreply.github.com>
GitOrigin-RevId: 6db4e25de412805a11bf26d7c8a098a977de5641

docs/graphql/cloud/getting-started/cloud-databases/aiven.rst

@@ -33,13 +33,15 @@ On the Hasura Cloud dashboard, create a new project:
    :alt: Create Hasura Cloud project
    :width: 1000px
 
+After the project is initialized successfully, click on ``Launch console`` to open the Hasura console in your browser.
+
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database -> Connect existing database``:
+
 You will get prompted for a Postgres Database URL. We will create this in the next step and then come back here.
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/database-setup.png
+.. thumbnail:: /img/graphql/cloud/cloud-dbs/existing-database-setup.png
    :alt: Hasura Cloud database setup
-   :width: 500px
-
-Also, copy the Hasura Cloud IP for later.
+   :width: 800px
 
 .. _create_pg_db_aiven:
 
@@ -89,7 +91,13 @@ Scroll down to ``Allowed IP Addresses`` and click on ``Change``:
    :alt: Change allowed IP addresses on Aiven
    :width: 1000px
 
-Add the Hasura IP address that you copied in :ref:`step 1 <create_hasura_project_aiven>`, click on the ``+``:
+Copy the IP address from the copy icon in the ``Hasura Cloud IP`` field on the project's details view on Hasura Cloud.
+
+.. thumbnail:: /img/graphql/cloud/projects/hasura-cloud-ip.png
+   :alt: Hasura Cloud IP field
+   :width: 1000px
+
+Add the Hasura IP address that you copied, click on the ``+``:
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/aiven/add-hasura-ip.png
    :alt: Add the Hasura IP on Aiven
@@ -114,31 +122,27 @@ To get it, navigate to the ``Overview`` tab of your database dashboard and copy
    :alt: Copy the service URI on Aiven
    :width: 1000px
 
-Step 5: Finish creating the Hasura Cloud project
-------------------------------------------------
+Step 5: Finish connecting the database
+--------------------------------------
 
-Back on the Hasura Cloud dashboard, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
+Back on Hasura Console, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/finish-create-project.png
-   :alt: Finish creating the Hasura Cloud project
-   :width: 500px
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
+   :alt: Database setup
+   :width: 600px
 
-Then click ``Create project``.
+Then click ``Connect Database``.
 
-Step 6: Launch Hasura console
------------------------------
+.. note::
 
-After the project is initialized successfully, click on ``Launch console``:
-
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/launch-console.png
-   :alt: Launch the Hasura console
-   :width: 900px
+   For security reasons, it is recommended to set database URLs as :ref:`env vars <manage_project_env_vars>` and using the env vars
+   to connect to the databases in place of the raw database URLs.
 
 Voilà. You are ready to start developing.
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/hasura-console.png
    :alt: Hasura console
-   :width: 900px
+   :width: 1100px
 
 Next steps
 ----------

docs/graphql/cloud/getting-started/cloud-databases/aws-aurora.rst

@@ -33,13 +33,15 @@ On the Hasura Cloud dashboard, create a new project:
    :alt: Create Hasura Cloud project
    :width: 1000px
 
+After the project is initialized successfully, click on ``Launch console`` to open the Hasura console in your browser.
+
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database -> Connect existing database``:
+
 You will get prompted for a Postgres Database URL. We will create this in the next step and then come back here.
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/database-setup.png
+.. thumbnail:: /img/graphql/cloud/cloud-dbs/existing-database-setup.png
    :alt: Hasura Cloud database setup
-   :width: 500px
-
-Also, copy the Hasura Cloud IP for later.
+   :width: 800px
 
 .. _create_pg_aws_rds_aurora:
 
@@ -120,7 +122,13 @@ Click on ``Add rule``:
    :alt: Add an inbound rule for AWS RDS database
    :width: 1000px
 
-Add the Hasura IP you copied in :ref:`step 1 <create_hasura_project_aws_rds_aurora>`:
+Copy the IP address from the copy icon in the ``Hasura Cloud IP`` field on the project's details view on Hasura Cloud.
+
+.. thumbnail:: /img/graphql/cloud/projects/hasura-cloud-ip.png
+   :alt: Hasura Cloud IP field
+   :width: 1000px
+
+Add the Hasura IP address that you copied:
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/aws/add-hasura-ip.png
    :alt: Add the Hasura IP for AWS RDS database
@@ -151,31 +159,27 @@ On the database dashboard, click on ``Connectivity & security``:
 - ``postgres-port``: On the screenshot above you can find it under ``Port``. The default port for Postgres is ``5432``.
 - ``db``: The DB is ``postgres`` by default unless otherwise specified.
 
-Step 5: Finish creating the Hasura Cloud project
-------------------------------------------------
+Step 5: Finish connecting the database
+--------------------------------------
 
-Back on the Hasura Cloud dashboard, enter the database URL that we constructed in :ref:`step 4 <construct_db_url_aurora>`:
+Back on Hasura Console, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/finish-create-project.png
-   :alt: Finish creating the Hasura Cloud project
-   :width: 500px
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
+   :alt: Database setup
+   :width: 600px
 
-Then click ``Create project``.
+Then click ``Connect Database``.
 
-Step 6: Launch Hasura console
------------------------------
+.. note::
 
-After the project is initialized successfully, click on ``Launch console``:
-
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/launch-console.png
-   :alt: Launch the Hasura console
-   :width: 900px
+   For security reasons, it is recommended to set database URLs as :ref:`env vars <manage_project_env_vars>` and using the env vars
+   to connect to the databases in place of the raw database URLs.
 
 Voilà. You are ready to start developing.
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/hasura-console.png
    :alt: Hasura console
-   :width: 900px
+   :width: 1100px
 
 Next steps
 ----------

docs/graphql/cloud/getting-started/cloud-databases/aws-postgres.rst

@@ -33,13 +33,15 @@ On the Hasura Cloud dashboard, create a new project:
    :alt: Create Hasura Cloud project
    :width: 1000px
 
+After the project is initialized successfully, click on ``Launch console`` to open the Hasura console in your browser.
+
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database -> Connect existing database``:
+
 You will get prompted for a Postgres Database URL. We will create this in the next step and then come back here.
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/database-setup.png
+.. thumbnail:: /img/graphql/cloud/cloud-dbs/existing-database-setup.png
    :alt: Hasura Cloud database setup
-   :width: 500px
-
-Also, copy the Hasura Cloud IP for later.
+   :width: 800px
 
 .. _create_aws_rds_postgres_db:
 
@@ -118,7 +120,13 @@ Click on ``Add rule``:
    :alt: Add an inbound rule for AWS RDS database
    :width: 1000px
 
-Add the Hasura IP that you copied from :ref:`step 1 <create_hasura_project_aws_rds_postgres>`:
+Copy the IP address from the copy icon in the ``Hasura Cloud IP`` field on the project's details view on Hasura Cloud.
+
+.. thumbnail:: /img/graphql/cloud/projects/hasura-cloud-ip.png
+   :alt: Hasura Cloud IP field
+   :width: 1000px
+
+Add the Hasura IP address that you copied:
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/aws/add-hasura-ip.png
    :alt: Add the Hasura IP for AWS RDS database
@@ -149,31 +157,27 @@ On the database dashboard, click on ``Connectivity & security``:
 - ``postgres-port``: On the screenshot above you can find it under ``Port``. The default port for Postgres is ``5432``.
 - ``db``: The DB is ``postgres`` by default unless otherwise specified.
 
-Step 5: Finish creating the Hasura Cloud project
-------------------------------------------------
+Step 5: Finish connecting the database
+--------------------------------------
 
-Back on the Hasura Cloud dashboard, enter the database URL that we constructed in :ref:`step 4 <construct_db_url_aws_postgres>`:
+Back on Hasura Console, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/finish-create-project.png
-   :alt: Finish creating the Hasura Cloud project
-   :width: 500px
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
+   :alt: Database setup
+   :width: 600px
 
-Then click ``Create project``.
+Then click ``Connect Database``.
 
-Step 6: Launch Hasura console
------------------------------
+.. note::
 
-After the project is initialized successfully, click on ``Launch console``:
-
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/launch-console.png
-   :alt: Launch the Hasura console
-   :width: 900px
+   For security reasons, it is recommended to set database URLs as :ref:`env vars <manage_project_env_vars>` and using the env vars
+   to connect to the databases in place of the raw database URLs.
 
 Voilà. You are ready to start developing.
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/hasura-console.png
    :alt: Hasura console
-   :width: 900px
+   :width: 1100px
 
 Next steps
 ----------

docs/graphql/cloud/getting-started/cloud-databases/azure.rst

@@ -33,13 +33,15 @@ On the Hasura Cloud dashboard, create a new project:
    :alt: Create Hasura Cloud project
    :width: 1000px
 
+After the project is initialized successfully, click on ``Launch console`` to open the Hasura console in your browser.
+
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database -> Connect existing database``:
+
 You will get prompted for a Postgres Database URL. We will create this in the next step and then come back here.
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/database-setup.png
+.. thumbnail:: /img/graphql/cloud/cloud-dbs/existing-database-setup.png
    :alt: Hasura Cloud database setup
-   :width: 500px
-
-Also, copy the Hasura Cloud IP for later.
+   :width: 800px
 
 Step 2: Create a Postgres DB on Azure (skip if you have an existing DB)
 -----------------------------------------------------------------------
@@ -81,7 +83,15 @@ Step 3: Allow connections to your DB from Hasura Cloud
 
 On the database dashboard, click on ``Connection security`` under ``Settings`` on the left navigation bar. 
 
-On ``Allow access to Azure services``, click the ``Yes`` button. Then add a Firewall rule for Hasura and copy the IP address that you copied in :ref:`step 1 <create_hasura_project_azure>`. 
+On ``Allow access to Azure services``, click the ``Yes`` button. Then add a Firewall rule for Hasura. 
+
+Copy the IP address from the copy icon in the ``Hasura Cloud IP`` field on the project's details view on Hasura Cloud.
+
+.. thumbnail:: /img/graphql/cloud/projects/hasura-cloud-ip.png
+   :alt: Hasura Cloud IP field
+   :width: 1000px
+
+Add the Hasura IP address that you copied:
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/azure/add-hasura-ip.png
    :alt: Add Hasura IP on Azure
@@ -112,31 +122,27 @@ On the database dashboard, click on ``Overview``:
 - ``postgres-port``: The default port for Postgres is ``5432``.
 - ``db``: The DB is ``postgres`` by default unless otherwise specified.
 
-Step 5: Finish creating the Hasura Cloud project
-------------------------------------------------
+Step 5: Finish connecting the database
+--------------------------------------
 
-Back on the Hasura Cloud dashboard, enter the database URL that we constructed in :ref:`step 4 <get_db_url_azure>`:
+Back on Hasura Console, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/finish-create-project.png
-   :alt: Finish creating the Hasura Cloud project
-   :width: 500px
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
+   :alt: Database setup
+   :width: 600px
 
-Then click ``Create project``.
+Then click ``Connect Database``.
 
-Step 6: Launch Hasura console
------------------------------
+.. note::
 
-After the project is initialized successfully, click on ``Launch console``:
-
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/launch-console.png
-   :alt: Launch the Hasura console
-   :width: 900px
+   For security reasons, it is recommended to set database URLs as :ref:`env vars <manage_project_env_vars>` and using the env vars
+   to connect to the databases in place of the raw database URLs.
 
 Voilà. You are ready to start developing.
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/hasura-console.png
    :alt: Hasura console
-   :width: 900px
+   :width: 1100px
 
 Next steps
 ----------

docs/graphql/cloud/getting-started/cloud-databases/digital-ocean.rst

@@ -33,13 +33,15 @@ On the Hasura Cloud dashboard, create a new project:
    :alt: Create Hasura Cloud project
    :width: 1000px
 
+After the project is initialized successfully, click on ``Launch console`` to open the Hasura console in your browser.
+
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database -> Connect existing database``:
+
 You will get prompted for a Postgres Database URL. We will create this in the next step and then come back here.
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/database-setup.png
+.. thumbnail:: /img/graphql/cloud/cloud-dbs/existing-database-setup.png
    :alt: Hasura Cloud database setup
-   :width: 500px
-
-Also, copy the Hasura Cloud IP for later.
+   :width: 800px
 
 Step 2: Create a Postgres DB on Digital Ocean (skip if you have an existing DB)
 -------------------------------------------------------------------------------
@@ -77,7 +79,13 @@ Scroll down to ``Trusted sources`` and click the ``Edit`` button:
    :alt: Edit trusted sources for database in Digital Ocean
    :width: 1000px
 
-Enter the Hasura Cloud IP we have optained from :ref:`step 1 <create_hasura_project_do>`.
+Copy the IP address from the copy icon in the ``Hasura Cloud IP`` field on the project's details view on Hasura Cloud.
+
+.. thumbnail:: /img/graphql/cloud/projects/hasura-cloud-ip.png
+   :alt: Hasura Cloud IP field
+   :width: 1000px
+
+Enter the Hasura IP address that you copied:
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/do/add-hasura-ip.png
    :alt: Add Hasura IP to database in Digital Ocean
@@ -114,31 +122,27 @@ Scroll down to ``Connection details``. Select ``Public network`` on the left and
 
 Then click the ``Copy`` button for the next step.
 
-Step 5: Finish creating the Hasura Cloud project
-------------------------------------------------
+Step 5: Finish connecting the database
+--------------------------------------
 
-Back on the Hasura Cloud dashboard, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_do>`:
+Back on Hasura Console, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/finish-create-project.png
-   :alt: Finish creating the Hasura Cloud project
-   :width: 500px
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
+   :alt: Database setup
+   :width: 600px
 
-Then click ``Create project``.
+Then click ``Connect Database``.
 
-Step 6: Launch Hasura console
------------------------------
+.. note::
 
-After the project is initialized successfully, click on ``Launch console``:
-
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/launch-console.png
-   :alt: Launch the Hasura console
-   :width: 900px
+   For security reasons, it is recommended to set database URLs as :ref:`env vars <manage_project_env_vars>` and using the env vars
+   to connect to the databases in place of the raw database URLs.
 
 Voilà. You are ready to start developing.
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/hasura-console.png
    :alt: Hasura console
-   :width: 900px
+   :width: 1100px
 
 Next steps
 ----------

docs/graphql/cloud/getting-started/cloud-databases/gcp.rst

@@ -33,13 +33,15 @@ On the Hasura Cloud dashboard, create a new project:
    :alt: Create Hasura Cloud project
    :width: 1000px
 
+After the project is initialized successfully, click on ``Launch console`` to open the Hasura console in your browser.
+
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database -> Connect existing database``:
+
 You will get prompted for a Postgres Database URL. We will create this in the next step and then come back here.
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/database-setup.png
+.. thumbnail:: /img/graphql/cloud/cloud-dbs/existing-database-setup.png
    :alt: Hasura Cloud database setup
-   :width: 500px
-
-Also, copy the Hasura Cloud IP for later.
+   :width: 800px
 
 .. _create_pg_db_gcp:
 
@@ -83,7 +85,15 @@ On the dashboard of your GCP database instance, on the left sidebar, click on ``
    :alt: Navigate to connections in GCP
    :width: 600px
 
-You can choose an optional name (e.g. "Hasura"). Then enter the Hasura Cloud IP we have optained from :ref:`step 1 <create_hasura_project_gcp>`.
+You can choose an optional name (e.g. "Hasura").
+
+Copy the IP address from the copy icon in the ``Hasura Cloud IP`` field on the project's details view on Hasura Cloud.
+
+.. thumbnail:: /img/graphql/cloud/projects/hasura-cloud-ip.png
+   :alt: Hasura Cloud IP field
+   :width: 1000px
+
+Enter the Hasura IP address that you copied:
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/gcp/add-network.png
    :alt: Add a new network in GCP
@@ -117,31 +127,27 @@ The structure of the database connection URL looks as follows:
 - ``postgres-port``: The default port for Postgres is ``5432`` if not specified otherwise.
 - ``db``: The DB is ``postgres`` by default unless otherwise specified.
 
-Step 5: Finish creating the Hasura Cloud project
-------------------------------------------------
+Step 5: Finish connecting the database
+--------------------------------------
 
-Back on the Hasura Cloud dashboard, enter the database URL that we constructed in :ref:`step 4 <construct_db_url_gcp>`:
+Back on Hasura Console, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/finish-create-project.png
-   :alt: Finish creating the Hasura Cloud project
-   :width: 500px
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
+   :alt: Database setup
+   :width: 600px
 
-Then click ``Create project``.
+Then click ``Connect Database``.
 
-Step 6: Launch Hasura console
------------------------------
+.. note::
 
-After the project is initialized successfully, click on ``Launch console``:
-
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/launch-console.png
-   :alt: Launch the Hasura console
-   :width: 900px
+   For security reasons, it is recommended to set database URLs as :ref:`env vars <manage_project_env_vars>` and using the env vars
+   to connect to the databases in place of the raw database URLs.
 
 Voilà. You are ready to start developing.
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/hasura-console.png
    :alt: Hasura console
-   :width: 900px
+   :width: 1100px
 
 Next steps
 ----------

docs/graphql/cloud/getting-started/cloud-databases/timescale-cloud.rst

@@ -35,11 +35,13 @@ On the Hasura Cloud dashboard, create a new project:
 
 You will get prompted for a Postgres Database URL. We will create this in the next step and then come back here.
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/database-setup.png
-   :alt: Hasura Cloud database setup
-   :width: 500px
+After the project is initialized successfully, click on ``Launch console`` to open the Hasura console in your browser.
 
-Also, copy the Hasura Cloud IP for later.
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database -> Connect existing database``:
+
+.. thumbnail:: /img/graphql/cloud/cloud-dbs/existing-database-setup.png
+   :alt: Hasura Cloud database setup
+   :width: 800px
 
 .. _create_pg_db_timescale:
 
@@ -89,7 +91,13 @@ Scroll down to ``Allowed IP Addresses`` and click on ``Change``:
    :alt: Change allowed IP addresses on Timescale
    :width: 1000px
 
-Add the Hasura IP address that you copied in :ref:`step 1 <create_hasura_project_timescale>`, click on the ``+`` and then click on ``Save changes``:
+Copy the IP address from the copy icon in the ``Hasura Cloud IP`` field on the project's details view on Hasura Cloud.
+
+.. thumbnail:: /img/graphql/cloud/projects/hasura-cloud-ip.png
+   :alt: Hasura Cloud IP field
+   :width: 1000px
+
+Add the Hasura IP address that you copied, click on the ``+`` and then click on ``Save changes``:
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/timescale/add-hasura-ip.png
    :alt: Add the Hasura IP on Timescale
@@ -112,31 +120,27 @@ To get it, navigate to the ``Overview`` tab of your database dashboard and copy
    :alt: Copy the service URI on Timescale
    :width: 1000px
 
-Step 5: Finish creating the Hasura Cloud project
-------------------------------------------------
+Step 5: Finish connecting the database
+--------------------------------------
 
-Back on the Hasura Cloud dashboard, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_timescale>`:
+Back on Hasura Console, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/finish-create-project.png
-   :alt: Finish creating the Hasura Cloud project
-   :width: 500px
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
+   :alt: Database setup
+   :width: 600px
 
-Then click ``Create project``.
+Then click ``Connect Database``.
 
-Step 6: Launch Hasura console
------------------------------
+.. note::
 
-After the project is initialized successfully, click on ``Launch console``:
-
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/launch-console.png
-   :alt: Launch the Hasura console
-   :width: 900px
+   For security reasons, it is recommended to set database URLs as :ref:`env vars <manage_project_env_vars>` and using the env vars
+   to connect to the databases in place of the raw database URLs.
 
 Voilà. You are ready to start developing.
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/hasura-console.png
    :alt: Hasura console
-   :width: 900px
+   :width: 1100px
 
 Next steps
 ----------

docs/graphql/cloud/getting-started/cloud-databases/yugabyte.rst

@@ -35,11 +35,13 @@ On the Hasura Cloud dashboard, create a new project:
 
 You will get prompted for a Postgres Database URL. We will create this in the next step and then come back here.
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/database-setup.png
-   :alt: Hasura Cloud database setup
-   :width: 500px
+After the project is initialized successfully, click on ``Launch console`` to open the Hasura console in your browser.
 
-Also, copy the Hasura Cloud IP for later.
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database -> Connect existing database``:
+
+.. thumbnail:: /img/graphql/cloud/cloud-dbs/existing-database-setup.png
+   :alt: Hasura Cloud database setup
+   :width: 800px
 
 .. _create_pg_db_yugabyte:
 
@@ -95,31 +97,27 @@ Now you can get the connection info from the following screen:
 - ``postgres-port``: The port is ``10301`` (see on the screenshot after ``-p``). This can be configured if required.
 - ``db``: The DB is ``yugabyte`` (see on the screenshot after ``-d``).
 
-Step 4: Finish creating the Hasura Cloud project
-------------------------------------------------
+Step 4: Finish connecting the database
+--------------------------------------
 
-Back on the Hasura Cloud dashboard, enter the database URL that we constructed in :ref:`step 3 <construct_db_url_yugabyte>`:
+Back on Hasura Console, enter the database URL that we retrieved in :ref:`step 4 <get_db_url_aiven>`:
 
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/finish-create-project.png
-   :alt: Finish creating the Hasura Cloud project
-   :width: 500px
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
+   :alt: Database setup
+   :width: 600px
 
-Then click ``Create project``.
+Then click ``Connect Database``.
 
-Step 5: Launch Hasura console
------------------------------
+.. note::
 
-After the project is initialized successfully, click on ``Launch console``:
-
-.. thumbnail:: /img/graphql/cloud/cloud-dbs/launch-console.png
-   :alt: Launch the Hasura console
-   :width: 900px
+   For security reasons, it is recommended to set database URLs as :ref:`env vars <manage_project_env_vars>` and using the env vars
+   to connect to the databases in place of the raw database URLs.
 
 Voilà. You are ready to start developing.
 
 .. thumbnail:: /img/graphql/cloud/cloud-dbs/hasura-console.png
    :alt: Hasura console
-   :width: 900px
+   :width: 1100px
 
 Next steps
 ----------

docs/graphql/cloud/getting-started/index.rst

@@ -25,24 +25,40 @@ Navigate to `cloud.hasura.io
 
 .. _cloud_connect_db:
 
-Step 2: Connect new/existing database
+Step 2: Create project
+----------------------
+
+Hasura Cloud creates an initial project. Click ``Launch Console`` to open the Hasura console in your browser.
+
+.. thumbnail:: /img/graphql/cloud/getting-started/create-project.png
+   :alt: Connect new or existing database
+   :width: 556px
+
+Step 3: Connect new/existing database
 -------------------------------------
 
-Hasura Cloud needs to connect to a Postgres database.
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database``:
 
-- To use an existing database, choose ``I have an existing Postgres database``.
-- To try out with a new database, choose ``Try a free database with Heroku``.
+.. thumbnail:: /img/graphql/cloud/getting-started/connect-db-console.png
+   :alt: Enter URL for existing database
+   :width: 1000px
 
-.. thumbnail:: /img/graphql/cloud/getting-started/connect-db.png
-   :alt: Connect new or existing database
-   :width: 591px
+- To use an existing database, choose ``Connect existing database``.
 
-Step 2.1: Enter database connection URL (for existing database)
+- To try out with a new database, choose ``Create Heroku Database``.
+
+.. thumbnail:: /img/graphql/cloud/getting-started/db-setup.png
+   :alt: DB setup
+   :width: 556px
+
+Step 3.1: Enter database connection URL (for existing database)
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-If you chose ``I have an existing Postgres database``, enter your database connection URL.
+If you chose ``Connect existing database``, enter your database connection URL.
 
-.. thumbnail:: /img/graphql/cloud/getting-started/connect-existing-db.png
+Click ``Connect Database``.
+
+.. thumbnail:: /img/graphql/cloud/getting-started/connect-database.png
    :alt: Enter URL for existing database
    :width: 556px
 
@@ -59,32 +75,9 @@ any other steps required to ensure connectivity from Hasura Cloud:
 - :ref:`Timescale Cloud <cloud_db_timescale_cloud>`
 - :ref:`YugaByte <cloud_db_yugabyte>`
 
-Step 3: Create project
-----------------------
-
-Click ``Create Project``.
-
-.. thumbnail:: /img/graphql/cloud/getting-started/create-project-new-db.png
-   :alt: Create project for new database
-   :width: 539px
-   :group: create
-   :class: inline-block
-
-.. thumbnail:: /img/graphql/cloud/getting-started/create-project-existing-db.png
-   :alt: Create project for existing database
-   :width: 552px
-   :group: create
-   :class: inline-block
-
 Step 4: Try out Hasura
 ----------------------
 
-Click ``Launch Console`` to open the Hasura console in your browser:
-
-.. thumbnail:: /img/graphql/cloud/getting-started/project-launch-console.png
-  :alt: Project actions
-  :width: 860px
-
 Create a table
 ^^^^^^^^^^^^^^
 

docs/graphql/cloud/projects/create.rst

@@ -24,46 +24,52 @@ To begin, navigate to the ``Projects`` page, and click the ``New Project`` link.
 
 .. thumbnail:: /img/graphql/cloud/projects/create-new-project.png
    :alt: create new project button
-   :width: 400
+   :width: 400px
 
 This opens a form on the right where you can create your new project.
 
-Enter the project name, choose a pricing plan and select a region for your project in this form.
+Choose a pricing plan, select a region and optionally enter the project name for your project in this form.
 
 .. thumbnail:: /img/graphql/cloud/projects/project-setup.png
    :alt: project setup
+   :width: 1100px
 
-Once you have completed the project setup, continue to the database setup.
+Once you have completed the project setup, click ``Create Project``.
 
 Step 2: Database setup
 ----------------------
 
+To get started, Click ``Launch Console`` to open the Hasura console in your browser.
+
+.. thumbnail:: /img/graphql/cloud/getting-started/project-launch-console.png
+   :alt: database setup with new database
+   :width: 900px
+
+On the Hasura console, navigate to ``Data -> Manage -> Connect Database``:
+
 New database
 ^^^^^^^^^^^^
 
 Hasura Cloud does not host databases, but does provide integrations with which you can create databases on managed cloud providers like Heroku. Integrations for AWS, GCP, and Azure are coming soon.
 
-To get started, click ``Try with Heroku``, and follow the prompts to authenticate with Heroku. Hasura Cloud will integrate with your Heroku account and manage the initial setup of a dev-tier Postgres instance. You can always upgrade the instance and manage options later through your Heroku account.
+To get started, choose ``Create Heroku Database -> Create Database``, and follow the prompts to authenticate with Heroku. Hasura Cloud will integrate with your Heroku account and manage the initial setup of a dev-tier Postgres instance. You can always upgrade the instance and manage options later through your Heroku account.
 
 .. thumbnail:: /img/graphql/cloud/projects/project-new-database-setup.png
    :alt: database setup with new database
+   :width: 700px
 
 Existing database
 ^^^^^^^^^^^^^^^^^
+To use an existing database, choose ``Connect existing database`` and enter your database connection URL and enter your database connection string (looks like ``postgres://username:password@hostname:port/dbname``).
 
-To connect an existing Postgres database to your new project, click ``Enter Database URL``, and enter your database connection string (looks like ``postgres://username:password@hostname:port/dbname``).
-
-.. thumbnail:: /img/graphql/cloud/projects/project-existing-database-setup.png
+.. thumbnail:: /img/graphql/cloud/projects/existing-db-setup.png
    :alt: database setup with existing database
+   :width: 700px
 
 Allowing connections from Hasura Cloud IP
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-For some cloud services, like GCP, you'll need to adjust your Postgres connection settings to allow connections from the Hasura Cloud IP address. You can copy the IP address from either the copy icon in the ``Database Setup`` , or the ``Hasura Cloud IP`` field on the project's details view. You may also need to disable SSL. Adding custom cert information to a Hasura Cloud instance is not yet available. 
-
-.. thumbnail:: /img/graphql/cloud/projects/project-create-hasura-cloud-ip.png
-   :alt: Existing database setup
-   :width: 500px
+For some cloud services, like GCP, you'll need to adjust your Postgres connection settings to allow connections from the Hasura Cloud IP address. You can copy the IP address from the copy icon in the ``Hasura Cloud IP`` field on the project's details view. You may also need to disable SSL. Adding custom cert information to a Hasura Cloud instance is not yet available. 
 
 .. thumbnail:: /img/graphql/cloud/projects/hasura-cloud-ip.png
    :alt: Hasura Cloud IP field

docs/graphql/cloud/projects/heroku-url-sync.rst

@@ -15,70 +15,47 @@ Heroku database URL sync
 Introduction
 ------------
 
-Hasura cloud can keep your project's database URL i.e. the ``HASURA_GRAPHQL_DATABASE_URL`` env var in sync with Postgres from a Heroku app. This is especially helpful in cases when the database credentials of Heroku Postgres are rotated automatically by Heroku.
-
+Hasura Cloud can keep your project's Heroku database URL i.e. the ``HEROKU_DATABASE_URL`` env var in sync with Postgres from a Heroku app.
+This is especially helpful in cases when the database credentials of Heroku Postgres are rotated automatically by Heroku.
 
 .. note::
    
-   The database sync automatically gets disconnected if you transfer the ownership of your project to another account. The new project owner can restart the sync with the Heroku account that they have connected their Hasura Cloud account to.
+   The database sync automatically gets disconnected if you transfer the ownership of your project to another account. The new project owner
+   can restart the sync with the Heroku account that they have connected their Hasura Cloud account to.
 
-Enable Heroku database URL Sync
+Enable Heroku database URL sync
 -------------------------------
 
-New Heroku database
-^^^^^^^^^^^^^^^^^^^
-
-If you create a project with a Heroku trial database using the cloud dashboard, your project has the Heroku database URL sync enabled by default, which means, Hasura Cloud keeps the database URL of your project in sync with the related Heroku Postgres.
-
-.. admonition:: Supported since
-
-   Heroku Database URL sync was not automatically enabled for projects created before the the launch of this feature **(Sep 19, 2020)**. If you wish to enable it, please do so manually via the steps in the following section.
-
-Existing Heroku database
-^^^^^^^^^^^^^^^^^^^^^^^^
-
-If you want to enable database URL sync between your Hasura cloud project and an existing Heroku app, you can do so as follows:
-
-1. Go to the `Env vars` tab of your project and click on the ``HASURA_GRAPHQL_DATABASE_URL`` env var.
-
-2. Click on the ``Sync Database URL`` button.
-
-   .. thumbnail:: /img/graphql/cloud/projects/heroku-db-sync-disabled.png
-      :alt: Add collaborator
-      :width: 865px
-
-3. If you are not logged into Heroku, you can do so by clicking on the Heroku button.
-
-4. Once you login, you will see a list of your Heroku apps. You can choose the app that you wish to start database URL sync with.
-
-   .. thumbnail:: /img/graphql/cloud/projects/heroku-db-sync-choose.png
-      :alt: Add collaborator
-      :width: 865px
+If you create a project with a Heroku trial database using the Hasura console, your project has the Heroku database URL sync enabled by
+default, which means, Hasura Cloud keeps the database URL of your project in sync with the related Heroku Postgres.
 
 Opt out
 -------
 
 If your project has Heroku database URL sync enabled, you can opt out as follows:
 
-1. Go to the ``Env vars`` tab of your project and click on the ``HASURA_GRAPHQL_DATABASE_URL`` env var.
+1. Go to the ``Env vars`` tab of your project and click on the ``HEROKU_DATABASE_URL`` env var.
 
 2. Click on ``Opt out of the sync`` button next to Heroku note.
 
    .. thumbnail:: /img/graphql/cloud/projects/heroku-db-sync-enabled.png
       :alt: Add collaborator
-      :width: 865px
+      :width: 1100px
 
 How it works?
 -------------
 
-Heroku database URL sync is useful because Postgres credentials of Heroku Postgres are sometimes rotated thus making the old database URL invalid. Hasura Cloud listens to the changes in the database URL of your app and keeps the project updated. This is done using:
+Heroku database URL sync is useful because Postgres credentials of Heroku Postgres are sometimes rotated thus making the old database
+URL invalid. Hasura Cloud listens to the changes in the database URL of your app and keeps the project updated. This is done using:
 
-1. `Heroku Releases <https://devcenter.heroku.com/articles/releases>`__: Whenever a config variable of a Heroku app changes, a new ``release`` is made for that app.
+1. `Heroku Releases <https://devcenter.heroku.com/articles/releases>`__: Whenever a config variable of a Heroku app changes, a new
+   ``release`` is made for that app.
 2. `Heroku Webhooks <https://devcenter.heroku.com/articles/app-webhooks>`__: Heroku allows us to get notifications about these releases on a webhook.
 
 Whenever Postgres credentials of a Heroku app are rotated:
 
 1. The ``DATABASE_URL`` config variable of the Heroku app gets updated with the new credentials.
 2. The config variable change triggers a new release, which notifies Hasura Cloud's webhook.
-3. When Hasura Cloud is notified about the new release, it fetches the newest database URL from Heroku and updates the ``HASURA_GRAPHQL_DATABASE_URL`` env var of your project with it.
+3. When Hasura Cloud is notified about the new release, it fetches the newest database URL from Heroku and updates the
+   ``HEROKU_DATABASE_URL`` env var of your project with it.
 4. This way, your project is always configured with the correct database URL.