Merge branch 'release/1.3.0'

.version

@@ -1 +1 @@
-1.2.4
+1.3.0

docker-compose.yaml

@@ -8,7 +8,7 @@ services:
     image: tooljet-plugins:development
     platform: linux/x86_64
     volumes:
-      - plugins_vol:/app/plugins
+      - ./plugins:/app/plugins
     command: npm run --prefix plugins start
 
   client:
@@ -19,7 +19,7 @@ services:
     platform: linux/x86_64
     volumes:
       - ./frontend:/app/frontend:delegated
-      - plugins_vol:/app/plugins
+      - ./plugins:/app/plugins
       - /app/frontend/node_modules/
     ports:
       - 8082:8082
@@ -38,7 +38,7 @@ services:
       - postgres
     volumes:
       - ./server:/app/server:delegated
-      - plugins_vol:/app/plugins
+      - ./plugins:/app/plugins
       - /app/server/node_modules/
       - ./.env:/app/.env
       - ./.env.test:/app/.env.test
@@ -61,8 +61,3 @@ services:
 
 volumes:
   postgres:
-  plugins_vol:
-    driver_opts:
-      type: none
-      device: ${PWD}/plugins
-      o: bind

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

@@ -26,6 +26,11 @@ docker-compose version 1.26.2, build eefe0d31
 
 ## Setting up
 
+:::tip
+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/).
+:::
+
 1. Clone the repository
    ```bash
    git clone https://github.com/tooljet/tooljet.git

docs/docs/data-sources/elasticsearch.md

@@ -5,27 +5,76 @@ sidebar_position: 7
 # Elasticsearch
 ToolJet can connect to your Elasticsearch cluster to read and write data.
 
-## Supported operations
-1.  Search
-
 ## 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.
+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**.
 
 To add a new Elasticsearch database, click on the `+` button on data sources panel at the left-bottom corner of the app editor. Select Elasticsearch from the modal that pops up.
 
-ToolJet requires the following to connect to your Elasticsearch database.
-
 ToolJet requires the following to connect to your Elasticsearch cluster: 
 - **Host**
 - **Port**
+- **Username**
+- **Password**
 
-<img class="screenshot-full" src="/img/datasource-reference/elasticsearch.png" alt="ToolJet - Datasource Elasticsearch" height="420"/>
+<div style={{textAlign: 'center'}}>
 
-## Querying Firestore 
+![ToolJet - Data Source - Elasticsearch](/img/datasource-reference/elasticsearch/connect.png)
 
-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 on Firestore and click 'Save' to save the query. 
+</div>
+
+## 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. 
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - Elasticsearch](/img/datasource-reference/elasticsearch/query.png)
+
+</div>
 
 :::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 documentation to see how: **[link](/docs/tutorial/transformations)**
+:::
+
+## Supported operations
+
+#### Search
+
+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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - Elasticsearch](/img/datasource-reference/elasticsearch/elastic-search.png)
+
+</div>
+
+#### Index a document
+
+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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - Elasticsearch](/img/datasource-reference/elasticsearch/index.png)
+
+</div>
+
+#### Get a document
+
+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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - Elasticsearch](/img/datasource-reference/elasticsearch/get.png)
+
+</div>
+
+#### Update a document
+
+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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - Elasticsearch](/img/datasource-reference/elasticsearch/update.png)
+
+</div>

docs/docs/data-sources/n8n.md

@@ -46,4 +46,4 @@ You can trigger a workflow with `GET/POST` URL. Choose the request type from the
 
 ![ToolJet - Data source - n8n](/img/datasource-reference/n8n/query.png)
 
-</div>
+</div>

docs/docs/data-sources/typesense.md

@@ -5,28 +5,99 @@ sidebar_position: 20
 # TypeSense
 ToolJet can connect to your TypeSense deployment to read and write data.
 
-## Supported operations
+## 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**.
+
+ToolJet requires the following to connect to your TypeSense deployment: 
+- **Host**
+- **Port**
+- **API Key**
+- **Protocol**
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - TypeSense](/img/datasource-reference/typesense/connect.png)
+
+</div>
+
+## 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'}}>
+
+![ToolJet - Data Source - TypeSense](/img/datasource-reference/typesense/query.png)
+
+</div>
 
 :::tip
-Documentation for each of these operations are available at https://typesense.org/docs/
+Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
 :::
 
-1. Create collection
-2. Index document
-3. Search documents
-4. Get document
-5. Update document
-6. Delete document
+## Supported operations
+
+#### 1. 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)**
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - TypeSense](/img/datasource-reference/typesense/collection.png)
+
+</div>
+
+#### 2. 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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - TypeSense](/img/datasource-reference/typesense/index.png)
+
+</div>
+
+#### 3. 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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - TypeSense](/img/datasource-reference/typesense/search.png)
+
+</div>
+
+#### 4. 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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - TypeSense](/img/datasource-reference/typesense/get.png)
+
+</div>
+
+#### 5. 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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - TypeSense](/img/datasource-reference/typesense/update.png)
+
+</div>
+
+#### 6. 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)**.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Data Source - TypeSense](/img/datasource-reference/typesense/delete.png)
+
+</div>
 
 :::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.
 :::
-
-## 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.
-
-ToolJet requires the following to connect to your TypeSense deployment: 
-- Host
-- Port
-- API Key
-- Protocol

docs/docs/deployment/heroku.md

@@ -5,7 +5,9 @@ sidebar_label: Heroku
 
 # Deploying ToolJet on Heroku
 
-Follow the steps below to deploy ToolJet on Heroku:
+<iframe width="800" height="500" src="https://www.youtube.com/embed/ApDtwE1OXY0" frameborder="0" allowfullscreen width="100%"></iframe>
+
+### Follow the steps below to deploy ToolJet on Heroku:
 
 1. Click the button below to start one click deployment.  
    <div style={{textAlign: 'center'}}>
@@ -14,16 +16,43 @@ Follow the steps below to deploy ToolJet on Heroku:
 
    </div>
 
-2. Navigate to Heroku dashboard and go to resources tab to verify that the dyno is turned on.
-3. Go to settings tab on Heroku dashboard and select `reveal config vars` to configure additional environment variables that your installation might need.
+2. On Heroku tab, you'll be asked to provide an `App name` and `Choose a region`. Enter the name for your deployment and select the region according to your choice.
 
-   Read **[environment variables reference](/docs/deployment/env-vars)**
+<div style={{textAlign: 'center'}}>
 
-4. Open the app.
-5. The default username of the admin is `dev@tooljet.io` and the password is `password`.
+![ToolJet - Deployment- Heroku](/img/deployment/heroku/appname.png)
+
+</div>
+
+3. Now let's enter the `Config vars` to configure additional [environment variables](/docs/deployment/env-vars) that are required for the installation.
+   - **LOCKBOX_MASTER_KEY**: ToolJet server uses lockbox to encrypt datasource credentials. You should set the environment variable LOCKBOX_MASTER_KEY with a 32 byte hexadecimal string. If you have OpenSSL installed, you can run the command `openssl rand -hex 32` to generate the key.
+   - **NODE_ENV**: By default NODE_ENV is set to production. 
+   - **NODE_OPTIONS**: Node options are configured to increase node memory to support app build.
+   - **SECRET_KEY_BASE**: ToolJet server uses a secure 64 byte hexadecimal string to encrypt session cookies. You should set the environment variable SECRET_KEY_BASE. If you have OpenSSL installed, you can run the command `openssl rand -hex 64` to generate the key.
+   - **TOOLJET_HOST**: Public URL of ToolJet installtion. This is usually `https://<app-name-in-first-step\>.herokuapp.com`.
+   - **TOOLJET_SERVER_URL**: URL of ToolJet server installtion. (This is same as the TOOLJET_HOST for Heroku deployments)
+
+
+4. Click on `Deploy app` button at the bottom to initiate the build.
+
+5. After the succesful build, you'll see two buttons at the bottom: `Manage App` and `View`. Click on the `View` to open the app or click on `Manage App` to configure any settings.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Deployment- Heroku](/img/deployment/heroku/build.png)
+
+</div>
+
+6. The default username of the admin is `dev@tooljet.io` and the password is `password`.
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Deployment- Heroku](/img/deployment/heroku/login.png)
+
+</div>
 
 :::tip
