Merge pull request #11052 from ToolJet/refactor/app-builder-merge-main

Merge branch 'develop' into refactor/app-builder-merge-main

.do/deploy.template.yaml

@@ -2,11 +2,11 @@ spec:
   name: tooljet
   services:
   - name: tooljet
-    image:
+    image: 
       registry_type: DOCKER_HUB
       registry: tooljet
       repository: tooljet
-      tag: latest
+      tag: EE-LTS-latest
     run_command: "./server/scripts/digitalocean-postbuild.sh"
     instance_size_slug: "basic-s"
     health_check:

.env.example

@@ -23,7 +23,6 @@ PG_PASS=<db password>
 
 
 # TOOLJET DATABASE
-ENABLE_TOOLJET_DB=
 TOOLJET_DB=
 TOOLJET_DB_USER=
 TOOLJET_DB_HOST=
@@ -33,7 +32,7 @@ TOOLJET_DB_STATEMENT_TIMEOUT=60000
 
 PGRST_HOST=
 PGRST_JWT_SECRET=
-PGRST_DB_PRE_CONFIG="postgrest.pre_config"
+PGRST_DB_PRE_CONFIG=postgrest.pre_config
 
 # Checks every 24 hours to see if a new version of ToolJet is available
 # (Enabled by default. Set false to disable)
@@ -67,7 +66,6 @@ SENTRY_DEBUG=
 # FEATURE TOGGLE
 COMMENT_FEATURE_ENABLE=
 ENABLE_MULTIPLAYER_EDITING=true
-ENABLE_MARKETPLACE_FEATURE=
 
 
 # SSO (Applicable only for Multi-Workspace)

.github/workflows/maketplace-plugins-deploy.yml

@@ -52,6 +52,7 @@ jobs:
       - name: Install and build dependencies
         run: |
           cd marketplace && npm install && npm run build --workspaces
+        continue-on-error: true
       
       - name: Build marketplace plugins 
         run: |

.github/workflows/render-preview-deploy.yml

@@ -57,10 +57,6 @@ jobs:
                 "key": "PG_DB",
                 "value": "${{ env.PR_NUMBER }}"
               },
-              {
-                "key": "ENABLE_TOOLJET_DB",
-                "value": "true"
-              },
               {
                 "key": "TOOLJET_DB",
                 "value": "${{ env.PR_NUMBER }}"
@@ -85,10 +81,6 @@ jobs:
                 "key": "TOOLJET_DB_STATEMENT_TIMEOUT",
                 "value": "60000"
               },
-              {
-                "key": "TOOLJET_DB_RECONFIG",
-                "value": "true"
-              },
               {
                 "key": "PGRST_DB_PRE_CONFIG",
                 "value": "postgrest.pre_config"
@@ -141,10 +133,6 @@ jobs:
                 "key": "SMTP_PASSWORD",
                 "value": "${{ secrets.RENDER_SMTP_PASSWORD }}"
               },
-              {
-                "key": "ENABLE_MARKETPLACE_FEATURE",
-                "value": "true"
-              },
               {
                 "key": "TOOLJET_MARKETPLACE_URL",
                 "value": "${{ secrets.MARKETPLACE_BUCKET }}"

.github/workflows/review-path-deploy.yml

@@ -57,10 +57,6 @@ jobs:
                 "key": "PG_DB",
                 "value": "${{ env.PR_NUMBER }}"
               },
-              {
-                "key": "ENABLE_TOOLJET_DB",
-                "value": "true"
-              },
               {
                 "key": "TOOLJET_DB",
                 "value": "${{ env.PR_NUMBER }}"
@@ -85,10 +81,6 @@ jobs:
                 "key": "TOOLJET_DB_STATEMENT_TIMEOUT",
                 "value": "60000"
               },
-              {
-                "key": "TOOLJET_DB_RECONFIG",
-                "value": "true"
-              },
               {
                 "key": "PGRST_DB_PRE_CONFIG",
                 "value": "postgrest.pre_config"
@@ -153,10 +145,6 @@ jobs:
                 "key": "LICENSE_KEY",
                 "value": "${{ secrets.RENDER_LICENSE_KEY }}"
               },
-              {
-                "key": "ENABLE_MARKETPLACE_FEATURE",
-                "value": "true"
-              },
               {
                 "key": "SUB_PATH",
                 "value": "/apps/tooljet/"

.github/workflows/update-test-system.yml

@@ -101,7 +101,7 @@ jobs:
             sudo docker images
 
             # Update docker-compose.yml with the new image for tooljet service
-            sed -i '/^[[:space:]]*tooljet:/,/^[[:space:]]*[^:]*$/ { /^[[:space:]]*image:[[:space:]]*tooljet\/tj-osv/s|\(image:[[:space:]]*\).*|\1tooljet/tj-osv:'"${{ env.SAFE_BRANCH_NAME }}"'| }' docker-compose.yml
+            sed -i '/^[[:space:]]*tooljet:/,/^[[:space:]]*[^:]*$/ { /^[[:space:]]*image:[[:space:]]*tooljet\/tj-osv/s|\(image:[[:space:]]*\).*|\1tooljet/tj-osv:'"${{ env.SAFE_BRANCH_NAME }}"'| }' docker-compose.yaml
 
             # Start the Docker containers
             cat docker-compose.yaml

.version

@@ -1 +1 @@
-2.67.2
+3.0.0-ce-beta

.vscode/launch.json

@@ -26,6 +26,30 @@
             "cwd": "${workspaceRoot}/server",
             "console": "integratedTerminal",
             "protocol": "inspector"
+        },
+        {
+            "name": "Docker Debug Client",
+            "request": "launch",
+            "type": "chrome",
+            "preLaunchTask": "docker-compose: debug:client",
+            "url": "http://127.0.0.1:8082",
+            "webRoot": "${workspaceFolder}/frontend",
+            "skipFiles": ["<node_internals>/**"]
+        },
+        {
+            "name": "Docker Debug Server",
+            "request": "launch",
+            "type": "docker",
+            "platform": "node",
+            "preLaunchTask": "docker-compose: debug:server",
+            "removeContainerAfterDebug": true,
+            "node": {
+                "port": 9229,
+                "localRoot": "${workspaceRoot}/server",
+                "remoteRoot": "/app/server",
+                "sourceMaps": true,
+                "skipFiles": ["<node_internals>/**"]
+            },
         }
     ]
 }

.vscode/tasks.json

@@ -0,0 +1,37 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "docker-compose",
+      "label": "docker-compose: debug:client",
+      "dockerCompose": {
+        "up": {
+          "detached": true,
+          "services": [
+            "client"
+          ]
+        },
+        "files": [
+          "${workspaceFolder}/docker-compose.yaml",
+          "${workspaceFolder}/docker-compose-debug.yaml"
+        ]
+      }
+    },
+    {
+      "type": "docker-compose",
+      "label": "docker-compose: debug:server",
+      "dockerCompose": {
+        "up": {
+          "detached": true,
+          "services": [
+            "server"
+          ]
+        },
+        "files": [
+          "${workspaceFolder}/docker-compose.yaml",
+          "${workspaceFolder}/docker-compose-debug.yaml"
+        ]
+      }
+    }
+  ]
+}

README.md

@@ -57,16 +57,19 @@ You can deploy ToolJet on DigitalOcean using one-click-deployment.
 ### Try using Docker
 Want to give ToolJet a quick spin on your local machine? You can run the following command from your terminal to have ToolJet up and running right away.
 
+
 ```bash
-docker run -d \
+docker run \
   --name tooljet \
   --restart unless-stopped \
   -p 80:80 \
   --platform linux/amd64 \
   -v tooljet_data:/var/lib/postgresql/13/main \
-  tooljet/try:latest
+  tooljet/try:EE-LTS-latest
 ```
 
+*For users upgrading their ToolJet version, we recommend choosing the LTS version over the latest version. The LTS version ensures stability with production bug fixes, security patches, and performance enhancements.*
+
 ## Tutorials and examples
 
 [Time Tracker Application](https://docs.tooljet.com/docs/#quickstart-guide)<br>
@@ -112,7 +115,7 @@ For general help using ToolJet, please refer to the official [documentation](htt
 - [𝕏 (Twitter)](https://twitter.com/ToolJet) - Get the product updates quickly.
 
 ## Roadmap
-Check out our [roadmap](https://github.com/ToolJet/ToolJet/projects/2) to stay updated on recently released features and learn about what's coming next.
+Check out our [roadmap](https://github.com/orgs/ToolJet/projects/15) to stay updated on recently released features and learn about what's coming next.
 
 ## Branching model
 We use the git-flow branching model. The base branch is `develop`. If you are looking for a stable version, please use the main branch or tags labeled as v1.x.x.

deploy/docker/.env.external.example

@@ -17,7 +17,6 @@ PG_PORT=5432
 # The above postgres values is set to its default state. If necessary, kindly modify it according to your personal preference.
 
 # TOOLJET DATABASE
-ENABLE_TOOLJET_DB=true
 TOOLJET_DB= # Database name
 TOOLJET_DB_USER= # Postgres database username
 TOOLJET_DB_HOST= # Postgres database host
@@ -58,7 +57,6 @@ SENTRY_DEBUG=
 # FEATURE TOGGLE
 COMMENT_FEATURE_ENABLE=
 ENABLE_MULTIPLAYER_EDITING=true
-ENABLE_MARKETPLACE_FEATURE=
 
 
 # SSO (Applicable only for Multi-Workspace)

deploy/docker/.env.internal.example

@@ -16,7 +16,6 @@ PG_PASS= # postgres database password
 # The above postgres values is set to its default state. If necessary, kindly modify it according to your personal preference.
 
 # TOOLJET DATABASE
-ENABLE_TOOLJET_DB=true
 TOOLJET_DB=tooljet_db
 TOOLJET_DB_USER=postgres
 TOOLJET_DB_HOST=postgresql
@@ -56,7 +55,6 @@ SENTRY_DEBUG=
 # FEATURE TOGGLE
 COMMENT_FEATURE_ENABLE=
 ENABLE_MULTIPLAYER_EDITING=true
-ENABLE_MARKETPLACE_FEATURE=
 
 
 # SSO (Applicable only for Multi-Workspace)

deploy/docker/docker-compose-db.yaml

@@ -37,6 +37,7 @@ services:
     env_file: .env
     environment:
       - PGRST_SERVER_PORT=80
+      - PGRST_DB_PRE_CONFIG=postgrest.pre_config
 
 volumes:
   postgres:

deploy/docker/docker-compose.yaml

@@ -21,3 +21,4 @@ services:
     env_file: .env
     environment:
       - PGRST_SERVER_PORT=80
+      - PGRST_DB_PRE_CONFIG=postgrest.pre_config

deploy/ec2/.env

@@ -11,7 +11,6 @@ NODE_ENV=production
 DEPLOYMENT_PLATFORM=ec2
 
 # ToolJet Database
-ENABLE_TOOLJET_DB=false
 TOOLJET_DB=tooljet_db
 TOOLJET_DB_USER=
 TOOLJET_DB_HOST=
@@ -20,6 +19,7 @@ PGRST_HOST=localhost:3001
 PGRST_SERVER_PORT=3001
 PGRST_JWT_SECRET=
 PGRST_DB_URI=
+PGRST_DB_PRE_CONFIG=postgrest.pre_config
 
 # Checks every 24 hours to see if a new version of ToolJet is available
 # (Enabled by default. Set 0 to disable)

deploy/kubernetes/AKS/deployment.yaml

@@ -72,17 +72,15 @@ spec:
           - name: DEPLOYMENT_PLATFORM
             value: "k8s:aks"
           # Set the env values below for Tooljet Database
-          # - name: ENABLE_TOOLJET_DB
-          #   value: "true"
-          # - name: TOOLJET_DB
-          #   value: "tooljet_db"
-          # - name: TOOLJET_DB_USER
-          #   value: "replace_with_tooljet_db_user"
-          # - name: TOOLJET_DB_HOST
-          #   value: "replace_with_tooljet_db_host"
-          # - name: TOOLJET_DB_PASS
-          #   value: "replace_with_tooljet_db_pass"
-          # - name: PGRST_HOST
-          #   value: "replace_with_postgrest_host"
-          # - name: PGRST_JWT_SECRET
-          #   value: "replace_pgrst_jwt_secret_here"
+          - name: TOOLJET_DB
+            value: "tooljet_db"
+          - name: TOOLJET_DB_USER
+            value: "replace_with_tooljet_db_user"
+          - name: TOOLJET_DB_HOST
+            value: "replace_with_tooljet_db_host"
+          - name: TOOLJET_DB_PASS
+            value: "replace_with_tooljet_db_pass"
+          - name: PGRST_HOST
+            value: "replace_with_postgrest_host"
+          - name: PGRST_JWT_SECRET
+            value: "replace_pgrst_jwt_secret_here"

deploy/kubernetes/AKS/postgrest.yaml

@@ -29,6 +29,8 @@ spec:
             value: "replace_pgrest_jwt_secret_here"
           - name: PGRST_LOG_LEVEL
             value: "info"
+          - name: PGRST_DB_PRE_CONFIG
+            value: postgrest.pre_config
 ---
 apiVersion: v1
 kind: Service

deploy/kubernetes/deployment.yaml

@@ -79,18 +79,15 @@ spec:
                   key: tj_host
             - name: DEPLOYMENT_PLATFORM
               value: "k8s"
-            # Set the env values below for Tooljet Database
-            # - name: ENABLE_TOOLJET_DB
-            #   value: "true"
-            # - name: TOOLJET_DB
-            #   value: "tooljet_db"
-            # - name: TOOLJET_DB_USER
-            #   value: "replace_with_tooljet_db_user"
-            # - name: TOOLJET_DB_HOST
-            #   value: "replace_with_tooljet_db_host"
-            # - name: TOOLJET_DB_PASS
-            #   value: "replace_with_tooljet_db_pass"
-            # - name: PGRST_HOST
-            #   value: "replace_with_postgrest_host"
-            # - name: PGRST_JWT_SECRET
-            #   value: "replace_jwt_secret_here"
+            - name: TOOLJET_DB
+              value: "tooljet_db"
+            - name: TOOLJET_DB_USER
+              value: "replace_with_tooljet_db_user"
+            - name: TOOLJET_DB_HOST
+              value: "replace_with_tooljet_db_host"
+            - name: TOOLJET_DB_PASS
+              value: "replace_with_tooljet_db_pass"
+            - name: PGRST_HOST
+              value: "replace_with_postgrest_host"
+            - name: PGRST_JWT_SECRET
+              value: "replace_jwt_secret_here"

deploy/kubernetes/postgrest.yaml

@@ -35,6 +35,8 @@ spec:
                 key: pgrst_db_uri
           - name: PGRST_LOG_LEVEL
             value: "info"
+          - name: PGRST_DB_PRE_CONFIG
+            value: postgrest.pre_config
 ---
 apiVersion: v1
 kind: Service

deploy/openshift/deployment.yaml

@@ -83,18 +83,15 @@ spec:
             # for npm commands to work with aribitrary user
             - name: HOME
               value: "/home/appuser"
-            # Set the env values below for Tooljet Database
-            # - name: ENABLE_TOOLJET_DB
-            #   value: "true"
-            # - name: TOOLJET_DB
-            #   value: "tooljet_db"
-            # - name: TOOLJET_DB_USER
-            #   value: "replace_with_tooljet_db_user"
-            # - name: TOOLJET_DB_HOST
-            #   value: "replace_with_tooljet_db_host"
-            # - name: TOOLJET_DB_PASS
-            #   value: "replace_with_tooljet_db_pass"
-            # - name: PGRST_HOST
-            #   value: "replace_with_postgrest_host"
-            # - name: PGRST_JWT_SECRET
-            #   value: "replace_jwt_secret_here"
+            - name: TOOLJET_DB
+              value: "tooljet_db"
+            - name: TOOLJET_DB_USER
+              value: "replace_with_tooljet_db_user"
+            - name: TOOLJET_DB_HOST
+              value: "replace_with_tooljet_db_host"
+            - name: TOOLJET_DB_PASS
+              value: "replace_with_tooljet_db_pass"
+            - name: PGRST_HOST
+              value: "replace_with_postgrest_host"
+            - name: PGRST_JWT_SECRET
+              value: "replace_jwt_secret_here"

deploy/openshift/postgrest.yaml

@@ -35,6 +35,8 @@ spec:
                 key: pgrst_db_uri
           - name: PGRST_LOG_LEVEL
             value: "info"
+          - name: PGRST_DB_PRE_CONFIG
+            value: postgrest.pre_config
 ---
 apiVersion: v1
 kind: Service

docker-compose-debug.yaml

@@ -0,0 +1,7 @@
+version: "3"
+
+services:
+  server:
+    ports:
+      - 9229:9229
+    command: npm run --prefix server start:debug -- --debug 0.0.0.0:9229

docker-compose.yaml

@@ -6,6 +6,7 @@ services:
       context: ./
       dockerfile: ./docker/plugins.Dockerfile.dev
     image: tooljet-plugins:development
+    container_name: plugins
     platform: linux/x86_64
     volumes:
       - ./plugins:/app/plugins
@@ -16,6 +17,7 @@ services:
       context: ./
       dockerfile: ./docker/client.Dockerfile.dev
     image: tooljet-client:development
+    container_name: client
     platform: linux/x86_64
     volumes:
       - ./frontend:/app/frontend:delegated
@@ -34,10 +36,10 @@ services:
       context: ./
       dockerfile: ./docker/server.Dockerfile.dev
     image: tooljet-server:development
+    container_name: server
     platform: linux/x86_64
     depends_on:
-      postgres:
-        condition: service_healthy
+      - postgres
     volumes:
       - ./server:/app/server:delegated
       - ./plugins:/app/plugins
@@ -52,29 +54,27 @@ services:
     command: npm run --prefix server start:dev
 
   postgrest:
-    image: postgrest/postgrest:v12.2.0
+    container_name: postgrest
+    image: postgrest/postgrest:v12.0.2
     ports:
       - "3001:3000"
     env_file:
       - .env
     depends_on:
-      postgres:
-        condition: service_healthy
+      - postgres
 
   postgres:
+    container_name: ${PG_HOST}
     image: postgres:13
     restart: always
     ports:
       - 5432:5432
     volumes:
       - postgres:/data/postgres
+    env_file: .env
     environment:
-      - POSTGRES_PASSWORD=postgres
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready"]
-      interval: 10s
-      timeout: 5s
-      retries: 5
+      - POSTGRES_USER=${PG_USER}
+      - POSTGRES_PASSWORD=${PG_PASS}
 
 volumes:
   postgres:

docs/build-latest-version.sh

@@ -1,9 +1,33 @@
 #!/bin/bash
 set -e
 
-jq '[.[0]]' versions.json > tmp_versions.json
-mv tmp_versions.json versions.json
+CONFIG_FILE="docusaurus.config.js"
 
+# Extract lastVersion from docusaurus.config.js using sed
+LAST_VERSION=$(sed -n "s/.*lastVersion: *'\\([^']*\\)'.*/\\1/p" "$CONFIG_FILE")
+if [ -z "$LAST_VERSION" ]; then
+  echo "Error: lastVersion not found in $CONFIG_FILE"
+  exit 1
+fi
+echo "Found lastVersion: $LAST_VERSION"
+
+# Extract all version numbers from the entire file
+ALL_VERSIONS=$(grep -oE "'[0-9]+\.[0-9]+\.[0-9]+(-[A-Za-z]+)?'" "$CONFIG_FILE" | sed "s/'//g" | sort -u -V -r)
+if [ -z "$ALL_VERSIONS" ]; then
+  echo "Error: No versions found in $CONFIG_FILE"
+  exit 1
+fi
+echo "Found raw versions:"
+echo "$ALL_VERSIONS"
+
+# Convert the extracted versions into a JSON array format
+VERSION_ARRAY=$(echo "$ALL_VERSIONS" | jq -R -s -c 'split("\n")[:-1] + ["'"$LAST_VERSION"'"] | unique')
+echo "Updating versions.json with: $VERSION_ARRAY"
+
+# Update versions.json with combined data
+echo $VERSION_ARRAY | jq . > versions.json
+
+# Install dependencies and build the project
 npm i && npm run build
 
-exec "$@"
+exec "$@"

docs/docs/Enterprise/audit_logs.md

@@ -34,19 +34,19 @@ Pagination at the bottom allows navigation through the pages, with each page dis
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### Filter Audit Logs
+## Filter Audit Logs
 
 You can apply filters to the audited events based on the following criteria.
 
-#### Select Users
+### Select Users
 
 Choose a specific user from the dropdown list to view all their activities.
 
-#### Select Apps
+### Select Apps
 
 The dropdown will display all the apps associated with your account. Select an app to filter the logs related to that particular app.
 
-#### Select Resources
+### Select Resources
 
 | <div style={{ width:"100px"}}> Resources </div> | <div style={{ width:"100px"}}> Description </div> |
 | ----------- | ----------- |
@@ -56,7 +56,7 @@ The dropdown will display all the apps associated with your account. Select an a
 | Group Permission | All the events associated with Group Permissions will be filtered. Group Permissions include `GROUP_CREATE`, `GROUP_UPDATE`, `GROUP_DELETE`. |
 | App Group Permission | Within each group, you can set apps for read or edit privileges. These events get recorded as App Group Permissions. |
 
-#### Select Actions
+### Select Actions
 
 | <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"100px"}}> Description </div>|
 | ----------- | ----------- |
@@ -81,7 +81,7 @@ The dropdown will display all the apps associated with your account. Select an a
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### Understanding Log Information
+## Understanding Log Information
 
 <div style={{textAlign: 'center'}}>
 
@@ -112,11 +112,35 @@ The file will contain all the data from audit logs. The log file can be created
 
 Learn more about **setting up the log file generation** [here](/docs/how-to/setup-rsyslog).
 
-#### Log Rotation
+### Log Rotation
 
 The log file is configured to rotate on a daily basis. This means that a new log file will be created every day, ensuring efficient management and organization of audit data.
 
-#### Log File Path
+### Log Redaction
+
+ToolJet implements log redaction to protect sensitive information. By default, the following headers are masked in the logs:
+
+- authorization
+- cookie
+- set-cookie
+- x-api-key
+- proxy-authorization
+- www-authenticate
+- authentication-info
+- x-forwarded-for
+
+Additionally, you can specify custom fields to be masked using the `LOGGER_REDACT` environment variable.
+
+| <div style={{ width:"100px"}}> Variable </div>| <div style={{ width:"100px"}}> Description </div>                                                                |
+| -------- | --------------------------------------------------------------------------- |
+| LOGGER_REDACT | Comma-separated list of additional fields to be masked in logs (e.g., req.headers["x-session-id"],req.headers["x-device-fingerprint"]) |
+
+For example:
+```bash
+LOGGER_REDACT=res.headers["x-rate-limit-remaining"],res.headers["x-request-id"]
+```
+
+### Log File Path
 
 The path for the log file is defined using the `LOG_FILE_PATH` variable in the environment. It's important to understand that this path is relative to the home directory of the machine. For instance, if `LOG_FILE_PATH` is set to `hsbc/dashboard/log`, the resulting log file path will be structured as follows:
 ```

docs/docs/Enterprise/superadmin.md

@@ -20,11 +20,11 @@ The user details entered while setting up ToolJet will have Super Admin privileg
 | Manage SSO in their workspace | ✅ | ✅ |
 | Manage Workspace Variables in their workspace | ✅ | ✅ |
 | Manage Workspace Constants in their workspace | ✅ | ✅ |
-| [Manage data sources for the user group in their workspace](/docs/data-sources/overview#permissions) | ✅ | ✅ |
+| [Manage data sources for the user group in their workspace](/docs/data-sources/overview#user-permissions) | ✅ | ✅ |
 | [Access any user's personal workspace (create, edit or delete apps)](#access-any-workspace) | ❌ | ✅ |
 | [Archive Admin or any user of any workspace](#archiveunarchive-users) | ❌ | ✅ |
 | [Access any user's ToolJet database (create, edit or delete database)](#access-tooljet-db-in-any-workspace) | ❌ | ✅ |
-| [Manage any workspace's setting (Groups/SSO/Workspace constants)](#manage-workspace-setting-groupsssoworkspace-constants) | ❌ | ✅ |
+| [Manage any workspace's setting (Groups/SSO/Workspace constants)](#manage-workspace-settings-groupsssoworkspace-constants) | ❌ | ✅ |
 | [Manage all users from all the workspaces in the instance](#manage-all-users-in-the-instance) | ❌ | ✅ |
 | [Archive/Unarchive any user from all the workspaces in the instance](#archiving-a-user-from-all-the-workspaces-instance-level) | ❌ | ✅ |
 | [Reset password of any user](#reset-password-of-any-user) | ❌ | ✅ |
@@ -315,6 +315,6 @@ Turning off this option restricts workspace admins from configuring the login me
 
 Manage the instance license via the **Settings** page. Super Admins have the capability to update the instance's license key from this page.
 
-Check out the [License](/docs/licensing) page for more details.
+Check out the [License](/docs/org-management/licensing/self-hosted) page for more details.
 
 </div>

docs/docs/app-builder/import-export-apps.md

@@ -1,13 +1,13 @@
 ---
 id: importing-exporting-applications
-title: Importing and Exporting Applications
+title: Import and Export Applications
 ---
 
 This documentation explains the process of exporting and importing applications in ToolJet.
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-## 1. Exporting Applications
+## Exporting Applications
 
 - Navigate to the dashboard.
 - Click on the settings icon located in the top right corner of the application.
@@ -28,7 +28,7 @@ This documentation explains the process of exporting and importing applications
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-## 2. Importing Applications
+## Importing Applications
 
 - Navigate to the dashboard.
 - Click on the ellipses on the **Create new app** button and select `Import`.

docs/docs/app-builder/overview.md

@@ -5,11 +5,23 @@ title: Overview
 
 # App-Builder: Overview
 
-ToolJet's App Builder allows you to build applications. ToolJet's app builder has the following major components:
+ToolJet's App-Builder is a visual development platform that lets you create business applications in minutes. Transform your ideas into working solutions using an intuitive drag-and-drop interface that helps you design everything from simple forms to complex dashboards.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/app-builder-preview.png" alt="App Builder Preview" />
+</div>
+
+Getting started is straightforward – design your interface, connect your data sources, and add business logic through the visual builder. As your needs grow, extend your applications with custom code and use GitSync to streamline application management. 
+
+Explore these hands-on guides to start building your first app. The step-by-step guides will walk you through the App-Builder's essential features:
+
+- **[Create UIs Using Pre-Built Components](/docs/beta/app-builder/walkthrough/create-ui)**
+- **[Create Queries to Interact With Data Sources](/docs/beta/app-builder/walkthrough/create-queries)**
+- **[Use Custom Code](/docs/beta/app-builder/walkthrough/using-code)**
+- **[Access and Referring Values Withing The App-Builder](/docs/beta/app-builder/walkthrough/accessing-values)**
+- **[Create and Managing Variables](/docs/beta/app-builder/walkthrough/variables)**
+- **[Use Gitsync to Sync your Application with a Git Repository](/docs/gitsync)**
+- **[Versioning and Release](/docs/tutorial/versioning-and-release)**
+- **[Import and Export Apps](/docs/beta/app-builder/walkthrough/importing-exporting-applications)**
+
 
-- **[Topbar](/docs/app-builder/topbar)**: Configure app settings such as application name, layout, app environment, version management, Gitsync and much more.
-- **[Canvas](/docs/app-builder/canvas)**: Arrange and customize components to build the user interface of your app.
-- **[Left-sidebar](/docs/app-builder/left-sidebar)**: Manage [pages](/docs/tutorial/pages), [inspect](/docs/how-to/use-inspector) components, queries, or variables, and [debug](/docs/app-builder/left-sidebar#debugger) errors.
-- **[Components library](/docs/app-builder/components-library)**(right sidebar): Drag and drop components, modify their properties, and style them.
-- **[Query Panel](/docs/app-builder/query-panel)**: Create, edit, and manage queries from various **[datasources](/docs/data-sources/overview)**.
-- **[Preview](/docs/app-builder/preview)**: Preview your application.

docs/docs/app-builder/query-panel.md

@@ -3,32 +3,23 @@ id: query-panel
 title: Query Panel
 ---
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-The Query Panel, located at the bottom of the app-builder, allows you to create and manage queries to interact with connected **data sources**. It provides the capability to perform API requests, query **[databases](/docs/data-sources/overview)**, and apply **[transformations](/docs/tutorial/transformations)** or data manipulation using **[JavaScript](/docs/data-sources/run-js)** and **[Python](/docs/data-sources/run-py)**.
+The Query Panel, located at the bottom of the app-builder, allows you to create and manage queries to interact with connected **data sources**. It provides the capability to perform API requests, query **[databases](../data-sources/overview)**, and apply **[transformations](../tutorial/transformations)** or data manipulation using **[JavaScript](../data-sources/run-js)** and **[Python](../data-sources/run-py)**.
 
 The Query Panel consists of two sections:
-- The **[Query Manager](#query-manager)** on the right side, which displays a list of all the created queries.
-- The **[Query Editor](#query-editor)**, used to configure the selected query.
+- The **[Query Manager](#query-manager)** on the left side, which displays a list of all the created queries.
+- The **[Query Editor](#query-editor)** on the right side, used to configure the selected query.
 
-<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/app-builder/querypanel/newui3/qpanel.png" alt="Query Panel" />
-</div>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui3/qpanel-v2.png" alt="Query Panel" />
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Query Manager
 
 The Query Manager on the left lists all the queries that have been created in the application. Query Manager helps in managing the queries that have been created.
 
-<div style={{textAlign: 'center'}}>
-    <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/query-panel-preview-v2.png" alt="Query Panel" />
-</div>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/query-panel-preview-v3.png" alt="Query Panel" />
 
-
-The `+ Add` button on the Query Manager is used to add new queries in the application. When Add button is clicked, a menu will open with a list of options for creating a query from the available data sources.
+The **+** button on the Query Manager is used to add new queries in the application. When **+** button is clicked, a menu will open with a list of options for creating a query from the available data sources.
 
 ### Sort and Filter Queries
 On the top of Query Manager, there is button to Sort or Filter queries. The button allows you to select from the following options:
@@ -53,6 +44,8 @@ The edit button lets you rename the query, the delete button lets you delete the
 
 </div>
 
+<div style={{paddingTop:'24px'}}>
+
 ## Query Editor
 
 Query Editor provides the functionality to construct queries either through a low-code interface or by manually entering the query text.
@@ -61,28 +54,17 @@ Query Editor provides the functionality to construct queries either through a lo
 The changes made in the query panel will be saved automatically.
 :::
 
-<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/app-builder/querypanel/newui3/queryeditor.png" alt="Query Panel" />
-</div>
-
-
-<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui3/queryeditor-v2.png" alt="Query Panel" style={{marginBottom:'15px'}} />
 
 ### Query Name
 
 Apart from the query editor, the query name is displayed at the top of the query panel. Click on it to make edits and customize the query name as needed.
 
-<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/app-builder/querypanel/newui3/queryrename.gif" alt="Query Editor" />
-</div>
-
-</div>
-
-<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui3/queryrename-v2.png" alt="Query Editor" style={{marginBottom:'15px'}}/>
 
 ### Custom Parameters
 
-Custom parameters provide a convenient method for passing variables to a query. To add parameters, simply click the **+** button next to the Parameters label in the top bar of the query editor.
+Custom parameters provide a convenient method for passing variables to a query. To add parameters, simply click the **+ Add** button next to the Parameters label in the query editor.
 
 For each parameter, you need to specify:
 - **Name**: The identifier for the parameter.
@@ -90,15 +72,9 @@ For each parameter, you need to specify:
 
 **Syntax for utilizing the parameter:** Employ `parameters.<identifier>` in your query. It's important to note that parameters can only be utilized within the specific query where they are defined.
 
-Learn more about **[Using Custom Parameters](/docs/how-to/use-custom-parameters)**.
+Learn more about **[Using Custom Parameters](../how-to/use-custom-parameters)**.
 
-<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/app-builder/querypanel/newui3/queryparams.png" alt="Custom Parameters" />
-</div>
-
-</div>
-
-<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui3/queryparams-v2.png" alt="Custom Parameters" style={{marginBottom:'15px'}}/>
 
 ### Preview
 
@@ -106,38 +82,24 @@ The Preview button allows you to preview the data returned by the query. The dat
 
 Data preview is available in two formats: **Raw** and **JSON**. Click the clear button to reset the preview 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/app-builder/querypanel/newui2/preview.gif" alt="Query Editor" />
-</div>
-
-</div>
-
-<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/preview-v2.png" alt="Query Editor" style={{marginBottom:'15px'}}/>
 
 ### Run
 
-The Run button triggers the query, causing it to interact with the application. This action differs from the `Preview` feature.
+The Run button triggers the query, causing it to interact with the application. This action differs from the **Preview** feature.
 
-<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/app-builder/querypanel/newui2/run.gif" alt="Query Editor" />
-</div>
-
-</div>
-
-<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/run-v2.png" alt="Query Editor" style={{marginBottom:'15px'}}/>
 
 ### Query Configuration
 
 Query Configuration allows you to set vital values that are necessary to generate a response from a database. These configurations may include but are not limited to:
 
-- `Data source`: Name of the data source 
-- `Operation`: The kind of operation you want to perform (For e.g., `List collections`,`Find one`, `Find many`,etc.) 
+- **Data source**: Name of the data source 
+- **Operation**: The kind of operation you want to perform (For e.g., **List collections**, **Find one**, **Find many**,etc.) 
 
 The set of configuration options you get depend on the type of data source. 
 
-<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/app-builder/querypanel/newui2/params.png" alt="Query Editor" />
-</div>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/params-v2.png" alt="Query Editor" style={{marginBottom:'15px'}}/>
 
 #### Data Source
 
@@ -145,47 +107,21 @@ The primary and default parameter for all queries is **data source**. This optio
 
 In cases where multiple data sources of the same type are connected, easily switch the query's data source using the dropdown menu.
 
-<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/app-builder/querypanel/newui2/switch.png" alt="Query Editor" />
-</div>
-
-</div>
-
-<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/switch-v2.png" alt="Query Editor" style={{marginBottom:'15px'}}/>
 
 ### Transformation
 
-Queries can be enhanced with transformations to modify the query results. ToolJet supports transformations using two programming languages: JavaScript & Python. Refer to the detailed documentation on **[Transformations](/docs/tutorial/transformations)** for more information.
+Queries can be enhanced with transformations to modify the query results. ToolJet supports transformations using two programming languages: JavaScript & Python. Refer to the detailed documentation on **[Transformations](../tutorial/transformations)** for more information.
 
-<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/app-builder/querypanel/newui2/transform.gif" alt="Query Editor" />
-</div>
-
-</div>
-
-<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/transform-v2.png" alt="Query Editor" style={{marginBottom:'15px'}}/>
 
 ### Settings
 
-<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/app-builder/querypanel/newui2/settings.png" alt="Query Editor" />
-</div>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/settings-v2.png" alt="Query Editor" style={{marginBottom:'15px'}}/>
 
-#### Run this query on application load?
-
-Enabling this option executes the query every time the app is loaded.
-
-#### Request confirmation before running the query?
-
-Enabling this option displays a confirmation modal, prompting for a `Yes` or `No` before firing the query.
-
-#### Show notification on success?
-
-Enabling this option shows a success toast notification when the query is successfully triggered. Customize the **success message** and **notification duration** in milliseconds.
-
-</div>
-
-<div style={{paddingTop: '24px', paddingBottom: '24px'}}>
+- **Run this query on application load?** Enabling this option executes the query every time the app is loaded.
+- **Request confirmation before running the query?** Enabling this option displays a confirmation modal, prompting for a *Yes* or *No* before running the query.
+- **Show notification on success?** Enabling this option shows a success toast notification when the query is successfully triggered. Customize the *success message* and *notification duration* in seconds.
 
 ### Events
 
@@ -208,11 +144,9 @@ The Result:
 - The component displaying the to-do data will be update with the lates data.
 
 :::info
-Learn more about [Event Handlers and Actions](/docs/widgets/overview#component-event-handlers).
+Learn more about [Event Handlers and Actions](../widgets/overview#component-event-handlers).
 :::
 
-<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/app-builder/querypanel/newui2/events.png" alt="Query Editor" />
-</div>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/querypanel/newui2/events-v2.png" alt="Query Editor" />
 
-</div>
+</div>

docs/docs/app-builder/walkthrough/accessing-values.md

@@ -0,0 +1,48 @@
+---
+id: accessing-values
+title: Access and Reference Values
+---
+
+ToolJet's flexibility in integrating dynamic data within applications is facilitated through the ability to use custom code, and access and manipulate values derived from components, queries, globals. You can use double curly braces `{{}}` in the app-builder to access values or enter JavaScript code.
+
+## Accessing Values
+
+You can check all the accessible values using the left sidebar's **[Inspector](/docs/how-to/use-inspector/)** tab. This functionality can be handy to check data returned by queries and components on the canvas and reference it in queries or components. Inspector also displays other values like global values, variables, page variables, etc. 
+
+![Check Available Values Using Inspector](/img/tooljet-concepts/writing-custom-code/inspector.png)
+
+### Example Scenarios
+
+**Query Data Access**:
+- **Purpose**: Retrieve sales data from a query.
+- **Implementation**: Use the expression `{{queries.getSalesData.data}}` to fetch data from the `getSalesData` query.
+
+**Component Data Access**:
+- **Purpose**: Access data from a selected row in a table.
+- **Implementation**: Use the expression `{{components.table1.selectedRow.id}}` to get the ID of the selected row in `table1`.
+
+**Accessing Globals**
+- **Purpose**: Access global settings and variables predefined in the ToolJet environment.
+- **Implementation**: To check the current theme and adjust styles dynamically, use:
+`{{globals.theme.name}}`
+
+## More on the Left Sidebar
+
+The left sidebar in ToolJet is a hub for navigation and application configuration, featuring several options including Pages, Inspector, Debugger, and Global Settings.
+
+### Key Features
+
+- **Pages**: Manage multiple pages within a single application, enhancing organizational structure and user navigation.
+  
+- **Inspector**: Inspect data linked to queries and components, essential for debugging and data manipulation.
+
+- **Debugger**: Track and display errors during query execution, providing insights into application issues.
+
+- **Global Settings**: Configure application-wide settings such as app slug, header visibility, and maintenance mode.
+
+## Practical Tips
+
+- Use the Inspector to ensure correct data bindings and troubleshoot data flow issues.
+- Leverage the Debugger to maintain smooth operation and quick error resolution.
+- Adjust Global Settings to tailor app behavior to specific user or organizational needs.
+

docs/docs/app-builder/walkthrough/create-queries.md

@@ -0,0 +1,140 @@
+---
+id: create-queries
+title: Create Queries
+---
+
+The Query Panel at the bottom of the app-builder enables the creation and management of queries for interacting with connected data sources. This includes performing API requests, querying databases, and applying transformations or data manipulations using JavaScript and Python.
+
+The Query Panel consists of two sections:
+- **Query Manager** on the left, which displays a list of all the created queries.
+- **Query Editor** on the right, which is used to configure the selected query.
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/query-panel-preview-v2.png" alt="Create a query" />
+
+<div style={{paddingTop:'24px'}}>
+
+## Creating a New Query
+
+- Click on the **+** button in the Query Panel to open a menu listing the available data sources or you can add a new data source by clicking on **+ Add new Data Source** button.
+- Choose the desired data source to operate on.
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/data-source-list-v2.png" alt="Data Source List" style={{marginBottom:'15px'}}/>
+
+### Configuring the Query
+
+- Depending on the data source you have selected, you can either choose GUI mode or SQL mode to configure your query. 
+- **For GUI mode**: You will have to choose the **Table name** and **Operations** you want to perform. 
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/low-code-query-builder-v2.png" alt="Low Code Query Builder" />
+
+- **For SQL mode** Yow will have to enter the SQL query to perform your desired operation. 
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/sql-query-builder-v2.png" alt="SQL Query Builder" />
+
+- At the top of the Query Editor, you can click on the query name area to input a descriptive name, like *fetchUsers*.
+- If your query requires parameters, add them using the **+ Add** button near the **Parameters** label.
+
+**Example**: For a PostgreSQL query named *fetchUsers* that is fetching data from the *allUsers* table, you might set a parameter to a single user by passing in the id parameter.
+
+```sql
+SELECT * FROM allUsers WHERE id = {{parameters.id}}
+```
+
+Here, `{{parameters.id}}` is a parameter that you can define by clicking on the **+ Add** button on the Query Panel next to the **Parameters** label.
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Query Examples
+
+Let's look at some examples with a PostgreSQL data source with a database table named *feature_requests*.
+
+### Reading Data 
+- Create a query named *getAllRequests* that selects all records from the *feature_requests* table.
+
+```sql
+SELECT * FROM feature_requests;
+```
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/read-data-v2.png" alt="Read Data" />
+
+- You can scroll down and see the returned data in the **Preview** section.
+- Binding the returned data to components is a straightforward process. For instance, to add the returned data of the *getAllRequests* query to a Table, simply reference the query in the *Data* property of the Table component:
+
+```js
+{{queries.getAllRequests.data}}
+```
+
+### Inserting Data 
+- Define a query *addNewRequest* to insert a new item into the *feature_requests* table.
+
+```sql
+INSERT INTO feature_requests (id, title, description, votes, priority)
+VALUES (10, 'Toggle Component', 'We need a toggle component in future release.', 0, 2);
+```
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/insert-data-v2.png" alt="Insert Data" />
+
+You can insert values from the components in queries. For instance, the above code can be updated to pick values from the components by using the double curly braces to pass the component values:
+
+```sql
+INSERT INTO feature_requests (id, title, description, votes, priority)
+VALUES (10, `{{components.textinput1.value}}`, `{{components.textinput2.value}}`, 0, 2);
+```
+
+You can apply the same principles to upcoming examples.
+
+### Updating Data 
+
+To update existing data:
+
+**Example**: Set up a query *updateRequest* to modify details of an existing product based on the id of the selected product in the Table component.
+
+```sql
+UPDATE feature_requests
+SET 
+    title = 'Updated Feature Title',
+    description = 'Updated Feature Description',
+    votes = 15,
+    priority = 2
+WHERE id = `{{components.table1.selectedRow.id}}`;
+```
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/update-data-v2.png" alt="Update Data" style={{marginBottom:'15px'}}/>
+
+### Deleting Data 
+To delete data:
+
+**Example**: Craft a query *deleteRequest* that removes a product from the database based on a parameter.
+
+```sql
+DELETE FROM feature_requests WHERE votes < {{parameters.minimumVotes}};
+```
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-queries/delete-data-v2.png" alt="Delete Data" />
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Using Transformations and Events
+
+**Transformations**: After fetching data, you might want to format it (e.g., filtering out unnecessary fields or converting data types). ToolJet allows using JavaScript or Python for these transformations.
+
+**Event Handling**: Link queries with application events for dynamic interactions. For example, in the *updateRequest* query, you can set up an event to automatically run the *getAllRequests* query right after *updateRequest*. This ensures that the application retrieves and displays the updated data in the relevant components.
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Advanced Settings and Debugging
+
+**Preview and Run**: Use the **Preview** button to test queries and view results in raw or JSON format before executing them within the app using the **Run** button.
+
+**Configuration Settings**:
+- **Run this query on application load?**: Decide if the query should execute automatically when the app loads.
+- **Request confirmation before running query?**: Set up confirmations for query operations to prevent accidental data changes.
+- **Show notification on success?**: Configure notifications to inform users of successful operations. You can customize this property's notification message content and display duration.
+
+</div>

docs/docs/app-builder/walkthrough/create-ui.md

@@ -0,0 +1,161 @@
+---
+id: create-ui
+title: Create User Interfaces
+---
+
+ToolJet offers a variety of pre-built components that streamline the development process and allow for rapid prototyping and deployment of internal tools. This guide is focused on building a basic UI for a Support Desk Dashboard application.
+
+## Creating the Header
+- Drag and drop a **Text** component on the top left of the canvas. 
+- Click on the component to open its Properties Panel on the right and add **Support Desk Dashboard** under its `Data` property.  
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/add-header-text.png" alt="Add header text" />
+</div>
+
+You can see all the available properties of a component in the Properties Panel. You can manage the functionality and styling properties of the component in the Properties Panel.
+
+- Change its font size to 24, font weight to bold and color to blue(hex code - `#408FCC`). 
+- Add another Text component below it and enter `Track and manage all your tickets in one place` under its `Data` property.
+- Change its font size to 14 and color to grey (hex code - `#9B9B9B`).
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/add-sub-header-text.png" alt="Add sub header text" />
+</div>
+
+## Support Tickets Counter
+- Drag and drop **Statistics** component next to it. 
+- Under its `Primary value label`, enter `Created` and enter a number under `Primary value`. 
+- Change its Primary label color and Primary text color to blue(`#4A90E2`).
+- Disable `Hide secondary value` 
+- Add 2 more Statistics components for Pending and Closed tickets. 
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/add-statistics.png" alt="Add statistics" />
+</div>
+
+## Tickets Table
+- Add a **Table** component on the canvas. 
+- Navigate to its Properties Panel on the right and change its `Border Radius` to 10.  
+- Under its `Data` property, add the below dummy data:
+
+```js
+{{ [{
+    ticketId: "TCK1001",
+    customerName: "Jane Doe",
+    issueType: "Login Issue",
+    priority: "High",
+    status: "Open",
+    lastUpdated: "2024-04-12"
+  },
+  {
+    ticketId: "TCK1002",
+    customerName: "John Smith",
+    issueType: "Payment Failure",
+    priority: "Medium",
+    status: "Pending",
+    lastUpdated: "2024-04-11"
+  },
+  {
+    ticketId: "TCK1003",
+    customerName: "Alice Johnson",
+    issueType: "Feature Request",
+    priority: "Low",
+    status: "Closed",
+    lastUpdated: "2024-04-10"
+  },  {
+    ticketId: "TCK1004",
+    customerName: "Sarah Dunsworth",
+    issueType: "Feature Request",
+    priority: "High",
+    status: "Closed",
+    lastUpdated: "2024-04-10"
+  },
+] }}
+```
+
+- Add a **Text** component above it and enter **Tickets** under its `Data` property.
+- Change its font size to 14 and color to grey (hex code - `#9B9B9B`).
+- Under the `Columns` section, click on the columns and change their `Column name` properties to update the column name. For instance, change "ticketId" to "ticket ID", "customerName" to "customer name", etc. 
+
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/add-table.png" alt="Add table component" />
+</div>
+
+
+
+## Adding a New Page
+- Click on **Pages** on the left sidebar - there will be a *Home* page by default. Rename the home page to <i>Dashboard</i>.
+- Click on the `+` icon to create a new page and rename the new page to <i>Customers</i>.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/create-new-page.png" alt="Add new page" />
+</div>
+
+- Click and drag to select all components on the *Dashboard* page, copy them (CMD+C for Mac and Cntrl+C for Windows) and paste (CMD+V for Mac and Cntrl+V on Windows) them in the <i>Customers</i> page.
+
+
+- For the **Text** component for **Tickets**, change the `Data` property to **Customers**.
+- Add the below data under the Table's `Data` property.
+```js
+{{[
+    {
+        id: 1,
+        name: "John Doe",
+        email: "john.doe@example.com",
+        phone: "+1234567890",
+        status: "Active",
+        issuesResolved: 0
+    },
+    {
+        id: 2,
+        name: "John Smith",
+        email: "jane.smith@example.com",
+        phone: "+1234567891",
+        status: "Inactive",
+        issuesResolved: 0
+    },
+    {
+        id: 3,
+        name: "Alice Johnson",
+        email: "emily.johnson@example.com",
+        phone: "+1234567892",
+        status: "Active",
+        issuesResolved: 1
+    },
+    {
+        id: 4,
+        name: "Michael Brown",
+        email: "michael.brown@example.com",
+        phone: "+1234567893",
+        status: "Inactive",
+        issuesResolved: 4
+    },
+    {
+        id: 5,
+        name: "Sarah Dunsworth",
+        email: "michael.brown@example.com",
+        phone: "+1234567893",
+        status: "Active",
+        issuesResolved: 1
+    }
+]}}
+```
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/update-new-page.png" alt="Update new page" />
+</div>
+
+## Changing the Theme
+
+Click on the **Settings** button on the left sidebar. The `App mode` property will be set as `Auto` by default. Switch the `App mode` property to dark. Now when you preview the app, you can see that the app has a dark color scheme. 
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/create-ui/dark-color-scheme.png" alt="Dark mode" />
+</div>
+
+
+When you keep the `App mode` as auto, it will follow the color scheme of the browser.
+
+
+This guide has outlined the steps to create a Support Desk Dashboard UI using ToolJet's components. You now have a visually appealing interface that will help manage and track support tickets efficiently. Continue to explore ToolJet to learn about adding functionality to the UI. 

docs/docs/app-builder/walkthrough/sharing-apps.md

@@ -0,0 +1,60 @@
+---
+id: sharing-apps
+title: Preview, Test and Share Apps 
+---
+
+ ToolJet's App-Builder provides critical tools for app preview, development and deployment. Let's take a look at how you can use it throughout the development process.
+
+## Preview
+You can use Preview to ensure the app functions correctly on both mobile and desktop platforms.
+
+- Open the ToolJet App-Builder and navigate to your app.
+- Click the `Preview` icon located at the top-right corner to enter preview mode.
+- Use the **Mobile** and **Desktop** view options to toggle between different screen settings.
+- Observe component behavior and layout differences across devices.
+- Adjust component visibility using the `Show on mobile` and `Show on desktop` options under the component's Properties Panel.
+
+## Multi-Environment Testing
+Simulate app behavior in various stages of the development lifecycle (Development, Staging, Production).
+
+**Steps**:
+1. Select the desired environment from the Env dropdown menu in the top-bar.
+2. Make necessary changes and use the Version Manager to handle different versions.
+3. Preview the app to ensure it behaves as expected in the chosen environment.
+
+## Share
+
+### Releasing App
+To release an app to the users, you need to promote it to `Production` environment. Once you are in `Production`, the `Promote` button will have the `Release` label. Once you click on `Release` and confirm, the application will be released.
+
+### Making App Public
+You can share the application with external users via a user-friendly, accessible URL.
+
+- Click the `Share` button on the top-bar.
+- In the Share modal, toggle on `Make application public` to allow access without a ToolJet login.
+- Edit the default URL slug to a more memorable and relevant one for easier access.
+- Copy the newly customized URL and distribute it to your intended audience.
+
+This provides external users easy and direct access to the application, enhancing reach and usability.
+
+<!-- ## Embedding the App into a Website
+
+**Objective**: Integrate the ToolJet app within an existing web application to provide seamless user interaction.
+
+**Steps**:
+1. Ensure the app is set to public or set `ENABLE_PRIVATE_APP_EMBED` to `true` in the `.env` file for private apps.
+2. Navigate to the Share modal and copy the embeddable link.
+3. Paste the embed link into the `iframe` tag of your website's HTML code.
+
+**Benefit**: Users can interact with the ToolJet app directly from your website, improving the user experience and retaining user engagement. -->
+
+
+### Efficient Development with Gitsync
+
+Gitsync can be used to maintain application version control and facilitate collaborative development.
+
+- Click on the `Gitsync` icon in the top-bar.
+- Follow the prompts to connect your ToolJet app with a GitHub repository.
+- Utilize git operations to manage app development across different branches and versions.
+
+Read more about Gitsync **[here](/docs/gitsync)**.

docs/docs/app-builder/walkthrough/using-code.md

@@ -0,0 +1,76 @@
+---
+id: using-code
+title: Use Custom Code
+---
+
+In ToolJet, code serves as a powerful means to enhance and customize your applications. From complex logic implementations using **Run JavaScript code** or **Run Python code** queries to simple dynamic expressions with `fx`, the versatility is immense. Below is a basic demonstration of how you can leverage code within ToolJet.
+
+Let's take a look at different examples on how to use code. 
+
+## Using fx to Dynamically Change Properties of a Component:
+- Drag and drop a **Number Input** component and a **Button** component on the canvas.
+- Click on the **Button** component, navigate to its Properties Panel on the right and click on the `fx` button next to the `Disable` condition.
+- Enter the below code under the `Disable` condition:
+```js
+{{components.numberinput1.value ? false : true}}
+//replace numberinput1 with the name of your check box component
+```
+Now if there is no value entered in the Number Input component, the button will be disabled.
+
+You can apply the same principles to programmatically set a range of properties.
+
+#### Examples:
+1. To change the color of the Button component based on a Text Input field, enter the below code under the color property of the Button component:
+```js
+{{components.textinput1.value == "available" ? '#375FCF' : '#FF0000'}}
+//replace textinput1 with the name of your check box component
+```
+
+2. To change the visibility of an Image component based on a Checkbox component, enter the below code under the Visibility condition of the Image component:
+
+```js
+{{components.checkbox1.value ? true : false}}
+//replace checkbox1 with the name of your check box component
+```
+
+## Table Transformations to Change Cell Value
+- Go to the Properties Panel of a Table component, under `Columns`, click on a column name. 
+- Under `Transformations`, the default value will be `{{cellValue}}`. Add JavaScript code to update the cell value dynamically. 
+- For instance, to round off a value, you can use the below code:
+```js
+{{cellValue > 4.5 ? 5 : 4}}
+```
+
+## Transforming Data Returned by a Query Using Run JavaScript code:
+- Click on the **Add** button in the Query Panel and select **Run JavaScript code** 
+- Use the below code to execute a query, access its data and transform it:
+
+```js
+await queries.restapi1.run();
+// replace restapi1 with your query name
+
+let value = queries.restapi1.getData();
+// replace restapi1 with your query name
+
+function filterProductsByBrandAndRating(value.products, brand, minRating) {
+     return products.filter(product => product.brand === brand && product.rating >= minRating);}
+        return filterProductsByBrandAndRating(value.products, "Apple", 4.5)
+//use JavaScript code to refine the data        
+```
+
+## Use Moment.js to Add Current Date to the Datepicker Component
+- Select the Datepicker component and go to its Properties Panel. Under `Default value`, enter the below code:
+```js
+{{moment().format('DD/MM/YYYY');}}
+```
+The above code will add today's date as the default in DD/MM/YYYY format.
+
+## Show Data Based on the Logged-in User.
+
+- Click on the **Inspector** in the left side-bar and expand the `Globals` accordion to check all the values available under global. These properties can be used to make your app more dynamic. 
+- For instance, if there is a Button component used to update IT Ticket Requests, you can click on **fx** next to the component's `Visibility` property and enter the below code to make the button visible only when admins access it:
+```js
+{{globals.currentUser.groups.includes("admin") ? true : false }}
+```
+
+The examples provided are just a starting point for leveraging ToolJet's custom code capabilities. You have the flexibility to fully tailor your applications using our comprehensive custom coding features.

docs/docs/app-builder/walkthrough/variables.md

@@ -0,0 +1,59 @@
+---
+id: variables
+title: Create and Manage Variables
+---
+
+During application development, managing state and user interactions effectively are crucial for creating a seamless user experience. This involves keeping track of various data points, filtering data based on the user, tracking user preferences, navigation history, and more. In this context, variables and page variables allow developers to store and manage variables within an application dynamically.
+
+## Setting Variables and Page Variables
+
+Setting variables and page variables can be done in two ways - through events or by using **Run JavaScript code** queries. 
+- To set variables through events, add a new event handler and select `Set variable` as the action. Under `Action Options` you can define the Key and Value of the variable. Similarly, for page variables you can use the `Set page variable` action. 
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/variables/set-a-variable.png" alt="Set a variable" />
+</div>
+
+
+- To set variable through `Run JavaScript code` query, use the `setVariable(key, value)` function. Use `setPageVariable(key, value)` function for page variables.
+
+<div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/v2-beta/app-builder/walkthrough/variables/set-a-variable-js.png" alt="Set a variable through JS" />
+</div>
+
+## Example Use-Case for Page Variable:
+**Tracking the number of times a user visits a page:**
+- Create a `Run JavaScript code` query and enter the below code and name it *countVisits*:
+
+```js 
+function incrementPageVisit() {
+    if (!page.variables.visitCount) {
+        actions.setPageVariable('visitCount', 1);
+    } else {
+        actions.setPageVariable('visitCount', Number(page.variables.visitCount) + 1);
+    }
+}
+
+incrementPageVisit();
+```
+
+- Add a new page to your application named `Product Listing`.
+- Add an `Event Handler` on the newly created page, select `On page load` as the Event and `Run Query` as the Action. Under `Query`, select the *countVisits* query that we created in the previous step. 
+- Now, every time a user lands on the `Product Listing` page, the *CountVisits* query will run and the `visitCount` data will be updated.
+
+## Example Use-Case for Variables:
+**Preventing the appearance of loading state when the query data is loading:**
+
+You can prevent the appearance of any kind of loading state by filling the Table component with data using a variable. You can update this variable when the data update query runs successfully. 
+
+Below are the steps to achieve this when you are updating the data and don't want the Table component to display a loader.
+
+- Create two queries - *getData* and *updateData*
+
+- Add a `Query Success` event to the *getData* query and select the **setVariable** action to save the returned data in a variable (you will have to define the key and value for this, value will be the returned data i.e. queries.getData.data). Name the variable *loadedData*.
+
+- Enter `{{variables.loadedData}}` under the Table component's `Data` property.
+
+- In the *updateData* query, add two `Query Success` events. The first event should run the *getData* query and the second event should update the variable that you had created in the first step with the data returned by the *getData* query.
+
+Now, the Table will continue to display the data stored in *loadedData*. This prevents any loading indicators from appearing on the Table component when the data is being fetched or updated.

docs/docs/contributing-guide/documentation-guidelines/introduction.md

@@ -0,0 +1,40 @@
+---
+id: introduction
+title: Introduction
+---
+
+Welcome to the ToolJet Documentation guide! We're thrilled to have you here and can't wait to see the contributions you'll make to our docs. Your insights and improvements will help thousands of users get the most out of ToolJet 🚀.
+
+In the following sections, you'll find everything you need to get started with contributing to our documentation. 
+
+## What Makes Good Documentation?
+
+Good documentation is all about clarity, simplicity, and effectiveness. It should guide users through the usage and workings of ToolJet with precision, making it as easy as possible for them to build and deploy internal tools.
+
+Documentation is a cornerstone of our product. It's one of the most visited sections of our website, second only to our homepage. Without well-crafted, thorough documentation, users can't fully utilize the power of ToolJet, and their experience may suffer as a result.
+
+### The Golden Rule
+
+If a ToolJet feature lacks comprehensive documentation, it isn't considered complete. Quality documentation is essential for the success of our product and the satisfaction of our users. It’s often through documentation that users discover new features or decide to upgrade their tools.
+
+As a contributor, you can create detailed, user-centric content that thoroughly covers the features you're documenting in an engaging and accurate way.
+
+## Types of Documentation
+
+We aim to create rich, informative content across three key areas of documentation:
+
+1. **ToolJet Concepts**: Basic explanations of specific topics, offering general insights into how ToolJet features work.
+2. **How-to Guides**: Step-by-step instructions that help users accomplish specific tasks within ToolJet.
+3. **Reference**: Concise, lookup-style documentation that covers all possible usages, definitions, and edge cases for ToolJet features.
+
+As you document features, consider which of these categories your content fits best. Sometimes a feature might require multiple types of documentation to be fully covered.
+
+### Measuring Impact and Gathering Feedback
+
+The quality of our documentation isn't just determined by how well it's written—it's also measured by how well it serves our users. We regularly use analytics and feedback tools to assess the impact of our documentation and make data-driven improvements.
+
+## Next Steps...
+
+Once you've set up your local environment, take some time to explore our [Style Guide](style-guide.md), understand our page structures, and learn how to work with Docusaurus, the framework we use for our documentation.
+
+We look forward to your contributions and are excited to see how you'll help make ToolJet documentation even better!

docs/docs/contributing-guide/documentation-guidelines/pr-checklist.md

@@ -0,0 +1,15 @@
+---
+id: pr-checklist
+title: Pull Request Review Checklist
+---
+
+Use this quick checklist to catch common issues and maintain consistency across your project. 
+
+- Review spelling and grammar using tools like ChatGPT or Grammarly.
+- Ensure no compilation issues arise due to formatting.
+- Verify that all h2 and h3 headings follow title case.
+- Confirm that every section starting with h2 has a 24px padding-top.
+- Test for broken links, missing images, and any incorrect code.
+- Ensure new internal links use root-relative file paths.
+- Identify opportunities for relevant cross-linking.
+- Ensure that the changes are implemented in all the required versions. 

docs/docs/contributing-guide/documentation-guidelines/style-guide.md

@@ -0,0 +1,236 @@
+---
+id: style-guide
+title: Style Guide
+---
+
+Welcome to the ToolJet's Style Guide for creating clear, consistent, and accessible documentation. In this guide, you will find recommendations on text formatting, proper use of headers, code snippet styling, accessibility practices, and much more. 
+
+## 1. Text Formatting Guidelines
+
+Different elements in your projects should be formatted consistently for clarity. Here are some recommendations:
+
+a. Italics are used for names given to Queries, Database Tables, and Components.
+
+**Examples:**
+- Create a new query and rename it to *getEmployees*.
+- Select **ToolJetDB** as the the data source and *Employees* table as the data source.
+- Pass the returned data to the *allEmployees* component.
+
+b. Bold is applied for Workspace Constants, Clickable Buttons, fx, Data Sources, and Components.
+
+**Examples:**
+- Select the **Button** component and change its label to "Save".
+- Drag andn drop a **Table** component and rename it to *todosTable*.
+- Expand the query panel at the bottom and click on the **Add** button to create a new **REST API** query.
+
+
+c. Use Single Ticks for Inline Code and Triple Ticks for Multi-Line Code.
+
+**Examples:**
+- The **fx** option next to the Loading state property can be used to add a loader to the component. For instance, you can enter `{{queries.getData.isLoading === true}}` to show the loader while the *getData* query is running. 
+- Use the below code to fetch data:
+```js
+// this code is wrapped in triple ticks
+const fetchData = async () => {
+const response = await api.get('/users');
+console.log(response.data);
+};
+```
+
+**Additional Items**:
+- API Endpoints: Use code ticks for API endpoints (e.g., `GET /api/v1/resources`).
+- Labels or User Inputs: Use double quotes to highlight labels or user inputs (e.g., "Enter your username").
+
+---
+
+## 2. Headings
+
+Proper use of headers is crucial for organizing content and improving readability. Use the following guidelines to determine which header level to apply:
+
+- **Title Casing**: Apply title casing for all headers to maintain consistency.
+- **Main Header**: Use a single hash (`#`) for the main topic of the document or section. This should be used once per document for the main header.
+- **Secondary Header**: Use double hashes (`##`) for subtopics or main sections within a major section. This level of header should organize content under the main header.
+- **Tertiary Header**: Use triple hashes (`###`) for more detailed points or subsections under a secondary header. This header is useful for going deeper into specifics within a section.
+- **Quaternary Header**: Use four hashes (`####`) for even more granular details within a tertiary section. This header is rarely needed but can be useful in complex documentation.
+- **Spacing**: Ensure there’s a blank line before and after each header to maintain readability and to separate the sections clearly.
+- **Header Frequency**: Avoid using more than three levels of headers to prevent overcomplication. If additional granularity is needed, consider breaking the content into separate sections or documents.
+
+---
+
+## 3. Markdown Tables
+
+To efficiently present extensive and repetitive information about features, such as the properties of a component, use markdown tables. This format helps organize and display the data clearly and concisely.
+
+Ensure all tables are left-aligned for consistency. This aids in readability and ensures that the content is easy to scan.
+
+**Example**:
+| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div>|
+|:---------- | :---------- | :------------ |
+| chartTitle       | Holds the title of the chart component. | Accessible dynamically with JS (for e.g., `{{components.chart1.chartTitle}}`). |
+| xAxisTitle         | Contains the title for the X-axis of the chart.        | Accessible dynamically with JS (for e.g., `{{components.chart1.xAxisTitle}}`). |
+| yAxisTitle         | Contains the title for the Y-axis of the chart.        | Accessible dynamically with JS (for e.g., `{{components.chart1.yAxisTitle}}`). |
+| clickedDataPoints  | Stores details about the data points that were clicked.| Accessible dynamically with JS (for e.g., `{{components.chart1.clickedDataPoints}}`). Each data point includes `xAxisLabel`, `yAxisLabel`, `dataLabel`, `dataValue`, and `dataPercent`. |
+  
+- Use **bold** formatting for all column headers to differentiate them from the table content.
+- Avoid leaving empty cells in tables. If a cell doesn’t have applicable content, use a placeholder like "N/A" or "—" to indicate that the cell is intentionally blank.
+
+---
+
+## 4. Admonitions
+
+Admonitions are blocks of content that are designed to draw attention to specific points in your documentation. Use them sparingly to avoid overwhelming the user. Reserve admonitions for critical or cautionary information only. 
+
+- **Warning Admonitions**: Use `warning` type admonitions for high-risk actions or irreversible changes. This type of admonition should alert users to potential dangers or critical issues.
+
+**Example**: 
+:::warning
+Ensure you back up your data before upgrading to the latest version.
+:::
+
+- **Tip Admonitions**: Use `info` type admonitions to offer useful hints or best practices. These are generally positive and provide additional value to the user.
+
+**Example**:
+:::info
+Preview the changes before pushing them.
+:::
+
+Overuse can dilute their impact. Use *italics* instead of admonitions whenever possible to emphasize important information instead of admonitions. This is a less intrusive way to draw attention to key details.
+
+---
+
+## 5. Image Guidelines
+Include images that closely align with real-world use cases. This makes the documentation more practical and relatable for the user.
+
+- Name images to reflect their purpose, such as `create-get-query.jpeg`. This helps maintain an organized file structure and makes it easier to locate specific images.
+- Align images to the left. This is the standard alignment that works well with most content layouts.
+- Set the image width to 100% to ensure it scales appropriately with different screen sizes.
+- Keep image sizes under 300kb to balance load speed and quality. 
+- Alt text should be a concise description of the image, providing the same information as the image itself. This is essential for accessibility and for users who rely on screen readers.
+- Skip phrases like "image of" or "graphic of" as screen readers handle this automatically. Focus on describing what is important about the image.
+- Use `WEBP` or `PNG` formats for web images due to their balance between quality and file size. 
+- Use `SVG` for logos or icons to ensure scalability without loss of quality.
+
+---
+
+## 6. Tone and Clarity
+
+Maintaining a clear and consistent tone throughout your documentation is crucial for effective communication. The goal is to be concise, informative, and user-friendly.
+
+- Keep language straightforward and concise. Avoid jargon unless it's essential for the audience and provide explanations where necessary.
+- Always proofread content using Grammarly or a similar tool before submitting a PR. This helps catch errors that might be missed during the initial writing process.
+- Use the active voice wherever possible to make the content more direct and engaging. Passive voice can make sentences longer and more difficult to understand.
+
+
+---
+
+## 7. Bullet Points
+
+Use bullet points to break down steps or lists for clarity. This makes the content easier to scan and understand.
+
+- Avoid using bullet points for a single item. If there is only one point to make, integrate it into the main text instead.  
+- Ensure subpoints are correctly indented in markdown. This maintains the hierarchy and relationship between the main point and subpoints.
+- End bullet points that are complete sentences with a period. This helps maintain proper grammar and readability.
+- Do not insert blank lines between bullet points. This keeps the list compact and visually connected.
+- Use nested bullet points for items that require further explanation or hierarchy within a list.
+
+---
+
+## 9. Specific Language Guidelines
+
+Use the below language guidelines to ensure clarity and consistency.
+
+### HTTP Formatting
+
+- All HTTP headers should be capitalized like this: `First-Letter-Capitalized`. This follows the standard convention and makes the headers easier to distinguish.
+  **Example**: 
+```
+Content-Type: application/json
+Authorization: Bearer <token>
+```
+
+- HTTP blocks should be ready to run when pasted into tools like Postman or `cURL` commands. This means including all necessary components like headers, body, and method. **Example**:
+```bash
+curl -X POST https://api.example.com/resource \
+-H 'Content-Type: application/json' \
+-H 'Authorization: Bearer <token>' \
+-d '{"key": "value"}'
+```
+
+### JavaScript Guidelines
+
+- End statements with semicolons (`;`). While JavaScript can often infer semicolons, explicitly including them prevents potential issues, especially in complex code. **Example**:
+```javascript
+const name = 'John';
+console.log(name);
+```
+
+- Use single quotes for strings unless double quotes are necessary (e.g., to avoid escaping single quotes inside the string). **Example**:
+```javascript
+const greeting = 'Hello, world!';
+```
+
+### JSON Formatting
+
+- Indent JSON by 2 spaces. This is a standard practice that improves readability. **Example**:
+```json
+{
+    "name": "John Doe",
+    "age": 30,
+    "city": "New York"
+}
+```
+
+- Avoid comments in JSON code, as JSON does not natively support comments. If explanations are needed, provide them outside the JSON block in the documentation.
+
+### Shell Scripting
+
+- Break separate commands into distinct code blocks or chain them with `&&` for readability. For multi-line commands, use `\` to break lines. **Example**:
+```bash
+sudo apt-get update && \
+sudo apt-get install -y curl
+```
+
+- Preface comments with `#` to explain the command's purpose.
+**Example**:
+```bash
+# This command installs Node.js
+sudo apt-get install -y nodejs
+```
+
+### SQL Queries
+
+- Format SQL queries with keywords in uppercase, and break down long queries into multiple lines for better readability. **Example**:
+```sql
+SELECT name, age, city
+FROM users
+WHERE age > 30
+ORDER BY name ASC;
+```
+
+---
+
+## 10. Linking Guidelines
+
+- Use root-relative paths (e.g., `/schema/postgres/tables.mdx`) instead of relative links to avoid broken links during file moves. This practice ensures that links remain functional even if files are moved within the directory structure. **Example**: <br/>
+`[Postgres tables](/schema/postgres/tables.mdx)` links to the Postgres tables page.
+
+- When linking to a specific section within a page, use anchor links to direct the user precisely where needed. **Example**:  <br/>
+`ToolJet supports [multiple environments,](https://docs.tooljet.com/docs/#multiple-environments)` takes the user directly to the specific section.
+
+
+---
+
+## 11. Semantics and Terminology
+
+- Write in the second person (e.g., *you*, *your*). This makes the content more engaging and directly applicable to the reader.
+- Ensure that case sensitivity is consistently applied across the document, particularly for technical terms or commands. This is important for commands and variables in code that are case-sensitive.
+**Example**: <br/>"`MyVariable` and `myvariable` are not the same."
+- Define acronyms on first use and avoid using them excessively to maintain readability. This helps readers who may not be familiar with all acronyms.
+**Example**: <br/>"The Content Delivery Network (CDN) is used to deliver content to users efficiently."
+- Maintain consistent terminology throughout the document. If you start with "user," don't switch to "customer" later in the same context.
+
+---
+
+
+
+By following these guidelines, you can ensure that your documentation is clear, consistent, and easy to use for a wide range of audiences. 

docs/docs/contributing-guide/setup/architecture.md

@@ -13,7 +13,7 @@ ToolJet server is a Node.js API application. Server is responsible for authentic
 **Dependencies:**
 - **PostgreSQL** - ToolJet server persists data to a postgres database. 
 - **Email service** (SMTP/Sendgrid/Mailgun/etc) - Required to send user invitations and password reset emails.   
-- **PostgREST (Optional)** - Standalone web server that converts PostgreSQL database into queryable RESTful APIs for Tooljet Database.
+- **PostgREST (Optional)** - Standalone web server that converts PostgreSQL database into queryable RESTful APIs for ToolJet Database.
     
 ### 2. ToolJet Client  
 

docs/docs/contributing-guide/setup/docker.md

@@ -4,133 +4,101 @@ title: Docker
 ---
 
 :::warning
-The following guide is intended for contributors to set-up ToolJet locally. If you're interested in **self-hosting** ToolJet, please refer to the **[Setup](/docs/setup/)** section.
+The following guide is intended for contributors to set up ToolJet locally. If you're interested in **self-hosting** ToolJet, please refer to the **[Setup](/docs/setup/)** section.
 :::
 
-Docker compose is the easiest way to setup ToolJet server and client locally.
+Docker Compose is the easiest way to set up the ToolJet server and client locally.
 
-:::info
-If you rather want to try out ToolJet locally with docker, you can follow the steps [here](https://docs.tooljet.com/docs/setup/try-tooljet).
-:::
+*If you just want to try out ToolJet locally with docker, you can follow the steps [here](https://docs.tooljet.com/docs/setup/try-tooljet).*
 
 ## Prerequisites
 
 Make sure you have the latest version of `docker` and `docker compose` installed.
 
-[Official docker installation guide](https://docs.docker.com/desktop/)
+**[Official docker installation guide](https://docs.docker.com/desktop/)**
 
-[Official docker-compose installation guide](https://docs.docker.com/compose/install/)
-
-We recommend:
-
-```bash
-docker --version
-Docker version 19.03.12, build 48a66213fe
-
-docker compose --version
-docker compose version 1.26.2, build eefe0d31
-```
+**[Official docker-compose installation guide](https://docs.docker.com/compose/install/)**
 
 ## Setting up
 
 :::warning
-If you are setting up on a Windows machine, we advise you to setup Docker desktop with WSL2.
-Please find more information [here](https://docs.docker.com/desktop/windows/wsl/).
+If you are setting up on a Windows machine, we advise you to set up Docker Desktop with WSL2. More information is available [here](https://docs.docker.com/desktop/windows/wsl/). 
+
+Make sure to run it within the WSL2 terminal.
 :::
 
-1. Clone the repository
-   ```bash
-   git clone https://github.com/tooljet/tooljet.git
-   ```
+1. Fork the repository:
 
-2. Create a `.env` file by copying `.env.example`. More information on the variables that can be set is given in the [environment variables reference](/docs/setup/env-vars)
-   ```bash
-   cp .env.example .env
-   cp .env.example .env.test
-   ```
+   Go to the [ToolJet GitHub repository](https://github.com/ToolJet/Tooljet), click on the **Fork** button to create a copy of the repository under your own GitHub account.
 
-3. Populate the keys in the `.env` and `.env.test` file
-   :::info
-   `SECRET_KEY_BASE` requires a 64 byte key. (If you have `openssl` installed, run `openssl rand -hex 64` to create a 64 byte secure random key)
+2. Clone your forked repository:
 
-   `LOCKBOX_MASTER_KEY` requires a 32 byte key. (Run `openssl rand -hex 32` to create a 32 byte secure random key)
-   :::
-   :::warning 
-   If you are setting up on a Windows machine. Please make sure that .env file line endings to be LF as it will be CRLF by default unless configured for Windows machine.
-   :::
+   After forking, clone the forked repository to your local machine using the URL of your forked repo.
+
+```bash
+git clone https://github.com/<your-username>/ToolJet.git
+```
+
+3. Create a `.env` file by copying `.env.example`. More information on the variables that can be set is given in the **[environment variables reference](/docs/setup/env-vars)**.
+
+```bash
+cp ./deploy/docker/.env.internal.example .env
+```
+
+4. Populate the keys in the `.env` using the below the command: 
+
+```bash
+chmod +x ./deploy/docker/internal.sh && ./deploy/docker/internal.sh
+```
+
+:::warning
+If you are setting up on a Windows machine, please ensure that the .env file line endings are set to LF, as they will be CRLF by default unless configured otherwise.
+:::
    
-   Example:
+5. Build Docker images.
 
-   ```bash
-    cat .env
-    TOOLJET_HOST=http://localhost:8082
-    LOCKBOX_MASTER_KEY=13c9b8364ae71f714774c82498ba328813069e48d80029bb29f49d0ada5a8e40
-    SECRET_KEY_BASE=ea85064ed42ad02cfc022e66d8bccf452e3fa1142421cbd7a13592d91a2cbb866d6001060b73a98a65be57e65524357d445efae00a218461088a706decd62dcb
-    NODE_ENV=development
-    # DATABASE CONFIG
-    PG_HOST=postgres
-    PG_PORT=5432
-    PG_USER=postgres
-    PG_PASS=postgres
-    PG_DB=tooljet_development
-    ORM_LOGGING=all
-   ```
+```bash
+docker compose build
+docker compose run --rm  plugins npm run build:plugins
+```
 
-   ```bash
-    cat .env.test
-    TOOLJET_HOST=http://localhost:8082
-    LOCKBOX_MASTER_KEY=13c9b8364ae71f714774c82498ba328813069e48d80029bb29f49d0ada5a8e40
-    SECRET_KEY_BASE=ea85064ed42ad02cfc022e66d8bccf452e3fa1142421cbd7a13592d91a2cbb866d6001060b73a98a65be57e65524357d445efae00a218461088a706decd62dcb
-    NODE_ENV=test
-    # DATABASE CONFIG
-    PG_HOST=postgres
-    PG_PORT=5432
-    PG_USER=postgres
-    PG_PASS=postgres
-    PG_DB=tooljet_test
-    ORM_LOGGING=error
-   ```
+6. Run ToolJet.
 
-4. Build docker images
+```bash
+docker compose up
+```
 
-   ```bash
-   docker compose build
-   docker compose run --rm  plugins npm run build:plugins
-   ```
-
-5. Run ToolJet
-
-   ```bash
-   docker compose up
-   ```
    ToolJet should now be served locally at `http://localhost:8082`.
 
-8. To shut down the containers,
-   ```bash
-   docker compose stop
-   ```
+7. To shut down the containers, use the below commands:
+
+```bash
+docker compose stop
+```
 
 ## Making changes to the codebase
 
-If you make any changes to the codebase/pull the latest changes from upstream, the tooljet server container would hot reload the application without you doing anything.
+If you make any changes to the codebase or pull the latest changes from upstream, the ToolJet server container will hot reload the application without any action required from you.
 
-Caveat:
+**Note:**
 
-1. If the changes include database migrations or new npm package additions in the package.json, you would need to restart the ToolJet server container by running `docker compose restart server`.
+1. If the changes include database migrations or new npm package additions in `package.json`, you need to restart the ToolJet server container by running `docker compose restart server`.
+
+
+2. If you need to add a new binary or system library to the container itself, you would need to add those dependencies in `docker/server.Dockerfile.dev` and then rebuild the ToolJet server image. You can do that by running `docker compose build server`. After the build completes, you can start all services by running `docker compose up`.
 
-2. If you need to add a new binary or system library to the container itself, you would need to add those dependencies in `docker/server.Dockerfile.dev` and then rebuild the ToolJet server image. You can do that by running `docker compose build server`. Once that completes you can start everything normally with `docker compose up`.
 
 Example:
 Let's say you need to install the `imagemagick` binary in your ToolJet server's container. You'd then need to make sure that `apt` installs `imagemagick` while building the image. The Dockerfile at `docker/server.Dockerfile.dev` for the server would then look something like this:
 
-```
+```bash
 FROM node:18.18.2-buster AS builder
 
 RUN apt update && apt install -y \
-  build-essential  \
-  postgresql \
-  freetds-dev \
-  imagemagick
+build-essential  \
+postgresql \
+freetds-dev \
+imagemagick
 
 RUN mkdir -p /app
 WORKDIR /app
@@ -147,33 +115,33 @@ COPY ./docker/ ./docker/
 COPY ./.env ../.env
 
 RUN ["chmod", "755", "entrypoint.sh"]
-
 ```
 
 Once you've updated the Dockerfile, rebuild the image by running `docker compose build server`. After building the new image, start the services by running `docker compose up`.
 
-## Running tests
+## Running Tests
 
 Test config picks up config from `.env.test` file at the root of the project.
 
-Run the following command to create and migrate data for test db
+1. Run the following command to create and migrate data for test db:
 
 ```bash
 docker compose run --rm -e NODE_ENV=test server npm run db:create
 docker compose run --rm -e NODE_ENV=test server npm run db:migrate
 ```
 
-To run the unit tests
+2. To run the unit tests:
 ```bash
 docker compose run --rm server npm run --prefix server test
 ```
 
-To run e2e tests
+3. To run e2e tests:
+
 ```bash
 docker compose run --rm server npm run --prefix server test:e2e
 ```
 
-To run a specific unit test
+4. To run a specific unit test:
 
 ```bash
 docker compose run --rm server npm --prefix server run test <path-to-file>
@@ -182,3 +150,40 @@ docker compose run --rm server npm --prefix server run test <path-to-file>
 ## Troubleshooting
 
 Please open a new issue at https://github.com/ToolJet/ToolJet/issues or join our [Slack Community](https://tooljet.com/slack) if you encounter any issues when trying to run ToolJet locally.
+
+
+## Debugging with Docker
+
+In this section, we provide guidance on how to enable debugging for ToolJet services using Docker and Visual Studio Code. These additions will significantly benefit contributors by streamlining the debugging process and enhancing the overall development experience.
+
+
+#### VSCode Launch Configuration:
+
+A new configuration has been added in `.vscode/launch.json` to facilitate launching the client and server in debug mode. This allows contributors to easily debug the application within the Visual Studio Code environment. Configurations include:
+
+- **Docker Debug Client**: Launch the client running in a Docker container for debugging within Visual Studio Code.
+- **Docker Debug Server**: Debug the server in a Docker container, allowing developers to leverage Node.js debugging tools directly from their IDE.
+
+#### VSCode Task Configuration:
+
+A new task has been introduced in `.vscode/tasks.json` to manage Docker Compose commands for debugging. This includes tasks to start the client and server in detached mode, making it easier to initiate debugging sessions.
+
+#### Docker Compose Debug Configuration:
+
+The `docker-compose-debug.yaml` file defines the services for debugging, exposing the necessary port (9229) for Node.js debugging. This setup ensures that the server runs in debug mode, allowing for effective troubleshooting.
+
+### Benefits of Debugging Configuration
+These changes streamline the debugging process, making it more efficient for contributors to identify and fix issues. The integration with Visual Studio Code allows for advanced debugging features such as breakpoints and real-time variable inspection. Furthermore, standardizing the debugging setup fosters better collaboration among team members, facilitating knowledge sharing and improving the overall development workflow.
+
+By implementing these configurations, ToolJet aims to enhance the development experience, enabling contributors to resolve issues swiftly and maintain project momentum.
+
+If you want to run docker in debug mode use this command
+```bash
+docker-compose -f docker-compose.yaml -f docker-compose-debug.yaml up --build
+```
+
+**Open the Project in VSCode**: Open the ToolJet directory in Visual Studio Code.
+
+Check Launch Configurations:
+- Open the debug view by clicking on the Debug icon in the Activity Bar on the side of the window.
+- Select the appropriate configuration, such as Docker Debug Client or Docker Debug Server.

docs/docs/contributing-guide/setup/macos.md

@@ -46,9 +46,16 @@ To set up and run ToolJet on macOS for development, begin by opening your termin
     brew install postgrest
     ```
 
-    1.5 Clone the repository
+    1.5 Fork the repository:
+
+    Go to the [ToolJet GitHub repository](https://github.com/ToolJet/Tooljet), click on the **Fork** button to create a copy of the repository under your own GitHub account.
+
+    1.6 Clone your forked repository:
+
+    After forking, clone the forked repository to your local machine using the URL of your forked repo.
+
     ```bash
-    git clone https://github.com/tooljet/tooljet.git
+    git clone https://github.com/<your-username>/ToolJet.git
     ```
 
 2. Set up environment variables

docs/docs/contributing-guide/setup/ubuntu.md

@@ -18,6 +18,11 @@ Follow these steps to setup and run ToolJet on Ubuntu. Open terminal and run the
     curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
     ```
 
+    Use the command to load NVM:
+    ```bash
+    source ~/.nvm/nvm.sh
+    ```
+
     Close and reopen your terminal to start using nvm
     ```bash
     nvm install 18.18.2
@@ -37,28 +42,35 @@ Follow these steps to setup and run ToolJet on Ubuntu. Open terminal and run the
     1.3 Install PostgREST (optional)
 
     :::info 
-    Required only if Tooljet Database is being used. 
+    Required only if ToolJet Database is being used. 
 
     Please use PostgREST version 10.1.1.x
     :::
 
     Please follow the installation [PostgREST](https://postgrest.org/en/stable/install.html) guide
 
-    **Note:** Clone the GitHub repo locally using: 
-    
-    ```bash
-    git clone https://github.com/ToolJet/ToolJet.git
-    ```
+2. Setup the repository:
 
+    2.1 Fork the repository:
+
+    Go to the [ToolJet GitHub repository](https://github.com/ToolJet/Tooljet), click on the **Fork** button to create a copy of the repository under your own GitHub account.
+
+    2.2 Clone your forked repository:
+
+    After forking, clone the forked repository to your local machine using the URL of your forked repo.
+
+    ```bash
+    git clone https://github.com/<your-username>/ToolJet.git
+    ```
     
-2. Set up environment variables
+3. Set up environment variables
 
     Create a `.env` file by copying `.env.example`. More information on the variables that can be set is given in the [environment variables reference](/docs/setup/env-vars)
     ```bash
     cp .env.example .env
     ```
 
-3. Populate the keys in the env file
+4. Populate the keys in the env file
    :::info
    `SECRET_KEY_BASE` requires a 64 byte key. (If you have `openssl` installed, run `openssl rand -hex 64` to create a 64 byte secure   random key)
 
@@ -73,15 +85,20 @@ Follow these steps to setup and run ToolJet on Ubuntu. Open terminal and run the
    SECRET_KEY_BASE=4229d5774cfe7f60e75d6b3bf3a1dbb054a696b6d21b6d5de7b73291899797a222265e12c0a8e8d844f83ebacdf9a67ec42584edf1c2b23e1e7813f8a3339041
    ```
 
-4. Install and build dependencies
+5. Install and build dependencies
     ```bash
     npm install
     npm install --prefix server
     npm install --prefix frontend
     npm run build:plugins
     ```
+   > **_NOTE:_**
+   > If the `npm run build:plugins` command fails due to some packages are missing, try running the following command to install the necessary packages:
+   `sudo apt install build-essential`
+   > then proceed to `npm run build:plugins` step again
+    
 
-5. Set up database
+6. Set up database
     ```bash
     npm run --prefix server db:create
     npm run --prefix server db:reset
@@ -90,17 +107,17 @@ Follow these steps to setup and run ToolJet on Ubuntu. Open terminal and run the
     If at any point you need to reset the database, use this command `npm run --prefix server db:reset`
     :::
 
-6. Run plugins compilation in watch mode
+7. Run plugins compilation in watch mode
     ```bash
     cd ./plugins && npm start
     ```
 
-7. Run the server
+8. Run the server
     ```bash
     cd ./server && npm run start:dev
     ```
 
-8. Run the client
+9. Run the client
     ```bash
     cd ./frontend && npm start
     ```
@@ -108,7 +125,7 @@ Follow these steps to setup and run ToolJet on Ubuntu. Open terminal and run the
 
     The client will start running on the port 8082, you can access the client by visiting:  [http://localhost:8082](http://localhost:8082)
 
-9. Create login credentials
+10. Create login credentials
 
     Visiting https://localhost:8082 should redirect you to the login page, click on the signup link and enter your email. The emails sent by the server in development environment are captured and are opened in your default browser. Click the invitation link in the email preview to setup the account.
 

docs/docs/dashboard.md

@@ -5,7 +5,7 @@ title: Dashboard
 
 The ToolJet Dashboard is the initial landing page that you see upon logging into your workspace. This interface serves as a central hub where you can access a variety of features. Primarily, it displays all the applications you've created within ToolJet. Moreover, you have the capability to create new workspaces and applications directly from this dashboard. Additionally, it provides an option to create folders for categorizing and managing applications for easier organization, access control, and workflow management.
 
-Furthermore, the dashboard serves as a gateway to various essential sections, such as **[Workflows](/docs/workflows/overview)**, **[ToolJet Database](/docs/tooljet-database)**, **[Data Sources](/docs/data-sources/overview)**, **[Marketplace](/docs/marketplace/marketplace-overview)**, **[Workspace Settings](/docs/tutorial/manage-users-groups)**, **[Settings](/docs/enterprise/superadmin/#settings)**, and **[Audit logs](/docs/enterprise/audit_logs/)**. You can effortlessly navigate to these sections directly from the dashboard.
+Furthermore, the dashboard serves as a gateway to various essential sections, such as **[Workflows](/docs/workflows/overview)**, **[ToolJet Database](/docs/tooljet-db/tooljet-database/)**, **[Data Sources](/docs/data-sources/overview)**, **[Marketplace](/docs/marketplace/marketplace-overview)**, **[Workspace Settings](/docs/tutorial/manage-users-groups)**, **[Settings](/docs/enterprise/superadmin/#settings)**, and **[Audit logs](/docs/enterprise/audit_logs/)**. You can effortlessly navigate to these sections directly from the dashboard.
 
 <div style={{textAlign: 'center'}}>
 

docs/docs/data-sources/airtable.md

@@ -2,23 +2,45 @@
 id: airtable
 title: Airtable
 ---
-<div style={{paddingBottom:'24px'}}>
 
-ToolJet can connect to your **Airtable** account to read and write data. **Personal Access Token** is required to connect to the Airtable data source on ToolJet. You can generate the Personal Access Token by visiting **[Developer Hub from your Airtable profile](https://support.airtable.com/docs/creating-and-using-api-keys-and-access-tokens#understanding-personal-access-token-basic-actions)**.
+ToolJet can connect to your **Airtable** account to read and write data.
+
+<div style={{paddingTop:'24px'}}>
+
+## Connection
+
+To establish a connection with the **Airtable** data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview/)** page from the ToolJet dashboard.
+
+ToolJet requires the following to connect to your Airtable:
+- **Personal Access Token**
+
+You can generate the Personal Access Token by visiting **[Developer Hub from your Airtable profile](https://support.airtable.com/docs/creating-and-using-api-keys-and-access-tokens#understanding-personal-access-token-basic-actions)**.
 
 <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/datasource-reference/airtable/airtableconnect-v2.gif" alt="Airtable Data Source Connection" />
+    <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/airtable/airtableconnect-v2.gif" alt="Airtable Data Source Connection" />
 </div>
 
-<br/>
+</div>
 
 :::info
 Airtable API has a rate limit, and at the time of writing this documentation, the limit is five(5) requests per second per base. You can read more about rate limits here **[Airtable API](https://airtable.com/api)**.
 :::
 
+
+<div style={{paddingTop:'24px'}}>
+
+## Querying Airtable
+
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Airtable** datasource added in previous step.
+3. Select the desired operation from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
+
+<img className="screenshot-full" src="/img/datasource-reference/airtable/operations.png" alt="Airtable Data Source Operations" />
+
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Supported Operations
 
@@ -30,200 +52,218 @@ Airtable API has a rate limit, and at the time of writing this documentation, th
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+### List Records
 
-### List records
+This operation retrieves a list of records from the specified table.
 
-This operation returns a list of records from the specified table.
+#### Required Parameters
 
-#### Required parameters:
+- **Base ID**: The unique identifier of the Airtable base.
+- **Table name**: The name or ID of the table to retrieve records from.
 
-- **Base ID:** To find the Base ID, first visit **[Airtable API](https://airtable.com/api)**. Then select the base you want to connect to. The Base ID will be mentioned in the API documentation. Example Base ID: `appDT3UCPffPiSmFd`
+#### Optional Parameters*
 
-- **Table name:** The name of the table from which you want to fetch the records.
+- **Page size**: The number of records to return per page.
+- **Offset**: Used for pagination to fetch the next set of records.
+- **Filter by formula**: A formula to filter records. 
+- **Fields**: Specifies which fields to include in the response.
+- **Timezone**: The timezone to use for date and time fields.
+- **User locale**: The locale to use for formatting date and time fields.
+- **Cell format**: Determines how cell values are returned. Possible values are:
+      - **json**: Returns cell values as JSON objects, depending on the field type.
+      - **string**: Returns cell values as strings.
+- **View**: Specifies the view to retrieve records from.
+- **Sort**: Defines the sorting order of records.
 
-#### Optional parameters:
+:::info
+Timezone and User locale are mutually dependent. If you provide a timezone, you must also provide a user locale and vice versa. These properties are only applied when cell format is set to string. To correctly format date and time fields, make sure the coloumn type is set to Date or Date Time in Airtable.
+:::
 
-- **Page size:** The number of records returned in each request. Default is 100 records.  
+<img className="screenshot-full" src="/img/datasource-reference/airtable/list-records-v3.png" alt="Airtable List Records Query" />
 
-- **Offset:** The offset value is used to fetch the next set of records. The offset value is returned in the response of the previous request.
 
-Example response from Airtable:
+<details>
+<summary>**Example Values**</summary>
 
 ```json
-{
-  "records": [
-    {
-      "id": "recu9xMnUdr2n2cw8",
-      "fields": {
-        "Notes": "sdfdsf",
-        "Name": "dsfdsf"
-      },
-      "createdTime": "2021-05-12T14:30:33.000Z"
-    },
-    {
-      "id": "recyIdR7bVdQvmKXa",
-      "fields": {
-        "Notes": "sdfdsf",
-        "Name": "dfds"
-      },
-      "createdTime": "2021-05-12T14:30:33.000Z"
-    },
-    {
-      "id": "recAOzdIHaRpvRaGE",
-      "fields": {
-        "Notes": "sdfsdfsd",
-        "Name": "sdfdsf"
-      },
-      "createdTime": "2021-05-12T14:30:33.000Z"
-    }
-  ],
-  "offset": "recAOzdIHaRpvRaGE"
-}
+Base ID: appO4WnRU3eTWnrDB
+Table name: tblAPbj6KMjS8pxhH // Can be Table name or Table ID
+Page size: 100
+Offset: itrU18e2y6ITuMs1n/recjR8UdOZKjZ7aK3
+Fields: ["Date", "Email", "Usage (# Weeks)"]
+Filter by formula: IF({Usage (# Weeks)} < 10, 1, 0) // Only records with Usage (# Weeks) less than 10
+Timezone: America/Chicago
+User locale: en-gb
+Cell format: string // Cell format needs to be string for Timezone and User locale to work
+View: All Responses
+Sort: createdTime // Select direction: Ascending or Descending
 ```
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Retrieve record
-
-#### Required parameters:
-
-- **Base ID**: To find the Base ID, first visit **[Airtable API](https://airtable.com/api)**. Then select the base you want to connect to. The Base ID will be mentioned in the API documentation. Example Base ID: `appDT3UCPffPiSmFd`
-
-- **Table name**: The name of the table from which you want to fetch the records.
-
-- **Record ID**: The ID of the record you want to retrieve.
+</details>
 
 
-Example response from Airtable:
+<details>
+  <summary>**Response Example**</summary>
+  
+  ```json
+  {
+    "records": [
+      {
+        "id": "recToGRP6bWUG6djd",
+        "createdTime": "2016-11-21T20:21:40.000Z",
+        "fields": {
+          "Usage (# Weeks)": "3",
+          "Email": "Edith Lindon",
+          "Date": "11-21-2016"
+        }
+      },
+      {
+        "id": "recnUVJ8wwZbdECLk",
+        "createdTime": "2016-11-21T20:21:40.000Z",
+        "fields": {
+          "Usage (# Weeks)": "3",
+          "Email": "Marcellus Wong",
+          "Date": "11-21-2016"
+        }
+      },
+      {
+        "id": "recStKhQYw4Fn2qpj",
+        "createdTime": "2016-11-21T20:21:40.000Z",
+        "fields": {
+          "Usage (# Weeks)": "2",
+          "Email": "Lorraine Ljuba",
+          "Date": "11-21-2016"
+        }
+      }
+    ]
+  }
+  ```
+</details>
 
-```json
-{
-  "id": "recu9xMnUdr2n2cw8",
-  "fields": {
-    "Notes": "sdfdsf",
-    "Name": "dsfdsf"
-  },
-  "createdTime": "2021-05-12T14:30:33.000Z"
-}
-```
+### Retrieve Record
 
-</div>
+This operation fetches a specific record from the specified table.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+#### Required Parameters
 
-### Create record
+- **Base ID**
+- **Table name**
+- **Record ID**
 
-#### Required parameters:
+<img className="screenshot-full" src="/img/datasource-reference/airtable/retrieve-record-v2.png" alt="Airtable Retrieve Record Query" />
 
-- **Base ID**: To find the Base ID, first visit **[Airtable API](https://airtable.com/api)**. Then select the base you want to connect to. The Base ID will be mentioned in the API documentation. Example Base ID: `appDT3UCPffPiSmFd`
+<details>
+  <summary>**Response Example**</summary>
+  ```json
+  {
+    "id": "recu9xMnUdr2n2cw8",
+    "fields": {
+      "Notes": "Discuss project timeline",
+      "Name": "Michael Scott"
+    },
+    "createdTime": "2021-05-12T14:30:33.000Z"
+  }
+  ```
+</details>
 
-- **Table name**: The name of the table from which you want to fetch the records.
+### Create Record
 
-- **Records**: The records you want to create. The records should be in the form of an array of objects. Each object should have a `fields` key, which contains the fields of the record. The field names should be the same as the field names in the Airtable table.
+This operation creates a new record in the specified table.
 
-Example creating two records:
+#### Required Parameters
+
+- **Base ID**
+- **Table name**
+- **Records**
+
+<img className="screenshot-full" src="/img/datasource-reference/airtable/create-record-v2.png" alt="Airtable Create Record Query" />
+
+#### Example
 
 ```json title="Records"
-[
-  {
+[{
     "fields": {
-      "Notes": "sdfdsf",
-      "Name": "dsfdsf"
+      "Name": "Katrina Petersons",
+      "Email": "katrina.petersions@example.com"
     }
-  },
+}]
+```
+<details>
+  <summary>**Response Example**</summary>
+  ```json
   {
-    "fields": {
-      "Notes": "note1",
-      "Name": "dsfdsf"
-    }
+    "records": [
+      {
+        "id": "recu6jhA7tzv4K66s",
+        "createdTime": "2024-06-11T06:01:44.000Z",
+        "fields": {
+          "Name": "Katrina Petersons",
+          "Email": "katrina.petersions@example.com",
+          "Date": "06-11-2024",
+        }
+      }
+    ]
   }
-]
-```
-
-Query returns the following response when the records are created successfully:
-
-```json
-{
-  "records": [
-    {
-      "id": "rec5RuZ1COoZGtGDY",
-      "fields": {
-        "Notes": "sdfdsf",
-        "Name": "dsfdsf"
-      },
-      "createdTime": "2022-02-07T20:25:27.000Z"
-    },
-    {
-      "id": "recaYbFPonNNu6Cwj",
-      "fields": {
-        "Notes": "note1",
-        "Name": "dsfdsf"
-      },
-      "createdTime": "2022-02-07T20:25:27.000Z"
-    }
-  ]
-}
-```
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+  ```
+</details>
 
 ### Update record
 
+Update a specific record by providing new data.
+
 #### Required parameters:
 
-- **Base ID**: To find the Base ID, first visit **[Airtable API](https://airtable.com/api)**. Then select the base you want to connect to. The Base ID will be mentioned in the API documentation. Example Base ID: `appDT3UCPffPiSmFd`
+- **Base ID**
+- **Table name**
+- **Record ID**
+- **Body**
 
-- **Table name**: The name of the table from which you want to fetch the records.
+<img className="screenshot-full" src="/img/datasource-reference/airtable/update-record-v2.png" alt="Airtable Update Record Query" />
 
-- **Record ID**: The ID of the record you want to update.
-
-- **Body**: The fields you want to update. The fields should be in the form of an object. The field names should be the same as the field names in the Airtable table.
-
-Example updating a record:
-
-```json title="Body"
-{
-  "Notes": "Example Notes",
-  "Name": "change"
-}
-```
-
-Query returns the following response when the record is updated successfully:
+#### Example
 
 ```json
 {
-  "id": "recu9xMnUdr2n2cw8",
-  "fields": {
-    "Notes": "Example Notes",
-    "Name": "change"
-  },
-  "createdTime": "2021-08-08T17:27:17.000Z"
+  "Email": "katrina.petersions2@example.com"
 }
 ```
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<details>
+  <summary>**Response Example**</summary>
+  ```json
+  {
+    "records": [
+      {
+        "id": "recu6jhA7tzv4K66s",
+        "createdTime": "2024-06-11T07:01:44.000Z",
+        "fields": {
+          "Name": "Katrina Petersons",
+          "Email": "katrina.petersions2@example.com",
+          "Date": "06-11-2024",
+        }
+      }
+    ]
+  }
+  ```
+</details>
 
 ### Delete record
 
+This operation removes a record from the specified table.
+
 #### Required parameters:
 
 - **Base ID**
 - **Table name**
 - **Record ID**
 
-Query returns the following response when the record is deleted successfully:
+<img className="screenshot-full" src="/img/datasource-reference/airtable/delete-record-v2.png" alt="Airtable Delete Record Query" />
 
-```json
-{
-    deleted: true
-    id: "recIKsyZgqI4zoqS7"
-}
-```
-</div>
+<details>
+  <summary>**Response Example**</summary>
+  ```json
+  {
+      deleted: true
+      id: "recIKsyZgqI4zoqS7"
+  }
+  ```
+</details>

docs/docs/data-sources/amazonses.md

@@ -3,52 +3,62 @@ id: amazonses
 title: Amazon SES
 ---
 
-<div style={{paddingBottom:'24px'}}>
-
 ToolJet can connect to your Amazon SES account to send emails.
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
-To add a new **Amazon SES** API data source, click the **Data sources** icon on the left-sidebar of the app builder and click on the **+Add** button, then select Amazon SES from the modal that pops up.
+
+To establish a connection with the **Amazon SES** data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 ToolJet requires the following to connect to Amazon SES:
 
 - **Region**
+- **Authentication**
 - **Access key**
 - **Secret key**
 
-It is recommended to create a new IAM user for the database so that you can control the access levels of ToolJet.
-
-Click on the **Save** button to save the data source.
+**Note:** It is recommended to create a new IAM user for the database so that you can control the access levels of ToolJet.
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/amazonses/connection.png" alt="Amazon SES" />
+<img className="screenshot-full" src="/img/datasource-reference/amazonses/connection-v2.png" alt="Amazon SES" />
 
 </div>
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Supported operations
-1.  Email service
+## Querying Amazon SES
+
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Amazon SES** datasource added in previous step.
+3. Select **Email service** as operation from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
+
+<img className="screenshot-full" src="/img/datasource-reference/amazonses/operations.png" alt="Amazon SES" />
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Supported Operation
 
 ### Email service
-Required parameters:
-- Send email to
-- Send email from
-- Subject
-- Body as text
+
+#### Required parameters:
+- **Send email to**
+- **Send email from**
+- **Subject**
+- **Body**
 
 
-Optional parameters:
-- Body as HTML
-- CC Addresses
-- BCC Addresses
+#### Optional parameters:
+- **CC Addresses**
+- **BCC Addresses**
+
+<img className="screenshot-full" src="/img/datasource-reference/amazonses/email-service.png" alt="Amazon SES" />
 
 
 :::info

docs/docs/data-sources/appwrite.md

@@ -3,17 +3,15 @@ id: appwrite
 title: Appwrite 
 ---
 
-<div style={{paddingBottom:'24px'}}>
-
 ToolJet can connect to appwrite database to read/write data.
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection 
 
-ToolJet connects to your Appwrite app using :
+To establish a connection with the Appwrite data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](https://docs.tooljet.com/docs/data-sources/overview)** page from the ToolJet dashboard.
+
+ToolJet requires the following to connect to your Appwrite:
 - **Host (API endpoint)**
 - **Project ID**
 - **Secret Key**
@@ -24,174 +22,126 @@ You'll find the Secret Key and other credentials on your Appwrite's project sett
 You should also set the scope for access to a particular resource. Learn more about the **API keys and scopes** [here](https://appwrite.io/docs/keys).
 :::
 
-To establish a connection with the Appwrite data source, you can either click on the **+Add new Data source** button located on the query panel or navigate to the **[Data Sources](https://docs.tooljet.com/docs/data-sources/overview)** page from the ToolJet dashboard.
-
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/appwrite/connect-v3.png" alt="Appwrite intro"/>
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/appwrite/connect-v3.png" alt="Appwrite intro"/>
 
 </div>
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Querying Appwrite 
 
-- After setting up the Appwrite data source, navigate to the query panel and  select the Appwrite data source that you added in the previous step.
-
-- After selecting Appwrite data source, select the operations that you want to perform on the Appwrite database and click **Save** to save the query.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Appwrite** datasource added in previous step.
+3. Select the operation you want to perform.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/appwrite/querying-v3.png" alt="Appwrite intro"/>
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/appwrite/querying-v3.png" alt="Appwrite intro"/>
 
 </div> 
 
 :::tip
-Query results can be transformed using Transformations. Read our **Transformation documentation** [here](/docs/tutorial/transformations)
+Query results can be transformed using Transformations. Read our **Transformation Documentation** [here](/docs/tutorial/transformations).
 :::
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Supported operations
+## Supported Operations
 
 -  **[List Documents](#list-documents)**
 -  **[Get Document](#get-document)**
 -  **[Add Document to Collection](#add-document-to-collection)**
 -  **[Update Document](#update-document)** 
--  **[Bulk update using document id](#bulk-update-using-document-id)**
 -  **[Delete Document](#delete-document)**
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### List Documents
 
 This operation is used to get a list of all the user documents.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Collection ID:** You can create a new collection using the Database service **[server integration](https://appwrite.io/docs/server/database#createCollection)** or appwrite console. The value for collection ID field should be of `String` type. 
+- **Collection ID**
 
-#### Optional parameters: 
+#### Optional Parameters
 
-- **Limit:** Maximum number of documents to return in the response. By default, it will return a maximum of 25 results. A maximum of 100 results is allowed per request. The Limit value should be of `integer` type.
-- **Order fields:** Array of attributes used to sort results. The order field value should be an `array`.
-- **Order types:** Array of order directions for sorting attributes. Possible values are DESC for descending order or ASC for ascending order. The order field value should be an `array`.
-- **Field, Operator, and Value:** For filtering the results, you can enter a field(attribute) name, use the appropriate operator from the dropdown, and set a value.
+- **Limit**
+- **Order fields**
+- **Order types**
+- **Field**
+- **Operator**
+- **Value**
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/appwrite/list-v3.png" alt="Appwrite List" />
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/appwrite/list-v3.png" alt="Appwrite List" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Get Document
 
 Use this operation to get a document from a collection by its unique ID. 
 
-#### Required parameters:
+#### Required Parameters
 
-- **Collection ID:** You can create a new collection using the Database service **[server integration](https://appwrite.io/docs/server/database#createCollection)** or appwrite console. The value for collection ID should be of `String` type. 
-
-- **Document ID:** Enter the document ID of the document that you want to get. The document ID should be of `String` type. 
+- **Collection ID**
+- **Document ID**
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/appwrite/get-v3.png" alt="Appwrite get" />
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/appwrite/get-v3.png" alt="Appwrite get" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Add Document to Collection
 
 Use this operation to create a new document in a collection.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Collection ID:** You can create a new collection using the Database service **[server integration](https://appwrite.io/docs/server/database#createCollection)** or appwrite console. The collection ID should be of `String` type. 
-
-- **Body:** Enter the document data as a JSON object.
+- **Collection ID**
+- **Body**
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/appwrite/add-v3.png" alt="Appwrite add" />
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/appwrite/add-v3.png" alt="Appwrite add" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Update Document
 
 Use this operation to update a document.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Collection ID:** You can create a new collection using the Database service **[server integration](https://appwrite.io/docs/server/database#createCollection)** or appwrite console. The value for collection ID should be of `String` type. 
-
-- **Document ID:** Enter the document ID of the document that you want to get. The document ID should be of `String` type. 
-
-- **Body:** Enter the document data as a JSON object.
+- **Collection ID**
+- **Document ID**
+- **Body**
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/appwrite/upd-v3.png" alt="Appwrite update" />
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/appwrite/upd-v3.png" alt="Appwrite update" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Bulk update using document id
-
-Use this operation for bulk updating a document in a collection.
-
-#### Required parameters:
-
-- **Collection ID:** You can create a new collection using the Database service **[server integration](https://appwrite.io/docs/server/database#createCollection)** or appwrite console. The value for collection ID should be of `String` type. 
-
-- **Key for document Id:**  Enter the key or attribute name that can be used to identify each record.
-
-- **Records:** The array of objects that will contain the data for updating each record in the database
-and these objects must contain a key-value pair to point unique record in the database (key for document)
-
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/appwrite/bulk-v3.png" alt="Appwrite bulk update" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Delete Document
 
 Use this operation for deleting a document in the collection.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Collection ID:** You can create a new collection using the Database service **[server integration](https://appwrite.io/docs/server/database#createCollection)** or appwrite console. The value for collection ID should be of `String` type. 
-
-- **Document ID:** Enter the document ID of the document that you want to get. The document ID should be of `String` type. 
+- **Collection ID** 
+- **Document ID**
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/appwrite/del-v3.png" alt="Appwrite delete"/>
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/appwrite/del-v3.png" alt="Appwrite delete"/>
 
 </div>
 

docs/docs/data-sources/athena.md

@@ -3,21 +3,13 @@ id: athena
 title: Athena
 ---
 
-<div style={{paddingBottom:'24px'}}>
-
 ToolJet can connect to **Amazon Athena** which is an interactive query service that makes it easy to analyze data in Amazon S3 using standard SQL.
 
-- **[Connection](#connection)**
-- **[Querying-athena](#querying-amazon-athena)**
-- **[Basic Operation](#basic-queries)**
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To establish a connection with the **Amazon Athena** data source, you can either click on the **+Add new Data source** button located on the query panel or navigate to the **[Data Sources](https://docs.tooljet.com/docs/data-sources/overview)** page from the ToolJet dashboard and choose **Amazon Athena** as the data source.
+To establish a connection with the **Amazon Athena** data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](https://docs.tooljet.com/docs/data-sources/overview)** page from the ToolJet dashboard and choose **Amazon Athena** as the data source.
 
 ToolJet requires the following to connect to your Athena.
 
@@ -27,27 +19,26 @@ ToolJet requires the following to connect to your Athena.
 - **Secret key**
 - **Region**
 
-Click on the **Test Connection** button to verify the correctness of the provided credentials and the accessibility of the database to the ToolJet server. Finally, click on the **Save** button to save the data source configuration.
-
 :::info
 You can also configure for **[additional optional parameters](https://github.com/ghdna/athena-express)**.
 :::
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/athena/athena-connection-v2.png" alt="Athena connection" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/athena/athena-connection-v2.png" alt="Athena connection" />
 
 </div>
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Querying Amazon Athena
 
-- Click on the **+Add** button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. Query manager then can be used to write SQL queries.
-
-- Click on the **Run** button to run the query. 
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Amazon Athena** datasource added in previous step.
+3. Select the SQL Query from the dropdown and enter the query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 :::tip
 **Refer amazon athena docs here for more info:** [link](https://docs.aws.amazon.com/athena/latest/ug/what-is.html)
@@ -55,18 +46,19 @@ You can also configure for **[additional optional parameters](https://github.com
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/athena/querying-amazon-athena.png" alt="Athena connection" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/athena/querying-amazon-athena.png" alt="Athena connection" />
 
 </div>
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-### Basic Queries
+## Basic Queries
 
-#### Creating Table 
+### Creating Table 
 
+This query is used to create an external table within the database. The data for this table is stored in an S3 bucket at the provided URL (`s3://athena-express-akiatfa53s-2022/` in this example).
 
 ```sql
 CREATE EXTERNAL TABLE student (
@@ -75,31 +67,37 @@ CREATE EXTERNAL TABLE student (
 )  LOCATION 's3://athena-express-akiatfa53s-2022/';
 ```
 
-This query is used to create an external table within the database. The data for this table is stored in an S3 bucket at the provided URI, (`s3://athena-express-akiatfa53s-2022/` in this example).
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/athena/createTable.png" alt="Athena connection" />
 
-#### Inserting to Table
+### Inserting to Table
+
+This query is attempting to insert a new record into the *student* table in a database. 
 
 ```sql
 INSERT INTO student
 VALUES ('Lansing',1)
 ```
 
-This query is attempting to insert a new record into the `student` table in a database. 
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/athena/insertTable.png" alt="Athena connection" />
 
-#### Select Operation
+### Select Operation
+
+This query retrieves all records from the *student* table where the age of the student is exactly 1 year.
 
 ```sql
 SELECT * from student WHERE AGE=1
 ```
 
-This query retrieves all records from the student table where the age of the student is exactly 1 year.
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/athena/selectOperation.png" alt="Athena connection" />
 
-#### List Tables
+### List Tables
+
+This query is used to display a list of all tables in the current database.
 
 ```sql
 SHOW TABLES
 ```
 
-This query is used to display a list of all tables in the current database.
+<img style={{ border:'0', marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/athena/listTables.png" alt="Athena connection" />
 
 </div>

docs/docs/data-sources/azureblob.md

@@ -7,9 +7,10 @@ ToolJet offers the capability to establish a connection with Azure Blob storage
 
 ## Connection
 
-To connect ToolJet with the Azure Blob data source, you have two options:
-1. Click on the `+Add new data source` button in the query panel.
-2. Go to the **[Data Sources](/docs/data-sources/overview)** page on the ToolJet dashboard.
+To establish a connection with the Azure Blob data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose Azure Blob as the data source.
+
+ToolJet requires the following to connect to your Azure Blob.
+- **Connection String**
 
 <div style={{textAlign: 'center'}}>
 
@@ -17,21 +18,14 @@ To connect ToolJet with the Azure Blob data source, you have two options:
 
 </div>
 
-To successfully establish the connection, ToolJet requires the following details:
-- **Connection String**: The connection string can be found on the dashboard of Azure Blob Storage.
-
-Once you have entered the connection string, click on the **Test connection** button to verify the connection's success. To save the data source, click on the **Save** button.
+<div style={{paddingTop:'24px'}}> 
 
 ## Querying Azure Blob
 
-Once you have connected to the Azure Blob data source, follow these steps to create queries and interact with Azure Blob storage from the ToolJet application:
-
-1. Open the ToolJet application and navigate to the query panel at the bottom of the app builder.
-2. Click the `+Add` button to open the list of available `local` and `data sources`.
-3. Select **Azure Blob** from the data source section.
-4. Select the desired **operation** from the dropdown and enter the required **parameters**.
-5. **Rename**(optional) and **Create** the query.
-6. Click **Preview** to view the data returned from the query or click **Run** to execute the query.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Azure Blob** datasource added in previous step.
+3. Select the desired **operation** from the dropdown and enter the required **parameters**.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 :::tip
 Query results can be transformed using Transformation. For more information on transformations, please refer to our documentation at **[link](/docs/tutorial/transformations)**.
@@ -39,31 +33,34 @@ Query results can be transformed using Transformation. For more information on t
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/azureblob/queries.png" alt="Azure Blob - ToolJet" />
+<img className="screenshot-full" src="/img/datasource-reference/azureblob/queries-v2.png" alt="Azure Blob - ToolJet" />
 
 </div>
 
+</div>
+
+<div style={{paddingTop:'24px'}}> 
+
 ## Supported Operations
 
-1. **[Create Container](#create-container)**
-2. **[List Containers](#list-containers)**
-3. **[List Blobs](#list-blobs)**
-4. **[Upload Blob](#upload-blob)**
-5. **[Read Blob](#read-blob)**
-6. **[Delete Blob](#delete-blob)**
+1. **[Create container](#create-container)**
+2. **[List containers](#list-containers)**
+3. **[List blobs](#list-blobs)**
+4. **[Upload blob](#upload-blob)**
+5. **[Read blob](#read-blob)**
+6. **[Delete blob](#delete-blob)**
 
 
 ### Create Container
 
 The create container operation enables the creation of new containers within Azure Blob storage. Containers serve as logical units for organizing and managing blob data. Users can provide a unique name for the container. Once created, the container is available for use in storing and organizing blob data. If the container with the same name already exists, the operation fails.
 
-#### Required Parameters:
-
-- **Container Name:** Name of the container that you want to create. 
+#### Required Parameters
+- **Container Name** 
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/azureblob/createcontainer.png" alt="Azure blob: create container operation" />
+<img className="screenshot-full" src="/img/datasource-reference/azureblob/createcontainer-v2.png" alt="Azure blob: create container operation" style={{marginBottom:'15px'}}/>
 
 </div>
 
@@ -73,7 +70,7 @@ The list container operation allows you to retrieve a list of containers within
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/azureblob/listcon.png" alt="Azure blob: list container operation" />
+<img className="screenshot-full" src="/img/datasource-reference/azureblob/listcon-v2.png" alt="Azure blob: list container operation" style={{marginBottom:'15px'}}/>
 
 </div>
 
@@ -81,19 +78,19 @@ The list container operation allows you to retrieve a list of containers within
 
 The list blobs operation enables you to retrieve a list of blobs within a specific container in Azure Blob storage. 
 
-#### Required Parameter:
+#### Required Parameter
 
-- **Container:** Specify the name of the container from which you wish to retrieve a list of blobs.
-- **Page Size:** Specify the maximum number of blobs to be returned per page or request.
+- **Container**
+- **Page Size**
 
-#### Optional Parameters: 
+#### Optional Parameters
 
-- **Prefix:** Filter the list of blobs based on a specific prefix or prefix pattern, allowing you to narrow down the results to blobs with names that start with the specified prefix.
-- **Continuation Token:** A marker or token used to retrieve the next page of results when there are more blobs available beyond the initial page.
+- **Prefix**
+- **Continuation Token**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/azureblob/listblobs.png" alt="Azure blob: list blobs operation" />
+<img className="screenshot-full" src="/img/datasource-reference/azureblob/listblobs-v2.png" alt="Azure blob: list blobs operation" style={{marginBottom:'15px'}}/>
 
 </div>
 
@@ -101,26 +98,28 @@ The list blobs operation enables you to retrieve a list of blobs within a specif
 
 The upload blob operation allows you to upload a new blob or update an existing blob in Azure Blob storage. It provides a convenient way to store data such as files, images, or documents in the specified container.
 
-#### Required Parameters:
+#### Required Parameters
 
-- **Container**: Specify the name of the container where the blob will be uploaded or updated.
-- **Blob Name**: Provide a unique name for the blob. This name is used to identify and access the blob within the specified container.
-- **Content Type**: Set the content type of the blob, which indicates the type of data being stored. It helps clients interpret the blob content correctly when accessing it. example: **image/jpeg** for JPEG images or **image/png** for PNG image. You can also get the content type from the exposed variable of the file picker component.
-- **Upload Data**: Select or provide the data to be uploaded as the content of the blob. This can be a file from your local system, binary data, or text content. You can also get the data from the exposed variable of the file picker component.
-- **Encoding**: Choose the encoding format for the uploaded data if applicable. This parameter determines how the data is encoded before being stored as the blob content. If the value is left blank then it takes **UTF-8** by default.
+- **Container**
+- **Blob Name**
+- **Content Type**
+- **Upload Data**
+- **Encoding**
+
+<img className="screenshot-full" src="/img/datasource-reference/azureblob/uploadBlob.png" alt="Azure blob: upload blobs operation" style={{marginBottom:'15px'}}/>
 
 ### Read Blob
 
 The read blob operation allows you to retrieve the content of a specific blob stored in Azure Blob storage. It enables you to access and retrieve the data stored within the blob for further processing or display.
 
-#### Required Parameters:
+#### Required Parameters
 
-- **Container**: Specify the name of the container where the blob is located.
-- **Blob Name**: Provide the unique name of the blob you want to read. This identifies the specific blob within the specified container
+- **Container**
+- **Blob Name**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/azureblob/read.png" alt="Azure blob: read blob operation" />
+<img className="screenshot-full" src="/img/datasource-reference/azureblob/read-v2.png" alt="Azure blob: read blob operation" style={{marginBottom:'15px'}} />
 
 </div>
 
@@ -128,13 +127,15 @@ The read blob operation allows you to retrieve the content of a specific blob st
 
 The delete blob operation allows you to remove a specific blob from Azure Blob storage. This operation permanently deletes the blob and its associated data, freeing up storage space and removing the blob from the container.
 
-#### Required Parameters:
+#### Required Parameters
 
-- **Container**: Specify the name of the container from which you want to delete the blob.
-- **Blob Name**: Provide the unique name of the blob you want to delete. This identifies the specific blob within the specified container.
+- **Container**
+- **Blob Name**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/azureblob/delete.png" alt="Azure blob: delete blob operation" />
+<img className="screenshot-full" src="/img/datasource-reference/azureblob/delete-v2.png" alt="Azure blob: delete blob operation" />
 
 </div>
+
+</div>

docs/docs/data-sources/azureblobstorage.md

@@ -1,11 +0,0 @@
-
-# azureblobstorage
-
-ToolJet can connect to Azure Blob Storage databases to read and write data. 
-
-- [Connection](#connection)
-- [Getting Started](#querying-azureblobstorage)
-
-## Connection
-
-## Querying Azure Blob Storage

docs/docs/data-sources/baserow.md

@@ -3,31 +3,42 @@ id: baserow
 title: Baserow
 ---
 
-<div style={{paddingBottom:'24px'}}>
-
 ToolJet can connect to your Baserow account to read and write data.
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To connect to Baserow, you need to provide the following details:
+To establish a connection with the **Baserow** data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
-- **API token**: You can create an API token from your Baserow dashboard. You can follow the steps to create API token from **[this link](https://baserow.io/user-docs/personal-api-tokens)**.
-- **Host**: You can either select the Baserow Cloud or Self-hosted option.
-- **Base URL**: If you select the self-hosted option, you need to provide the base URL of your Baserow instance.
+ToolJet requires the following to connect to Baserow:
+
+- **API token**
+- **Host**
+- **Base URL**
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-intro-v2.png" alt="Baserow intro" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-intro-v2.png" alt="Baserow intro" />
 
 </div>
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+
+## Querying Baserow
+
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Baserow** datasource added in previous step.
+3. Select the desired operation from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
+
+<img className="screenshot-full" src="/img/datasource-reference/baserow/operations.png" alt="Amazon SES" />
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
 
 ## Supported Operations
 
@@ -39,173 +50,143 @@ To connect to Baserow, you need to provide the following details:
 - **[Move row](#move-row)**
 - **[Delete row](#delete-row)**
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### List fields
+### List Fields
 
 This query lists all the fields in a table.
 
-#### Required parameters:
+#### Required Parameter
 
 - **Table ID**
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-list-fields-v2.png" alt="Baserow list fields" />
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-list-fields-v2.png" alt="Baserow list fields" />
+<details>
+  <summary>**Response Example**</summary>
 
-</div>
+  ```yaml
+  [
+    {
+      "id": 331156,
+      "table_id": 57209,
+      "name": "Name",
+      "order": 0,
+      "type": "text",
+      "primary": true,
+      "text_default": ""
+    },
+    {
+      "id": 331157,
+      "table_id": 57209,
+      "name": "Last name",
+      "order": 1,
+      "type": "text",
+      "primary": false,
+      "text_default": ""
+    },
+    {
+      "id": 331158,
+      "table_id": 57209,
+      "name": "Notes",
+      "order": 2,
+      "type": "long_text",
+      "primary": false
+    },
+    {
+      "id": 331159,
+      "table_id": 57209,
+      "name": "Active",
+      "order": 3,
+      "type": "boolean",
+      "primary": false
+    }
+  ]
+  ```
 
+</details>
 
-Example response from Baserow:
-
-```json
-[
-  {
-    "id": 331156,
-    "table_id": 57209,
-    "name": "Name",
-    "order": 0,
-    "type": "text",
-    "primary": true,
-    "text_default": ""
-  },
-  {
-    "id": 331157,
-    "table_id": 57209,
-    "name": "Last name",
-    "order": 1,
-    "type": "text",
-    "primary": false,
-    "text_default": ""
-  },
-  {
-    "id": 331158,
-    "table_id": 57209,
-    "name": "Notes",
-    "order": 2,
-    "type": "long_text",
-    "primary": false
-  },
-  {
-    "id": 331159,
-    "table_id": 57209,
-    "name": "Active",
-    "order": 3,
-    "type": "boolean",
-    "primary": false
-  }
-]
-```
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### List rows
+### List Rows
 
 This query lists all the rows in a table.
 
-#### Required parameters:
+#### Required Parameter
 
 - **Table ID**
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-list-rows-v2.png" alt="Baserow list"/>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-list-rows-v2.png" alt="Baserow list"/>
+<details>
+  <summary>**Response Example**</summary>
+  
+  ```json
+  {
+    "count": 3,
+    "next": null,
+    "previous": null,
+    "results": [
+      {
+        "id": 2,
+        "order": "0.99999999999999999991",
+        "Name": "Bill",
+        "Last name": "Gates",
+        "Notes": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim, urna eget rutrum sollicitudin, sapien diam interdum nisi, quis malesuada nibh eros a est.",
+        "Active": false
+      },
+      {
+        "id": 3,
+        "order": "0.99999999999999999992",
+        "Name": "Mark",
+        "Last name": "Zuckerberg",
+        "Notes": null,
+        "Active": true
+      },
+      {
+        "id": 1,
+        "order": "0.99999999999999999997",
+        "Name": "Elon",
+        "Last name": "Musk",
+        "Notes": null,
+        "Active": true
+      }
+    ]
+  }
+  ```
 
-</div>
+</details>
 
+### Get Row
 
-Example response from Baserow:
-
-```json
-{
-  "count": 3,
-  "next": null,
-  "previous": null,
-  "results": [
-    {
-      "id": 2,
-      "order": "0.99999999999999999991",
-      "Name": "Bill",
-      "Last name": "Gates",
-      "Notes": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim, urna eget rutrum sollicitudin, sapien diam interdum nisi, quis malesuada nibh eros a est.",
-      "Active": false
-    },
-    {
-      "id": 3,
-      "order": "0.99999999999999999992",
-      "Name": "Mark",
-      "Last name": "Zuckerburg",
-      "Notes": null,
-      "Active": true
-    },
-    {
-      "id": 1,
-      "order": "0.99999999999999999997",
-      "Name": "Elon",
-      "Last name": "Musk",
-      "Notes": null,
-      "Active": true
-    }
-  ]
-}
-```
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Get row
-
-#### Required parameters:
+#### Required Parameters
 
 - **Table ID**
 - **Row ID**
 
+<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-get-row-v2.png" alt="Baserow get" />
 
-<div style={{textAlign: 'center'}}>
+<details>
+  <summary>**Response Example**</summary>
+  
+  ```json
+  {
+    "id": 1,
+    "order": "0.99999999999999999997",
+    "Name": "Elon",
+    "Last name": "Musk",
+    "Notes": null,
+    "Active": true
+  }
+  ```
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-get-row-v2.png" alt="Baserow get" />
+</details>
 
-</div>
-
-
-Example response from Baserow:
-
-```json
-{
-  "id": 1,
-  "order": "0.99999999999999999997",
-  "Name": "Elon",
-  "Last name": "Musk",
-  "Notes": null,
-  "Active": true
-}
-```
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Create row
-
-#### Required parameters:
+### Create Row
 
+#### Required Parameters
 - **Table ID**
 - **Records**
 
+<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-create-row-v2.png"  alt="Bserow create"/>
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-create-row-v2.png"  alt="Bserow create"/>
-
-</div>
-
-
-#### Example Records:
+#### Example
 
 ```json
 {
@@ -216,38 +197,33 @@ Example response from Baserow:
 }
 ```
 
-Example response from Baserow:
+<details>
+  <summary>**Response Example**</summary>
+  
+  ```json
+  {
+    "id": 19,
+    "order": "0.99999999999999999996",
+    "Name": "Test",
+    "Last name": "Test Name",
+    "Notes": "Test Note",
+    "Active": true
+  }
+  ```
 
-```json
-{
-  "id": 19,
-  "order": "0.99999999999999999996",
-  "Name": "Test",
-  "Last name": "Test Name",
-  "Notes": "Test Note",
-  "Active": true
-}
-```
+</details>
 
-</div>
+### Update Row
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Update row
-
-#### Required parameters:
+#### Required Parameters
 
 - **Table ID**
 - **Row ID**
 - **Records**
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-update-row-v2.png" alt="Baserow update" />
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-update-row-v2.png" alt="Baserow update" />
-
-</div>
-
-#### Example Records:
+#### Example
 
 ```json
 {
@@ -258,72 +234,59 @@ Example response from Baserow:
 }
 ```
 
-Example response from Baserow:
+<details>
+  <summary>**Response Example**</summary>
+  
+  ```json
+  {
+    "id": 19,
+    "order": "0.99999999999999999996",
+    "Name": "Test",
+    "Last name": "Test Name",
+    "Notes": "Test Note",
+    "Active": true
+  }
+  ```
 
-```json
-{
-  "id": 19,
-  "order": "0.99999999999999999996",
-  "Name": "Test",
-  "Last name": "Test Name",
-  "Notes": "Test Note",
-  "Active": true
-}
-```
+</details>
 
-</div>
+### Move Row
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Move row
-
-#### Required parameters:
+#### Required Parameters
 
 - **Table ID**
 - **Row ID**
 
-#### Optional parameters:
+#### Optional Parameters
 
 - **Before ID** (The row will be moved before the entered ID. If not provided, then the row will be moved to the end )
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-move-row-v2.png" alt="Baserow move row" />
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-move-row-v2.png" alt="Baserow move row" />
+<details>
+  <summary>**Response Example**</summary>
+    
+  ```json
+  {
+    "id": 3,
+    "order": "2.00000000000000000000",
+    "Name": "Mark",
+    "Last name": "Zuckerburg",
+    "Notes": null,
+    "Active": true
+  }
+  ```
 
-</div>
+</details>
 
+### Delete Row
 
-Example response from Baserow:
-
-```json
-{
-  "id": 3,
-  "order": "2.00000000000000000000",
-  "Name": "Mark",
-  "Last name": "Zuckerburg",
-  "Notes": null,
-  "Active": true
-}
-```
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Delete row
-
-#### Required parameters:
-
+#### Required Parameters
 - **Table ID**
 - **Row ID**
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/baserow/baserow-delete-row-v2.png" alt="Baserow delete" />
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/baserow/baserow-delete-row-v2.png" alt="Baserow delete" />
-
-</div>
-
-
-While deleting a row, the response will be either success or failure from Baserow
+While deleting a row, the response will be either success or failure from Baserow.
 
 </div>

docs/docs/data-sources/bigquery.md

@@ -3,33 +3,28 @@ id: bigquery
 title: BigQuery
 ---
 
-<div style={{paddingBottom:'24px'}}>
-
 ToolJet can connect to **BigQuery** databases to run BigQuery queries.
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-- To establish a connection with the BigQuery data source, you need to enable BigQuery API in your Google Cloud Console. You can follow the steps to enable BigQuery API from **[Google Cloud](https://cloud.google.com/bigquery/docs/bigquery-web-ui)**. 
+To establish a connection with the **BigQuery** data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose BigQuery as the data source.
 
-- Next, you need to create a service account and generate a key for the same. You can follow the steps to create a service account from **[Google Cloud](https://cloud.google.com/iam/docs/creating-managing-service-accounts)**.
+ToolJet requires the following to connect to your BigQuery:
+- **Private key**
 
-- Once you have created the service account after following the steps mentioned in the Google Cloud guide, create a new **Key** and download it in a JSON file.
+How to get a Private key?
+1. You need to enable BigQuery API in your Google Cloud Console. You can follow the steps to enable BigQuery API from **[Google Cloud](https://cloud.google.com/bigquery/docs/bigquery-web-ui)**. 
+2. You need to create a service account and generate a key for the same. You can follow the steps to create a service account from **[Google Cloud](https://cloud.google.com/iam/docs/creating-managing-service-accounts)**.
+3. Once you have created the service account after following the steps mentioned in the Google Cloud guide, create a new **Key** and download it in a JSON file.
+4. Now, copy and paste the data from the downloaded JSON file into the **Private key** field in the BigQuery data source form.
 
-- Now, copy and paste the data from the downloaded JSON file into the **Private key** field in the BigQuery data source form.
-
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/bq-create-v2.png" alt="BQ create" />
-
-</div>
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-create-v2.png" alt="BQ create" />
 
 **The JSON file should look like this:**
 
- ```json
+```json
 {
   "type": "service_account",
   "project_id": "long-sonar-324407",
@@ -45,15 +40,16 @@ ToolJet can connect to **BigQuery** databases to run BigQuery queries.
 }
 ```
 
-Click on the **Test Connection** button to verify if the credentials are correct and that the API is accessible to ToolJet server. Click on **Save** button to save the data source.
-
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Querying BigQuery
 
-Click on the **+Add** button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. Select the operation that you want to perform from the **Operation** dropdown and click on the **Run** button to run the query.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **BigQuery** datasource added in previous step.
+3. Select the desired operation from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 <div style={{textAlign: 'center'}}>
 
@@ -67,7 +63,7 @@ Query results can be transformed using transformations. Read our transformations
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Supported Operations
 
@@ -81,130 +77,76 @@ Query results can be transformed using transformations. Read our transformations
 -  **[Create Table](#create-table)**
 -  **[Delete Table](#create-table)**
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Query
 
-This operation returns the data based on the `Query`. 
+This operation returns the data based on the **Query**. 
 
 **Note**: Follow the reference given in **Google Cloud** about the operations: **[Query options](https://cloud.google.com/bigquery/docs/reference/rest/v2/Job)** and **[Query results options](https://cloud.google.com/nodejs/docs/reference/bigquery/latest/overview#_google_cloud_bigquery_QueryResultsOptions_type)**.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Query**: Choose the query.
-- **Query options:** The JSON object specifies additional options for the query.
-- **Query results options:** The `{ wrapIntegers: true }` option instructs how integers in the results should be handled, particularly relevant for languages or interfaces that may have issues with large integers.
+- **Query**
+- **Query options**
+- **Query results options**
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/query-v2.png" alt="BQ query"/>
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/query-v2.png" alt="BQ query" style={{marginBottom:'15px'}}/>
 
 ### List Datasets
 
 This operation returns the list of datasets.
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/list-datasets-v2.png" alt="BQ list datasets"/>
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/list-datasets-v2.png" alt="BQ list datasets" style={{marginBottom:'15px'}}/>
 
 ### List Tables
 
 This operation returns the list of tables within a dataset.
 
-#### Required parameters: 
+#### Required Parameter
 
-- **Dataset id:** The ID for the dataset from which to list the tables.
+- **Dataset ID**
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/listtables-v2.png"  alt="BQ list tables"/>
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/listtables-v2.png"  alt="BQ list tables" style={{marginBottom:'15px'}}/>
 
 ### Create Table
 
 This operation is used to create a table.
 
-#### Required parameters: 
+#### Required Parameters 
 
-- **Table id**: The ID of the table that will be created.
-- **Dataset id**: The ID for the dataset containing the table specified above.
-- **Options**: Specify additional options for the table creation.
+- **Table ID**
+- **Dataset ID**
+- **Options**
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/create-table.png"  alt="BQ create tables"/>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/create-table.png"  alt="BQ create tables"/>
-
-</div>
-
-:::info
-NOTE: visit -https://github.com/googleapis/nodejs-bigquery/blob/main/samples/createTable.js for more info on schema.
-:::
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+**NOTE:** Visit https://github.com/googleapis/nodejs-bigquery/blob/main/samples/createTable.js for more info on schema.
 
 ### Delete Table
 
 This operation is used to delete a table.
 
-#### Required parameters: 
+#### Required Parameters 
 
-- **Table id**: The ID of the table that will be deleted.
-- **Dataset id**: The ID for the dataset containing the table specified above.
+- **Table ID**
+- **Dataset ID**
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/delete-table.png"  alt="BQ delete tables"/>
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/delete-table.png"  alt="BQ delete tables" style={{marginBottom:'15px'}}/>
 
 ### Create View
 
 This operation is used to create a view.
 
-#### Required parameters: 
+#### Required Parameters 
 
-- **Table id**: The ID of the table from which the data will be selected to create the view.
-- **Dataset id**: This field requires the dataset ID where the view will be created.
-- **View name**: Specify the name for the new view.
-- **View columns**: List the columns you want to include in the view. This is typically done by specifying column names separated by commas.
-- **Condition**: This specifies the SQL conditions for the view creation.
-- **Query options**: The JSON object specifies additional options for the query.
-- **Query results options**: The `{ wrapIntegers: true }` option instructs how integers in the results should be handled, particularly relevant for languages or interfaces that may have issues with large integers.
+- **Table ID**
+- **Dataset ID**
+- **View name**
+- **View columns**
+- **Condition**
+- **Query options**
+- **Query results options**
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/create-view-v2.png"  alt="BQ create view"/>
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/create-view-v2.png"  alt="BQ create view" style={{marginBottom:'15px'}}/>
 
 ### Insert Record
 
@@ -212,68 +154,40 @@ This operation is used to insert a record.
 
 #### Required parameters: 
 
-- **Table id**: The ID for the table from which records need to be inserted.
-- **Dataset id**: The ID for the dataset containing the table specified above.
-- **Rows**: The text box here is used to input the data for the records to be inserted.
+- **Table ID**
+- **Dataset ID**
+- **Rows**
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/bq-insert-v2.png" alt="BQ insert" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-insert-v2.png" alt="BQ insert"  style={{marginBottom:'15px'}}/>
 
 ### Delete Record 
 Use this operation to delete a record.
 
 #### Required parameters: 
 
-- **Table id**: The ID for the table from which records need to be deleted.
-- **Dataset id**: The ID for the dataset containing the table specified above.
-- **Condition**: The condition specifies which records should be deleted. Any record that meets this condition will be deleted from the table.
-- **Query options**: The JSON object specifies additional options for the query.
-- **Query results options**: The `{ wrapIntegers: true }` option instructs how integers in the results should be handled, particularly relevant for languages or interfaces that may have issues with large integers.
+- **Table ID**
+- **Dataset ID**
+- **Condition**
+- **Query options**
+- **Query results options**
 
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-delete-v2.png"  alt="BQ delete" />
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/bq-delete-v2.png"  alt="BQ delete" />
-
-</div>
-
-
-:::info
+:::warning
 NOTE: Be careful when deleting records in a table. If you omit the WHERE clause, all records in the table will be deleted!
 :::
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Update Record
 Use this operation to update a record.
 
 #### Required parameters: 
 
-- **Table id**: The ID for the table from which records need to be updated.
-- **Dataset id**: The ID for the dataset containing the table specified above.
-- **Columns**: This is where the user specifies the data to be updated. 
-- **Condition**: The condition specifies which records should be updated. Any record that meets this condition will be updated from the table.
-- **Query options**: The JSON object specifies additional options for the query.
-- **Query results options**: The `{ wrapIntegers: true }` option instructs how integers in the results should be handled, particularly relevant for languages or interfaces that may have issues with large integers.
+- **Table ID**
+- **Dataset ID**
+- **Columns**
+- **Condition**
+- **Query results options**
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/bigquery/bq-update-v2.png" alt="BQ update" />
-
-</div>
-
-
-:::info
-NOTE: Be careful when deleting records in a table. If you omit the WHERE clause, all records in the table will be updated!
-:::
+<img className="screenshot-full" src="/img/datasource-reference/bigquery/bq-update-v2.png" alt="BQ update" />
 
 </div>

docs/docs/data-sources/clickhouse.md

@@ -3,8 +3,6 @@ id: clickhouse
 title: ClickHouse
 ---
 
-# ClickHouse
-
 ToolJet can connect to the ClickHouse to read and write data.
 
 :::info
@@ -13,7 +11,7 @@ ToolJet uses this [NodeJS](https://github.com/TimonKK/clickhouse) client for Cli
 
 ## Connection
 
-To establish a connection with the Clickhouse data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+To establish a connection with the Clickhouse data source, you can either click on the **+ Add new data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 ToolJet requires the following to connect to your ClickHouse Database:
 
@@ -31,19 +29,27 @@ ToolJet requires the following to connect to your ClickHouse Database:
 
 <img className="screenshot-full" src="/img/datasource-reference/clickhouse/connection-v2.png" alt="ClickHouse connection" />
 
+<div style={{paddingTop:'24px'}}>
+
 ## Querying ClickHouse
 
-After setting up the ClickHouse data source, you can click on the `+` button of the query manager and select the ClickHouse data source that you added in the previous step to create a new query.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **ClickHouse** datasource added in previous step.
+3. Select the operation you want to perform and enter the query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
 
 :::info
-For more details on clickhouse visit [Clickhouse docs](https://clickhouse.com/docs/en/quick-start).
+For more details on clickhouse visit [Clickhouse Docs](https://clickhouse.com/docs/en/quick-start).
 :::
 
+</div>
 
-## Supported Operations: 
+<div style={{paddingTop:'24px'}}>
 
-- [SQL Query](#sql-query)
-- [Insert array of objects](#supported-operations)
+## Supported Operations
+
+- **[SQL Query](#sql-query)**
+- **[Insert array of objects](#insert-array-of-objects)**
 
 ### SQL Query
 
@@ -51,161 +57,118 @@ Use this to operation to enter **[ClickHouse SQL Statements](https://clickhouse.
 
 #### Example SQL queries
 
-- **SELECT**:
+#### SELECT:
 
-	```sql
-	SELECT * from test array;
-	```
+```sql
+SELECT * from test array;
+```
 
-	<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/select-v2.png" alt="ClickHouse SQL Statement operation" style={{marginBottom:'15px'}}/>
 
-	<img className="screenshot-full" src="/img/datasource-reference/clickhouse/select.png" alt="ClickHouse SQL Statement operation" />
+#### CREATE: 
 
-	</div>
+```sql
+CREATE TABLE test array3 (
+	date Date,
+	str String,
+	arr Array(String),
+	arr2 Array (Date)
+	arr3 Array(UInt32) ,
+	id1 UUID
+)ENGINE=MergeTree () ORDER BY(str)
+```
 
-- **CREATE**: 
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/create-v2.png" alt="ClickHouse SQL Statement operation" style={{marginBottom:'15px'}}/>
 
-	```sql
-	CREATE TABLE test array3 (
-		date Date,
-		str String,
-		arr Array(String),
-		arr2 Array (Date)
-		arr3 Array(UInt32) ,
-		id1 UUID
-	)ENGINE=MergeTree () ORDER BY(str)
-	```
+#### ALTER TABLE (add column)
 
-	<div style={{textAlign: 'center'}}>
+```sql
+ALTER TABLE test array1 ADD COLUMN Added2 UInt32;
+```
 
-	<img className="screenshot-full" src="/img/datasource-reference/clickhouse/create.png" alt="ClickHouse SQL Statement operation" />
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/alter-v2.png" alt="ClickHouse SQL Statement operation" style={{marginBottom:'15px'}} />
 
-	</div>
+#### SELECT WITH WHERE CLAUSE
+```sql
+SELECT * FROM test array1 WHERE str='Somethingl...'
+```
 
-- **ALTER TABLE**(add column)
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/selectwithwhere-v2.png" alt="ClickHouse SQL Statement operation" style={{marginBottom:'15px'}} />
 
-	```sql
-	ALTER TABLE test array1 ADD COLUMN Added2 UInt32;
-	```
+#### UPDATE
+```sql
+ALTER TABLE test_array1 UPDATE arr = (12] WHERE str='Somethingl...'
+```
 
-	<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/update-v2.png" alt="ClickHouse SQL Statement operation" style={{marginBottom:'15px'}} />
 
-	<img className="screenshot-full" src="/img/datasource-reference/clickhouse/alter.png" alt="ClickHouse SQL Statement operation" />
+#### DELETE
+```sql
+ALTER TABLE test_array1 DELETE WHERE str= 'Somethingl...'
+```
 
-	</div>
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/delete-v2.png" alt="ClickHouse SQL Statement operation" style={{marginBottom:'15px'}} />
 
-- **SELECT WITH WHERE CLAUSE**
-	```sql
-	SELECT * FROM test array1 WHERE str='Somethingl...'
-	```
+#### NORMAL INSERT
 
-	<div style={{textAlign: 'center'}}>
+##### Step 1 - Creating Table
 
-	<img className="screenshot-full" src="/img/datasource-reference/clickhouse/selectwithwhere.png" alt="ClickHouse SQL Statement operation" />
-
-	</div>
-
-- **UPDATE**
-	```sql
-	ALTER TABLE test_array1 UPDATE arr = (12] WHERE str='Somethingl...'
-	```
-
-	<div style={{textAlign: 'center'}}>
-
-	<img className="screenshot-full" src="/img/datasource-reference/clickhouse/update.png" alt="ClickHouse SQL Statement operation" />
-
-	</div>
-
-- **DELETE**
-	```sql
-	ALTER TABLE test_array1 DELETE WHERE str= 'Somethingl...'
-	```
-
-	<div style={{textAlign: 'center'}}>
-
-	<img className="screenshot-full" src="/img/datasource-reference/clickhouse/delete.png" alt="ClickHouse SQL Statement operation" />
-
-	</div>
-
-- **NORMAL INSERT**
-
-	1) Step 1 - Creating Table
-
-	```sql
-	CREATE TABLE test array4 (
+```sql
+CREATE TABLE test array4 (
 	name String,
 	date Date
-   )ENGINE=MergeTree () ORDER BY (name)
-	```
+)ENGINE=MergeTree () ORDER BY (name)
+```
 
-	<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/step1-v2.png" alt="ClickHouse SQL Statement operation" />
 
-	<img className="screenshot-full" src="/img/datasource-reference/clickhouse/step1.png" alt="ClickHouse SQL Statement operation" />
+#### Step 2 - Insert
 
-	</div>
+```sql
+INSERT INTO test_array4 (*) VALUES ('juvane', '1996-01-13')
+```
 
-	2) Step 2 - Insert
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/step2-v2.png" alt="ClickHouse SQL Statement operation" />
 
-	```sql
-	INSERT INTO test_array4 (*) VALUES ('juvane', '1996-01-13')
-	```
+:::info
+**Giving Primary Key**
+```sql
+CREATE TABLE db.table_name
+(
+	name1 type1, name2 type2, ...,
+	PRIMARY KEY(expr1[, expr2,...])]
+)
+ENGINE = engine;
 
-	<div style={{textAlign: 'center'}}>
-
-	<img className="screenshot-full" src="/img/datasource-reference/clickhouse/step1.png" alt="ClickHouse SQL Statement operation" />
-
-	</div>
-
-	:::info
-	**Giving Primary Key**
-	```
-	CREATE TABLE db.table_name
-	(
-		name1 type1, name2 type2, ...,
-		PRIMARY KEY(expr1[, expr2,...])]
-	)
-	ENGINE = engine;
-
-	OR 
+OR 
 	
-	CREATE TABLE db.table_name
-	(
-		name1 type1, name2 type2, ...
-	)
-	ENGINE = engine
-	PRIMARY KEY(expr1[, expr2,...]);
-	```
-	:::
+CREATE TABLE db.table_name
+(
+	name1 type1, name2 type2, ...
+)
+ENGINE = engine
+PRIMARY KEY(expr1[, expr2,...]);
+```
+:::
 
-### Insert array of objects
+### Insert Array of Objects
 
 Use this operation for inserting array of objects.
 
 #### Required Parameters:
 - **Body**
-- **Fields**
 - **Table name**
+- **Fields**
 
 **Example Body value:**
 ```javascript
 [
-			{
-				date: '2018-01-01',
-				str: 'Something1...',
-				arr: [],
-				arr2: ['1985-01-02', '1985-01-03'],
-				arr3: [1,2,3,4,5],
-				id1: '102a05cb-8aaf-4f11-a442-20c3558e4384'
-			},		
-			{
-				date: '2018-02-01',
-				str: 'Something2...',
-				arr: ['5670000000', 'Something3...'],
-				arr2: ['1985-02-02'],
-				arr3: [],
-				id1: 'c2103985-9a1e-4f4a-b288-b292b5209de1'
-			}
-		];
+  { "id": 1, "name": "Alice", "age": 25 },
+  { "id": 2, "name": "Bob", "age": 30 },
+  { "id": 3, "name": "Charlie", "age": 28 }
+]
 ```
 
-<img className="screenshot-full" src="/img/datasource-reference/clickhouse/insertarray.png" alt="ClickHouse Insert array of objects operation" />
+<img className="screenshot-full" src="/img/datasource-reference/clickhouse/insertarray-v2.png" alt="ClickHouse Insert array of objects operation" />
+
+</div>

docs/docs/data-sources/cosmosdb.md

@@ -3,13 +3,11 @@ id: cosmosdb
 title: CosmosDB
 ---
 
-# Cosmosdb
-
 ToolJet can connect to CosmosDB databases to read and write data.
 
 ## Connection
 
-To establish a connection with the CosmosDB data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+To establish a connection with the CosmosDB data source, you can either click on the **+ Add new data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 ToolJet requires the following to connect to your Cosmos DB.
 
@@ -17,74 +15,114 @@ ToolJet requires the following to connect to your Cosmos DB.
 - **Cosmos DB Account Key**
 
 :::info
-**Azure Cosmos DB End point** is the URL of the Cosmos DB service.
+**Azure Cosmos DB End Point** is the URL of the Cosmos DB service.
 **Azure Cosmos DB Key** is the key that is used to access the Cosmos DB service.
 You can find the endpoint and key in the **[Azure Portal](https://portal.azure.com/)**.
 :::
 
 <div style={{textAlign: 'center'}}>
 
-![ToolJet - Data source - CosmosDB](/img/datasource-reference/cosmosdb/cosmosdb-connect-v2.png)
+<img className="screenshot-full" src="/img/datasource-reference/cosmosdb/cosmosdb-connect-v2.png" alt="ToolJet - Data source - CosmosDB"/>
 
 </div>
 
-## Supported Queries:
+<div style={{paddingTop:'24px'}}>
 
-- [Listing databases](#listing-databases)
-- [Listing containers](#listing-containers)
-- [Inserting item(s)](#inserting-items)
-- [Retrieving an item](#retrieving-an-item)
-- [Deleting an item](#deleting-an-item)
-- [Querying documents](#querying-documents)
+## Querying CosmoDB
 
-### Listing Databases
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **CosmoDB** datasource added in previous step.
+3. Select the operation you want to perform and enter the query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
+
+<img className="screenshot-full" src="/img/datasource-reference/cosmosdb/operations.png" alt="ToolJet - Data source - CosmosDB"/>
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Supported Queries
+
+- **[List databases](#list-databases)**
+- **[List containers](#list-containers)**
+- **[Insert items](#insert-items)**
+- **[Read item](#read-item)**
+- **[Delete item](#delete-item)**
+- **[Query database](#query-database)**
+
+### List Databases
 
 This query lists all the databases in a Cosmos DB.
 
-### Listing Containers
+<img className="screenshot-full" src="/img/datasource-reference/cosmosdb/listDatabase.png" alt="ToolJet - Data source - CosmosDB" style={{marginBottom:'15px'}}/>
+
+### List Containers
 
 This query lists all the containers of a database in a Cosmos DB.
 
-| Fields   | Description        |
-| -------- | ------------------ |
-| database | id of the database |
+#### Required Parameter
+- **Database**
 
-### Inserting Item(s)
+<img className="screenshot-full" src="/img/datasource-reference/cosmosdb/listContainers.png" alt="ToolJet - Data source - CosmosDB" style={{marginBottom:'15px'}}/>
+
+### Insert Items
 
 This query inserts one or more items in a container of a database in a Cosmos DB.
 
-| Fields    | Description                                                                        |
-| --------- | ---------------------------------------------------------------------------------- |
-| database  | id of the database                                                                 |
-| container | id of the container                                                                |
-| items     | items to be inserted. Example: `{{[{name: "one", val: 1}, {name:"two", val: 2}]}}` |
+#### Required Parameter
+- **Database**
+- **Container**
+- **Items**
 
-### Retrieving An Item
+<img className="screenshot-full" src="/img/datasource-reference/cosmosdb/insertItems.png" alt="ToolJet - Data source - CosmosDB" style={{marginBottom:'15px'}}/>
+
+#### Example
+
+```yaml
+{
+  "id": "123", 
+  "product": "Laptop", 
+  "price": 1200, 
+  "customer_id": "C001"
+}
+```
+
+### Read Item
 
 To read a single item from a container of a database in a Cosmos DB, use the following query.
 
-| Fields    | Description         |
-| --------- | ------------------- |
-| database  | id of the database  |
-| container | id of the container |
-| item      | id of the item      |
+#### Required Parameter
+- **Database**
+- **Container**
+- **Item ID**
 
-### Deleting An Item
+<img className="screenshot-full" src="/img/datasource-reference/cosmosdb/readItem.png" alt="ToolJet - Data source - CosmosDB" style={{marginBottom:'15px'}}/>
+
+### Delete Item
 
 To delete an item from a container of a database in a Cosmos DB, use the following query.
 
-| Fields    | Description         |
-| --------- | ------------------- |
-| database  | id of the database  |
-| container | id of the container |
-| item      | id of the item      |
+#### Required Parameter
+- **Database**
+- **Container**
+- **Item ID**
 
-### Querying Documents
+<img className="screenshot-full" src="/img/datasource-reference/cosmosdb/deleteItem.png" alt="ToolJet - Data source - CosmosDB" style={{marginBottom:'15px'}}/>
+
+### Query Database
 
 To query documents from a container of a database in a Cosmos DB using SQL-like syntax, use the following query.
 
-| Fields    | Description                                                                       |
-| --------- | --------------------------------------------------------------------------------- |
-| database  | id of the database                                                                |
-| container | id of the container                                                               |
-| query     | query to be executed. Example: `SELECT * FROM c WHERE c.age > 20 AND c.age <= 30` |
+#### Required Parameter
+- **Database**
+- **Container**
+- **Query**
+
+<img className="screenshot-full" src="/img/datasource-reference/cosmosdb/queryDatabase.png" alt="ToolJet - Data source - CosmosDB" style={{marginBottom:'15px'}}/>
+
+#### Example
+```yaml
+SELECT * FROM c WHERE c.age > 20 AND c.age <= 30
+```
+
+</div>

docs/docs/data-sources/couchdb.md

@@ -3,54 +3,63 @@ id: couchdb
 title: CouchDB
 ---
 
-# CouchDB
+ToolJet can connect to CouchDB databases to read and write data. 
 
-ToolJet can connect to CouchDB databases to read and write data. CocuhDB uses basic auth for authentication , username and password for the database is required to create an CouchDB data source on ToolJet. For more info visit [CouchDB docs](https://docs.couchdb.org/en/stable/).
+<div style={{paddingTop:'24px'}}>
 
+## Connection
 
-## Supported Queries: 
+To establish a connection with the CouchDB data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
-- [Listing Records](#listing-records)
-- [Retrieving a Record](#retrieving-a-record)
-- [Creating a Record](#creating-a-record)
-- [Updating a Record](#updating-a-record)
-- [Deleting a Record](#deleting-a-record)
-- [Find](#find)
-- [Retrieving a View](#retrieving-a-view)
+ToolJet requires the following to connect to your CouchDB.
+- **Username**
+- **Password**
 
-:::info
-NOTE: Record ID is same as document ID("_id") .
-:::
-### Listing Records 
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/connections.png" alt="Couch listing"/>
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Querying CouchDB
+
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **CouchDB** datasource added in previous step.
+3. Select the operation you want to perform and enter the query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
+
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/operations.png" alt="Couch listing"/>
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Supported Queries 
+
+- **[List Records](#list-records)**
+- **[Retrieve Record](#retrieve-record)**
+- **[Create Record](#create-record)**
+- **[Update Record](#update-record)**
+- **[Delete Record](#delete-record)**
+- **[Find](#find)**
+- **[Get View](#get-view)**
+
+### List Records 
 
 This query lists all the records in a database.
 
-#### Optional Parameters: 
+#### Optional Parameters
 
 - **Include docs**
 - **Descending order**
 - **Limit**
 - **Skip**
 
-:::info
-descending (boolean) – Return the documents in descending order by key. Default is false.
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/listing-v2.png" alt="Couch listing"/>
 
-limit (number) – Limit the number of the returned documents to the specified number.
-
-skip (number) – Skip this number of records before starting to return the results. Default is 0.
-
-include_docs (boolean) – include_docs key is set to false by default , if true it returns the document data along with the default fields.
-
-:::
-
-
-<img className="screenshot-full" src="/img/datasource-reference/couchdb/listing.png" alt="Couch listing"/>
-
-
-
-Example response from CouchDb: 
-
-```json
+<details>
+  <summary>**Response Example**</summary>
+  ```json
 {
     "total_rows": 3,
     "offset": 0,
@@ -79,20 +88,21 @@ Example response from CouchDb:
     ]
 }
 ```
+</details>
 
-### Retrieving a Record 
+### Retrieve Record 
+
+This operation fetches a single record by its record ID.
 
 #### Required Parameters: 
 
 - **Record ID**
 
 
-<img className="screenshot-full" src="/img/datasource-reference/couchdb/retrieving.png" alt="Couch retrieve view" />
-
-
-
-Example response from CouchDb: 
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/retrieving-v2.png" alt="Couch retrieve view" />
 
+<details>
+  <summary> **Response Example** </summary>
 ```json
 {
     "_id": "e33dc4e209689cb0400d095fc401a1e0",
@@ -102,99 +112,94 @@ Example response from CouchDb:
     }
 }
 ```
-The returned JSON is the JSON of the document, including the document ID and revision number:
+</details>
+
+### Create Record
+
+Inserts a new record into the database.
+
+#### Required Parameters: 
+
+- **Records**
 
 
-### Creating a Record
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/creating-v2.png" alt="Couch create view"/>
 
-
-<img className="screenshot-full" src="/img/datasource-reference/couchdb/creating.png" alt="Couch create view"/>
-
-
-#### Example Records:
+#### Example
 
 ```json
   [{"name":"tooljet"}]
 ```
 
-Click on the `run` button to run the query.
+<details>
+  <summary>**Response Example**</summary>
+    ```json
+    {
+        "ok": true,
+        "id": "23212104e60a71edb42ebc509f0049a2",
+        "rev": "1-b0a625abc4e21ee554737920156e911f"
+    }
+    ```
+</details>
 
-Example response from CouchDb:
-```json
-
-   {
-    "ok": true,
-    "id": "23212104e60a71edb42ebc509f0049a2",
-    "rev": "1-b0a625abc4e21ee554737920156e911f"
-}
-
-```
-
-### Updating a Record
+### Update Record
 
 You can get the revision id  value, by sending a GET request to get the document details.
 You get the document as JSON in the response. For each update to the document, the revision field "_rev" gets changed.
 
-#### Required Rarameters:
-- **Revision ID**
+#### Required Parameters:
 - **Record ID**
+- **Revision ID**
 
 
-<img className="screenshot-full" src="/img/datasource-reference/couchdb/updating.png" alt="Couch update view" />
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/updating-v2.png" alt="Couch update view" />
 
 
-#### Example Body:
+#### Example
 
 ```json
-  [{"name":"tooljet"}]
+[{"name":"tooljet"}]
 ```
 
+<details>
+  <summary>**Response Example**</summary>
+  ```json
+  {
+      "ok": true,
+      "id": "23212104e60a71edb42ebc509f0049a2",
+      "rev": "2-b0a625abc4e21ee554737920156e911f"
+  }
+ ```
+</details>
 
-Click on the `run` button to run the query.
+### Delete Record
 
-:::info
-NOTE: Query must be saved before running.
-:::
-
-Example response from CouchDb:
-```json
-{
-    "ok": true,
-    "id": "23212104e60a71edb42ebc509f0049a2",
-    "rev": "2-b0a625abc4e21ee554737920156e911f"
-}
-```
-
-### Deleting a Record
+Removes a record from the database by its record ID.
 
 #### Required Parameters:
-- **Revision ID**
 - **Record ID**
+- **Revision ID**
 
 
-<img className="screenshot-full" src="/img/datasource-reference/couchdb/deleting.png" alt="Couch delete view"/>
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/deleteRecord.png" alt="Couch delete view"/>
 
-
-
-Click on the `run` button to run the query.
-
-
-Example response from CouchDb:
-
-```json
-{
-    "ok": true,
-    "id": "rev_id=2-3d01e0e87139c57e9bd083e48ecde13d&record_id=e33dc4e209689cb0400d095fc401a1e0",
-    "rev": "1-2b99ef28c03e68ea70bb668ee55ffb7b"
-}
-```
+<details>
+  <summary>**Response Example**</summary>
+    ```json
+    {
+        "ok": true,
+        "id": "rev_id=2-3d01e0e87139c57e9bd083e48ecde13d&record_id=e33dc4e209689cb0400d095fc401a1e0",
+        "rev": "1-2b99ef28c03e68ea70bb668ee55ffb7b"
+    }
+    ```
+</details>
 
 ### Find 
 
 Find documents using a declarative JSON querying syntax.
 
 #### Required Parameters:
-- **Selector**
+- **Mangoquery**
 
 :::info
 NOTE:
@@ -202,10 +207,10 @@ selector syntax: https://pouchdb.com/guides/mango-queries.html
 :::
 
 
-<img className="screenshot-full" src="/img/datasource-reference/couchdb/find.png" alt="Couch find" />
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/find-v2.png" alt="Couch find" />
 
 
-#### Example Body:
+#### Example
 
 ```json
 {
@@ -216,89 +221,64 @@ selector syntax: https://pouchdb.com/guides/mango-queries.html
 }
 ```
 
-
-Click on the `run` button to run the query.
-
-:::info
-NOTE:
-selector (json) – JSON object describing criteria used to select documents. 
-
-More information : https://docs.couchdb.org/en/stable/api/database/find.html
-:::
-
-Example response from CouchDb:
-
+Example response from CouchDB:
 
 <img className="screenshot-full" src="/img/datasource-reference/couchdb/find_response.png" alt="Couch find response" />
 
-
-### Retrieving a View
+### Get View
 
 Views are the primary tool used for querying and reporting on CouchDB documents.
 
-#### Required Parameters:
+#### Required Parameters
 - **View url**
 
-Reference for view :https://docs.couchdb.org/en/3.2.0/ddocs/views/intro.html#what-is-a-view
-
-
-<img className="screenshot-full" src="/img/datasource-reference/couchdb/get_view.png" alt="Couch get view" />
-
 
 #### Optional Parameters: 
-
 - **Start key**
 - **End key**
 - **Limit**
 - **Skip**
 
-Click on the `run` button to run the query.
+<img className="screenshot-full" src="/img/datasource-reference/couchdb/get_view-v2.png" alt="Couch get view" />
 
-:::info
-startkey (json) – Return records starting with the specified key.
-
-endkey (json) – Stop returning records when the specified key is reached.
-
-limit (number) – Limit the number of the returned documents to the specified number.
-
-skip (number) – Skip this number of records before starting to return the results. Default is 0.
-:::
-
-Example response from CouchDb:
-```json
-{
-    "total_rows": 4,
-    "offset": 0,
-    "rows": [
-        {
-            "id": "23212104e60a71edb42ebc509f000dc2",
-            "key": "23212104e60a71edb42ebc509f000dc2",
-            "value": {
-                "rev": "1-0cc7f48876f15883394e5c139c628123"
+<details>
+  <summary>**Response Example**</summary>
+  ```json
+    {
+        "total_rows": 4,
+        "offset": 0,
+        "rows": [
+            {
+                "id": "23212104e60a71edb42ebc509f000dc2",
+                "key": "23212104e60a71edb42ebc509f000dc2",
+                "value": {
+                    "rev": "1-0cc7f48876f15883394e5c139c628123"
+                }
+            },
+            {
+                "id": "23212104e60a71edb42ebc509f00216e",
+                "key": "23212104e60a71edb42ebc509f00216e",
+                "value": {
+                    "rev": "1-b3c45696b10cb08221a335ff7cbd8b7a"
+                }
+            },
+            {
+                "id": "23212104e60a71edb42ebc509f00282a",
+                "key": "23212104e60a71edb42ebc509f00282a",
+                "value": {
+                    "rev": "1-da5732beb913ecbded309321cac892d2"
+                }
+            },
+            {
+                "id": "23212104e60a71edb42ebc509f002cbd",
+                "key": "23212104e60a71edb42ebc509f002cbd",
+                "value": {
+                    "rev": "1-ca5bb3c0767eb42ea6c33eee3d395b59"
+                }
             }
-        },
-        {
-            "id": "23212104e60a71edb42ebc509f00216e",
-            "key": "23212104e60a71edb42ebc509f00216e",
-            "value": {
-                "rev": "1-b3c45696b10cb08221a335ff7cbd8b7a"
-            }
-        },
-        {
-            "id": "23212104e60a71edb42ebc509f00282a",
-            "key": "23212104e60a71edb42ebc509f00282a",
-            "value": {
-                "rev": "1-da5732beb913ecbded309321cac892d2"
-            }
-        },
-        {
-            "id": "23212104e60a71edb42ebc509f002cbd",
-            "key": "23212104e60a71edb42ebc509f002cbd",
-            "value": {
-                "rev": "1-ca5bb3c0767eb42ea6c33eee3d395b59"
-            }
-        
-        }
-    ]
-}
-```
+        ]
+    }
+    ```
+</details>
+
+</div>

docs/docs/data-sources/custom-js.md

@@ -1,121 +1,141 @@
 ---
 id: run-js
-title: Run JavaScript code
+title: Run JavaScript Code
 ---
+The **Run JavaScript Code** feature in ToolJet allows custom JavaScript code to be executed to enhance application interactivity. This feature is useful for performing calculations, generating values, or interacting with queries and components.
 
-You can write custom JavaScript code to interact with components and queries. To do that, you just need to create a new query and select **Run JavaScript Code** from the default datasources section.
+<div style={{paddingTop:'24px'}}>
 
-<div style={{textAlign: 'center'}}>
+## Creating a Run JavaScript Query
 
-<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/defaultds.png" alt="Run JavaScript code" />
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select **Run JavaScript Code** from the list of available data sources.
+3. Add the JavaScript Code.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
+
+<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/create-query.png" alt="Run JavaScript code" />
 
 </div>
 
-## JS parameters
+<div style={{paddingTop:'24px'}}>
 
-JS parameters in RunJS queries offer a convenient way to customize JavaScript code execution without altering the code directly. You can add parameters by clicking the **Add** button in the RunJS query editor.
+## Parameters in Run JavaScript Code
+
+Parameters allow for dynamic control over the JavaScript code execution without altering the core script. This provides flexibility by allowing the same code to execute with different inputs.
 
 Each parameter requires:
 - **Name**: Name for the parameter
 - **Default value**: The value can be constant strings, numbers and object.
 
-**Syntax for calling the parameter:** `parameters.<name>`
+### Steps to Add a Parameter
+
+1. In the RunJS query editor, click the **Parameters +** button to create a new parameter.
+2. Provide a **Name** for the parameter.
+3. Set a Default **Value**, which can be a string, number, or object.
+
+Once added, the **parameter can be referenced in the code using the syntax**: `parameters.<name>`.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/addparam.png" alt="Run JavaScript code" />
+<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/js-param.png" alt="Run JavaScript code" />
 
 </div>
 
-### Example: Alert a parameter
+### Displaying a Parameter Value in an Alert Box
 
-Let's create a new parameter named `object1` and set the value as object `{key1: 'value1'}` and use the alert js method to show the value on the pop-up.
+Let's create a new parameter named *newAlert* and set the value as object `Displaying the Parameter Value in an Alert Box` and use the alert js method to show the value on the pop-up.
 
 Syntax:
 ```
-alert(parameters.object1)
+alert(parameters.newAlert)
 ```
 
 When the query is triggered the alert will show the parameters value.
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/param-alert.png" alt="Run JavaScript code" />
 
-<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/popup.png" alt="Run JavaScript code" />
+### Calling Another Query with Parameters
+
+Parameters can also be used to trigger other queries and pass custom values. Below is an example of how to call one query from another by providing custom parameters.
+
+1. Begin by creating a new RunJS query named *multiply*. 
+    - In this query, add the following parameters: 
+
+        - *num1* with a default value of **10**
+        - *num2* with a default value of **2**.
+    - Add the following JavaScript Code:
+
+    ```javascript
+    return parameters.num1 * parameters.num2;
+    ```
+    - To display the result, place a text component on the canvas and set its text to `{{queries.multiply.data}}`.
+    <br/>
+    <img className="screenshot-full" src="/img/datasource-reference/custom-javascript/multiply-v2.png" alt="Run JavaScript code" />
+
+2. Now, let's create another RunJS query called *callMultiply*, where we will invoke the *multiply* query created earlier using custom parameter values. Here's the code snippet for *callMultiply*:
+ 
+    ```js
+    queries.multiply.run({num1: 20, num2: 7})
+    ```
+ 
+    By executing this code within *callMultiply*, we trigger the *multiply* query with specific values for its parameters.
+ 
+    <img className="screenshot-full" src="/img/datasource-reference/custom-javascript/call-multiply-v2.png" alt="Run JavaScript code" />
+
+With this setup, the *multiply* query can be called from other queries, such as *callMultiply*, by providing custom parameter values. This allows you to reuse the *multiply* query with different inputs and display the results accordingly.
 
 </div>
 
-### Example: Providing custom parameters by calling another query
+<div style={{paddingTop:'24px'}}>
 
-Let's demonstrate how to utilize parameters in RunJS queries and call one query from another by providing custom parameter values:
+## RunJS Example Queries
 
-1. Begin by creating a new RunJS query named `multiply`. In this query, add the following parameters: **num1** with a default value of `10` and **num2** with a default value of `2`. To display the result, place a text component on the canvas and set its text to `{{queries.multiply.data}}`. Save and Run the query.
- <div style={{textAlign: 'center'}}>
+### Generating a Random Number
 
- <img className="screenshot-full" src="/img/datasource-reference/custom-javascript/multiply.png" alt="Run JavaScript code" />
+This example demonstrates how to generate and display a random number using JavaScript.
 
- </div>
+1. Drag a **button** and a **text** widget inside a **container** widget.
+2. Click on the **+ Add** on the query panel to create a query and select **Run JavaScript code** from the available datasources.
+3. Write the code in **JavaScript editor** and run the query.
 
-2. Now, let's create another RunJS query called `callMultiply`, where we will invoke the `multiply` query created earlier using custom parameter values. Here's the code snippet for `callMultiply`:
- ```js
- queries.multiply.run({num1: 20, num2: 20})
- ```
- 
- By executing this code within `callMultiply`, we trigger the `multiply` query with specific values for its parameters.
- 
- <div style={{textAlign: 'center'}}>
-
- <img className="screenshot-full" src="/img/datasource-reference/custom-javascript/callmultiply.png" alt="Run JavaScript code" />
-
- </div>
-
-With this setup, the `multiply` query can be called from other queries, such as `callMultiply`, by providing custom parameter values. This allows you to reuse the `multiply` query with different inputs and display the results accordingly.
-
-## RunJS query examples
-
-### Displaying random number
-
-- Let's drag a **button** and a **text** widget inside a container widget.
-- Click on the `+` on the query panel to create a query and select **Run JavaScript code** from the available datasources
-- Write the code in **JavaScript editor** and save the query:
-```jsx
+```js
 const a = Math.floor(Math.random() * (10 - 1)) + 1;
 return a;
 ```
-:::tip
-- The `return` statement is used to end the code and the value specified to the `return` statement will be stored in the `data` property of the query. 
-ex: `{{queries.runjs1.data}}`
-- You cannot use `console.log` in Run JavaScript code
-:::
 
-- Let's edit the properties of widgets:
-    - Add an event handler to the button - Select **On Click** event, **Run Query** action, and select the `runjs1` query that we created. This will run the JavaScript code every time the button is clicked.
-    - Edit the property of text widget - In the text field enter **Random number: `{{queries.runjs1.data}}`**. It will display the output as Random number: *result from JS code*
+4. Edit the properties of widgets:
+    1. Add an event handler to the button:
+        1. Select event as **On Click** 
+        2. Action as **Run Query**
+        3. Select the *runjs1* query that we created. This will run the JavaScript code every time the button is clicked.
+    2. Edit the property of text widget:
+        1. In the text field enter **Random number:** `{{queries.runjs1.data}}`. It will display the output as Random number: *result from JS code*
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/random-num.png" alt="Run JavaScript code" />
 
-<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/jsrandom.gif" alt="Run JavaScript code" />
+### Generating a Unique ID
 
-</div>
-
-### Generating Unique ID
-#### Code 1:
+The following code generates a unique ID in the format "id" followed by a sequence of random hexadecimal characters.
 
 ```js
 var id = "id" + Math.random().toString(16).slice(2);
 return id;
 ```
+For example, it could be something like "id2f4a1b".
 
-In this code, the resulting ID will have the format "id" followed by a sequence of random hexadecimal characters. For example, it could be something like "id2f4a1b".
+<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/unique-id-1.png" alt="Run JavaScript code" />
 
-#### Code 2:
+### Generating a Timestamp-Based Unique ID
+
+In this code, the resulting ID will have the format "timestamp + randomHex", where "timestamp" is the current time in base-32 and "randomHex" is a random hexadecimal value.
 
 ```js
 return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
 ```
 
-In this code, the resulting ID will have the format "timestamp + randomHex", where "timestamp" is the current time in base-32 and "randomHex" is a random hexadecimal value. This ID will be longer than the one generated by Code 1, and it could look like "2g3h1d6a4h3".
+This ID will be longer than the one generated earlier, and it could look like "2g3h1d6a4h3".
 
-Both code snippets will produce IDs that are highly likely to be unique. However, Code 1 generates shorter IDs and follows a more straightforward approach with a fixed prefix ("id"). On the other hand, Code 2 generates longer IDs by incorporating the current timestamp and using a combination of base-32 and hexadecimal representations. The choice between the two methods depends on the specific requirements of the application and the desired length of the generated IDs.
+<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/unique-id-2.png" alt="Run JavaScript code" />
 
 :::tip Resources
 - You can also write custom JavaScript code to get the data from **External APIs** and manipulate the response for graphical representation. Here's the [tutorial](https://blog.tooljet.com/build-github-stars-history-app-in-5-minutes-using-low-code/) on how we used custom JavaScript code to build an app using GitHub API.
@@ -124,6 +144,10 @@ Both code snippets will produce IDs that are highly likely to be unique. However
 - [Trigger query at specified intervals](/docs/how-to/run-query-at-specified-intervals) using RunJS.
 :::
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Libraries
 
 ToolJet allows you to internally utilize these libraries:
@@ -136,4 +160,6 @@ ToolJet allows you to internally utilize these libraries:
 
 :::info
 Issues with writing custom JavaScript code? Ask in our [Slack Community](https://tooljet.com/slack).
-:::
+:::
+
+</div>

docs/docs/data-sources/databricks.md

@@ -3,14 +3,14 @@ id: databricks
 title: Databricks
 ---
 
-# Databricks
-
 Databricks is a cloud-based platform for data processing, analytics, and machine learning. ToolJet connects to Databricks, allowing your applications to access and update your data in your Databricks Warehouses directly using SQL queries.
 
 <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/datasource-reference/databricks/install.gif" alt="Install Databricks" />
+    <img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/databricks/install.gif" alt="Install Databricks" />
 </div>
 
+<div style={{paddingTop:'24px'}}>
+
 ## Configuration
 
 ToolJet's Databricks integration relies on a configuration form that supports the following parameters:
@@ -31,34 +31,26 @@ ToolJet's Databricks integration relies on a configuration form that supports th
 
 - Navigate to your Databricks workspace, select the desired SQL Warehouse, and find **Server Hostname** and **HTTP Path** within the connection details tab.
 
-  <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/datasource-reference/databricks/connection-details.png" alt="Databricks: Connection Details" />
-  </div>
+<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/databricks/connection-details.png" alt="Databricks: Connection Details" />
 
 - To generate a personal access token, access your Databricks User Settings, select the Developer tab, click Manage under Access Tokens, and then click on the **Generate New Token** button.
 
-  <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/datasource-reference/databricks/generate-token.png" alt="Databricks: Access Tokens" />
-  </div> 
+<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/databricks/generate-token.png" alt="Databricks: Access Tokens" />
 
 - Navigate to the Databricks datasource configuration form in ToolJet, fill in the required parameters, and click the **Save** button. You can test the connection by clicking the **Test Connection** button.
 
-  :::note
-    Ensure your Databricks Warehouse is running and has been granted the necessary permissions prior to clicking **Test Connection** or running any queries.
-  :::
+<img style={{ border:'0', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/datasource-reference/databricks/setup-parameters.png" alt="Databricks: Setup Paramaters" />
 
-  <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/datasource-reference/databricks/setup-parameters.png" alt="Databricks: Setup Paramaters" />
-  </div>
+</div>
+
+<div style={{paddingTop:'24px'}}>
 
 ## Querying Databricks
 
-- To perform queries on Databricks in ToolJet, click the **+ Add** button in the query manager located at the bottom panel of the editor.
--  Select the previously configured Databricks datasource.
--  In the second Data Source dropdown, select **SQL mode** as the query type. ToolJet currently supports only SQL mode for Databricks interactions.
-- Selecting SQL mode will open a dedicated SQL editor where you can write your SQL queries.
-- After writing the query, click the **Run** button to execute the query.
-
+1. Click on + Add button of the query manager at the bottom panel of the editor.
+2. Select the **Databricks** datasource added in previous step.
+3. Select the **SQL Mode** from the dropdown. (ToolJet currently supports only SQL mode for Databricks interactions.)
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
 
 <div style={{textAlign: 'center'}}>
 
@@ -71,21 +63,27 @@ ToolJet's Databricks integration relies on a configuration form that supports th
 You can apply transformations to the query results. Refer to our transformations documentation for more information: [link](/docs/tutorial/transformations)
 :::
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Supported Queries
 
 Databricks supports standard SQL commands for data manipulation tasks.
 
 ### Read Data 
 
-The following example demonstrates how to read data from a table. The query selects all the columns from the `customers` table.
+The following example demonstrates how to read data from a table. The query selects all the columns from the *customers* table.
 
 ```sql
 SELECT * FROM customers 
 ```
 
+<img className="screenshot-full" src="/img/datasource-reference/databricks/readData.png" alt="Databricks: Read Data Query" style={{marginBottom:'15px'}}/>
+
 ### Write Data 
 
-The following example demonstrates how to write data to a table. The query inserts a new row into the `customers` table.
+The following example demonstrates how to write data to a table. The query inserts a new row into the *customers* table.
 
 ```sql
 INSERT INTO customers (
@@ -111,9 +109,11 @@ INSERT INTO customers (
 );
 ```
 
+<img className="screenshot-full" src="/img/datasource-reference/databricks/writeData.png" alt="Databricks: Write Data Query" style={{marginBottom:'15px'}}/>
+
 ### Update Data 
 
-The following example demonstrates how to update data in a table. The query updates the `first_name` and `email` column of the `customers` table.
+The following example demonstrates how to update data in a table. The query updates the *first_name* and *email* column of the *customers* table.
 
 ```sql
 UPDATE customer
@@ -122,11 +122,17 @@ SET first_name = 'John',
 WHERE customer_id = 1001;
 ```
 
+<img className="screenshot-full" src="/img/datasource-reference/databricks/updateData.png" alt="Databricks: Update Data Query" style={{marginBottom:'15px'}}/>
+
 ### Delete Data
 
-The following example demonstrates how to delete data from a table. The query deletes a row from the `customers` table.
+The following example demonstrates how to delete data from a table. The query deletes a row from the *customers* table.
 
 ```sql
 DELETE FROM customer
 WHERE customer_id = 1001;
-```
+```
+
+<img className="screenshot-full" src="/img/datasource-reference/databricks/deleteData.png" alt="Databricks: Delete Data Query" style={{marginBottom:'15px'}}/>
+
+</div>

docs/docs/data-sources/dynamodb.md

@@ -3,17 +3,13 @@ id: dynamodb
 title: DynamoDB
 ---
 
-<div style={{paddingBottom:'24px'}}>
-
 **DynamoDB** is a managed non-relational database service provided by Amazon. ToolJet has the capability to connect to DynamoDB for reading and writing data.
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To establish a connection with the **DynamoDB** data source, you can either click on the **+Add new Data source** button located on the query panel or navigate to the **[Data sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+To establish a connection with the **DynamoDB** data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 <div style={{textAlign: 'center'}}>
 
@@ -56,17 +52,13 @@ If you prefer to use an **AWS ARN Role**, you will need to provide the following
 
 </div>
 
-:::info
-Click on the **Test Connection** button to verify the correctness of the provided credentials and the accessibility of the database to the ToolJet server. Finally, click on the **Save** button to save the data source configuration.
-:::
-
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Querying DynamoDB
 
-To perform queries on **DynamoDB**, click on the **+Add** button in the query manager located at the bottom panel of the editor. Select the previously added database as the data source for the query. Choose the desired operation and click on the **Run** button to run the query.
+To perform queries on **DynamoDB**, click on the **+ Add** button in the query manager located at the bottom panel of the editor. Select the previously added database as the data source for the query. Choose the desired operation and click on the **Run** button to run the query.
 
 <div style={{textAlign: 'center'}}>
 
@@ -78,11 +70,7 @@ To perform queries on **DynamoDB**, click on the **+Add** button in the query ma
 You can apply transformations to the query results. Refer to our transformations documentation for more information: [link](/docs/tutorial/transformations)
 :::
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-## Supported Operations
+#### Supported Operations
 
 - **[List Tables](#list-tables)**
 - **[Get Item](#get-item)**
@@ -96,32 +84,26 @@ You can apply transformations to the query results. Refer to our transformations
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### List Tables
 
 Returns an array of table names associated with the current account and endpoint. The output from *List Tables* is paginated, with each page returning a maximum of 100 table names.
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/listtables-v2.png" alt="ToolJet - DynamoDB operations" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/dynamodb/listtables-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Get Item
 
 Retrieves a single item from a table. You must specify the primary key for the item that you want. You can retrieve the entire item, or just a subset of its attributes.
 
-**Required parameters:**
+#### Required Parameter
 
 - **Table**
 - **Key name**
 
-Syntax for Key name:
+#### Example
 
 ```json
 {
@@ -137,25 +119,21 @@ Syntax for Key name:
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/getitem-v2.png" alt="ToolJet - DynamoDB operations" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/dynamodb/getitem-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Query Table
 
 Retrieves all items that have a specific partition key. You must specify the partition key value. You can retrieve entire items, or just a subset of their attributes. Optionally, you can apply a condition to the sort key values so that you only retrieve a subset of the data that has the same partition key. You can use this operation on a table, provided that the table has both a partition key and a sort key. You can also use this operation on an index, provided that the index has both a partition key and a sort key.
 
-**Required parameters:**
+#### Required Parameter
 
 - **Query condition**
 
-Syntax for Query condition:
+#### Example
 
-```json
+```yaml
 {
   "TableName": "Reply",
   "IndexName": "PostedBy-Index",
@@ -174,50 +152,44 @@ Syntax for Query condition:
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/querytable-v2.png" alt="ToolJet - DynamoDB operations" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/dynamodb/querytable-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Scan Table
 
 Retrieves all items in the specified table or index. You can retrieve entire items, or just a subset of their attributes. Optionally, you can apply a filtering condition to return only the values that you are interested in and discard the rest.
 
-**Required parameters:**
+#### Required Parameter
 
 - **Scan condition**
 
-Syntax for Scan condition:
+#### Example
 
-```json
-{ "TableName": "<table_name>" }
+```yaml
+{
+  "TableName": "<table_name>"
+}
 ```
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/scantable-v2.png" alt="ToolJet - DynamoDB operations" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/dynamodb/scantable-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Delete Item
 
 Deletes a single item from a table. You must specify the primary key for the item that you want to delete.
 
-**Required parameters:**
+#### Required Parameter
 
 - **Table**
 - **Key name**
 
-Syntax for Key name:
+#### Example
 
-```json
+```yaml
 {
   "Key": {
     "ForumName": {
@@ -234,25 +206,21 @@ Syntax for Key name:
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/deleteitem-v2.png" alt="ToolJet - DynamoDB operations" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/dynamodb/deleteitem-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Update Item
 
 Update an item in DynamoDB by specifying the primary key and providing new attribute values. If the primary key does not exist in the table then instead of updating it will insert a new row.
 
-**Required parameters:**
+#### Required Parameter
 
 - **Update Condition**
 
-Syntax for Update Condition:
+#### Example
 
-```json
+```yaml
 {
   "TableName": "USER_DETAILS_with_local",
   "Key": {
@@ -269,43 +237,35 @@ Syntax for Update Condition:
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/updateitem-v2.png" alt="ToolJet - DynamoDB operations" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/dynamodb/updateitem-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Describe Table
 
 This operation in DynamoDB retrieves metadata and configuration details about a specific table. It provides information such as the table's name, primary key schema, provisioned throughput settings, and any secondary indexes defined on the table.
 
-**Required parameters:**
+#### Required Parameter
 
 - **Table**
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/describetable-v2.png" alt="ToolJet - DynamoDB operations" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/dynamodb/describetable-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Create Table
 
 This operation in DynamoDB enables you to create a new table by specifying its name, primary key schema, and optional configurations.
 
-**Required parameters:**
+#### Required Parameter
 
 - **Table Parameters**
 
-Syntax for Table Parameters:
+#### Example
 
-```json
+```yaml
 {
   "AttributeDefinitions": [
     {
@@ -354,25 +314,21 @@ Syntax for Table Parameters:
 
 <div style={{textAlign: 'center'}}>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/createtable-v2.png" alt="ToolJet - DynamoDB operations" />
+<img style={{ border:'0'}} className="screenshot-full" src="/img/datasource-reference/dynamodb/createtable-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Put Item
 
 This operation allows you to create or replace an item in a table. It enables you to specify the table name, provide the attribute values for the new item, and define the primary key attributes to uniquely identify the item.
 
-**Required parameters:**
+#### Required Parameter
 
 - **New Item Details**
 
-Syntax for New Item Details:
+#### Example
 
-```json
+```yaml
 {
   "TableName": "USER_DETAILS_with_localS",
   "Item": {
@@ -389,5 +345,3 @@ Syntax for New Item Details:
 <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/dynamodb/putitem-v2.png" alt="ToolJet - DynamoDB operations" />
 
 </div>
-
-</div>

docs/docs/data-sources/elasticsearch.md

@@ -1,80 +1,482 @@
 ---
-id: elasticsearch
+id: elasticsearch  
 title: Elasticsearch
 ---
 
-# Elasticsearch
-ToolJet can connect to your Elasticsearch cluster to read and write data.
+ToolJet allows you to connect to your Elasticsearch cluster to perform data read/write operations and execute various queries.
 
-## Connection 
-Please make sure the host/IP of the Elasticsearch cluster is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist our IP**.
+## Connection
 
-To establish a connection with the ElasticSearch data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+To connect to an Elasticsearch data source in ToolJet, you can either click the **+ Add new data source** button on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page in the ToolJet dashboard.
 
-ToolJet requires the following to connect to your Elasticsearch cluster: 
+:::info
+Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP.
+:::
+
+To connect to your Elasticsearch cluster, the following details are required:
 - **Host**
 - **Port**
 - **Username**
 - **Password**
 
 <div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/connect.png" alt="Elastic connect" />
-
-
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/connect-v2.png" alt="Elastic Connect" />
 </div>
 
-Elastic search data source is also providing an option for connecting services with ssl certificates. 
-- You can either use CA / Client certificates option. 
-  
-<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/ssl.png" alt="Elastic ssl" />
-
-
-
-## Querying Elasticsearch 
-
-Click on `+` button of the query manager at the bottom panel of the editor and select the Elasticsearch added in the previous step as the data source. 
-Select the operation that you want to perform on your Elasticsearch cluster and click `Create` to save the query. 
+ToolJet also supports SSL certificate-based connections:
+- You can use either CA or Client certificates.
 
 <div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/ssl-v2.png" alt="Elastic SSL Connect" />
+</div>
 
-<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/query.png" alt="Elastic query" />
+<div style={{paddingTop:'24px'}}>
 
+## Querying Elasticsearch
+
+1. Click the **+ Add** button in the query manager at the bottom of the editor and select the Elasticsearch data source added earlier.
+2. Choose the operation you want to perform on your Elasticsearch cluster.
+
+:::tip
+Query results can be transformed using transformations. Refer to our transformations documentation for more details: **[link](/docs/tutorial/transformations)**
+:::
 
 </div>
 
-:::tip
-Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
-:::
+<div style={{paddingTop:'24px'}}>
 
-## Supported operations
+## Supported Operations
 
-#### Search
+ToolJet supports the following Elasticsearch operations:
 
-This operation allows you to execute a search query and get back search hits that match the query. Read the Elasticsearch's `Search` guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-search.html)**.
+- **[Search](#search)**
+- **[Index a Document](#index-a-document)**
+- **[Get a Document](#get-a-document)**
+- **[Update a Document](#update-a-document)**
+- **[Delete a Document](#delete-a-document)**
+- **[Bulk Operation](#bulk-operation)**
+- **[Count Documents](#count-documents)**
+- **[Check Document Existence](#check-document-existence)**
+- **[Multi Get](#multi-get)**
+- **[Scroll Search](#scroll-search)**
+- **[Clear Scroll](#clear-scroll)**
+- **[Get Cat Indices](#get-cat-indices)**
+- **[Get Cluster Health](#get-cluster-health)**
 
+### Search
 
-<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/elastic-search.png" alt="Elastic search" />
+This operation executes a search query and returns matching search hits. For more details, see the Elasticsearch search guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-search.html)**.
 
-#### Index a document
+#### Required Parameter
+- **Index**: The name of the index to search in.
+- **Query**: The search query in JSON format.
 
-This operation allows you to add a JSON document to the specified data stream or index. Read the Elasticsearch's `Index` guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-index_.html)**.
+#### Optional Parameter
+- **Scroll**: Scroll time.
 
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/elastic-search-v2.png" alt="Elastic search" style={{marginBottom:'15px'}} />
+</div>
 
-<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/index.png" alt="Elastic index"/>
+#### Example:
+```yaml
+Index: books
+Query:
+  {
+    "query": {
+      "match": {
+        "title": "The Great Gatsby"
+      }
+    },
+    "size": 20
+  }
+Scroll: 1m # Can be in the format of 1m, 1h, 1d.
+```
 
+### Index a Document
 
-#### Get a document
+This operation adds a JSON document to the specified index or data stream. For more details, see the Elasticsearch index guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-index_.html)**.
 
-This operation allows you to retrieve the specified JSON document from the index. Read the Elasticsearch's `Get` guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-get.html)**.
+#### Required Parameter
+- **Index**: The name of the index to add the document to
+- **Body**: The document body in JSON format
 
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/index-v2.png" alt="Elastic index" style={{marginBottom:'15px'}}/>
+</div>
 
-<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/get.png"  alt="Elastic get"/>
+#### Example:
+```yaml
+Index: books
+Body:
+  {
+    "title": "1984",
+    "author": "George Orwell",
+    "year": 1949,
+    "genre": "Dystopian Fiction"
+  }
+```
 
+### Get a Document
 
-#### Update a document
+This operation retrieves the specified JSON document from the index. For more details, see the Elasticsearch get guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-get.html)**.
 
-This operation allows to update a document using the specified script. Read the Elasticsearch's `Update` guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-update.html)**.
+#### Required Parameter
+- **Index**: The name of the index to get the document from
+- **Id**: The ID of the document to retrieve
 
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/get-v2.png"  alt="Elastic get" style={{marginBottom:'15px'}}/>
+</div>
 
-<img className="screenshot-full" src="/img/datasource-reference/elasticsearch/update.png" alt="Elastic update" />
+#### Example:
+```yaml
+Index: books
+Id: FJXTSZEBsuzUn2y4wZ-W
+```
+
+### Update a Document
+
+This operation updates a document using the specified script. For more details, see the Elasticsearch update guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-update.html)**.
+
+#### Required Parameter
+- **Index**: The name of the index containing the document
+- **Id**: The ID of the document to update
+- **Body**: The update script or partial document in JSON format
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/update-v2.png" alt="Elastic update" style={{marginBottom:'15px'}}/>
+</div>
+
+#### Example:
+```yaml
+Index: books
+Id: FJXTSZEBsuzUn2y4wZ-W
+Body:
+{
+  "doc": {
+    "title": "1984",
+    "author": "George Orwell",
+    "year": 1949,
+    "genre": "Fiction"
+  }
+}
+```
+
+### Delete a Document
+
+This operation removes a JSON document from the specified index. For more details, see the Elasticsearch delete guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-delete.html)**.
+
+#### Required Parameter
+- **Index**: The name of the index containing the document
+- **Id**: The ID of the document to delete
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/delete.png" alt="Elastic delete" style={{marginBottom:'15px'}}/>
+</div>
+
+#### Example:
+```yaml
+Index: books
+Id: FJXTSZEBsuzUn2y4wZ-W
+```
+
+### Bulk Operation
+
+This operation performs multiple index/update/delete operations in a single API call. For more details, see the Elasticsearch bulk guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-bulk.html)**.
+
+#### Required Parameter
+- **Operations**: The bulk operations to perform in JSON format
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/bulk.png" alt="Elastic bulk" style={{marginBottom:'15px'}}/>
+</div>
+
+#### Example:
+```yaml
+[
+  { "index": { "_index": "books", "_id": "book1" } },
+  {
+    "title": "The Great Gatsby",
+    "author": "F. Scott Fitzgerald",
+    "year": 1925
+  },
+  { "delete": { "_index": "books", "_id": "book2" } },
+  { "index": { "_index": "books", "_id": "book3" } },
+  {
+    "title": "Moby-Dick",
+    "author": "Herman Melville",
+    "year": 1851
+  },
+  { "delete": { "_index": "books", "_id": "book4" } }
+]
+```
+
+### Count Documents
+
+This operation returns the number of matches for a search query. For more details, see the Elasticsearch count guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-count.html)**.
+
+#### Required Parameter
+- **Index**: The name of the index to count documents in.
+
+#### Optional Parameter
+- **Query**: The query to filter documents in JSON format
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/count.png" alt="Elastic count" style={{marginBottom:'15px'}}/>
+</div>
+
+#### Example:
+```yaml
+{
+  "query": {
+    "range": {
+      "timestamp": {
+        "gte": 1901
+      }
+    }
+  }
+}
+```
+
+### Check Document Existence
+
+This operation checks if a document exists in an index. For more details, see the Elasticsearch exists guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-get.html#docs-get-api-response-codes)**.
+
+#### Required Parameter:
+- **Index**: The name of the index to check for document existence
+- **Id**: The ID of the document to check
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/exists.png" alt="Elastic exists" style={{marginBottom:'15px'}}/>
+</div>
+
+#### Example:
+```yaml
+Index: books
+Id: FJXTSZEBsuzUn2y4wZ-W
+```
+
+### Multi Get
+
+This operation retrieves multiple documents in a single request. For more details, see the Elasticsearch multi-get guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/docs-multi-get.html)**.
+
+#### Required Parameter
+- **Operations**: The multi-get operations to perform in JSON format
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/mget.png" alt="Elastic multi get" style={{marginBottom:'15px'}}/>
+</div>
+
+#### Example:
+```yaml
+{
+  "docs": [
+    { "_index": "books", "_id": "book124" },
+    { "_index": "books", "_id": "book125" }
+  ]
+}
+```
+
+### Scroll Search
+
+This operation retrieves large numbers of results from a single search request. For more details, see the Elasticsearch scroll guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/paginate-search-results.html#scroll-search-results)**.
+
+#### Required Parameter
+- **Scroll ID**: The scroll ID for the search
+- **Scroll**: The scroll time
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/scroll-search.png" alt="Elastic scroll" style={{marginBottom:'15px'}}/>
+</div>
+
+#### Example:
+```yaml
+Scroll ID: DXF1ZXJ5QW5kRmV0Y2gBAAAAAAAAOWQWYm9vbDItY1NCOUExal9TcTBjeUEyZw
+Scroll: 60m
+```
+
+### Clear Scroll
+
+This operation clears the search context for a scroll. For more details, see the Elasticsearch clear scroll guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/clear-scroll-api.html)**.
+
+#### Required Parameter
+- **Scroll ID**: The scroll ID to clear
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/clear-scroll.png" alt="Elastic clear scroll" style={{marginBottom:'15px'}}/>
+</div>
+
+#### Example:
+```yaml
+Scroll ID: DXF1ZXJ5QW5kRmV0Y2gBAAAAAAAAOWQWYm9vbDItY1NCOUExal9TcTBjeUEyZw
+```
+
+### Get Cat Indices
+
+This operation provides a compact, column-aligned view of indices in a cluster. For more details, see the Elasticsearch cat indices guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/cat-indices.html)**.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/cat-indices.png" alt="Elastic cat indices" />
+</div>
+
+  <details>
+  <summary>**Response Example**</summary>
+```json
+{
+  "body": [
+    {
+      "health": "yellow",
+      "status": "open",
+      "index": "1",
+      "uuid": "JQOzqxK7Rdar7ROOlqXwkA",
+      "pri": "1",
+      "rep": "1",
+      "docs.count": "2",
+      "docs.deleted": "0",
+      "store.size": "9.2kb",
+      "pri.store.size": "9.2kb"
+    },
+    {
+      "health": "yellow",
+      "status": "open",
+      "index": "recipes",
+      "uuid": "eNGdAsG4TMWvs9f0eLERlQ",
+      "pri": "1",
+      "rep": "1",
+      "docs.count": "20",
+      "docs.deleted": "0",
+      "store.size": "30kb",
+      "pri.store.size": "30kb"
+    },
+    {
+      "health": "yellow",
+      "status": "open",
+      "index": "read_me",
+      "uuid": "EbE4V-5RRE2y-_P4z_auVQ",
+      "pri": "1",
+      "rep": "1",
+      "docs.count": "1",
+      "docs.deleted": "0",
+      "store.size": "5.1kb",
+      "pri.store.size": "5.1kb"
+    }
+  ],
+  "statusCode": 200,
+  "headers": {
+    "x-elastic-product": "Elasticsearch",
+    "content-type": "application/json",
+    "content-length": "558"
+  },
+  "meta": {
+    "context": null,
+    "request": {
+      "params": {
+        "method": "GET",
+        "path": "/_cat/indices",
+        "body": null,
+        "querystring": "format=json",
+        "headers": {
+          "user-agent": "opensearch-js/1.2.0 (linux 6.5.0-1021-aws-x64; Node.js v18.18.2)"
+        },
+        "timeout": 30000
+      },
+      "options": {},
+      "id": 1
+    },
+    "name": "opensearch-js",
+    "connection": {
+      "url": "http://xx.2xx.183.199:9200/",
+      "id": "http://xx.2xx.183.199:9200/",
+      "headers": {},
+      "deadCount": 0,
+      "resurrectTimeout": 0,
+      "_openRequests": 0,
+      "status": "alive",
+      "roles": {
+        "master": true,
+        "data": true,
+        "ingest": true
+      }
+    },
+    "attempts": 0,
+    "aborted": false
+  }
+}
+```
+</details>
+
+### Get Cluster Health
+
+This operation retrieves the status of the cluster’s health. For more details, see the Elasticsearch cluster health guide **[here](https://www.elastic.co/guide/en/elasticsearch/reference/current/cluster-health.html)**.
+
+<div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/datasource-reference/elasticsearch/cluster-health.png" alt="Elastic cluster health" />
+</div>
+
+  <details>
+  <summary>**Response Example**</summary>
+```json
+{
+  "body": {
+    "cluster_name": "docker-cluster",
+    "status": "yellow",
+    "timed_out": false,
+    "number_of_nodes": 1,
+    "number_of_data_nodes": 1,
+    "active_primary_shards": 10,
+    "active_shards": 10,
+    "relocating_shards": 0,
+    "initializing_shards": 0,
+    "unassigned_shards": 3,
+    "delayed_unassigned_shards": 0,
+    "number_of_pending_tasks": 0,
+    "number_of_in_flight_fetch": 0,
+    "task_max_waiting_in_queue_millis": 0,
+    "active_shards_percent_as_number": 76.92307692307693
+  },
+  "statusCode": 200,
+  "headers": {
+    "x-elastic-product": "Elasticsearch",
+    "content-type": "application/json",
+    "content-length": "405"
+  },
+  "meta": {
+    "context": null,
+    "request": {
+      "params": {
+        "method": "GET",
+        "path": "/_cluster/health",
+        "body": null,
+        "querystring": "",
+        "headers": {
+          "user-agent": "opensearch-js/1.2.0 (linux 6.5.0-1021-aws-x64; Node.js v18.18.2)"
+        },
+        "timeout": 30000
+      },
+      "options": {},
+      "id": 1
+    },
+    "name": "opensearch-js",
+    "connection": {
+      "url": "http://xx.2xx.183.199:9200/",
+      "id": "http://xx.2xx.183.199:9200/",
+      "headers": {},
+      "deadCount": 0,
+      "resurrectTimeout": 0,
+      "_openRequests": 0,
+      "status": "alive",
+      "roles": {
+        "master": true,
+        "data": true,
+        "ingest": true
+      }
+    },
+    "attempts": 0,
+    "aborted": false
+  }
+}
+```
+</details>
+
+</div>

docs/docs/data-sources/firestore.md

@@ -3,44 +3,33 @@ id: firestore
 title: Cloud Firestore
 ---
 
-<div style={{paddingBottom:'24px'}}>
-
 ToolJet can connect to **Cloud Firestore** databases to read and write data.
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection 
 
-- ToolJet connects to your **Cloud Firestore** using JSON key of your GCP service account. Get your service account key as JSON from GCP console. For generating a new key, check out **[Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console)**.
+To establish a connection with the **Cloud Firestore** data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose Cloud Firestore as the data source.
 
-- Once you have the key, open it in a text editor and copy the contents. Paste the contents in the **Private key** field of the Firestore data source modal.
+ToolJet requires the following to connect to your BigQuery:
+- **Private key**
 
-- Click on the **Test Connection** button to verify if the key is valid. Click on the **Save** button to save the data source.
+For generating a private key check out **[Firestore's official documentation](https://cloud.google.com/iam/docs/creating-managing-service-account-keys#iam-service-account-keys-create-console)**.
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/add-ds-firestore-v2.png"  alt="firestore add ds"/>
+<img className="screenshot-full" src="/img/datasource-reference/firestore/add-ds-firestore-v2.png"  alt="firestore add ds"/>
 
 </div>
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Querying Firestore 
 
-Click on the **+Add** button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. 
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Cloud Firestore** datasource added in previous step.
+3. Select the desired operation from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/firestore-query-v2.png" alt="firestore QUERY" />
-
-</div>
-
-
-Select the operation that you want to perform from the **Operation** dropdown and click on the **Run** button to run the query.
+<img className="screenshot-full" src="/img/datasource-reference/firestore/firestore-query-v2.png" alt="firestore QUERY" />
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
@@ -48,7 +37,7 @@ Query results can be transformed using transformations. Read our transformations
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Supported Operations
 - **[Get Document](#get-document)**
@@ -56,65 +45,47 @@ Query results can be transformed using transformations. Read our transformations
 - **[Add Document to Collection](#add-document-to-collection)** 
 - **[Update Document](#update-document)** 
 - **[Set Document](#set-document)**
-- **[Bulk update using document id](#bulk-update-using-document-id)**
+- **[Bulk update using document ID](#bulk-update-using-document-id)**
 - **[Delete Document](#delete-document)**
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
 ### Get Document
 
 Use this operation to get the data in a document.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Path**: Enter the path of the document. Path format: `collection name/document id`. Example: `books/23e2wsds32`
+- **Path**
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/firestore/get-v2.png" alt="firestore get" style={{marginBottom:'15px'}}/>
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/get-v2.png" alt="firestore get" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Query collection
+### Query Collection
 
 Use this operation to query all the documents in a collection. Check firestore doc **[here](https://firebase.google.com/docs/reference/js/v8/firebase.database.Query)**.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Path**: Enter the name of the collection to be queried. Example: `books`
+- **Path**
 
-#### Optional parameters:
+#### Optional parameters
 
-- **Order type**: Select ascending or descending from the dropdown.
-- **Limit**: Maximum number of documents to return in response. By default will return maximum 25 results. Maximum of 100 results allowed per request. The Limit value should be of integer type.
-- **Field, Operator, and Value**: For filtering the results, you can enter a document field name, use appropriate operator from the dropdown and set a value.
+- **Order type**
+- **Limit**
+- **Field**
+- **Operator**
+- **Value**
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/query-collection-v2.png" alt="firestore collection"/>
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img className="screenshot-full" src="/img/datasource-reference/firestore/query-collection-v2.png" alt="firestore collection" style={{marginBottom:'15px'}}/>
 
 ### Add Document to Collection
 
 Use this operation for creating a new document in a collection.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Collection**: Enter the path of the document in a collection. Path format: `collection name/document id`. ex: `books/33243dwe2332`
-- **Body**: Enter the field names and their values in JSON form. 
+- **Collection**
+- **Body**. 
 
-**Example body:**
+#### Example
 ```json
 {
 "Author": "Shubh",
@@ -122,26 +93,18 @@ Use this operation for creating a new document in a collection.
 }
 ```
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/add-document-v2.png" alt="firestore document" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img style={{marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/add-document-v2.png" alt="firestore document" />
 
 ### Update Document
 
 Use this operation for updating the existing document in a collection. Also, it only updates fields if they exist, but doesn't replace an entire object like **[set operation](#set-document)**.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Path**: Enter the path of the document in a collection. Path format: `collection name/document id`. Example: `books/33243dwe2332`
-- **Body**: Enter the field names and their values in JSON form. 
+- **Path**
+- **Body**
 
-**Example body:**
+#### Example
 ```json
 {
 "Author": "Shubhendra",
@@ -149,26 +112,18 @@ Use this operation for updating the existing document in a collection. Also, it
 }
 ```
 
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/update-v2.png" alt="firestore update" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/update-v2.png" alt="firestore update" />
 
 ### Set Document
 
 This operation replaces your chosen object with the value that you provide. So if your object has 5 fields, and you use Set operation and pass object with 3 fields, it will now have 3 fields.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Path**: Enter the path of the document in a collection. Path format: `collection name/document id`. Example: `books/33243dwe2332`
-- **Body**: Enter the field names and their values in JSON form. 
+- **Path**
+- **Body** 
 
-**Example body:**
+#### Example
 ```json
 {
 "Author": "Shefewfbh",
@@ -176,51 +131,29 @@ This operation replaces your chosen object with the value that you provide. So i
 }
 ```
 
-<div style={{textAlign: 'center'}}>
+<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/set-v2.png" alt="firestore set" />
 
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/set-v2.png" alt="firestore set" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Bulk update using document id
+### Bulk Update Using Document ID
 
 Use this operation for bulk updating documents.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Collection**: Enter the path of the document in a collection. Path format: `collection name/document id`. ex: `books/33243dwe2332`
-- **Key for document ID**: Enter the document ID key used in your Firestore collection that identifies each document uniquely.
-- **Records**: Specifies the number of records (documents) that you plan to update in this operation.
+- **Collection**
+- **Key for document ID**
+- **Records**
 
-
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/bulk-v2.png" alt="firestore bulk" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/bulk-v2.png" alt="firestore bulk" />
 
 ### Delete Document
 
 Use this operation for deleting a document in a collection.
 
-#### Required parameters:
+#### Required Parameters
 
-- **Path**: Enter the path of the document to be deleted in a collection. Path format: `collection name/document id`. ex: `books/33243dwe2332`
-
-<div style={{textAlign: 'center'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/delete-v2.png" alt="firestore delete"/>
-
-</div>
+- **Path**
 
+<img style={{ marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/firestore/delete-v2.png" alt="firestore delete"/>
 
 </div>
 

docs/docs/data-sources/gcs.md

@@ -3,38 +3,115 @@ id: gcs
 title: Google Cloud Storage
 ---
 
-# Google Cloud Storage
-
 ToolJet can connect to GCS buckets and perform various operation on them.
 
-## Supported operations
-
-- **Read file**
-- **Upload file**
-- **List buckets**
-- **List files in a bucket**
-- **Signed url for download**
-- **Signed url for upload**
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To establish a connection with the Google Cloud Storage data source, you can either click on the `+Add new data source` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+To establish a connection with the Google Cloud Storage data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
-To connect to GCS, you need to provide the JSON Private Key of a service account that has access to the bucket. You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started.
+ToolJet requires the following to connect to a GCS datasource:
+- **JSON Private Key** 
 
-<img className="screenshot-full" src="/img/datasource-reference/gcs-connect.png"  alt="gcs connection" />
+You can follow the [google documentation](https://cloud.google.com/docs/authentication/getting-started) to get started.
 
-Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
+<img className="screenshot-full" src="/img/datasource-reference/gcs/gcs-connect-v2.png"  alt="gcs connection" />
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
 
 ## Querying GCS
 
-Click on `+` button of the **query manager** at the bottom panel of the editor and select the data source added in the previous step as the data source. Select the operation that you want to perform and click **Save** to save the query.
-
-<img className="screenshot-full" src="/img/datasource-reference/gcs-query.png" alt="gcs query" />
-
-Click on the **run** button to run the query. 
-**NOTE**: Query should be saved before running.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **GCS** datasource added in previous step.
+3. Select the Operation.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
 :::
+
+#### Supported operations
+
+- **[Read file](#read-file)**
+- **[Upload file](#uplodad-file)**
+- **[List buckets](#list-buckets)**
+- **[List files in a bucket](#list-files-in-a-bucket)**
+- **[Signed url for download](#signed-url-for-download)**
+- **[Signed url for upload](#signed-url-for-upload)**
+
+<img className="screenshot-full" src="/img/datasource-reference/gcs/gcs-query-v2.png" alt="gcs query" style={{marginBottom:'15px'}} />
+
+### Read File
+
+Reads the content of a file from GCS.
+
+#### Required Parameter
+- **Bucket**
+- **File Name**
+
+<img className="screenshot-full" src="/img/datasource-reference/gcs/readFile.png" alt="gcs query" style={{marginBottom:'15px'}} />
+
+### Uplodad File
+
+Uploads a file to GCS.
+
+#### Required Parameter
+- **Bucket**
+- **File name**
+- **Upload data**
+
+#### Optional Parameter
+- **Content Type**
+- **Encoding**
+
+<img className="screenshot-full" src="/img/datasource-reference/gcs/uploadFile.png" alt="gcs query" style={{marginBottom:'15px'}} />
+
+### List Buckets
+
+Retrieves a list of available buckets.
+
+<img className="screenshot-full" src="/img/datasource-reference/gcs/listBuckets.png" alt="gcs query" style={{marginBottom:'15px'}} />
+
+### List Files in a Bucket
+
+Lists files within a specific GCS bucket.
+
+#### Required Parameter
+- **Bucket**
+
+#### Optional Parameter
+- **Prefix**
+
+<img className="screenshot-full" src="/img/datasource-reference/gcs/listFiles.png" alt="gcs query" style={{marginBottom:'15px'}} />
+
+### Signed URL for Download
+
+Generates a signed URL for downloading a file.
+
+#### Required Parameter
+- **Bucket**
+- **File Name**
+
+#### Optional Parameter
+- **Expires in**
+
+<img className="screenshot-full" src="/img/datasource-reference/gcs/urlDownload.png" alt="gcs query" style={{marginBottom:'15px'}} />
+
+### Signed URL for Upload
+
+Generates a signed URL for uploading a file.
+
+#### Required Parameter
+- **Bucket**
+- **File name**
+
+#### Optional Parameter
+- **Expires in**
+- **Content Type**
+
+<img className="screenshot-full" src="/img/datasource-reference/gcs/urlUpload.png" alt="gcs query" style={{marginBottom:'15px'}} />
+
+</div>

docs/docs/data-sources/google.sheets.md

@@ -3,24 +3,28 @@ id: google.sheets
 title: Google Sheets
 ---
 
-# Google Sheets
-
 ToolJet has the capability to establish a connection with Google Sheet for both reading and writing data. By utilizing OAuth 2.0, ToolJet can establish a secure connection with Google Sheet, ensuring that the application's access to a user's account is restricted and limited appropriately.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Self-Hosted Configuration
 
 If you decide to self-host ToolJet, there are a few additional steps you need to take:
 
 1. Proceed with the setup steps provided in the [Google OAuth 2.0 guide](/docs/setup/env-vars#google-oauth--optional-) to configure the necessary settings.
 2. Assign the corresponding values obtained from the previous step to the following environment variables:
-   - `GOOGLE_CLIENT_ID`
-   - `GOOGLE_CLIENT_SECRET`
-   - `TOOLJET_HOST`
+   - **GOOGLE_CLIENT_ID**
+   - **GOOGLE_CLIENT_SECRET**
+   - **TOOLJET_HOST**
 3. Activate the Google Sheets API within the Google Cloud Platform (GCP) console.
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To establish a connection with Google Sheet, you have two options. First, you can click on the **+Add new global datasource** button found on the query panel. Alternatively, you can go to the **[Global Datasources](/docs/data-sources/overview)** page within the ToolJet dashboard.
+To establish a connection with the Google Sheet datasource, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 ### Authorization Scopes
 
@@ -35,100 +39,154 @@ When connecting to a Google Sheets datasource, you can choose between two permis
 
 </div>
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Querying Google Sheet
 
-To perform operations on a Google Sheet, click the `+Add` button in the query manager located at the bottom panel of the app builder. Select the Google Sheet datasource under the Global datasource section. Choose the desired operation from the dropdown and click **Save** to save the query.
+1. Click the **+ Add** button in the query manager located at the bottom panel of the editor. 
+2. Select the **Google Sheet** datasource under the datasource section.
+3. Choose the desired operation from the dropdown.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
 
 Using Google sheets data source you can perform several operations from your applications like:
 
-  1. **[Read data from a sheet](/docs/data-sources/google.sheets#read-data-from-a-sheet)**
-  2. **[Append data to a sheet](/docs/data-sources/google.sheets#append-data-to-a-sheet)**
-  3. **[Update single row of a sheet](/docs/data-sources/google.sheets#update-single-row-of-a-sheet)**
-  4. **[Delete row from a sheet](/docs/data-sources/google.sheets#delete-row-from-a-sheet)**
-  5. **[Get spreadsheet info](/docs/data-sources/google.sheets#get-spreadsheet-info)**
+  1. **[Read data from a spreadsheet](#read-data-from-a-spreadsheet)**
+  2. **[Append data to a spreadsheet](#append-data-to-a-spreadsheet)**
+  3. **[Update single row of a spreadsheet](#update-single-row-of-a-spreadsheet)**
+  4. **[Delete row from a spreadsheet](#delete-row-from-a-spreadsheet)**
+  5. **[Get spreadsheet info](#get-spreadsheet-info)**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/google-sheets/operations.png" alt="Google Sheet Operations" />
+<img className="screenshot-full" src="/img/datasource-reference/google-sheets/operations-v2.png" alt="Google Sheet Operations" style={{marginBottom:'15px'}} />
 
 </div>
 
-### Read data from a sheet
+:::info
+**Spreadsheet ID** can be obtained from the URL of the spreadsheet. For example, in the URL `https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=0`, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` represents the spreadsheet ID.
+:::
+
+### Read Data From a Spreadsheet
 
 This operation allows you to retrieve the table data from a spreadsheet in the form of a JSON object.
 
-| Fields      | description |
-| ----------- | ----------- |
-| Spreadsheet ID | Entering the spreadsheet ID is required and can be obtained from the URL of the spreadsheet. For example, in the URL `https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=0`, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` represents the spreadsheet ID. |
-| Range | This is optional. You can specify the range of cells in this field. If left empty, it will select the range `A1:Z500`. |
-| Sheet | This is optional. You can specify `sheet name` if it has more than 1 sheets, else it will automatically choose the first sheet. |
+#### Required Parameter
+- **Spreadsheet ID**
+
+#### Optional Parameter
+- **Range**
+- **Sheet**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/google-sheets/read-data-op.png" alt="Google Sheet Operations" />
+<img className="screenshot-full" src="/img/datasource-reference/google-sheets/read-data-op-v2.png" alt="Google Sheet Operations" style={{marginBottom:'15px'}} />
 
 </div>
 
-### Append data to a sheet
+### Append Data to a Spreadsheet
 
 Add additional rows to a table by using the append operation.
 
-| Fields      | description |
-| ----------- | ----------- |
-| Spreadsheet ID | Entering the spreadsheet ID is required and can be obtained from the URL of the spreadsheet. For example, in the URL `https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=0`, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` represents the spreadsheet ID. |
-| Sheet | This is optional. You can specify `sheet name` if it has more than 1 sheets, else it will automatically choose the first sheet. |
-| Rows  | To input row data, use the JSON array format where each object represents a single row. Here's an example: **`[ {"name":"John", "email":"John@tooljet.com"},{...},{...} ]`**. Within each object, the `key` corresponds to the **column name**, and the `value` represents the **cell data**.|
+#### Required Parameter
+- **Spreadsheet ID**
+- **Rows**
+
+#### Optional Parameter
+- **Sheet**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/google-sheets/append-data-op.png" alt="Google Sheet Operations" />
+<img className="screenshot-full" src="/img/datasource-reference/google-sheets/append-data-op-v2.png" alt="Google Sheet Operations" style={{marginBottom:'15px'}} />
 
 </div>
 
-### Update single row of a sheet
+#### Example
+```yaml
+[
+  {
+    "name": "John",
+    "email": "john@tooljet.com",
+    "date": "2024-09-16",
+    "status": "Confirmed",
+    "phone": "+123456789"
+  },
+  {
+    "name": "Jane",
+    "email": "jane@tooljet.com",
+    "date": "2024-09-17",
+    "status": "Pending",
+    "phone": "+987654321"
+  },
+  {
+    "name": "Doe",
+    "email": "doe@tooljet.com",
+    "date": "2024-09-18",
+    "status": "Cancelled",
+    "phone": "+112233445"
+  }
+]
+```
+
+### Update Single Row of a Spreadsheet
 
 This operation allows you to update existing data in a sheet.
 
-| Fields      | description |
-| ----------- | ----------- |
-| Spreadsheet ID | Entering the spreadsheet ID is required and can be obtained from the URL of the spreadsheet. For example, in the URL `https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=0`, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` represents the spreadsheet ID. |
-| Range | This is optional. You can specify the range of cells in this field. If left empty, it will select the range `A1:Z500`. |
-| Sheet | This is optional. You can specify `sheet name` if it has more than 1 sheets, else it will automatically choose the first sheet. |
-| Where | Specify the column name, such as `id`, to identify the row you want to update. |
-| Operator | Select the `===` operator to perform an equality check. |
-| Value | Enter the desired value for the `id`, which you want to update. |
-| Rows | Enter the row data in the following format: **`{{({id: components.textinput4.value, company: components.textinput1.value, position: components.textinput2.value, url: components.textinput3.value, 'date-applied': components.datepicker1.value, status: components.dropdown1.value})}}`**. This example shows how to structure the row data, where each key represents a column name and its corresponding value is retrieved from the associated component. |
+#### Required Parameters
+- **Spreadsheet ID**
+- **Where**
+- **Operator**
+- **Value**
+- **Body**
+
+#### Optional Parameters
+- **Range**
+- **Sheet**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/google-sheets/upd.png" alt="Google Sheet Operations" />
+<img className="screenshot-full" src="/img/datasource-reference/google-sheets/upd-v2.png" alt="Google Sheet Operations" />
 
 </div>
 
-### Delete row from a sheet
+#### Example
+```yaml
+{
+  "id": "456",
+  "company": "ABC Tech Solutions",
+  "position": "Product Manager",
+  "url": "https://abctech.com/careers",
+  "date-applied": "2024-09-10",
+  "status": "Application Under Review"
+}
+```
+
+### Delete Row From a Spreadsheet
 
 This operation allows you to delete a specific row from the sheet.
 
-| Fields      | description |
-| ----------- | ----------- |
-| Spreadsheet ID | Entering the spreadsheet ID is mandatory. You can find the spreadsheet ID in the URL of the spreadsheet. For example, in the URL `https://docs.google.com/spreadsheets/d/1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM/edit#gid=23456`, the `1W2S4re7zNaPk9vqv6_CqOpPdm_mDEqmLmzjVe7Nb9WM` is the spreadsheet ID. |
-| GID | The GID is located at the end of the spreadsheet URL. In the provided example, the GID is `23456`. |
-| Delete Row Number | Simply enter the row number that you wish to delete. |
+#### Required Parameter
+- **Spreadsheet ID**
+- **Delete row number**
+
+#### Optional Parameter
+- **GID**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/google-sheets/del.png" alt="google sheets delete"/>
+<img className="screenshot-full" src="/img/datasource-reference/google-sheets/del-v2.png" alt="google sheets delete" style={{marginBottom:'15px'}} />
 
 </div>
 
-### Get spreadsheet info
+### Get Spreadsheet Info
 
-The "Get spreadsheet info" operation allows you to retrieve basic information about the spreadsheet, including the number of sheets, theme, time zone, format, and URL, among others.
-
-Here is a preview of the query that utilizes the "Get spreadsheet info" operation.
+This operation allows you to retrieve basic information about the spreadsheet, including the number of sheets, theme, time zone, format, and URL, among others.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/google-sheets/infoo.png" alt="google sheets get info" />
+<img className="screenshot-full" src="/img/datasource-reference/google-sheets/info-v2.png" alt="google sheets get info" />
+
+</div>
 
 </div>

docs/docs/data-sources/graphql.md

@@ -5,29 +5,39 @@ title: GraphQL
 
 ToolJet can establish connections with GraphQL endpoints, enabling the execution of queries and mutations.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To establish a connection with the GraphQL global datasource, you can either click on the **Add new global datasource** button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+To establish a connection with the GraphQL global datasource, you can either click on the **+ Add new global datasource** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/graphql/graphgds-v2.png" alt="ToolJet - Data source - REST API" />
+<img className="screenshot-full" src="/img/datasource-reference/graphql/graphgds-v2.png" alt="ToolJet - Data source - GraphQL" style={{marginBottom:'15px'}}/>
 
 </div>
 
 ToolJet requires the following to connect to a GraphQL datasource:
 
-- **URL**: URL of the GraphQL endpoint
-- **Headers**: Any headers the GraphQL source requires
-- **URL parameters**: Additional query string parameters
-- __Authentication Type__: The method of authentication to use with GraphQL requests. Supported Types: None, Basic, Bearer, and OAuth 2.0
-  - **Basic**: Requires Username and Password
-  - **Bearer**: Requires a token, typically a JSON Web Token (JWT), to grant access
+- **URL**: URL of the GraphQL endpoint.
+- **Headers**: Any headers the GraphQL source requires.
+- **URL parameters**: Additional query string parameters.
+- **Authentication Type**: The method of authentication to use with GraphQL requests.
+  - **None**: No credentials or tokens are required.
+  - **Basic**: Requires Username and Password.
+  - **Bearer**: Requires a token, typically a JSON Web Token (JWT), to grant access.
   - **OAuth 2.0**: The OAuth 2.0 protocol mandates the provision of the following parameters: access token URL, access token URL custom headers, client ID, client secret, scopes, custom query parameters, authorization URL, custom authentication parameters, and client authentication.
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Querying GraphQL
 
-Click on **`+Add`** button of the query manager at the bottom panel of the editor and select the GraphQL global datasource added in previous step.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **GraphQL** datasource added in previous step.
+3. Add the Query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
 
 ### Required Parameters:
 - **Query**
@@ -38,13 +48,73 @@ Click on **`+Add`** button of the query manager at the bottom panel of the edito
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/graphql/headers.png" alt="ToolJet - Data source - GraphQl"/>
+<img className="screenshot-full" src="/img/datasource-reference/graphql/headers-v2.png" alt="ToolJet - Data source - GraphQl" style={{marginBottom:'15px'}}/>
 
 </div>
 
-
-Click on the **Create** button to create the query or Click on the **Run** button to create and trigger the query.
+#### Example
+```yaml
+{
+  todos {
+    id
+    description
+  }
+}
+```
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
 :::
+
+</div>
+## Metadata
+
+Metadata is additional information about the data returned by the GraphQL query. It includes details such as the request URL, method, headers, and response status code. You can access this information using the `metadata` object. REST API. The metadata can be accessed within queries and components using the `{{queries.<queryname>.metadata}}` syntax.
+
+:::info
+While accessing the properties of the metadata object, which contains a hyphen, you can use the bracket notation. For example, to access the `content-length` property, you can use `{{queries.graphql1.metadata.request.headers["content-length"]}}` or `{{queries.graphql1.metadata.request.headers."content-length"}}`.
+:::
+
+<details>
+<summary>**Example Metadata**</summary>
+
+```json
+{
+  "request": {
+    "url": "https://swapi-graphql.netlify.app/.netlify/functions/index?testParam=valueParam",
+    "method": "POST",
+    "headers": {
+      "user-agent": "got (https://github.com/sindresorhus/got)",
+      "header1key": "Header1value",
+      "content-type": "application/json",
+      "content-length": "275",
+      "accept-encoding": "gzip, deflate, br"
+    },
+    "params": {
+      "testParam": "valueParam"
+    }
+  },
+  "response": {
+    "statusCode": 200,
+    "headers": {
+      "access-control-allow-origin": "*",
+      "age": "0",
+      "cache-control": "no-cache",
+      "cache-status": ""Netlify Durable"; fwd=method, "Netlify Edge"; fwd=method",
+      "content-encoding": "br",
+      "content-length": "840",
+      "content-type": "application/json; charset=utf-8",
+      "date": "Fri, 13 Sep 2024 06:38:27 GMT",
+      "etag": "W/"18ad-ZANyCoLSJjHWg3k1SaMp6gH/gdQ"",
+      "netlify-vary": "query",
+      "server": "[REDACTED]",
+      "strict-transport-security": "max-age=31536000; includeSubDomains; preload",
+      "vary": "Accept-Encoding",
+      "x-nf-request-id": "01J7N1NG25V8Q9GY51RH11ACTN",
+      "x-powered-by": "Express",
+      "connection": "close"
+    }
+  }
+}
+```
+</details>

docs/docs/data-sources/grpc.md

@@ -6,62 +6,58 @@ title: gRPC
 <div className='badge badge--primary heading-badge'>Self-hosted only</div>
 
 :::caution
-only self-hosted deployments will have access to a gRPC datasource that is capable of handling unary requests and responses.
+Only self-hosted deployments will have access to a gRPC datasource that is capable of handling unary requests and responses.
 :::
 
-- [Setup](#setup)
-- [Querying gRPC](#querying-grpc)
+<div style={{paddingTop:'24px'}}>
 
 ## Setup
 
-### Step 1: Upgrade ToolJet to the version 2.5 or above
+### Step 1: Upgrade ToolJet to the Version 2.5 or Above
 
-Find instructions on how to do this in the setup guides located here: https://docs.tooljet.com/docs/setup/.
+Find instructions on how to do this in the setup guides located here: [ToolJet Setup](/docs/setup/).
 
-### Step 2: Add proto files
+### Step 2: Add Proto Files
 
-At the root, create a directory named "**protos**" and add a "**service.proto**" file inside it.
+At the root, create a directory named "*protos*" and add a "*service.proto*" file inside it.
 
 
 ### Step 3: Mount Volumes
 
-In the `docker-compose.yml` add
+In the **docker-compose.yml** add the following to the *volumes* sections for **plugins** and **server**
 
 ```bash
 ./protos:/app/protos
 ```
 
-to the 2 volume sections for **plugins** and **server**
-
-
-<div style={{textAlign: 'center'}}>
-
 <img className="screenshot-full" src="/img/datasource-reference/grpc/proto1.png" alt="gRPC: datasource" width='500' />
 
-</div>
-
-<div style={{textAlign: 'center'}}>
-
 <img className="screenshot-full" src="/img/datasource-reference/grpc/proto2.png" alt="gRPC: datasource"  width='500'/>
 
-</div>
-
-### Step 4: Reboot the instance
+### Step 4: Reboot the Instance
 
 ```bash
 docker-compose up -d
 ```
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Querying gRPC
 
 After setting up your proto files, you should be able to establish a connection to gRPC by going to the [global datasource](/docs/data-sources/overview) page.
 
-### Connect the gRPC datasource
+### Connect the gRPC Datasource
 
 ToolJet requires the following to connect to gRPC servers:
 
 - **Server URL**
-- **Authentication type** (None, Basic, Bearer, and API key)
+- **Authentication type** 
+    - None
+    - Basic
+    - Bearer
+    - API key
 
 <div style={{textAlign: 'center'}}>
 
@@ -77,7 +73,7 @@ Once you have added the gRPC from the global datasource page, you'll find it on
 
 </div>
 
-### Creating query
+### Creating Query
 
 You can now query a particular RPC method of the added services.
 
@@ -85,4 +81,6 @@ You can now query a particular RPC method of the added services.
 
 <img className="screenshot-full" src="/img/datasource-reference/grpc/query.png" alt="gRPC: connection" />
 
-</div>
+</div>
+
+</div>

docs/docs/data-sources/influxdb.md

@@ -3,10 +3,10 @@ id: influxdb
 title: InfluxDB
 ---
 
-# InfluxDB
-
 ToolJet can connect to InfluxDB databases to read and write data. Use the Token authentication scheme to authenticate to the InfluxDB API. For more info visit [InfluxDB docs](https://docs.influxdata.com/).
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
 ToolJet connects to InfluxDB using :
@@ -22,108 +22,191 @@ For generating API Token visit [InfluxDB docs](https://docs.influxdata.com/influ
 
 <div style={{textAlign: 'center'}}>
 
-![ToolJet - Data source - influxDB](/img/datasource-reference/influxdb/influxauth-v2.png)
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/influxauth-v3.png" alt="influx auth" />
 
 </div>
 
-## Supported queries:
+</div>
 
-- [Write data](#write-data)
+<div style={{paddingTop:'24px'}}>
 
-- [Query data](#query-data)
+## Supported Queries
 
-- [Generate an Abstract Syntax Tree (AST) from a query](#generate-an-abstract-syntax-tree-ast-from-a-query)
-
-- [Retrieve query suggestions](#retrieve-query-suggestions)
-
-- [Retrieve query suggestions for a branching suggestion](#retrieve-query-suggestions-for-a-branching-suggestion)
-
-- [Analyze a Flux query](#analyze-a-flux-query)
-
-- [List buckets](#list-buckets)
-
-- [Create a bucket](#create-a-bucket)
-
-- [Retrieve a bucket](#retrieve-a-bucket)
-
-- [Update a bucket](#update-a-bucket)
-
-- [Delete a bucket](#delete-a-bucket)
+- **[Write data](#write-data)**
+- **[Query data](#query-data)**
+- **[Generate an Abstract Syntax Tree (AST) from a query](#generate-an-abstract-syntax-tree-ast-from-a-query)**
+- **[Retrieve query suggestions](#retrieve-query-suggestions)**
+- **[Retrieve query suggestions for a branching suggestion](#retrieve-query-suggestions-for-a-branching-suggestion)**
+- **[Analyze a Flux query](#analyze-a-flux-query)**
+- **[List buckets](#list-buckets)**
+- **[Create a bucket](#create-a-bucket)**
+- **[Retrieve a bucket](#retrieve-a-bucket)**
+- **[Update a bucket](#update-a-bucket)**
+- **[Delete a bucket](#delete-a-bucket)**
 
 
-<img className="screenshot-full" src="/img/datasource-reference/influxdb/operations-v2.png" alt="influx operations" />
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/operations-v3.png" alt="influx operations" style={{marginBottom:'15px'}}/>
 
 
-### Write data 
+### Write Data 
 
 This operation writes data to a bucket.
 
-#### Required parameters:
+#### Required Parameters:
 
 - **Bucket**
 - **Organization name or ID**
+- **Data**
 
-#### Optional parameters: 
+#### Optional Parameters: 
 
 - **Precision**
 
-### Query data
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/write.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+### Query Data
 
 Retrieves data from InfluxDB buckets.
 
-#### Required parameters:
+#### Required Parameters:
 - **Organization name or ID**
+- **Flux query**
 
-### Generate an Abstract Syntax Tree (AST) from a query
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/query.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+#### Example
+
+```yaml
+from(bucket: "sensor_data") 
+|> range(start: -1h) 
+|> filter(fn: (r) => r["_measurement"] == "temperature")
+```
+
+### Generate an Abstract Syntax Tree (AST) from a Query
 
 This operation analyzes flux query and generates a query specification.
 
-#### Required parameters: 
+#### Required Parameters: 
 
 - **Query**
 
-### Retrieve query suggestions 
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/ast.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+#### Example
+
+```yaml
+from(bucket: "website_metrics")
+  |> range(start: -7d)
+  |> filter(fn: (r) => r["_measurement"] == "page_views")
+  |> group(columns: ["url"])
+  |> sum(column: "_value")
+  |> sort(columns: ["_value"], desc: true)
+```
+
+### Retrieve Query Suggestions 
 
 This query retrieve query suggestions.
 
-### Retrieve query suggestions for a branching suggestion 
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/retrieveQuery.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+### Retrieve Query Suggestions for a Branching Suggestion 
 
 This operation retrieve query suggestions for a branching suggestion.
 
-#### Required parameters:
+#### Required Parameters:
 - **Name**
 
-### Analyze a Flux query 
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/queryBranch.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+### Analyze a Flux Query 
 
 This Analyzes a Flux query.
 
-#### Required parameters:
+#### Required Parameters:
 
 - **Query**
 
-### List buckets 
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/fluxQuery.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+#### Example
+```yaml
+from(bucket: "sensor_data")
+  |> range(start: -1d)
+  |> filter(fn: (r) => r["_measurement"] == "humidity")
+  |> mean(column: "_value")
+```
+
+### List Buckets 
 
 This operation lists all the buckets in a database.
-### Create a bucket 
 
-#### Required parameters: 
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/listBucket.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+### Create a Bucket 
+
+This operation creates a bucket in database.
+
+#### Required Parameters:
 
 - **Query**
 
-### Retrieve a bucket 
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/createBucket.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+#### Example
+```yaml
+POST http://localhost:8086/api/v2/buckets
+Content-Type: application/json
+Authorization: Token your_auth_token
+
+{
+  "name": "new_bucket",
+  "orgID": "your_org_id",
+  "retentionRules": [
+    {
+      "everySeconds": 3600
+    }
+  ]
+}
+```
+
+### Retrieve a Bucket 
 
 This operation retrieve a bucket in a database.
 
-#### Required parameters:
+#### Required Parameters:
 - **Bucket ID**
 
-### Update a bucket
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/retrieveBucket.png" alt="influx operations" style={{marginBottom:'15px'}}/>
 
-#### Required parameters:
+### Update a Bucket
+
+This operaition updates the bucket in database.
+
+#### Required Parameters:
 - **Bucket ID**
 - **Query**
 
-### Delete a bucket
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/updateBucket.png" alt="influx operations" style={{marginBottom:'15px'}}/>
 
-#### Required parameters:
+#### Example
+```yaml
+{
+  "name": "updated_bucket_name",
+  "retentionRules": [
+    {
+      "everySeconds": 7200
+    }
+  ]
+}
+```
+
+### Delete a Bucket
+
+This operation delete the bucket in database.
+
+#### Required Parameters:
 - **Bucket ID**
+
+<img className="screenshot-full" src="/img/datasource-reference/influxdb/deleteBucket.png" alt="influx operations" style={{marginBottom:'15px'}}/>
+
+</div>

docs/docs/data-sources/mailgun.md

@@ -3,44 +3,47 @@ id: mailgun
 title: Mailgun
 ---
 
-# Mailgun
-
 ToolJet can connect to your Mailgun account to send emails.
 
-<img class="screenshot-full" src="/img/datasource-reference/mailgun/mailgun-datasource-v2.png" alt="ToolJet - Data source - Mailgun" height="420" />
-
 :::info
 The Mailgun API Datasource supports for interaction with the mail endpoint of the [Mailgun API](https://documentation.mailgun.com/en/latest/api-intro.html#authentication-1).
 :::
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To establish a connection with the MailGun data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
+To establish a connection with the **Mailgun** data source, click on the **+ Add new data source** button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
 
-Enter your **Mailgun API key** in the "API key" field.
+ToolJet requires the following to connect to your Mailgun:
+- **API key**
+
+<img class="screenshot-full" src="/img/datasource-reference/mailgun/mailgun-datasource-v3.png" alt="ToolJet - Data source - Mailgun" />
 
 :::tip
 Mailgun API key is required to create an Mailgun datasource on ToolJet. You can generate API key by visiting [Mailgun account page](https://app.mailgun.com/app/account/security/api_keys).
 :::
 
-Click on the 'Save' button to save the data source.
+</div>
 
-## Supported operations
+<div style={{paddingTop:'24px'}}>
 
-1.  Email service
+## Supported Operations
 
-### Email service
+### Email Service
 
-Required parameters:
+#### Required parameters:
 
-- Send email to
-- Send email from
-- Subject
-- Body as text
+- **Send email to**
+- **Send email from**
+- **Subject**
+- **Body as text**
 
-Optional parameters:
+#### Optional parameters:
 
-- Body as HTML
+- **Body as HTML**
+
+<img class="screenshot-full" src="/img/datasource-reference/mailgun/mailgunQuery.png" alt="ToolJet - Data source - Mailgun Query" />
 
 :::info
 **Send mail to** - accepts a single email id. 
@@ -56,3 +59,5 @@ For example: `admin@tooljet.io`
 
 **Send multiple individual emails to multiple recipients** - set <b>Multiple recipients</b> field to `{{true}}` and the `Send mail to` field will be split into multiple emails and send to each recipient.
 :::
+
+</div>

docs/docs/data-sources/mariadb.md

@@ -3,19 +3,13 @@ id: mariadb
 title: MariaDB
 ---
 
-# MariaDB
-
 ToolJet can connect to both self-hosted and cloud-based MariaDB servers to read and write data.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To establish a connection with the MariaDB global datasource, you can either click on the `+Add new global datasource` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/gdsmaria-v2.png" alt="MariaDB" />
-
-</div>
+To establish a connection with the MariaDB global datasource, you can either click on the **+ Add new global datasource** button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 **ToolJet requires the following connection details to connect to MariaDB:**
 
@@ -31,26 +25,20 @@ To establish a connection with the MariaDB global datasource, you can either cli
   - **Self-Signed Certificate:** This option allows you to use a self-signed certificate. This is less secure than using a CA certificate, as it does not ensure the identity of the MariaDB server has been verified by a trusted third party. However, it is a good option if you do not have access to a CA certificate.
   - **None:** This option does not use SSL. This is the least secure option, as it allows anyone to intercept your communications with the MariaDB server.
 
-<div style={{textAlign: 'center'}}>
-
 <img className="screenshot-full" src="/img/datasource-reference/mariadb/connections.png" alt="MariaDB" />
 
 </div>
 
-:::info
-Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
-:::
+<div style={{paddingTop:'24px'}}>
 
 ## Querying MariaDB
 
 Once you have connected to the MariaDB datasource, follow these steps to write queries and interact with a MariaDB database from the ToolJet application:
 
-1. Open the ToolJet application and navigate to the query panel at the bottom of the app builder.
-2. Click the `+Add` button to open the list of available `local` and `global datasources`.
-3. Select **MariaDB** from the global datasource section.
-4. Enter the SQL query in the editor.
-5. **Rename**(optional) and **Create** the query.
-6. Click **Preview** to view the data returned from the query or click **Run** to execute the query.
+1. Click the **+ Add** button to open the list of available datasources.
+2. Select **MariaDB** from the global datasource section.
+3. Enter the SQL query in the editor.
+4. Click **Preview** to view the data returned from the query or click **Run** to execute the query.
 
 :::tip
 Query results can be transformed using Transformation. For more information on transformations, please refer to our documentation at **[link](/docs/tutorial/transformations)**.
@@ -58,20 +46,22 @@ Query results can be transformed using Transformation. For more information on t
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/querycreate.png" alt="MariaDB query" />
+<img className="screenshot-full" src="/img/datasource-reference/mariadb/querycreate-v2.png" alt="MariaDB query" />
 
 </div>
 
-## CRUD queries
+</div>
 
-Suppose there exists a MariaDB database named "customers." We can create an example table called "users" with the following columns:
+<div style={{paddingTop:'24px'}}>
 
-- `id` (integer, auto-increment)
-- `name` (varchar)
-- `age` (integer)
-- `email` (varchar)
+## CRUD Queries
 
-The above command will create the "users" table within the "customers" database. Now, let's explore the CRUD commands for this table in MariaDB:
+Suppose there exists a MariaDB database named *customers*. We can create an example table called *users* with the following columns:
+
+- **id** (integer, auto-increment)
+- **name** (varchar)
+- **age** (integer)
+- **email** (varchar)
 
 ```sql
 CREATE TABLE user(
@@ -82,10 +72,12 @@ CREATE TABLE user(
 );
 ```
 
-Here are the CRUD commands for this table in MariaDB:
+The above command will create the *users* table within the *customers* database. Now, let's explore the CRUD commands for this table in MariaDB:
 
 ### Create (Insert)
-- To insert a single user:
+
+#### To Insert a Single User:
+
 ```sql
 INSERT INTO user (name, age, email)
 VALUES ('John Doe', 25, 'john@example.com');
@@ -93,11 +85,12 @@ VALUES ('John Doe', 25, 'john@example.com');
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/insertuser.png" alt="MariaDB query" />
+<img className="screenshot-full" src="/img/datasource-reference/mariadb/insertUser.png" alt="MariaDB query" style={{marginBottom:'15px'}} />
 
 </div>
 
-- To insert multiple users:
+#### To Insert Multiple Users:
+
 ```sql
 INSERT INTO user (name, age, email)
 VALUES
@@ -108,34 +101,38 @@ VALUES
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/insertusers.png" alt="MariaDB query" />
+<img className="screenshot-full" src="/img/datasource-reference/mariadb/insertUsers.png" alt="MariaDB query" style={{marginBottom:'15px'}} />
 
 </div>
 
 ### Read (Select)
-- To retrieve all users:
+
+#### To Retrieve All Users:
+
 ```sql
 SELECT * FROM user;
 ```
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/readall.png" alt="MariaDB query" />
+<img className="screenshot-full" src="/img/datasource-reference/mariadb/readall-v2.png" alt="MariaDB query" style={{marginBottom:'15px'}} />
 
 </div>
 
-- To retrieve specific columns from users:
+#### To Retrieve Specific Columns From Users:
+
 ```sql
 SELECT name, age, email FROM user;
 ```
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/readcolumn.png" alt="MariaDB query" />
+<img className="screenshot-full" src="/img/datasource-reference/mariadb/readcolumn-v2.png" alt="MariaDB query" style={{marginBottom:'15px'}}/>
 
 </div>
 
-- To add conditions and filters to the selection:
+#### To Add Conditions and Filters to the Selection:
+
 ```sql
 SELECT name, age, email
 FROM user
@@ -144,12 +141,14 @@ WHERE age > 25;
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/readfilter.png" alt="MariaDB query" />
+<img className="screenshot-full" src="/img/datasource-reference/mariadb/readfilter-v2.png" alt="MariaDB query" style={{marginBottom:'15px'}}/>
 
 </div>
 
 ### Update
-- To update the age of a user:
+
+#### To Update the Age of a User:
+
 ```sql
 UPDATE user
 SET age = 26
@@ -158,28 +157,36 @@ WHERE id = 1;
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/updateuser.png" alt="MariaDB query" />
+<img className="screenshot-full" src="/img/datasource-reference/mariadb/updateuser-v2.png" alt="MariaDB query" style={{marginBottom:'15px'}}/>
 
 </div>
 
 ### Delete
-- To delete a user:
+
+#### To Delete a User:
+
 ```sql
 DELETE FROM user WHERE id = 1;
 ```
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mariadb/updateuser.png" alt="MariaDB query" />
+<img className="screenshot-full" src="/img/datasource-reference/mariadb/deleteuser-v2.png" alt="MariaDB query" style={{marginBottom:'15px'}}/>
 
 </div>
 
-Remember to adjust the values and conditions based on your specific needs. These commands will allow you to create the table, insert data, retrieve data, update data, and delete data in the "users" table in MariaDB.
+Remember to adjust the values and conditions based on your specific needs. These commands will allow you to create the table, insert data, retrieve data, update data, and delete data in the *users* table in MariaDB.
 
-## Troubleshooting tips
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Troubleshooting Tips
 If you are having trouble connecting a MariaDB data source to ToolJet, try the following:
 - Make sure that your MariaDB server is running and accessible from the ToolJet server.
 - Check the spelling and capitalization of your credentials.
 - Try restarting the ToolJet server.
 
 If you are still having trouble, please contact [ToolJet support](mailto:hello@tooljet.com) or ask on [slack](https://tooljet.com/slack) for assistance.
+
+</div>

docs/docs/data-sources/minio.md

@@ -3,24 +3,13 @@ id: minio
 title: MinIO
 ---
 
-# MinIO
-
 ToolJet can connect to minio and perform various operation on them.
 
-## Supported operations
-
-- **Read object**
-- **Put object**
-- **Remove object**
-- **List buckets**
-- **List objects in a bucket**
-- **Presigned url for download**
-- **Presigned url for upload**
-
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To establish a connection with the Minio data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
+To establish a connection with the MinIo data source, click on the **+ Add new data source** button located on the query panel or navigate to the [Data Sources](/docs/data-sources/overview) page from the ToolJet dashboard.
 
 ToolJet requires the following to connect to your DynamoDB:
 
@@ -29,23 +18,118 @@ ToolJet requires the following to connect to your DynamoDB:
 - **Access key**
 - **Secret key**
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/minio-connect.png" alt="miniIo connect" />
+<img className="screenshot-full" src="/img/datasource-reference/minio/minio-connect.png" alt="miniIo connect" />
 
 </div>
 
-Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
+<div style={{paddingTop:'24px'}}>
 
 ## Querying Minio
 
-Click on `+` button of the **query manager** at the bottom panel of the editor and select the data source added in the previous step as the data source. Select the operation that you want to perform and click **Save** to save the query.
-
-<img className="screenshot-full" src="/img/datasource-reference/minio-query.png" alt="miniIo query" />
-
-Click on the **run** button to run the query. 
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the data source added in the previous step as the data source.
+3. Select the operation that you want to perform.
+4. Click on the **Run** button to run the query
 
+<img className="screenshot-full" src="/img/datasource-reference/minio/minio-query.png" alt="miniIo query" />
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
 :::
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Supported Operations
+
+- **[Read object](#read-object)**
+- **[Put object](#put-object)**
+- **[Remove object](#remove-object)**
+- **[List buckets](#list-buckets)**
+- **[List objects in a bucket](#list-objects-in-a-bucket)**
+- **[Presigned url for download](#presigned-url-for-download)**
+- **[Presigned url for upload](#presigned-url-for-upload)**
+
+<img className="screenshot-full" src="/img/datasource-reference/minio/minioOperations.png" alt="minIo Operations" style={{marginBottom:'15px'}}/>
+
+### Read Object
+
+Retrieve an object from a bucket.
+
+#### Required Parameter:
+- **Bucket**
+- **Object Name**
+
+<img className="screenshot-full" src="/img/datasource-reference/minio/readObject.png" alt="minIo read object" style={{marginBottom:'15px'}}/>
+
+### Put Object
+
+Upload or update an object in a bucket.
+
+#### Required Parameter:
+- **Bucket**
+- **Object Name**
+- **Upload data**
+
+#### Optional Parameter:
+- **Content Type**
+
+<img className="screenshot-full" src="/img/datasource-reference/minio/putObejct.png" alt="minIo put object" style={{marginBottom:'15px'}}/>
+
+### Remove Object
+
+Delete an object from a bucket.
+
+#### Required Parameter:
+- **Bucket**
+- **Object Name**
+
+<img className="screenshot-full" src="/img/datasource-reference/minio/removeObject.png" alt="minIo remove object" style={{marginBottom:'15px'}}/>
+
+### List Buckets
+
+Retrieve a list of all buckets.
+
+<img className="screenshot-full" src="/img/datasource-reference/minio/listBucket.png" alt="minIo list bucket" style={{marginBottom:'15px'}}/>
+
+### List Objects in a Bucket
+
+List objects within a specified bucket.
+
+#### Required Parameters
+- **Bucket**
+
+#### Optional Parametes
+- **Prefix**
+
+<img className="screenshot-full" src="/img/datasource-reference/minio/listObjectBucket.png" alt="minIo list objects in a bucket" style={{marginBottom:'15px'}}/>
+
+### Presigned URL for Download
+
+Generate a presigned URL for downloading an object.
+
+#### Required Parameter:
+- **Bucket**
+- **Object Name**
+
+#### Optional Parameter:
+- **Expires in**
+
+<img className="screenshot-full" src="/img/datasource-reference/minio/urlDownload.png" alt="minIo presigned url for download" style={{marginBottom:'15px'}}/>
+
+### Presigned URL for Upload
+
+Generate a presigned URL for uploading an object.
+
+#### Required Parameter:
+- **Bucket**
+- **Object Name**
+
+#### Optional Parameter:
+- **Expires in**
+
+<img className="screenshot-full" src="/img/datasource-reference/minio/urlDownload.png" alt="minIo presigned url for download" style={{marginBottom:'15px'}}/>
+
+</div>
+

docs/docs/data-sources/mongodb.md

@@ -3,15 +3,17 @@ id: mongodb
 title: MongoDB
 ---
 
-# MongoDB
-
 ToolJet can connect to MongoDB to read and write data.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Manual Connection
 
-Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
+To establish a manual connection with the **MongoDB** data source, click on the **+ Add new data source** button located on the query panel or navigate to the [Data Sources](/docs/data-sources/overview) page from the ToolJet dashboard.
 
-To establish a manual connection with the MongoDB data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
+:::info
+Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP.
+:::
 
 ToolJet requires the following to connect to your MongoDB.
 
@@ -20,132 +22,491 @@ ToolJet requires the following to connect to your MongoDB.
 - **Username**
 - **Password**
 
-It is recommended to create a new MongoDB user so that you can control the access levels of ToolJet.
+**Note:** It is recommended to create a new MongoDB user so that you can control the access levels of ToolJet.
 
-<img className="screenshot-full" src="/img/datasource-reference/mo-connect.png" alt="ToolJet - Mongo connection" height="250"/>
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/mo-connect.png" alt="ToolJet - Mongo connection" />
 
-Click on 'Test connection' button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on 'Save' button to save the data source.
+</div>
+
+<div style={{paddingTop:'24px'}}>
 
 ## Connect Using Connecting String
 
 You can also use a **Connection String** by switching the method from the dropdown. You will be prompted to enter the details of your MongoDB connection. 
 
-The primary piece of information you need here is your MongoDB connection string. The connection string typically looks like this: 
-`mongodb+srv://${username}:${password}@${cluster}/{database}`. 
+ToolJet requires the following to connect to your MongoDB using Connecting String:
+- **Connection String**
 
-For example: `mongodb+srv://tooljettest:fakepassword@cluster0.urul7.mongodb.net/hrms`
+:::info
+The connection string typically looks like this: `mongodb+srv://${username}:${password}@${cluster}/{database}`.
 
-<img className="screenshot-full" src="/img/datasource-reference/mongo-db/mongodb-connection-string.png" alt="ToolJet - Mongo connection" height="250"/>
+For example: `mongodb+srv://tooljettest:dummypassword@cluster0.urul7.mongodb.net/hrms`
+:::
 
-Make sure to replace username, password, cluster, and database with your actual MongoDB details. If your MongoDB instance requires additional connection options, you can usually append these options to the connection string.
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/mongodb-connection-string.png" alt="ToolJet - Mongo connection"/>
 
+**Note:** Make sure to replace username, password, cluster, and database with your actual MongoDB details. If your MongoDB instance requires additional connection options, you can usually append these options to the connection string.
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
 
 ## Querying MongoDB
 
-Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. Select the operation that you want to perform and click 'Save' to save the query.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. 
+2. Select the operation that you want to perform and click **Save** to save the query.
+3. Click on the **Run** button to run the query.
 
-<img className="screenshot-full" src="/img/datasource-reference/mo-query.png" alt="ToolJet - Mongo query" height="250"/>
-
-Click on the 'run' button to run the query.
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/mo-query.png" alt="ToolJet - Mongo query"/>
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
 :::
 
-### Supported operations
+<div style={{paddingTop:'24px'}}>
 
-- [List Collections](#list-collections)
-- [Find One](#find-one)
-- [Find Many](#find-many)
-- [Total Count](#total-count)
-- [Count](#count)
-- [Distinct](#distinct)
-- [Insert One](#insert-one)
-- [Insert Many](#insert-many)
-- [Update One](#update-one)
-- [Update Many](#update-many)
-- [Replace One](#replace-one)
-- [Find One and Update](#find-one-and-update)
-- [Find One and Replace](#find-one-and-replace)
-- [Find One and Delete](#find-one-and-delete)
-- [Aggregate](#aggregate)
-- [Delete One](#delete-one)
-- [Delete Many](#delete-many)
-- [Bulk Operations](#bulk-operations)
+## Supported Operations
 
-#### List Collections
+- **[List Collections](#list-collections)**
+- **[Find One](#find-one)**
+- **[Find Many](#find-many)**
+- **[Total Count](#total-count)**
+- **[Count](#count)**
+- **[Distinct](#distinct)**
+- **[Insert One](#insert-one)**
+- **[Insert Many](#insert-many)**
+- **[Update One](#update-one)**
+- **[Update Many](#update-many)**
+- **[Replace One](#replace-one)**
+- **[Find One and Update](#find-one-and-update)**
+- **[Find One and Replace](#find-one-and-replace)**
+- **[Find One and Delete](#find-one-and-delete)**
+- **[Aggregate](#aggregate)**
+- **[Delete One](#delete-one)**
+- **[Delete Many](#delete-many)**
+- **[Bulk Operations](#bulk-operations)**
+
+### List Collections
 
 Returns list of collections
 
-#### Fine One
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/listCollection.png" alt="ToolJet - Mongo DB List Collection" style={{marginBottom:'15px'}}/>
+
+### Find One
 
 Return a document which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/findOne)
 
-#### Fine Many
+#### Required Parameters:
+- **Collection**
+
+#### Optional Parameters:
+- **Filter**
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/findOne.png" alt="ToolJet - Mongo DB Find One" style={{marginBottom:'15px'}}/>
+
+### Find Many
 
 Return list of documents which satisfy the given filter and options. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/find/)
 
-#### Total Count
+#### Required Parameters:
+- **Collection**
+
+#### Optional Parameters:
+- **Filter**
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/findMany.png" alt="ToolJet - Mongo DB Find Many" style={{marginBottom:'15px'}}/>
+
+### Total Count
 
 Returns an estimation of the number of documents in the collection based on collection metadata. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#estimateddocumentcount)
 
-#### Count
+#### Required Parameters:
+- **Collection**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/totalCount.png" alt="ToolJet - Mongo DB Total Count" style={{marginBottom:'15px'}}/>
+
+### Count
 
 Returns the number of documents based on the filter. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#countdocuments)
 
-#### Distinct
+#### Required Parameters:
+- **Collection**
+
+#### Optional Parameters:
+- **Filter**
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/count.png" alt="ToolJet - Mongo DB Count" style={{marginBottom:'15px'}}/>
+
+### Distinct
 
 Retrieve a list of distinct values for a field based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/distinct/)
 
-#### Insert One
+#### Required Parameters:
+- **Collection**
+- **Field**
+
+#### Optional Parameters:
+- **Filter**
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/distinct.png" alt="ToolJet - Mongo DB Find One" style={{marginBottom:'15px'}}/>
+
+### Insert One
 
 Insert a document. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertOne/)
 
-#### Insert Many
+#### Required Parameters:
+- **Collection**
+- **Document**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/insertOne.png" alt="ToolJet - Mongo DB Insert One" style={{marginBottom:'15px'}}/>
+
+#### Example:
+```json
+{
+    "name": "John Doe",
+    "age": 30
+}
+```
+
+### Insert Many
 
 Insert list of documents. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/insertMany/)
 
-#### Update One
+#### Required Parameters:
+- **Collection**
+- **Document**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/insertMany.png" alt="ToolJet - Mongo DB Insert Many" style={{marginBottom:'15px'}}/>
+
+#### Example
+```json
+[
+    {
+        "name": "Product1",
+        "price": 100
+    }, 
+    {
+        "name": "Product2",
+        "price": 150
+    }
+]
+```
+
+### Update One
 
 Update a document based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateOne/)
 
-#### Update Many
+#### Required Parameters:
+- **Collection**
+- **Filter**
+- **Update**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/updateOne.png" alt="ToolJet - Mongo DB Update One" style={{marginBottom:'15px'}}/>
+
+#### Example
+##### Filter
+```json
+{
+    "name": "John Doe"
+}
+```
+
+##### Update
+```json
+{
+    "$set": {
+        "age": 31
+    }
+}
+```
+
+### Update Many
 
 Update many documents based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/updateMany/)
 
-#### Replace One
+#### Required Parameters:
+- **Collection**
+- **Filter**
+- **Update**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/updateMany.png" alt="ToolJet - Mongo DB Update Many" style={{marginBottom:'15px'}}/>
+
+#### Example
+##### Filter
+```json
+{
+    "status": "pending"
+}
+```
+
+##### Update
+```json
+{
+    "$set": {
+        "status": "completed"
+    }
+}
+```
+
+### Replace One
 
 Replace a document based on filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/replaceOne/)
 
-#### Find One and Update
+#### Required Parameters:
+- **Collection**
+- **Filter**
+- **Replacement**
 
-If your application requires the document after updating, use this instead of `Update One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandupdate)
+#### Optional Parameters:
+- **Option**
 
-#### Find One and Replace
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/replaceOne.png" alt="ToolJet - Mongo DB Find One" style={{marginBottom:'15px'}}/>
 
-If your application requires the document after updating, use this instead of `Replace One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandreplace)
+#### Example
+##### Filter
+```json
+{
+    "product_id": 123
+}
+```
 
-#### Find One and Delete
+##### Replacement
+```json
+{
+    "product_id": 123,
+    "name": "New Product",
+    "price": 200
+}
+```
 
-If your application requires the document after deleting, use this instead of `Delete One`. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneanddelete)
+### Find One and Update
 
-#### Aggregate
+If your application requires the document after updating, use this instead of **Update One**. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandupdate)
+
+#### Required Parameters:
+- **Collection**
+- **Filter**
+- **Update**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/findOneUpdate.png" alt="ToolJet - Mongo DB Find One and Update" style={{marginBottom:'15px'}}/>
+
+#### Example
+##### Filter
+```json
+{
+    "employee_id": 456
+}
+```
+
+##### Update
+```json
+{
+    "$inc": {
+        "salary": 5000
+    }
+}
+```
+
+### Find One and Replace
+
+If your application requires the document after updating, use this instead of **Replace One**. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneandreplace)
+
+#### Required Parameters:
+- **Collection**
+- **Filter**
+- **Replacement**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/findOneReplace.png" alt="ToolJet - Mongo DB Find One and Replace" style={{marginBottom:'15px'}}/>
+
+#### Example
+##### Filter
+```json
+{
+    "product_id": 789
+}
+```
+
+##### Replacement 
+```json
+{
+    "product_id": 789,
+    "name": "Updated Product",
+    "price": 300
+}
+```
+
+### Find One and Delete
+
+If your application requires the document after deleting, use this instead of **Delete One**. [Reference](https://mongodb.github.io/node-mongodb-native/4.0/classes/collection.html#findoneanddelete)
+
+#### Required Parameters:
+- **Collection**
+- **Filter**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/findOneDelete.png" alt="ToolJet - Mongo DB Find One and Delete" style={{marginBottom:'15px'}}/>
+
+#### Example
+```json
+{
+    "order_id": 101
+}
+```
+
+### Aggregate
 
 Aggregation operations are expressions you can use to produce reduced and summarized results. [Reference](https://docs.mongodb.com/drivers/node/v4.0/fundamentals/aggregation/)
 
-#### Delete One
+#### Required Parameters:
+- **Collection**
+- **Pipeline**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/aggregate.png" alt="ToolJet - Mongo DB Aggregate" style={{marginBottom:'15px'}}/>
+
+#### Example
+```json
+[
+    {
+        "$match": {
+            "status": "completed"
+        }
+    }, 
+    {
+        "$group": {
+            "_id": "$product_id",
+            "totalSales": {
+                "$sum": "$amount"
+            }
+        }
+    }
+]
+```
+
+### Delete One
 
 Delete a record based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteOne/)
 
-#### Delete Many
+#### Required Parameters:
+- **Collection**
+- **Filter**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/deleteOne.png" alt="ToolJet - Mongo DB Find One" style={{marginBottom:'15px'}}/>
+
+#### Example
+```json
+{
+    "user_id": 123
+}
+```
+
+### Delete Many
 
 Delete many records based on the filter. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/deleteMany/)
 
-#### Bulk Operations
+#### Required Parameters:
+- **Collection**
+- **Filter**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/deleteMany.png" alt="ToolJet - Mongo DB Find One" style={{marginBottom:'15px'}}/>
+
+#### Example
+```json
+{
+    "status": "cancelled"
+}
+```
+
+### Bulk Operations
 
 Perform bulk operations. [Reference](https://docs.mongodb.com/drivers/node/v4.0/usage-examples/bulkWrite/)
 
-### Dynamic Queries
+#### Required Parameters:
+- **Collection**
+- **Operations**
+
+#### Optional Parameters:
+- **Option**
+
+<img className="screenshot-full" src="/img/datasource-reference/mongo-db/bulkOperations.png" alt="ToolJet - Mongo DB Bulk Operations" style={{marginBottom:'15px'}}/>
+
+#### Example
+```json
+[
+    {
+        "insertOne": {
+            "document": {
+                "item": "apple",
+                "quantity": 50
+            }
+        }
+    }, 
+    {
+        "updateOne": {
+            "filter": {
+                "item": "orange"
+            }, 
+            "update": {
+                "$set": {
+                    "quantity": 100
+                }
+            }
+        }
+    }, 
+    {
+        "deleteOne": {
+            "filter": {
+                "item": "banana"
+            }
+        }
+    }
+]
+```
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Dynamic Queries
+
+Dynamic queries in MongoDB can be used to create flexible and parameterized queries.
+
+#### Example
 
 ```javascript
 { amount: { $lt: '{{ components.textinput1.value }}' }}
@@ -158,3 +519,7 @@ Perform bulk operations. [Reference](https://docs.mongodb.com/drivers/node/v4.0/
 ```
 
 Reference on [mongodb extended JSON](https://docs.mongodb.com/manual/reference/mongodb-extended-json/) supported data types
+
+</div>
+
+</div>

docs/docs/data-sources/mssql.md

@@ -1,18 +1,19 @@
 ---
 id: mssql
-title: MS SQL Server / Azure SQL databases
+title: MS SQL Server / Azure SQL Databases
 ---
 
-# MS SQL Server / Azure SQL databases
-
-
 ToolJet can connect to MS SQL Server & Azure SQL databases to read and write data. 
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
+To establish a connection with the MS SQL Server data source, click on the **+ Add new Data source** button located on the query panel or navigate to the [Data Sources](/docs/data-sources/overview) page from the ToolJet dashboard.
 
-To establish a connection with the MS SQL Server data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
+:::info
+Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP.
+:::
 
 ToolJet requires the following to connect to your PostgreSQL database.
 
@@ -20,23 +21,79 @@ ToolJet requires the following to connect to your PostgreSQL database.
 - **Port**
 - **Username**
 - **Password**
-- **Azure** - Select this option if you are using Azure SQL databases.
+- **Azure**  (Select this option if you are using Azure SQL databases)
 
-It is recommended to create a new database user so that you can control the access levels of ToolJet. 
+**Note:** It is recommended to create a new database user so that you can control the access levels of ToolJet. 
 
-Click on 'Test connection' button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on 'Save' button to save the data source.
-
-<img className="screenshot-full" src="/img/datasource-reference/mssql/connect.gif" alt="ToolJet - Redis connection" height="420"/>
+<img className="screenshot-full" src="/img/datasource-reference/mssql/connect.png" alt="ToolJet - Redis connection"/>
 
 
-## Querying SQL Server / Azure SQL databases
-Click on '+' button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. 
+</div>
 
-Click on the 'run' button to run the query.
+<div style={{paddingTop:'24px'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mssql/query.gif" alt="ToolJet - Redis connection" height="420"/>
+## Querying SQL Server / Azure SQL Databases
 
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the database added in the previous step as the data source.
+
+Once the SQL data source is added, you can create queries to read and write data to the database. You can create queries from the **[Query Panel](/docs/app-builder/query-panel#query-manager)** located at the bottom panel of the app builder.
+
+### SQL Mode
+
+SQL mode can be used to query MS SQL Server / Azure SQL Databases using SQL queries.  
+
+1. Select **SQL mode** from the dropdown.
+2. Enter the SQL query in the editor.
+3. Click on the **Run** button to run the query.
+
+#### Example
+```sql
+SELECT * FROM users
+```
+
+<img className="screenshot-full" src="/img/datasource-reference/mssql/sql mode.png" alt="ToolJet mssql sql mode" style={{marginBottom:'15px'}}/>
+
+#### **Parameterized queries**:
+
+ToolJet offers support for parameterized SQL queries, which enhance security by preventing SQL injection and allow for dynamic query construction. To implement parameterized queries:
+
+1. Use `:parameter_name` as placeholders in your SQL query where you want to insert parameters.
+2. In the **Parameters** section below the query editor, add key-value pairs for each parameter.
+3. The keys should match the parameter names used in the query (without the colon).
+4. The values can be static values or dynamic values using the `{{ }}` notation.
+
+<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/mssql/parameterized-query.png" alt="Postgresql parameterized SQL queries"/>
+</div>
+
+**Example:**
+```yaml
+Query: SELECT * FROM users WHERE username = :username
+SQL Parameters:
+  Key: username
+  Value: oliver // or {{ components.username.value }}
+```
+
+### GUI Mode
+
+GUI mode can be used to query MS SQL Server / Azure SQL Databases without writing queries.
+
+1. Select **GUI mode** from the dropdown.
+2. Choose the operation **Bulk update using the primary key**.
+3. Enter the **Table** name and **Primary key** column name. 
+4. In the editor, enter the records in the form of an array of objects. 
+5. Click on the **Run** button to run the query.
+
+#### Example
+```json
+{{ [ {id: 1, channel: 33}, {id: 2, channel: 24} ] }}
+```
+
+<img className="screenshot-full" src="/img/datasource-reference/mssql/gui mode.png" alt="ToolJet mssql gui mode"/>
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
 :::
+
+</div>

docs/docs/data-sources/mysql.md

@@ -5,9 +5,11 @@ title: MySQL
 
 ToolJet can connect to MySQL databases to read and write data.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To establish a connection with the MySQL data source, you can either click on the `+Add New` button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+To establish a connection with the MySQL data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 <div style={{textAlign: 'center'}}>
 
@@ -22,47 +24,51 @@ Please make sure the **Host/IP** of the database is accessible from your VPC if
 
 **ToolJet requires the following to connect to your MySQL database:**
 
-| Parameter       | Description                                                               |
-| :-------------- | :------------------------------------------------------------------------ |
-| Username        | Username of the MySQL database                                            |
-| Password        | Password of the MySQL database                                            |
-| Database name   | Name of the MySQL database                                                |
-| Connection type | Connection type of the MySQL database: either **Hostname** or **Socket**. |
+- **Username**
+- **Password**
+- **Database Name**
+- **Connection Type**
 
 If you are using **Hostname** as the connection type, you will need to provide the following information:
 
-| Parameter | Description                                  |
-| :-------- | :------------------------------------------- |
-| Host/IP   | Hostname or IP address of the MySQL database |
-| Port      | Port number of the MySQL database            |
-| SSL       | Enable SSL connection to the MySQL database  |
+- **Host/IP**
+- **Port**
+- **SSL**
+- **SSL Certificate**:
+  - **CA Certificate**
+  - **Self-signed Certificate**
+  - **None**
 
 If you are using **Socket** as the connection type, you will need to provide the following information:
 
-| Parameter   | Description             |
-| :---------- | :---------------------- |
-| Socket path | Path of the socket file |
+- **Socket Path**
 
-It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet.
+**Note:** It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mysql/mysqlconnect.png" alt="mysql"/>
+<img className="screenshot-full" src="/img/datasource-reference/mysql/mysqlconnect-v2.png" alt="mysql"/>
 
 </div>
 
-Click on **Test connection** to verify the correctness of the provided credentials and the accessibility of the database to the ToolJet server. Finally, click the **Save** button to save the data source configuration.
+</div>
+
+<div style={{paddingTop:'24px'}}>
 
 ## Querying MySQL
 
-Once the MySQL data source is added, you can create queries to read and write data to the database. You can create queries from the **[Query Panel](/docs/app-builder/query-panel#add)** located at the bottom panel of the app builder.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the database added in the previous step as the data source. 
 
-1. **[SQL mode](/docs/data-sources/mysql#sql-mode)**
-2. **[GUI mode](/docs/data-sources/mysql#gui-mode)**
+Once the MySQL data source is added, you can create queries to read and write data to the database. You can create queries from the **[Query Panel](/docs/app-builder/query-panel#query-manager)** located at the bottom panel of the app builder.
 
-### SQL mode
+### SQL Mode
 
-SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor.
+SQL mode can be used to query MySQL database using SQL queries. 
+
+1. Select **SQL mode** from the dropdown.
+2. Enter the SQL query in the editor.
+3. Click on the **Run** button to run the query.
 
 **Example:**
 
@@ -72,13 +78,41 @@ SELECT * FROM users
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mysql/sqlmode.png" alt="mysql"/>
+<img className="screenshot-full" src="/img/datasource-reference/mysql/sqlmode.png" alt="mysql" style={{marginBottom:'15px'}}/>
 
 </div>
 
-### GUI mode
+#### Parameterized queries:
 
-GUI mode can be used to query MySQL database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects. Each object should contain the primary key column and the columns to be updated.
+ToolJet offers support for parameterized SQL queries, which enhance security by preventing SQL injection and allow for dynamic query construction. To implement parameterized queries:
+
+1. Use `:parameter_name` as placeholders in your SQL query where you want to insert parameters.
+2. In the **Parameters** section below the query editor, add key-value pairs for each parameter.
+3. The keys should match the parameter names used in the query (without the colon).
+4. The values can be static values or dynamic values using the `{{ }}` notation.
+
+<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/mysql/parameterized-query.png" alt="mysql"/>
+</div>
+
+**Example:**
+```yaml
+Query: SELECT * FROM users WHERE username = :username
+SQL Parameters:
+  Key: username
+  Value: oliver // or {{ components.username.value }}
+```
+
+
+### GUI Mode
+
+GUI mode can be used to query MySQL database without writing queries. 
+
+1. Select **GUI mode** from the dropdown.
+2. Choose the operation **Bulk update using primary key**.
+3. Enter the **Table** name and **Primary key column** name.
+4. In the editor enter the records in the form of an array of objects.
+5. Click on the **Run** button to run the query.
 
 **Example:**
 
@@ -95,3 +129,5 @@ GUI mode can be used to query MySQL database without writing queries. Select GUI
 :::tip
 Query results can be transformed using transformations. Learn more about transformations [here](/docs/tutorial/transformations).
 :::
+
+</div>

docs/docs/data-sources/n8n.md

@@ -3,17 +3,17 @@ id: n8n
 title: n8n
 ---
 
-# n8n
-
 ToolJet can trigger n8n workflows using webhook URLs. Please refer [this](https://docs.n8n.io/) to know more about n8n.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To establish a connection with the n8n data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
+To establish a connection with the n8n data source, click on the **+ Add new Data source** button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
 
-n8n webhooks can be called with or without an **Authentication**. You can keep the `Authentication type` as `none` if your webhook didn't have one or if it has one then you can choose the one from the dropdown and provide credentials:
+Webhooks in n8n can be configured to operate with or without **Authentication**. If no authentication is required, select `None` as the **Authentication type**. For webhooks that require authentication, choose the appropriate method from the dropdown and provide the corresponding credentials.
 
-#### Authentication Types
+### Authentication Types
 - **Basic Auth**: To connect your n8n webhooks using basic auth you'll need to provide the following credentials:
     - **Username**
     - **Password**
@@ -38,14 +38,36 @@ n8n webhooks can be called with or without an **Authentication**. You can keep t
 Webhook credentials and instance credentials are different. Please use the credentials that you use with the webhook trigger. Know more: **[Webhook Authentication](https://docs.n8n.io/nodes/n8n-nodes-base.webhook/#:~:text=then%20gets%20deactivated.-,Authentication,-%3A%20The%20Webhook%20node)**.
 :::
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Trigger Workflow
 
-Click on `+` button of the query manager at the bottom panel of the editor and the select n8n as the datasource.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the database added in the previous step as the data source. 
 
-You can trigger a workflow with `GET/POST` URL. Choose the request type from the `Methods` dropdown and then provide the required fields:
-  - **URL parameters** (Support for GET & POST) `Optional`
-  - **Body** (Only for POST URL) `Required`
+Once the n8n data source is added, you can trigger a workflow with `GET/POST` URL. 
 
+### GET Method
 
-<img className="screenshot-full" src="/img/datasource-reference/n8n/query.png" alt="n8n query" />
+Choose the GET Method from the dropdown.
 
+#### Optional Parameter:
+  - **URL parameters** 
+
+<img className="screenshot-full" src="/img/datasource-reference/n8n/get.png" alt="n8n query" style={{marginBottom:'15px'}} />
+
+### POST Method
+
+Choose the POST Method from the dropdown.
+
+#### Required Parameter:
+  - **Body**
+
+#### Optional Parameter:
+  - **URL parameters** 
+
+<img className="screenshot-full" src="/img/datasource-reference/n8n/POST.png" alt="n8n query" />
+
+</div>

docs/docs/data-sources/notion.md

@@ -3,13 +3,13 @@ id: notion
 title: Notion
 ---
 
-# Notion
+ToolJet can connect to a Notion workspace to do operations on notion pages, databases, users and blocks.
 
-ToolJet can connect to a Notion workspace to do operations on notion pages, databases and blocks.
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To establish a connection with the Notion data source, click on the `+Add new data source` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
+To establish a connection with the Notion data source, click on the **+ Add new Data source** button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
 
 For integrating Notion with ToolJet we will need the API token. The API token can be generated from your Notion workspace settings. Read the official Notion docs for [Creating an internal integration with notion API](https://www.notion.so/help/create-integrations-with-the-notion-api).
 
@@ -19,17 +19,35 @@ For integrating Notion with ToolJet we will need the API token. The API token ca
 
 </div>
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Querying Notion
 
 Notion API provides support for:
 
-- **[Database](#database)**
-- **[Page](#page)**
-- **[Block](#blocks)**
-- **[User](#user)**
+- **[Database](#querying-notion-database)**
+- **[Page](#querying-notion-page)**
+- **[Block](#querying-notion-blocks)**
+- **[User](#querying-notion-user)**
 
 <img className="screenshot-full" src="/img/datasource-reference/notion/querying.png" alt="notion querying"/>
 
+:::info
+**Database ID**, **View ID** and **Page ID** can be found using notion workspace URL.
+
+For example:
+
+URL: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ`
+
+Here:
+- `XXX` is the **Database ID**
+- `YYY` is the **View ID**
+- `ZZZ` is the **Page ID**
+
+:::
+
 :::tip
 
 Before querying Notion, you must share the database with your integration. Click the share button in your database view, find your integration name select it.
@@ -38,152 +56,287 @@ Before querying Notion, you must share the database with your integration. Click
 
 :::
 
-### Database
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Querying Notion Database
 
 On database resource you can perform the following operations:
 
-- **[Retrieve a database](#1-retrieve-a-database)**
-- **[Query a database](#2-query-a-database)**
-- **[Create a database](#3-create-a-database)**
-- **[Update a database](#4-update-a-database)**
+- **[Retrieve a database](#retrieve-a-database)**
+- **[Query a database](#query-a-database)**
+- **[Create a database](#create-a-database)**
+- **[Update a database](#update-a-database)**
 
-<img className="screenshot-full" src="/img/datasource-reference/notion/db_q.png" alt="notion db" />
+<img className="screenshot-full" src="/img/datasource-reference/notion/db_q.png" alt="notion db" style={{marginBottom:'15px'}} />
 
-#### 1. Retrieve a database
+### Retrieve a Database
 
 This operations retrieves a Database object using the ID specified.
 
-##### Required parameters:
-
-- **Database ID**: You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID.
-
-<img className="screenshot-full" src="/img/datasource-reference/notion/db_retrieve.png" alt="notion db retrieve" />
-
-#### 2. Query a database
-
-This operation gets a list of **Pages** contained in the database, filtered and ordered according to the filter conditions and sort criteria provided in the query.
-
-##### Required parameters:
-
-- **Database ID** : You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID.
-
-##### Optional parameters:
-
-- **Filter** : This must be an object of filters
-- **Sort** : Array of sort objects
-- **Limit** : limit for pagination
-- **Start Cursor** : Next object id to continue pagination
-
-#### 3. Create a database
-
-This operation creates a database as a subpage in the specified parent page, with the specified properties.
-
-##### Required parameters:
-
-- **Database ID** : You'll find the Database ID in the url. Suppose this is the example url: `https://www.notion.so/workspace/XXX?v=YYY&p=ZZZ` then `XXX` is the database ID, `YYY` is the view ID and `ZZZ` is the page ID.
-- **Page ID** : Page ID of the parent
-- **Properties** : Properties defines the columns in a database
-
-##### Optional parameters:
-
-- **Title** : Title should be an array of rich_text properties
-- **Icon type** : Currently notion api accepts two icon options, emoji, external URL
-- **Icon value** : Value of selected icon type
-- **Icon type** : Currently notion api accepts only external URL
-- **Cover value** : Value of selected cover type
-
-#### 4. Update a database
-
-This operation updates an existing database as specified by the parameters.
-
-##### Required parameters:
+#### Required Parameters:
 
 - **Database ID**
 
-##### Optional parameters:
+<img className="screenshot-full" src="/img/datasource-reference/notion/db_retrieve.png" alt="notion db retrieve" style={{marginBottom:'15px'}} />
 
-- **Title** : Title should be an array of rich_text properties
-- **Properties** : Properties defines the columns in a database
-- **Icon type** : Currently notion api accepts two icon options, emoji, external URL
-- **Icon value** : Value of selected icon type
-- **Icon type** : Currently notion api accepts only external URL
-- **Cover value** : Value of selected cover type
+### Query a Database
 
-### Page
+This operation gets a list of **Pages** contained in the database, filtered and ordered according to the filter conditions and sort criteria provided in the query.
+
+#### Required Parameters:
+
+- **Database ID**
+
+#### Optional Parameters:
+
+- **Filter**
+- **Sort**
+- **Limit**
+- **Start Cursor**
+
+<img className="screenshot-full" src="/img/datasource-reference/notion/db_query.png" alt="notion db query" style={{marginBottom:'15px'}} />
+
+### Create a Database
+
+This operation creates a database as a subpage in the specified parent page, with the specified properties.
+
+#### Required Parameters:
+
+- **Database ID**
+- **Page ID**
+- **Properties**
+
+#### Optional Parameters:
+
+- **Title**
+- **Icon type**
+- **Icon value**
+- **Cover type**
+- **Cover value**
+
+<img className="screenshot-full" src="/img/datasource-reference/notion/db_create.png" alt="notion db create" style={{marginBottom:'15px'}} />
+
+#### Example:
+##### Title
+```yaml
+[
+    {
+      "type": "text",
+      "text": {
+        "content": "Project Tasks Database",
+        "link": null
+      }
+    }
+]
+```
+
+##### Properties
+```yaml
+{
+    "Task Name": {
+      "title": {}
+    },
+    "Due Date": {
+      "date": {}
+    },
+    "Completed": {
+      "checkbox": {}
+    }
+}
+```
+
+### Update a Database
+
+This operation updates an existing database as specified by the parameters.
+
+#### Required Parameters:
+
+- **Database ID**
+
+#### Optional Parameters:
+
+- **Title**
+- **Properties**
+- **Icon type**
+- **Icon value**
+- **Cover type**
+- **Cover value**
+
+<img className="screenshot-full" src="/img/datasource-reference/notion/db_update.png" alt="notion db update" style={{marginBottom:'15px'}} />
+
+#### Example:
+##### Title
+```yaml
+[
+    {
+      "type": "text",
+      "text": {
+        "content": "Updated Tasks Database"
+      }
+    }
+]
+```
+
+##### Properties
+```yaml
+{
+    "Priority": {
+      "select": {
+        "options": [
+          { "name": "High", "color": "red" },
+          { "name": "Medium", "color": "yellow" },
+          { "name": "Low", "color": "green" }
+        ]
+      }
+    },
+    "Assigned To": {
+      "people": {}
+    }
+}
+```
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Querying Notion Page
 
 On page resource you can perform the following operations:
 
-- **[Retrieve a page](#1-retrieve-a-page)**
-- **[Create a page](#2-create-a-page)**
-- **[Update a page](#3-update-a-page)**
-- **[Retrieve a page property](#4-retrieve-a-page-property-item)**
-- **[Archive a page](#5-archive-delete-a-page)**
+- **[Retrieve a page](#retrieve-a-page)**
+- **[Create a page](#create-a-page)**
+- **[Update a page](#update-a-page)**
+- **[Retrieve a page property](#retrieve-a-page-property-item)**
+- **[Archive a page](#archive-delete-a-page)**
 
-<img className="screenshot-full" src="/img/datasource-reference/notion/page_q.png" alt="notion page" />
+<img className="screenshot-full" src="/img/datasource-reference/notion/page_q.png" alt="notion page" style={{marginBottom:'15px'}} />
 
-#### 1. Retrieve a page
+### Retrieve a Page
 
 This operation retrieves a **Page** object using the ID specified.
 
-##### Required parameters:
+#### Required Parameters:
 
 - **Page ID**
 
-#### 2. Create a page
+<img className="screenshot-full" src="/img/datasource-reference/notion/page_retrieve.png" alt="notion page retrieve" style={{marginBottom:'15px'}} />
+
+### Create a Page
 
 This operation creates a new page in the specified database or as a child of an existing page. If the parent is a database, the property values of the new page in the properties parameter must conform to the parent database's property schema. If the parent is a page, the only valid property is title.
 
-##### Parameters:
+#### Required Parameters:
 
-- **Page ID**
-- **Properties** : Property values of this page
-- **Icon type** : Currently notion api accepts two icon options, emoji, external URL
-- **Icon value**: Value of selected icon type
-- **Icon type** : Currently notion api accepts only external URL
-- **Cover value** : Value of selected cover type
+- **Parent Type**
+- **Page/Database ID**
+- **Properties**
 
-#### 3. Update a page
+#### Optional Parameters:
+- **Children (Blocks)**
+- **Icon type**
+- **Icon value**
+- **Cover type**
+- **Cover value**
+
+<img className="screenshot-full" src="/img/datasource-reference/notion/page_create.png" alt="notion page create" style={{marginBottom:'15px'}} />
+
+#### Example:
+```yaml
+{
+    "Title": {
+      "title": [
+        {
+          "type": "text",
+          "text": {
+            "content": "New Page Title"
+          }
+        }
+      ]
+    }
+}
+```
+
+### Update a Page
 
 This operation updates page property values for the specified page. Properties that are not set via the properties parameter will remain unchanged.
 
-##### Parameters:
+#### Required Parameters:
 
 - **Page ID**
-- **Parent type**: A database parent or page parent
-- **Properties** : Property values of this page
-- **Children** : Page content for the new page as an array of block objects
-- **Icon type** : Currently notion api accepts two icon options, emoji, external URL
-- **Icon value**: Value of selected icon type
-- **Icon type** : Currently notion api accepts only external URL
-- **Cover value** : Value of selected cover type
+- **Properties**
 
-#### 4. Retrieve a page property item
+#### Optional Parameters
+
+- **Icon type**
+- **Icon value**
+- **Cover type**
+- **Cover value**
+
+<img className="screenshot-full" src="/img/datasource-reference/notion/page_update.png" alt="notion page update" style={{marginBottom:'15px'}} />
+
+#### Example:
+```yaml
+{
+    "Title": {
+      "title": [
+        {
+          "type": "text",
+          "text": {
+            "content": "Updated Page Title"
+          }
+        }
+      ]
+    },
+    "Status": {
+      "select": {
+        "name": "In Progress"
+      }
+    }
+}
+```
+
+### Retrieve a Page Property Item
 
 This operation retrieves a property_item object for a given page ID and property ID. Depending on the property type, the object returned will either be a value or a paginated list of property item values. See Property item objects for specifics.
 
-##### Parameters:
+#### Required Parameter:
 
 - **Page ID**
+
+#### Optional Parameters:
+
 - **Property ID**
 - **Limit**
 - **Start cursor**
 
-#### 5. Archive (delete) a page
+<img className="screenshot-full" src="/img/datasource-reference/notion/page_retrieve_page_property.png" alt="notion page retrieve page property" style={{marginBottom:'15px'}} />
 
-##### Required parameters:
+### Archive (delete) a Page
+
+This operation archive or un archive the page specified using Page ID.
+
+#### Required Parameters:
 
 - **Page ID**
-- **Archive**: Dropdown for archive and un archive the page
+- **Archive**
 
-### Blocks
+<img className="screenshot-full" src="/img/datasource-reference/notion/page_archive.png" alt="notion page retrieve page property" />
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Querying Notion Blocks
 
 The following operations can be performed on the block resource:
 
-- **[Retrieve a block](#1-retrieve-a-block)**
-- **[Append block children](#2-append-new-block-children)**
-- **[Retrieve block children](#3-retrieve-block-children)**
-- **[Update a block](#4-update-a-block)**
-- **[Delete a block](#5-delete-a-block)**
+- **[Retrieve a block](#retrieve-a-block)**
+- **[Append block children](#append-new-block-children)**
+- **[Retrieve block children](#retrieve-block-children)**
+- **[Update a block](#update-a-block)**
+- **[Delete a block](#delete-a-block)**
 
 <img className="screenshot-full" src="/img/datasource-reference/notion/block_q.png" alt="notion block" />
 
@@ -191,70 +344,120 @@ The following operations can be performed on the block resource:
 To get the id for blocks, simply click on the menu icon for the block and click "Copy link". Afterwards, paste the link in the browser and it should look like this: `https://www.notion.so/Creating-Page-Sample-ee18b8779ae54f358b09221d6665ee15#7fcb3940a1264aadb2ad4ee9ffe11b0e` the string after **#** is the block id i.e. `7fcb3940a1264aadb2ad4ee9ffe11b0e`.
 :::
 
-#### 1. Retrieve a block
+### Retrieve a Block
 
 This operation retrieves a **Block** object using the ID specified.
 
-##### Required parameters:
+#### Required parameters:
 
 - **Block ID**
 
-#### 2. Append new block children
+<img className="screenshot-full" src="/img/datasource-reference/notion/block_retrieve.png" alt="notion block retrieve" style={{marginBottom:'15px'}} />
+
+### Append New Block Children
 
 This operation creates and appends new children blocks to the parent block_id specified.
 
-##### Required parameters:
+#### Required parameters:
 
 - **Block ID**
-- **Children**: Array of block objects
+- **Children**
 
-#### 3. Retrieve block children
+<img className="screenshot-full" src="/img/datasource-reference/notion/block_append.png" alt="notion block append" style={{marginBottom:'15px'}} />
+
+### Retrieve Block Children
 
 This operation retrieves a paginated array of child block objects contained in the block using the ID specified.
 
-##### Required parameters:
+#### Required parameters:
 
 - **Block ID**
+
+#### Optional Parameters:
+
 - **Limit**
 - **Start cursor**
 
-#### 4. Update a block
+<img className="screenshot-full" src="/img/datasource-reference/notion/block_retrieve_block_children.png" alt="notion block append" style={{marginBottom:'15px'}} />
+
+### Update a Block
 
 This operation updates the content for the specified block_id based on the block type.
 
-##### Required parameters:
+#### Required parameters:
 
 - **Block ID**
-- **Properties**: The block object type value with the properties to be updated
+
+#### Optional Parameters:
+
+- **Properties**
 - **Archive**
 
-#### 5. Delete a block
+<img className="screenshot-full" src="/img/datasource-reference/notion/block_update.png" alt="notion block update" style={{marginBottom:'15px'}} />
 
-##### Required parameters:
+#### Example
+```yaml
+{
+    "Title": {
+      "title": [
+        {
+          "type": "text",
+          "text": {
+            "content": "Updated Page Title"
+          }
+        }
+      ]
+    },
+    "Status": {
+      "select": {
+        "name": "In Progress"
+      }
+    }
+}
+```
+
+### Delete a Block
+
+#### Required Parameters:
 
 - **Block ID**
 
-### User
+<img className="screenshot-full" src="/img/datasource-reference/notion/block_delete.png" alt="notion block delete" />
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Querying Notion User
 
 The following operations can be performed on the user notion resource:
 
-#### 1. Retrieve a user from current workspace
+- **[Retrieve a user from current workspace](#retrieve-a-user-from-current-workspace)**
+- **[Retrieve list of users of a workspace](#retrieve-list-of-users-of-a-workspace)**
+
+<img className="screenshot-full" src="/img/datasource-reference/notion/user_q.png" alt="notion user" style={{marginBottom:'15px'}} />
+
+### Retrieve a User From Current Workspace
 
 This operation retrieves a User using the ID specified.
 
-<img className="screenshot-full" src="/img/datasource-reference/notion/user_q.png" alt="notion user" />
-
-##### Required parameters:
+#### Required Parameters:
 
 - **User ID**
 
-#### 2. Retrieve list of users of a workspace
+<img className="screenshot-full" src="/img/datasource-reference/notion/user_retrieve_a_user.png" alt="notion user retrieve a user" style={{marginBottom:'15px'}} />
+
+### Retrieve List of Users of a Workspace
 
 This operation returns a paginated list of Users for the workspace.
 
-##### Required parameters:
+#### Optional Parameters:
 
 - **Limit**
 - **Start cursor**
 
+<img className="screenshot-full" src="/img/datasource-reference/notion/user_list_user.png" alt="notion user list all user" />
+
 [Read more about notion API](https://developers.notion.com/reference/intro)
+
+</div>

docs/docs/data-sources/openapi.md

@@ -3,40 +3,40 @@ id: openapi
 title: OpenAPI
 ---
 
-# OpenAPI
-
 OpenAPI is a specification for designing and documenting RESTful APIs. Using OpenAPI datasource, ToolJet can generate REST API operations from OpenAPI Specs.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To establish a connection with the OpenAPI global datasource, you can either click on the `+Add new global datasource` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+To establish a connection with the OpenAPI datasource, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
-- Connections are created based on OpenAPI specifications.
-- The available authentication methods currently supported are Basic Auth, API Key, Bearer Token, and OAuth 2.0.
-- It is also possible to use specifications that require multiple authentications. Learn more [here](https://swagger.io/docs/specification/authentication/).
+Connections are created based on OpenAPI specifications. The available authentication methods currently supported are Basic Auth, API Key, Bearer Token, and OAuth 2.0. It is also possible to use specifications that require multiple authentications. Learn more [here](https://swagger.io/docs/specification/authentication/).
 
 :::info
 OpenAPI datasource accepts specifications only in **JSON** and **YAML** formats.
 :::
 
-<div style={{textAlign: 'center'}}>
-
 <img className="screenshot-full" src="/img/datasource-reference/openapi/openapiconnect-v2.png" alt="OpenAPI" />
 
 </div>
 
+<div style={{paddingTop:'24px'}}>
+
 ## Querying OpenAPI
 
-- Operations will be automatically generated from the specifications, and each operation will be distinct from others.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **OpenAPI** datasource added in previous step.
+3. Select the desired operation.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
+
+**Note**: Operations will be automatically generated from the specifications, and each operation will be distinct from others.
 
 ### Fields
 
-- **Host** (Base URL): Some specifications may have one or multiple base URLs/servers, and certain operations might have separate base URLs. Therefore, you can choose the appropriate URL from the host selection.
-
+- **Host**
 - **Operation**
 
-<div style={{textAlign: 'center'}}>
-
 <img className="screenshot-full" src="/img/datasource-reference/openapi/query.png" alt="OpenAPI" />
 
-</div>
+</div>

docs/docs/data-sources/oracledb.md

@@ -3,52 +3,111 @@ id: oracledb
 title: Oracle DB
 ---
 
-# Oracle DB
+ToolJet can connect to Oracle databases to read and write data.
 
-ToolJet can connect to Oracle databases to read and write data. 
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To establish a connection with the Oracle DB data source, click on the `+Add new` button located on the query panel or navigate to the [Data Sources](https://docs.tooljet.com/docs/data-sources/overview) page from the ToolJet dashboard.
+To establish a connection with the OracleDB datasource, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+
+ToolJet requires the following to connect to a OracleDB datasource:
 
-A Oracle DB can be connected with the following credentials:
 - **Host**
 - **Port**
-- **SID / Service Name** ( Database name must be a SID / Service Name )
+- **SID / Service Name** (Database name must be a SID / Service Name)
 - **Database Name**
 - **SSL**
 - **Username**
 - **Password**
-- **Client Library Path** ( Only required for local setup )
+- **Client Library Path**
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/oracledb/oracleauth-v3.png" alt="ToolJet - Data source - OracleDB" />
+
+:::info
+ToolJet includes Oracle Instant Client versions 21.10 and 11.2. If you need to use a different client library version:
+- For cloud deployments: You can add a custom client library to a directory of your choice or mount it as a volume in the container.
+- For local setups: You can specify the path to your custom Oracle Client Library.
+
+This allows ToolJet to locate and use the specific drivers for Oracle database connections.
+:::
+
+### Client Versions and Compatibility
+
+ToolJet runs Oracle DB connections in thick mode. By default, ToolJet includes Oracle instant client versions 21.10 and 11.2. These client versions determine which Oracle Database versions you can connect to.
+
+#### Available Client Versions
+- Oracle Instant Client 21.10
+- Oracle Instant Client 11.2
+
+#### Compatibility
+The instant client version affects which Oracle Database versions you can connect to:
+
+- Oracle Instant Client 21.10 is compatible with Oracle Database 11.2 and later versions.
+- Oracle Instant Client 11.2 is compatible with Oracle Database 10.2 and later versions.
 
-![ToolJet - Data source - OracleDB](/img/datasource-reference/oracledb/oracleauth-v2.png)
 
 </div>
 
-Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
+<div style={{paddingTop:'24px'}}>
 
 ## Querying Oracle DB
 
-Once you have added a Oracle DB data source, click on `+` button of the query manager to create a new query. There are two modes by which you can query SQL:
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **OracleDB** datasource added in previous step.
+3. Select the desired query mode.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
-  1. **[SQL mode](/docs/data-sources/oracledb#sql-mode)**
-  2. **[GUI mode](/docs/data-sources/oracledb#gui-mode)**
+</div>
 
-#### SQL mode
+<div style={{paddingTop:'24px'}}>
 
-SQL mode can be used to write raw SQL queries. Select SQL mode from the dropdown and enter the SQL query in the editor. Click on the `run` button to run the query.
+## Supported Operations
 
+- **[SQL mode](/docs/data-sources/oracledb#sql-mode)**
+- **[GUI mode](/docs/data-sources/oracledb#gui-mode)**
 
-#### GUI mode
+<img className="screenshot-full" src="/img/datasource-reference/oracledb/operations.png" alt="ToolJet - Data source - OracleDB" style={{marginBottom:'15px'}}/>
 
-GUI mode can be used to query Oracle database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects. 
+### SQL mode
 
-**Example**: `{{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }}`
+SQL mode can be used to write raw SQL queries.
 
-Click on the **run** button to run the query. **NOTE**: Query should be saved before running.
+```sql
+SELECT first_name, last_name, email
+FROM employees
+WHERE department_id = 10
+ORDER BY last_name;
+```
+
+<img className="screenshot-full" src="/img/datasource-reference/oracledb/sql.png" alt="ToolJet - Data source - OracleDB" style={{marginBottom:'15px'}}/>
+
+### GUI mode
+
+GUI mode can be used to query Oracle database without writing queries.
+
+1. Select GUI mode from the dropdown.
+2. Choose the operation **Bulk update using primary key**.
+3. Enter the **Table** name and **Primary key** column name.
+4. In the editor, enter the records in the form of an array of objects.
+  
+```json
+[
+  {
+    "id": 1,
+    "channel": 33
+  },
+  {
+    "id": 2,
+    "channel": 24
+  }
+]
+```
+
+<img className="screenshot-full" src="/img/datasource-reference/oracledb/gui.png" alt="ToolJet - Data source - OracleDB" style={{marginBottom:'15px'}}/>
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
 :::
+
+</div>

docs/docs/data-sources/overview.md

@@ -65,7 +65,7 @@ Data Source page is available only on **ToolJet version 2.3.0 and above**.
 ## Default data sources
 
 By default, 4 data sources will be available on every app on ToolJet:
-- **[ToolJet Database](/docs/tooljet-database/)**
+- **[ToolJet Database](/docs/tooljet-db/tooljet-database/)**
 - **[RestAPI](/docs/data-sources/restapi/)**
 - **[Run JavaScript Query](/docs/data-sources/run-js/)**
 - **[Run Python Query](/docs/data-sources/run-py/)**

docs/docs/data-sources/postgresql.md

@@ -5,11 +5,20 @@ title: PostgreSQL
 
 ToolJet has the capability to connect to PostgreSQL databases for data retrieval and modification.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Establishing a Connection
 
-To establish a connection with the PostgreSQL global datasource, you can take either of the following steps: click on the "Add new global datasource" button in the query panel, or access the [Global Datasources](/docs/data-sources/overview) page through the ToolJet dashboard.
+To establish a connection with the PostgreSQL data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose PostgreSQL as the data source.
 
-ToolJet requires the following information to connect to your PostgreSQL database:
+ToolJet offers two connection types to connect to your PostgreSQL database:
+
+- **[Manual connection](#manual-connection)**
+- **[Connection string](#connection-string)**
+
+### Manual Connection
+
+To connect to PostgreSQL using Manual connection parameters, select **Manual connection** as the connection type and provide the following details:
 
 - **Host**
 - **Port**
@@ -20,47 +29,68 @@ ToolJet requires the following information to connect to your PostgreSQL databas
 - **Connection Options**
 - **SSL Certificate**
 
-We recommend creating a new PostgreSQL database user to have control over ToolJet's access levels.
+<img className="screenshot-full" src="/img/datasource-reference/postgresql/pgconnection-v2.png" alt="PG connection"/>
 
-:::caution
-Ensure that the host/IP of the database is accessible from your VPC in case you are using self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
+### Connection String
+
+To connect to PostgreSQL using a connection string, select **Connection String** as the connection type and provide the following details:
+
+- **Connection String**
+
+<img className="screenshot-full" src="/img/datasource-reference/postgresql/pgconnection-string.png" alt="PG connection string"/>
+
+<br/><br/><br/>
+
+**Note:** We recommend creating a new PostgreSQL database user to have control over ToolJet's access levels.
+
+:::info
+Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP.
 :::
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/postgresql/pgconnection.png" alt="PG connection"/>
-
 </div>
 
-Click the **Test connection** button to verify the correctness of the credentials and the accessibility of the database to ToolJet server. Click the **Save** button to save the data source.
+<div style={{paddingTop:'24px'}}>
 
 ## Querying PostgreSQL
 
-Click on `+Add` button on the query panel and select the PostgreSQL from the global datasources. 
-
-PostgreSQL query editor has two modes, **SQL** & **GUI**. **[SQL mode](/docs/data-sources/postgresql#sql-mode)** can be used to write raw SQL queries and **[GUI mode](/docs/data-sources/postgresql#gui-mode)** can be used to query your PostgreSQL database without writing queries.
-
-<div style={{textAlign: 'center'}}>
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **PostgreSQL** datasource added in previous step.
+3. Select the query mode from the dropdown and enter the query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 <img className="screenshot-full" src="/img/datasource-reference/postgresql/newquery.png" alt="PG connection"/>
 
-</div>
+### SQL Mode
 
-#### SQL Mode
+To execute SQL queries, select the SQL mode from the dropdown and enter your query in the editor.
 
-To execute SQL queries, select the SQL mode from the dropdown and enter your query in the editor. Click the `Run` button to execute the query.
+<img className="screenshot-full" src="/img/datasource-reference/postgresql/sql-v2.png" alt="PG connection"/>
 
-<div style={{textAlign: 'center'}}>
+#### Parameterized Queries:
 
-<img className="screenshot-full" src="/img/datasource-reference/postgresql/sql1.png" alt="PG connection"/>
+ToolJet offers support for parameterized SQL queries, which enhance security by preventing SQL injection and allow for dynamic query construction. To implement parameterized queries:
 
-</div>
+1. Use `:parameter_name` as placeholders in your SQL query where you want to insert parameters.
+2. In the **Parameters** section below the query editor, add key-value pairs for each parameter.
+3. The keys should match the parameter names used in the query (without the colon).
+4. The values can be static values or dynamic values using the `{{ }}` notation.
 
-#### GUI Mode
+<img className="screenshot-full" src="/img/datasource-reference/postgresql/parameterized-query.png" alt="Postgresql parameterized SQL queries"/>
+
+**Example:**
+
+```yaml
+Query: SELECT * FROM users WHERE username = :username
+SQL Parameters:
+  Key: username
+  Value: oliver // or {{ components.username.value }}
+```
+
+### GUI Mode
 
 Choose the GUI mode from the dropdown and select the operation **Bulk update using primary key**. Provide the **Table** name and the **Primary key column** name. Then, in the editor, input the **records** as an array of objects.
 
-Here is an example of records for a bulk update using the provided format:
+<img className="screenshot-full" src="/img/datasource-reference/postgresql/gui-v2.png" alt="PG connection"/>
 
 ```json
 [
@@ -75,17 +105,9 @@ Here is an example of records for a bulk update using the provided format:
 ]
 ```
 
-Please note that the records should be enclosed within square brackets `[]`, and each record should be represented as an object with key-value pairs.
-
-Click the `Run` button to execute the query.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/postgresql/gui1.png" alt="PG connection"/>
-
-</div>
-
 :::tip
-- You can apply transformations to the query results. Refer to our transformations documentation for more details: **[link](/docs/tutorial/transformations)**
+- You can apply transformations to the query results. Refer to our transformations documentation for more details: **[Transformation Tutorial](/docs/tutorial/transformations)**
 - Check out this how-to guide on **[bulk updating multiple rows](/docs/how-to/bulk-update-multiple-rows)** from a table component.
 :::
+
+</div>

docs/docs/data-sources/redis.md

@@ -5,39 +5,54 @@ title: Redis
 
 ToolJet enables you to execute Redis commands on your Redis instances.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connecting to Redis
 
-To establish a connection with the Redis global datasource, you have two options. You can either click on the **`+Add new global datasource`** button on the query panel or access the **[Global Datasources](/docs/data-sources/overview)** page from the ToolJet dashboard.
+To establish a connection with the Redis data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose Redis as the data source.
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/redis/connect-v2.png" alt="Redis Connection" style={{marginBottom:'15px'}} />
 
-<img className="screenshot-full" src="/img/datasource-reference/redis/gdsredis.gif" alt="Redis" />
+To connect ToolJet with Redis, you need to provide the following connection details:
+
+- **Host**: The address or hostname of the Redis server.
+- **Port**: The port number used by the Redis server (default is 6379).
+- **Username**: The username used for authentication.
+- **Password**: The password used for authentication.
+- **TLS**: Toggle to enable/disable TLS connection.
+- **TLS Certificate**: Choose the type of TLS certificate (None, CA certificate, or Client certificate).
+
+Depending on the TLS certificate option selected, you may need to provide additional information:
+- For **CA certificate**:
+  - **CA Cert**: The CA certificate for TLS connection.
+- For **Client certificate**:
+  - **CA Cert**: The CA certificate for TLS connection.
+  - **Client Key**: The client key for TLS connection.
+  - **Client Cert**: The client certificate for TLS connection.
 
 </div>
 
-**To connect ToolJet with Redis, you need to provide the following connection details:**
+<div style={{paddingTop:'24px'}}>
 
-- **Host**: The address or hostname of the Redis server
-- **Port**: The port number used by the Redis server (default is 6379)
-- **Username**: The username used for authentication 
-- **Password**: The password used for authentication
+## Querying Redis
 
-:::info
-Click on **Test connection** button to verify if the credentials are correct and that the Redis is accessible to ToolJet server. Click on **Save** button to save the data source.
-:::
-
-## Redis Queries
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Redis** datasource added in previous step.
+3. Enter the query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 Here are some examples of Redis commands and their usage. You can refer to the [Redis Official Documentation](https://redis.io/commands) for a complete list of supported commands.
 
 ### PING Command
 
-The `PING` command is used to test the connection to Redis. If the connection is successful, the Redis server will respond with `PONG`.
+The `PING` command is used to test the connection to Redis. If the connection is successful, the Redis server will respond with **PONG**.
 
 ```shell
 PING
 ```
 
+<img className="screenshot-full" src="/img/datasource-reference/redis/ping.png" alt="Redis Connection" style={{marginBottom:'15px'}} />
+
 ### SET Command
 
 The `SET` command is used in Redis to assign a value to a specific key.
@@ -46,18 +61,14 @@ The `SET` command is used in Redis to assign a value to a specific key.
 SET key value
 ```
 
-**Example 1/2:**
+#### Example
 When the input value contains spaces, you should encode the value before providing it as an input:
 
 ```shell
 SET products {{encodeURI('John Doe')}}
 ```
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/redis/encode.png" alt="Redis" />
-
-</div>
+<img className="screenshot-full" src="/img/datasource-reference/redis/encode-v2.png" alt="Redis Example Encode" style={{marginBottom:'15px'}} />
 
 ### GET Command
 
@@ -67,21 +78,24 @@ The `GET` command is used in Redis to retrieve the value associated with a speci
 GET key
 ```
 
-**Example 2/2:**
-To retrieve a value that was previously encoded while setting, you can use transformations. 
+#### Example
+To retrieve a value that was previously encoded while setting, you can use transformations.
 
-- Enter the GET command in the editor:
+1. Enter the GET command in the editor:
   ```shell
   GET products
   ```
 
-- Enable Transformations (JS) and use `decodeURI`:
+2. Enable Transformations (JS) and use `decodeURI`:
+
   ```js
   return JSON.parse(decodeURI(data));
   ```
 
   <div style={{textAlign: 'center'}}>
 
-  <img className="screenshot-full" src="/img/datasource-reference/redis/decode.png" alt="Redis" />
+  <img className="screenshot-full" src="/img/datasource-reference/redis/decode-v2.png" alt="Redis Example Decode" />
 
-  </div>
+  </div>
+  
+</div>

docs/docs/data-sources/restapi/authentication.md

@@ -0,0 +1,112 @@
+---
+id: authentication
+title: Authentication
+---
+
+ToolJet’s REST API data source supports various authentication types to authenticate the user with the REST API service. The supported authentication types are Basic, Bearer, and OAuth 2.0.
+
+## Basic Authentication
+
+ToolJet’s REST API data source supports Basic Authentication as the authentication type. Basic Authentication is a simple authentication scheme built into the HTTP protocol.
+
+### Configuring REST API Data Source with Basic Authentication
+
+1. Go to the **Data Sources** page from the ToolJet dashboard, select **API** category on sidebar and choose the **REST API** data source.
+2. In the **Base URL** field, enter the base URL. The base URL specifies the network address of the API service. For example, `http://localhost:3001/api/basic-auth`
+3. Enter the **Headers** if required. Headers are key-value pairs to include as headers with REST API requests.
+4. Select **Authentication** type as *Basic* from the dropdown.
+5. Enter the **Username** and **Password** in the respective fields. The username and password are the credentials required to authenticate the user.
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/basic.png" alt="ToolJet - Data source - REST API" />
+
+
+
+## Bearer Token Authentication
+
+ToolJet’s REST API data source supports Bearer Token as the authentication type. Bearer Token is a security token that is issued by the authentication server to the client. The client then uses the token to access the protected resources hosted by the resource server.
+
+### Configuring REST API Data Source with Bearer Token
+
+1. Go to the **Data Sources** page from the ToolJet dashboard, select **API** category on sidebar and choose the **REST API** data source.
+2. In the **Base URL** field, enter the base URL. The base URL specifies the network address of the API service. For example, `http://localhost:3001/api/bearer-auth`
+3. Enter the **Headers** if required. Headers are key-value pairs to include as headers with REST API requests.
+4. Select **Authentication** type as *Bearer* from the dropdown.
+5. Enter the **Token** in the field. The token is a security token that is issued by the authentication server to the client. The client then uses the token to access the protected resources hosted by the resource server.
+  
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/none.png" alt="ToolJet - Data source - REST API" />
+
+6. Now you have option to select the **SSL Certificate** if required. SSL certificate is used to verify the server certificate. By default, it is set to *None*. You can provide the **CA Certificate** or **Client Certificate** from the dropdown.
+    1. **CA Certificate**: Requires a CA certificate to verify the server certificate. Copy the content of `server.crt` file and paste it in the **CA Cert** field. `server.crt` file is the certificate file that is used to verify the server certificate.
+  
+        <img className="screenshot-full" src="/img/datasource-reference/rest-api/cacert.png" alt="ToolJet - Data source - REST API" />
+
+    2. **Client Certificate**: Requires a client certificate to authenticate with the server. **client.key**, **client.crt**, and **server.crt** files are the certificate files that are used to authenticate with the server. Copy the content of **client.key** file and paste it in the **Client Key** field. Copy the content of **client.crt** file and paste it in the **Client Cert** field. Copy the content of **server.crt** file and paste it in the **CA Cert** field.
+  
+        <img className="screenshot-full" src="/img/datasource-reference/rest-api/clientcert.png" alt="ToolJet - Data source - REST API" />
+
+7. Once you have configured the REST API data source, click on the **Save** button.
+
+### Authenticating REST API
+
+Create a query to make a `GET` request to the URL, and it will return a success message if the token is valid.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/bearersuccess.png" alt="ToolJet - Data source - REST API" />
+
+</div>
+
+## OAuth 2.0 Authentication
+
+ToolJet’s REST API data source supports OAuth 2.0 as the authentication type. Supported OAuth 2.0 grant types are Authorization Code and Client Credentials.
+
+- **Authorization Code Grant Type**: This grant type is used by confidential and public clients to exchange an authorization code for an access token.
+- **Client Credentials Grant Type**: This grant type is used by clients to obtain an access token outside of the context of a user.
+
+### Setting up Google Cloud Platform
+
+:::info
+Before setting up the REST API data source in ToolJet, we need to configure the **Google Cloud Platform** to gather the API keys required for the authorization access.
+:::
+
+Google Cloud Platform provides access to more than 350 APIs and Services that can allow us to access data from our Google account and its services. Let's create an OAuth application that can be given permission to use our Google profile data such as Name and Profile picture.
+
+1. Sign in to your [Google Cloud](https://cloud.google.com/) account, and from the console create a New Project.
+2. Navigate to the **APIs and Services**, and then open the **OAuth consent screen** section from the left sidebar.
+3. Enter the Application details and select the appropriate scopes for your application. We will select the profile and the email scopes. 
+4. Once you have created the OAuth consent screen, Create new credentials for the **OAuth client ID** from the **Credentials** section in the left sidebar.
+5. Select the application type, enter the application name, and then add the following URIs under Authorized Redirect URIs:
+    1. `https://app.tooljet.com/oauth2/authorize` (if you’re using ToolJet cloud)
+    2. `http://localhost:8082/oauth2/authorize` (if you’re using ToolJet locally)
+6. Now save and then you’ll get the **Client ID and Client secret** for your application.
+
+<img class="screenshot-full" src="/img/how-to/oauth2-authorization/gcp.png" alt="ToolJet - How To - REST API authentication using OAuth 2.0" style={{marginBottom:'15px'}}/>
+
+### Configuring ToolJet Application with Google's OAuth 2.0 API
+
+Let's follow the steps to authorize ToolJet to access your Google profile data:
+
+1. Go to the **Data Sources** page from the ToolJet dashboard, select API category on sidebar and choose the **REST API** data source.
+2. In the **Base URL** field, enter the base URL `https://www.googleapis.com/oauth2/v1/userinfo`; the base URL specifies the network address of the API service.
+3. Select **Authentication** type as *OAuth 2.0*
+4. Keep the default values for **Grant Type**, **Add Access Token To**, and **Header Prefix** i.e. *Authorization Code*, *Request Header*, and *Bearer* respectively.
+5. Enter **Access Token URL**: `https://oauth2.googleapis.com/token`; this token allows users to verify their identity, and in return, receive a unique access token.
+6. Enter the **Client ID** and **Client Secret** that we generated from the [Google Console](http://console.developers.google.com/).
+7. In the **Scope** field, enter `https://www.googleapis.com/auth/userinfo.profile`; Scope is a mechanism in OAuth 2.0 to limit an application's access to a user's account. Check the scopes available for [Google OAuth2 API here](https://developers.google.com/identity/protocols/oauth2/scopes#oauth2).
+8. Enter **Authorization URL:** `https://accounts.google.com/o/oauth2/v2/auth`; the Authorization URL requests authorization from the user and redirects to retrieve an authorization code from identity server.
+9. Create three **Custom Authentication Parameters:**
+    1. **response_type**: code ( `code` refers to the Authorization Code)
+    2. **client_id**: Client ID
+    3. **redirect_url**: `http://localhost:8082/oauth2/authorize` if using ToolJet locally or enter this `https://app.tooljet.com/oauth2/authorize` if using ToolJet Cloud.
+10. Keep the default selection for **Client Authentication** and **Save** the data source.
+
+<img class="screenshot-full" src="/img/how-to/oauth2-authorization/restapi-v2.png" alt="ToolJet - How To - REST API authentication using OAuth 2.0" style={{marginBottom:'15px'}}/>
+
+### Authenticating REST API
+
+Let’s create a query to make a `GET` request to the URL, it will pop a new window and ask the user to authenticate against the API.
+
+- Add a new query and select the REST API data source from the dropdown
+- In the **Method** dropdown select `GET` and enable the  `Run query on application load?`
+- Run the query. 
+- A new window will pop for authentication and once auth is successful, you can run the query again to get the user data like Name and Profile Picture.

docs/docs/data-sources/restapi/configuration.md

@@ -0,0 +1,78 @@
+---
+id: configuration
+title: Configuration
+slug: /data-sources/restapi/
+---
+
+ToolJet can establish connections with any available REST API endpoint, allowing you to create queries and interact with external data sources seamlessly.
+
+## Setting up a REST API Data Source 
+
+<div>
+
+To establish a connection with the REST API data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/restconnect.gif" alt="ToolJet - Data source - REST API" style={{marginBottom:'15px'}} />
+
+ToolJet requires the following to connect to a REST API data source:
+
+- **[Credentials](#credentials)**
+- **[Authentication](#authentication)**
+- **[Secure Sockets Layer (SSL)](#secure-sockets-layer-ssl)**
+
+<div style={{paddingTop:'24px'}}>
+
+### Credentials
+
+- **Base URL**: The base URL specifies the network address of the API service.
+- **Headers**: Key-value pairs to include as headers with REST API requests.
+- **URL Parameters**: Key-value pairs to include as URL parameters with REST API requests.
+- **Body**: Key-value pairs to include as the body of the request.
+- **Cookies**: Key-value pairs to include as cookies with REST API requests. These cookies will be sent with every query created using this data source instance.
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/credentials.png" alt="REST API - Credentials" />
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+### Authentication
+
+:::info
+For a detailed explanation of the authentication types supported by REST API data sources, refer to the **[Authentication](./authentication)** section.
+:::
+
+ToolJet supports the following authentication types for REST API data sources:
+
+- **None**: No authentication required.
+- **Basic**: Requires Username and Password.
+- **Bearer**: Requires a token, typically a JSON Web Token (JWT), to grant access.
+- **OAuth 2.0**: Supports both Authorization Code and Client Credentials grant types. Required parameters vary based on the selected grant type and service provider.
+    - Access token URL
+    - Access token URL custom headers
+    - Client ID
+    - Client secret
+    - Scopes
+    - Custom query parameters
+    - Authorization URL
+    - Custom authentication parameters
+    - Client authentication method
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/authentication.png" alt="REST API - Authentication" />
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+### Secure Sockets Layer (SSL)
+
+- **SSL Certificate**: SSL certificate to use with REST API requests. Supported Types:
+  - **None**: No SSL certificate verification.
+  - **CA Certificate**: Requires a CA certificate to verify the server certificate.
+  - **Client Certificate**: Requires a client certificate, client key, and CA certificate to authenticate with the server.
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/ssl.png" alt="REST API - SSL Certificate" />
+
+</div>
+
+</div>

docs/docs/data-sources/restapi/metadata-and-cookies.md

@@ -0,0 +1,78 @@
+---
+id: metadata-and-cookies
+title: Metadata and Cookies
+---
+
+## Metadata
+
+Metadata is additional information about the data returned by the REST API. This information includes the request URL, method, headers, and response status code, headers, and body. The metadata can be accessed within queries and components using the `{{queries.<queryname>.metadata}}` syntax.
+
+:::info
+While accessing the properties of the metadata object, which contains a hyphen, you can use the bracket notation. For example, to access the `user-agent` property, you can use `{{queries.restapi1.metadata.request.headers["user-agent"]}}` or `{{queries.restapi1.metadata.request.headers."user-agent"}}`.
+:::
+
+<details>
+<summary>**Example Metadata**</summary>
+
+```json
+{
+  "request": {
+    "url": "https://dummyjson.com/users",
+    "method": "GET",
+    "headers": {
+      "user-agent": "got (https://github.com/sindresorhus/got)",
+      "tj-x-forwarded-for": "103.171.99.41",
+      "accept-encoding": "gzip, deflate, br"
+    },
+    "params": {}
+  },
+  "response": {
+    "statusCode": 200,
+    "headers": {
+      "server": "[REDACTED]",
+      "report-to": "{"group":"heroku-nel","max_age":3600,"endpoints":[{"url":"https://nel.heroku.com/reports?ts=1726207652&sid=e11707d5-02a7-43ef-b45e-2cf4d2036f7d&s=1ICCahr5yl4s1cOLwZ5JI7Le2a5Hp57L8DugEP6oEZQ%3D"}]}",
+      "reporting-endpoints": "heroku-nel=https://nel.heroku.com/reports?ts=1726207652&sid=e11707d5-02a7-43ef-b45e-2cf4d2036f7d&s=1ICCahr5yl4s1cOLwZ5JI7Le2a5Hp57L8DugEP6oEZQ%3D",
+      "nel": "{"report_to":"heroku-nel","max_age":3600,"success_fraction":0.005,"failure_fraction":0.05,"response_headers":["Via"]}",
+      "connection": "close",
+      "access-control-allow-origin": "*",
+      "x-dns-prefetch-control": "off",
+      "x-frame-options": "SAMEORIGIN",
+      "strict-transport-security": "max-age=15552000; includeSubDomains",
+      "x-download-options": "noopen",
+      "x-content-type-options": "nosniff",
+      "x-xss-protection": "1; mode=block",
+      "x-ratelimit-limit": "100",
+      "x-ratelimit-remaining": "99",
+      "date": "Fri, 13 Sep 2024 06:07:32 GMT",
+      "x-ratelimit-reset": "1726207656",
+      "content-type": "application/json; charset=utf-8",
+      "etag": "W/"7d39-+rQ7kyHBCLIn9tjTeKVf4oegWkQ"",
+      "vary": "Accept-Encoding",
+      "content-encoding": "gzip",
+      "transfer-encoding": "chunked",
+      "via": "1.1 vegur"
+    }
+  }
+}
+```
+</details>
+
+## Cookies
+
+In addition to the data source level cookies, you can add query-specific cookies in the Query builder. These cookies will be sent only with the specific query created using this data source instance.
+
+To add cookies:
+
+1. In the Query builder, navigate to the **Setup** tab.
+2. Find the **Cookies** section.
+3. Add your cookies as key-value pairs.
+
+You can use both static values and dynamic values for cookie values.
+
+<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/query-cookies.png" alt="ToolJet - Query Builder - REST API Cookies" />
+</div>
+
+:::info
+Query-specific cookies will override data source level cookies with the same name for that particular query.
+:::

docs/docs/data-sources/restapi/querying-rest-api.md

@@ -0,0 +1,164 @@
+---
+id: querying-rest-api
+title: Querying REST API
+---
+
+## Creating Queries
+
+Once you have connected to the REST API data source, you can easily write queries and interact with the REST API in the ToolJet application. Follow these steps to get started:
+
+1. Click on the **+ Add** button in the query manager at the bottom panel of the editor.
+2. Select **REST API** from the Data Source section.
+3. Enter the required query parameters.
+4. Click **Preview** to view the data returned from the query or click **Run** to execute the query.
+
+:::tip
+You can also transform the query results using the **[Transformations](/docs/how-to/transformations)** feature.
+:::
+
+ToolJet supports the following REST HTTP methods:
+- **GET**
+- **POST**
+- **PUT**
+- **PATCH**
+- **DELETE**
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/restquery.png" alt="ToolJet - Data source - REST API" />
+
+<div style={{paddingTop:'24px'}}>
+
+### Additional header
+
+Whenever a request is made to the REST API, a **tj-x-forwarded-for** header is added to the request, the value of the header will be the IP address of the user who is logged in to the ToolJet application. This header can be used to identify the user who is making the request to the REST API.
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/header.png" alt="ToolJet - Data source - REST API"/>
+
+</div>
+
+
+## Request/Content Types
+
+REST API sends a **JSON** formatted body by default. If you want to send a different type of body, you can enter the appropriate headers in the **Headers** section.
+
+For example, to send a **multipart/form-data** body, you can add the following header:
+
+```javascript
+  Content-Type: multipart/form-data;
+```
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/form-headers.png" alt="ToolJet - Data source - REST API" />
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/form-body.png" alt="ToolJet - Data source - REST API" />
+
+
+## Response Types and Handling
+
+REST APIs can return data in a variety of formats, including **JSON** and **Base64**. JSON is a common format used for data exchange in REST APIs, while Base64 is often used for encoding binary data, such as images or video, within a JSON response.
+When the response **content-type** is **image**, the response will be a **base64** string.
+
+<details>
+<summary>**Example JSON response**</summary>
+
+```json
+[
+  {
+    "id": 1,
+    "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
+    "price": 109.95,
+    "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
+    "category": "men's clothing",
+    "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
+    "rating": {
+      "rate": 3.9,
+      "count": 120
+    }
+  },
+  {
+    "id": 2,
+    "title": "Mens Casual Premium Slim Fit T-Shirts ",
+    "price": 22.3,
+    "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.",
+    "category": "men's clothing",
+    "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
+    "rating": {
+      "rate": 4.1,
+      "count": 259
+    }
+  },
+  {
+    "id": 3,
+    "title": "Mens Cotton Jacket",
+    "price": 55.99,
+    "description": "great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.",
+    "category": "men's clothing",
+    "image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
+    "rating": {
+      "rate": 4.7,
+      "count": 500
+    }
+  },
+  {
+    "id": 4,
+    "title": "Mens Casual Slim Fit",
+    "price": 15.99,
+    "description": "The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.",
+    "category": "men's clothing",
+    "image": "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg",
+    "rating": {
+      "rate": 2.1,
+      "count": 430
+    }
+  }
+]
+```
+
+The JSON response can be easily loaded on the components like **table** and **listview** using `{{queries.<queryname>.data}}`
+
+</details>
+
+You can also use JS methods like **map** to load data on components like **dropdown** using **`{{queries.restapi1.data.map(i => i.title)}}`**
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/map.png" alt="ToolJet - Data source - REST API" style={{marginBottom:'15px'}} />
+
+<details>
+<summary>**Example base64 response**</summary>
+```base64
+iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAA/FBMVEVAYt79/f1AYt/9/f79/ftAY9s/Y93v/P89ZNv8/v38/f/9/vj9/vr+/Pz//P49ZNw8ZddUb86QpMlCYOX1//9AYeI6XdaXp+C1x+nL2fj+/vU2WMZVb8iPnsU3Xt00WNY7ZtU0WMuJncs8W8JDY801W986V9BTacRleMF+kNClt+CsvuFtiNYvVMRcedaZq9Lb5/eCl9K8zOJJWcqlr9xdb8C6w+w7XsCmvt3S5fs5ac1whs7l8v/6//B9j8wvVLrO2+o+Y7t6kMODotxPbL0+WOLf3/aesdVmfbvL5PentOmDl99RbtdMXcGOnNqTqdp+luIyVrLr7Pq/2/3mMzS8AAAKxUlEQVR4nO2cC1vbthrHLVmWJUuW3dlywWYkIRAorG1K6SgjgV5g3a3jbOf7f5fzygngcCvbeobN8/7a8rQl7eO/Jf3fiyV7HoIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIIgCIL8H+CBI0kSzj3OA5Gm9V8EQojAsw99dV8DUMg5tzYDLLWgktbAb4CHvrqvwWwM6zETMJJpmgqRwg9qLeXiMUisFcK4cZifqxsbvXMKmtlHpNDrjarNrWdPt3d2luZ8JzzL004rdGvNERSD5y9eLo9DMkc7yDfrAYxr8MAX+XdxvunWmfPLwf6r3VASIiVjMYkJ/IzhK/mmECLrrEKPJmm/vy5sb3i4O5FRzMg1uq2QOmMRxej13liWpWKxeWwKnXfa3ovtEPQxwvwoemwKPS6qN9+HqixjYyLHo1IIJpMV+29DCbOTMOVm6XV9XVTo4h73wD8Tz1ZnIZGRE8ZqHo/CIEhFElTfHeRSkxtm5iNQmP4gNl7v5ErFxpfSRb/HpVCAh1aHk7zUxhg91ezRKYRM5vV2Pi1Bn/HZzQbTSYVgnlDtwQB6xQ9jaUzMyrLU0Q1R/gKfkA+FCLKgGwrTxEKVIIQdHYXEj30ia//0b1EXRQxuA/ku5WC8XagtKOTZnqvcs9FZLu+cmBcKGajfTD3riYe++ntBaZCmCaXPvydTJV3h8AWdkrBS58cCbk43Jilk2Wk/Fe8PdBzrmYbaQ28zGqYNm8p3VRcm6JwAbGb9/UGuiGlG+dvWIVMmLuV2QR/6uu8PLKji/YGMIqXmqmQjVviMRX5z3rLSN2V+tNoJhbCQXDaa2c1JTPxIsplCJiM11eO1N09enB3kGuLjZWyUxDCp2eT9Q1/7/eFBulFBGFyYiFJOXg0Lm9nB8GUOsaG5Jk2sS7JbPfR13w+oJayl6XBZl5crEEYpVuGbDYgFaSq86izXrKnfmHIqj2wnJil4jLVeMlxmoEk2FJr8Q5GlPF3vwwwevpOqqdCt18l+1hmFXnq8k8NKK7XvX0QIOd7niQD1NIOJuiZVvKCQkbdVK8fQXdP8ocOcwKNi+BHK3CiS9eidx4OdHuUW5mia9pPiDdELCmUsT1rZCqYZFQIGhQ6qwWhQOYaD0fGHUF4NfYy8LJLUlRpQcFBvhUC8uPxubNTSIG3lGEL9zr3R52c7yw0gGlxLXpjeGdnz50pUHBK1cAtYfrgqaCsVJnTwfu9PKbUq6868Zlorra8KhJg+Oc4srzVQWr2UC7NU5u+q7KG13Ai1XvUxJE4TY1o5Yqa0jK4k2j6sw/zVwNLZIKZ/jBe9VOZbvcy2MeemdLgkQRJoAkCYjHy//u3VdegbGZ4EM4V8/YMslbn4BNyOn0c2pS1TSF0d7w13ZclchyKGWVp3CSHXNjd0KyKj1MFm4W6KV2z9GU/PFcInYU4/O7X9llkpzdJ1TqvvCVGs7l+fd0ChkPevVUlQIhpd5pO1/UFRHB+F7hOzWQpVhVTkx+e2bSMIK1CIZHhG3Hh9oQs6V65Vnufjt5/ejqPmFGYxfOOoeGg9V6EeDaitPkifKPWlPu8MpWB16lKD7ZaNIfYlDP7y/kMLugaYvqDFYVi7p38/hRqSz3JaSskgWrJZtsPg7qh4ctLK3gwvPo/rBprv31a5L+CEgeeC386fOs3+lR9ruTd4aDE3we1gj6j6KZl/d5u3lgdOEysF4vyYXaxbxiT8EVJy58uzHLcd0CQBl6FbOcyx6F7jdy5o4Y++0XCH1DTcKtq2S4jzhHM+3M2Z+SsCrw+sli6EbFde0rJIkXC3p+KnUM4LpL8JK6UxSv+8T2nbHlUIDgIHu1DD/kOFviFy8p5n7VOYQAKyImNtIA/9BwqVgVz1MF21om21L7iMV237cWx8yD/dZp/4fMvPPYHlC2FGxiQ/G0F2K9L22GiN6NtsM3T1EqsLQlan3sb4vpQ37bC4Thzp6dQ3U/1LL6n/y5Yp9FKe/RpeI/eZi3j3mZ8liSDzZvnusdey+VlDsyD1fjtZucpTQspS3U8hjDozcnmYijbuCKYZTUUg6Oo5s72+We/bHOra+1gP064DrA72My5a2X3i1BOCpw04FyJNh9/m7IuVlMtr/MiHSH+wX1ietHEMvZTaQCT1luxgvjHbbbrg2fDbO/eSOHyXqYMdKbI8zGgAJVgbx7DuRHjzveezn/Uv6w3W8hJKjdsdNYJcFKoLJuXS/motrp0CbwFm7/CbHIr+Ut+m0Jdag9FMIRkNvFa2R2/k/EIFzfhw7U5HZYoZCKL5WWVtG+PEzVyMBKzEzA5qR731aTbECS0nTwb9fvqQ1/w3qX2Dg6MSdrtCn+jdz6c27bctF70der7/3nPOKpI7HRWybZiiG+7sCE14J2wGErjMZQCXtnG3o0ods6erwcWxhNbjLtSd5uGurTEbkrsdNVJOYWcmaP1kBpIZqGHT/nlD8G5HjRTrlkKv3uW8QbnbfzDjbkftlMJ6TqaJ5dWvK+40z7wTcbejyg4pnFkF5KjH2/n4xIOJOpPI3Yav2lFv2kwKCklHFFIL6Tf3RNZbIkaNV/ru/CC/dFQKjqpcJ2Zhz0UcO4VFJxR6roSCL71fpCGxnGyKdO6oNTNHlQYyGLOgUMvOKAygRqS297vURkdK/7iZWueoc4XgqN5wTfpQSiwqhAKyI7PUc3u4OX8RljFzYRwmKhWXjprWjvrJGWrzkFrs2lW/d0Qh5Fw8PV6GtcZkvTt0stlwVFE76lYOCnVjezcojMizrii0VKy/IjKXkfadzrJ2VDHfJ8WdyidhqV1PNbpUaAzZ6kjhlNr++v6YESn9+rESY/5kxSbNrgR9Ehq28MjJ9aDCzW7s0ONpJtaPmp013+STTds8S2BBoSYLh0V9ow8Gqw932X8BnlpbLTd3d0FlpMZPmi1eN4ZaNhVGpJRnvVY+074CrZ9ArYSzfTMzCayMVf6f4m6FchoOW7ev5Gao109eLZS6vlH505G4TWH9FWLF3qDfyh7pFdzB8/76LjNmdt4Hph9jJv9Y9a86zeUY+u5UkByvix9sFyRCOLB/TAxziadSzEDIV5OjChK3xmcuFYLRGshvGAu3NsT6bJa23VB5kJ1IwzSLIohxUNDny5sDzwbNFlpzDCEswt3IfyoyLjoSLfjqM1lHu9ht22Ph09enGU0WbLKpMNJlSSY/VVmW8NNOKPSC3ieoAN0zFqV1tDQsAtci9LIb1mGdD+RKHmxuQCLUmU5pMFrSsdsuJPNwaWsEhYVLvPk1p6lzmpgwOdmrYAFCRSK6InHwzm3Dk2R8tjIKkoSvur6iaE7TVVBI3HEnyOv+3DsZ9hPIzGlmk9a7jOdK/OzzRJPw3aeV54V75QWft4abSTVkbao+7zNZ2no+8gJeb/PuTKc0efLfnVcrw4F7Z8lsb/O1z8AYlpHMD9ZOKtoN/2zC+/1qULjn2zaZr6trGmAdynz3qCq4O5Lxb1/hP8Zt/QLTSO56O9dKuHsyPLX1C8v+zWv7OoBpBvVLulwmessA/Xb4mvJT1xZPu6eQu/d0uQNB1rvlAL17jlGcZn337jk+exLTrZlKvfmL5O78DKUBP//44+TRCkMQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEEQBEGQr8n/ABGyzAUL7/lcAAAAAElFTkSuQmCC
+```
+</details>
+
+Read the guide on **[loading base64 data](/docs/how-to/loading-image-pdf-from-db)**
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/base64.png" alt="ToolJet - Data source - REST API" />
+
+
+## Retry on Network Errors
+
+ToolJet provides an option to automatically retry REST API requests in case of certain network errors or specific HTTP status codes. By default, this feature is enabled and will retry the request up to 3 times in case of failure. This feature can be toggled on or off at both the data source level and the individual query level. When enabled, retries will occur for the following scenarios:
+
+1. Specific HTTP status codes: 408, 413, 429, 500, 502, 503, 504, 521, 522, 524.
+2. Network errors:
+   - **ETIMEDOUT**: One of the timeout limits was reached.
+   - **ECONNRESET**: Connection was forcibly closed by a peer.
+   - **EADDRINUSE**: Could not bind to any free port.
+   - **ECONNREFUSED**: Connection was refused by the server.
+   - **EPIPE**: The remote side of the stream being written has been closed.
+   - **ENOTFOUND**: Couldn't resolve the hostname to an IP address.
+   - **ENETUNREACH**: No internet connection.
+   - **EAI_AGAIN**: DNS lookup timed out.
+
+You can configure this feature at two levels:
+
+### Data Source Level
+ In the REST API data source configuration, you'll find a toggle for **Retry on network errors** This sets the default behavior for all queries using this data source.
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/rest-api-data-source.png" alt="ToolJet - Data source - REST API" />
+
+### Query Level
+ In the query builder for each REST API query, you'll find a similar toggle for for **Retry on network errors** under the **Settings** tab. This sets the behavior for that specific query.
+
+<img className="screenshot-full" src="/img/datasource-reference/rest-api/query-builder-retry.png" alt="ToolJet - Data source - REST API" />
+
+:::info
+If the data source-level configuration is enabled but a specific query has it disabled, the query-level setting takes precedence.
+:::

docs/docs/data-sources/rethinkdb.md

@@ -4,49 +4,225 @@ title: RethinkDB
 ---
 # RethinkDB
 
-ToolJet can connect to RethinkDB databases to read and write data. For more info visit this [doc](https://rethinkdb.com/api/javascript).
+ToolJet can connect to RethinkDB databases to read and write data. For more info visit this [Rethink Docs](https://rethinkdb.com/api/javascript).
 
-<img class="screenshot-full" src="/img/datasource-reference/rethink/rethink_auth.png" alt="ToolJet - Data source - RethinkDB" height="420" />
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-ToolJet connects to InfluxDB using :
+To establish a connection with the RethinkDB data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+
+ToolJet requires the following to connect to a RethinkDB data source:
 
 - **Database**
 - **Host**
-- **Port**
 - **Username** 
 - **Password** 
+- **Port**
 
+<img className="screenshot-full" src="/img/datasource-reference/rethink/connection.png"  alt="RethinkDB Connection Page" />
 
-## Supported queries:
+</div>
 
-- Delete database
+<div style={{paddingTop:'24px'}}>
 
-- Delete Table
+## Querying RethinkDB
 
-- Create database
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the RethinkDB data source added in the previous step.
+3. Select the desired operation.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
-- Create Table
+<img className="screenshot-full" src="/img/datasource-reference/rethink/operations.png"  alt="RethinkDB Connection Page" />
 
-- List table
+</div>
 
-- List database
+<div style={{paddingTop:'24px'}}>
 
-- Get all documents
+## Supported Queries
 
-- Insert table data
-
-- Update all table data
-
-- Update by id
-
-- Delete table data by id
-
-- Delete all table data
-
-- Get document from primary key
+- **[Create database](#create-database)**
+- **[Create table](#create-table)**
+- **[Delete database](#delete-database)**
+- **[Delete table](#delete-table)**
+- **[List all database](#list-all-database)**
+- **[List all table](#list-all-table)**
+- **[List all documents](#list-all-documents)**
+- **[Insert document](#insert-document)**
+- **[Retrieve document by key](#retrieve-document-by-key)**
+- **[Update document using ID](#update-document-using-id)**
+- **[Update all documents](#update-all-documents)**
+- **[Delete document using ID](#delete-document-using-id)**
+- **[Delete all documents](#delete-all-documents)**
 
 :::info
-NOTE: Name field in all operation is database name if not given will take the default database used for connection.
+NOTE: The name field in all operations is the database name if not given will take the default database used for the connection.
 :::
+
+### Create Database
+
+Creates a new database in RethinkDB.
+
+#### Required Parameter
+- **Database Name**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/create-db.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### Create Table
+
+Creates a new table in a specified database.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/create-table.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### Delete Database
+
+Deletes an existing database in RethinkDB.
+
+#### Required Parameter
+- **Database Name**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/delete-db.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### Delete Table
+
+Deletes a table from a specified database.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/delete-table.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### List All Database
+
+Lists all available databases.
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/list-database.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### List All Table
+
+Lists all tables in a specified database.
+
+#### Required Parameter
+- **Database Name**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/list-table.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### List All Documents
+
+Retrieves all documents from a specified table.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/list-docs.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### Insert Document
+
+Inserts a new document into a specified table.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+- **Data**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/insert-doc.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+#### Example
+
+```yaml
+{ 
+  "name": "John Doe",
+  "age": 30
+}
+```
+
+
+### Retrieve Document by Key
+
+Fetches a document from a specified table by its key.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+- **Primary key**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/retrieve-doc.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### Update Document Using ID
+
+Updates a specific document in a table using its ID.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+- **Primary key**
+- **Data**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/update-doc.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+#### Example
+
+```yaml
+{ 
+  "age": 31 
+}
+```
+
+
+### Update All Documents
+
+Updates all documents in a specified table.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+- **Data**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/update-all-doc.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+#### Example
+
+```yaml
+{ 
+  "verified": true 
+}
+```
+
+
+### Delete Document Using ID
+
+Deletes a specific document in a table using its ID.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+- **Primary key**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/delete-doc.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+
+### Delete All Documents
+
+Deletes all documents from a specified table.
+
+#### Required Parameter
+- **Database Name**
+- **Tablename**
+
+<img className="screenshot-full" src="/img/datasource-reference/rethink/delete-all-doc.png"  alt="RethinkDB Create Database Operation" style={{marginBottom:'15px'}}/>
+
+</div>

docs/docs/data-sources/run-py.md

@@ -1,19 +1,19 @@
 ---
 id: run-py
-title: Run Python code
+title: Run Python Code
 ---
 
-You can write custom Python code to interact with components and queries. To do that, you need to create a new query and select **Run Python code** from the available data sources.
+In ToolJet, custom **Run Python Code** can be used to interact with components and queries, making it possible to customize actions and data handling.
 
-<div style={{textAlign: 'center'}}>
-    <img className="screenshot-full" src="/img/datasource-reference/custom-python/add-run-py.png" alt="Run Python code" />
-</div>
+<img className="screenshot-full" src="/img/datasource-reference/custom-python/add-run-py.png" alt="Run Python code" />
+
+<div style={{paddingTop:'24px'}}>
 
 ## Using Python Code to Trigger Component Specific Actions
 
-- Drag a **Text** component onto the canvas. We will set the text on the Text component using the Python query.
-- Create a query and select **Run Python code** from the available data sources
-- Paste the below code in the code editor and save the query:
+1. Drag a **Text** component onto the canvas. We will set the text on the Text component using the Python query.
+2. Create a query and select **Run Python code** from the available data sources
+3. Paste the below code in the code editor and save the query:
 
 ```python
 class Person:
@@ -29,31 +29,41 @@ p1 = Person(tj_globals.currentUser.firstName, 36)
 components.text1.setText(p1.myfunc())
 ```
 
-- The above code has a function `myfunc` which returns a string and we are using a **[Component Specific Action](/docs/tooljet-concepts/component-specific-actions)** to set the Text Component's value from the Python query. 
+4. The above code has a function `myfunc` which returns a string and we are using a **[Component Specific Action](/docs/tooljet-concepts/component-specific-actions)** to set the Text Component's value from the Python query. 
 
 :::tip
 - As of now, Run Python code only supports the [Python standard library](https://docs.python.org/3/library/).
 - Check **[RunPy Limitations](/docs/contributing-guide/troubleshooting/runpy-limitations)** to go through the limitations with using Python code
 :::
 
-## Trigger Queries
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Trigger Queries Using Run Python Code
+
 To trigger queries in Python, you can use the below functions:
 
 ```py
 actions.runQuery('getSalesData')
 #replace getSalesData with your query name
 ```
-
+Or
 ```py
 queries.getSalesData.run()
 #replace getSalesData with your query name
 ```
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Get Query Data
 
 To immediately access the data returned by a query in **Run Python code**, you can use the below functions: 
 
-#### Trigger a query and retrieve its data:
+### Trigger a Query and Retrieve its Data
+
 ```py
 await queries.getSalesData.run()
 #replace getSalesData with your query name
@@ -64,7 +74,8 @@ value = queries.getSalesData.getData()
 value
 ```
 
-#### Trigger a query and retrieve its raw data:
+### Trigger a Query and Retrieve its Raw Data
+
 ```py
 await queries.getCustomerData.run()
 #replace getCustomerData with your query name
@@ -75,7 +86,8 @@ value = queries.getCustomerData.getRawData()
 value
 ```
 
-#### Trigger a query and retrieve its loading state:
+### Trigger a Query and Retrieve its Loading State
+
 ```py
 await queries.getTodos.run()
 #replace getTodos with your query name
@@ -86,17 +98,23 @@ value = queries.getTodos.getLoadingState()
 value
 ```
 
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
 ## Get Variables
 
 To set and access variables or page variables in **Run Python code**, you can use the below functions:
 
-#### Set a variable:
+### Set a Variable
+
 ```py
 actions.setVariable('color','blue')
 #replace color with your desired variable name
 ```
 
-#### Immediately retrieve a variable after setting it:
+### Immediately Retrieve a Variable After Setting it
+
 ```py
 actions.setVariable('mode','dark')
 #replace mode with your desired variable name
@@ -105,13 +123,15 @@ actions.getVariable('mode')
 #replace mode with your desired variable name
 ```
 
-#### Set a page-specific variable:
+### Set a Page-Specific Variable
+
 ```py
-actions.setPageVariable('version',1)
+actions.setPageVariable('version', 1)
 #replace version with your desired variable name
 ```
 
-#### Immediately retrieve a page-specific variable after setting it:
+### Immediately Retrieve a Page-Specific Variable After Setting it
+
 ```py
 actions.setPageVariable('number',1)
 #replace number with your desired variable name
@@ -120,10 +140,15 @@ actions.getPageVariable('number')
 #replace number with your desired variable name
 ```
 
-## Using Transformations With Python
-**Run Python code** can be used to transform the data that is fetched in the queries. To test transformations using Python, create a new `REST API` query, leave the method as `GET` and enter the below url under the `URL` property.
+</div>
 
-```js
+<div style={{paddingTop:'24px'}}>
+
+## Using Transformations With Python
+
+**Run Python code** can be used to transform the data that is fetched in the queries. To test transformations using Python, create a new **REST API** query, leave the method as *GET* and enter the below url under the **URL** property.
+
+```yaml
 https://dummyjson.com/products
 ```
 
@@ -139,35 +164,42 @@ products_data = {
 }
 ```
 
-#### Filter the titles from the response
-To extract a list of product titles from the given data structure, we iterate through the `products` list and collect each product's `title` using the below code. Enable `Transformations` in the Query Editor and use the below code:
+### Filter the Titles From the Response
+
+To extract a list of product titles from the given data structure, we iterate through the *products* list and collect each product's *title* using the below code. Enable **Transformations** in the Query Editor and use the below code:
 
 ```python
 return [product["title"] for product in data["products"]]
 ```
 
-### Filtering Products by Category
+### Filter Products by Category
 
-To filter products by a specific category, such as "smartphones", and extract their titles. Enable `Transformations` in the Query Editor and use the below code:
+To filter products by a specific category, such as *smartphones*, and extract their titles. Enable **Transformations** in the Query Editor and use the below code:
 
 ```python
 return [product["title"] for product in data["products"] if product["category"] == "smartphones"]
 ```
 
-### Calculating Average Price of a Category
+### Calculate Average Price of a Category
 
-To calculate the average price of products within the "laptops" category. Enable `Transformations` in the Query Editor and use the below code:
+To calculate the average price of products within the *laptops* category. Enable **Transformations** in the Query Editor and use the below code:
 
 ```python
 return sum(product["price"] for product in data["products"] if product["category"] == "laptops") / len([product for product in data["products"] if product["category"] == "laptops"]) if len([product for product in data["products"] if product["category"] == "laptops"]) > 0 else 0
 ```
 
-:::info
-Issues with writing custom Python code? Ask in our [Slack community](https://www.tooljet.com/slack).
-:::
+</div>
+
+<div style={{paddingTop:'24px'}}>
 
 ## Refer Python Query Data in Components
 
 Just like other dynamic values, you can refer the data returned by **Run Python code** queries using double curly braces`{{}}`.
 
-For instance, if you have a **Run Python code** query named *updatedProductInfo*, you can pass `{{queries.updatedProductInfo.data}}` under the `Data` property of a Table component to populate it with the data returned by the *updatedProductInfo* query. 
+For instance, if you have a **Run Python code** query named *updatedProductInfo*, you can pass `{{queries.updatedProductInfo.data}}` under the **Data** property of a Table component to populate it with the data returned by the *updatedProductInfo* query. 
+
+:::info
+Issues with writing custom Python code? Ask in our [Slack community](https://www.tooljet.com/slack).
+:::
+
+</div>

docs/docs/data-sources/s3.md

@@ -2,17 +2,14 @@
 id: s3
 title: Amazon S3
 ---
-<div style={{paddingBottom:'24px'}}>
 
-ToolJet can connect to **Amazon S3** buckets and perform various operation on them.
+ToolJet can connect to **Amazon S3** buckets and perform various operations on them.
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To establish a connection with the Amazon S3 data source, you can either click on the **+Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview/)** page from the ToolJet dashboard.
+To establish a connection with the **Amazon S3** data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview/)** page from the ToolJet dashboard.
 
 ToolJet supports connecting to AWS S3 using **IAM Access Keys**, **AWS Instance Credentials** or **AWS ARN Role**. 
 
@@ -22,29 +19,22 @@ If you are using **IAM Access Keys**, you will need to provide the following det
 - **Access key**
 - **Secret key**
 
-It is recommended to create a new IAM user for the database so that you can control the access levels of ToolJet.
+**Note:** It is recommended to create a new IAM user for the database so that you can control the access levels of ToolJet.
 
-<div style={{textAlign: 'left'}}>
-    <img style={{ border:'0', marginBottom:'15px' }}  className="screenshot-full" src="/img/datasource-reference/aws-s3/iamnew.png" alt="aws s3 modal" />
-</div>
+<img className="screenshot-full" src="/img/datasource-reference/aws-s3/iamnew.png" alt="aws s3 modal" />
 
 To connect to AWS S3 using **AWS Instance Credentials**, select the **Use AWS Instance Credentials**. This will use the IAM role attached to the EC2 instance where ToolJet is running.
+
 To access the metadata service of an ECS container and the EC2 instance, we use the WebIdentityToken parameter which is obtained from a successful login with an identity provider.
 
-<div style={{textAlign: 'left'}}>
-    <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/instanew.png" alt="aws s3 modal" />
-</div>
+<img className="screenshot-full" src="/img/datasource-reference/aws-s3/instanew.png" alt="aws s3 modal" />
 
 If you are using **AWS ARN Role**, you will need to provide the following details:
 
 - **Region**
 - **Role ARN**
 
-<div style={{textAlign: 'left'}}>
-    <img style={{ border:'0', marginBottom:'15px', width:'100%' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/arnnew.png" alt="aws s3 modal" />
-</div>
-
-Click on **Test Connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
+<img className="screenshot-full" src="/img/datasource-reference/aws-s3/arnnew.png" alt="aws s3 modal" />
 
 :::tip
 You can now connect to **[different S3 Hosts using custom endpoints](/docs/how-to/s3-custom-endpoints)**.
@@ -52,208 +42,137 @@ You can now connect to **[different S3 Hosts using custom endpoints](/docs/how-t
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Querying AWS S3
 
-Click on **+Add** button of the **[query manager](/docs/app-builder/query-panel/#add)** and select the data source added in the previous step as the data source. Select the operation that you want to perform, fill in the required parameters and click on **Run** button to run the query.
-
-<div style={{textAlign: 'left'}}>
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Amazon AWS S3** datasource added in previous step.
+3. Select the desired operation from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 <img className="screenshot-full" src="/img/datasource-reference/aws-s3/operations3.png" alt="aws s3 query" />
 
-</div>
-
-<br/>
-
 :::info
 Query results can be transformed using transformations. Read our [transformations documentation](/docs/tutorial/transformations).
 :::
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Query operations
+## Supported Operations
 
 You can create query for AWS S3 data source to perform several actions such as:
-  1. **[Create a new bucket](#create-a-new-bucket)**
-  2. **[Read object](#read-object)**
-  3. **[Upload object](#upload-object)**
-  4. **[Remove object](#remove-object)**
-  5. **[List buckets](#list-buckets)**
-  6. **[List objects in a bucket](#list-objects-in-a-bucket)**
-  7. **[Signed url for download](#signed-url-for-download)**  
-  8. **[Signed url for upload](#signed-url-for-upload)** 
+- **[Create a new bucket](#create-a-new-bucket)**
+- **[Read object](#read-object)**
+- **[Upload object](#upload-object)**
+- **[Remove object](#remove-object)**
+- **[List buckets](#list-buckets)**
+- **[List objects in a bucket](#list-objects-in-a-bucket)**
+- **[Signed URL for download](#signed-url-for-download)**  
+- **[Signed URL for upload](#signed-url-for-upload)** 
 
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Create a new bucket
+### Create a New Bucket
 
 You can create a new bucket in your S3 by using this operation. 
 
-#### Required parameters:
+#### Required Parameters
 
-- **Bucket Name**: Specify the bucket name.
+- **Bucket Name**
 
-<div style={{textAlign: 'left'}}>
+<img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/aws-s3/createbucket.png" alt="Create a new bucket - S3 operation" />
 
-  <img className="screenshot-full" src="/img/datasource-reference/aws-s3/createbucket.png" alt="Create a new bucket - S3 operation" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Read object
+### Read Object
 
 You can read an object in a bucket by using this operation. 
 
-#### Required parameters:
+#### Required Parameters
 
-- **Bucket**: Specify the bucket name.
-- **Key**: Key of the object/file.
+- **Bucket**
+- **Key**
 
+<img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/aws-s3/readv2-v3.png" alt="aws s3 read object" />
 
-<div style={{textAlign: 'left'}}>
-    <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/readv2-v3.png" alt="aws s3 read object" />
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Upload object
+### Upload Object
 
 You can use this operation to upload objects(files) to your S3 bucket. 
 
-#### Required parameters:
+#### Required Parameters
 
-- **Bucket**: Specify the bucket name.
-- **Key**: Key of the object/file.
-- **Content Type**: Specify file type such as text, image etc. 
-- **Upload data**: File/object that is to be uploaded. 
+- **Bucket**
+- **Key**
+- **Content Type**
+- **Upload data**
 
+<img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/aws-s3/uplobjv2-v3.png"  alt="aws s3 upload"/>
 
-<div style={{textAlign: 'left'}}>
-  <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/uplobjv2-v3.png"  alt="aws s3 upload"/>
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Remove object
+### Remove Object
 
 You can use this operation to remove an object from your S3 bucket. 
 
-#### Required parameters:
+#### Required Parameters
 
-- **Bucket**: Specify the bucket name.
-- **Key**: Key of the object/file.
+- **Bucket**
+- **Key**
 
-<div style={{textAlign: 'left'}}>
+<img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/aws-s3/removeobject.png" alt="Create a new bucket - S3 operation" />
 
-  <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/removeobject.png" alt="Create a new bucket - S3 operation" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### List buckets
+### List Buckets
 
 This operation will list all the buckets in your S3. This does not require any parameter.
 
+<img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/aws-s3/listbucketsv2-v3.png" alt="aws s3 bucket" />
 
-<div style={{textAlign: 'left'}}>
-  <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/listbucketsv2-v3.png" alt="aws s3 bucket" />
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### List objects in a bucket
+### List Objects in a Bucket
 
 This operation will fetch the list of all the files in your bucket. It requires the following parameters:
 
-#### Required parameters:
+#### Required Parameters
 
-- **Bucket**: Specify the bucket name.
+- **Bucket**
 
-#### Optional parameters:
+#### Optional Parameters
 
-- **Prefix**: To limit the response to keys that begin with the specified prefix.
-- **Max keys**: The maximum number of keys returned in the response body. Default value is 1000.
-- **Offset**: The key to start with when listing objects in a bucket.
-- **Next Continuation Token**: `Next Continuation Token` indicates Amazon S3 that the list is being continued on this bucket with a token. ContinuationToken is obfuscated and is not a real key.
+- **Prefix**
+- **Max keys**
+- **Offset**
+- **Next Continuation Token**
 
 
 :::info
-**Next Continuation Token**
-For listing a bucket for objects that begin with a specific character or a prefix, then use the `Offset` parameter. For example, if you want to list all the objects that begin with `a`, then set the `Offset` parameter to `a`. Similarly, if you want to list all the objects that begin with `ab`, then set the `Offset` parameter to `ab`.
-
-The `Next Continuation Token` is used to list the next set of objects in a bucket. It is returned by the API when the response is truncated. The results will contain `Next Continuation Token` if there are more keys in the bucket that satisfy the list query. To get the next set of objects, set the `Next Continuation Token` parameter and run the query again.
+**Next Continuation Token** <br/>
+For listing a bucket for objects that begin with a specific character or a prefix, then use the **Offset** parameter. For example, if you want to list all the objects that begin with **a**, then set the **Offset** parameter to **a**. Similarly, if you want to list all the objects that begin with **ab**, then set the **Offset** parameter to **ab**. <br/>
+The **Next Continuation Token** is used to list the next set of objects in a bucket. It is returned by the API when the response is truncated. The results will contain **Next Continuation Token** if there are more keys in the bucket that satisfy the list query. To get the next set of objects, set the **Next Continuation Token** parameter and run the query again. <br/>
 The results will continue from where the last listing finished.
 :::
 
+<img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/aws-s3/listobjectsv2-v3.png" alt="aws s3 list object" />
 
-<div style={{textAlign: 'left'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/listobjectsv2-v3.png" alt="aws s3 list object" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Signed url for download
+### Signed URL for Download
 
 The object owner can optionally share objects with others by creating a presigned URL, using their own security credentials, to grant time-limited permission to download the objects. 
 
-#### Required parameters:
+#### Required Parameters
 
-- **Bucket**: Name of the bucket for uploading the file.
-- **Key**: The object key.
-- **Expires in**: The expiration time of URL.
+- **Bucket**
+- **Key**
+- **Expires in**
 
+<img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/datasource-reference/aws-s3/urldownv2-v3.png" alt="aws s3 signed download" />
 
-<div style={{textAlign: 'left'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/urldownv2-v3.png" alt="aws s3 signed download" />
-
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-
-### Signed url for upload
+### Signed URL for Upload
 
 The presigned URLs are useful if you want your user/customer to be able to upload a specific object to your bucket, but you don't require them to have AWS security credentials or permissions. 
 
-#### Required parameters:
-
-- **Bucket**: Name of the bucket for uploading the file.
-- **Key**: The object key.
-- **Expires in**: The expiration time of URL.
-- **Content Type**: The content type such as text, image etc.
-
-
-<div style={{textAlign: 'left'}}>
-
-<img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/datasource-reference/aws-s3/urluplv2-v3.png" alt="aws s3 signed upload" />
-
-</div>
+#### Required Parameters
 
+- **Bucket**
+- **Key**
+- **Expires in**
+- **Content Type**
 
+<img className="screenshot-full" src="/img/datasource-reference/aws-s3/urluplv2-v3.png" alt="aws s3 signed upload" />
 
 :::info
 We built an app to view and upload files to AWS S3 buckets. Check out the complete tutorial **[here](https://blog.tooljet.com/build-an-aws-s3-broswer-with-tooljet/)**.

docs/docs/data-sources/saphana.md

@@ -3,16 +3,13 @@ id: saphana
 title: SAP HANA
 ---
 
-# SAP HANA
-
 ToolJet can connect to SAP HANA databases to read and write data. 
 
-- [Connection](#connection)
-- [Querying SAP HANA](#querying-sap-hana)
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-To add a new SAP HANA database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select SAP HANA from the modal that pops up.
+To establish a connection with the SAP HANA datasource, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
 ToolJet requires the following to connect to your SAP HANA database:
 
@@ -22,27 +19,29 @@ ToolJet requires the following to connect to your SAP HANA database:
 - **Password**
 
 :::info
-Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
+Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP.
 :::
 
-<div style={{textAlign: 'center'}}>
-
-![ToolJet - Data source - SAP HANA](/img/datasource-reference/saphana/connect.png)
+<img className="screenshot-full" src="/img/datasource-reference/saphana/connect-v2.png" alt="ToolJet - Data source - SAP HANA" />
 
 </div>
 
-Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
+<div style={{paddingTop:'24px'}}>
 
 ## Querying SAP HANA
 
-Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the data source. Enter the query in the editor. Click on the `run` button to run the query.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **SAP HANA** datasource added in previous step.
+3. Add the Query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
 
-**NOTE**: Query should be saved before running.
-
-
-<img className="screenshot-full" src="/img/datasource-reference/saphana/query.png" alt="saphana query" />
+<img className="screenshot-full" src="/img/datasource-reference/saphana/query-v2.png" alt="saphana query" />
 
+```sql
+select * from PRODUCTS
+```
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
-:::
+:::
+</div>

docs/docs/data-sources/sendgrid.md

@@ -3,43 +3,54 @@ id: sendgrid
 title: SendGrid
 ---
 
-# SendGrid
-
 ToolJet can connect to your SendGrid account to send emails.
 
-<img class="screenshot-full" src="/img/datasource-reference/sendgrid/sendgrid-datasource.png" alt="ToolJet - Data source - SendGrid" height="420" />
+<div style={{paddingTop:'24px'}}>
+
+## Connection
+
+To establish a connection with the SendGrid datasource, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+
+ToolJet requires the following to connect to your SendGrid database:
+- **SendGrid API key**
+
+<img class="screenshot-full" src="/img/datasource-reference/sendgrid/sendgrid-datasource-v2.png" alt="ToolJet - Data source - SendGrid" />
 
 :::info
 The SendGrid API Datasource supports for interaction with the mail endpoint of the [SendGrid v3 API](https://docs.sendgrid.com/api-reference/how-to-use-the-sendgrid-v3-api/authentication).
 :::
 
-## Connection
-To add a new SendGrid API datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select SendGrid API from the modal that pops up.
- 
-Enter your **SendGrid API key** in the "API key" field.
+</div>
 
-:::tip
-SendGrid API key is required to create an SendGrid datasource on ToolJet. You can generate API key by visiting [SendGrid account page](https://app.sendgrid.com/settings/api_keys). 
-:::
+<div style={{paddingTop:'24px'}}>
 
-Click on the 'Save' button to save the data source.
+## Querying SendGrid
 
-## Supported operations
-1.  Email service
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **SendGrid** datasource added in previous step.
+3. Select **Email service** from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Supported Operations
+
+### Email Service
+
+#### Required Parameters 
+- **Multiple recipients**
+- **Send email to**
+- **Send email from** 
+- **Subject**
+- **Body as text**
 
 
-### Email service
-Required parameters: 
-- Send email to
-- Send email from 
-- Subject
-- Body as text
+#### Optional Parameter
+- **Body as HTML**
 
-
-Optional parameters:
-- Body as HTML
-
-<img class="screenshot-full" src="/img/datasource-reference/sendgrid/sendgrid-query.jpg" alt="ToolJet - Query SendGrid" height="420"/>
+<img class="screenshot-full" src="/img/datasource-reference/sendgrid/sendgrid-query-v2.png" alt="ToolJet - Query SendGrid"/>
 
 :::info
 **Send mail to** - accepts an array/list of emails separated by comma.
@@ -56,7 +67,4 @@ For example: `admin@tooljet.io`
 **Send multiple individual emails to multiple recipients** - set <b>Multiple recipients</b> field to `{{true}}` and the `Send mail to` field will be split into multiple emails and send to each recipient.
 :::
 
-
-:::note
-NOTE: Query should be saved before running.
-:::
+</div>

docs/docs/data-sources/slack.md

@@ -3,79 +3,74 @@ id: slack
 title: Slack
 ---
 
-# Slack
-
 ToolJet can connect to your Slack workspace to send messages. 
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/slack/connect.png" alt="Slack datasource: ToolJet"/>
-
-</div>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
-- To add the Slack datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select Slack from the modal that pops up.
- 
-- In the next dialog, you'll be asked to choose the **permission scope**. Choose the permission scope and then click on **Connect to Slack** button.
 
-- A new tab will open up asking for authorization confirmation. Once done, you can close the tab.
+To establish a connection with the **Slack** datasource, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page through the ToolJet dashboard.
+
+<img className="screenshot-full" src="/img/datasource-reference/slack/connect-v2.png" alt="Slack datasource: ToolJet"/>
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/slack/authorize.png" alt="Slack datasource: ToolJet"/>
+<img className="screenshot-full" src="/img/datasource-reference/slack/authorize-v2.png" alt="Slack datasource: ToolJet"/>
 
 </div>
 
-- Click on the '**Save data source** button to save the data source.
-
-
 :::note
 The App (which credentials are provided) needs to be installed in the workspace to use the Slack data source, and it needs to be added to the channel where you want to post the message.
 :::
 
-## Supported operations
+</div>
 
-1. **List members**
-2. **Send message**
-3. **List messages from a channel**
+<div style={{paddingTop:'24px'}}>
 
-### List members
+## Querying Slack
+
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Slack** datasource added in previous step.
+3. Select the desired operation.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to create and trigger the query.
+
+<img className="screenshot-full" src="/img/datasource-reference/slack/operations.png" alt="Slack datasource: ToolJet"/>
+
+</div>
+
+<div style={{paddingTop:'24px'}}>
+
+## Supported Operations
+
+1. **[List Members](#list-members)**
+2. **[Send Message](#send-message)**
+3. **[List Messages From a Channel](#list-messages)**
+
+### List Members
 
 This operation will return the data of all the members in your slack workspace.
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/slack/listmembers-v2.png" alt="Slack datasource: ToolJet" style={{marginBottom:'15px'}}/>
 
-<img className="screenshot-full" src="/img/datasource-reference/slack/listmembers.png" alt="Slack datasource: ToolJet"/>
-
-</div>
-
-### Send message
+### Send Message
 
 This operation will send/post the message to a specified channel or posting to direct messages (also known as DMs or IMs) in your slack workspace.
 
-| Property | Description |
-| :--- | :--- |
-| Channel | The channel ID or user ID to post the message to. |
-| Message | The message to post. |
+#### Required Parameters
+- **Channel**
+- **Message**
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/slack/sendmessage-v2.png" alt="Slack datasource: ToolJet" style={{marginBottom:'15px'}}/>
 
-<img className="screenshot-full" src="/img/datasource-reference/slack/sendmessage.png" alt="Slack datasource: ToolJet"/>
-
-</div>
-
-### List messages
+### List Messages
 
 This operation will get the messages from a specified channel.
 
-| Property | Description                             |
-| :--- |:----------------------------------------|
-| Channel | The channel ID to get the messages from |
-| Limit | The maximum number of messages to return. |
-| Next Cursor | A cursor value returned by a previous call to list messages. |
+#### Required Parameters
+- **Channel**
+- **Limit**
+- **Next Cursor**
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/slack/listmessages.png" alt="Slack datasource: ToolJet"/>
+<img className="screenshot-full" src="/img/datasource-reference/slack/listmessages-v2.png" alt="Slack datasource: ToolJet"/>
 
 </div>

docs/docs/data-sources/smtp.md

@@ -3,55 +3,72 @@ id: smtp
 title: SMTP
 ---
 
-# SMTP
-
 The SMTP datasource facilitates the connection between ToolJet applications and email servers, enabling the apps to send emails.
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To connect to an SMTP server, the following credentials are typically required:
+To establish a connection with the SMTP data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview/)** page from the ToolJet dashboard and choose SMTP as the data source.
+
+ToolJet requires the following to connect to SMTP server:
 
 - **Host** 
 - **Port** 
 - **Username**
 - **Password**
 
-:::tip Finding configuration details:
+### Finding Configuration Details
+
 The SMTP configuration details like host and port can usually be obtained from your email service provider. Here are some general settings for the most commonly used email providers:
-- **Gmail**: `Host`: smtp.gmail.com; `Port`: 587 or 465 (SSL); `Username`: your full Gmail email address; `Password`: your Gmail password.
-- **Yahoo Mail**: `Host`: smtp.mail.yahoo.com; `Port`: 465 (SSL); `Username`: your Yahoo Mail email address; `Password`: your Yahoo Mail password.
-- **Outlook.com/Hotmail**: `Host`: smtp.office365.com; `Port`: 587 or 465 (SSL); `Username`: your Outlook.com/Hotmail email address; `Password`: your Outlook.com/Hotmail password.
 
-Before saving the configuration, it's possible to test the connection by clicking the "Test Connection" button.
-:::
+- **Gmail**
+    - **Host**: smtp.gmail.com
+    - **Port**: 587 or 465 (SSL)
+    - **Username**: Your Full Gmail Address
+    - **Password**: Your Gmail Password
 
-<div style={{textAlign: 'center'}}>
+- **Yahoo Mail**
+    - **Host**: smtp.mail.yahoo.com
+    - **Port**: 465 (SSL)
+    - **Username**: Your Yahoo Email Address
+    - **Password**: Your Yahoo Mail Password
 
-<img className="screenshot-full" src="/img/datasource-reference/smtp/connect.png" alt="smtp connect" />
+- **Outlook.com/Hotmail**
+    - **Host**: smtp.office365.com
+    - **Port**: 587 or 465 (SSL)
+    - **Username**: your Outlook.com/Hotmail email address
+    - **Password**: your Outlook.com/Hotmail password.
+
+
+<img className="screenshot-full" src="/img/datasource-reference/smtp/connect-v2.png" alt="smtp connect" />
 
 </div>
 
+<div style={{paddingTop:'24px'}}>
+
 ## Querying SMTP
 
 To create a query for sending an email, follow these steps:
 
-1. Open the query panel located at the bottom panel of the editor.
-2. Click the `+Add` button on the left to create a new query.
-3. Select `SMTP` from the global datasource.
-4. Provide the following properties:
- - **From** `required` : Email address of the sender
- - **From Name** : Name of the sender
- - **To** `required` : Recipient's email address
- - **CC mail to** : Email address of the recipients that will receive a copy of the email, and their email addresses will be visible to other recipients.
- - **BCC mail to** : Email address of the recipients that will receive a copy of the email but the email addressed will be hidden to other recipients.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **SMTP** datasource added in previous step.
+3. Enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
+
+#### Required Parameter
+ - **From**: Email address of the sender.
+ - **To**: Recipient's email address.
  - **Subject** : Subject of the email.
  - **Body** : You can enter the body text of the email in either raw text or html format, in their respective fields.
+ 
+#### Optional Parameter
+ - **From Name** : Name of the sender.
+ - **CC mail to** : Email address of the recipients that will receive a copy of the email, and their email addresses will be visible to other recipients.
+ - **BCC mail to** : Email address of the recipients that will receive a copy of the email but the email addressed will be hidden to other recipients.
  - **Attachments** : You can add attachments to an SMTP query by referencing the file from the File Picker component in the attachments field.
+    - For instance, you can set the `Attachments` field value to `{{ components.filepicker1.file }}` or pass an object `{{ name: 'filename.jpg', dataURL: '......' }}` to include attachments.
 
-For instance, you can set the `Attachments` field value to `{{ components.filepicker1.file }}` or pass an object `{{ name: 'filename.jpg', dataURL: '......' }}` to include attachments.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/smtp/querysmtp.png" alt="smtp connect" />
+<img className="screenshot-full" src="/img/datasource-reference/smtp/querysmtp-v2.png" alt="smtp connect" />
 
 </div>

docs/docs/data-sources/snowflake.md

@@ -3,21 +3,21 @@ id: snowflake
 title: Snowflake
 ---
 
-# Snowflake
-
 ToolJet can connect to Snowflake databases to read and write data.
 
-- [Connection](#connection)
-- [Getting Started](#querying-snowflake)
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP. You can find snowflake docs on network policies **[here](https://docs.snowflake.com/en/user-guide/network-policies.html)**.
+To establish a connection with the Snowflake data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview/)** page from the ToolJet dashboard and choose Snowflake as the data source.
 
+:::info
+Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP.
 
-To add a new Snowflake database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Snowflake from the modal that pops up.
+You can find snowflake docs on network policies **[here](https://docs.snowflake.com/en/user-guide/network-policies.html)**.
+:::
 
-ToolJet requires the following to connect to your Snowflake database.
+ToolJet requires the following to connect to Snowflake database.
 
 - **Account**
 - **Username**
@@ -27,26 +27,27 @@ ToolJet requires the following to connect to your Snowflake database.
 You can also configure for **[additional optional parameters](https://docs.snowflake.com/en/user-guide/nodejs-driver-use.html#additional-connection-options)**.
 :::
 
-<div style={{textAlign: 'center'}}>
-
-![ToolJet - Snowflake connection](/img/datasource-reference/snowflake/snowflake-connect.png)
+<img className="screenshot-full" src="/img/datasource-reference/snowflake/snowflake-connect-v2.png" alt="ToolJet - Snowflake connection" />
 
 </div>
 
+<div style={{paddingTop:'24px'}}>
+
 ## Querying Snowflake
 
-Click on `+` button of the query manager at the bottom panel of the editor and select the database added in the previous step as the datasource. Query manager then can be used to write raw SQL queries.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Snowflake** datasource added in previous step.
+3. Select the **SQL Mode** form the dropdown and enter the query.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
-<div style={{textAlign: 'center'}}>
+<img className="screenshot-full" src="/img/datasource-reference/snowflake/snowflake-query-v2.png" alt="ToolJet - Snowflake query" />
 
-![ToolJet - Snowflake query](/img/datasource-reference/snowflake/snowflake-query.png)
-
-</div>
-
-Click on the `run` button to run the query. 
-
-**NOTE:** Query should be saved before running.
+```sql
+select * from "SNOWFLAKE_SAMPLE_DATA"."WEATHER"."DAILY_14_TOTAL" limit 10;
+```
 
 :::tip
-Query results can be transformed using transformations. Read our transformations documentation to see how: [link](/docs/tutorial/transformations)
+Query results can be transformed using transformations. Read our [transformations](/docs/tutorial/transformations) documentation to learn more.
 :::
+
+</div>

docs/docs/data-sources/stripe.md

@@ -3,112 +3,195 @@ id: stripe
 title: Stripe
 ---
 
-# Stripe
-
 ToolJet can connect to your Stripe account to read or write customers' and payments' data.
 
 :::info
 Check out the **[Stripe Refund App tutorial](https://blog.tooljet.com/build-a-stripe-refund-tool-using-low-code/)**
 :::
 
+<div style={{paddingTop:'24px'}}>
+
 ## Connection
 
-To add a new Stripe data source, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Stripe from the modal that pops up.
+To establish a connection with the Stripe data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview/)** page from the ToolJet dashboard and choose Stripe as the data source.
 
-ToolJet requires the **Stripe API key** to connect to your database.
+ToolJet requires the following to connect to Stripe datasource.
+- **Stripe API key**
 
-<div style={{textAlign: 'center'}}>
-
-![ToolJet - Data source - Stripe](/img/datasource-reference/stripe/connect.png)
-
-</div>
+<img className="screenshot-full" src="/img/datasource-reference/stripe/connect-v2.png" alt="ToolJet - Data source - Stripe" style={{marginBottom:'15px'}}/>
 
 You can get the Stripe API key from the dashboard of your Stripe account. Go to the Stripe account dashboard, click on the **Developers** on the top right, then on the left-sidebar go to the **API Keys**, you can simple reveal the **Secret Key** and copy-paste on ToolJet.
 
-<div style={{textAlign: 'center'}}>
-
-![ToolJet - Data source - Stripe](/img/datasource-reference/stripe/apikey.png)
+<img className="screenshot-full" src="/img/datasource-reference/stripe/apikey.png" alt="ToolJet - Data source - Stripe"/>
 
 </div>
 
+<div style={{paddingTop:'24px'}}>
+
 ## Querying Stripe
 
-Click on **+** button of the query manager at the bottom panel of the editor and select the Stripe datasource added in the previous step. Enter the query in the editor. Click on the `Save and Run` button to save and then run the query.
-
-**NOTE**: Query should be saved before running.
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Stripe** datasource added in previous step.
+3. Select the desired operation form the dropdown and enter the required parameter.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
 :::
 
-## Supported operations
+</div>
 
+<div style={{paddingTop:'24px'}}>
+
+## Supported Operations
 
 You can check out the some of the operations mentioned below. All the operations for Stripe are available and can be performed from ToolJet. Check out the **[Stripe API documentation](https://stripe.com/docs/api/)** for the detailed information about each operation.
 
-- **delete,/v1/account**
-- **get,/v1/account**
-- **post,/v1/account**
-- **post,/v1/account/bank_accounts**
-- **delete,/v1/account/bank_accounts/`{id}`**
-- **get,/v1/account/bank_accounts/`{id}`**
-- **post,/v1/account/bank_accounts/`{id}`**
-- **get,/v1/account/capabilities**
-- **get,/v1/account/capabilities/`{capability}`**
-- **post,/v1/account/capabilities/`{capability}`**
-- **get,/v1/account/external_accounts**
-- **post,/v1/account/external_accounts**
-- **delete,/v1/account/external_accounts/`{id}`**
-- **get,/v1/account/external_accounts/`{id}`**
-- **post,/v1/account/external_accounts/`{id}`**
-- **post,/v1/account/login_links**
-- **get,/v1/account/people**
-- **post,/v1/account/people**
-- **delete,/v1/account/people/`{person}`**
-- **get,/v1/account/people/`{person}`**
-- **post,/v1/account/persons**
-- **delete,/v1/account/persons/`{person}`**
-- **get,/v1/account/persons/`{person}`**
-- **post,/v1/account/persons/`{person}`**
-- **post,/v1/account_links**
-- **get,/v1/accounts**
-- **post,/v1/accounts**
-- **delete,/v1/accounts/`{account}`**
-- **get,/v1/accounts/`{account}`**
-- **post,/v1/accounts/`{account}`**
-- **post,/v1/accounts/`{account}`/bank_accounts**
-- **delete,/v1/accounts/`{account}`/bank_accounts/`{id}`**
-- **get,/v1/accounts/`{account}`/bank_accounts/`{id}`**
-- **get,/v1/accounts/`{account}`/bank_accounts/`{id}`**
-- **get,/v1/accounts/`{account}`/capabilities**
-- **get,/v1/accounts/`{account}`/capabilities/`{capability}`**
-- **post,/v1/accounts/`{account}`/capabilities/`{capability}`**
-- **get,/v1/accounts/`{account}`/external_accounts**
-- **post,/v1/accounts/`{account}`/external_accounts**
-- **delete,/v1/accounts/`{account}`/external_accounts/`{id}`**
-- **get,/v1/accounts/`{account}`/external_accounts/`{id}`**
-- **get,/v1/accounts/`{account}`/external_accounts/`{id}`**
-- **post,/v1/accounts/`{account}`/login_links**
-- **get,/v1/accounts/`{account}`/people**
-- **post,/v1/accounts/`{account}`/people**
-- **delete,/v1/accounts/`{account}`/people/`{person}`**
-- **get,/v1/accounts/`{account}`/people/`{person}`**
-- **post,/v1/accounts/`{account}`/people/`{person}`**
-- **get,/v1/accounts/`{account}`/persons**
-- **post,/v1/accounts/`{account}`/persons**
-- **delete,/v1/accounts/`{account}`/persons/`{person}`**
-- **get,/v1/accounts/`{account}`/persons/`{person}`**
-- **post,/v1/accounts/`{account}`/persons/`{person}`**
-- **post,/v1/accounts/`{account}`/reject**
-- **get,/v1/apple_pay/domains**
-- **post,/v1/apple_pay/domains**
-- **delete,/v1/apple_pay/domains/`{domain}`**
-- **get,/v1/apple_pay/domains/`{domain}`**
-- **get,/v1/application_fees**
-- **get,/v1/application_fees/`{fee}`/refunds/`{id}`**
-- **post,/v1/application_fees/`{fee}`/refunds/`{id}`**
-- **get,/v1/application_fees/`{id}`**
-- **post,/v1/application_fees/`{id}`/refund**
-- **get,/v1/application_fees/`{id}`/refunds**
-- **post,/v1/application_fees/`{id}`/refunds**
-- **get,/v1/apps/secrets**
+<h3 style={{paddingTop: "15px"}}>Account Operations</h3>
+
+| **Method** | **Endpoint**           | **Description**                   |
+|------------|------------------------|-----------------------------------|
+| DELETE     | `/v1/account`          | Delete an account                |
+| GET        | `/v1/account`          | Retrieve account details         |
+| POST       | `/v1/account`          | Create or update account         |
+
+<h3 style={{paddingTop: "15px"}}>Bank Accounts (Account)</h3>
+
+| **Method** | **Endpoint**                          | **Description**                   |
+|------------|---------------------------------------|-----------------------------------|
+| POST       | `/v1/account/bank_accounts`           | Add a bank account               |
+| DELETE     | `/v1/account/bank_accounts/{id}`      | Delete a bank account            |
+| GET        | `/v1/account/bank_accounts/{id}`      | Retrieve bank account details    |
+| POST       | `/v1/account/bank_accounts/{id}`      | Update bank account details      |
+
+<h3 style={{paddingTop: "15px"}}>Capabilities (Account)</h3>
+
+| **Method** | **Endpoint**                             | **Description**                   |
+|------------|------------------------------------------|-----------------------------------|
+| GET        | `/v1/account/capabilities`               | Retrieve account capabilities    |
+| GET        | `/v1/account/capabilities/{capability}`  | Retrieve specific capability     |
+| POST       | `/v1/account/capabilities/{capability}`  | Update specific capability       |
+
+<h3 style={{paddingTop: "15px"}}>External Accounts (Account)</h3>
+
+| **Method** | **Endpoint**                          | **Description**                   |
+|------------|---------------------------------------|-----------------------------------|
+| GET        | `/v1/account/external_accounts`       | Retrieve external accounts        |
+| POST       | `/v1/account/external_accounts`       | Add an external account           |
+| DELETE     | `/v1/account/external_accounts/{id}`  | Delete an external account        |
+| GET        | `/v1/account/external_accounts/{id}`  | Retrieve external account details |
+| POST       | `/v1/account/external_accounts/{id}`  | Update external account details   |
+
+<h3 style={{paddingTop: "15px"}}>People (Account)</h3>
+
+| **Method** | **Endpoint**                          | **Description**                   |
+|------------|---------------------------------------|-----------------------------------|
+| GET        | `/v1/account/people`                 | Retrieve people associated        |
+| POST       | `/v1/account/people`                 | Add a person to account           |
+| DELETE     | `/v1/account/people/{person}`        | Delete a person                   |
+| GET        | `/v1/account/people/{person}`        | Retrieve person details           |
+| POST       | `/v1/account/people/{person}`        | Update person details             |
+
+<h3 style={{paddingTop: "15px"}}>Persons (Account)</h3>
+
+| **Method** | **Endpoint**                          | **Description**                   |
+|------------|---------------------------------------|-----------------------------------|
+| POST       | `/v1/account/persons`                 | Add a person                      |
+| DELETE     | `/v1/account/persons/{person}`        | Delete a person                   |
+| GET        | `/v1/account/persons/{person}`        | Retrieve person details           |
+| POST       | `/v1/account/persons/{person}`        | Update person details             |
+
+<h3 style={{paddingTop: "15px"}}>Other Account Operations</h3>
+
+| **Method** | **Endpoint**                  | **Description**                   |
+|------------|-------------------------------|-----------------------------------|
+| POST       | `/v1/account/login_links`      | Create login link for account     |
+| POST       | `/v1/account_links`            | Create account links              |
+
+<h3 style={{paddingTop: "15px"}}>Accounts (Specific) Operations</h3>
+
+| **Method** | **Endpoint**                          | **Description**                   |
+|------------|---------------------------------------|-----------------------------------|
+| GET        | `/v1/accounts`                       | Retrieve list of accounts         |
+| POST       | `/v1/accounts`                       | Create a new account              |
+| DELETE     | `/v1/accounts/{account}`             | Delete a specific account         |
+| GET        | `/v1/accounts/{account}`             | Retrieve specific account details |
+| POST       | `/v1/accounts/{account}`             | Update specific account details   |
+
+<h3 style={{paddingTop: "15px"}}>Bank Accounts (Specific)</h3>
+
+| **Method** | **Endpoint**                          | **Description**                   |
+|------------|---------------------------------------|-----------------------------------|
+| POST       | `/v1/accounts/{account}/bank_accounts`| Add a bank account                |
+| DELETE     | `/v1/accounts/{account}/bank_accounts/{id}`| Delete a bank account           |
+| GET        | `/v1/accounts/{account}/bank_accounts/{id}`| Retrieve bank account details    |
+
+<h3 style={{paddingTop: "15px"}}>Capabilities (Specific)</h3>
+
+| **Method** | **Endpoint**                             | **Description**                   |
+|------------|------------------------------------------|-----------------------------------|
+| GET        | `/v1/accounts/{account}/capabilities`    | Retrieve account capabilities     |
+| GET        | `/v1/accounts/{account}/capabilities/{capability}`| Retrieve specific capability details |
+| POST       | `/v1/accounts/{account}/capabilities/{capability}`| Update specific capability     |
+
+<h3 style={{paddingTop: "15px"}}>External Accounts (Specific)</h3>
+
+| **Method** | **Endpoint**                             | **Description**                   |
+|------------|------------------------------------------|-----------------------------------|
+| GET        | `/v1/accounts/{account}/external_accounts`| Retrieve external accounts        |
+| POST       | `/v1/accounts/{account}/external_accounts`| Add an external account           |
+| DELETE     | `/v1/accounts/{account}/external_accounts/{id}`| Delete an external account      |
+| GET        | `/v1/accounts/{account}/external_accounts/{id}`| Retrieve external account details|
+
+<h3 style={{paddingTop: "15px"}}>People (Specific)</h3>
+
+| **Method** | **Endpoint**                             | **Description**                   |
+|------------|------------------------------------------|-----------------------------------|
+| GET        | `/v1/accounts/{account}/people`          | Retrieve people associated        |
+| POST       | `/v1/accounts/{account}/people`          | Add a person to account           |
+| DELETE     | `/v1/accounts/{account}/people/{person}` | Delete a person                   |
+| GET        | `/v1/accounts/{account}/people/{person}` | Retrieve person details           |
+| POST       | `/v1/accounts/{account}/people/{person}` | Update person details             |
+
+<h3 style={{paddingTop: "15px"}}>Persons (Specific)</h3>
+
+| **Method** | **Endpoint**                          | **Description**                   |
+|------------|---------------------------------------|-----------------------------------|
+| POST       | `/v1/accounts/{account}/persons`      | Add a person                      |
+| DELETE     | `/v1/accounts/{account}/persons/{person}`| Delete a person                 |
+| GET        | `/v1/accounts/{account}/persons/{person}`| Retrieve person details          |
+| POST       | `/v1/accounts/{account}/persons/{person}`| Update person details            |
+
+<h3 style={{paddingTop: "15px"}}>Other Account-Specific Operations</h3>
+
+| **Method** | **Endpoint**                             | **Description**                   |
+|------------|------------------------------------------|-----------------------------------|
+| POST       | `/v1/accounts/{account}/login_links`     | Create login link for account     |
+| POST       | `/v1/accounts/{account}/reject`          | Reject an account                 |
+
+<h3 style={{paddingTop: "15px"}}>Apple Pay Operations</h3>
+
+| **Method** | **Endpoint**                    | **Description**                   |
+|------------|---------------------------------|-----------------------------------|
+| GET        | `/v1/apple_pay/domains`         | Retrieve Apple Pay domains        |
+| POST       | `/v1/apple_pay/domains`         | Add a domain to Apple Pay         |
+| DELETE     | `/v1/apple_pay/domains/{domain}`| Delete a domain from Apple Pay    |
+| GET        | `/v1/apple_pay/domains/{domain}`| Retrieve specific Apple Pay domain|
+
+<h3 style={{paddingTop: "15px"}}>Application Fees Operations</h3>
+
+| **Method** | **Endpoint**                              | **Description**                   |
+|------------|-------------------------------------------|-----------------------------------|
+| GET        | `/v1/application_fees`                   | Retrieve list of application fees |
+| GET        | `/v1/application_fees/{id}`              | Retrieve specific application fee |
+| POST       | `/v1/application_fees/{id}/refund`       | Refund an application fee         |
+| GET        | `/v1/application_fees/{id}/refunds`      | Retrieve list of refunds          |
+| POST       | `/v1/application_fees/{id}/refunds`      | Create a refund for an application|
+
+<h3 style={{paddingTop: "15px"}}>Application Fee Refunds (Specific)</h3>
+
+| **Method** | **Endpoint**                                | **Description**                   |
+|------------|---------------------------------------------|-----------------------------------|
+| GET        | `/v1/application_fees/{fee}/refunds/{id}`   | Retrieve specific refund details 
+
+</div>

docs/docs/data-sources/twilio.md

@@ -3,52 +3,55 @@ id: twilio
 title: Twilio
 ---
 
-# Twilio
+ToolJet can connect to Twilio account to send sms.
 
-ToolJet can connect to your Twilio account to send sms.
-
-<div style={{textAlign: 'center'}}>
-
-![ToolJet - Data source - Twilio](/img/datasource-reference/twilio/connect.png)
-
-</div>
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
-- To add the Twilio datasource, click the **Datasource manager** icon on the left-sidebar of the app builder and click on the `Add datasource` button, then select **Twilio** from the modal that pops up.
- 
-- In the next dialog, you'll be asked to enter the Auth Token, Account SID, and Messaging Service SID.
 
-- You can get the **Auth Token and Account SID** on the dashboard of your Twilio account.
+To establish a connection with the Twilio data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose Twilio as the data source.
 
-<div style={{textAlign: 'center'}}>
+ToolJet requires the following to connect to Twilio:
+- **Auth Token**
+- **Account SID**
+- **Messaging Service SID**
 
-![ToolJet - Data source - Twilio](/img/datasource-reference/twilio/auth.png)
+You can get the **Auth Token and Account SID** on the dashboard of your Twilio account.
+
+<img className="screenshot-full" src="/img/datasource-reference/twilio/auth.png" alt="ToolJet - Data source - Twilio" />
+
+For **Messaging Service SID**, you'll need to create a messaging service first from the Services under Messaging in the left-sidebar.
+
+<img className="screenshot-full" src="/img/datasource-reference/twilio/sid.png" alt="ToolJet - Data source - Twilio" />
+
+<img className="screenshot-full" src="/img/datasource-reference/twilio/connect-v2.png" alt="ToolJet - Data source - Twilio" />
 
 </div>
 
-- For **Messaging Service SID**, you'll need to create a messaging service first from the Services under Messaging in the left-sidebar.
+<div style={{paddingTop:'24px'}}>
 
-<div style={{textAlign: 'center'}}>
+## Querying Twilio
 
-![ToolJet - Data source - Twilio](/img/datasource-reference/twilio/sid.png)
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Twilio** datasource added in previous step.
+3. Select **Send SMS** from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 </div>
 
-- After entering the three credentials, you can **Save** the datasource.
+<div style={{paddingTop:'24px'}}>
 
 ## Supported operations
 
-1. **Send message**
-
 ### Send message
 
 This operation will send the specified message to specified mobile number.
 
-<div style={{textAlign: 'center'}}>
+#### Required Parameters
+- **To Number**
+- **Body**
 
-![ToolJet - Data source - Twilio](/img/datasource-reference/twilio/sms.png)
+<img className="screenshot-full" src="/img/datasource-reference/twilio/sms-v2.png" alt="ToolJet - Data source - Twilio" />
 
 </div>
 
-
-

docs/docs/data-sources/typesense.md

@@ -3,90 +3,145 @@ id: typesense
 title: TypeSense
 ---
 
-# TypeSense
 ToolJet can connect to your TypeSense deployment to read and write data.
 
-## Connection 
-Please make sure the host/IP of the TypeSense deployment is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist our IP**.
+<div style={{paddingTop:'24px'}}>
 
-ToolJet requires the following to connect to your TypeSense deployment: 
+## Connection 
+
+To establish a connection with the Typesense data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose Typesense as the data source.
+
+:::info
+Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP.
+:::
+
+ToolJet requires the following to connect to TypeSense deployment: 
 - **Host**
 - **Port**
 - **API Key**
 - **Protocol**
 
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/typesense/connect.png" alt="typesense connect" />
+<img className="screenshot-full" src="/img/datasource-reference/typesense/connect-v2.png" alt="typesense connect" />
 
 </div>
 
+<div style={{paddingTop:'24px'}}>
+
 ## Querying TypeSense 
 
-Click on `+` button of the query manager at the bottom panel of the editor and select the TypeSense added in the previous step as the data source.  
-Select the operation that you want to perform on your TypeSense cluster and click `Create` to save the query. 
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/datasource-reference/typesense/query.png" alt="typesense query" />
-
-</div>
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Typesence** datasource added in previous step.
+3. Select the desired operation from the dropdown and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
 :::tip
 Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
 :::
 
-## Supported operations
+</div>
 
-#### 1. Create a Collection
+<div style={{paddingTop:'24px'}}>
+
+## Supported Operations
+
+### Create a Collection
 
 With this operation you can easily create `Collections` in your TypeSense cluster. In the schema field, you'll need to define the schema for creating a new collection. Check out TypeSense docs to know more about collections **[here](https://typesense.org/docs/0.22.2/api/collections.html#create-a-collection)**
 
+#### Required Parameter
+- **Schema**
 
-<img className="screenshot-full" src="/img/datasource-reference/typesense/collection.png" alt="typesense collection" />
+<img className="screenshot-full" src="/img/datasource-reference/typesense/collection-v2.png" alt="typesense collection" style={{marginBottom:'15px'}}/>
 
+#### Example
 
-#### 2. Index a document
+```yaml
+[
+  { "name": "id", "type": "string" },
+  { "name": "name", "type": "string" },
+  { "name": "price", "type": "float" }
+]
+```
+
+### Index a Document
 
 Use this operation to index a document to your collection. You'll need to specify the **Collection Name** where you want your document to be indexed and also provide the document data according the schema defined in the collection. Read more about Indexing a document in TypeSense **[here](
 https://typesense.org/docs/0.22.2/api/documents.html#index-a-single-document)**.
 
+#### Required Parameter
+- **Collection**
+- **Document**
 
-<img className="screenshot-full" src="/img/datasource-reference/typesense/index.png" alt="typesense index" />
+<img className="screenshot-full" src="/img/datasource-reference/typesense/index-v2.png" alt="typesense index" style={{marginBottom:'15px'}}/>
 
+```yaml
+{
+  "id": "1",
+  "name": "Laptop",
+  "price": 999.99
+}
+```
 
-#### 3. Search
+### Search
 
 Use this operation to perform a search within the specified collection. Know more about the search parameters in the TypeSense doc **[here](https://typesense.org/docs/0.22.2/api/documents.html#search)**.
 
+#### Required Parameter
+- **Collection**
 
-<img className="screenshot-full" src="/img/datasource-reference/typesense/search.png" alt="typesense search" />
+<img className="screenshot-full" src="/img/datasource-reference/typesense/search-v2.png" alt="typesense search" style={{marginBottom:'15px'}}/>
 
+```yaml
+{
+  "filter_by": "price:<1000",
+  "sort_by": "price:desc",
+  "per_page": 10
+}
+```
 
-#### 4. Get a document
+### Get a Document
 
 Use this operation to fetch an individual document in a collection by providing the `id` of the document. Read more about it **[here](https://typesense.org/docs/0.22.2/api/documents.html#retrieve-a-document)**.
 
+#### Required Parameter
+- **Collection**
+- **Id**
 
-<img className="screenshot-full" src="/img/datasource-reference/typesense/get.png" alt="typesense get"/>
+<img className="screenshot-full" src="/img/datasource-reference/typesense/get-v2.png" alt="typesense get" style={{marginBottom:'15px'}}/>
 
 
-#### 5. Update a document
+### Update a Document
 
 Use this operation to update an individual document by providing the **Collection Name** and **Id** of the document. You'll need to provide the updated document data in the form of specified schema. Check out the TypeSense's doc on updating a document **[here](https://typesense.org/docs/0.22.2/api/documents.html#update-a-document)**.
 
+#### Required Parameter
+- **Collection**
+- **Id**
+- **Document**
 
-<img className="screenshot-full" src="/img/datasource-reference/typesense/update.png" alt="typesense update" />
+<img className="screenshot-full" src="/img/datasource-reference/typesense/update-v2.png" alt="typesense update" style={{marginBottom:'15px'}}/>
 
+```yaml
+{
+  "name": "Gaming Laptop",
+  "price": 1199.99
+}
+```
 
-#### 6. Delete a document
+### Delete a Document
 
 Delete a document from collection by providing the `Id` of the document. Check out the TypeSense's doc on deleting documents **[here](https://typesense.org/docs/0.22.2/api/documents.html#delete-documents)**.
 
+#### Required Parameter
+- **Collection**
+- **Id**
 
-<img className="screenshot-full" src="/img/datasource-reference/typesense/delete.png" alt="typesense delete" />
+<img className="screenshot-full" src="/img/datasource-reference/typesense/delete-v2.png" alt="typesense delete" style={{marginBottom:'15px'}}/>
 
+<br/><br/>
 
 :::tip
 Make sure that you supply JSON strings instead of JavaScript objects for any document or schema that is being passed to the server, in any of the above operations.
 :::
+
+</div>

docs/docs/data-sources/woocommerce.md

@@ -2,63 +2,89 @@
 id: woocommerce
 title: WooCommerce
 ---
-# WooCommerce
 
 ToolJet can connect to WooCommerce databases to read and write data.
 
-- [Connection](#connection)
-- [Getting Started](#querying-woocommerce)
+<div style={{paddingTop:'24px'}}>
 
 ## Connection
 
-Auth
-You may use [HTTP Basic Auth] by providing the REST API Consumer Key as the username and the REST API Consumer Secret as the password.
+To establish a connection with the WooCommerce data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose WooCommerce as the data source.
+
+ToolJet requires the following to connect to WooCommerce
 - **Host**
 - **Consumer key**
 - **Consumer secret**
 
-![ToolJet - Data Source - Woocommerce](/img/datasource-reference/woocommerce/woocomerce-auth.png)
+<img className="screenshot-full" src="/img/datasource-reference/woocommerce/woocomerce-auth-v2.png" alt="ToolJet - Data Source - Woocommerce" />
 
 :::info
 NOTE: For generating keys visit admin dashboard of woocommerce , more info: https://woocommerce.github.io/woocommerce-rest-api-docs/?javascript#authentication
 :::
 
-## Querying Woocommerce
+</div>
 
-**Operations**
+<div style={{paddingTop:'24px'}}>
 
-**Customer**
+## Querying WooCommerce
 
-- list customer
-- update customer
-- delete customer
-- batch update customer
-- create customer
-- retrieve customer
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **WooCommerce** datasource added in previous step.
+3. Select the desired resource from the dropdown and then select the desired operation and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
 
-**PRODUCT**
+:::tip
+Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
+:::
 
-- list product
-- update product
-- delete product
-- batch update product
-- create product
-- retrieve product
+</div>
 
-**ORDER**
+<div style={{paddingTop:'24px'}}>
 
-- list order
-- update order
-- delete order
-- batch update order
-- create order
-- retrieve order
+## Resource
 
-**Coupon**
+### Customer
 
-- list coupon
-- create coupon
+#### Supported Operations
+
+- **list customer**
+- **update customer**
+- **delete customer**
+- **batch update customer**
+- **create customer**
+- **retrieve customer**
+
+### Product
+
+#### Supported Operations
+
+- **list product**
+- **update product**
+- **delete product**
+- **batch update product**
+- **create product**
+- **retrieve product**
+
+### Order
+
+#### Supported Operations
+
+- **list order**
+- **update order**
+- **delete order**
+- **batch update order**
+- **create order**
+- **retrieve order**
+
+### Coupon
+
+#### Supported Operations
+
+- **list coupon**
+- **create coupon**
 
 :::info
 NOTE: For more info visit https://woocommerce.github.io/woocommerce-rest-api-docs/?javascript.
-:::
+:::
+
+</div>

docs/docs/data-sources/zendesk.md

@@ -3,94 +3,114 @@ id: zendesk
 title: Zendesk
 ---
 
-# Zendesk
-
 ToolJet can connect to Zendesk APIs to read and write data using OAuth 2.0, which helps us to limit an application's access to a user's account.
 
-  - [Connection](#connection)
-  - [Querying Zendesk](#querying-zendesk)
+<div style={{paddingTop:'24px'}}>
 
 ## Connection 
 
+To establish a connection with the Zendesk data source, you can either click on the **+ Add new Data source** button located on the query panel or navigate to the **[Data Sources](/docs/data-sources/overview)** page from the ToolJet dashboard and choose Zendesk as the data source.
+
 ToolJet connects to your Zendesk app using :
 - **Zendesk Sub-domain**
 - **Client ID**
 - **Client Secret**
 
-## Authorization Scopes 
+### Authorization Scopes 
 
 You can create a Zendesk data source with one of either of the two permission scopes :
-  1. **Read Only**
-  2. **Read and Write**
-
-
-
+- **Read Only**
+- **Read and Write**
 
 :::info
 You must first be a verified user to make Zendesk API requests. This is configured in the Admin Center interface in **Apps and integrations > APIs > Zendesk APIs.** For more information, see Security and Authentication in the [Zendesk Support API reference](https://developer.zendesk.com/api-reference/ticketing/introduction/#security-and-authentication) or [check out Zendesk's docs](https://support.zendesk.com/hc/en-us/articles/4408845965210).
 :::
 
-To connect Zendesk datasource to your ToolJet application, go to the data source manager on the left-sidebar and click on the `+` button. Select Zendesk from the list of available datasources, provide the credentials and click **Connect to Zendesk** and authenticate via OAuth. And click **Save** to save the datasource.
+</div>
 
-<div style={{textAlign: 'center'}}>
+<div style={{paddingTop:'24px'}}>
 
-![ToolJet - Data source - Zendesk](/img/datasource-reference/zendesk/zendesk-v2.gif)
+## Querying Zendesk
+
+1. Click on **+ Add** button of the query manager at the bottom panel of the editor.
+2. Select the **Zendesk** datasource added in previous step.
+3. Select the desired operation and enter the required parameters.
+4. Click on the **Preview** button to preview the output or Click on the **Run** button to trigger the query.
+
+<img className="screenshot-full" src="/img/datasource-reference/zendesk/zendesk-v2.gif" alt="ToolJet - Data source - Zendesk" />
 
 </div>
 
-## Operations
-1. **[List Tickets](/docs/data-sources/zendesk#list-tickets)**
-2. **[List requested Tickets](/docs/data-sources/zendesk#list-requested-tickets)**
-3. **[Show a Ticket](/docs/data-sources/zendesk#show-tickets)**
-4. **[Update a Ticket](/docs/data-sources/zendesk#update-tickets)**
-5. **[List Users](/docs/data-sources/zendesk#list-users)**
-6. **[Get Profile](/docs/data-sources/zendesk#get-profile)**
-7. **[Search query](/docs/data-sources/zendesk#search-query)**
+
+<div style={{paddingTop:'24px'}}>
+
+## Supported Operations
+
+- **[List Tickets](#list-tickets)**
+- **[List requested Tickets](#list-requested-tickets)**
+- **[Show a Ticket](#show-tickets)**
+- **[Update a Ticket](#update-tickets)**
+- **[List Users](#list-users)**
+- **[Get User](#get-user)**
+- **[Search](#search)**
 
 
 ### List Tickets
 Lists all the tickets in your Zendesk account.
 
-### List requested Tickets
+<img className="screenshot-full" src="/img/datasource-reference/zendesk/list-tickets.png" alt="ToolJet - Data source - Zendesk" />
+
+### List Requested Tickets
 Lists all the tickets requested by the user. 
 
-| Fields      | description |
-| ----------- | ----------- |
-| User ID    | The id of the user  |
+#### Required Parameter
+- **User ID** 
+
+<img className="screenshot-full" src="/img/datasource-reference/zendesk/list-requested-tickets.png" alt="ToolJet - Data source - Zendesk" />
 
 ### Show Tickets
 Gets a ticket's properties with the given ID, though not the ticket comments.
 
-| Fields      | description |
-| ----------- | ----------- |
-| Ticket ID    | The id of the ticket  |
+#### Required Parameter
+- **Ticket ID** 
+
+<img className="screenshot-full" src="/img/datasource-reference/zendesk/show.png" alt="ToolJet - Data source - Zendesk" />
 
 ### Update Tickets
 Updates a ticket's properties with the given ID.
 
-| Fields      | description |
-| ----------- | ----------- |
-| Ticket ID    | The id of the ticket  |
-| Body    | The properties and values to update. Example: `{{({ "ticket": {"status": "solved"} })}}` |
+#### Required Parameter
+- **Ticket ID** 
+- **Body**
+
+<img className="screenshot-full" src="/img/datasource-reference/zendesk/update.png" alt="ToolJet - Data source - Zendesk" />
 
 ### List Users
 Lists all the users in your Zendesk account.
 
-### Get Profile
+<img className="screenshot-full" src="/img/datasource-reference/zendesk/list-users.png" alt="ToolJet - Data source - Zendesk" />
+
+### Get User
 Gets a user's profile with the given ID.
 
-| Fields      | description |
-| ----------- | ----------- |
-| User ID    | The id of the user  |
+#### Required Parameter
+- **User ID** 
+
+<img className="screenshot-full" src="/img/datasource-reference/zendesk/get.png" alt="ToolJet - Data source - Zendesk" />
+
+### Search
 
-### Search Query
 The Search Query uses Zendesk's Search API to return tickets, users, and organizations with defined filters.
+
+#### Required Parameter
+- **Query** 
+
 Common filters include:
 - `type:ticket`
 - `type:user`
 - `type:organization`
 - `type:ticket organization:12345 status:open`
 
-| Fields      | description |
-| ----------- | ----------- |
-| Query    | The search query  |
+<img className="screenshot-full" src="/img/datasource-reference/zendesk/search.png" alt="ToolJet - Data source - Zendesk" />
+
+</div>

docs/docs/getting-started/quickstart-guide.md

@@ -5,15 +5,15 @@ title: Quickstart Guide
 
 <!-- <div style={{paddingTop:'24px', paddingBottom:'24px'}}> -->
 
-
-This tutorial will show you how to create an employee directory application in minutes using ToolJet. This app will let you track and update employee information with a beautiful user interface. Here are the step-by-step instructions:
+This quickstart guide walks you through the process of creating an employee directory app using ToolJet. The application lets users track and update employee details while working with core features of the platform, all within a user-friendly interface. Here are the step-by-step instructions:
 
 **[1. Create Your First Application](#1-create-your-first-application)**  <br/>
-**[2. Create Employee Database](#2-create-employee-database)**  <br/>
-**[3. Integrate Data](#3-integrate-data)** <br/>
-**[4. List Employees](#4-list-employees)** <br/>
-**[5. Add New Employee](#5-add-new-employee)** <br/>
-**[6. Preview, Release And Share](#6-preview-release-and-share)** <br/>
+**[2. Create a Database Table](#2-create-a-database-table)**  <br/>
+**[3. Create a Query to Fetch Data](#3-create-a-query-to-fetch-data)** <br/>
+**[4. Bind Queried Data to the UI](#4-bind-queried-data-to-the-ui)** <br/>
+**[5. Create a Query to Add Data](#5-create-a-query-to-add-data)** <br/>
+**[6. Use Events to Trigger Queries](#6-use-events-to-trigger-queries)** <br/>
+**[7. Preview, Release and Share](#7-preview-release-and-share)** <br/>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
@@ -21,136 +21,95 @@ This tutorial will show you how to create an employee directory application in m
 
 ### 1. Create Your First Application
 
-Once you have created an account with ToolJet, go to the dashboard and click on the Create new app button. Name your application as "Employee Directory". You are ready to design your application now.
+To begin, create a free **[ToolJet](https://www.tooljet.com/signup)** account and follow the steps below.
 
-<div style={{marginBottom:'15px', height:'397px', }}>
-    <iframe
-        className="screenshot-full"
-        src="https://www.floik.com/embed/e4f537b5-7b36-4760-9a52-caefc659a90b/b4059c71-812d-407b-9d4a-fc598eac6260-flo.html"
-        style={{width: '100%', height: '100%', border: '0'}}
-        frameborder='0'
-        allowfullscreen="allowfullscreen"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen>
-    </iframe>
+<div class="video-container">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/Cdi9XW-0rkA?si=ue3XS5986NZiaoLC&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
+<br/>
 
-Click and drag a **[Table](/docs/widgets/table)** component to the canvas. 
+- Click on the **Create new app** button on the dashboard. Name your application as "Employee Directory". 
+- Click and drag a **[Table](/docs/widgets/table)** component on the canvas. Optionally, you can also design a header by adding more components.  
 
-<div style={{marginBottom:'15px', height:'397px', }}>
-    <iframe
-        className="screenshot-full"
-        src="https://www.floik.com/embed/e4f537b5-7b36-4760-9a52-caefc659a90b/ee10d678-63fb-4fd5-a217-835ddd0898e9-flo.html"
-        style={{width: '100%', height: '100%', border: '0'}}
-        frameborder="0"
-        allowfullscreen="allowfullscreen"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen>
-    </iframe>
-</div>
-
-Optionally, you can style the Table by **[adjusting its styling properties](/docs/tooljet-concepts/what-are-components#customizing-components)** and create a header by placing **[Text](/docs/widgets/text)** components over a **[Container](/docs/widgets/container)** component and styling them. 
-
-<div style={{textAlign: 'center'}}>
-    <img style={{marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/quickstart-guide/header-design-v2.png" alt="Database Preview" />
-</div>
+<!-- <div style={{textAlign: 'center'}}>
+    <img style={{marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/quickstart-guide/header-design-v3.png" alt="Database Preview" />
+</div> -->
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### 2. Create Employee Database
+### 2. Create a Database Table
+Now, create a new table in **[ToolJet’s Database](/docs/tooljet-db/tooljet-database/)** to store employee records. 
 
-Now, create a new table in **[ToolJet’s Database](/docs/tooljet-database/)** to store employee records. Name the table employees and add the following columns: `firstname`, `lastname`, `email`, `phone`, `department`, `position`, `joining`, and `status`. Also, add a few employee records in the table.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/quickstart-guide/create-database-v2.png" alt="Database Preview" />
+<div class="video-container">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/GKOZsWcOxgI?si=qXGYetr1u9KLdl1Z&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
+<br/>
 
-</div>
-
-
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### 3. Integrate Data
-
-To display employees in the application, we first need to fetch data from the database using a query:
-- Click on the Add button in the **[Query Panel](/docs/app-builder/query-panel/)**, select ToolJet Database.
-- Rename the query to `getEmployees`.
-- Choose `employees` as Table name, List rows as Operations.
-- Toggle Run this query on application load? to automatically run the query when the app starts.
-- Click on Run to fetch data.
-
-<div style={{marginBottom:'15px', height:'397px', }}>
-    <iframe
-        className="screenshot-full"
-        src="https://www.floik.com/embed/e4f537b5-7b36-4760-9a52-caefc659a90b/de162474-7861-4275-bc8a-da275517908c-flo.html"
-        style={{width: '100%', height: '100%', border: '0'}}
-        frameborder="0"
-        allowfullscreen="allowfullscreen"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen>
-    </iframe>
-</div>
-
-Click on the Preview button to see a preview of the fetched data. 
-
-<div style={{marginBottom:'15px', height:'397px', }}>
-    <iframe
-        className="screenshot-full"
-        src="https://www.floik.com/embed/e4f537b5-7b36-4760-9a52-caefc659a90b/b01e837b-b1b0-468e-a4e3-4b8064ba2e56-flo.html"
-        style={{width: '100%', height: '100%', border: '0'}}
-        frameborder="0"
-        allowfullscreen="allowfullscreen"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen>
-    </iframe>
-</div>
+- Name the table *employees*, then add the following columns: firstname, lastname, email, phone, department, position, joining, and status. 
+- Add a few employee records in the database table as placeholder data.
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### 4. List Employees
+### 3. Create a Query to Fetch Data
 
-Now, we need to bind the data returned by the `getEmployees` query above with the Table created in Step 1. Click on the Table component to open its properties panel on the right. Under the `Data` property, paste the below code:
+To display employees in the application, you will first have to fetch the data from the database using a query.
+
+<div class="video-container">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/cE_hGYDeb_s?si=W_zB3iJn9qBf-AU5&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+<br/>
+
+- Click on the **Add** button in the **[Query Panel](/docs/app-builder/query-panel/)** to create a new query.
+- Select **ToolJet Database** as the data source for the query.
+- Rename the query to *getEmployees*.
+- Choose *employees* as the Table name, and List rows as the Operation.
+- To automatically run the query when the app starts, enable the toggle for Run this query on application load? setting.
+- Click on the **Run** button to fetch data.
+
+</div>
+
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+
+### 4. Bind Queried Data to the UI
+
+Now, you need to bind the data returned by the *getEmployees* query with the Table created in the first step. 
+
+<div class="video-container">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/nh-LgW4uhWU?si=ZL_X5tKB3O6oU2ct&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+<br/>
+
+- Click on the Table component to open its properties panel.
+- Under the Data property, enter the below code:
 
 ```js
 {{queries.getEmployees.data}}
 ```
-<div style={{marginBottom:'15px', height:'397px', }}>
-    <iframe
-        className="screenshot-full"
-        src="https://www.floik.com/embed/e4f537b5-7b36-4760-9a52-caefc659a90b/f780f25f-0832-4a06-86f2-46864b891db1-flo.html"
-        style={{width: '100%', height: '100%', border: '0'}}
-        frameborder="0"
-        allowfullscreen="allowfullscreen"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen>
-    </iframe>
-</div>
 
-Now the Table component is filled with the data returned by the `getEmployees` query. 
+Now the Table component is filled with the data returned by the *getEmployees* query. 
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### 5. Add New Employee
+### 5. Create a Query to Add Data
 
-Next step is to create a way to add data for new employees. 
+In the bottom-right corner of the Table component, there is a **+(Add new row)** button that opens an auto-generated form to add new data to the Table. Follow the steps below to create an *addEmployees* query and execute it when you click the **Save** button on the auto-generated form.
 
-- Click on Add in the query panel, select ToolJet Database.
-- Select `employees` as Table name, Create row as Operations.
-- Rename the query to `addEmployee`.
-- Click Add Column to add required columns.
-- Enter code below for **email** and **firstname** column keys:
+<div class="video-container">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/xOihuO1w6Oc?si=CiHstXOao6hQlVtC&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+<br/>
+
+- Click on the **Add** button in the query panel, and select **ToolJet Database** as the data source.
+- Select *employees* as the Table name, and Create row as the Operation.
+- Rename the query to *addEmployees*.
+- Click on **Add Column** to add the required columns.
+- Enter the code below for **email** and **firstname** column keys:
 
 ```js
 {{components.table1.newRows[0].email}}
@@ -159,74 +118,43 @@ Next step is to create a way to add data for new employees.
 ```
 
 Frame all the remaining keys in the same format.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{ marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/quickstart-guide/add-employee-query-v2.png" alt="Add Employee Query" />
 </div>
 
-Let's continue working on this query. The data needs to reload once this query runs since we want the Table component to be populated with the updated data. Follow the below steps to run the `getEmployees` query after the `addEmployee` query is completed. 
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-- Scroll down and click on New event handler.
-- Select Query Success as Event and Run Query as Action.
-- Select `getEmployees` as Query.
+### 6. Use Events to Trigger Queries
 
-<div style={{textAlign: 'center'}}>
-    <img style={{ marginBottom:'15px', borderRadius: '6px'}} className="screenshot-full" src="/img/quickstart-guide/reload-data-v2.png" alt="Reload Table Data" />
+The *addEmployees* query should run when you click the **Save** button on the auto-generated form. The Table component should then reload and display the updated data whenever a new employee is added. Follow the steps below to set up this functionality using events.
+
+<div class="video-container">
+    <iframe width="560" height="315" src="https://www.youtube.com/embed/ceMHaJeXASY?si=YC7jOJm5sJSa1p4K&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
+<br/>
 
-We are now ready with a query that will allow us to add new employee data. Let's link this query to a button.
+- In the *addEmployees* query's configuration, scroll down and click on **New event handler** to add a new event.
+- Select Query Success as the Event, Run Query as the Action, and *getEmployees* as the Query.
+- Click on the Table component, and click on **New event handler** in the properties panel.
+- Choose Add new rows as the Event, Run Query as the Action, and *addEmployees* as the Query.
 
-In the bottom-right corner of the Table component, there is a `+`/Add new row button. Follow the below steps to run the `addEmployee` query on click of the `+`/Add new row button: 
-- Click on the Table component, go to Events in properties panel and add a New event handler.
-- Choose Add new rows as Event, Run Query as Action.
-- Select `addEmployee` as the Query.
-
-<div style={{marginBottom:'15px', height:'397px', }}>
-    <iframe
-        className="screenshot-full"
-        src="https://www.floik.com/embed/e4f537b5-7b36-4760-9a52-caefc659a90b/e53c2517-41f1-4ee0-a5c0-59f5c3622c4a-flo.html"
-        style={{width: '100%', height: '100%', border: '0'}}
-        frameborder="0"
-        allowfullscreen="allowfullscreen"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen>
-    </iframe>
-</div>
-
-Now if you click on the `+`/Add new row button, enter the employee data and click on Save. The `addEmployee` query will run and the data will be written to the `employees` table in the ToolJet Database.
-
-<div style={{marginBottom:'15px', height:'397px', }}>
-    <iframe
-        className="screenshot-full"
-        src="https://www.floik.com/embed/e4f537b5-7b36-4760-9a52-caefc659a90b/a33b3f9d-a33d-49c3-a031-db09b0202cfd-flo.html"
-        style={{width: '100%', height: '100%', border: '0'}}
-        frameborder="0"
-        allowfullscreen="allowfullscreen"
-        webkitallowfullscreen
-        mozallowfullscreen
-        allowfullscreen>
-    </iframe>
-</div>
+Now, when you click the **+ (Add new row)** button on the Table component, enter the employee details, and click **Save**, the data will be added to the database and automatically reflected in the Table component on the UI.
 
 </div>
 
 <div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-### 6. Preview, Release And Share
-
-The preview, release and share buttons are on the top-right of the App-Builder.
-
-- Click on the Preview on the top-right of app builder to review how your application is coming along while development.
-- Once the development is done and you are ready to use the application, click on Release button to deploy the app.
-- Finally, share your application with your end users using Share button.
+### 7. Preview, Release, and Share
 
+The preview, release and share buttons are at the top-right of the App-Builder.
 
 <div style={{textAlign: 'center'}}>
     <img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/quickstart-guide/preview-share-v2.png" alt="Preview And Share" />
 </div>
 
-Congratulations on completing the tutorial! You've successfully built an employee directory application and, in the process, covered the fundamentals of ToolJet. 
+- Click on the **Preview** button on the top-right of app builder to review how your application is coming along during development.
+- Once the development is done and you are ready to use the application, click on the **Release** button to deploy the app.
+- Finally, share your application with your end users using the **Share** button.
+
+Congratulations on completing the tutorial! You've successfully built an employee directory application and, in the process, learnt the fundamentals of ToolJet. 
 
 To learn more about how ToolJet works, explore the subjects covered in **[ToolJet Concepts](/docs/tooljet-concepts/what-are-components)**.
 

docs/docs/gitsync.md

@@ -11,538 +11,354 @@ import TabItem from '@theme/TabItem';
 
 The GitSync feature enables synchronization of workspace applications with a git repository, streamlining application management and version control on ToolJet.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Overview
 
 ToolJet applications can be synchronized with a Git repository, offering the flexibility to tailor your application development and deployment processes across various environments while aligning with best practices for the application development lifecycle.
 
-</div>
+#### Key Use-Cases
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Key Use-Cases:
-
-#### Backup of Apps
+**Backup of Apps**
 
 GitSync provides a straightforward solution for creating backups of your applications. By pushing changes to a Git repository, users can ensure a secure and versioned history of their application. This serves as a reliable backup mechanism, safeguarding against accidental application/version deletion or corruption.
 
-#### Environment Migration
+**Environment Migration**
 
 Facilitating the movement of applications across different ToolJet deployments (e.g., from development to staging to production), GitSync acts as a pivotal tool for environment migration. Users can effortlessly transfer their applications across environments by pushing changes to a Git repository.
 
-<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/gitsync/envmigration.png" alt="GitSync" />
-</div>
-
-<br/>
+<img className="screenshot-full" src="/img/gitsync/envmigration.png" alt="GitSync" />
 
 </div>
 
+<div style={{paddingTop:'24px'}}>
 
+## Setting up GitSync
 
-<Tabs>
-<TabItem value="GitHub" label="Setting up GitSyncing with GitHub">
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-## Setting up GitSyncing with GitHub
-
-:::caution
+:::info
 - ToolJet support git repo managers like GitHub, GitLab, Bitbucket, AWS CodeCommit, and Azure Repos.
 - Only Admins have the permission to configure the GitSync feature on workspace level.
-- The default branch name for the git repository should be `master`.
+- The default branch name for the git repository should be **master**.
 :::
 
-### Step 1: Create a new repository on GitHub
+### 1. Create a New Repository
 
-Create a new repository on GitHub. The repository can be public or private. You can also use an existing repository. Make sure that the repository is empty.
+Create a new repository on your git repo manager. The repository can be public or private. You can also use an existing repository. **Make sure that the repository is empty.**
 
-<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/gitsync/github1.png" alt="GitSync" />
-</div>
+<Tabs>
 
-### Step 2: Obtain the repository URL
+    <TabItem value="GitHub" label="GitHub"> 
 
-Obtain the **SSH URL** of the repository. When a repository is created, GitHub shows a screen with the repository URL. If the repository is already created, you can obtain the URL by clicking on the **Clone or download** button.
+        <img className="screenshot-full" src="/img/gitsync/github1.png" alt="GitSync" />
 
-<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/gitsync/github2.png" alt="GitSync" />
-</div>
+    </TabItem>
 
-### Step 3: Configure the GitSync feature on ToolJet
+    <TabItem value="GitLab" label="GitLab"> 
 
-Go to the **Workspace settings**, and click on the **Configure git** tab.
-Enter the **SSH URL** of the repository (obtained in Step 2) in the **Git repository URL** field. Click on the **Generate SSH key** button, and copy the SSH key that is generated. The SSH key is used to authenticate ToolJet with the repository.
+        <img className="screenshot-full" src="/img/gitsync/gitlab/repo.png" alt="GitSync" />
 
-There are two types of generated SSH keys: **
-- **ED25519**: This is a secure and efficient algorithm that is used for generating SSH keys. It is recommended to use this key type. VCS providers like GitHub and GitLab recommend using this key type
-- **RSA**: This is an older algorithm that is used for generating SSH keys. It is not recommended to use this key type. Older VCS providers like Bitbucket recommend using this key type.
+    </TabItem>
 
-<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/gitsync/ssh2-v2.png" alt="GitSync" />
-</div>
+</Tabs>
 
-### Step 4: Deploy the SSH key to GitHub repository
+### 2. Obtain the Repository URL
 
-Go to the **Settings** tab of the GitHub repository that you created in Step 1, and click on the **Deploy keys** tab. Click on the **Add deploy key** button. 
+Obtain the **SSH URL** of your repository.
 
-<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/gitsync/github3.png" alt="GitSync" />
-</div>
+<Tabs>
 
-Enter a title for the SSH key in the **Title** field. Paste the SSH key that you copied in Step 3 in the **Key** field. Make sure that the **Allow write access** checkbox is checked, especially when configuring the GitSync feature to [push changes to Git](#pushing-changes-to-git-repo). However, it is not mandatory to check this option when setting up the GitSync feature for [pulling changes from Git](#pulling-changes-from-git-repo). Finally, click on the **Add key** button.
+    <TabItem value="GitHub" label="GitHub"> 
 
-<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/gitsync/github4.png" alt="GitSync" />
-</div>
+        When a repository is created, GitHub shows a screen with the repository URL. If the repository is already created, you can obtain the URL by clicking on the **Clone or download** button.
+        <img className="screenshot-full" src="/img/gitsync/github2.png" alt="GitSync" />
 
-### Step 5: Finish the GitSync configuration on ToolJet
+    </TabItem>
+
+    <TabItem value="GitLab" label="GitLab"> 
+
+        On GitLab, you can obtain the URL by clicking on the **Clone** button and selecting the **SSH** option.
+        <img className="screenshot-full" src="/img/gitsync/gitlab/gitlabssh.png" alt="GitSync" />
+
+    </TabItem>
+
+</Tabs>
+
+### 3. Configure the GitSync Feature on ToolJet
+
+    1. Go to the **Workspace settings**, and click on the **Configure git** tab.
+
+    <img className="screenshot-full" src="/img/gitsync/gitsync.png" alt="GitLab Repo" />
+
+    2. Enter the **SSH URL** of the repository (obtained in [Step 2](#2-obtain-the-repository-url)) in the **Git repo URL** field.
+    3. Click on the **Generate SSH key** button, and copy the SSH key that is generated. The SSH key is used to authenticate ToolJet with the repository.
+
+    <img className="screenshot-full" src="/img/gitsync/ssh2-v2.png" alt="GitSync" />
+
+    There are two types of generated SSH keys:
+    - **ED25519**: This is a secure and efficient algorithm that is used for generating SSH keys. It is recommended to use this key type. VCS providers like GitHub and GitLab recommend using this key type
+    - **RSA**: This is an older algorithm that is used for generating SSH keys. It is not recommended to use this key type. Older VCS providers like Bitbucket recommend using this key type.
+
+    <img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/gitsync/ssh2.png" alt="GitSync" />
+
+### 4. Deploy the SSH Key
+
+<Tabs>
+
+    <TabItem value="GitHub" label="GitHub"> 
+        
+        Follow the following steps to deploy the SSH key to GitHub Repository:
+
+        1. Go to the **Settings** tab of the GitHub repository that you created in [Step 1](#1-create-a-new-repository), and click on the **Deploy keys** tab. Click on the **Add deploy key** button. 
+
+        <img className="screenshot-full" src="/img/gitsync/github3.png" alt="GitSync" />
+
+        2. Enter a title for the SSH key in the **Title** field. 
+        3. Paste the SSH key that you copied in [Step 3](#3-configure-the-gitsync-feature-on-tooljet) in the **Key** field. 
+        4. Make sure that the **Allow write access** checkbox is checked, especially when configuring the GitSync feature to [push changes to Git](#pushing-changes-to-git-repo). However, it is not mandatory to check this option when setting up the GitSync feature for [pulling changes from Git](#pulling-changes-from-git-repo).
+        5. Finally, click on the **Add key** button.
+
+        <img className="screenshot-full" src="/img/gitsync/github4.png" alt="GitSync" />
+
+    </TabItem>
+
+    <TabItem value="GitLab" label="GitLab"> 
+
+        You have two options to add the SSH key to GitLab, depending on your needs:
+
+        #### Option 1: Add as a User-Wide SSH Key
+        
+        Use this option for access to all your repositories.
+
+        1. Click on your avatar in the top-left corner and select **Edit Profile**.
+        2. Navigate to the **SSH Keys** tab and click the **Add new key** button.
+
+        <img className="screenshot-full" src="/img/gitsync/gitlab/addingssh.png" alt="GitLab SSH Key" />
+
+        3. In the **Key** field, paste the SSH key you generated in [Step 3](#3-configure-the-gitsync-feature-on-tooljet).
+        4. Give your key a descriptive title.
+        5. Set **Usage type** to **Authentication & signing**.
+        6. Optionally, set an expiration date.
+        7. Click **Add key** to save.
+
+        <img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/gitsync/gitlab/activessh.png" alt="GitLab SSH Key" />
+
+        #### Option 2: Add as a Deploy Key 
+
+        Use this option for access to a specific repository only.
+
+        1. Navigate to the repository you want to add the key to.
+        2. Click on the **Settings** tab and select **Repository**.
+        3. Once you are in the **Repository Settings**, expand the **Deploy Keys** section.
+        4. Click on the **Add new deploy key** button.
+        5. Give your key a descriptive title.
+        6. In the **Key** field, paste the SSH key you generated in ToolJet's Configure Git tab during the previous step.
+        7. Enable the **Grant write permissions to this key** checkbox. We need this permission to push changes to the repository.
+        8. Click **Add key** to save.
+
+        <img className="screenshot-full" src="/img/gitsync/gitlab/deploy-keys.png" alt="GitLab Deploy Key" />
+
+    </TabItem>
+
+</Tabs>
+
+### 5. Finish the GitSync Configuration on ToolJet
 
 Go back to the **Configure git** tab on ToolJet, and click on the **Finalize setup** button. If the SSH key is configured correctly, you will see a success message.
 
-<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/gitsync/finalize-ssh2-configuration-v2.png" alt="GitSync" />
-</div>
-<br/>
+<img className="screenshot-full" src="/img/gitsync/finalize-ssh2-configuration-v2.png" alt="GitSync" />
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Auto-commit on Promoting Environment
 
-When you promote an environment, from **Developement to Staging** or from **Staging to Production**, the changes will be automatically committed to the git repository. The commit message will be `<version_number> Version of <app_name> promoted from <source_environment> to <destination_environment>`. The author will be the user who promoted the environment.
+When you promote an environment, from **Developement to Staging**, the changes will be automatically committed to the git repository. The commit message will be `<version_number> Version of <app_name> promoted from <source_environment> to <destination_environment>`. The author will be the user who promoted the environment. When you promote an environment, from **Staging to Production**, no changes will be committed to the git repository.
 
-<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/gitsync/promoted.png" alt="GitSync" />
-</div>
-<br/>
+<img className="screenshot-full" src="/img/gitsync/promoted.png" alt="GitSync" />
 
 This option can be enabled or disabled from the **Configure git** tab on the **Workspace settings** page. By default, this option is disabled.
 
-<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/gitsync/autocommit-v2.png" alt="GitSync" />
-</div>
-<br/>
+<img className="screenshot-full" src="/img/gitsync/autocommit-v2.png" alt="GitSync" />
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Enable/Disable GitSync
 
 To enable or disable the GitSync feature, go to the **Configure git** tab on the **Workspace settings** page, and toggle on/off the **Connect** switch. This is only available if the GitSync feature is configured.
 
-**When enabled**
+#### When Enabled
 
 On clicking the GitSync button, the users will be able to commit changes to the git repository.
 
-**When disabled**
-1. For non-admin users: The users will not be able to commit changes to the git repository. They will see a dialogue box that the GitSync feature is not configured and they need to contact the admin to configure it.
-2. For admin users: The users will see a dialogue box with a link to configure the GitSync feature.
+#### When Disabled
 
-<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/gitsync/connect-v2.png" alt="GitSync" />
-</div>
-<br/>
+1. **For non-admin users**: The users will not be able to commit changes to the git repository. They will see a dialogue box that the GitSync feature is not configured and they need to contact the admin to configure it.
+2. **For admin users**: The users will see a dialogue box with a link to configure the GitSync feature.
+
+<img className="screenshot-full" src="/img/gitsync/connect-v2.png" alt="GitSync" />
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Delete GitSync Configuration
 
 To delete the GitSync configuration, go to the **Configure git** tab on the **Workspace settings** page, and click on the **Delete configuration** button. This will delete the SSH key from the ToolJet configuration and the GitSync feature will be disabled.
 
-**Note:**
-- Deleting the GitSync configuration will not delete the apps from the git repository. The apps will still be available in the git repository in the same state as they were before the GitSync configuration was deleted.
+**Note:** Deleting the GitSync configuration will not delete the apps from the git repository. The apps will still be available in the git repository in the same state as they were before the GitSync configuration was deleted.
 
-<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/gitsync/deleteconfig-v2.png" alt="GitSync" />
-</div>
-<br/>
+<img className="screenshot-full" src="/img/gitsync/deleteconfig-v2.png" alt="GitSync" />
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Git Repo
 
-Once the initial commit is made, you can see the app files in the git repository. The repository will have the individual app folders and a **.meta** folder. The app folders will be named as the app name and will have the respective **JSON** file of the application. The **.meta** folder will have the `meta.json` file that contains the meta information of each application synced to git repo.
+Once the initial commit is made, you can see the app files in the git repository. The repository will have the individual app folders and a **.meta** folder. The app folders will be named as the app name and will have the respective **JSON** file of the application. The **.meta** folder will have the **meta.json** file that contains the meta information of each application synced to git repo.
 
 The **meta.json** file holds information about apps such as the **App name**, **last commit message**, **last commit user**, **last commit date**, **version name**, and **version id**.
 
-<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/gitsync/gitcommit.png" alt="GitSync" />
-</div>
-<br/>
+<Tabs>
+
+    <TabItem value="GitHub" label="GitHub"> 
+
+        <img className="screenshot-full" src="/img/gitsync/gitcommit.png" alt="GitSync" />
+
+    </TabItem>
+
+    <TabItem value="GitLab" label="GitLab"> 
+
+        <img className="screenshot-full" src="/img/gitsync/gitlab/firstcommit.png" alt="GitSync" />
+
+    </TabItem>
+
+</Tabs>
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Pushing Changes to Git Repo
 
 Once the GitSync feature is configured, you can start pushing changes to the git repository. 
 
-### App Creation
+#### App Creation
 
-When you create a new app, you will see an option to select the `Commit changes`. If you select the `commit changes` option, the changes will be committed to the git repository.
+When you create a new app, you will see an option to select the **Commit changes**. If you select the **commit changes** option, the changes will be committed to the git repository.
 
 :::info
 If the app name is same as the name of the existing app in the git repo, it will overwrite the existing app in the git repo.
 :::
 
-<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/gitsync/commitchanges-v2.png" alt="GitSync" />
-</div>
-<br/>
+<img className="screenshot-full" src="/img/gitsync/commitchanges.png" alt="GitLab SSH Key" />
 
-Selecting the `Commit changes` option will create a new commit in the git repository. The commit message will be `App creation` and the author will be the user who created the app.
+Selecting the **Commit changes** option will create a new commit in the git repository. The commit message will be `App creation` and the author will be the user who created the app.
 
-<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/gitsync/firstcommit.png" alt="GitSync" />
-</div>
-<br/>
+<Tabs>
 
-### App Rename
+    <TabItem value="GitHub" label="GitHub"> 
+
+        <img className="screenshot-full" src="/img/gitsync/firstcommit.png" alt="GitSync" />
+
+    </TabItem>
+
+    <TabItem value="GitLab" label="GitLab"> 
+
+        <img className="screenshot-full" src="/img/gitsync/gitlab/author.png" alt="GitSync" />
+
+    </TabItem>
+
+</Tabs>
+
+#### App Rename
 
 Whenever an app is renamed, the changes will be automatically committed to the git repository. The commit message will be `App is renamed` and the author will be the user who renamed the app.
 
-<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/gitsync/rename.png" alt="GitSync" />
-</div>
-<br/>
+<Tabs>
 
-### App Updates
+    <TabItem value="GitHub" label="GitHub"> 
+
+        <img className="screenshot-full" src="/img/gitsync/rename.png" alt="GitSync" />
+
+    </TabItem>
+
+    <TabItem value="GitLab" label="GitLab"> 
+
+        <img className="screenshot-full" src="/img/gitsync/gitlab/apprename.png" alt="GitSync" />
+
+    </TabItem>
+
+</Tabs>
+
+#### App Updates
 
 Whenever a user makes a change in an app, they can make a commit to the git repository by clicking on the **GitSync** button on the topbar. On clicking the **GitSync** button, a modal will open with the option to enter the commit message. The user can enter the commit message and click on the **Commit changes** button to commit the changes to the git repository. Along with the commit message, the user can also see the connnected **Git repo URL** and the **last commit details**. 
 
 **Last commit details** helps the user to know the last commit message, author, date, and time. This helps the user to know the last commit details and make the commit message accordingly.
 
-<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/gitsync/modalgit.png" alt="GitSync" />
-</div>
-<br/>
+<img className="screenshot-full" src="/img/gitsync/gitlab/message.png" alt="GitLab SSH Key" />
 
 Once the changes are committed, the user can see the commit message, author, and date in the git repository.
 
-<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/gitsync/commitgitsync.png" alt="GitSync" />
-</div>
-<br/>
+<Tabs>
 
-### App Deletion
+    <TabItem value="GitHub" label="GitHub"> 
+
+        <img className="screenshot-full" src="/img/gitsync/commitgitsync.png" alt="GitSync" />
+
+    </TabItem>
+
+    <TabItem value="GitLab" label="GitLab"> 
+
+        <img className="screenshot-full" src="/img/gitsync/gitlab/lastcommitmsg.png" alt="GitSync" />
+
+    </TabItem>
+
+</Tabs>
+
+#### App Deletion
 
 Whenever a user deleted an app from the workspace, the app will not be deleted from the git repository. The app will be available in the git repository in the same state as it was before the app was deleted.
 
-### App Version Update
+#### App Version Update
 
-Whenever a user creates a new app version and creates a commit to git repository, the **JSON** file in the app folder will be replaced with the new version of the app that was created. The **meta.json** file in the **.meta** folder will also be updated with the new version id and version name.
+When a user creates a new version of an app, there will be an option to select the **Commit changes**. If you select the **commit changes** option, the new version of the app will be committed to the git repository.
 
-<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/gitsync/replace.png" alt="GitSync" />
-</div>
-<br/>
-
-</div>
-
-
-
-## Pulling Changes from Git Repo
-
-You can configure the GitSync feature on another workspace to pull the changes from the git repository. To configure the GitSync feature on another workspace, follow the steps mentioned in the [Setting up GitSyncing with GitHub](#setting-up-git-syncing-with-github) section.
-
-Once the GitSync feature is configured, go to the ToolJet dashboard and click on the three dots on the right side of the **Create new app** button. Click on the **Import from git repository** option.
-
-<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/gitsync/importgit-v2.png" alt="GitSync" />
-</div>
-<br/>
-
-On clicking the **Import from git repository** option, a modal will open with the dropdown to select the app to be imported from the git repository. Once the app is selected, the app name and the last commit will be displayed. Click on the **Import app** button to import the app from the git repository. 
-
-:::caution
-- The app imported from the git repository cannot be edited.
-- The app imported from the Git repository should have a unique name. If the app's name is the same as that of an existing app in the workspace, the user will need to either rename the existing app or delete it to successfully import another app with the same name.
-- Workspace constants are not synced with the git repository. After pulling the app, if the app throws an error, the user will need to manually add the workspace constants.
-:::
-
-<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/gitsync/importmodal-v2.png" alt="GitSync" />
-</div>
-<br/>
-
-### Checking for Updates
-
-You can check for updates in the git repository by clicking on the **GitSync** button on the topbar. On clicking the **GitSync** button, a modal will open with the option to **Check for updates**. Click on the **Check for updates** button to check for updates in the git repository. If there are any updates, you will see the details of the updates such as commit message, author, and the date in the modal. Click on the **Pull changes** button to pull the changes from the git repository.
-
-<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/gitsync/updatecheck.png" alt="GitSync" />
-</div>
-<br/>
-
-</TabItem>
-
-
-<TabItem value="GitLab" label="Setting up GitSyncing with GitLab">
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-## Setting up GitSyncing with GitLab
-
-:::caution
-- ToolJet support git repo managers like GitHub, GitLab, Bitbucket, AWS CodeCommit, and Azure Repos.
-- Only Admins have the permission to configure the GitSync feature on workspace level.
-- The default branch name for the git repository should be `master`.
-:::
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Step 1: Create a new repository
-
-Create a new repository on GitLab. The repository can be public or private. You can also use an existing repository. **Make sure that the repository is empty**.
-
-<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/gitsync/gitlab/repo.png" alt="GitLab Repo" />
-</div>
-<br/>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Step 2: Obtain the repository URL
-
-Obtain the **SSH URL** of the repository. On GitLab, you can obtain the URL by clicking on the **Clone** button and selecting the **SSH** option.
-
-<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/gitsync/gitlab/gitlabssh.png" alt="GitLab Repo" />
-</div>
-<br/>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Step 3: Configure the GitSync feature on ToolJet
-
-Go to the **Workspace settings**, and click on the **Configure git** tab.
-
-<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/gitsync/gitsync.png" alt="GitLab Repo" />
-</div>
-<br/>
-
-Enter the **SSH URL** of the repository (obtained in Step 2) in the **Git repository URL** field. Click on the **Generate SSH key** button, and copy the SSH key that is generated. The SSH key is used to authenticate ToolJet with the gitlab repository.
-
-There are two types of generated SSH keys: **
-- **ED25519**: This is a secure and efficient algorithm that is used for generating SSH keys. It is recommended to use this key type. VCS providers like GitHub and GitLab recommend using this key type
-- **RSA**: This is an older algorithm that is used for generating SSH keys. It is not recommended to use this key type. Older VCS providers like Bitbucket recommend using this key type.
-
-<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/gitsync/ssh2.png" alt="GitLab Repo" />
-</div>
-<br/>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Step 4: Deploy the SSH key to GitLab repository
-
-From the top-left corner, click on the user avatar and select the **Edit Profile** option. Navigate to the **SSH Keys** tab and click on the **Add new key** button.
-
-<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/gitsync/gitlab/addingssh.png" alt="GitLab SSH Key" />
-</div>
-<br/>
-
-Paste the SSH key that you copied in Step 3 in the **Key** field, enter a title for the SSH key in the **Title** field, set **Usage type** to **Authenticatioin & signing**, and set the ***Expiration date(optional)**. Finally, click on the **Add key** button.
-
-<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/gitsync/gitlab/activessh.png" alt="GitLab SSH Key" />
-</div>
-<br/>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Step 5: Finish the GitSync configuration on ToolJet
-
-Go back to the **Configure git** tab on ToolJet, and click on the **Finalize setup** button. If the SSH key is configured correctly, you will see a success message.
-
-<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/gitsync/gitlab/configfin.png" alt="GitLab SSH Key" />
-</div>
-<br/>
-
-</div>
-
-</div>
-
-## Auto-commit on promoting environment
-
-When you promote an environment, from **Developement to Staging** or from **Staging to Production**, the changes will be automatically committed to the git repository. The commit message will be `<version_number> Version of <app_name> promoted from <source_environment> to <destination_environment>`. The author will be the user who promoted the environment.
-
-This option can be enabled or disabled from the **Configure git** tab on the **Workspace settings** page. By default, this option is disabled.
-
-<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/gitsync/autocommit.png" alt="GitSync" />
-</div>
-<br/>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-## Enable/Disable GitSync
-
-To enable or disable the GitSync feature, go to the **Configure git** tab on the **Workspace settings** page, and toggle on/off the **Connect** switch. This is only available if the GitSync feature is configured.
-
-**When enabled**
-
-On clicking the GitSync button, the users will be able to commit changes to the git repository.
-
-**When disabled**
-1. For non-admin users: The users will not be able to commit changes to the git repository. They will see a dialogue box that the GitSync feature is not configured and they need to contact the admin to configure it.
-2. For admin users: The users will see a dialogue box with a link to configure the GitSync feature.
-
-<br/>
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/connect.png" alt="GitLab SSH Key" />
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-## Delete GitSync configuration
-
-To delete the GitSync configuration, go to the **Configure git** tab on the **Workspace settings** page, and click on the **Delete configuration** button. This will delete the SSH key from the ToolJet configuration and the GitSync feature will be disabled.
-
-**Note:** Deleting the GitSync configuration will not delete the apps from the git repository. The apps will still be available in the git repository in the same state as they were before the GitSync configuration was deleted.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/deleteconfig.png" alt="GitLab SSH Key" />
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-## Git repo
-
-Once the initial commit is made, you can see the app files in the git repository. The repository will have the individual app folders and a **.meta** folder. The app folders will be named as the app name and will have the respective **JSON** file of the application. The **.meta** folder will have the `meta.json` file that contains the meta information of each application synced to git repo.
-
-The **meta.json** file holds information about apps such as the **App name**, **last commit message**, **last commit user**, **last commit date**, **version name**, and **version id**.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/gitlab/firstcommit.png" alt="GitLab SSH Key" />
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-## Pushing changes to git repo
-
-Once the GitSync feature is configured, you can start pushing changes to the git repository. 
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### App creation
-
-When you create a new app, you will see an option to select the `Commit changes`. If you select the `commit changes` option, the changes will be committed to the git repository.
-
-:::info
-If the app name is same as the name of the existing app in the git repo, it will overwrite the existing app in the git repo.
-:::
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/commitchanges.png" alt="GitLab SSH Key" />
-</div>
-
-Selecting the `Commit changes` option will create a new commit in the git repository. The commit message will be `App creation` and the author will be the user who created the app.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/gitlab/author.png" alt="GitLab SSH Key" />
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### App rename
-
-Whenever an app is renamed, the changes will be automatically committed to the git repository. The commit message will be `App is renamed` and the author will be the user who renamed the app.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/gitlab/apprename.png" alt="GitLab SSH Key" />
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### App updates
-
-Whenever a user makes a change in an app, they can make a commit to the git repository by clicking on the **GitSync** button on the topbar. On clicking the **GitSync** button, a modal will open with the option to enter the commit message. The user can enter the commit message and click on the **Commit changes** button to commit the changes to the git repository. Along with the commit message, the user can also see the connnected **Git repo URL** and the **last commit details**. 
-
-**Last commit details** helps the user to know the last commit message, author, date, and time. This helps the user to know the last commit details and make the commit message accordingly.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/gitlab/message.png" alt="GitLab SSH Key" />
-</div>
-
-Once the changes are committed, the user can see the commit message, author, and date in the git repository.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/gitlab/lastcommitmsg.png" alt="GitLab SSH Key" />
-</div>
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### App deletion
-
-Whenever a user deleted an app from the workspace, the app will not be deleted from the git repository. The app will be available in the git repository in the same state as it was before the app was deleted.
-
-</div>
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### App version update
-
-When a user creates a new version of an app, there will be an option to select the `Commit changes`. If you select the `commit changes` option, the new version of the app will be committed to the git repository.
-
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/gitlab/newversion.png" alt="GitLab SSH Key" />
-</div>
+<img className="screenshot-full" src="/img/gitsync/gitlab/newversion.png" alt="GitLab SSH Key" />
 
 The **JSON** file in the app folder will be replaced with the new version of the app, the **meta.json** file in the **.meta** folder gets updated with the new version id and version name. The commit message will be `Version creation` and the author will be the user who created the new version of the app. 
 
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/gitlab/newversion1.png" alt="GitLab SSH Key" />
-</div>
+<Tabs>
+
+    <TabItem value="GitHub" label="GitHub"> 
+
+        <img className="screenshot-full" src="/img/gitsync/replace.png" alt="GitSync" />
+
+    </TabItem>
+
+    <TabItem value="GitLab" label="GitLab"> 
+
+        <img className="screenshot-full" src="/img/gitsync/gitlab/newversion1.png" alt="GitSync" />
+
+    </TabItem>
+
+</Tabs>
 
 </div>
 
-</div>
+<div style={{paddingTop:'24px'}}>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+## Pulling Changes from Git Repo
 
-## Pulling changes from git repo
-
-You can configure the GitSync feature on another workspace to pull the changes from the git repository. To configure the GitSync feature on another workspace, follow the steps mentioned in the [Setting up GitSyncing with GitLab](#setting-up-gitsyncing-with-gitlab) section.
+You can configure the GitSync feature on another workspace to pull the changes from the git repository. To configure the GitSync feature on another workspace, follow the steps mentioned in the [Setting up GitSync](#setting-up-gitsync) section.
 
 Once the GitSync feature is configured, go to the ToolJet dashboard and click on the three dots on the right side of the **Create new app** button. Click on the **Import from git repository** option.
 
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/importgit.png" alt="GitLab SSH Key" />
-</div>
+<img className="screenshot-full" src="/img/gitsync/importgit-v2.png" alt="GitSync" />
 
 On clicking the **Import from git repository** option, a modal will open with the dropdown to select the app to be imported from the git repository. Once the app is selected, the app name and the last commit will be displayed. Click on the **Import app** button to import the app from the git repository. 
 
@@ -552,24 +368,12 @@ On clicking the **Import from git repository** option, a modal will open with th
 - Workspace constants are not synced with the git repository. After pulling the app, if the app throws an error, the user will need to manually add the workspace constants.
 :::
 
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/importmodal.png" alt="GitLab SSH Key" />
-</div>
+<img style={{marginBottom:'15px'}} className="screenshot-full" src="/img/gitsync/importmodal-v2.png" alt="GitSync" />
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
-
-### Checking for updates
+#### Checking for Updates
 
 You can check for updates in the git repository by clicking on the **GitSync** button on the topbar. On clicking the **GitSync** button, a modal will open with the option to **Check for updates**. Click on the **Check for updates** button to check for updates in the git repository. If there are any updates, you will see the details of the updates such as commit message, author, and the date in the modal. Click on the **Pull changes** button to pull the changes from the git repository.
 
-<div style={{textAlign: 'center'}}>
-    <img style={{padding: '10px', marginBottom:'15px', borderRadius: '6px' }} className="screenshot-full" src="/img/gitsync/updatecheck.png" alt="GitLab SSH Key" />
-</div>
+<img className="screenshot-full" src="/img/gitsync/updatecheck.png" alt="GitSync" />
 
 </div>
-
-</div>
-
-</TabItem>
-</Tabs>
-

docs/docs/how-to/access-cellvalue-rowdata.md

@@ -62,7 +62,7 @@ Now, if the cell value is `electronics`, the text color will be red; otherwise,
 
 ## Change Text Color Using Row Data
 
-- Under Cell Background Color for the `symbol` column, paste the below code: 
+- Under Cell Background Color for the `title` column, paste the below code: 
 
 ```
 {{rowData.price < 100? 'yellow': 'white'}}

docs/docs/how-to/access-users-groups.md

@@ -10,6 +10,8 @@ Let's take a look at the exposed variables of the currentUser property by clicki
 - **firstName** : The value can accessed using `{{globals.currentUser.firstName}}`
 - **lastName** : The value can accessed using `{{globals.currentUser.lastName}}`
 - **groups**: The `groups` attribute is an array representing the groups a user belongs to. By default, every user, including admins, is part of the `all_users` group. Additionally, admins are also part of the `admin` group. To access a specific group name, you need to specify the array index, such as `[0]` for the first group, `[1]` for the second, and so on. For example, you can retrieve the name of the second group a user belongs to with `{{globals.currentUser.groups[1]}}`.
+- **metadata** : The value can accessed using `{{globals.currentUser.metadata}}`.
+
 
 </div>
 

docs/docs/how-to/build-dynamic-forms.md

@@ -0,0 +1,86 @@
+---
+id: build-dynamic-forms
+title: Build Dynamic Forms
+---
+
+This guide walks you through the process of building dynamic, interactive forms in ToolJet through validations.   
+
+<div style={{paddingBottom:'24px'}}>
+
+## 1. Creating the UI
+Let’s get started by setting up your form’s interface.
+
+Drag and drop a **Form** component on the canvas and place the following input components inside it. 
+
+| Component         | Component Name | Label                                              |
+|:--------------------------------|:---------------|:-----------------------------------------------------------------|
+| Star Rating       | *starrating1*  | How satisfied are you with our service?           |
+| Text Input        | *textinput1*   | What specific issues did you encounter?           |
+| Text Input        | *textinput2*   | Email                                              |
+| Number Input      | *numberinput1* | Contact                                            |
+| Button            | *button1*      | Submit                                             |
+
+<div >
+    <img src="/img/how-to/build-dynamic-forms/dynamic-form-UI.png" alt="Dynamic Form UI" />
+</div>
+
+</div>
+
+<div style={{paddingBottom:'24px'}}>
+
+## 2. Add Validations and Conditions
+Now, let’s add some magic with validations and conditions to make your form smart and responsive. 
+
+a. Select the *textinput1* component and navigate to its Visibility condition. Click on **fx** next to the Visibility condition and enter the below code in the input:
+
+```javascript
+{{components.form1.children.starrating1.value<4}}
+```
+*This code will ensure that the *textinput1* component is only visible when the start rating is below 4.*
+
+b. Select the *textinput2* component and navigate to its Custom Validation property. Click on **fx** and enter the following code to test the email format using regex:
+```javascript
+{{/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(components.form1.children.textinput2.value) 
+? '' : 'Invalid email'}}
+```
+
+c. Select the *numberinput1* component and enable the toggle for Make this field mandatory. This setting will display an error when the *numberinput1* component is left blank.
+
+d. Finally, the *button1* component has to be disabled if the rating, email, and contact fields are not valid. Use the following code in the component's Visibility condition to achieve that:
+
+```javascript
+{{!components.form1.children.textinput2.isValid || 
+!components.form1.children.starrating1.value || 
+!components.form1.children.numberinput1.value}}
+```
+</div>
+
+<div style={{paddingBottom:'24px'}}>
+
+## 3. Test the Functionality
+
+It’s time to put your form to the test! Check that everything functions smoothly and as expected.
+
+a. Check whether the *textinput1* is visible and hidden based on the star rating.
+
+<div >
+    <img src="/img/how-to/build-dynamic-forms/start-rating-condition-test.png" style={{paddingBottom:"25px"}} alt="Dynamic Form UI - Test Star Rating" />
+</div>
+
+<div >
+    <img src="/img/how-to/build-dynamic-forms/start-rating-condition-test-2.png" style={{paddingBottom:"25px"}} alt="Dynamic Form UI - Test Star Rating 2" />
+</div>
+
+<br/>
+
+b. Enter incorrect email and contact details to see whether the related components throw an error while disabling the button.
+
+<div>
+    <img src="/img/how-to/build-dynamic-forms/incorrect-email-and-contact-test.png" alt="Dynamic Form UI - Incorrect Email and Contact Test" />
+</div>
+
+</div>
+
+This short guide covers the main validation options that you can use while creating a dynamic form. To explore further, use the Tabs component to create multi-page forms while using the same logic to make it dynamic. 
+
+

docs/docs/how-to/conditionally-display-components.md

@@ -0,0 +1,44 @@
+---
+id: conditionally-display-components
+title: Conditionally Display Components Using fx and Groups
+---
+
+
+In this guide, you'll see how you can utilize groups to conditionally display components. This can be handy when two or more groups have access to the same app and you want to conditionally display components based on the group.
+
+Here's a basic application with some components. 
+
+<div style={{textAlign: 'left'}}>
+    <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/conditionally-view-components/initial-ui.png" alt="Initial UI without any conditions" />
+</div>
+
+In this app, the `Approve Selected` button should only display if someone from the **Manager** group is accessing the application. 
+
+- To implement this, select the button component and navigate to its `Visibility` property. 
+- Click on the **fx** button next to `Visibility` and enter the below code in the input:
+
+```js
+{{globals.currentUser.groups.includes('Manager')}}
+```
+<div style={{textAlign: 'left'}}>
+    <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/conditionally-view-components/conditional-visibility-code.png" alt="Visibility Code on Button Component" />
+</div>
+
+- Now if you check the UI, you won't see the **Button** component unless you are a part of the `Managers` group.
+
+- Here's what the users who are not in the `Managers` group can see:
+
+<div style={{textAlign: 'left'}}>
+    <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/conditionally-view-components/non-manager-view.png" alt="Non Manager View" />
+</div>
+
+- Here's what the users in the `Managers` group can see:
+
+<div style={{textAlign: 'left'}}>
+    <img style={{ border:'0', marginBottom:'15px' }} className="screenshot-full" src="/img/how-to/conditionally-view-components/manager-view.png" alt="Manager View" />
+</div>
+
+This was a basic implementation of how you can control the visibility of components using **fx** and **Groups** in ToolJet. 
+
+Feel free to implement the same logic for more advanced use cases. For instance, for conditionally displaying a section or a group of components, you can place all the relevant components inside a **Container** component and apply the same logic.  
+