console: update docs to match the new relationships UI

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/10087
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
GitOrigin-RevId: 8f88ec9ecbc872355cb7d50894a47b034b48439f

docs/docs/schema/bigquery/table-relationships/create.mdx

@@ -44,10 +44,10 @@ In the Console, select the `articles` table and navigate to the `Relationships`
 
 Add an `object relationship` named `author` for the `articles` table as shown here:
 
-<Thumbnail src="/img/schema/relationships-add-object-article.png" alt="Create an object relationship" width="1100px" />
+<Thumbnail src="/img/schema/bigquery-add-object-rel-step-1.png" alt="Create an object relationship" width="1100px" />
 
 <Thumbnail
-  src="/img/schema/relationships-view-author-relationship.png"
+  src="/img/schema/bigquery-add-object-rel-step-2.png"
   alt="View object relationships"
   width="1100px"
 />
@@ -159,10 +159,10 @@ being a one-to-many relationship between authors and articles).
 In the Console, select the `authors` table and navigate to the `Relationships` tab, then click `Configure` under
 `Add a new relationship manually`.
 
-<Thumbnail src="/img/schema/relationships-add-array-articles.png" alt="Add an array relationship" width="700px" />
+<Thumbnail src="/img/schema/bigquery-add-array-rel-step-1.png" alt="Add an array relationship" width="700px" />
 
 <Thumbnail
-  src="/img/schema/relationships-view-articles.png"
+  src="/img/schema/bigquery-add-array-rel-step-2.png"
   alt="View array relationships in Relationships tab"
   width="700px"
 />

docs/docs/schema/ms-sql-server/remote-relationships/remote-schema-relationships.mdx

@@ -71,17 +71,21 @@ For example, let's assume that our database has a table `order(id int, user_id i
 <TabItem value="console" label="Console">
 
 - Head to the `Data -> [table-name] -> Relationships` tab.
-- Click the `Add a remote relationship` button.
+
+- Click the `Add Relationship` button to open the widget.
+
+- Search for the remote schema by name in the `To Reference` input box.
+
+- Once selected, it will open the details section below to fill in the rest of the relationship definition.
+
+- Define the relationship details and hit `Create Relationship`.
 
   <Thumbnail
-    src="/img/schema/add-remote-schema-relationship.png"
+    src="/img/schema/add-remote-schema-rel.png"
     alt="Opening the remote relationship section"
     width="1000px"
   />
 
-- Define the relationship and hit `Save`.
-
-  <Thumbnail src="/img/schema/define-remote-schema-relationship.png" alt="Defining the relationship" width="800px" />
 
 </TabItem>
 <TabItem value="cli" label="CLI">

docs/docs/schema/ms-sql-server/remote-relationships/remote-source-relationships.mdx

@@ -56,24 +56,33 @@ The following fields can be defined for a Remote Schema relationship:
 - **Field Mapping**: A mapping between fields in the source table and their corresponding fields in the target table,
   just as a foreign key relationship would be defined by such mapping within a single database.
 
-For example, say we have a table `order(id int, user_id int)` in the source database and a table
+For example, say we have a table `orders(id int, user_id int)` in the source database and a table
 `user(id int, name text)` in the target database.
 
-We can create an object remote database relationship `user` joining the `order` table to the `user` table using the
-`order.user_id` and `user.id` fields.
+We can create an object remote database relationship `user` joining the `orders` table to the `user` table using the
+`orders.user_id` and `user.id` fields.
 
 <Tabs groupId="user-preference" className="api-tabs">
 <TabItem value="console" label="Console">
 
-Head to the `Data > [database] > [orders] > Relationships` tab. Under the `Remote Database Relationships` section,
-select `Add a remote database relationship`.
+
+1. Head to the `Data > [database] > [orders] > Relationships` tab. Click on `Add Relationships` to open the widget.
+
+2. Search for the remote database table in the "To Reference" input box
 
 <Thumbnail
-  src="/img/databases/ms-sql-server/schema/create-remote-source-relationship.png"
+  src="/img/schema/add-remote-db-rel-step-1.png"
   alt="Create remote database relationships"
 />
 
-Hit `Save`.
+3. Fill in the relationships details - type of the relationship & column mapping.
+
+<Thumbnail
+  src="/img/schema/add-remote-db-rel-step-2.png"
+  alt="Create remote database relationships"
+/>
+
+4. Hit `Create Relationship` to track the remote relationship.
 
 </TabItem>
 <TabItem value="cli" label="CLI">