-The one click deployment will create a free dyno and a free postgresql database.
+The one click deployment will create a **free dyno** and a **free postgresql database**.
 :::
 
 :::tip

docs/docs/deployment/kubernetes-gke.md

@@ -13,23 +13,23 @@ Follow the steps below to deploy ToolJet on a GKE Kubernetes cluster.
 
 1. Create an SSL certificate.
 
-   ```bash
-    curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/certificate.yaml
-   ```
+```bash
+curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/certificate.yaml
+```
 
 Change the domain name to the domain/subdomain that you wish to use for ToolJet installation.
 
 2. Reserve a static IP address using `gcloud` cli
 
-   ```bash
-    gcloud compute addresses create tj-static-ip --global
-   ```
+```bash
+gcloud compute addresses create tj-static-ip --global
+```
 
 3. Create k8s deployment
 
-   ```bash
-    curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/deployment.yaml
-   ```
+```bash
+curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/deployment.yaml
+```
 
 Make sure to edit the environment variables in the `deployment.yaml`. You can check out the available options [here](https://docs.tooljet.com/docs/deployment/env-vars).
 
@@ -39,23 +39,23 @@ If there are self signed HTTPS endpoints that Tooljet needs to connect to, pleas
 
 4. Create k8s service
 
-   ```bash
-    curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/service.yaml
-   ```
+```bash
+curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/service.yaml
+```
 
 5. Create k8s ingress
 
-   ```bash
-    curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/ingress.yaml
-   ```
+```bash
+curl -LO https://raw.githubusercontent.com/ToolJet/ToolJet/main/deploy/kubernetes/GKE/ingress.yaml
+```
 
 Change the domain name to the domain/subdomain that you wish to use for ToolJet installation.
 
 6. Apply YAML configs
 
-   ```bash
-    kubectl apply -f certificate.yaml, deployment.yaml, service.yaml, ingress.yaml
-   ```
+```bash
+kubectl apply -f certificate.yaml, deployment.yaml, service.yaml, ingress.yaml
+```
 
 :::info
 It might take a few minutes to provision the managed certificates. [Managed certificates documentation](https://cloud.google.com/kubernetes-engine/docs/how-to/managed-certs).

docs/docs/sso/github.md

@@ -1,32 +1,42 @@
 ---
 sidebar_position: 6
-sidebar_label: Github
+sidebar_label: GitHub
 ---
 
-# Github Single Sign-on
+# GitHub Single Sign-on
 
-Goto [Github Developer settings](https://github.com/settings/developers) and navigate to `OAuth Apps` and create a project. `Authorization callback URL` should be `<Your Domain>/sso/git`
+Goto [GitHub Developer settings](https://github.com/settings/developers) and navigate to `OAuth Apps` and create a project. `Authorization callback URL` should be `<Your Domain>/sso/git`
 
-<img class="screenshot-full" src="/img/sso/git/create-project.png" alt="ToolJet - Github create project" height="420"/>
-<br /><br /><br />
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Github create project](/img/sso/git/create-project.png)
+
+</div>
 
 Open the application details, and you can see the `Client ID`
 
-<img class="screenshot-full" src="/img/sso/git/client-id.png" alt="ToolJet - Git view client id" height="420"/>
-<br /><br /><br />
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Github view client id](/img/sso/git/client-id.png)
+
+</div>
 
 Then create `Client secrets` by clicking `Generate new client secret`
 
-<img class="screenshot-full" src="/img/sso/git/client-secret.png" alt="ToolJet - Git create client secret" height="420"/>
-<br /><br /><br />
+<div style={{textAlign: 'center'}}>
 
+![ToolJet - Github create client secret](/img/sso/git/client-secret.png)
+
+</div>
 
 Lastly, supply the environment variables `SSO_GIT_OAUTH2_CLIENT_ID` which is client id and `SSO_GIT_OAUTH2_CLIENT_SECRET` is client secret to your deployment.
 
 :::info
+
 ### Restrict signup via SSO
+
 Set the environment variable `SSO_DISABLE_SIGNUP` to `true` to ensure that users can only log in and not sign up via SSO. If this variable is set to `true`, only those users who have already signed up, or the ones that are invited, can access ToolJet via SSO.
 :::
 
 <br />
-The Git sign-in button will now be available in your ToolJet login screen.
+The GitHub sign-in button will now be available in your ToolJet login screen.

docs/docs/sso/google.md

@@ -7,31 +7,46 @@ sidebar_label: Google
 
 Goto [Google cloud console](https://console.cloud.google.com/) and create a project.
 
-<img class="screenshot-full" src="/img/sso/google/create-project.png" alt="ToolJet - Google create project" height="420"/>
-<br /><br /><br />
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Google create project](/img/sso/google/create-project.png)
+
+</div>
 
 Goto [Google cloud console credentials page](https://console.cloud.google.com/apis/credentials), and create an OAuth client ID
 
-<img class="screenshot-full" src="/img/sso/google/create-oauth.png" alt="ToolJet - Google create client id" height="420"/>
-<br /><br /><br />
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Google create client id](/img/sso/google/create-oauth.png)
+
+</div>
 
 You'll be asked to select user type in consent screen. To allow only users within your organization, select 'Internal', otherwise,
 select 'External'.
 
-<img class="screenshot-full" src="/img/sso/google/oauth-type.png" alt="ToolJet - OAuth user type" height="420"/>
-<br /><br /><br />
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - OAuth user type](/img/sso/google/oauth-type.png)
+
+</div>
 
 You'll be led to an app registration page where you can set OAuth scopes. Select 'Add or remove scopes' and add the scopes
 userinfo.email and userinfo.profile as shown in the image. This will allow ToolJet to store the email and name of the
 user who is signing in
 
-<img class="screenshot-full" src="/img/sso/google/scope.png" alt="ToolJet - OAuth scope" height="420"/>
-<br /><br /><br />
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - OAuth scope](/img/sso/google/scope.png)
+
+</div>
 
 Set the domain on which ToolJet is hosted as an authorized domain
 
