[docs]: Update ToolJet database docs to include Primary Key & Foreign…

… Key (#9649)

* add pk & fk docs

* set next to true

* update pk, fk docs

* update pk, fk docs

* add foreign key example

* fix formatting

* update media

* update

* remove how-to doc for fk example

* update media

* next flag to false

docs/docs/tooljet-db/querying-tooljet-db.md

@@ -5,20 +5,18 @@ title: Querying Data From ToolJet Database
 
 Querying the ToolJet database is as easy as querying any other data source on ToolJet.
 
-- Go to the **Query panel**, and click on the **+Add** button to add a new query, and select **ToolJet Database**
- <div style={{textAlign: 'center'}}>
+- Go to the **Query panel**, and click on the **+Add** button to add a new query, and select **ToolJet Database**.
 
- <img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb.png" alt="ToolJet Database editor" />
-
- </div>
-
-- Select the table you want to query and the operation from the dropdown, then enter the required parameters for the selected operation. Click on the **Run** button to execute the query.
-
- <div style={{textAlign: 'center'}}>
+<div style={{textAlign: 'center', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb.png" alt="ToolJet Database editor" />
+</div>
 
- <img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb2.png" alt="ToolJet Database editor" />
+- Select the table you want to query and the operation from the dropdown, then enter the required parameters for the selected operation. Click on the **Run** button to execute the query.<br/>
+The selected operation should adhere to the column constraints of the selected table.
 
- </div>
+<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/v2-beta/database/newui/qtjdb2.png" alt="ToolJet Database editor" />
+</div>
 
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
@@ -79,8 +77,11 @@ You can join two or more tables in the ToolJet database by using the **Join** op
 - **From**: In the From section, the following parameters are available:
  - **Selected Table**: Select the table from which you want to join the other table. 
  - **Type of Join**: Select the type of join you want to perform. The available options are: `Inner Join`, `Left Join`, `Right Join`, and `Full Outer Join`.
- - **Joining Table**: Select the table that you want to join with the selected table.
- - **On**: Select the column from the **selected table** and the **joining table** on which you want to join the tables. Currently, only `=` operation is supported for joining tables.
+ - **Joining Table**: Select the table that you want to join with the selected table. If the selected table has a foreign key relationship(s) with other tables, those tables will be listed with a foreign key icon next to their name.
+ - **On**: Select the column from the **selected table** and the **joining table** on which you want to join the tables. Currently, only `=` operation is supported for joining tables. If the selected table and the joining table have a foreign key relationship, both the columns will be auto-populated in the **On** dropdown.
+<div style={{textAlign: 'center'}}>
+ <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/join-on-fk-v2.gif" alt="ToolJet database"/>
+</div>
  - **AND or OR condition**: You can add multiple conditions by clicking on the **+Add more** button below each join. The conditions can be joined by `AND` or `OR` operation.
 
  <div style={{textAlign: 'center'}}>
@@ -95,11 +96,9 @@ You can join two or more tables in the ToolJet database by using the **Join** op
 - **Offset**: Offset the number of records to be returned by entering a number. This parameter is used for pagination.
 - **Select**: Select the columns that you want to return in the query response. By default, all the columns are selected.
 
- <div style={{textAlign: 'center'}}>
-
- <img className="screenshot-full" src="/img/v2-beta/database/newui/join2.png" alt="ToolJet Database editor" />
-
- </div>
+<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/v2-beta/database/newui/join2.png" alt="ToolJet Database editor" />
+</div>
 
 :::info
 If you have any other questions or feedback about **ToolJet Database**, please reach us out at [email protected] or join our **[Slack Community](https://www.tooljet.com/slack)**

docs/docs/tooljet-db/tooljet-database.md

@@ -6,7 +6,7 @@ title: Overview
 Use the ToolJet-hosted database to build apps faster, and manage your data with ease. ToolJet database require no setup and gives you a powerful user interface for managing your data.
 
 <div style={{textAlign: 'center'}}>
- <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdb.png" alt="ToolJet database" />
+ <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdb-v2.png" alt="ToolJet database" />
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
@@ -77,6 +77,8 @@ ToolJet database allows you to:
 - **Edit, search, filter, sort, and filter** data using a spreadsheet-like interface.
 - **Quickly build applications and write queries** to interact with the ToolJet Database, just like any other datasource but without any setup.
 - **Export schema** from the ToolJet Database to a JSON file.
+- Uniquely identify each record in a table using **Primary Keys**, ensuring data integrity and enabling efficient querying and indexing.
+- Establish relationships between tables using **Foreign Keys**, allowing you to create associations based on the Primary Key of one table and maintain referential integrity.
 
 </div>
 
@@ -89,7 +91,7 @@ Once you log-in to your ToolJet account, from the left sidebar of the dashboard
 The ToolJet Database is available on: **[ToolJet Cloud](https://tooljet.com)**, **[Self-Host](/docs/setup/)**, and **Enterprise Edition**. You can manage your database and its data using the **Database editor UI**.
 
 <div style={{textAlign: 'center'}}>
- <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdbside.png" alt="ToolJet database" />
+ <img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/database/ux2/tjdbside-v2.png" alt="ToolJet database" />
 </div>
 
 </div>