docs/docs/schema/ms-sql-server/table-relationships/create.mdx

@@ -365,25 +365,26 @@ using a manual relationship:
 **Step 1: Open the manual relationship section**
 
 - Open the Console and navigate to the `Data -> authors -> Relationships` tab.
-- Click on the `Configure` button:
+- Click on the `Add Relationship` button:
 
-<Thumbnail src="/img/schema/manual-relationship-btn.png" alt="Open the manual relationship section" width="1100px" />
+<Thumbnail src="/img/schema/add-manual-rel-open-widget.png" alt="Open the manual relationship widget" width="1100px" />
 
-**Step 2: Define the relationship**
+**Step 2: Fill in the relationships details **
 
-The above step will open up a section as shown below:
+Once the widget is open, fill in the name of the relationship and pick a reference source
 
-<Thumbnail src="/img/schema/manual-relationship-create.png" alt="Define the relationship" width="700px" />
+<Thumbnail src="/img/schema/add-manual-rel-add-name-pick-source.png" alt="Define the relationship name and target" width="700px" />
 
-In this case:
+This will open up a "details" section below where you can fill in the rest of the relationship definition
+
+<Thumbnail src="/img/schema/add-manual-rel-fill-details.png" alt="Fill the relationship details" width="700px" />
 
-- **Relationship Type** will be: `Object Relationship`
-- **Relationship Name** can be: `avg_rating`
-- **Reference** will be: `id -> author_avg_rating . id` _(similar to defining a foreign-key)_
 
 **Step 3: Create the relationship**
 
-Now click on the `Save` button to create the relationship.
+Now click on the `Create Relationship` button to proceed.
+
+<Thumbnail src="/img/schema/add-manual-rel-create-final-step.png" alt="Fill the relationship details" width="700px" />
 
 </TabItem>
 <TabItem value="cli" label="CLI">

docs/docs/schema/ms-sql-server/table-relationships/rename.mdx

@@ -13,6 +13,7 @@ keywords:
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Thumbnail from '@site/src/components/Thumbnail';
 
 # MS SQL Server: Rename Relationships
 
@@ -21,9 +22,21 @@ An existing relationship can be renamed as follows:
 <Tabs groupId="user-preference" className="api-tabs">
 <TabItem value="console" label="Console">
 
+**Renaming Local Relationships**
+
 - Head to `Data -> [table-name] -> Relationships` in the Console
-- Drop the existing relationship
-- Recreate the relationship with the new name
+- Click on the `Rename` option for the relationship in question.
+
+<Thumbnail src="/img/schema/rename-local-rel-step-1.png" alt="Fill the relationship details" width="700px" />
+
+- This will open up a pop-up widget which will allow you to rename and save the relationship
+
+<Thumbnail src="/img/schema/rename-local-rel-step-2.png" alt="Fill the relationship details" width="700px" />
+
+
+**Renaming Remote Relationships**
+
+Remote relationships cannot be renamed. They have to dropped and created again with the new name.
 
 </TabItem>
 <TabItem value="cli" label="CLI">

docs/docs/schema/postgres/remote-relationships/remote-schema-relationships.mdx

@@ -71,18 +71,21 @@ For example, let's assume that our database has a table `order(id int, user_id i
 <TabItem value="console" label="Console">
 
 - Head to the `Data -> [table-name] -> Relationships` tab.
-- Click the `Add a remote relationship` button.
+
+- Click the `Add Relationship` button to open the widget.
+
+- Search for the remote schema by name in the `To Reference` input box.
+
+- Once selected, it will open the details section below to fill in the rest of the relationship definition.
+
+- Define the relationship details and hit `Create Relationship`.
 
   <Thumbnail
-    src="/img/schema/add-remote-schema-relationship.png"
+    src="/img/schema/add-remote-schema-rel.png"
     alt="Opening the remote relationship section"
     width="1000px"
   />
 
-- Define the relationship and hit `Save`.
-
-  <Thumbnail src="/img/schema/define-remote-schema-relationship.png" alt="Defining the relationship" width="800px" />
-
 </TabItem>
 <TabItem value="cli" label="CLI">
 

docs/docs/schema/postgres/remote-relationships/remote-source-relationships.mdx

@@ -56,24 +56,32 @@ The following fields can be defined for a Remote Schema relationship:
 - **Field Mapping**: A mapping between fields in the source table and their corresponding fields in the target table,
   just as a foreign key relationship would be defined by such mapping within a single database.
 