-<img class="screenshot-full" src="/img/sso/google/authorized-urls.png" alt="ToolJet - Google authorized domain" height="420"/>
-<br /><br /><br />
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - authorized domain](/img/sso/google/authorized-urls.png)
+
+</div>
 
 Lastly, supply the environment variable `SSO_GOOGLE_OAUTH2_CLIENT_ID` to your deployment. This value will be available from your [Google cloud console credentials page](https://console.cloud.google.com/apis/credentials)
 
@@ -49,4 +64,4 @@ Set the environment variable `SSO_DISABLE_SIGNUP` to `true` to ensure that users
 :::
 
 <br />
-The Google sign-in button will now be available in your ToolJet login screen.
+The Google sign-in button will now be available in your ToolJet login screen.

docs/docs/widgets/button.md

@@ -2,22 +2,71 @@
 
 Button widget can be used to take actions.
 
-<img class="screenshot-full" src="/img/widgets/button/adding-button.gif" alt="ToolJet - Widget Reference - Button" height="420"/>
+<div style={{textAlign: 'center'}}>
 
-## Event: On click
+![ToolJet - Widget - Button](/img/widgets/button/add-button.gif)
 
-This event is triggered when the button is clicked. Just like any other event on ToolJet, you can set multiple handlers for on click event.
+</div>
 
+## Properties
+### Event: On click
 
+<div style={{textAlign: 'center'}}>
 
-<img class="screenshot-full" src="/img/widgets/button/button-actions-list.png" alt="ToolJet - Widget Reference - Button Action List" height="420" width="746"/>
+![ToolJet - Widget Reference - Button Action List](/img/widgets/button/button-actions.png)
 
-<img class="screenshot-full" src="/img/widgets/button/button-action.gif" alt="ToolJet - Widget Reference - Button Event" height="420" width="746"/>
+</div>
 
+To add an event to a button, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
 
-#### Properties
+**On Click** event is triggered when the button is clicked. Just like any other event on ToolJet, you can set multiple handlers for on click event.
 
-| properties      | description |
-| ----------- | ----------- |
-| Loading state | Loading state can be used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. Default value is `false` . |
-| Button Text | It can be used to set the label of the button. |
+:::info
+Check [Action Reference](/docs/actions/show-alert) docs to get the detailed information about all the **Actions**.
+:::
+
+### Properties
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - widget- button](/img/widgets/button/properties.png)
+
+</div>
+
+| Properties  | description | Expected value |
+| ----------- | ----------- | -------------- |
+| Button Text | It can be used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
+| Loading state | Loading state can be used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Switch the toggle **On** or click on `fx` to programmatically set the value `{{true}}` or `{{false}}`  |
+
+### Layout
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - widget- button](/img/widgets/list-view/listlayout.png)
+
+</div>
+
+| Layout  | description | Expected value |
+| ----------- | ----------- | ------------ |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+
+### Styles
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - widget- button](/img/widgets/button/styles.png)
+
+</div>
+
+| Style      | Description |
+| ----------- | ----------- | 
+| Background color |  You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Text color |  You can change the color of the Text in button by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. |
+| Disable | Toggle on to lock the widget. You can programmatically change its value by clicking on the `Fx` button next to it, if set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+| Border radius | Use this property to modify the border radius of the button. |
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::

docs/docs/widgets/calendar.md

@@ -1,23 +1,28 @@
 # Calendar
+
 Calendar widget comes with the following features:  
-- Day, month and week level views
-- Events
-- Resource scheduling
-  
-<img class="screenshot-full" src="/img/widgets/calendar/calendar1.png" alt="ToolJet - Widget Reference - Calendar" height="600"/>
+- **Day, month and week level views**
+- **Events**
+- **Resource scheduling**
 
-### Properties
+<div style={{textAlign: 'center'}}>
 
