Merge pull request #8917 from ToolJet/release/marketplace-1.7

Release: Marketplace 1.7 (v2.33.0)

.version

@@ -1 +1 @@
-2.32.5
+2.33.0

README.md

@@ -10,7 +10,7 @@ ToolJet is an **open-source low-code framework** to build and deploy internal to
 ![Number of GitHub pull requests that are open](https://img.shields.io/github/issues-pr-raw/tooljet/tooljet)
 ![GitHub release; latest by date](https://img.shields.io/github/v/release/tooljet/tooljet)
 ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/tooljet/tooljet)
-[![GitHub license which is APGL license](https://img.shields.io/github/license/ToolJet/ToolJet)](https://github.com/ToolJet/ToolJet)
+[![GitHub license which is AGPL license](https://img.shields.io/github/license/ToolJet/ToolJet)](https://github.com/ToolJet/ToolJet)
 [![Follow us on X, formerly Twitter](https://img.shields.io/twitter/follow/ToolJet?style=social)](https://twitter.com/ToolJet)
 
 <p align="center">
@@ -23,13 +23,13 @@ ToolJet is an **open-source low-code framework** to build and deploy internal to
 
 ## All features
 
-- **Visual App Builder:** 40+ built-in responsive components, including Tables, Charts, Lists, Forms, and Progress Bars.
+- **Visual App Builder:** 45+ built-in responsive components, including Tables, Charts, Lists, Forms, and Progress Bars.
 - **ToolJet Database:** Built-in no-code database.
 - **Multi-Page:** Build an application with multiple pages.
 - **Multiplayer editing:** Allows simultaneous app building by multiple developers.
-- **40+ data sources:** Integrate with external databases, cloud storage, and APIs.
+- **50+ data sources:** Integrate with external databases, cloud storage, and APIs.
 - **Desktop & mobile:** Customize layout widths to fit various screen sizes.
-- **Self-host:** Supports Docker, Kubernetes, Heroku, AWS EC2, Google Cloud Run, and more.
+- **Self-host:** Supports Docker, Kubernetes, AWS EC2, Google Cloud Run, and more.
 - **Collaborate:** Add comments anywhere on the canvas and tag your team members.
 - **Extend with plugins:** Use our [command-line tool](https://www.npmjs.com/package/@tooljet/cli) to easily bootstrap new connectors.
 - **Version control:** Manage multiple application versions with a structured release cycle.
@@ -48,21 +48,21 @@ ToolJet is an **open-source low-code framework** to build and deploy internal to
 ## Quickstart
 The easiest way to get started with ToolJet is by creating a [ToolJet Cloud](https://tooljet.com) account. ToolJet Cloud offers a hosted solution of ToolJet. If you want to self-host ToolJet, kindly proceed to [deployment documentation](https://docs.tooljet.com/docs/setup/).
 
-You can deploy ToolJet on Heroku and DigitalOcean using one-click-deployment.
+You can deploy ToolJet on DigitalOcean using one-click-deployment.
 
 <p align="center">
-  <a href="https://heroku.com/deploy?template=https://github.com/tooljet/tooljet/tree/main"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku" height=32></a>
   <a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/ToolJet/ToolJet/tree/main"><img src="https://www.deploytodo.com/do-btn-blue.svg" alt="Deploy to DigitalOcean" height=32></a>
 </p>
 
 ### 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 \
+docker run -d \
   --name tooljet \
   --restart unless-stopped \
   -p 80:80 \
+  --platform linux/amd64 \
   -v tooljet_data:/var/lib/postgresql/13/main \
   tooljet/try:latest
 ```
@@ -81,13 +81,12 @@ Documentation is available at https://docs.tooljet.com.
 - [Component Reference](https://docs.tooljet.com/docs/widgets/button)
 
 ## Self-hosted
-You can use ToolJet Cloud for a fully managed solution. If you want to self-host ToolJet, we have guides on deploying ToolJet on Kubernetes, AWS EC2, Docker, Heroku, and more.
+You can use ToolJet Cloud for a fully managed solution. If you want to self-host ToolJet, we have guides on deploying ToolJet on Kubernetes, AWS EC2, Docker, and more.
 
 | Provider  | Documentation |
 | :------------- | :------------- |
 | Digital Ocean | [Link](https://docs.tooljet.com/docs/setup/digitalocean)  |
 | Docker  | [Link](https://docs.tooljet.com/docs/setup/docker)   |
-| Heroku  | [Link](https://docs.tooljet.com/docs/setup/heroku)  |
 | AWS EC2 | [Link](https://docs.tooljet.com/docs/setup/ec2)  |
 | AWS ECS | [Link](https://docs.tooljet.com/docs/setup/ecs)   |
 | OpenShift | [Link](https://docs.tooljet.com/docs/setup/openshift)   |

cypress-tests/cypress-marketplace.config.js

@@ -77,7 +77,6 @@ module.exports = defineConfig({
     baseUrl: "http://localhost:8082",
     specPattern: [
       "cypress/e2e/happyPath/marketplace/commonTestcases/**/*.cy.js",
-      "cypress/e2e/happyPath/marketplace/ceTestcases/**/*.cy.js"
     ],
     numTestsKeptInMemory: 1,
     redirectionLimit: 7,

cypress-tests/cypress-workspace.config.js

@@ -76,8 +76,9 @@ module.exports = defineConfig({
     experimentalRunAllSpecs: true,
     baseUrl: "http://localhost:8082",
     specPattern: [
+      "cypress/e2e/happyPath/platform/ceTestcases/appSlug.cy.js",
       "cypress/e2e/happyPath/platform/commonTestcases/**/*.cy.js",
-      "cypress/e2e/happyPath/platform/ceTestcases/**/*.cy.js"
+      "cypress/e2e/happyPath/platform/ceTestcases/**/!(*appSlug).cy.js"
     ],
     numTestsKeptInMemory: 1,
     redirectionLimit: 15,

cypress-tests/cypress/e2e/happyPath/marketplace/commonTestcases/data-source/mysqlHappyPath.cy.js

@@ -117,7 +117,7 @@ describe("Data sources MySql", () => {
     fillDataSourceTextField(
       postgreSqlText.labelPort,
       postgreSqlText.placeholderEnterPort,
-      "3306"
+      "3318"
     );
     fillDataSourceTextField(
       postgreSqlText.labelDbName,
@@ -141,7 +141,7 @@ describe("Data sources MySql", () => {
     fillDataSourceTextField(
       postgreSqlText.labelDbName,
       postgreSqlText.placeholderNameOfDB,
-      "testdv"
+      "test_db"
     );
     fillDataSourceTextField(
       postgreSqlText.labelUserName,
@@ -210,7 +210,7 @@ describe("Data sources MySql", () => {
     fillConnectionForm({
       Host: Cypress.env("mysql_host"),
       Port: Cypress.env("mysql_port"),
-      "Database Name": "testdv",
+      "Database Name": "test_db",
       Username: Cypress.env("mysql_user"),
       Password: Cypress.env("mysql_password"),
     });
@@ -388,7 +388,7 @@ describe("Data sources MySql", () => {
     fillConnectionForm({
       Host: Cypress.env("mysql_host"),
       Port: Cypress.env("mysql_port"),
-      "Database Name": "testdv",
+      "Database Name": "test_db",
       Username: Cypress.env("mysql_user"),
       Password: Cypress.env("mysql_password"),
     });
@@ -421,7 +421,7 @@ describe("Data sources MySql", () => {
 
     cy.get(".p-3").should(
       "have.text",
-      `[{"Tables_in_testdv (${dbName})":"${dbName}"}]`
+      `[{"Tables_in_test_db (${dbName})":"${dbName}"}]`
     );
 
     // addQuery(
@@ -462,8 +462,8 @@ describe("Data sources MySql", () => {
     );
     fillConnectionForm({
       Host: Cypress.env("mysql_host"),
-      Port: "3306",
-      "Database Name": "testdv",
+      Port: "3318",
+      "Database Name": "test_db",
       Username: Cypress.env("mysql_user"),
       Password: Cypress.env("mysql_password"),
     });

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/groupDuplication.cy.js

@@ -32,6 +32,7 @@ describe("Groups duplication", () => {
             ],
             "All users"
         );
+        cy.apiCreateApp(data.appName);
     });
     it("Should verify the group duplication feature", () => {
         data.firstName = fake.firstName;
@@ -55,7 +56,6 @@ describe("Groups duplication", () => {
             "disable"
         );
 
-        cy.apiCreateApp(data.appName);
         createGroupAddAppAndUserToGroup(data.groupName, data.email);
 
         groupPermission(

deploy/docker/docker-compose-db.yaml

@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   tooljet:

deploy/docker/docker-compose.yaml

@@ -1,4 +1,4 @@
-version: '3'
+version: "3"
 
 services:
   tooljet:

deploy/openshift/postgrest.yaml

@@ -19,7 +19,7 @@ spec:
     spec:
       containers:
       - name: postgrest
-        image: postgrest/postgrest:v10.1.1.20221215
+        image: postgrest/postgrest
         ports:
         - containerPort: 3000
         env:

docker/preview.Dockerfile

@@ -32,7 +32,7 @@ COPY ./server/ ./server/
 RUN npm install -g @nestjs/cli
 RUN npm --prefix server run build
 
-FROM node:18.18.2-buster
+FROM node:18.18.2-bullseye
 # copy postgrest executable
 COPY --from=postgrest/postgrest:v12.0.2 /bin/postgrest /bin
 

docs/docs/actions/set-localstorage.md

@@ -5,55 +5,54 @@ title: Set localStorage
 
 # Set localStorage
 
-This action allows you to specify a `key` and its corresponding `value` to be stored in localStorage.
+This action allows you to specify a `key` and its corresponding `value` to be stored in local storage of the browser. Local storage can be useful in a lot of scenarios. Some of the most common use cases of the local storage includes:
+- Saving form values so that users don't accidentally lose them if they reload the page
+- Storing any kind of data that is not going to be transferred to the database
 
-## Example: App that stores a name in localStorage and displays it on reload
+<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
 
-1. Add an input field, button and a text as shown
+## Example: Setting a Component Value Based on Local Storage
 
-<div style={{textAlign: 'center'}}>
+1. Add **Text Input**, **Button** and **Text** components to the canvas.
 
-![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/1.png)
+    <div style={{textAlign: 'center', marginBotton:'25px'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/add-components.png" alt="Add Components To The Canvas" />
+    </div>
 
-</div>
-
-2. Select the button and add a `Set localStorage` action with `key` set to `name` and value pointing at the value of the text field
-
-<div style={{textAlign: 'center'}}>
-
-![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/2.png)
-
-</div>
-
-3. Select the text label we've added and set its value to the name item from localStorage. 
 
-:::info
-Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
-:::
+2. Select the Button, add a new event handler, and add a `Set local storage` action with `key` set to `localtest` and `value` set to `{{components.textinput1.value}}`. 
 
-<div style={{textAlign: 'center'}}>
+    <div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/set-local-storage.png" alt="Set Local Storage" />
+    </div>
 
-![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/debounce.png)
-
-</div>
+    This will set a local storage value with `localtest` as the key and the value entered in the Text Input component as its value. 
 
+3. Create a `Run JavaScript code` query, and enter the code below: 
 
-4. Now save the application, this is important as we're about to reload the page.
+    ```js
+    return localStorage.getItem("localtest");
+    ```
+    <div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/create-runjs-query.png" alt="Create RunJS Query" />
+    </div>
 
-5. Type in anything you wish on the input box and click on the button
+    Click on the **Run** button in the Query Panel. This query will fetch the `localtest` local storage variable that we had set earlier. 
 
-<div style={{textAlign: 'center'}}>
+4. Select the **Text** component. Under its `Text` property, enter `{{queries.runjs1.data}}`. Now, the Text component will display the value returned by the `Run JavaScript code` query - the local variable we had set earlier. 
+    <div style={{textAlign: 'center'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/update-text-component.png" alt="Update Value Of Text Component Based On Local Storage" />
+    </div>
 
-![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/5.png)
-
-</div>
+5. Select the Button component. Add a new event handler to it, add a `Run query` action, select `runjs1` as the query, and set a debounce of `300`.
+    <div style={{textAlign: 'center', marginBottom:'15px'}}>
+    <img className="screenshot-full" src="/img/actions/localstorage/update-text-on-button-click.png" alt="Updating Text On Button Click" />
+    </div>
 
+    Now, every time you click on the Button component, it will set the local storage value, and the Text component will display the value set in local storage. 
 
-6. Reload the page, you'll see that the value stored in local storage is persisted and it is displayed on screen!
-
-<div style={{textAlign: 'center'}}>
-
-![ToolJet - Action reference -Set local storage sample app](/img/actions/localstorage/6.png)
+    :::info
+    Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: `300`
+    :::
 
 </div>
-

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

@@ -10,7 +10,7 @@ The following guide is intended for contributors to set-up ToolJet locally. If y
 Docker compose is the easiest way to setup 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/docker-local).
+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).
 :::
 
 ## Prerequisites

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

@@ -115,11 +115,11 @@ Follow these steps to setup and run ToolJet on macOS for development purposes. O
     cd ./frontend && npm start
     ```
 
-    The client will start on the port 8082, you can access the client by visiting:  [https://localhost:8082](https://localhost:8082)
+    The client will start on the port 8082, you can access the client by visiting:  [http://localhost:8082](http://localhost:8082)
 
 9. Create login credentials
 
-    Visiting [https://localhost:8082](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.
+    Visiting [http://localhost:8082](http://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.
 
 ## Running tests
 

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

@@ -106,7 +106,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:  [https://localhost:8082](https://localhost:8082)
+    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