-For example, say we have a table `order(id int, user_id int)` in the source database and a table
+For example, say we have a table `orders(id int, user_id int)` in the source database and a table
 `user(id int, name text)` in the target database.
 
-We can create an object remote database relationship `user` joining the `order` table to the `user` table using the
-`order.user_id` and `user.id` fields.
+We can create an object remote database relationship `user` joining the `orders` table to the `user` table using the
+`orders.user_id` and `user.id` fields.
 
 <Tabs groupId="user-preference" className="api-tabs">
 <TabItem value="console" label="Console">
 
-Head to the `Data > [database] > [orders] > Relationships` tab. Under the `Remote Database Relationships` section,
-select `Add a remote database relationship`.
+1. Head to the `Data > [database] > [orders] > Relationships` tab. Click on `Add Relationships` to open the widget.
+
+2. Search for the remote database table in the "To Reference" input box
 
 <Thumbnail
-  src="/img/databases/postgres/schema/create-remote-source-relationship.png"
+  src="/img/schema/add-remote-db-rel-step-1.png"
   alt="Create remote database relationships"
 />
 
-Hit `Save`.
+3. Fill in the relationships details - type of the relationship & column mapping.
+
+<Thumbnail
+  src="/img/schema/add-remote-db-rel-step-2.png"
+  alt="Create remote database relationships"
+/>
+
+4. Hit `Create Relationship` to track the remote relationship.
 
 </TabItem>
 <TabItem value="cli" label="CLI">

docs/docs/schema/postgres/table-relationships/create.mdx

@@ -365,25 +365,27 @@ using a manual relationship:
 **Step 1: Open the manual relationship section**
 
 - Open the Console and navigate to the `Data -> authors -> Relationships` tab.
-- Click on the `Configure` button:
+- Click on the `Add Relationship` button:
 
-<Thumbnail src="/img/schema/manual-relationship-btn.png" alt="Open the manual relationship section" width="1100px" />
+<Thumbnail src="/img/schema/add-manual-rel-open-widget.png" alt="Open the manual relationship widget" width="1100px" />
 
-**Step 2: Define the relationship**
+**Step 2: Fill in the relationships details **
 
-The above step will open up a section as shown below:
+Once the widget is open, fill in the name of the relationship and pick a reference source
 
-<Thumbnail src="/img/schema/manual-relationship-create.png" alt="Define the relationship" width="700px" />
+<Thumbnail src="/img/schema/add-manual-rel-add-name-pick-source.png" alt="Define the relationship name and target" width="700px" />
 
-In this case:
+This will open up a "details" section below where you can fill in the rest of the relationship definition
+
+<Thumbnail src="/img/schema/add-manual-rel-fill-details.png" alt="Fill the relationship details" width="700px" />
 
-- **Relationship Type** will be: `Object Relationship`
-- **Relationship Name** can be: `avg_rating`
-- **Reference** will be: `id -> author_avg_rating . id` _(similar to defining a foreign-key)_
 
 **Step 3: Create the relationship**
 
-Now click on the `Save` button to create the relationship.
+Now click on the `Create Relationship` button to proceed.
+
+<Thumbnail src="/img/schema/add-manual-rel-create-final-step.png" alt="Fill the relationship details" width="700px" />
+
 
 </TabItem>
 <TabItem value="cli" label="CLI">

docs/docs/schema/postgres/table-relationships/rename.mdx

@@ -13,6 +13,7 @@ keywords:
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Thumbnail from '@site/src/components/Thumbnail';
 
 # Postgres: Rename Relationships
 
@@ -21,9 +22,22 @@ An existing relationship can be renamed as follows:
 <Tabs groupId="user-preference" className="api-tabs">
 <TabItem value="console" label="Console">
 
+**Renaming Local Relationships**
+
 - Head to `Data -> [table-name] -> Relationships` in the Console
-- Drop the existing relationship
-- Recreate the relationship with the new name
+- Click on the `Rename` option for the relationship in question.
+
+<Thumbnail src="/img/schema/rename-local-rel-step-1.png" alt="Fill the relationship details" width="700px" />
+
+- This will open up a pop-up widget which will allow you to rename and save the relationship
+
+<Thumbnail src="/img/schema/rename-local-rel-step-2.png" alt="Fill the relationship details" width="700px" />
+
+
+**Renaming Remote Relationships**
+
+Remote relationships cannot be renamed. They have to dropped and created again with the new name.
+
 
 </TabItem>
 <TabItem value="cli" label="CLI">