-#### Date format
+![ToolJet - Widget Reference - Calendar](/img/widgets/calendar/calendar.png)
+
+</div>
+
+## Properties
+
+### Date format
 Determines the format in which any date passed to the calendar via any of the properties will be parsed.  
 It also determines the format in which any date made available by the calendar via exposed variables will be displayed.  
 It uses the date format conventions of [moment.js](https://momentjs.com/).
-#### Default date
+### Default date
 Determines the date on which the calendar's view will be centered on.  
 If the calendar is on `month` view, it will show the month on which this date exists.  
 If the calendar is on `week` view, it will show the week on which this date exists.  
 This property needs to be formatted using the `Date format` property which is configurable on the inspector.
-#### Events
+### Events
 `Events` property should contain an array of objects, each of which describes the events that the calendar needs to display.
   
 Assuming that you set the date format to `MM-DD-YYYY HH:mm:ss A Z`, setting the `Events` property to the following code snippet will display an event titled `Sample Event` at the first hour of this day, as displayed in the image of calendar at the beginning of this page.
@@ -35,7 +40,7 @@ Assuming that you set the date format to `MM-DD-YYYY HH:mm:ss A Z`, setting the
 ]}}
 ```
 
-##### Event object properties
+### Event object properties
 
 | Name | Description |
 |------|-------------|
@@ -52,83 +57,134 @@ Assuming that you set the date format to `MM-DD-YYYY HH:mm:ss A Z`, setting the
 You may supply any other additional property to the event(s). These additional properties will available to you when the calendar widget
 exposes any of the events via its exposed variables.
 
-#### Resources
+### Resources
 
 Specifying resources will make the calendar categorize `week` view and `day` view for each of the resources specified.  
 
   For example, to categorize week/day view into for three rooms, we specify `resources` this way:
 
 ```javascript
-{{
-  [
+{{[
     {resourceId: 1, title: 'Room A'},
     {resourceId: 2, title: 'Room B'},
     {resourceId: 3, title: 'Room C'},
-  ]
-}}
+  ]}}
 ```
 
 If we specify the `resourceId` of any of the events as `1`, then that event will be assigned to `Room A`, generating the following calendar, assuming that we've set the view to `day` and are viewing the day on which this event exists.
 
-<img class="screenshot-full" src="/img/widgets/calendar/calendar-resource.png" alt="ToolJet - Widget Reference - Calendar Resources" height="600"/>
+<div style={{textAlign: 'center'}}>
 
-#### Default view
+![ToolJet - Widget Reference - Calendar](/img/widgets/calendar/calendar-resource.png)
+
+</div>
+
+### Default view
 
 Determines whether the calendar would display a `day`, a `week` or a `month`.  
 Setting this property to anything other than these values will make the calendar default to `month` view.
 
 The view that is currently selected will be exposed as the variable `currentView`.
 
-#### Start time on week and day view
+### Start time on week and day view
 
 This determines the time at which week view and day view cells begins. Keep in mind that this
 field accepts a date, but still only the time and timezone(if provided) are taken from this date.
 The date should be provided in the date format chosen by you in the first property field.
 
-#### End time on week and day view
+### End time on week and day view
 
 This determines the time at which week view and day view cells ends. Keep in mind that this
 field accepts a date, but still only the time and timezone(if provided) are taken from this date.
 The date should be provided in the date format chosen by you in the first property field.
 
-#### Show toolbar
+### Show toolbar
 
-Determines whether the calendar toolbar should be displayed or not.
+Determines whether the calendar toolbar should be displayed or not. Click on `Fx` button to programmatically determine the field value to `{{true}}` or `{{false}}`.
 
-#### Show view switcher
+### Show view switcher
 
-Determinues whether the calendar's buttons that allow user to switch between `month`, `week` and `day` level views will be displayed.
-### Styles
-#### Cell size in views classified by resource
+Determines whether the calendar's buttons that allow user to switch between `month`, `week` and `day` level views will be displayed. Click on `Fx` button to programmatically determine the field value to `{{true}}` or `{{false}}`.
 
-When `resources` are specified, the calendar could take up quite a lot of horizontal space, making the horizontal scroll bar of calendar having to be relied upon all the time.  
+### Highlight today
 
-If we set this property to `compact`, the cell sizes will be smaller in `week` and `day` views.
+Determines whether the today's card on the calendar should be highlighted or not. Click on `Fx` button to programmatically determine the field value to `{{true}}` or `{{false}}`.
 
-#### Header date format on week view
+### Show popover when the event is clicked
 
-This format determines how the column header for each day in week view will be displayed. As with every other date format field in ToolJet, this follows the momentjs standard of date formatting.
+Determines whether to display a popover whenever an event is clicked. Click on `Fx` button to programmatically determine the field value to `{{true}}` or `{{false}}`.
 
-### Events
+## Events
 
-#### On Event selected
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Calendar](/img/widgets/calendar/events.png)
+
+</div>
+
+### On Event selected
 
 This event is fired when the user clicks on a calendar event.  
   
 Last selected event is exposed as `selectedEvent`.
 
-#### on Slot selected
+### on Slot selected
 
 This event is fired when the user either clicks on an calendar slot(empty cell or empty space of a cell with event) or when they click and drag to select multiple slots.  
   
 Last selected slot(s) are exposed as `selectedSlots`.
 
-#### On Date Navigate
+### On Date Navigate
 
 This event is fired when the user clicks on `Today`, `Next` or `Back` buttons on the calendar.
 The corresponding date to which the user navigated, will be exposed as `currentDate`.
 
-#### On View Change
+### On View Change
 
 This event is fired when a different view is selected by the user. The current view is exposed as
-`currentView`.
+`currentView`.
+
+:::info
+Check [Action Reference](/docs/actions/show-alert) docs to get the detailed information about all the **Actions**.
+:::
+
+## Layout
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Calendar](/img/widgets/calendar/layout.png)
+
+</div>
+
+### Show on desktop
+
+Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+### Show on mobile
+
+Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
+## Styles
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Calendar](/img/widgets/calendar/styles.png)
+
+</div>
+
+### Visibility
+
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+### Cell size in views classified by resource
+
+When `resources` are specified, the calendar could take up quite a lot of horizontal space, making the horizontal scroll bar of calendar having to be relied upon all the time.  
+
+If we set this property to `compact`, the cell sizes will be smaller in `week` and `day` views.
+
+### Header date format on week view
+
+This format determines how the column header for each day in week view will be displayed. As with every other date format field in ToolJet, this follows the momentjs standard of date formatting.
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::

docs/docs/widgets/chart.md

@@ -2,78 +2,163 @@
 
 Chart widget takes the chart type, data and styles to draw charts using Plotly.js.
 
-Support chart types:
+## Chart types
+### Line charts
 
-- Line charts
-- Bar charts
-- Pie charts
+**Data requirements:** The data needs to be an array of objects and each object should have `x` and `y` keys.
 
-## Line charts
-
-Data requirements:
-
-The data needs to be an array of objects and each object should have `x` and `y` keys.
-
-Example:
-
-```
+**Example:**
+```json
 [
   { "x": "Jan", "y": 100},
   { "x": "Feb", "y": 80},
-  { "x": "Mar", "y": 40}
+  { "x": "Mar", "y": 40},
+  { "x": "Apr", "y": 100},
+  { "x": "May", "y": 80},
+  { "x": "Jun", "y": 40}
 ]
 ```
 
 The chart will look like this:
-<img class="screenshot-full" src="/img/widgets/chart/line.png" alt="ToolJet - line charts" height="420"/>
 
-## Bar charts
+<div style={{textAlign: 'center'}}>
 
-Data requirements:
+![ToolJet - Widget Reference - Chart](/img/widgets/chart/linec.png)
 
-The data needs to be an array of objects and each object should have `x` and `y` keys.
+</div>
 
-Example:
+### Bar charts
 
-```
+**Data requirements:** The data needs to be an array of objects and each object should have `x` and `y` keys.
+
+**Example:**
+
+```json
 [
   { "x": "Jan", "y": 100},
   { "x": "Feb", "y": 80},
-  { "x": "Mar", "y": 40}
+  { "x": "Mar", "y": 40},
+  { "x": "Apr", "y": 100},
+  { "x": "May", "y": 80},
+  { "x": "Jun", "y": 40},
+  { "x": "Jul", "y": 100},
+  { "x": "Aug", "y": 80},
+  { "x": "Sep", "y": 40}
 ]
 ```
 
 The chart will look like this:
-<img class="screenshot-full" src="/img/widgets/chart/bar.png" alt="ToolJet - line charts" height="420"/>
 
-## Pie charts
+<div style={{textAlign: 'center'}}>
 
-Data requirements:
+![ToolJet - Widget Reference - Chart](/img/widgets/chart/barc.png)
 
-The data needs to be an array of objects and each object should have `label` and `value` keys.
+</div>
 
-Example:
+### Pie charts
 
-```
+**Data requirements:** The data needs to be an array of objects and each object should have `label` and `value` keys.
+
+**Example:**
+
+```json
 [
-  { "label": "Jan", "value": 100 },
-  { "label": "Feb", "value": 80 },
-  { "label": "Mar", "value": 20 }
+  { "x": "Jan", "y": 100},
+  { "x": "Feb", "y": 80},
+  { "x": "Mar", "y": 40},
+  { "x": "Apr", "y": 100},
+  { "x": "May", "y": 80},
+  { "x": "Jun", "y": 40}
 ]
 ```
 
 The chart will look like this:
-<img class="screenshot-full" src="/img/widgets/chart/pie.png" alt="ToolJet - line charts" height="420"/>
 
+<div style={{textAlign: 'center'}}>
 
-## Visually using JSON
+![ToolJet - Widget Reference - Chart](/img/widgets/chart/piec.png)
+
+</div>
+
+## Properties
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::
+
+### Title
+
+This field is used to add a title to your selected chart.
+
+### Plotly JSON chart schema
 
 In the chart widget, you can also plot a chart with JSON data. So the JSON will contain the information about the chart type, chart data, etc. You can learn more about the JSON properties from [here](https://plotly.com/javascript/reference/). 
 
-Anyway, to work with the JSON you need to enable the ``Use Plotly JSON schema`` toggle from the properties section.
-<img class="screenshot-full" src="/img/widgets/chart/plot_from_json.png" alt="ToolJet - line charts" height="420"/>
+Anyway, to work with the JSON you need to enable the `Use Plotly JSON schema` toggle from the properties section.
 
-It will show the ``Json description`` field to put the JSON data.
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Chart](/img/widgets/chart/pfjson.png)
+
+</div>
+
+It will show the [JSON description](https://plotly.com/chart-studio-help/json-chart-schema/) field to put the JSON data.
 
 The end result will be like this:
-<img class="screenshot-full" src="/img/widgets/chart/from_json.png" alt="ToolJet - line charts" height="420"/>
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Chart](/img/widgets/chart/jsonschema.png)
+
+</div>
+
+### Loading state
+
+Toggle `on` the switch to display a loader on the widget. You can also programmatically define it's value by clicking on `Fx`, acceptable values are - `{{true}}` and `{{false}}`.
+
+### Marker color
+
+Modify the color of marker using the color picker or by providing a `HEX color code`.
+
+### Show Axes
+
+Enable or disable the `x` and `y` axes on the chart through this property. You can also programmatically define it's value by clicking on `Fx`, acceptable values are - `{{true}}` and `{{false}}`.
+
+### Show grid lines
+
+Toggle `on` or `off` to show or hide the grid lines on the chart. You can also programmatically define it's value by clicking on `Fx`, acceptable values are - `{{true}}` and `{{false}}`.
+
+## Layout
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Chart](/img/widgets/chart/layout.png)
+
+</div>
+
+### Show on desktop
+
+Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+### Show on mobile
+
+Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
+## Styles
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Chart](/img/widgets/chart/styles.png)
+
+</div>
+
+### Padding
+
+Define a space between the widget element and the widget border using `Padding` property. Use any numerical value between `1` to `100`.
+
+### Visibility
+
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+### Disable
+
+This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.

docs/docs/widgets/checkbox.md

@@ -6,17 +6,75 @@ Checkbox widget can be used for allowing the users to make a binary choice, e.g,
 The checkbox widget consists of a single checkbox input.
 :::
 
-<img class="screenshot-full" src="/img/widgets/checkbox/checkbox.gif" alt="ToolJet - Widget Reference - Checkbox" height="420"/>
+<div style={{textAlign: 'center'}}>
 
-## Event: On check
+![ToolJet - Widget Reference - Checkbox](/img/widgets/checkbox/checkbox.gif)
+
+</div>
+
+## Properties
+
+### Label
+
+The text is to be used as the label for the checkbox. This field expects a `String` input.
+
+### Events
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Checkbox](/img/widgets/checkbox/events.png)
+
+</div>
+
+:::info
+Check [Action Reference](/docs/actions/show-alert) docs to get the detailed information about all the **Actions**.
+:::
+#### On check
 
 On check event is triggered when checkbox input is checked.
-## Event: On uncheck
+#### On uncheck
 
 On uncheck event is triggered when checkbox input is unchecked.
 
-#### Properties
+### Layout
 
-| properties      | description |
-| ----------- | ----------- |
-| Label | The text is to be used as the label for the checkbox. |
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Checkbox](/img/widgets/checkbox/layout.png)
+
+</div>
+
+#### Show on desktop
+
+Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+#### Show on mobile
+
+Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
+## Styles
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Checkbox](/img/widgets/checkbox/styles.png)
+
+</div>
+
+### Text color
+
+Change the color of the Text in checkbox by entering the `Hex color code` or choosing a color of your choice from the color-picker. 
+
+### Checkbox color
+
+You can change the color of the checkbox by entering the `Hex color code` or choosing a color of your choice from the color-picker.
+
+### Visibility
+
+Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`.
+
+### Disable
+
+This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::

docs/docs/widgets/circular-progress-bar.md

@@ -2,24 +2,60 @@
 
 Circular progress bar widget can be used to show progress in a progress circle.
 
-<img class="screenshot-full" src="/img/widgets/circular-progressbar/circular-progress.gif" alt="ToolJet - Widget Reference - Tags" height="420"/>
+<div style={{textAlign: 'center'}}>
 
-#### Properties
+![ToolJet - Widget Reference - Circular progress bar](/img/widgets/circular-progressbar/cpb.png)
 
-| properties      | description |
+</div>
+
+## Properties
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Circular progress bar](/img/widgets/circular-progressbar/prop.png)
+
+</div>
+
+| properties  | description | Expected Value |
+| ----------- | ----------- | --------------- |
+| Text | We can set a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
+| Progress | It can be used to set the progress of the widget. | Progress should be an integer between 0 and 100.|
+
+## Layout
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Circular progress bar](/img/widgets/circular-progressbar/layout.png)
+
+</div>
+
+| Layout  | description |
 | ----------- | ----------- |
-| Text | We can set a text inside the progress circle.|
-| Progress | It can be used to set the progress of the widget. Progress should be an integer between 0 and 100.|
+| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
+| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
 
-#### Styles
+## Styles
 
-| properties      | description |
-| ----------- | ----------- |
-| Color | To define stroke color.|
-| Stroke width | To define the width of stroke, value must between 0-100. ``Default: 8``.|
-| Counter Clockwise | Whether to rotate progress bar in counterclockwise direction. ``Default: false``.|
-| circleRatio | To define ratio of the full circle diameter the progressbar should use. ``Default: 1``.|
+<div style={{textAlign: 'center'}}>
 
-#### More info
+![ToolJet - Widget Reference - Circular progress bar](/img/widgets/circular-progressbar/styles.png)
 
-Circular progress bar widget uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for futher more details about properties and styles.
+</div>
+
+| properties      | description | Expected Value |
+| ----------- | ----------- | ------------------- |
+| Color | To define stroke color.| `HEX color code` or choose color from color-picker. |
+| Text color | To define color of the text inside circular progress bar.| `HEX color code` or choose color from color-picker. |
+| Text size | To define the size of the text | Value must between 0-100. |
+| Stroke width | To define the width of stroke | Value must between 0-100.|
+| Counter Clockwise | Whether to rotate progress bar in counterclockwise direction. | It accepts `{{true}}` and `{{false}}`, Default value is `false`.|
+| Circle ratio | To define ratio of the full circle diameter the progressbar should use. | It accepts numerical value and the default is `1`. |
+| Visibility | Toggle on or off to control the visibility of the widget. | You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
+
+:::info
+Circular progress bar widget uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for futher more details about properties and styles.
+:::

docs/docs/widgets/code-editor.md

@@ -2,6 +2,30 @@
 
 Code Editor widget is a versatile text editor for editing code and supports several languages. 
 
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Code editor](/img/widgets/code-editor/editor.png)
+
+</div>
+
+## Properties
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Code editor](/img/widgets/code-editor/prop.png)
+
+</div>
+
+| properties      | description | Expected value |
+| ----------- | ----------- | ----------------- |
+| Placeholder |  It specifies a hint that describes the expected value.| This field requires a `String` value |
+| Mode |  It is used to specify the language to be used for the code-editor.| See `info` below for the list of all supported languages |
+| Show Line Number |  This property is used to show or hide line numbers to the left of the editor.| This fields expects a boolean value `{{true}}` or `{{false}}` |
+
 :::info
 <details>
 <summary>Supporting all commonly used languages.</summary>
@@ -140,11 +164,29 @@ Code Editor widget is a versatile text editor for editing code and supports seve
 </details>
 :::
 
-<img class="screenshot-full" src="/img/widgets/code-editor/code-editor.png" alt="ToolJet - Widget Reference - Code Editor" height="420"/>
+## Layout
 
+<div style={{textAlign: 'center'}}>
 
-| properties      | description |
+![ToolJet - Widget Reference - Code editor](/img/widgets/code-editor/layout.png)
+
+</div>
+
+| Layout  | description |
 | ----------- | ----------- |
-| Placeholder |  It specifies a hint that describes the expected value.|
-| Mode |  It is used to specify the language to be used for the code-editor.|
-| Show Line Number |  This property is used to show or hide line numbers to the left of the editor.|
+| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
+| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
+
+## Styles
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Code editor](/img/widgets/code-editor/styles.png)
+
+</div>
+
+| Styles  | description | 
+| ----------- | ----------- |
+| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+| Border radius | Use this property to modify the border radius of the editor. The field expects only numerical value from `1` to `100`, default is `0`. |

docs/docs/widgets/container.md

@@ -2,19 +2,41 @@
 
 Containers are used to group widgets together. You can move the desired number of widgets inside a container to organize your app better.
 
-<img class="screenshot-full" src="/img/widgets/container/container.gif" alt="ToolJet - Widget Reference - Container" height="420"/>
+<div style={{textAlign: 'center'}}>
 
-#### Layout
+![ToolJet - Widget Reference - Code editor](/img/widgets/container/container.gif)
+
+</div>
+
+## Layout
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Container](/img/widgets/container/layout.png)
+
+</div>
 
 | Layout      | description |
 | ----------- | ----------- |
 | Show on desktop | This property have toggle switch. If enabled, the Container widget will display in the desktop view else it will not appear. This is enabled by default.|
 | Show on mobile | This property have toggle switch. If enabled, the Container wisget will display in the mobile view else it will not appear.|
 
-#### Styles
+## Styles
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Container](/img/widgets/container/styles.png)
+
+</div>
 
 | Style      | Description |
 | ----------- | ----------- |
-| backgroundColor |  You can change the background color of the Container by entering the Hex color code or choosing a color of your choice from the color picker. |
+| backgroundColor |  You can change the background color of the Container by entering the `Hex color code` or choosing a color of your choice from the color picker. |
+| Border radius | Use this property to modify the border radius of the container. The field expects only numerical value from `1` to `100`, default is `0`. |
 | Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. |
-| Disable |  This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+| Disable |  This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::

docs/docs/widgets/date-range-picker.md

@@ -2,19 +2,39 @@
 
 The date-range picker widget allows users to select a range of dates.
 
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Date range picker](/img/widgets/date-range-picker/date-range.gif)
+
+</div>
+
+## Properties
+
+### Format
+
+The format of the date selected by the date picker. Default date format is **DD/MM/YYYY**. Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/).
+
+## Layout
+
+### Show on desktop
+
+Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+### Show on mobile
+
+Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
+## Styles
+
+### Border Radius
+
+Use this property to modify the border radius of the date range picker. The field expects only numerical value from `1` to `100`, default is `0`. 
+### Visibility
+
+This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`.
+### Disable
+
+This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
 :::info
-Default date format is **DD/MM/YYYY** .
-:::
-
-:::tip
-Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/) .
-:::
-
-<img class="screenshot-full" src="/img/widgets/date-range-picker/date-range-picker.gif" alt="ToolJet - Widget Reference - Date-range picker" height="420"/>
-
-
-#### Properties
-
-| properties      | description |
-| ----------- | ----------- |
-| Format | The format of the date selected by the date picker |
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::

docs/docs/widgets/datepicker.md

@@ -2,24 +2,58 @@
 
 The Datepicker widget allows users to select a single value for date and time from a pre-determined set.
 
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - Widget Reference - Date range picker](/img/widgets/datepicker/datepicker.png)
+
+</div>
+
+## Properties
+
+### Default value
+
+This value acts as placeholder for the date picker widget, if any value is not provided then the default value will be used from the picker. The default value needs to a `String` with respect to the `format` field. Ex: If format is set to `MM/YYYY` then provide default value as `04/2022`.
+
+### Format
+
+The format of the date selected by the date picker. Default date format is **DD/MM/YYYY**. Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/). This field requires a `String` input. Ex: `DD/MM`, `MM/YYYY`, `YY/MM`, `DD/MM/YYYY` etc.
+
+### Enable time selection?
+
+Allows to select time if enabled. Time selection is disabled by default. This field requires a boolean value: `{{true}}` or `{{false}}`.
+
+### Enable date selection?
+
+Allows to select date if enabled. Date selection is enabled by default. This field requires a boolean value: `{{true}}` or `{{false}}`.
+
+## Validation
+
+### Custom Validation
+
+Add a validation for the date input in the widget using the ternary operator.
+## Layout
+
+### Show on desktop
+
+Toggle on or off to display the widget in desktop view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+### Show on mobile
+
+Toggle on or off to display the widget in mobile view. You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`.
+
+## Styles
+
+### Visibility
+
+This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`.
+
+### Disable
+
+This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`.
+
+### Border Radius
+
+Use this property to modify the border radius of the date-picker. The field expects only numerical value from `1` to `100`, default is `0`. 
+
 :::info
-Default date format is **DD/MM/YYYY** .
-:::
-
-:::tip
-Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/) .
-:::
-
-<img class="screenshot-full" src="/img/widgets/datepicker/datepicker.gif" alt="ToolJet - Widget Reference - Datepicker" height="420"/>
-
-
-#### Properties
-
-| properties      | description |
-| ----------- | ----------- |
-| Format | The format of the date selected by the date picker |
-| Enable time selection | Allows to select time if enabled. Time selection is disabled by default |
-| Enable date selection | Allows to select date if enabled. Date selection is enabled by default  |
-
-
-<img class="screenshot-full" src="/img/widgets/datepicker/datepicker-format.gif" alt="ToolJet - Widget Reference - Datepicker" height="420"/>
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::

docs/docs/widgets/list-view.md

@@ -8,29 +8,52 @@ List view widget allows to create a list of repeatable rows of data. Just like c
 
 </div>
 
-### Properties
+## Properties
 
-#### Layout
-
-| Layout      | description |
-| ----------- | ----------- |
-| List data | Enter the data that you want to diplay into the widget. Data in the form of array of objects or data from a query that returns an array of objects.|
-| Row height | The default value of row height is set to `100`, you can enter a number to set the row height accordingly. |
-| Show bottom border | This property displays a border after every row and is set `{{true}}` by default. Set it `{{false}}` to remove the border. |
+### Event: Row clicked
 
 <div style={{textAlign: 'center'}}>
 
-![ToolJet - List view widget](/img/widgets/list-view/layout.png)
+![ToolJet - List view widget](/img/widgets/list-view/event.png)
 
 </div>
 
-#### Styles
+To add an event to a button, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
 
-| Style      | Description |
-| ----------- | ----------- |
-| backgroundColor |  You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
-| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. |
-| Disable |  This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+**Row clicked** event is triggered when the button is clicked. Just like any other event on ToolJet, you can set multiple handlers for row clicked event.
+
+:::info
+Check [Action Reference](/docs/actions/show-alert) docs to get the detailed information about all the **Actions**.
+:::
+
+### Properties
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - List view widget](/img/widgets/list-view/properties.png)
+
+</div>
+
+| Properties  | description | Expected value |
+| ----------- | ----------- | -------------- |
+| List data | Enter the data that you want to diplay into the widget. Data in the form of array of objects or data from a query that returns an array of objects.| `{{ [ {id: 0, name: ABC, email: abc@bla.com}, {id: 1, name: XYZ, email: xyz@bla.com} ] }}` or `{{queries.xyz.data}}` |
+| Row height | Enter a numerical value to set the row height accordingly. | Any number between `1` to `100` |
+| Show bottom border | This property allows you to show or hide the row botton border. | By deafult its `{{true}}`, set `{{false}}` to hide the border  |
+
+### Layout
+
+<div style={{textAlign: 'center'}}>
+
+![ToolJet - List view widget](/img/widgets/list-view/listlayout.png)
+
+</div>
+
+| Layout  | description | Expected value |
+| ----------- | ----------- | ------------ |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determing the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}`   |
+
+### Styles
 
 <div style={{textAlign: 'center'}}>
 
@@ -38,7 +61,17 @@ List view widget allows to create a list of repeatable rows of data. Just like c
 
 </div>
 
-### Example: Displaying data in the list view
+| Style      | Description |
+| ----------- | ----------- |
+| backgroundColor |  You can change the background color of the widget by entering the Hex color code or choosing a color of your choice from the color picker. |
+| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. By default, it's set to `{{true}}`. |
+| Disable |  This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+
+:::info
+Any property having `Fx` button next to its field can be **programmatically configured**.
+:::
+
+## Example: Displaying data in the list view
 
 - Let's start by creating a new app and then dragging the List view widget onto the canvas.
 

docs/docusaurus.config.js

@@ -19,11 +19,6 @@ module.exports = {
       textColor: '#ffffff',
       isCloseable: true,
     },
-    gtag: {
-      trackingID: process.env.GA_MID,
-      // Optional fields.
-      anonymizeIP: true, // Should IPs be anonymized?
-     },
     colorMode: {
       switchConfig: {
         darkIcon: '\00a0 ',
@@ -117,6 +112,11 @@ module.exports = {
           customCss: require.resolve('./src/css/custom.css'),
         },
         sitemap: {},
+        gtag: {
+          trackingID: process.env.GA_MID,
+          // Optional fields.
+          anonymizeIP: true, // Should IPs be anonymized?
+        },
       },
     ],
   ],

docs/package.json

@@ -14,9 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.9",
+    "@docusaurus/core": "^2.0.0-beta.15",
     "@docusaurus/plugin-google-gtag": "^2.0.0-alpha.73",
-    "@docusaurus/preset-classic": "^2.0.0-beta.9",
+    "@docusaurus/preset-classic": "^2.0.0-beta.15",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "react": "^17.0.1",

docs/src/css/custom.css

@@ -123,12 +123,6 @@ body {
   article  h2 {
     font-size: 1.5rem !important;
   }
-  .menu::-webkit-scrollbar {
-    width: 0;
-  }
-  .menu:hover::-webkit-scrollbar{
-    width: 6.5px;
-  }
 }
 
 .menu__list {
@@ -156,3 +150,11 @@ strong {
 .alert a {
   color: inherit;
 }
+
+.menu {
+  overflow: hidden;
+}
+
+.menu:hover {
+  overflow-y: overlay;
+}

frontend/package.json

@@ -95,7 +95,7 @@
     "jest": "^27.5.1",
     "path": "^0.12.7",
     "prettier": "^2.3.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-dev-server": "^4.7.4"
   },
   "scripts": {
     "start": "webpack serve --port 8082 --host 0.0.0.0",

frontend/src/App/App.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Router, Route } from 'react-router-dom';
+import { Router, Route, Redirect } from 'react-router-dom';
 import { history } from '@/_helpers';
 import { authenticationService, tooljetService } from '@/_services';
 import { PrivateRoute } from '@/_components';
 import { HomePage } from '@/HomePage';
 import { LoginPage } from '@/LoginPage';
 import { SignupPage } from '@/SignupPage';
-import { InvitationPage } from '@/InvitationPage';
+import { ConfirmationPage } from '@/ConfirmationPage';
 import { Authorize } from '@/Oauth2';
 import { Authorize as Oauth } from '@/Oauth';
 import { Editor, Viewer } from '@/Editor';
@@ -118,7 +118,18 @@ class App extends React.Component {
             <Route path="/signup" component={SignupPage} />
             <Route path="/forgot-password" component={ForgotPassword} />
             <Route path="/reset-password" component={ResetPassword} />
-            <Route path="/invitations/:token" component={InvitationPage} />
+            <Route
+              path="/invitations/:token"
+              render={(props) => (
+                <Redirect
+                  to={{
+                    pathname: '/confirm',
+                    state: { token: props.match.params.token, search: props.location.search },
+                  }}
+                />
+              )}
+            />
+            <Route path="/confirm" component={ConfirmationPage} />
             <PrivateRoute
               exact
               path="/apps/:id"

frontend/src/ConfirmationPage/ConfirmationPage.jsx

@@ -3,13 +3,13 @@ import { userService } from '@/_services';
 import { toast } from 'react-hot-toast';
 import queryString from 'query-string';
 
-class InvitationPage extends React.Component {
+class ConfirmationPage extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
       isLoading: false,
-      newSignup: queryString.parse(props.location.search).signup,
+      newSignup: queryString.parse(props.location.state.search).signup,
     };
     this.formRef = React.createRef(null);
   }
@@ -26,7 +26,7 @@ class InvitationPage extends React.Component {
   setPassword = (e) => {
     e.preventDefault();
 
-    const token = this.props.match.params.token;
+    const token = this.props.location.state.token;
     const { password, organization, role, newSignup, firstName, lastName, password_confirmation } = this.state;
     this.setState({ isLoading: true });
 
@@ -203,4 +203,4 @@ class InvitationPage extends React.Component {
   }
 }
 
-export { InvitationPage };
+export { ConfirmationPage };

frontend/src/ConfirmationPage/index.js

@@ -0,0 +1 @@
+export * from './ConfirmationPage';