Merge branch 'main' into appbuilder-1.6

.github/workflows/code-coverage.yml

@@ -0,0 +1,131 @@
+name: Cypress Code-Coverage
+
+on:
+  pull_request_target:
+    types: [labeled, unlabeled, closed]
+
+  workflow_dispatch:
+
+env:
+  PR_NUMBER: ${{ github.event.number }}
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+
+jobs:
+  Cypress-Code-Coverage:
+    name: Code coverage
+    runs-on: ubuntu-22.04
+
+    if: ${{ github.event.action == 'labeled' && (github.event.label.name == 'check-coverage') }}
+
+    steps:
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.18.2
+
+      - name: Set up Docker
+        uses: docker-practice/actions-setup-docker@master
+
+      - name: Run PosgtreSQL Database Docker Container
+        run: |
+          sudo docker network create tooljet
+          sudo docker run -d --name postgres --network tooljet -p 5432:5432 -e POSTGRES_PASSWORD=postgres -e POSTGRES_USER=postgres -e POSTGRES_PORT=5432 -d postgres:13
+
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+
+      - name: Install and build dependencies
+        run: |
+          npm cache clean --force
+          npm install
+          npm install --prefix server
+          npm install --prefix frontend
+          npm run build:plugins
+
+      - name: Set up environment variables
+        run: |
+          echo "TOOLJET_HOST=http://localhost:8082" >> .env
+          echo "LOCKBOX_MASTER_KEY=cd97331a419c09387bef49787f7da8d2a81d30733f0de6bed23ad8356d2068b2" >> .env
+          echo "SECRET_KEY_BASE=7073b9a35a15dd20914ae17e36a693093f25b74b96517a5fec461fc901c51e011cd142c731bee48c5081ec8bac321c1f259ef097ef2a16f25df17a3798c03426" >> .env
+          echo "PG_DB=tooljet_development" >> .env
+          echo "PG_USER=postgres" >> .env
+          echo "PG_HOST=localhost" >> .env
+          echo "PG_PASS=postgres" >> .env
+          echo "PG_PORT=5432" >> .env
+          echo "ENABLE_TOOLJET_DB=true" >> .env
+          echo "TOOLJET_DB=tooljet" >> .env
+          echo "TOOLJET_DB_USER=postgres" >> .env
+          echo "TOOLJET_DB_HOST=localhost" >> .env
+          echo "TOOLJET_DB_PASS=postgres" >> .env
+          echo "PGRST_JWT_SECRET=r9iMKoe5CRMgvJBBtp4HrqN7QiPpUToj" >> .env
+          echo "PGRST_HOST=localhost:3001" >> .env
+          echo "NODE_ENV=developement" >> .env
+
+      - name: Set up database
+        run: |
+          npm run --prefix server db:create
+          npm run --prefix server db:reset
+          npm run --prefix server db:seed
+
+      - name: sleep 5
+        run: sleep 5
+
+      - name: Run PostgREST Docker Container
+        run: |
+          sudo docker run -d --name postgrest --network tooljet -p 3001:3000 \
+          -e PGRST_DB_URI="postgres://postgres:postgres@postgres:5432/tooljet" -e PGRST_DB_ANON_ROLE="postgres" -e PGRST_JWT_SECRET="r9iMKoe5CRMgvJBBtp4HrqN7QiPpUToj" \
+          postgrest/postgrest:v10.1.1.20221215
+
+      - name: Run plugins compilation in watch mode
+        run: cd plugins && npm start &
+
+      - name: Run the server
+        run: cd server && npm run start:dev &
+
+      - name: Run the client
+        run: cd frontend && npm start &
+
+      - name: Wait for the server to be ready
+        run: |
+          timeout 1500 bash -c '
+          until curl --silent --fail http://localhost:8082; do
+            sleep 5
+          done'
+
+      - name: docker logs
+        run: sudo docker logs postgrest
+
+      - name: Create Cypress environment file
+        id: create-json
+        uses: jsdaniell/create-json@1.1.2
+        with:
+          name: "cypress.env.json"
+          json: ${{ secrets.CYPRESS_SECRETS }}
+          dir: "./cypress-tests"
+
+      - name: Install Cypress
+        working-directory: ./cypress-tests
+        run: |
+          npm install
+        
+
+      - name: Run Cypress tests
+        working-directory: ./cypress-tests
+        run: |
+          npm run cy:run
+
+      - name: Debugging
+        run: |
+          ls -R cypress-tests
+          ls -R /home/runner/work/ToolJet/ToolJet/cypress-tests
+          cat /home/runner/work/ToolJet/ToolJet/cypress-tests/.nyc_output/out.json
+        
+
+      - name: Upload Coverage Report
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: coverage
+          path: cypress-tests/coverage

.github/workflows/cypress-appbuilder.yml

@@ -171,6 +171,7 @@ jobs:
           echo "SUB_PATH=/apps/tooljet/" >> .env
           echo "NODE_ENV=production" >> .env
           echo "SERVE_CLIENT=true" >> .env
+          echo "ENABLE_PRIVATE_APP_EMBED=true" >> .env
 
       - name: Pulling the docker-compose file
         run: curl -LO https://tooljet-test.s3.us-west-1.amazonaws.com/docker-compose.yaml && mkdir postgres_data

.github/workflows/cypress-marketplace.yml

@@ -42,7 +42,7 @@ jobs:
 
       - name: Set up environment variables
         run: |
-          echo "TOOLJET_HOST=http://localhost:3000" >> .env
+          echo "TOOLJET_HOST=http://localhost:80" >> .env
           echo "LOCKBOX_MASTER_KEY=cd97331a419c09387bef49787f7da8d2a81d30733f0de6bed23ad8356d2068b2" >> .env
           echo "SECRET_KEY_BASE=7073b9a35a15dd20914ae17e36a693093f25b74b96517a5fec461fc901c51e011cd142c731bee48c5081ec8bac321c1f259ef097ef2a16f25df17a3798c03426" >> .env
           echo "PG_DB=tooljet_development" >> .env
@@ -138,7 +138,7 @@ jobs:
 
       - name: Set up environment variables
         run: |
-          echo "TOOLJET_HOST=http://localhost:3000" >> .env
+          echo "TOOLJET_HOST=http://localhost:80" >> .env
           echo "LOCKBOX_MASTER_KEY=cd97331a419c09387bef49787f7da8d2a81d30733f0de6bed23ad8356d2068b2" >> .env
           echo "SECRET_KEY_BASE=7073b9a35a15dd20914ae17e36a693093f25b74b96517a5fec461fc901c51e011cd142c731bee48c5081ec8bac321c1f259ef097ef2a16f25df17a3798c03426" >> .env
           echo "PG_DB=tooljet_development" >> .env

.github/workflows/cypress-platform.yml

@@ -59,11 +59,15 @@ jobs:
           echo "TOOLJET_DB_HOST=localhost" >> .env
           echo "TOOLJET_DB_PASS=postgres" >> .env
           echo "PGRST_JWT_SECRET=r9iMKoe5CRMgvJBBtp4HrqN7QiPpUToj" >> .env
+          echo "ENABLE_ONBOARDING_QUESTIONS_FOR_ALL_SIGN_UPS=true" >> .env
           echo "PGRST_HOST=localhost:3001" >> .env
           echo "SSO_GIT_OAUTH2_CLIENT_ID=dummy" >> .env
           echo "SSO_GIT_OAUTH2_CLIENT_SECRET=dummy" >> .env
           echo "SSO_GIT_OAUTH2_HOST=dummy" >> .env
           echo "SSO_GOOGLE_OAUTH2_CLIENT_ID=dummy" >> .env
+          echo "ENABLE_PRIVATE_APP_EMBED=true" >> .env
+          echo "ENABLE_MARKETPLACE_FEATURE=true" >> .env
+          echo "ENABLE_MARKETPLACE_DEV_MODE=true" >> .env
 
       - name: Set up database
         run: |
@@ -152,7 +156,7 @@ jobs:
 
       - name: Set up environment variables
         run: |
-          echo "TOOLJET_HOST=http://localhost:3000" >> .env
+          echo "TOOLJET_HOST=http://localhost:80" >> .env
           echo "LOCKBOX_MASTER_KEY=cd97331a419c09387bef49787f7da8d2a81d30733f0de6bed23ad8356d2068b2" >> .env
           echo "SECRET_KEY_BASE=7073b9a35a15dd20914ae17e36a693093f25b74b96517a5fec461fc901c51e011cd142c731bee48c5081ec8bac321c1f259ef097ef2a16f25df17a3798c03426" >> .env
           echo "PG_DB=tooljet_development" >> .env
@@ -168,6 +172,7 @@ jobs:
           echo "PGRST_JWT_SECRET=r9iMKoe5CRMgvJBBtp4HrqN7QiPpUToj" >> .env
           echo "PGRST_HOST=postgrest" >> .env
           echo "PGRST_DB_URI=postgres://postgres:postgres@postgres/tooljet_db" >> .env
+          echo "ENABLE_ONBOARDING_QUESTIONS_FOR_ALL_SIGN_UPS=true" >> .env
           echo "SSO_GIT_OAUTH2_CLIENT_ID=dummy" >> .env
           echo "SSO_GIT_OAUTH2_CLIENT_SECRET=dummy" >> .env
           echo "SSO_GIT_OAUTH2_HOST=dummy" >> .env
@@ -175,6 +180,8 @@ jobs:
           echo "SUB_PATH=/apps/tooljet/" >> .env
           echo "NODE_ENV=production" >> .env
           echo "SERVE_CLIENT=true" >> .env
+          echo "ENABLE_MARKETPLACE_FEATURE=true" >> .env
+          echo "ENABLE_MARKETPLACE_DEV_MODE=true" >> .env
 
       - name: Pulling the docker-compose file
         run: curl -LO https://tooljet-test.s3.us-west-1.amazonaws.com/docker-compose.yaml && mkdir postgres_data

.github/workflows/docs-pr-app.yml

@@ -53,7 +53,7 @@ jobs:
             ],
             "serviceDetails": {
                 "pullRequestPreviewsEnabled": "no",
-                "buildCommand": "npm i && npm run build",
+                "buildCommand": "bash build-latest-version.sh",
                 "publishPath": "build/",
                 "url": "https://tooljet-pr-${{ env.PR_NUMBER }}.onrender.com"
             }

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

@@ -0,0 +1,109 @@
+name: Test system deploy
+
+on:
+  pull_request_target:
+    types: [labeled, unlabeled, closed]
+
+  workflow_dispatch:
+
+
+env:
+  PR_NUMBER: ${{ github.event.number }}
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+
+jobs:
+  Build-and-update-image:
+    runs-on: ubuntu-22.04
+
+    if: ${{ github.event.action == 'labeled' && github.event.label.name == 'test-system-deploy' }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+
+      # Create Docker Buildx builder with platform configuration
+      - name: Set up Docker Buildx
+        run: |
+          mkdir -p ~/.docker/cli-plugins
+          curl -SL https://github.com/docker/buildx/releases/download/v0.11.0/buildx-v0.11.0.linux-amd64 -o ~/.docker/cli-plugins/docker-buildx
+          chmod a+x ~/.docker/cli-plugins/docker-buildx
+          docker buildx create --name mybuilder --platform linux/arm64,linux/amd64,linux/amd64/v2,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
+          docker buildx use mybuilder
+
+      - name: Set DOCKER_CLI_EXPERIMENTAL
+        run: echo "DOCKER_CLI_EXPERIMENTAL=enabled" >> $GITHUB_ENV
+
+      - name: use mybuilder buildx
+        run: docker buildx use mybuilder
+
+      - name: Docker Login
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Set SAFE_BRANCH_NAME
+        run: echo "SAFE_BRANCH_NAME=$(echo ${{ env.BRANCH_NAME }} | tr '/' '-')" >> $GITHUB_ENV
+
+      - name: Build and Push Docker image
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: docker/production.Dockerfile
+          push: true
+          tags: tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}
+          platforms: linux/amd64
+        env:
+          DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+          DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: SSH into EC2 instance
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.EC2_INSTANCE_IP }}
+          username: admin
+          key: ${{ secrets.EC2_INSTANCE_SSH_KEY }}
+          script: |
+            ls -lah
+
+            # Stop the Docker containers
+            sudo docker-compose down
+
+            # Remove the existing tooljet/* images
+            sudo docker images -a | grep 'tooljet/' | awk '{print $3}' | xargs sudo docker rmi -f
+
+            #checking images
+            sudo docker images
+
+            # Update docker-compose.yml with the new image
+            sed -i '/^[[:space:]]*tooljet:/,/^$/ s|^\([[:space:]]*image:[[:space:]]*\).*|\1tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}|' docker-compose.yaml
+
+            # Start the Docker containers
+            cat docker-compose.yaml
+            sudo docker-compose up -d
+
+            #View containers
+            sudo docker ps
+
+      - uses: actions/github-script@v6
+        with:
+          script: |
+            try {
+              await github.rest.issues.removeLabel({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                name: 'test-system-deploy'
+              })
+            } catch (e) {
+              console.log(e)
+            }
+
+            await github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['test-system-deployed']
+            })            

.version

@@ -1 +1 @@
-2.27.0
+2.29.0

README.md

@@ -48,7 +48,7 @@ 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 using one-click deployment.
+You can deploy ToolJet on Heroku and 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>

cypress-tests/.gitignore

@@ -3,4 +3,6 @@
 /cypress/reports
 /cypress/screenshots
 /cypress/downloads
-/cypress/videos
+/cypress/videos
+/coverage
+/.nyc_output

cypress-tests/cypress-app-builder.config.js

@@ -82,6 +82,8 @@ module.exports = defineConfig({
       "cypress/e2e/editor/inspectorHappypath.cy.js",
       "cypress/e2e/editor/queries/runpyHappyPath.cy.js",
       "cypress/e2e/editor/queries/runjsHappyPath.cy.js",
+      "cypress/e2e/editor/multipage/multipageHappypath.cy.js",
+      "cypress/e2e/editor/queries/chainingOfQueries.cy.js",
     ],
     numTestsKeptInMemory: 1,
     redirectionLimit: 7,

cypress-tests/cypress-workspace.config.js

@@ -88,5 +88,9 @@ module.exports = defineConfig({
     experimentalMemoryManagement: true,
     video: false,
     videoUploadOnPasses: false,
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
   },
 });

cypress-tests/cypress.config.js

@@ -71,7 +71,12 @@ module.exports = defineConfig({
           return client.query(sql);
         },
       });
-      return require("./cypress/plugins/index.js")(on, config);
+
+      require("@cypress/code-coverage/task")(on, config);
+      // return config;
+
+      require("./cypress/plugins/index.js")(on, config);
+      return config;
     },
     experimentalRunAllSpecs: true,
     experimentalModfyObstructiveThirdPartyCode: true,
@@ -84,5 +89,9 @@ module.exports = defineConfig({
     experimentalRunAllSpecs: true,
     trashAssetsBeforeRuns: true,
     experimentalMemoryManagement: true,
+    coverage: true,
+    codeCoverageTasksRegistered: true,
+    video: false,
+    videoUploadOnPasses: false,
   },
 });

cypress-tests/cypress/commands/commands.js

@@ -115,9 +115,9 @@ Cypress.Commands.add(
           .last()
           .click()
           .type(createBackspaceText(text), { delay: 0 }),
-        {
-          delay: 0,
-        };
+          {
+            delay: 0,
+          };
       });
     if (!Array.isArray(value)) {
       cy.wrap(subject).last().type(value, {
@@ -193,9 +193,9 @@ Cypress.Commands.add(
       .invoke("text")
       .then((text) => {
         cy.wrap(subject).realType(createBackspaceText(text)),
-        {
-          delay: 0,
-        };
+          {
+            delay: 0,
+          };
       });
   }
 );
@@ -256,7 +256,6 @@ Cypress.Commands.add("reloadAppForTheElement", (elementText) => {
 });
 
 Cypress.Commands.add("skipEditorPopover", () => {
-  // cy.get(".text-muted");
   cy.wait(1000);
   cy.get("body").then(($el) => {
     if ($el.text().includes("Skip", { timeout: 2000 })) {
@@ -366,19 +365,98 @@ Cypress.Commands.add("getPosition", (componentName) => {
 
 Cypress.Commands.add("defaultWorkspaceLogin", () => {
   cy.apiLogin();
-  cy.intercept('GET', "http://localhost:3000/api/library_apps/").as("library_apps")
-  cy.visit('/my-workspace');
-  cy.get(commonSelectors.homePageLogo, { timeout: 10000 })
-  cy.wait("@library_apps")
-})
+  cy.intercept("GET", "http://localhost:3000/api/library_apps").as(
+    "library_apps"
+  );
+  cy.visit("/my-workspace");
+  cy.get(commonSelectors.homePageLogo, { timeout: 10000 });
+  cy.wait("@library_apps");
+});
 
-Cypress.Commands.add('visitSlug', ({ actualUrl, currentUrl = 'http://localhost:8082/error/unknown' }) => {
-  cy.visit(actualUrl);
-  cy.wait(3000);
+Cypress.Commands.add(
+  "visitSlug",
+  ({ actualUrl, currentUrl = "http://localhost:8082/error/unknown" }) => {
+    cy.visit(actualUrl);
+    cy.wait(3000);
 
-  cy.url().then((url) => {
-    if (url === currentUrl) {
-      cy.visit(actualUrl);
-    }
+    cy.url().then((url) => {
+      if (url === currentUrl) {
+        cy.visit(actualUrl);
+      }
+    });
+  }
+);
+
+Cypress.Commands.add("releaseApp", () => {
+  if (Cypress.env("environment") !== "Community") {
+    cy.get(commonEeSelectors.promoteButton).click();
+    cy.get(commonEeSelectors.promoteButton).eq(1).click();
+    cy.waitForAppLoad();
+    cy.wait(3000);
+    cy.get(commonEeSelectors.promoteButton).click();
+    cy.get(commonEeSelectors.promoteButton).eq(1).click();
+    cy.waitForAppLoad();
+    cy.wait(3000);
+  }
+  cy.get(commonSelectors.releaseButton).click();
+  cy.get(commonSelectors.yesButton).click();
+  cy.verifyToastMessage(commonSelectors.toastMessage, "Version v1 released");
+  cy.wait(1000);
+});
+
+Cypress.Commands.add("backToApps", () => {
+  cy.get(commonSelectors.editorPageLogo).click();
+  cy.get(commonSelectors.backToAppOption).click();
+});
+
+Cypress.Commands.add("removeAssignedApps", () => {
+  cy.task("updateId", {
+    dbconfig: Cypress.env("app_db"),
+    sql: `DELETE FROM app_group_permissions;`,
+  });
+});
+
+Cypress.Commands.add(
+  "saveFromIntercept",
+  (interceptAlias, property, envVariable) => {
+    cy.get(interceptAlias)
+      .its("response.body")
+      .then((responseBody) => {
+        Cypress.env(envVariable, responseBody[property]);
+      });
+  }
+);
+
+Cypress.Commands.add("verifyLabel", (labelName) => {
+  cy.get(commonSelectors.label(`${labelName}`)).verifyVisibleElement(
+    "have.text",
+    labelName
+  );
+});
+
+Cypress.Commands.add(
+  "visitSlug",
+  ({ actualUrl, currentUrl = "http://localhost:8082/error/unknown" }) => {
+    cy.visit(actualUrl);
+    cy.wait(3000);
+
+    cy.url().then((url) => {
+      if (url === currentUrl) {
+        cy.visit(actualUrl);
+      }
+    });
+  }
+);
+
+Cypress.Commands.add(
+  "verifyCssProperty",
+  (selector, property, expectedValue) => {
+    cy.get(selector).should("have.css", property).and("eq", expectedValue);
+  }
+);
+
+Cypress.Commands.add("skipWalkthrough", () => {
+  cy.window({ log: false }).then((win) => {
+    win.localStorage.setItem("walkthroughCompleted", "true");
   });
 });

cypress-tests/cypress/constants/selectors/common.js

@@ -61,7 +61,7 @@ export const commonSelectors = {
   addWorkspaceButton: '[data-cy="add-new-workspace-link"]',
   createWorkspaceButton: '[data-cy="create-workspace-button"]',
   workspaceLoginUrl: "[data-cy=workspace-login-url]",
-  workspaceName: '[data-cy="workspace-name"]',
+  workspaceName: '[data-cy="workspace-name"]:eq(0)',
   signInHeader: '[data-cy="sign-in-header"]',
   signInSubHeader: '[data-cy="sign-in-sub-header"]',
   createAnAccountLink: '[data-cy="create-an-account-link"]',
@@ -80,7 +80,7 @@ export const commonSelectors = {
   acceptInviteButton: '[data-cy="accept-invite-button"]',
   databaseIcon: '[data-cy="icon-database"]',
   profileSettings: '[data-cy="profile-settings"]',
-  workspaceSettingsIcon: '[data-cy="icon-workspace-settings"]',
+  workspaceSettings: '[data-cy="workspace-settings"]',
   manageUsersOption: '[data-cy="users-list-item"]',
   manageGroupsOption: '[data-cy="groups-list-item"]',
   manageSSOOption: '[data-cy="sso-list-item"]',
@@ -244,6 +244,20 @@ export const commonSelectors = {
   importAppButton: '[data-cy="import-app"]',
   chooseFromTemplateButton: '[data-cy="choose-from-template-button"]',
   CreateAppFromTemplateButton: '[data-cy="create-new-app-from-template-title"]',
+  settingsIcon: '[data-cy="settings-icon"]',
+  marketplaceOption: '[data-cy="marketplace-option"]',
+  backToAppOption: '[data-cy="back-to-app-option"]',
+  databaseOption: '[data-cy="database-option"]',
+  datasourceOption: '[data-cy="data-source-option"]',
+  workspaceConstantsOption: '[data-cy="workspace-constants-option"]',
+  label: (labelName) => {
+    return `[data-cy="${labelName
+      .replace(/\s+|(?<=[\w-])\s+(?=\w)|[^\w\s]/g, "-")
+      .toLowerCase()}-label"]`;
+  },
+  defaultModalTitle: '[data-cy="modal-title"]',
+  workspaceConstantsIcon: '[data-cy="icon-workspace-constants"]'
+
 };
 
 export const commonWidgetSelector = {

cypress-tests/cypress/constants/selectors/manageGroups.js

@@ -13,6 +13,7 @@ export const groupsSelector = {
   userGroup: "[data-cy=user-groups]",
   appsLink: "[data-cy=apps-link]",
   usersLink: "[data-cy=users-link]",
+  tableslink: "[data-cy=tables-link]",
   permissionsLink: "[data-cy=permissions-link]",
   searchBox: '[data-cy="select-search"]',
   appSearchBox: "[data-cy=select-search]>>>>>.dropdown-heading-value > .gray",
@@ -65,6 +66,19 @@ export const groupsSelector = {
     return `[data-cy="${cyParamName(groupname)}-title"]`;
   },
   userRow: (email) => {
-    return `[data-cy="${cyParamName(email)}-user-row"]`
-  }
+    return `[data-cy="${cyParamName(email)}-user-row"]`;
+  },
+  groupOptionIcon: (groupName) => {
+    return `[data-cy="${cyParamName(groupName)}-list-item"] > :nth-child(2) > .tj-base-btn`
+  },
+  duplicateOption: '[data-cy="duplicate-group-card-option"]',
+  deleteGroupOption: '[data-cy="delete-group-card-option"]',
+  usersCheckInput: '[data-cy="users-check-input"]',
+  permissionCheckInput: '[data-cy="permissions-check-input"]',
+  appsCheckInput: '[data-cy="apps-check-input"]',
+  confimButton: '[data-cy="confim-button"]',
+  duplicatedGroupLink: (groupName) => {
+    return `[data-cy="${cyParamName(groupName)}_copy-list-item"]`
+  },
+
 };

cypress-tests/cypress/constants/selectors/manageUsers.js

@@ -74,5 +74,9 @@ export const usersSelector = {
   userStatus: (userName) => {
     return `[data-cy="${cyParamName(userName)}-user-status"]`;
   },
+  userActionButton: '[data-cy="user-actions-button"]',
+  editUserDetailsButton: '[data-cy="edit-user-details-button"]',
+  fullNameLabel: '[data-cy="label-full-name-input-field"]',
+  groupChip: '[data-cy="group-chip"]',
 
 };

cypress-tests/cypress/constants/selectors/profile.js

@@ -6,7 +6,6 @@ export const profileSelector = {
     pageTitle: '[data-cy="dashboard-section-header"]',
     profileCard: "[data-cy=card-title-profile]",
     firstNameLabel: "[data-cy=first-name-label]",
-    lastNameLabel: "[data-cy=last-name-label]",
     emailLabel: "[data-cy=email-label]",
     avatarLabel: '[data-cy="avatar-label"]',
     passwordCard: "[data-cy=card-title-change-password]",
@@ -14,8 +13,7 @@ export const profileSelector = {
     newPasswordLabel: "[data-cy=new-password-label]",
     confirmPasswordLabel: '[data-cy="confirm-password-label"]',
   },
-  firstNameInput: "[data-cy=first-name-input]",
-  lastNameInput: "[data-cy=last-name-input]",
+  userNameInput: '[data-cy="name-input-field"]',
   emailInput: "[data-cy=email-input]",
   avatarUploadField: '[data-cy="avatar-upload-field"]',
   updateButton: "[data-cy=update-button]",

cypress-tests/cypress/constants/texts/button.js

@@ -4,7 +4,7 @@ export const buttonText = {
   buttonTextLabel: "Button text",
   loadingState: "Loading state",
   buttonDocumentationLink: "Read documentation for Button",
-  backgroundColor: "Background Color",
+  backgroundColor: "Background color",
   textColor: "Text color",
   loaderColor: "Loader color",
   defaultBackgroundColor: "#375FCF",

cypress-tests/cypress/constants/texts/common.js

@@ -188,7 +188,7 @@ export const commonWidgetText = {
   accordionEvents: "Events",
   accordionGenaral: "General",
   accordionValidation: "Validation",
-  accordionLayout: "Layout",
+  accordionLayout: "Devices",
   accordionDevices: "Devices",
 
   parameterCustomValidation: "Custom validation",
@@ -204,6 +204,7 @@ export const commonWidgetText = {
   parameterOptionvalues: "Option values",
   boxShadowColor: "Box shadow Color",
   boxShadowFxValue: "-5px 6px 5px 8px #ee121240",
+  loadingState: "Loading state",
 
   codeMirrorLabelTrue: "{{true}}",
   codeMirrorLabelFalse: "{{false}}",

cypress-tests/cypress/constants/texts/manageGroups.js

@@ -2,7 +2,7 @@ export const groupsText = {
   pageTitle: "User Groups",
   createNewGroupButton: "Create new group",
   tableHeader: "Name",
-  allUsers: "All Users",
+  allUsers: "All users",
   admin: "Admin",
   cardTitle: "Add new group",
   cancelButton: "Cancel",
@@ -12,7 +12,7 @@ export const groupsText = {
   groupCreatedToast: "Group has been created",
   userGroup: "User group",
   appsLink: "Apps",
-  usersLink: "User",
+  usersLink: "Users",
   permissionsLink: "Permissions",
   addButton: "Add apps",
   addUsersButton: "Add users",
@@ -30,7 +30,7 @@ export const groupsText = {
     "This group will be permanently deleted. Do you want to continue?",
   confirmCancelButton: "Cancel",
   confirmYesButton: "Yes",
-  resourcesWorkspaceVar: "Workspace Variables",
+  resourcesWorkspaceVar: "Workspace constants/variables",
   textDefaultGroup: "Default group",
   textAppName: "App name",
   helperTextNoAppsAdded: "No apps are added to the group",
@@ -44,6 +44,6 @@ export const groupsText = {
   updateGroupNameModalTitle: "Update group",
   saveButton: "Save",
   groupNameUpdateSucessToast: "Group name updated successfully",
-  editGroupNameButton: "Edit name",
-  deleteGroupButton: " Delete group",
+  editGroupNameButton: "Rename",
+  deleteGroupButton: "Delete group",
 };

cypress-tests/cypress/constants/texts/manageUsers.js

@@ -6,7 +6,7 @@ export const usersText = {
     usersFilterLabel: "Showing",
   },
   usersPageTitle: "users",
-  breadcrumbUsersPageTitle: " Users & permissions",
+  breadcrumbUsersPageTitle: " Users",
   adminUserName: "The Developer",
   adminUserEmail: "dev@tooljet.io",
   adminUserState: "Archive",

cypress-tests/cypress/constants/texts/postgreSql.js

@@ -2,8 +2,16 @@ export const postgreSqlText = {
   labelDataSources: "Datasources",
   labelAddDataSource: "+ add data source",
 
-  allDataSources: "All data sources (43)",
-  allDatabase: "Databases (19)",
+  allDataSources: () => {
+    return process.env.NODE_ENV === "development"
+      ? "All data sources (41)"
+      : "All data sources (43)";
+  },
+  allDatabase: () => {
+    return process.env.NODE_ENV === "development"
+      ? "Databases (17)"
+      : "Databases (19)";
+  },
   allApis: "APIs (20)",
   allCloudStorage: "Cloud Storages (4)",
 

cypress-tests/cypress/constants/texts/profile.js

@@ -3,17 +3,15 @@ export const profileText = {
   profileElements: {
     pageTitle: "Profile settings",
     profileCard: "Profile",
-    firstNameLabel: "First name",
-    lastNameLabel: "Last name",
-    emailLabel: "Email",
+    firstNameLabel: "Name",
+    emailLabel: "Email address",
     avatarLabel: "Avatar",
     passwordCard: "Change password",
     currentPasswordLabel: "Current password",
     newPasswordLabel: "New password",
     confirmPasswordLabel: "Confirm new password",
   },
-  firstName: "The",
-  lastName: "Developer",
+  userName: "The Developer",
   updateButton: "Update",
   email: "dev@tooljet.io",
   firstNameErrorToast: "First name can't be empty!",

cypress-tests/cypress/e2e/authentication/forgotPassword.cy.js

@@ -1,23 +1,21 @@
 import { commonSelectors } from "../../constants/selectors/common";
 import { commonText } from "../../constants/texts/common";
 import { fake } from "Fixtures/fake";
-import { addNewUserMW } from "Support/utils/userPermissions";
+import { addNewUser } from "Support/utils/onboarding";
 import { logout } from "Support/utils/common";
 
 describe("Password reset functionality", () => {
   const data = {};
-  data.firstName = fake.firstName;
-  data.lastName = fake.lastName.replaceAll("[^A-Za-z]", "");
-  data.email = fake.email.toLowerCase();
   let passwordResetLink = "";
 
-  before(() => {
-    cy.defaultWorkspaceLogin();
-    addNewUserMW(data.firstName, data.email);
-    logout();
-  });
-
   it("Verify wrong password limit", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase();
+
+    cy.defaultWorkspaceLogin();
+    addNewUser(data.firstName, data.email);
+    logout();
+
     for (let i = 0; i < 5; i++) {
       cy.clearAndType(commonSelectors.workEmailInputField, data.email);
       cy.clearAndType(commonSelectors.passwordInputField, "passw");

cypress-tests/cypress/e2e/authentication/signUp.cy.js

@@ -7,24 +7,24 @@ import {
   verifyConfirmPageElements,
   verifyOnboardingQuestions,
   verifyInvalidInvitationLink,
+  updateWorkspaceName
 } from "Support/utils/onboarding";
 import { dashboardText } from "Texts/dashboard";
-import { updateWorkspaceName } from "Support/utils/userPermissions";
+import {
+  verifyandModifyUserRole,
+  verifyandModifySizeOftheCompany,
+} from "Support/utils/selfHostSignUp";
 
 describe("User signup", () => {
   const data = {};
-  data.fullName = fake.fullName;
-  data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
-  data.workspaceName = fake.companyName;
-
   let invitationLink = "";
 
-  before(() => {
+  it("Verify the signup flow and UI elements", () => {
+    data.fullName = fake.fullName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.workspaceName = fake.companyName;
+
     cy.visit("/");
-  });
-  it("Verify sign up page elements", () => {
-    cy.wait(500);
-    cy.reload();
     cy.get(commonSelectors.createAnAccountLink).realClick();
     SignUpPageElements();
 
@@ -32,29 +32,21 @@ describe("User signup", () => {
     cy.clearAndType(commonSelectors.emailInputField, data.email);
     cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
     cy.get(commonSelectors.signUpButton).click();
-
     cy.wait(500);
+    verifyConfirmEmailPage(data.email);
+
     cy.task("updateId", {
       dbconfig: Cypress.env("app_db"),
       sql: `select invitation_token from users where email='${data.email}';`,
     }).then((resp) => {
       invitationLink = `/invitations/${resp.rows[0].invitation_token}`;
+      cy.visit(invitationLink);
     });
-    verifyConfirmEmailPage(data.email);
-  });
-  it("Verify the singup invitation and onboarding flow", () => {
-    cy.visit(invitationLink);
+
     verifyConfirmPageElements();
     cy.get(commonSelectors.setUpToolJetButton).click();
     cy.wait(4000);
-    cy.get("body").then(($el) => {
-      if (!$el.text().includes(dashboardText.emptyPageHeader)) {
-        verifyOnboardingQuestions(data.fullName, data.workspaceName);
-        updateWorkspaceName(data.email);
-      } else {
-        updateWorkspaceName(data.email);
-      }
-    });
+    verifyOnboardingQuestions(data.fullName, data.workspaceName);
   });
   it("Verify invalid invitation link", () => {
     cy.visit(invitationLink);
@@ -62,4 +54,50 @@ describe("User signup", () => {
     cy.get(commonSelectors.backtoSignUpButton).click();
     cy.get(commonSelectors.SignUpSectionHeader).should("be.visible");
   });
+  it("Verify onboarding flow", () => {
+    data.fullName = fake.fullName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.workspaceName = fake.companyName;
+
+    cy.visit("/");
+    cy.get(commonSelectors.createAnAccountLink).realClick();
+
+    cy.clearAndType(commonSelectors.nameInputField, data.fullName);
+    cy.clearAndType(commonSelectors.emailInputField, data.email);
+    cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
+    cy.get(commonSelectors.signUpButton).click();
+    cy.wait(8000);
+    cy.get(commonSelectors.resendEmailButton).click();
+    cy.get(commonSelectors.editEmailButton).click();
+    cy.get(commonSelectors.nameInputField).verifyVisibleElement("have.value", data.fullName)
+    cy.get(commonSelectors.emailInputField).verifyVisibleElement("have.value", data.email);
+    cy.get(commonSelectors.passwordInputField).verifyVisibleElement("have.value", "");
+
+    cy.task("updateId", {
+      dbconfig: Cypress.env("app_db"),
+      sql: `select invitation_token from users where email='${data.email}';`,
+    }).then((resp) => {
+      invitationLink = `/invitations/${resp.rows[0].invitation_token}`;
+      cy.visit(invitationLink);
+    });
+    cy.get(commonSelectors.setUpToolJetButton).click();
+    cy.clearAndType(commonSelectors.companyNameInputField, data.workspaceName);
+    cy.get(commonSelectors.continueButton).focus().type('{enter}');
+
+    cy.get(commonSelectors.backArrow).click()
+    cy.get(commonSelectors.companyNameInputField).verifyVisibleElement("have.value", data.workspaceName);
+    cy.get(commonSelectors.continueButton).focus().type('{enter}');
+    cy.get('[data-cy="head-of-engineering-radio-button"]').check()
+    cy.get(commonSelectors.continueButton).focus().type('{enter}');
+
+    cy.get(commonSelectors.backArrow).click()
+    cy.get('[data-cy="head-of-engineering-radio-button"]').should("be.checked")
+    cy.get(commonSelectors.continueButton).focus().type('{enter}');
+
+    cy.get('[data-cy="1-10-radio-button"]').check()
+    cy.get(commonSelectors.continueButton).focus().type('{enter}');
+    cy.get(commonSelectors.backArrow).click()
+    cy.get('[data-cy="1-10-radio-button"]').should("be.checked")
+    cy.get(commonSelectors.continueButton).focus().type('{enter}');
+  })
 });

cypress-tests/cypress/e2e/ce/appSlug.cy.js

@@ -1,135 +1,202 @@
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import { fake } from "Fixtures/fake";
-import { logout, navigateToAppEditor, verifyTooltip, releaseApp } from "Support/utils/common";
+import { logout, releaseApp } from "Support/utils/common";
 import { commonText } from "Texts/common";
-import { addNewUserMW } from "Support/utils/userPermissions";
-import { userSignUp } from "Support/utils/onboarding";
 
 describe("App slug", () => {
     const data = {};
     data.appName = `${fake.companyName} App`;
     data.slug = `${fake.companyName.toLowerCase()}-app`;
 
-
     beforeEach(() => {
         cy.defaultWorkspaceLogin();
-    })
+    });
     before(() => {
         cy.apiLogin();
         cy.apiCreateApp(data.appName);
-        cy.wait(1000)
-        cy.logoutApi()
-    })
+        cy.wait(1000);
+        cy.logoutApi();
+    });
 
     it("Verify app slug cases in global settings", () => {
-        cy.wait(2000)
-        cy.openApp('my-workspace');
+        cy.wait(2000);
+        cy.openApp("my-workspace");
 
         cy.get(commonSelectors.leftSideBarSettingsButton).click();
-        cy.get(commonWidgetSelector.appSlugLabel).verifyVisibleElement("have.text", "Unique app slug");
-        cy.get(commonWidgetSelector.appSlugInput).verifyVisibleElement("have.value", Cypress.env("appId"));
-        cy.get(commonWidgetSelector.appSlugInfoLabel).verifyVisibleElement("have.text", "URL-friendly 'slug' consists of lowercase letters, numbers, and hyphens");
-        cy.get(commonWidgetSelector.appLinkLabel).verifyVisibleElement("have.text", "App link");
-        cy.get(commonWidgetSelector.appLinkField).verifyVisibleElement("have.text", `http://localhost:8082/my-workspace/apps/${Cypress.env("appId")}`)
+        cy.get(commonWidgetSelector.appSlugLabel).verifyVisibleElement(
+            "have.text",
+            "Unique app slug"
+        );
+        cy.get(commonWidgetSelector.appSlugInput).verifyVisibleElement(
+            "have.value",
+            Cypress.env("appId")
+        );
+        cy.get(commonWidgetSelector.appSlugInfoLabel).verifyVisibleElement(
+            "have.text",
+            "URL-friendly 'slug' consists of lowercase letters, numbers, and hyphens"
+        );
+        cy.get(commonWidgetSelector.appLinkLabel).verifyVisibleElement(
+            "have.text",
+            "App link"
+        );
+        cy.get(commonWidgetSelector.appLinkField).verifyVisibleElement(
+            "have.text",
+            `http://localhost:8082/my-workspace/apps/${Cypress.env("appId")}`
+        );
 
-        cy.wait(500)
+        cy.wait(500);
         cy.get(commonWidgetSelector.appSlugInput).clear();
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "App slug can't be empty")
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "App slug can't be empty"
+        );
 
         cy.clearAndType(commonWidgetSelector.appSlugInput, "_2#");
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "Special characters are not accepted.");
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "Special characters are not accepted."
+        );
 
         cy.clearAndType(commonWidgetSelector.appSlugInput, "t ");
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "Cannot contain spaces")
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "Cannot contain spaces"
+        );
 
         cy.clearAndType(commonWidgetSelector.appSlugInput, "T");
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "Only lowercase letters are accepted.")
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "Only lowercase letters are accepted."
+        );
 
-        cy.get(commonWidgetSelector.appSlugInput).clear()
+        cy.get(commonWidgetSelector.appSlugInput).clear();
         cy.clearAndType(commonWidgetSelector.appSlugInput, data.slug);
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "Slug accepted!")
-        cy.get(commonWidgetSelector.appLinkSucessLabel).verifyVisibleElement("have.text", "Link updated successfully!");
-        cy.get(commonWidgetSelector.appLinkField).verifyVisibleElement("have.text", `http://localhost:8082/my-workspace/apps/${data.slug}`)
-        cy.url().should('eq', `http://localhost:8082/my-workspace/apps/${data.slug}/home`);
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "Slug accepted!"
+        );
+        cy.get(commonWidgetSelector.appLinkSucessLabel).verifyVisibleElement(
+            "have.text",
+            "Link updated successfully!"
+        );
+        cy.get(commonWidgetSelector.appLinkField).verifyVisibleElement(
+            "have.text",
+            `http://localhost:8082/my-workspace/apps/${data.slug}`
+        );
+        cy.url().should(
+            "eq",
+            `http://localhost:8082/my-workspace/apps/${data.slug}/home`
+        );
 
         releaseApp();
 
         cy.openInCurrentTab(commonWidgetSelector.previewButton);
         cy.wait(2000);
-        cy.url().should('eq', `http://localhost:8082/applications/${data.slug}/home?version=v1`);
-        cy.visit('/my-workspace');
+        cy.url().should(
+            "eq",
+            `http://localhost:8082/applications/${data.slug}/home?version=v1`
+        );
+        cy.visit("/my-workspace");
         cy.wait(500);
 
-        cy.visitSlug({ actualUrl: `http://localhost:8082/applications/${data.slug}` });
-        cy.url().should('eq', `http://localhost:8082/applications/${data.slug}`);
-        cy.visit('/my-workspace');
+        cy.visitSlug({
+            actualUrl: `http://localhost:8082/applications/${data.slug}`,
+        });
+        cy.url().should("eq", `http://localhost:8082/applications/${data.slug}`);
+        cy.visit("/my-workspace");
         cy.wait(500);
 
         cy.apiCreateApp(data.slug);
-        cy.openApp('my-workspace');
+        cy.openApp("my-workspace");
 
         cy.get(commonSelectors.leftSideBarSettingsButton).click();
-        cy.get(commonWidgetSelector.appSlugInput).clear()
+        cy.get(commonWidgetSelector.appSlugInput).clear();
         cy.clearAndType(commonWidgetSelector.appSlugInput, data.slug);
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "This app slug is already taken.")
-    })
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "This app slug is already taken."
+        );
+    });
 
     it("Verify app slug cases in share modal", () => {
         data.slug = `${fake.companyName.toLowerCase()}-app`;
         data.appName = `${fake.companyName} App`;
 
         cy.apiCreateApp(data.appName);
-        cy.openApp('my-workspace');
+        cy.openApp("my-workspace");
 
         cy.get(commonSelectors.leftSideBarSettingsButton).click();
-        cy.get(commonWidgetSelector.appSlugInput).clear()
+        cy.get(commonWidgetSelector.appSlugInput).clear();
         cy.clearAndType(commonWidgetSelector.appSlugInput, data.slug);
 
         releaseApp();
 
-        cy.get(commonWidgetSelector.shareAppButton).click()
-        cy.get(commonWidgetSelector.appNameSlugInput).should("have.value", data.slug);
+        cy.get(commonWidgetSelector.shareAppButton).click();
+        cy.get(commonWidgetSelector.appNameSlugInput).should(
+            "have.value",
+            data.slug
+        );
 
         cy.get(commonWidgetSelector.appNameSlugInput).clear();
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "App slug can't be empty")
-
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "App slug can't be empty"
+        );
 
         cy.clearAndType(commonWidgetSelector.appNameSlugInput, "_2#");
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "Special characters are not accepted.");
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "Special characters are not accepted."
+        );
 
         cy.clearAndType(commonWidgetSelector.appNameSlugInput, "t ");
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "Cannot contain spaces")
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "Cannot contain spaces"
+        );
 
         cy.clearAndType(commonWidgetSelector.appNameSlugInput, "T");
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "Only lowercase letters are accepted.")
-
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "Only lowercase letters are accepted."
+        );
 
         data.slug = `${fake.companyName.toLowerCase()}-app`;
-        cy.get(commonWidgetSelector.appNameSlugInput).clear()
+        cy.get(commonWidgetSelector.appNameSlugInput).clear();
         cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "Slug accepted!");
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "Slug accepted!"
+        );
         cy.get(1000);
         cy.get(commonWidgetSelector.modalCloseButton).click();
-        cy.url().should('eq', `http://localhost:8082/my-workspace/apps/${data.slug}/home`);
+        cy.url().should(
+            "eq",
+            `http://localhost:8082/my-workspace/apps/${data.slug}/home`
+        );
 
         cy.openInCurrentTab(commonWidgetSelector.previewButton);
         cy.wait(1000);
-        cy.url().should('eq', `http://localhost:8082/applications/${data.slug}/home?version=v1`);
-        cy.visit('/my-workspace');
+        cy.url().should(
+            "eq",
+            `http://localhost:8082/applications/${data.slug}/home?version=v1`
+        );
+        cy.visit("/my-workspace");
         cy.wait(500);
 
         cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
-        cy.url().should('eq', `http://localhost:8082/applications/${data.slug}`);
-        cy.visit('/my-workspace');
+        cy.url().should("eq", `http://localhost:8082/applications/${data.slug}`);
+        cy.visit("/my-workspace");
         cy.wait(500);
 
         cy.apiCreateApp(data.slug);
-        cy.openApp('my-workspace');
+        cy.openApp("my-workspace");
         releaseApp();
-        cy.get(commonWidgetSelector.shareAppButton).click()
+        cy.get(commonWidgetSelector.shareAppButton).click();
         cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
-        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement("have.text", "This app slug is already taken.")
-
-    })
-
-});
+        cy.get(commonWidgetSelector.appSlugErrorLabel).verifyVisibleElement(
+            "have.text",
+            "This app slug is already taken."
+        );
+    });
+});

cypress-tests/cypress/e2e/ce/globalDataSources/globalDataSourcePermissions.cy.js

@@ -1,27 +1,26 @@
 import { fake } from "Fixtures/fake";
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import {
-    fillDataSourceTextField,
-    selectAndAddDataSource,
-    fillConnectionForm,
+  fillDataSourceTextField,
+  selectAndAddDataSource,
+  fillConnectionForm,
 } from "Support/utils/postgreSql";
 import { commonText } from "Texts/common";
 import {
-    closeDSModal,
-    deleteDatasource,
-    addQuery,
-    verifyValueOnInspector,
+  closeDSModal,
+  deleteDatasource,
+  addQuery,
+  verifyValueOnInspector,
 } from "Support/utils/dataSource";
 import { dataSourceSelector } from "Selectors/dataSource";
 import { dataSourceText } from "Texts/dataSource";
-import { addNewUserMW } from "Support/utils/userPermissions";
 import { groupsSelector } from "Selectors/manageGroups";
 import {
-    logout,
-    navigateToAppEditor,
-    navigateToManageGroups,
-    pinInspector,
-    verifyModal,
+  logout,
+  navigateToAppEditor,
+  navigateToManageGroups,
+  pinInspector,
+  verifyModal,
 } from "Support/utils/common";
 
 const data = {};
@@ -29,274 +28,275 @@ data.firstName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
 data.email = fake.email.toLowerCase();
 data.dsName1 = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
 data.dsName2 = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
-data.appName = `${fake.companyName}-App`;
 
 describe("Global Datasource Manager", () => {
-    beforeEach(() => {
-        cy.defaultWorkspaceLogin();
-        cy.viewport(1200, 1300);
-    });
-    before(() => {
-        cy.defaultWorkspaceLogin();
-        cy.apiCreateApp(data.appName);
-        addNewUserMW(data.firstName, data.email);
-        logout();
+  beforeEach(() => {
+    cy.defaultWorkspaceLogin();
+    cy.viewport(1200, 1300);
+    cy.skipWalkthrough();
+  });
+
+  it("Should verify the global data source manager UI", () => {
+    cy.get(commonSelectors.globalDataSourceIcon).click();
+    cy.get(commonSelectors.pageSectionHeader).verifyVisibleElement(
+      "have.text",
+      "Data sources"
+    );
+    cy.get(dataSourceSelector.allDatasourceLabelAndCount).verifyVisibleElement(
+      "have.text",
+      dataSourceText.allDataSources
+    );
+    cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
+      expect($el.contents().first().text().trim()).to.eq("Data sources");
     });
 
-    it("Should verify the global data source manager UI", () => {
-        cy.get(commonSelectors.globalDataSourceIcon).click();
-        cy.get(commonSelectors.pageSectionHeader).verifyVisibleElement(
-            "have.text",
-            "Data sources"
-        );
-        cy.get(dataSourceSelector.allDatasourceLabelAndCount).verifyVisibleElement(
-            "have.text",
-            dataSourceText.allDataSources
-        );
-        cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
-            expect($el.contents().first().text().trim()).to.eq("Data sources");
-        });
+    cy.get(dataSourceSelector.databaseLabelAndCount).verifyVisibleElement(
+      "have.text",
+      dataSourceText.allDatabase
+    );
+    cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+      "have.text",
+      " Databases"
+    );
+    cy.get(dataSourceSelector.querySearchBar)
+      .invoke("attr", "placeholder")
+      .should("eq", "Search  data sources");
 
-        cy.get(dataSourceSelector.databaseLabelAndCount).verifyVisibleElement(
-            "have.text",
-            dataSourceText.allDatabase
-        );
-        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
-            "have.text",
-            " Databases"
-        );
-        cy.get(dataSourceSelector.querySearchBar)
-            .invoke("attr", "placeholder")
-            .should("eq", "Search  data sources");
+    cy.get(dataSourceSelector.apiLabelAndCount)
+      .verifyVisibleElement("have.text", dataSourceText.allApis)
+      .click();
+    cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+      "have.text",
+      " APIs"
+    );
 
-        cy.get(dataSourceSelector.apiLabelAndCount)
-            .verifyVisibleElement("have.text", dataSourceText.allApis)
-            .click();
-        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
-            "have.text",
-            " APIs"
-        );
+    cy.get(dataSourceSelector.cloudStorageLabelAndCount)
+      .verifyVisibleElement("have.text", dataSourceText.allCloudStorage)
+      .click();
+    cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+      "have.text",
+      " Cloud Storages"
+    );
 
-        cy.get(dataSourceSelector.cloudStorageLabelAndCount)
-            .verifyVisibleElement("have.text", dataSourceText.allCloudStorage)
-            .click();
-        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
-            "have.text",
-            " Cloud Storages"
-        );
+    cy.get(dataSourceSelector.pluginsLabelAndCount)
+      .verifyVisibleElement("have.text", dataSourceText.pluginsLabelAndCount)
+      .click();
+    cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+      "have.text",
+      " Plugins"
+    );
 
-        cy.get(dataSourceSelector.pluginsLabelAndCount)
-            .verifyVisibleElement("have.text", dataSourceText.pluginsLabelAndCount)
-            .click();
-        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
-            "have.text",
-            " Plugins"
-        );
-
-        cy.get('[data-cy="added-ds-label"]').should(($el) => {
-            expect($el.contents().first().text().trim()).to.eq("Data sources added");
-        });
-        cy.get(dataSourceSelector.addedDsSearchIcon).should("be.visible").click();
-        cy.get(dataSourceSelector.AddedDsSearchBar)
-            .invoke("attr", "placeholder")
-            .should("eq", "Search for Data sources");
-
-        selectAndAddDataSource(
-            "databases",
-            dataSourceText.postgreSQL,
-            data.dsName1
-        );
-        cy.clearAndType(
-            dataSourceSelector.dsNameInputField,
-            `cypress-${data.dsName1}-postgresql1`
-        );
-
-        cy.get(dataSourceSelector.databaseLabelAndCount).click();
-
-        cy.get(commonSelectors.modalComponent).should("be.visible");
-        cy.get(dataSourceSelector.unSavedModalTitle).verifyVisibleElement(
-            "have.text",
-            dataSourceText.unSavedModalTitle
-        );
-        cy.get(commonWidgetSelector.modalCloseButton).should("be.visible");
-        cy.get(commonSelectors.cancelButton)
-            .should("be.visible")
-            .and("have.text", commonText.saveChangesButton);
-        cy.get(commonSelectors.yesButton).verifyVisibleElement(
-            "have.text",
-            "Discard"
-        );
-
-        cy.get(commonWidgetSelector.modalCloseButton).click();
-        cy.get(dataSourceSelector.buttonSave).should("be.enabled");
-
-        cy.get(dataSourceSelector.databaseLabelAndCount).click();
-        cy.get(commonSelectors.yesButton).click();
-        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
-            "have.text",
-            " Databases"
-        );
-        cy.get(`[data-cy="cypress-${data.dsName1}-postgresql-button"]`).click();
-        cy.clearAndType(
-            dataSourceSelector.dsNameInputField,
-            `cypress-${data.dsName1}-postgresql1`
-        );
-        cy.get(commonSelectors.dashboardIcon).click();
-        cy.get(commonSelectors.yesButton).click();
-
-        cy.get(commonSelectors.appCreateButton).should("be.visible");
-        cy.get(commonSelectors.globalDataSourceIcon).click();
-        cy.get(`[data-cy="cypress-${data.dsName1}-postgresql-button"]`).click();
-        cy.clearAndType(
-            dataSourceSelector.dsNameInputField,
-            `cypress-${data.dsName1}-postgresql1`
-        );
-        cy.get(commonSelectors.dashboardIcon).click();
-        cy.get(commonSelectors.cancelButton).click();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            dataSourceText.toastDSSaved
-        );
-
-        cy.get(
-            `[data-cy="cypress-${data.dsName1}-postgresql1-button"]`
-        ).verifyVisibleElement("have.text", `cypress-${data.dsName1}-postgresql1`);
-
-        deleteDatasource(`cypress-${data.dsName1}-postgresql1`);
+    cy.get('[data-cy="added-ds-label"]').should(($el) => {
+      expect($el.contents().first().text().trim()).to.eq("Data sources added");
     });
+    cy.get(dataSourceSelector.addedDsSearchIcon).should("be.visible").click();
+    cy.get(dataSourceSelector.AddedDsSearchBar)
+      .invoke("attr", "placeholder")
+      .should("eq", "Search for Data sources");
 
-    it("Should verify the Datasource connection and query creation using global data source", () => {
-        selectAndAddDataSource(
-            "databases",
-            dataSourceText.postgreSQL,
-            data.dsName1
-        );
+    selectAndAddDataSource(
+      "databases",
+      dataSourceText.postgreSQL,
+      data.dsName1
+    );
+    cy.clearAndType(
+      dataSourceSelector.dsNameInputField,
+      `cypress-${data.dsName1}-postgresql1`
+    );
 
-        cy.intercept("GET", "api/v2/data_sources").as("datasource");
-        fillConnectionForm(
-            {
-                Host: Cypress.env("pg_host"),
-                Port: "5432",
-                "Database Name": Cypress.env("pg_user"),
-                Username: Cypress.env("pg_user"),
-                Password: Cypress.env("pg_password"),
-            },
-            ".form-switch"
-        );
-        cy.wait("@datasource");
+    cy.get(dataSourceSelector.databaseLabelAndCount).click();
 
-        cy.openApp();
-        pinInspector();
+    cy.get(commonSelectors.modalComponent).should("be.visible");
+    cy.get(dataSourceSelector.unSavedModalTitle).verifyVisibleElement(
+      "have.text",
+      dataSourceText.unSavedModalTitle
+    );
+    cy.get(commonWidgetSelector.modalCloseButton).should("be.visible");
+    cy.get(commonSelectors.cancelButton)
+      .should("be.visible")
+      .and("have.text", commonText.saveChangesButton);
+    cy.get(commonSelectors.yesButton).verifyVisibleElement(
+      "have.text",
+      "Discard"
+    );
 
-        addQuery(
-            "table_preview",
-            `SELECT * FROM persons;`,
-            `cypress-${data.dsName1}-postgresql`
-        );
+    cy.get(commonWidgetSelector.modalCloseButton).click();
+    cy.get(dataSourceSelector.buttonSave).should("be.enabled");
 
-        cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
-            "have.text",
-            "table_preview "
-        );
+    cy.get(dataSourceSelector.databaseLabelAndCount).click();
+    cy.get(commonSelectors.yesButton).click();
+    cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+      "have.text",
+      " Databases"
+    );
+    cy.get(`[data-cy="cypress-${data.dsName1}-postgresql-button"]`).click();
+    cy.clearAndType(
+      dataSourceSelector.dsNameInputField,
+      `cypress-${data.dsName1}-postgresql1`
+    );
+    cy.get(commonSelectors.dashboardIcon).click();
+    cy.get(commonSelectors.yesButton).click();
 
-        cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        verifyValueOnInspector("table_preview", "7 items ");
-        cy.get('[data-cy="show-ds-popover-button"]').click();
+    cy.get(commonSelectors.appCreateButton).should("be.visible");
+    cy.get(commonSelectors.globalDataSourceIcon).click();
+    cy.get(`[data-cy="cypress-${data.dsName1}-postgresql-button"]`).click();
+    cy.clearAndType(
+      dataSourceSelector.dsNameInputField,
+      `cypress-${data.dsName1}-postgresql1`
+    );
+    cy.get(commonSelectors.dashboardIcon).click();
+    cy.get(commonSelectors.cancelButton).click();
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      dataSourceText.toastDSSaved
+    );
 
-        cy.get(".p-2 > .tj-base-btn")
-            .should("be.visible")
-            .and("have.text", "+ Add new Data source");
-        cy.get(".p-2 > .tj-base-btn").click();
-        cy.get('[data-cy="databases-datasource-button"]').should("be.visible");
+    cy.get(
+      `[data-cy="cypress-${data.dsName1}-postgresql1-button"]`
+    ).verifyVisibleElement("have.text", `cypress-${data.dsName1}-postgresql1`);
 
-        cy.apiCreateGDS(
-            "http://localhost:3000/api/v2/data_sources",
-            `cypress-${data.dsName2}-postgresql`,
-            "postgresql",
-            [
-                { key: "host", value: Cypress.env("pg_host") },
-                { key: "port", value: 5432 },
-                { key: "database", value: Cypress.env("pg_user") },
-                { key: "username", value: Cypress.env("pg_user") },
-                { key: "password", value: Cypress.env("pg_password"), encrypted: true },
-                { key: "ssl_enabled", value: false, encrypted: false },
-                { key: "ssl_certificate", value: "none", encrypted: false },
-            ]
-        );
+    deleteDatasource(`cypress-${data.dsName1}-postgresql1`);
+  });
 
-        navigateToManageGroups();
-        cy.get(groupsSelector.appSearchBox).click();
-        cy.get(groupsSelector.searchBoxOptions).contains(data.appName).click();
-        cy.get(groupsSelector.selectAddButton).click();
-        cy.contains("tr", data.appName)
-            .parent()
-            .within(() => {
-                cy.get("td input").eq(1).check();
-            });
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            "App permissions updated"
-        );
-        cy.get(groupsSelector.permissionsLink).click();
-        cy.get(groupsSelector.appsCreateCheck).then(($el) => {
-            if (!$el.is(":checked")) {
-                cy.get(groupsSelector.appsCreateCheck).check();
-            }
-        });
+  it("Should verify the Datasource connection and query creation using global data source", () => {
+    data.appName = `${fake.companyName}-App`;
+    cy.removeAssignedApps();
+
+    selectAndAddDataSource(
+      "databases",
+      dataSourceText.postgreSQL,
+      data.dsName1
+    );
+
+    cy.intercept("GET", "api/v2/data_sources").as("datasource");
+    fillConnectionForm(
+      {
+        Host: Cypress.env("pg_host"),
+        Port: "5432",
+        "Database Name": Cypress.env("pg_user"),
+        Username: Cypress.env("pg_user"),
+        Password: Cypress.env("pg_password"),
+      },
+      ".form-switch"
+    );
+    cy.wait("@datasource");
+
+    cy.apiCreateApp(data.appName);
+    cy.openApp();
+    pinInspector();
+
+    addQuery(
+      "table_preview",
+      `SELECT * FROM persons;`,
+      `cypress-${data.dsName1}-postgresql`
+    );
+
+    cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
+      "have.text",
+      "table_preview "
+    );
+
+    cy.get(dataSourceSelector.queryCreateAndRunButton).click();
+    verifyValueOnInspector("table_preview", "7 items ");
+    cy.get('[data-cy="show-ds-popover-button"]').click();
+
+    cy.get(".p-2 > .tj-base-btn")
+      .should("be.visible")
+      .and("have.text", "+ Add new Data source");
+    cy.get(".p-2 > .tj-base-btn").click();
+    cy.get('[data-cy="databases-datasource-button"]').should("be.visible");
+
+    cy.apiCreateGDS(
+      "http://localhost:3000/api/v2/data_sources",
+      `cypress-${data.dsName2}-postgresql`,
+      "postgresql",
+      [
+        { key: "host", value: Cypress.env("pg_host") },
+        { key: "port", value: 5432 },
+        { key: "database", value: Cypress.env("pg_user") },
+        { key: "username", value: Cypress.env("pg_user") },
+        { key: "password", value: Cypress.env("pg_password"), encrypted: true },
+        { key: "ssl_enabled", value: false, encrypted: false },
+        { key: "ssl_certificate", value: "none", encrypted: false },
+      ]
+    );
+
+    navigateToManageGroups();
+    cy.get(groupsSelector.appsLink).click();
+    cy.get(groupsSelector.appSearchBox).click();
+    cy.get(groupsSelector.searchBoxOptions).contains(data.appName).click();
+    cy.get(groupsSelector.selectAddButton).click();
+    cy.contains("tr", data.appName)
+      .parent()
+      .within(() => {
+        cy.get("td input").eq(1).check();
+      });
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      "App permissions updated"
+    );
+    cy.get(groupsSelector.permissionsLink).click();
+    cy.get(groupsSelector.appsCreateCheck).then(($el) => {
+      if (!$el.is(":checked")) {
+        cy.get(groupsSelector.appsCreateCheck).check();
+      }
     });
-    it("Should validate the user's global data source permissions on apps created by admin", () => {
-        logout();
-        cy.apiLogin(data.email, "password");
-        cy.visit("/my-workspace");
+  });
+  it("Should validate the user's global data source permissions on apps created by admin", () => {
+    logout();
+    cy.apiLogin("test@tooljet.com", "password");
+    cy.visit("/my-workspace");
 
-        cy.get(commonSelectors.globalDataSourceIcon).should("not.exist");
+    cy.get(commonSelectors.globalDataSourceIcon).should("not.exist");
 
-        navigateToAppEditor(data.appName);
+    navigateToAppEditor(data.appName);
 
-        cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
-            "have.text",
-            "table_preview "
-        );
+    cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
+      "have.text",
+      "table_preview "
+    );
 
-        pinInspector();
+    pinInspector();
 
-        cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        verifyValueOnInspector("table_preview", "7 items ");
+    cy.get(dataSourceSelector.queryCreateAndRunButton).click();
+    verifyValueOnInspector("table_preview", "7 items ");
 
-        addQuery(
-            "student_data",
-            `SELECT * FROM student_data;`,
-            `cypress-${data.dsName2}-postgresql`
-        );
+    addQuery(
+      "student_data",
+      `SELECT * FROM student_data;`,
+      `cypress-${data.dsName2}-postgresql`
+    );
 
-        cy.get('[data-cy="list-query-student_data"]').verifyVisibleElement(
-            "have.text",
-            "student_data "
-        );
-        cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        verifyValueOnInspector("student_data", "4 items ");
-    });
-    it("Should verify the query creation and scope changing functionality.", () => {
-        data.appName = `${fake.companyName}-App`;
-        logout();
-        cy.apiLogin(data.email, "password");
-        cy.apiCreateApp(data.appName);
-        cy.openApp();
+    cy.get('[data-cy="list-query-student_data"]').verifyVisibleElement(
+      "have.text",
+      "student_data "
+    );
+    cy.get(dataSourceSelector.queryCreateAndRunButton).click();
+    verifyValueOnInspector("student_data", "4 items ");
+  });
+  it("Should verify the query creation and scope changing functionality.", () => {
+    cy.removeAssignedApps();
 
-        addQuery(
-            "table_preview",
-            `SELECT * FROM persons;`,
-            `cypress-${data.dsName1}-postgresql`
-        );
+    data.appName = `${fake.companyName}-App`;
+    logout();
+    cy.apiLogin("test@tooljet.com", "password");
+    cy.apiCreateApp(data.appName);
+    cy.openApp();
 
-        cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
-            "have.text",
-            "table_preview "
-        );
+    addQuery(
+      "table_preview",
+      `SELECT * FROM persons;`,
+      `cypress-${data.dsName1}-postgresql`
+    );
 
-        pinInspector();
+    cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
+      "have.text",
+      "table_preview "
+    );
 
-        cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        verifyValueOnInspector("table_preview", "7 items ");
-    });
+    pinInspector();
+
+    cy.get(dataSourceSelector.queryCreateAndRunButton).click();
+    verifyValueOnInspector("table_preview", "7 items ");
+  });
 });

cypress-tests/cypress/e2e/ce/groupDuplication.cy.js

@@ -0,0 +1,137 @@
+import { commonSelectors } from "Selectors/common";
+import { groupsSelector } from "Selectors/manageGroups";
+import { fake } from "Fixtures/fake";
+import {
+    navigateToManageGroups,
+    verifyTooltipDisabled,
+    viewAppCardOptions,
+} from "Support/utils/common";
+import {
+    OpenGroupCardOption,
+    verifyGroupCardOptions,
+    createGroupAddAppAndUserToGroup,
+    groupPermission,
+} from "Support/utils/manageGroups";
+import { cyParamName } from "Selectors/common";
+import { addNewUser } from "Support/utils/onboarding";
+
+const data = {};
+
+data.groupName = fake.firstName.replaceAll("[^A-Za-z]", "");
+data.appName = `${fake.companyName}-App`;
+
+describe("Groups duplication", () => {
+    beforeEach(() => {
+        cy.defaultWorkspaceLogin();
+        groupPermission(
+            [
+                "appsCreateCheck",
+                "appsDeleteCheck",
+                "workspaceVarCheckbox",
+                "foldersCreateCheck",
+            ],
+            "All users"
+        );
+    });
+    it("Should verify the group duplication feature", () => {
+        data.firstName = fake.firstName;
+        data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+
+        addNewUser(data.firstName, data.email);
+        cy.logoutApi();
+
+        cy.defaultWorkspaceLogin();
+        navigateToManageGroups();
+
+        verifyGroupCardOptions("All users");
+        cy.get('[data-cy="delete-group-card-option"] > .col').should(
+            "have.class",
+            "disable"
+        );
+
+        verifyGroupCardOptions("Admin");
+        cy.get('[data-cy="delete-group-card-option"] > .col').should(
+            "have.class",
+            "disable"
+        );
+
+        cy.apiCreateApp(data.appName);
+        createGroupAddAppAndUserToGroup(data.groupName, data.email);
+
+        groupPermission(
+            [
+                "appsCreateCheck",
+                "appsDeleteCheck",
+                "workspaceVarCheckbox",
+                "foldersCreateCheck",
+            ],
+            data.groupName,
+            true
+        );
+        cy.wait(1000);
+        verifyGroupCardOptions(data.groupName);
+        cy.get(groupsSelector.duplicateOption).click();
+
+        cy.get(commonSelectors.defaultModalTitle).verifyVisibleElement(
+            "have.text",
+            "Duplicate group"
+        );
+        cy.get(commonSelectors.modalMessage).verifyVisibleElement(
+            "have.text",
+            "Duplicate the following parts of the group"
+        );
+        cy.get(groupsSelector.usersCheckInput).should("be.visible");
+        cy.verifyLabel("Users");
+        cy.get(groupsSelector.permissionCheckInput).should("be.visible");
+        cy.verifyLabel("Permissions");
+        cy.get(groupsSelector.appsCheckInput).should("be.visible");
+        cy.verifyLabel("Apps");
+        cy.get(commonSelectors.cancelButton).verifyVisibleElement(
+            "have.text",
+            "Cancel"
+        );
+        cy.get(groupsSelector.confimButton).verifyVisibleElement(
+            "have.text",
+            "Duplicate"
+        );
+
+        cy.get(groupsSelector.confimButton).click();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            "Group duplicated successfully!"
+        );
+
+        cy.wait(500);
+        cy.get(groupsSelector.duplicatedGroupLink(data.groupName)).verifyVisibleElement(
+            "have.text",
+            `${data.groupName}_copy`
+        );
+
+        OpenGroupCardOption(data.groupName);
+        cy.get(groupsSelector.deleteGroupOption).click();
+        cy.get(commonSelectors.buttonSelector("Yes")).click();
+        cy.logoutApi();
+
+        cy.apiLogin(data.email, "password");
+        cy.visit("/my-workspace");
+        cy.get(commonSelectors.appCreateButton).should("be.visible");
+        cy.get(commonSelectors.createNewFolderButton).should("be.visible");
+        viewAppCardOptions(data.appName);
+        cy.contains("Delete app").should("exist");
+        cy.get(commonSelectors.workspaceConstantsIcon).should("be.visible");
+        cy.logoutApi();
+
+        cy.defaultWorkspaceLogin();
+        navigateToManageGroups();
+        OpenGroupCardOption(`${data.groupName}_copy`);
+        cy.get(groupsSelector.deleteGroupOption).click();
+        cy.get(commonSelectors.buttonSelector("Yes")).click();
+        cy.logoutApi();
+
+        cy.apiLogin(data.email, "password");
+        cy.visit("/my-workspace");
+        cy.get(commonSelectors.appCreateButton).should("not.exist");
+        cy.get(commonSelectors.createNewFolderButton).should("not.exist");
+        cy.get(commonSelectors.workspaceConstantsIcon).should("not.exist");
+    });
+});

cypress-tests/cypress/e2e/ce/privateAndPublicApp.cy.js

@@ -7,7 +7,6 @@ import {
   releaseApp,
 } from "Support/utils/common";
 import { commonText } from "Texts/common";
-import { addNewUserMW } from "Support/utils/userPermissions";
 import { userSignUp } from "Support/utils/onboarding";
 
 describe(
@@ -20,25 +19,20 @@ describe(
   },
   () => {
     const data = {};
-    data.appName = `${fake.companyName} App`;
-    data.firstName = fake.firstName;
-    data.lastName = fake.lastName.replaceAll("[^A-Za-z]", "");
-    data.email = fake.email.toLowerCase();
-    const slug = data.appName.toLowerCase().replace(/\s+/g, "-");
-    const firstUserEmail = data.email;
-    const envVar = Cypress.env("environment");
     beforeEach(() => {
       cy.defaultWorkspaceLogin();
+      cy.removeAssignedApps();
+      cy.skipWalkthrough();
     });
 
     it("Verify private and public app share funtionality", () => {
       data.appName = `${fake.companyName} App`;
+      data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
 
       cy.apiCreateApp(data.appName);
       cy.openApp();
       cy.dragAndDropWidget("Table", 250, 250);
 
-
       verifyTooltip(
         commonWidgetSelector.shareAppButton,
         "Share URL is unavailable until current version is released"
@@ -65,18 +59,20 @@ describe(
       // cy.get(commonWidgetSelector.iframeLink).should("be.visible");
       cy.get(commonWidgetSelector.modalCloseButton).should("be.visible");
 
-      cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${slug}`);
+      cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${data.slug}`);
       cy.wait(4000);
       cy.get(commonWidgetSelector.modalCloseButton).click();
       cy.forceClickOnCanvas();
-      cy.get(commonSelectors.editorPageLogo).click();
+      cy.backToApps();
 
       logout();
       cy.wait(4000);
       cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
         "be.visible"
       );
-      cy.visitSlug({ actualUrl: `http://localhost:8082/applications/${slug}` });
+      cy.visitSlug({
+        actualUrl: `http://localhost:8082/applications/${data.slug}`,
+      });
       cy.wait(3000);
 
       cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
@@ -99,42 +95,38 @@ describe(
       cy.get(commonWidgetSelector.shareAppButton).click();
       cy.get(commonWidgetSelector.makePublicAppToggle).check();
       cy.get(commonWidgetSelector.modalCloseButton).click();
-      cy.get(commonSelectors.editorPageLogo).click();
+      cy.backToApps();
 
       logout();
       cy.wait(4000);
       cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
         "be.visible"
       );
-      cy.visitSlug({ actualUrl: `http://localhost:8082/applications/${slug}` });
+      cy.visitSlug({
+        actualUrl: `http://localhost:8082/applications/${data.slug}`,
+      });
       cy.wait(3000);
       cy.get('[data-cy="draggable-widget-table1"]').should("be.visible");
     });
 
     it("Verify app private and public app visibility for the same workspace user", () => {
-      cy.openApp(
-        "my-workspace",
-        Cypress.env("appId"),
-        '[data-cy="draggable-widget-table1"]'
-      );
-      cy.wait(2000);
+      data.appName = `${fake.companyName} App`;
+      data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
+
+      cy.apiCreateApp(data.appName);
+      cy.openApp();
+      cy.dragAndDropWidget("Table", 250, 250);
+      releaseApp();
+
+      cy.wait(1000);
       cy.get(commonWidgetSelector.shareAppButton).click();
-      cy.get("body").then(($el) => {
-        if (!$el.text().includes("Embedded app link", { timeout: 2000 })) {
-          cy.get(commonWidgetSelector.makePublicAppToggle).check();
-        }
-      });
+      cy.get(commonWidgetSelector.makePublicAppToggle).check();
+      cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${data.slug}`);
+      cy.wait(2000);
       cy.get(commonWidgetSelector.modalCloseButton).click();
-      cy.get(commonSelectors.editorPageLogo).click();
+      cy.backToApps();
 
-      addNewUserMW(data.firstName, data.email);
-      logout();
-      cy.wait(4000);
-      cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
-        "be.visible"
-      );
-
-      cy.visitSlug({ actualUrl: `/applications/${slug}` });
+      cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
       cy.get('[data-cy="draggable-widget-table1"]').should("be.visible");
 
       cy.defaultWorkspaceLogin();
@@ -146,8 +138,9 @@ describe(
       cy.wait(2000);
       cy.get(commonWidgetSelector.shareAppButton).click();
       cy.get(commonWidgetSelector.makePublicAppToggle).uncheck();
+      cy.wait(500);
       cy.get(commonWidgetSelector.modalCloseButton).click();
-      cy.get(commonSelectors.editorPageLogo).click();
+      cy.backToApps();
 
       logout();
       cy.wait(4000);
@@ -155,9 +148,9 @@ describe(
         "be.visible"
       );
 
-      cy.visitSlug({ actualUrl: `/applications/${slug}` });
+      cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
 
-      cy.login(data.email, "password");
+      cy.login("test@tooljet.com", "password");
       cy.get(commonSelectors.allApplicationLink).verifyVisibleElement(
         "have.text",
         commonText.allApplicationLink
@@ -167,12 +160,26 @@ describe(
     it("Verify app private and public app visibility for the same instance user", () => {
       data.firstName = fake.firstName;
       data.email = fake.email.toLowerCase();
+      data.appName = `${fake.companyName} App`;
+      data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
+      data.workspaceName = data.email;
+
+      cy.apiCreateApp(data.appName);
+      cy.openApp();
+      cy.dragAndDropWidget("Table", 250, 250);
+      releaseApp();
+
+      cy.wait(1000);
+      cy.get(commonWidgetSelector.shareAppButton).click();
+      cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${data.slug}`);
+      cy.wait(2000);
+      cy.get(commonWidgetSelector.modalCloseButton).click();
 
       cy.logoutApi();
-      userSignUp(data.firstName, data.email, "Test");
+      userSignUp(data.firstName, data.email, data.workspaceName);
       cy.wait(3000);
 
-      cy.visitSlug({ actualUrl: `/applications/${slug}` });
+      cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
       cy.wait(1000);
 
       cy.clearAndType(commonSelectors.workEmailInputField, data.email);
@@ -188,24 +195,21 @@ describe(
       cy.wait(2000);
       logout();
       cy.defaultWorkspaceLogin();
-
-      cy.openApp(
-        "my-workspace",
-        Cypress.env("appId"),
-        '[data-cy="draggable-widget-table1"]'
-      );
+      navigateToAppEditor(data.appName);
       cy.wait(2000);
+      // cy.skipEditorPopover();
       cy.get(commonWidgetSelector.shareAppButton).click();
       cy.get(commonWidgetSelector.makePublicAppToggle).check();
+      cy.wait(2000);
       cy.get(commonWidgetSelector.modalCloseButton).click();
-      cy.get(commonSelectors.editorPageLogo).click();
+      cy.backToApps();
 
       logout();
       cy.wait(4000);
       cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
         "be.visible"
       );
-      cy.visitSlug({ actualUrl: `/applications/${slug}` });
+      cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
       cy.get('[data-cy="draggable-widget-table1"]').should("be.visible");
       cy.get(commonSelectors.viewerPageLogo).click();
     });

cypress-tests/cypress/e2e/ce/workspaceConstants.cy.js

@@ -34,23 +34,14 @@ describe("Workspace constants", () => {
     beforeEach(() => {
         cy.defaultWorkspaceLogin();
         cy.intercept("GET", "/api/library_apps").as("homePage");
+        cy.skipWalkthrough();
     });
     it("Verify workspace constants UI and CRUD operations", () => {
-        cy.get(commonSelectors.workspaceSettingsIcon).click();
-        cy.get(commonSelectors.workspaceConstantsOption)
-            .should(($el) => {
-                expect($el.contents().first().text().trim()).to.eq(
-                    "Workspace constants"
-                );
-            })
-            .click();
+        cy.get('[data-cy="icon-workspace-constants"]').click();
 
-        cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
-            expect($el.contents().first().text().trim()).to.eq("Workspace settings");
-        });
-        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+        cy.get(commonSelectors.pageSectionHeader).verifyVisibleElement(
             "have.text",
-            " Workspace constants"
+            "Workspace constants"
         );
 
         cy.get(
@@ -266,7 +257,7 @@ describe("Workspace constants", () => {
     });
 
     it("should verify the constants resolving value on components and query", () => {
-        common.navigateToworkspaceConstants();
+        cy.get('[data-cy="icon-workspace-constants"]').click();
         AddNewconstants(data.constantsName, data.constantsValue);
         cy.get(
             workspaceConstantsSelectors.constantName(data.constantsName)

cypress-tests/cypress/e2e/database/database.cy.js

@@ -24,7 +24,7 @@ import {
 } from "Support/utils/database";
 import { fake } from "Fixtures/fake";
 import { randomNumber } from "Support/utils/commonWidget";
-import { randomString } from "Support/utils/textInput";
+import { randomString } from "Support/utils/editor/textInput";
 
 describe("Database Functionality", () => {
   const data = {};

cypress-tests/cypress/e2e/editor/data-source/azureBlobStorageHappyPath.cy.js

@@ -31,11 +31,11 @@ describe("Data source Azure Blob Storage", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",
@@ -105,7 +105,7 @@ describe("Data source Azure Blob Storage", () => {
     closeDSModal();
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     selectAndAddDataSource(
       "cloudstorage",

cypress-tests/cypress/e2e/editor/data-source/bigqueryHappyPath.cy.js

@@ -29,11 +29,11 @@ describe("Data source BigQuery", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/clickHouseHappyPath.cy.js

@@ -30,11 +30,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/cosmosDbHappyPath.cy.js

@@ -30,11 +30,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/couchDbHappyPath.cy.js

@@ -31,11 +31,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/dynamoDbHappyPath.cy.js

@@ -29,11 +29,11 @@ describe("Data source DynamoDB", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/elasticsearchHappyPath.cy.js

@@ -28,11 +28,11 @@ describe("Data source Elasticsearch", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/fireStoreHappyPath.cy.js

@@ -26,11 +26,11 @@ describe("Data source Firestore", () => {
     closeDSModal();
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/influxDbHappyPath.cy.js

@@ -33,11 +33,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/mariaDbHappyPath.cy.skip.js

@@ -29,11 +29,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/mongoDbHappyPath.cy.js

@@ -36,11 +36,11 @@ describe("Data source MongoDB", () => {
     closeDSModal();
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/mysqlHappyPath.cy.js

@@ -35,11 +35,11 @@ describe("Data sources MySql", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/oracleDbHappyPath.cy.skip.js

@@ -25,11 +25,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/postgresHappyPath.cy.js

@@ -24,16 +24,18 @@ describe("Data sources", () => {
   });
 
   it("Should verify elements on connection form", () => {
+    cy.log(process.env.NODE_ENV);
+    cy.log(postgreSqlText.allDatabase());
     cy.get(commonSelectors.globalDataSourceIcon).click();
     cy.wait(1000);
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/redisHappyPath.cy.js

@@ -28,11 +28,11 @@ describe("Data source Redis", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/rethinkDbHappyPath.cy.skip.js

@@ -28,11 +28,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/s3HappyPath.cy.js

@@ -29,11 +29,11 @@ describe("Data sources AWS S3", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/sapHanaHappyPath.cy.skip.js

@@ -26,14 +26,13 @@ describe("Data sources", () => {
       .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
       .click();
 
-
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/smtpHappyPath.cy.js

@@ -22,11 +22,11 @@ describe("Data source SMTP", () => {
     closeDSModal();
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/snowflakeHappyPath.cy.js

@@ -30,11 +30,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/sqlServerHappyPath.cy.js

@@ -30,11 +30,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/data-source/typeSenseHappyPath.cy.skip.js

@@ -30,11 +30,11 @@ describe("Data sources", () => {
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDataSources
+      postgreSqlText.allDataSources()
     );
     cy.get(postgreSqlSelector.databaseLabelAndCount).should(
       "have.text",
-      postgreSqlText.allDatabase
+      postgreSqlText.allDatabase()
     );
     cy.get(postgreSqlSelector.apiLabelAndCount).should(
       "have.text",

cypress-tests/cypress/e2e/editor/inspectorHappypath.cy.js

@@ -3,7 +3,7 @@ import {
   verifyMultipleComponentValuesFromInspector,
   verifyComponentValueFromInspector,
 } from "Support/utils/commonWidget";
-import { verifyNodeData, openNode, verifyValue } from "Support/utils/inspector";
+import { verifyNodeData, openNode, verifyValue, deleteComponentFromInspector } from "Support/utils/inspector";
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import { addNewPage } from "Support/utils/multipage";
 import {
@@ -12,8 +12,16 @@ import {
   addSupportCSAData,
 } from "Support/utils/events";
 import { multipageSelector } from "Selectors/multipage";
+import {
+  navigateToCreateNewVersionModal
+} from "Support/utils/version";
+import { createNewVersion } from "Support/utils/exportImport";
+
 
 describe("Editor- Inspector", () => {
+  let currentVersion = "";
+  let newVersion = [];
+  let versionFrom = "";
   beforeEach(() => {
     cy.apiLogin();
     cy.apiCreateApp(`${fake.companyName}-App`);
@@ -170,4 +178,17 @@ describe("Editor- Inspector", () => {
     cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
     cy.apiDeleteApp();
   });
+  it("should verify deletion of component from inspector", () => {
+    cy.dragAndDropWidget("button", 500, 500);
+    cy.get(commonWidgetSelector.sidebarinspector).click();
+    deleteComponentFromInspector("button1");
+    cy.verifyToastMessage(
+      `[class=go3958317564]`,
+      "Component deleted! (⌘ + Z to undo)"
+    );
+    navigateToCreateNewVersionModal((currentVersion = "v1"));
+    createNewVersion((newVersion = ["v2"]), (versionFrom = "v1"));
+    cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
+
+  });
 });

cypress-tests/cypress/e2e/editor/queries/runjsHappyPath.cy.js

@@ -69,6 +69,7 @@ describe("RunJS", () => {
     cy.viewport(1800, 1800);
     cy.dragAndDropWidget("Button");
     resizeQueryPanel("80");
+    deleteDownloadsFolder();
   });
 
   it("should verify basic runjs", () => {
@@ -91,7 +92,6 @@ describe("RunJS", () => {
 
   it("should verify actions", () => {
     const data = {};
-    deleteDownloadsFolder();
     data.customText = randomString(12);
 
     selectQueryFromLandingPage("runjs", "JavaScript");
@@ -146,7 +146,7 @@ describe("RunJS", () => {
     cy.url().should("contain", "/home");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget("Modal");
+    cy.dragAndDropWidget("Modal", 200, 300);
     cy.waitForAutoSave();
     addInputOnQueryField("runjs", "actions.showModal('modal1');");
     query("run");

cypress-tests/cypress/e2e/editor/widget/appTitle.cy.js

@@ -0,0 +1,65 @@
+import { fake } from "Fixtures/fake";
+import { textInputText } from "Texts/textInput";
+import { commonWidgetText, widgetValue, customValidation } from "Texts/common";
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import { buttonText } from "Texts/button";
+import {
+  verifyControlComponentAction,
+  randomString,
+} from "Support/utils/textInput";
+import {
+  openAccordion,
+  verifyAndModifyParameter,
+  openEditorSidebar,
+  verifyAndModifyToggleFx,
+  addDefaultEventHandler,
+  verifyComponentValueFromInspector,
+  selectColourFromColourPicker,
+  verifyBoxShadowCss,
+  verifyLayout,
+  verifyTooltip,
+  editAndVerifyWidgetName,
+  verifyPropertiesGeneralAccordion,
+  verifyStylesGeneralAccordion,
+  randomNumber,
+  closeAccordions,
+} from "Support/utils/commonWidget";
+import {
+  selectCSA,
+  selectEvent,
+  addSupportCSAData,
+} from "Support/utils/events";
+
+describe("Editor title", () => {
+  const data = {};
+  beforeEach(() => {
+    data.appName = fake.companyName;
+    cy.apiLogin();
+    cy.apiCreateApp(data.appName);
+    cy.visit("/");
+  });
+
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
+  it("should verify titles", () => {
+    cy.url().should("include", "/my-workspace");
+    cy.title().should("eq", "ToolJet - Dashboard");
+    cy.log(data.appName);
+
+    cy.openApp();
+    cy.url().should("include", Cypress.env("appId"));
+    cy.title().should("eq", `${data.appName} - Tooljet`);
+
+    cy.openInCurrentTab(commonWidgetSelector.previewButton);
+
+    cy.url().should("include", `/applications/${Cypress.env("appId")}`);
+    cy.title().should("eq", `${data.appName}`);
+    cy.go("back");
+    cy.releaseApp();
+    cy.url().then((url) => cy.visit(`/applications/${url.split("/").pop()}`));
+
+    cy.url().should("include", `/applications/${Cypress.env("appId")}`);
+    cy.title().should("eq", `${data.appName}`);
+  });
+});

cypress-tests/cypress/e2e/editor/widget/buttonHappyPath.cy.js

@@ -234,7 +234,7 @@ describe("Editor- Test Button widget", () => {
     ).should("have.attr", "disabled");
 
     cy.get(commonWidgetSelector.parameterTogglebutton("Disable")).click();
-
+    cy.get('[data-cy="border-radius-input-field"]').realHover();
     cy.get(
       commonWidgetSelector.parameterFxButton(
         commonWidgetText.parameterBorderRadius
@@ -443,4 +443,27 @@ describe("Editor- Test Button widget", () => {
     ).should("not.be.visible");
     cy.apiDeleteApp();
   });
+  it("Should verify deletion of button component from right side panel", () => {
+    cy.get(".col-2").click();
+    cy.get(".list-item-popover-body > :nth-child(3)").click();
+    cy.get('[data-cy="yes-button"]').click();
+    cy.verifyToastMessage(
+      `[class=go3958317564]`,
+      "Component deleted! (⌘ + Z to undo)"
+    );
+    cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
+    cy.reload();
+    cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
+  });
+  it("Should delete button via keyboard action", () => {
+    cy.realPress("Backspace");
+    cy.get('[data-cy="yes-button"]').click();
+    cy.verifyToastMessage(
+      `[class=go3958317564]`,
+      "Component deleted! (⌘ + Z to undo)"
+    );
+    cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
+    cy.reload();
+    cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
+  });
 });

cypress-tests/cypress/e2e/editor/widget/componentsBasicHappypath.cy.js

@@ -356,14 +356,14 @@ describe("Basic components", () => {
     verifyComponent("container1");
 
     openEditorSidebar("container1");
-    editAndVerifyWidgetName("container2", ["Layout"]);
+    editAndVerifyWidgetName("container2", ["Devices"]);
 
     cy.forceClickOnCanvas();
     cy.resizeWidget("container2", 650, 400, false);
     cy.waitForAutoSave();
 
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
-    verifyComponent("container2", ["Layout"]);
+    verifyComponent("container2", ["Devices"]);
 
     cy.go("back");
     resizeQueryPanel(0);
@@ -466,7 +466,7 @@ describe("Basic components", () => {
     verifyComponentWithOutLabel("Link", "link1", "link2", data.appName);
   });
 
-  it("Should verify Map", () => {
+  it.skip("Should verify Map", () => {
     cy.dragAndDropWidget("Map", 300, 300);
     cy.get("body").then(($body) => {
       if ($body.find(".dismissButton").length > 0) {

cypress-tests/cypress/e2e/editor/widget/multiselectHappyPath.cy.js

@@ -363,18 +363,29 @@ describe("Multiselect widget", () => {
     );
   });
 
-  it("should verify CSA", () => {
+  it.only("should verify CSA", () => {
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
     cy.dragAndDropWidget("Number input", 600, 50);
     selectEvent("On change", "Control Component");
     selectCSA("multiselect1", "Select Option", "1000");
+    cy.get('[data-cy="action-label"]').click({ force: true });
+    cy.wait(2000);
     addSupportCSAData("Option", "{{components.numberinput1.value");
+    // cy.get('[data-cy="-input-field"]')
+    //   .eq(1)
+    //   .type(`{selectAll}{backspace}1000{enter}`);
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
     cy.dragAndDropWidget("Number input", 600, 150);
     selectEvent("On change", "Control Component");
     selectCSA("multiselect1", "Deselect Option", "1000");
+    cy.wait(2000);
+    cy.get('[data-cy="action-label"]').click({ force: true });
+    cy.wait(2000);
     addSupportCSAData("Option", "{{components.numberinput2.value");
+    // cy.get('[data-cy="-input-field"]')
+    //   .eq(1)
+    //   .type(`{selectAll}{backspace}1000{enter}`);
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
     cy.dragAndDropWidget("Button", 600, 250);
@@ -390,6 +401,8 @@ describe("Multiselect widget", () => {
     cy.get(commonWidgetSelector.draggableWidget("numberinput1"))
       .clear()
       .type("1");
+    cy.forceClickOnCanvas();
+    cy.wait(1000);
     verifyMultiselectHeader(
       "multiselect1",
       multiselectText.labelAllItemsSelected
@@ -397,6 +410,8 @@ describe("Multiselect widget", () => {
     cy.get(commonWidgetSelector.draggableWidget("numberinput2"))
       .clear()
       .type("3");
+    cy.forceClickOnCanvas();
+    cy.wait(1000);
     verifyMultipleComponentValuesFromInspector("multiselect1", [2, 1]);
 
     cy.get(commonWidgetSelector.draggableWidget("button1")).click();

cypress-tests/cypress/e2e/editor/widget/numberInputHappyPath.cy.js

@@ -1,300 +1,369 @@
 import { fake } from "Fixtures/fake";
-import { commonWidgetText } from "Texts/common";
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import {
+  addDefaultEventHandler,
+  checkPaddingOfContainer,
+  closeAccordions,
+  editAndVerifyWidgetName,
+  openAccordion,
+  openEditorSidebar,
+  randomNumber,
+  selectColourFromColourPicker,
+  verifyAndModifyParameter,
+  verifyBoxShadowCss,
+  verifyComponentValueFromInspector,
+  verifyContainerElements,
+  verifyLayout,
+  verifyStylesGeneralAccordion,
+  verifyTooltip,
+  verifyWidgetColorCss,
+} from "Support/utils/commonWidget";
 import { numberInputText } from "Texts/numberInput";
 
 import {
-  openAccordion,
-  verifyAndModifyParameter,
-  openEditorSidebar,
-  verifyAndModifyToggleFx,
-  verifyComponentValueFromInspector,
-  verifyBoxShadowCss,
-  verifyLayout,
-  verifyTooltip,
-  editAndVerifyWidgetName,
-  addTextWidgetToVerifyValue,
-  verifyPropertiesGeneralAccordion,
-  verifyStylesGeneralAccordion,
-  randomNumber,
-  fillBoxShadowParams,
-  selectColourFromColourPicker,
-} from "Support/utils/commonWidget";
+  addAllInputFieldColors,
+  addAndVerifyAdditionalActions,
+  addCustomWidthOfLabel,
+  addValidations,
+  verifyAlignment,
+  verifyCustomWidthOfLabel,
+  verifyInputFieldColors,
+  verifyLabelStyleElements,
+} from "Support/utils/editor/inputFieldUtils";
+import { addCSA, verifyCSA } from "Support/utils/editor/passwordNumberInput.js";
+import { commonWidgetText } from "Texts/common";
 
 describe("Number Input", () => {
   beforeEach(() => {
     cy.apiLogin();
-    cy.apiCreateApp();
+    cy.apiCreateApp(`${fake.companyName}-numberinput-App`);
     cy.openApp();
-    cy.dragAndDropWidget("Number Input");
+    cy.dragAndDropWidget("Number Input", 500, 500);
   });
   afterEach(() => {
     cy.apiDeleteApp();
   });
 
-  it("should verify the properties of the number input widget", () => {
+  itß("should verify the properties of the number input widget", () => {
     const data = {};
-    data.appName = `${fake.companyName}-App`;
     data.widgetName = fake.widgetName;
     data.tooltipText = fake.randomSentence;
-    data.randomNumber = `${randomNumber(10, 99)}`;
-    data.minimumvalue = `${randomNumber(5, 10)}`;
-    data.maximumValue = `${randomNumber(90, 99)}`;
+    data.minimumLength = randomNumber(2, 4);
+    data.maximumLength = randomNumber(8, 10);
+    data.customText = randomNumber(12);
+    data.customNumber = randomNumber(12);
 
     openEditorSidebar(numberInputText.defaultWidgetName);
-    editAndVerifyWidgetName(data.widgetName);
-    cy.get(
-      commonWidgetSelector.draggableWidget(data.widgetName)
-    ).verifyVisibleElement("have.value", "99");
-
-    openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
+    closeAccordions([
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    editAndVerifyWidgetName(data.widgetName, [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    openAccordion("Data", [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
       "Events",
-      "Properties",
-      "Layout",
     ]);
     verifyAndModifyParameter(
       commonWidgetText.labelDefaultValue,
-      data.randomNumber
+      data.customNumber
     );
     cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(data.widgetName)
-    ).verifyVisibleElement("have.value", data.randomNumber);
+    ).verifyVisibleElement("have.value", data.customNumber);
 
-    verifyComponentValueFromInspector(data.widgetName, data.randomNumber);
+    verifyComponentValueFromInspector(data.widgetName, data.customNumber);
     cy.forceClickOnCanvas();
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
 
+    data.customText = fake.randomSentence;
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
+    openAccordion("Data", [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
       "Events",
-      "Properties",
-      "Layout",
-    ]);
-    verifyAndModifyParameter(
-      commonWidgetText.labelMinimumValue,
-      data.minimumvalue
-    );
-    cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(data.widgetName),
-      randomNumber(1, 4)
-    );
-    cy.forceClickOnCanvas();
-    cy.get(
-      commonWidgetSelector.draggableWidget(data.widgetName)
-    ).verifyVisibleElement("have.value", `${data.minimumvalue}`);
-
-    openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
-      "Events",
-      "Properties",
-      "Layout",
-    ]);
-    verifyAndModifyParameter(
-      commonWidgetText.labelMaximumValue,
-      `${data.maximumValue}`
-    );
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(data.widgetName),
-      randomNumber(100, 110)
-    );
-    cy.forceClickOnCanvas;
-    cy.get(
-      commonWidgetSelector.draggableWidget(data.widgetName)
-    ).verifyVisibleElement("have.value", `${data.maximumValue}`);
-
-    openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
-      "Events",
-      "Properties",
-      "Layout",
     ]);
     verifyAndModifyParameter(
       commonWidgetText.labelPlaceHolder,
-      data.randomNumber
+      data.customText
     );
-    cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
+    cy.forceClickOnCanvas();
     cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
       .invoke("attr", "placeholder")
-      .should("contain", data.randomNumber);
+      .should("contain", data.customText);
 
-    verifyPropertiesGeneralAccordion(data.widgetName, data.tooltipText);
+    openEditorSidebar(data.widgetName);
+    openAccordion(commonWidgetText.accordionEvents, ["Validation", "Devices"]);
+    addDefaultEventHandler(data.customText);
+    cy.get(commonWidgetSelector.eventSelection).type("On Enter Pressed{Enter}");
 
-    // verifyLayout(data.widgetName);
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      `${data.customNumber}{Enter}`
+    );
+    cy.verifyToastMessage(commonSelectors.toastMessage, data.customText);
+    cy.forceClickOnCanvas();
 
-    // cy.get(commonWidgetSelector.changeLayoutButton).click();
-    // cy.get(
-    //   commonWidgetSelector.parameterTogglebutton(
-    //     commonWidgetText.parameterShowOnDesktop
-    //   )
-    // ).click();
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    addValidations(data.widgetName, data, "Min value", "Max value");
+
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      data.customNumber
+    );
+    cy.forceClickOnCanvas();
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement("have.text", commonWidgetText.regexValidationError);
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+    cy.get(
+      commonWidgetSelector.parameterInputField(commonWidgetText.labelRegex)
+    )
+      .click()
+      .clearCodeMirror();
+
+    cy.forceClickOnCanvas();
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
+      .clear()
+      .type("1");
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement(
+      "have.text",
+      `Minimum value is ${data.minimumLength}`
+    );
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+    cy.get(
+      commonWidgetSelector.parameterInputField("Min value")
+    ).clearAndTypeOnCodeMirror("0");
+    cy.forceClickOnCanvas();
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      "99"
+    );
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement(
+      "have.text",
+      `Maximum value is ${data.maximumLength}`
+    );
+    cy.forceClickOnCanvas();
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement("have.text", data.customText);
+    cy.forceClickOnCanvas();
+    openEditorSidebar(data.widgetName);
+    cy.get(
+      commonWidgetSelector.accordion(commonWidgetText.accordionValidation)
+    ).click();
+    addAndVerifyAdditionalActions(data.widgetName, data.tooltipText);
+
+    openEditorSidebar(data.widgetName);
+    cy.get(
+      commonWidgetSelector.accordion(commonWidgetText.accordionValidation)
+    ).click();
+    verifyLayout(data.widgetName, "Devices");
+
+    cy.get(commonWidgetSelector.changeLayoutToDesktopButton).click();
+    cy.get(
+      commonWidgetSelector.parameterTogglebutton(
+        commonWidgetText.parameterShowOnDesktop
+      )
+    ).click();
+
+    openEditorSidebar(data.widgetName);
+    openAccordion("Validation", [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    cy.get(
+      commonWidgetSelector.parameterInputField("Min value")
+    ).clearAndTypeOnCodeMirror("2");
+    cy.forceClickOnCanvas();
+    cy.waitForAutoSave();
+    openEditorSidebar(data.widgetName);
 
     cy.get(commonWidgetSelector.widgetDocumentationLink).should(
       "have.text",
-      numberInputText.numberInputDocumentationLink
+      "Read documentation for NumberInput"
+    );
+
+    cy.openInCurrentTab(commonWidgetSelector.previewButton);
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
+      .invoke("attr", "placeholder")
+      .should("contain", data.customText);
+
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      `${data.customText}{Enter}`
+    );
+    cy.verifyToastMessage(commonSelectors.toastMessage, data.customText);
+    cy.forceClickOnCanvas();
+
+    // cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    // cy.clearAndType(
+    //   commonWidgetSelector.draggableWidget(data.widgetName),
+    //   data.customText
+    // );
+    // cy.forceClickOnCanvas();
+    // cy.get(
+    //   commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    // ).verifyVisibleElement("have.text", commonWidgetText.regexValidationError);
+
+    // cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    cy.forceClickOnCanvas();
+    cy.clearAndType(commonWidgetSelector.draggableWidget(data.widgetName), "1");
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement(
+      "have.text",
+      `Minimum value is ${data.minimumLength}`
+    );
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      "13"
+    );
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement(
+      "have.text",
+      `Maximum value is ${data.maximumLength}`
+    );
+    cy.forceClickOnCanvas();
+    verifyTooltip(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      data.tooltipText
     );
   });
+
   it("should verify the styles of the number input widget", () => {
     const data = {};
     data.appName = `${fake.companyName}-App`;
     data.colourHex = fake.randomRgbaHex;
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
+    data.bgColor = fake.randomRgba;
+    data.borderColor = fake.randomRgba;
+    data.textColor = fake.randomRgba;
+    data.errorTextColor = fake.randomRgba;
+    data.iconColor = fake.randomRgba;
+    data.labelColor = fake.randomRgba;
+    data.widgetName = numberInputText.defaultWidgetName;
 
     openEditorSidebar(numberInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
+    addAllInputFieldColors(data);
 
-    verifyAndModifyToggleFx(
-      commonWidgetText.parameterVisibility,
-      commonWidgetText.codeMirrorLabelTrue
-    );
-    cy.get(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).should("not.be.visible");
+    cy.clearAndType('[data-cy="border-radius-input"]', "20");
+    cy.get('[data-cy="icon-visibility-button"]').click();
 
-    cy.get(
-      commonWidgetSelector.parameterTogglebutton(
-        commonWidgetText.parameterVisibility
-      )
-    ).click();
-
-    verifyAndModifyToggleFx(
-      commonWidgetText.parameterDisable,
-      commonWidgetText.codeMirrorLabelFalse
-    );
-    cy.waitForAutoSave();
-    cy.get(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).should("have.attr", "disabled");
-
-    cy.get(
-      commonWidgetSelector.parameterTogglebutton(
-        commonWidgetText.parameterDisable
-      )
-    ).click();
-
-    verifyAndModifyParameter(
-      commonWidgetText.parameterBorderRadius,
-      commonWidgetText.borderRadiusInput
-    );
-
-    cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
     ).should("have.css", "border-radius", "20px");
 
+    verifyInputFieldColors("numberinput1", data);
+
     verifyStylesGeneralAccordion(
       numberInputText.defaultWidgetName,
       data.boxShadowParam,
       data.colourHex,
       data.boxShadowColor,
-      3
-    );
-  });
-
-  it("should verify the app preview", () => {
-    const data = {};
-    data.appName = `${fake.companyName}-App`;
-    data.tooltipText = fake.randomSentence;
-    data.colourHex = fake.randomRgbaHex;
-    data.boxShadowColor = fake.randomRgba;
-    data.boxShadowParam = fake.boxShadowParam;
-    data.randomNumber = randomNumber(10, 99);
-    data.minimumvalue = randomNumber(5, 10);
-    data.maximumValue = randomNumber(90, 99);
-
-    openEditorSidebar(numberInputText.defaultWidgetName);
-    verifyAndModifyParameter(
-      commonWidgetText.labelDefaultValue,
-      data.randomNumber
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelMinimumValue,
-      `${data.minimumvalue}`
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelMaximumValue,
-      `${data.maximumValue}`
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelPlaceHolder,
-      data.randomNumber
-    );
-
-    verifyPropertiesGeneralAccordion(
-      numberInputText.defaultWidgetName,
-      data.tooltipText
+      4
     );
 
     openEditorSidebar(numberInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    verifyAndModifyParameter(
-      commonWidgetText.parameterBorderRadius,
-      commonWidgetText.borderRadiusInput
-    );
-    cy.forceClickOnCanvas();
 
-    openEditorSidebar(numberInputText.defaultWidgetName);
-    cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, [], 1);
-    cy.get(commonWidgetSelector.boxShadowColorPicker).click();
+    verifyContainerElements();
+    checkPaddingOfContainer(numberInputText.defaultWidgetName, 1);
+    cy.get('[data-cy="togglr-button-none"]').click();
+    checkPaddingOfContainer(numberInputText.defaultWidgetName, 0);
 
-    fillBoxShadowParams(
-      commonWidgetSelector.boxShadowDefaultParam,
-      data.boxShadowParam
-    );
+    verifyLabelStyleElements();
+    verifyAlignment(numberInputText.defaultWidgetName, "sideLeft");
+    cy.get('[data-cy="togglr-button-top"]').click();
+    verifyAlignment(numberInputText.defaultWidgetName, "topLeft");
+    cy.get('[data-cy="togglr-button-right"]').click();
+    verifyAlignment(numberInputText.defaultWidgetName, "topRight");
+    cy.get('[data-cy="togglr-button-side"]').click();
+    verifyAlignment(numberInputText.defaultWidgetName, "sideRight");
+    cy.get('[data-cy="togglr-button-left"]').click();
+    verifyAlignment(numberInputText.defaultWidgetName, "sideLeft");
+    addCustomWidthOfLabel("50");
+    verifyCustomWidthOfLabel(numberInputText.defaultWidgetName, "50");
     selectColourFromColourPicker(
-      commonWidgetText.boxShadowColor,
-      data.boxShadowColor,
-      3
+      "Text",
+      data.labelColor,
+      0,
+      commonWidgetSelector.colourPickerParent,
+      "0"
+    );
+    verifyWidgetColorCss(
+      `[data-cy="label-${numberInputText.defaultWidgetName}"]>label`,
+      "color",
+      data.labelColor,
+      true
     );
-    addTextWidgetToVerifyValue("components.numberinput1.value");
 
-    cy.waitForAutoSave();
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
-
-    cy.get(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).verifyVisibleElement("have.value", data.randomNumber);
-
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName),
-      randomNumber(1, 4)
+    verifyWidgetColorCss(
+      `[data-cy="label-${numberInputText.defaultWidgetName}"]>label`,
+      "color",
+      data.labelColor,
+      true
     );
-    cy.forceClickOnCanvas();
-    cy.get(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).verifyVisibleElement("have.value", `${data.minimumvalue}`);
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName),
-      randomNumber(100, 110)
-    );
-    cy.forceClickOnCanvas();
-    cy.get(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).verifyVisibleElement("have.value", `${data.maximumValue}`);
-    cy.get(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    )
-      .invoke("attr", "placeholder")
-      .should("contain", data.randomNumber);
 
-    verifyTooltip(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName),
-      data.tooltipText
-    );
-    cy.get(
-      commonWidgetSelector.draggableWidget(commonWidgetText.text1)
-    ).verifyVisibleElement("have.text", data.maximumValue);
+    verifyAlignment(numberInputText.defaultWidgetName, "sideLeft");
+    verifyCustomWidthOfLabel(numberInputText.defaultWidgetName, "50");
+    verifyInputFieldColors("numberinput1", data);
 
-    cy.get(
-      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).should("have.css", "border-radius", "20px");
     verifyBoxShadowCss(
       numberInputText.defaultWidgetName,
       data.boxShadowColor,
       data.boxShadowParam
     );
+
+    cy.get(
+      commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
+    ).should("have.css", "border-radius", "20px");
+  });
+
+  it.skip("should verify the app preview", () => {});
+
+  it("should verify CSA", () => {
+    const data = {};
+    data.widgetName = numberInputText.defaultWidgetName;
+    data.customText = randomNumber(12);
+
+    addCSA(data);
+    verifyCSA(data);
+
+    cy.openInCurrentTab(commonWidgetSelector.previewButton);
+    verifyCSA(data);
   });
 });

cypress-tests/cypress/e2e/editor/widget/passwordInputHappyPath.cy.js

@@ -1,35 +1,47 @@
 import { fake } from "Fixtures/fake";
-import { commonWidgetText, customValidation } from "Texts/common";
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
-import { buttonText } from "Texts/button";
 import {
-  openAccordion,
-  verifyAndModifyParameter,
-  openEditorSidebar,
-  verifyAndModifyToggleFx,
-  verifyComponentValueFromInspector,
-  verifyBoxShadowCss,
-  verifyLayout,
-  verifyTooltip,
-  editAndVerifyWidgetName,
-  addTextWidgetToVerifyValue,
-  verifyPropertiesGeneralAccordion,
-  verifyStylesGeneralAccordion,
-  randomNumber,
-  fillBoxShadowParams,
-  selectColourFromColourPicker,
+  addDefaultEventHandler,
+  checkPaddingOfContainer,
   closeAccordions,
+  editAndVerifyWidgetName,
+  openAccordion,
+  openEditorSidebar,
+  randomNumber,
+  selectColourFromColourPicker,
+  verifyAndModifyParameter,
+  verifyBoxShadowCss,
+  verifyComponentValueFromInspector,
+  verifyContainerElements,
+  verifyLayout,
+  verifyStylesGeneralAccordion,
+  verifyTooltip,
+  verifyWidgetColorCss,
 } from "Support/utils/commonWidget";
+import {
+  addAllInputFieldColors,
+  addAndVerifyAdditionalActions,
+  addCustomWidthOfLabel,
+  addValidations,
+  verifyAlignment,
+  verifyCustomWidthOfLabel,
+  verifyInputFieldColors,
+  verifyLabelStyleElements,
+} from "Support/utils/editor/inputFieldUtils";
+import {
+  addCSA,
+  randomString,
+  verifyCSA,
+} from "Support/utils/editor/passwordNumberInput.js";
+import { commonWidgetText } from "Texts/common";
 import { passwordInputText } from "Texts/passwordInput";
-import { randomString } from "Support/utils/textInput";
 
 describe("Password Input", () => {
   beforeEach(() => {
     cy.apiLogin();
-    cy.apiCreateApp();
+    cy.apiCreateApp(`${fake.companyName}-Passwordinput-App`);
     cy.openApp();
-    cy.modifyCanvasSize(1200, 780);
-    cy.dragAndDropWidget("Password Input", 350, 300);
+    cy.dragAndDropWidget("Password Input", 500, 500);
   });
   afterEach(() => {
     cy.apiDeleteApp();
@@ -37,52 +49,81 @@ describe("Password Input", () => {
 
   it("should verify the properties of the password input widget", () => {
     const data = {};
-    data.appName = `${fake.companyName}-App`;
     data.widgetName = fake.widgetName;
-    data.customText = fake.firstName;
     data.tooltipText = fake.randomSentence;
     data.minimumLength = randomNumber(1, 4);
     data.maximumLength = randomNumber(8, 10);
     data.customText = randomString(12);
 
     openEditorSidebar(passwordInputText.defaultWidgetName);
-    closeAccordions(["Events", "Validation", "Properties", "Layout"]);
-    editAndVerifyWidgetName(data.widgetName);
-    cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
-      .invoke("attr", "placeholder")
-      .should("contain", "password");
-
-    openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
-      "Events",
+    closeAccordions([
+      "Data",
       "Validation",
-      "Properties",
-      "Layout",
+      "Additional Actions",
+      "Devices",
+      "Events",
     ]);
+    editAndVerifyWidgetName(data.widgetName, [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    openAccordion("Data", [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    verifyAndModifyParameter(
+      commonWidgetText.labelDefaultValue,
+      data.customText
+    );
+    cy.forceClickOnCanvas();
+    cy.get(
+      commonWidgetSelector.draggableWidget(data.widgetName)
+    ).verifyVisibleElement("have.value", data.customText);
 
-    verifyAndModifyParameter("Placeholder", data.customText);
+    verifyComponentValueFromInspector(data.widgetName, data.customText);
+    cy.forceClickOnCanvas();
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    data.customText = fake.randomSentence;
+    openEditorSidebar(data.widgetName);
+    openAccordion("Data", [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    verifyAndModifyParameter(
+      commonWidgetText.labelPlaceHolder,
+      data.customText
+    );
     cy.forceClickOnCanvas();
     cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
       .invoke("attr", "placeholder")
       .should("contain", data.customText);
 
+    openEditorSidebar(data.widgetName);
+    openAccordion(commonWidgetText.accordionEvents, ["Validation", "Devices"]);
+    addDefaultEventHandler(data.customText);
+    cy.get(commonWidgetSelector.eventSelection).type("On Enter Pressed{Enter}");
+
     cy.clearAndType(
       commonWidgetSelector.draggableWidget(data.widgetName),
-      data.customText
+      `${data.customText}{Enter}`
     );
-    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).should(
-      "have.value",
-      data.customText
-    );
-    verifyComponentValueFromInspector(data.widgetName, data.customText);
+    cy.verifyToastMessage(commonSelectors.toastMessage, data.customText);
     cy.forceClickOnCanvas();
 
-    openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionValidation);
-    verifyAndModifyParameter(
-      commonWidgetText.labelRegex,
-      commonWidgetText.regularExpression
-    );
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    addValidations(data.widgetName, data);
+
     cy.clearAndType(
       commonWidgetSelector.draggableWidget(data.widgetName),
       data.customText
@@ -93,15 +134,10 @@ describe("Password Input", () => {
     ).verifyVisibleElement("have.text", commonWidgetText.regexValidationError);
 
     cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
-    openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionValidation);
     cy.get(
       commonWidgetSelector.parameterInputField(commonWidgetText.labelRegex)
     ).clearCodeMirror();
-    verifyAndModifyParameter(
-      commonWidgetText.labelMinLength,
-      data.minimumLength
-    );
+
     cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(data.widgetName)
@@ -113,269 +149,194 @@ describe("Password Input", () => {
     cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
     cy.get(
       commonWidgetSelector.parameterInputField(commonWidgetText.labelMinLength)
-    ).clearCodeMirror();
-
-    verifyAndModifyParameter(
-      commonWidgetText.labelMaxLength,
-      data.maximumLength
-    );
+    ).clearAndTypeOnCodeMirror("0");
     cy.forceClickOnCanvas();
     cy.clearAndType(
       commonWidgetSelector.draggableWidget(data.widgetName),
-      data.customText
+      data.customText.toUpperCase().replaceAll(" ", "").replaceAll(".", "")
     );
-    cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(data.widgetName)
     ).verifyVisibleElement(
       "have.text",
       commonWidgetText.maxLengthValidationError(data.maximumLength)
     );
-    openEditorSidebar(data.widgetName);
-
-    verifyAndModifyParameter(
-      commonWidgetText.labelcustomValidadtion,
-      customValidation(data.widgetName, data.customText)
-    );
     cy.forceClickOnCanvas();
     cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
-    cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(data.widgetName)
     ).verifyVisibleElement("have.text", data.customText);
+    cy.forceClickOnCanvas();
     openEditorSidebar(data.widgetName);
-
-    cy.get(
-      commonWidgetSelector.accordion(commonWidgetText.accordionProperties)
-    ).click();
     cy.get(
       commonWidgetSelector.accordion(commonWidgetText.accordionValidation)
     ).click();
-    verifyPropertiesGeneralAccordion(data.widgetName, data.tooltipText);
+    addAndVerifyAdditionalActions(data.widgetName, data.tooltipText);
 
     openEditorSidebar(data.widgetName);
-    cy.get(
-      commonWidgetSelector.accordion(commonWidgetText.accordionProperties)
-    ).click();
     cy.get(
       commonWidgetSelector.accordion(commonWidgetText.accordionValidation)
     ).click();
-    // verifyLayout(data.widgetName);
+    verifyLayout(data.widgetName, "Devices");
 
-    // cy.get(commonWidgetSelector.changeLayoutButton).click();
-    // cy.get(
-    //   commonWidgetSelector.parameterTogglebutton(
-    //     commonWidgetText.parameterShowOnDesktop
-    //   )
-    // ).click();
+    cy.get(commonWidgetSelector.changeLayoutToDesktopButton).click();
+    cy.get(
+      commonWidgetSelector.parameterTogglebutton(
+        commonWidgetText.parameterShowOnDesktop
+      )
+    ).click();
+
+    openEditorSidebar(data.widgetName);
+    openAccordion("Validation", [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    cy.get(
+      commonWidgetSelector.parameterInputField(commonWidgetText.labelMinLength)
+    ).clearAndTypeOnCodeMirror("5");
+    cy.forceClickOnCanvas();
+    cy.waitForAutoSave();
+    openEditorSidebar(data.widgetName);
 
     cy.get(commonWidgetSelector.widgetDocumentationLink).should(
       "have.text",
       "Read documentation for PasswordInput"
     );
+
+    cy.openInCurrentTab(commonWidgetSelector.previewButton);
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
+      .invoke("attr", "placeholder")
+      .should("contain", data.customText);
+
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      `${data.customText}{Enter}`
+    );
+    cy.verifyToastMessage(commonSelectors.toastMessage, data.customText);
+    cy.forceClickOnCanvas();
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      data.customText
+    );
+    cy.forceClickOnCanvas();
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement("have.text", commonWidgetText.regexValidationError);
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    cy.forceClickOnCanvas();
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement(
+      "have.text",
+      commonWidgetText.minLengthValidationError("5")
+    );
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      data.customText.toUpperCase().replaceAll(" ", "").replaceAll(".", "")
+    );
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement(
+      "have.text",
+      commonWidgetText.maxLengthValidationError(data.maximumLength)
+    );
+    cy.forceClickOnCanvas();
+    verifyTooltip(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      data.tooltipText
+    );
   });
+
   it("should verify the styles of the password input widget", () => {
     const data = {};
     data.appName = `${fake.companyName}-App`;
     data.colourHex = fake.randomRgbaHex;
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
+    data.bgColor = fake.randomRgba;
+    data.borderColor = fake.randomRgba;
+    data.textColor = fake.randomRgba;
+    data.errorTextColor = fake.randomRgba;
+    data.iconColor = fake.randomRgba;
+    data.labelColor = fake.randomRgba;
+    data.widgetName = passwordInputText.defaultWidgetName;
 
     openEditorSidebar(passwordInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
+    addAllInputFieldColors(data);
 
-    verifyAndModifyToggleFx(
-      commonWidgetText.parameterVisibility,
-      commonWidgetText.codeMirrorLabelTrue
-    );
-    cy.get(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
-    ).should("not.be.visible");
+    cy.clearAndType('[data-cy="border-radius-input"]', "20");
+    // cy.get('[data-cy="icon-visibility-button"]').click();
 
-    cy.get(
-      commonWidgetSelector.parameterTogglebutton(
-        commonWidgetText.parameterVisibility
-      )
-    ).click();
-
-    verifyAndModifyToggleFx(
-      commonWidgetText.parameterDisable,
-      commonWidgetText.codeMirrorLabelFalse
-    );
-    cy.waitForAutoSave();
-    cy.get(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
-    ).should("have.attr", "disabled");
-
-    cy.get(
-      commonWidgetSelector.parameterTogglebutton(
-        commonWidgetText.parameterDisable
-      )
-    ).click();
-
-    verifyAndModifyParameter(
-      commonWidgetText.parameterBorderRadius,
-      commonWidgetText.borderRadiusInput
-    );
-
-    cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
     ).should("have.css", "border-radius", "20px");
 
+    verifyInputFieldColors("passwordinput1", data);
+
     verifyStylesGeneralAccordion(
       passwordInputText.defaultWidgetName,
       data.boxShadowParam,
       data.colourHex,
       data.boxShadowColor,
-      1
-    );
-  });
-
-  it("should verify the app preview", () => {
-    const data = {};
-    data.appName = `${fake.companyName}-App`;
-    data.widgetName = fake.widgetName;
-    data.tooltipText = fake.randomSentence;
-    data.colourHex = fake.randomRgbaHex;
-    data.boxShadowColor = fake.randomRgba;
-    data.boxShadowParam = fake.boxShadowParam;
-    data.minimumLength = randomNumber(1, 4);
-    data.maximumLength = randomNumber(8, 10);
-    data.customText = randomString(12);
-    data.maxLengthText = randomString(data.maximumLength);
-
-    openEditorSidebar(passwordInputText.defaultWidgetName);
-    verifyAndModifyParameter("Placeholder", data.customText);
-
-    openAccordion(commonWidgetText.accordionValidation);
-    verifyAndModifyParameter(
-      commonWidgetText.labelRegex,
-      commonWidgetText.regularExpression
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelMinLength,
-      data.minimumLength
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelMaxLength,
-      data.maximumLength
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelcustomValidadtion,
-      customValidation(passwordInputText.defaultWidgetName, data.customText)
-    );
-    verifyPropertiesGeneralAccordion(
-      passwordInputText.defaultWidgetName,
-      data.tooltipText
+      4
     );
 
     openEditorSidebar(passwordInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
-    verifyAndModifyParameter(
-      commonWidgetText.parameterBorderRadius,
-      commonWidgetText.borderRadiusInput
-    );
+    verifyContainerElements();
+    checkPaddingOfContainer(passwordInputText.defaultWidgetName, 1);
+    cy.get('[data-cy="togglr-button-none"]').click();
+    checkPaddingOfContainer(passwordInputText.defaultWidgetName, 0);
 
-    cy.get(
-      commonWidgetSelector.parameterTogglebutton(
-        commonWidgetText.parameterVisibility
-      )
-    )
-      .click()
-      .click();
-
-    cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
-    cy.get(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
-    ).should("have.css", "border-radius", "20px");
-
-    cy.waitForAutoSave();
-    cy.reload();
-
-    openEditorSidebar(passwordInputText.defaultWidgetName);
-    cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, [], 1);
-    cy.get(commonWidgetSelector.boxShadowColorPicker).click();
-
-    fillBoxShadowParams(
-      commonWidgetSelector.boxShadowDefaultParam,
-      data.boxShadowParam
-    );
+    verifyLabelStyleElements();
+    verifyAlignment(passwordInputText.defaultWidgetName, "sideLeft");
+    cy.get('[data-cy="togglr-button-top"]').click();
+    verifyAlignment(passwordInputText.defaultWidgetName, "topLeft");
+    cy.get('[data-cy="togglr-button-right"]').click();
+    verifyAlignment(passwordInputText.defaultWidgetName, "topRight");
+    cy.get('[data-cy="togglr-button-side"]').click();
+    verifyAlignment(passwordInputText.defaultWidgetName, "sideRight");
+    cy.get('[data-cy="togglr-button-left"]').click();
+    verifyAlignment(passwordInputText.defaultWidgetName, "sideLeft");
+    addCustomWidthOfLabel("50");
+    verifyCustomWidthOfLabel(passwordInputText.defaultWidgetName, "50");
     selectColourFromColourPicker(
-      commonWidgetText.boxShadowColor,
-      data.boxShadowColor,
-      1
+      "Text",
+      data.labelColor,
+      0,
+      commonWidgetSelector.colourPickerParent,
+      "0"
     );
-    addTextWidgetToVerifyValue("components.passwordinput1.value");
-    cy.waitForAutoSave();
+    verifyWidgetColorCss(
+      `[data-cy="label-${passwordInputText.defaultWidgetName}"]>label`,
+      "color",
+      data.labelColor,
+      true
+    );
+
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
-
-    cy.get(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
-    )
-      .invoke("attr", "placeholder")
-      .should("contain", data.customText);
-
-    cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
-    cy.get(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
-    )
-      .type(" ")
-      .type("{selectAll}{backspace}");
-    cy.get(
-      commonWidgetSelector.validationFeedbackMessage(
-        passwordInputText.defaultWidgetName
-      )
-    ).verifyVisibleElement(
-      "have.text",
-      commonWidgetText.minLengthValidationError(data.minimumLength)
-    );
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName),
-      "t"
-    );
-    cy.get(
-      commonWidgetSelector.draggableWidget(commonWidgetText.text1)
-    ).verifyVisibleElement("have.text", "t");
-    cy.forceClickOnCanvas();
-    cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
-    cy.get(
-      commonWidgetSelector.validationFeedbackMessage(
-        passwordInputText.defaultWidgetName
-      )
-    ).verifyVisibleElement("have.text", commonWidgetText.regexValidationError);
-
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName),
-      data.customText.toUpperCase()
-    );
-    cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
-
-    // cy.get(
-    //   commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
-    // )
-    //   .type("1")
-    //   .type("{selectAll}{backspace}");
-
-    cy.get(
-      commonWidgetSelector.validationFeedbackMessage(
-        passwordInputText.defaultWidgetName
-      )
-    ).verifyVisibleElement(
-      "have.text",
-      commonWidgetText.maxLengthValidationError(data.maximumLength)
+    verifyWidgetColorCss(
+      `[data-cy="label-${passwordInputText.defaultWidgetName}"]>label`,
+      "color",
+      data.labelColor,
+      true
     );
 
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName),
-      data.maxLengthText.toUpperCase()
-    );
-
-    cy.get(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
-    ).should("have.css", "border-radius", "20px");
+    verifyAlignment(passwordInputText.defaultWidgetName, "sideLeft");
+    verifyCustomWidthOfLabel(passwordInputText.defaultWidgetName, "50");
+    verifyInputFieldColors("passwordinput1", data);
 
     verifyBoxShadowCss(
       passwordInputText.defaultWidgetName,
@@ -383,9 +344,22 @@ describe("Password Input", () => {
       data.boxShadowParam
     );
 
-    verifyTooltip(
-      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName),
-      data.tooltipText
-    );
+    cy.get(
+      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
+    ).should("have.css", "border-radius", "20px");
+  });
+
+  it.skip("should verify the app preview", () => {});
+
+  it("should verify CSA", () => {
+    const data = {};
+    data.widgetName = passwordInputText.defaultWidgetName;
+    data.customText = randomString(12);
+
+    addCSA(data);
+    verifyCSA(data);
+
+    cy.openInCurrentTab(commonWidgetSelector.previewButton);
+    verifyCSA(data);
   });
 });

cypress-tests/cypress/e2e/editor/widget/textHappyPath.cy.js

@@ -1,39 +1,34 @@
 import { fake } from "Fixtures/fake";
-import { textInputText } from "Texts/textInput";
-import { commonWidgetText, widgetValue, customValidation } from "Texts/common";
-import { commonSelectors, commonWidgetSelector } from "Selectors/common";
-import { buttonText } from "Texts/button";
 import {
-  verifyControlComponentAction,
-  randomString,
-} from "Support/utils/textInput";
+  verifyNodeData,
+  openNode,
+  verifyValue,
+  deleteComponentFromInspector,
+  verifyfunctions,
+} from "Support/utils/inspector";
+import { commonWidgetSelector } from "Selectors/common";
 import {
-  openAccordion,
-  verifyAndModifyParameter,
-  openEditorSidebar,
-  verifyAndModifyToggleFx,
-  addDefaultEventHandler,
-  verifyComponentValueFromInspector,
-  selectColourFromColourPicker,
-  verifyBoxShadowCss,
-  verifyLayout,
-  verifyTooltip,
   editAndVerifyWidgetName,
-  verifyPropertiesGeneralAccordion,
+  selectFromSidebarDropdown,
+  addValueOnInput,
+  selectColourFromColourPicker,
   verifyStylesGeneralAccordion,
-  randomNumber,
-  closeAccordions,
 } from "Support/utils/commonWidget";
 import {
+  addSupportCSAData,
   selectCSA,
   selectEvent,
-  addSupportCSAData,
 } from "Support/utils/events";
+import { randomString } from "Support/utils/textInput";
+import { buttonText } from "Texts/button";
 
 describe("Text Input", () => {
+  const data = {};
   beforeEach(() => {
+    cy.viewport(1200, 1200);
+    data.appName = `${fake.companyName}-text-App1`;
     cy.apiLogin();
-    cy.apiCreateApp();
+    cy.apiCreateApp(data.appName);
     cy.openApp();
     cy.dragAndDropWidget("Text");
   });
@@ -41,6 +36,60 @@ describe("Text Input", () => {
   afterEach(() => {
     cy.apiDeleteApp();
   });
+
+  it("should verify properties of text component", () => {
+    data.componentName = fake.widgetName;
+    cy.get(commonWidgetSelector.draggableWidget("text1")).should("be.visible");
+
+    editAndVerifyWidgetName(data.componentName, [
+      "Data",
+      "Events",
+      "Additional Actions",
+      "Devices",
+    ]);
+    cy.get(
+      '[data-cy="textcomponenttextinput-input-field"]'
+    ).clearAndTypeOnCodeMirror("Cypress testing text component");
+    cy.forceClickOnCanvas();
+    cy.get(
+      commonWidgetSelector.draggableWidget(data.componentName)
+    ).verifyVisibleElement("have.text", "Cypress testing text component");
+  });
+
+  it.only("should verify styles of text component", () => {
+    cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
+    selectFromSidebarDropdown("Weight", "bolder");
+    selectFromSidebarDropdown("Font variant", "initial");
+    addValueOnInput("Size", 25);
+    addValueOnInput("Line Height", 3);
+    addValueOnInput("Text Indent", 2);
+    addValueOnInput("Letter Spacing", 2);
+    addValueOnInput("Word Spacing", 2);
+    addValueOnInput("Border radius", 2);
+
+    data.textColor = fake.randomRgba;
+    data.backgroundColor = fake.randomRgba;
+    data.borderColor = fake.randomRgba;
+    data.boxShadowColor = fake.randomRgba;
+    data.boxShadowParam = fake.boxShadowParam;
+
+    selectColourFromColourPicker("color", data.textColor);
+    selectColourFromColourPicker("background", data.backgroundColor);
+    selectColourFromColourPicker("border", data.borderColor);
+
+    data.colourHex = fake.randomRgbaHex;
+    verifyStylesGeneralAccordion(
+      "text1",
+      data.boxShadowParam,
+      data.colourHex,
+      data.boxShadowColor,
+      4,
+      "#00000090"
+    );
+  });
+
+  it("should verify preview of text component", () => {});
+
   it("should verify CSA", () => {
     const data = {};
     data.customText = randomString(12);
@@ -71,4 +120,22 @@ describe("Text Input", () => {
       "not.be.visible"
     );
   });
+  it("should verify expossed values", () => {
+    cy.get(commonWidgetSelector.sidebarinspector).click();
+    verifyNodeData("components", "Object", "1 entry ");
+    openNode("components");
+    openNode("text1");
+
+    verifyValue("text", "String", `"Hello World👋"`);
+    verifyValue("isVisible", "Boolean", "true");
+    verifyValue("isLoading", "Boolean", "false");
+    verifyValue("isDisabled", "Boolean", "false");
+
+    verifyfunctions("clear", "Function");
+    verifyfunctions("setText", "Function");
+    verifyfunctions("visibility", "Function");
+    verifyfunctions("setDisabled", "Function");
+    verifyfunctions("setVisibility", "Function");
+    verifyfunctions("setLoadingState", "Function");
+  });
 });

cypress-tests/cypress/e2e/editor/widget/textInputHappyPath.cy.js

@@ -1,39 +1,45 @@
 import { fake } from "Fixtures/fake";
-import { textInputText } from "Texts/textInput";
-import { commonWidgetText, widgetValue, customValidation } from "Texts/common";
 import { commonSelectors, commonWidgetSelector } from "Selectors/common";
-import { buttonText } from "Texts/button";
 import {
-  verifyControlComponentAction,
-  randomString,
-} from "Support/utils/textInput";
-import {
-  openAccordion,
-  verifyAndModifyParameter,
-  openEditorSidebar,
-  verifyAndModifyToggleFx,
   addDefaultEventHandler,
-  verifyComponentValueFromInspector,
-  selectColourFromColourPicker,
-  verifyBoxShadowCss,
-  verifyLayout,
-  verifyTooltip,
-  editAndVerifyWidgetName,
-  verifyPropertiesGeneralAccordion,
-  verifyStylesGeneralAccordion,
-  randomNumber,
+  checkPaddingOfContainer,
   closeAccordions,
+  editAndVerifyWidgetName,
+  openAccordion,
+  openEditorSidebar,
+  randomNumber,
+  selectColourFromColourPicker,
+  verifyAndModifyParameter,
+  verifyBoxShadowCss,
+  verifyComponentValueFromInspector,
+  verifyContainerElements,
+  verifyLayout,
+  verifyStylesGeneralAccordion,
+  verifyTooltip,
+  verifyWidgetColorCss,
 } from "Support/utils/commonWidget";
 import {
-  selectCSA,
-  selectEvent,
-  addSupportCSAData,
-} from "Support/utils/events";
+  addAllInputFieldColors,
+  addAndVerifyAdditionalActions,
+  addCustomWidthOfLabel,
+  addValidations,
+  verifyAlignment,
+  verifyCustomWidthOfLabel,
+  verifyInputFieldColors,
+  verifyLabelStyleElements,
+} from "Support/utils/editor/inputFieldUtils";
+import {
+  addCSA,
+  randomString,
+  verifyCSA,
+} from "Support/utils/editor/textInput";
+import { commonWidgetText } from "Texts/common";
+import { textInputText } from "Texts/textInput";
 
 describe("Text Input", () => {
   beforeEach(() => {
     cy.apiLogin();
-    cy.apiCreateApp();
+    cy.apiCreateApp(`${fake.companyName}-Textinput-App`);
     cy.openApp();
     cy.dragAndDropWidget("Text Input", 500, 500);
   });
@@ -43,7 +49,6 @@ describe("Text Input", () => {
 
   it("should verify the properties of the text input widget", () => {
     const data = {};
-    data.appName = `${fake.companyName}-App`;
     data.widgetName = fake.widgetName;
     data.tooltipText = fake.randomSentence;
     data.minimumLength = randomNumber(1, 4);
@@ -51,12 +56,25 @@ describe("Text Input", () => {
     data.customText = randomString(12);
 
     openEditorSidebar(textInputText.defaultWidgetName);
-    closeAccordions(["Validation", "General", "Properties", "Layout"]);
-    editAndVerifyWidgetName(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
+    closeAccordions([
+      "Data",
       "Validation",
-      "General",
-      "Properties",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    editAndVerifyWidgetName(data.widgetName, [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    openAccordion("Data", [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
       "Events",
     ]);
     verifyAndModifyParameter(
@@ -74,11 +92,12 @@ describe("Text Input", () => {
 
     data.customText = fake.randomSentence;
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
+    openAccordion("Data", [
+      "Data",
       "Validation",
-      "General",
+      "Additional Actions",
+      "Devices",
       "Events",
-      "Properties",
     ]);
     verifyAndModifyParameter(
       commonWidgetText.labelPlaceHolder,
@@ -90,8 +109,8 @@ describe("Text Input", () => {
       .should("contain", data.customText);
 
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionEvents, ["Validation", "Layout"]);
-    addDefaultEventHandler(widgetValue(data.widgetName));
+    openAccordion(commonWidgetText.accordionEvents, ["Validation", "Devices"]);
+    addDefaultEventHandler(data.customText);
     cy.get(commonWidgetSelector.eventSelection).type("On Enter Pressed{Enter}");
 
     cy.clearAndType(
@@ -102,12 +121,9 @@ describe("Text Input", () => {
     cy.forceClickOnCanvas();
 
     cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
-    openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionValidation);
-    verifyAndModifyParameter(
-      commonWidgetText.labelRegex,
-      commonWidgetText.regularExpression
-    );
+
+    addValidations(data.widgetName, data);
+
     cy.clearAndType(
       commonWidgetSelector.draggableWidget(data.widgetName),
       data.customText
@@ -121,10 +137,7 @@ describe("Text Input", () => {
     cy.get(
       commonWidgetSelector.parameterInputField(commonWidgetText.labelRegex)
     ).clearCodeMirror();
-    verifyAndModifyParameter(
-      commonWidgetText.labelMinLength,
-      data.minimumLength
-    );
+
     cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(data.widgetName)
@@ -136,15 +149,11 @@ describe("Text Input", () => {
     cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
     cy.get(
       commonWidgetSelector.parameterInputField(commonWidgetText.labelMinLength)
-    ).clearCodeMirror();
-    verifyAndModifyParameter(
-      commonWidgetText.labelMaxLength,
-      data.maximumLength
-    );
+    ).clearAndTypeOnCodeMirror("0");
     cy.forceClickOnCanvas();
     cy.clearAndType(
       commonWidgetSelector.draggableWidget(data.widgetName),
-      data.customText
+      data.customText.toUpperCase().replaceAll(" ", "").replaceAll(".", "")
     );
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(data.widgetName)
@@ -152,33 +161,23 @@ describe("Text Input", () => {
       "have.text",
       commonWidgetText.maxLengthValidationError(data.maximumLength)
     );
-
-    verifyAndModifyParameter(
-      commonWidgetText.labelcustomValidadtion,
-      customValidation(data.widgetName, data.customText)
-    );
     cy.forceClickOnCanvas();
     cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(data.widgetName)
     ).verifyVisibleElement("have.text", data.customText);
-
-    cy.get(
-      commonWidgetSelector.accordion(commonWidgetText.accordionProperties)
-    ).click();
+    cy.forceClickOnCanvas();
+    openEditorSidebar(data.widgetName);
     cy.get(
       commonWidgetSelector.accordion(commonWidgetText.accordionValidation)
     ).click();
-    verifyPropertiesGeneralAccordion(data.widgetName, data.tooltipText);
+    addAndVerifyAdditionalActions(data.widgetName, data.tooltipText);
 
     openEditorSidebar(data.widgetName);
-    cy.get(
-      commonWidgetSelector.accordion(commonWidgetText.accordionProperties)
-    ).click();
     cy.get(
       commonWidgetSelector.accordion(commonWidgetText.accordionValidation)
     ).click();
-    verifyLayout(data.widgetName);
+    verifyLayout(data.widgetName, "Devices");
 
     cy.get(commonWidgetSelector.changeLayoutToDesktopButton).click();
     cy.get(
@@ -187,287 +186,180 @@ describe("Text Input", () => {
       )
     ).click();
 
+    openEditorSidebar(data.widgetName);
+    openAccordion("Validation", [
+      "Data",
+      "Validation",
+      "Additional Actions",
+      "Devices",
+      "Events",
+    ]);
+    cy.get(
+      commonWidgetSelector.parameterInputField(commonWidgetText.labelMinLength)
+    ).clearAndTypeOnCodeMirror("5");
+    cy.forceClickOnCanvas();
+    cy.waitForAutoSave();
+    openEditorSidebar(data.widgetName);
+
     cy.get(commonWidgetSelector.widgetDocumentationLink).should(
       "have.text",
       textInputText.textInputDocumentationLink
     );
-    data.customText = fake.firstName;
-    verifyControlComponentAction(data.widgetName, data.customText);
+
+    cy.openInCurrentTab(commonWidgetSelector.previewButton);
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
+      .invoke("attr", "placeholder")
+      .should("contain", data.customText);
+
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      `${data.customText}{Enter}`
+    );
+    cy.verifyToastMessage(commonSelectors.toastMessage, data.customText);
+    cy.forceClickOnCanvas();
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      data.customText
+    );
+    cy.forceClickOnCanvas();
+    // cy.get(
+    //   commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    // ).verifyVisibleElement("have.text", commonWidgetText.regexValidationError);
+
+    cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+
+    cy.forceClickOnCanvas();
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement(
+      "have.text",
+      commonWidgetText.minLengthValidationError("5")
+    );
+    cy.clearAndType(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      data.customText.toUpperCase().replaceAll(" ", "").replaceAll(".", "")
+    );
+    cy.get(
+      commonWidgetSelector.validationFeedbackMessage(data.widgetName)
+    ).verifyVisibleElement(
+      "have.text",
+      commonWidgetText.maxLengthValidationError(data.maximumLength)
+    );
+    cy.forceClickOnCanvas();
+    verifyTooltip(
+      commonWidgetSelector.draggableWidget(data.widgetName),
+      data.tooltipText
+    );
   });
+
   it("should verify the styles of the text input widget", () => {
     const data = {};
     data.appName = `${fake.companyName}-App`;
     data.colourHex = fake.randomRgbaHex;
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
+    data.bgColor = fake.randomRgba;
+    data.borderColor = fake.randomRgba;
+    data.textColor = fake.randomRgba;
+    data.errorTextColor = fake.randomRgba;
+    data.iconColor = fake.randomRgba;
+    data.labelColor = fake.randomRgba;
+    ata.widgetName = textInputText.defaultWidgetName;
 
     openEditorSidebar(textInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
+    addAllInputFieldColors(data);
 
-    verifyAndModifyToggleFx(
-      commonWidgetText.parameterVisibility,
-      commonWidgetText.codeMirrorLabelTrue
-    );
-    cy.get(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
-    ).should("not.be.visible");
+    cy.clearAndType('[data-cy="border-radius-input"]', "20");
+    cy.get('[data-cy="icon-visibility-button"]').click();
 
-    cy.get(
-      commonWidgetSelector.parameterTogglebutton(
-        commonWidgetText.parameterVisibility
-      )
-    ).click();
-
-    verifyAndModifyToggleFx(
-      commonWidgetText.parameterDisable,
-      commonWidgetText.codeMirrorLabelFalse
-    );
-    cy.waitForAutoSave();
-    cy.get("[data-cy='draggable-widget-textinput1']")
-      .parent('[class="text-input true"]')
-      .invoke("attr", "data-disabled")
-      .and("contain", "true");
-
-    cy.get(
-      commonWidgetSelector.parameterTogglebutton(
-        commonWidgetText.parameterDisable
-      )
-    ).click();
-
-    verifyAndModifyParameter(
-      commonWidgetText.parameterBorderRadius,
-      commonWidgetText.borderRadiusInput
-    );
-
-    cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
-    cy.get(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
-    ).should("have.css", "border-radius", "20px");
-
-    verifyStylesGeneralAccordion(
-      textInputText.defaultWidgetName,
-      data.boxShadowParam,
-      data.colourHex,
-      data.boxShadowColor,
-      4
-    );
-  });
-
-  it("should verify the app preview", () => {
-    const data = {};
-    data.appName = `${fake.companyName}-App`;
-    data.widgetName = fake.widgetName;
-    data.tooltipText = fake.randomSentence;
-    data.maxLengthErrText = fake.randomSentence;
-    data.colourHex = fake.randomRgbaHex;
-    data.boxShadowColor = fake.randomRgba;
-    data.boxShadowParam = fake.boxShadowParam;
-    data.minimumLength = randomNumber(1, 4);
-    data.maximumLength = randomNumber(8, 10);
-    data.customText = randomString(12);
-    data.maxLengthText = randomString(data.maximumLength);
-
-    openEditorSidebar(textInputText.defaultWidgetName);
-    verifyAndModifyParameter(
-      commonWidgetText.labelDefaultValue,
-      data.customText
-    );
-
-    verifyAndModifyParameter(
-      commonWidgetText.labelPlaceHolder,
-      data.customText
-    );
-
-    openAccordion(commonWidgetText.accordionEvents, ["Validation", "Layout"]);
-    addDefaultEventHandler(widgetValue(textInputText.defaultWidgetName));
-    cy.get(commonWidgetSelector.eventSelection).type("On Enter Pressed{Enter}");
-
-    openAccordion(commonWidgetText.accordionValidation);
-    verifyAndModifyParameter(
-      commonWidgetText.labelRegex,
-      commonWidgetText.regularExpression
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelMinLength,
-      data.minimumLength
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelMaxLength,
-      data.maximumLength
-    );
-    verifyAndModifyParameter(
-      commonWidgetText.labelcustomValidadtion,
-      customValidation(textInputText.defaultWidgetName, data.customText)
-    );
-    verifyPropertiesGeneralAccordion(
-      textInputText.defaultWidgetName,
-      data.tooltipText
-    );
-
-    verifyControlComponentAction(
-      textInputText.defaultWidgetName,
-      data.customText
-    );
-
-    openEditorSidebar(textInputText.defaultWidgetName);
-    cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-
-    verifyAndModifyParameter(
-      commonWidgetText.parameterBorderRadius,
-      commonWidgetText.borderRadiusInput
-    );
-    verifyStylesGeneralAccordion(
-      textInputText.defaultWidgetName,
-      data.boxShadowParam,
-      data.colourHex,
-      data.boxShadowColor,
-      4
-    );
-
-    cy.waitForAutoSave();
-    cy.openInCurrentTab(commonWidgetSelector.previewButton);
-
-    cy.get(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
-    ).verifyVisibleElement("have.value", data.customText);
-    cy.get(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
-    )
-      .invoke("attr", "placeholder")
-      .should("contain", data.customText);
-
-    cy.get(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
-    )
-      .type(`{selectAll}{backspace}{enter}`)
-      .type(data.customText);
     cy.forceClickOnCanvas();
-    cy.get(
-      commonWidgetSelector.validationFeedbackMessage(
-        textInputText.defaultWidgetName
-      )
-    ).verifyVisibleElement("have.text", commonWidgetText.regexValidationError);
-    cy.get(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
-    ).clear();
-    cy.get(
-      commonWidgetSelector.validationFeedbackMessage(
-        textInputText.defaultWidgetName
-      )
-    ).verifyVisibleElement(
-      "have.text",
-      commonWidgetText.minLengthValidationError(data.minimumLength)
-    );
-
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName),
-      data.customText.toUpperCase()
-    );
-    cy.get(
-      commonWidgetSelector.validationFeedbackMessage(
-        textInputText.defaultWidgetName
-      )
-    ).verifyVisibleElement(
-      "have.text",
-      commonWidgetText.maxLengthValidationError(data.maximumLength)
-    );
-
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName),
-      `${data.maxLengthText.toUpperCase()}{Enter}`
-    );
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      data.maxLengthText.toUpperCase()
-    );
-    cy.get(
-      commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
-    ).should("have.text", data.maxLengthText.toUpperCase());
-
     cy.get(
       commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
     ).should("have.css", "border-radius", "20px");
 
+    verifyInputFieldColors("textinput1", data);
+
+    verifyStylesGeneralAccordion(
+      textInputText.defaultWidgetName,
+      data.boxShadowParam,
+      data.colourHex,
+      data.boxShadowColor,
+      4
+    );
+
+    openEditorSidebar(textInputText.defaultWidgetName);
+    cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
+
+    verifyContainerElements();
+    checkPaddingOfContainer(textInputText.defaultWidgetName, 1);
+    cy.get('[data-cy="togglr-button-none"]').click();
+    checkPaddingOfContainer(textInputText.defaultWidgetName, 0);
+
+    verifyLabelStyleElements();
+    verifyAlignment(textInputText.defaultWidgetName, "sideLeft");
+    cy.get('[data-cy="togglr-button-top"]').click();
+    verifyAlignment(textInputText.defaultWidgetName, "topLeft");
+    cy.get('[data-cy="togglr-button-right"]').click();
+    verifyAlignment(textInputText.defaultWidgetName, "topRight");
+    cy.get('[data-cy="togglr-button-side"]').click();
+    verifyAlignment(textInputText.defaultWidgetName, "sideRight");
+    cy.get('[data-cy="togglr-button-left"]').click();
+    verifyAlignment(textInputText.defaultWidgetName, "sideLeft");
+    addCustomWidthOfLabel("50");
+    verifyCustomWidthOfLabel(textInputText.defaultWidgetName, "50");
+    selectColourFromColourPicker(
+      "Text",
+      data.labelColor,
+      0,
+      commonWidgetSelector.colourPickerParent,
+      "0"
+    );
+    verifyWidgetColorCss(
+      `[data-cy="label-${textInputText.defaultWidgetName}"]>label`,
+      "color",
+      data.labelColor,
+      true
+    );
+
+    cy.openInCurrentTab(commonWidgetSelector.previewButton);
+    verifyWidgetColorCss(
+      `[data-cy="label-${textInputText.defaultWidgetName}"]>label`,
+      "color",
+      data.labelColor,
+      true
+    );
+
+    verifyAlignment(textInputText.defaultWidgetName, "sideLeft");
+    verifyCustomWidthOfLabel(textInputText.defaultWidgetName, "50");
+    verifyInputFieldColors("textinput1", data);
+
     verifyBoxShadowCss(
       textInputText.defaultWidgetName,
       data.boxShadowColor,
       data.boxShadowParam
     );
 
-    verifyTooltip(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName),
-      data.tooltipText
-    );
+    cy.get(
+      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
+    ).should("have.css", "border-radius", "20px");
   });
 
+  it.skip("should verify the app preview", () => {});
+
   it("should verify CSA", () => {
     const data = {};
     data.customText = randomString(12);
+    data.widgetName = textInputText.defaultWidgetName;
 
-    cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 200);
-    selectEvent("On click", "Control Component");
-    selectCSA("textinput1", "Visibility");
+    addCSA(data);
+    verifyCSA(data);
 
-    cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget("Text input", 50, 50);
-    selectEvent("On change", "Control Component");
-    selectCSA("textinput1", "Set text", "500");
-    addSupportCSAData("text", "{{components.textinput2.value");
-
-    cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 50, 200);
-    selectEvent("On click", "Control Component");
-    selectCSA("textinput1", "Clear", "500");
-
-    cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 50, 400);
-    selectEvent("On click", "Control Component");
-    selectCSA("textinput1", "Disable", "500");
-    cy.get('[data-cy="Value-toggle-button"]').click();
-
-    cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 300, 50);
-    selectEvent("On click", "Control Component");
-    selectCSA("textinput1", "Set blur", "500");
-
-    cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 300, 200);
-    selectEvent("On click", "Control Component");
-    selectCSA("textinput1", "Set focus");
-
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget("textinput2"),
-      data.customText
-    );
-    cy.get(
-      commonWidgetSelector.draggableWidget("textinput1")
-    ).verifyVisibleElement("have.value", data.customText);
-
-    cy.get(commonWidgetSelector.draggableWidget("button2")).click();
-    cy.get(
-      commonWidgetSelector.draggableWidget("textinput1")
-    ).verifyVisibleElement("have.value", "");
-
-    cy.get(commonWidgetSelector.draggableWidget("button5")).click();
-    cy.realType(data.customText);
-    cy.get(
-      commonWidgetSelector.draggableWidget("textinput1")
-    ).verifyVisibleElement("have.value", data.customText);
-    cy.get(commonWidgetSelector.draggableWidget("button4")).click();
-    cy.realType("not working");
-    cy.get(
-      commonWidgetSelector.draggableWidget("textinput1")
-    ).verifyVisibleElement("have.value", data.customText);
-
-    cy.get(commonWidgetSelector.draggableWidget("button3")).click();
-    cy.get(commonWidgetSelector.draggableWidget("textinput1"))
-      .parent()
-      .should("have.attr", "data-disabled", "true");
-
-    cy.get(commonWidgetSelector.draggableWidget("button1")).click();
-    cy.get(commonWidgetSelector.draggableWidget("textinput1")).should(
-      "not.be.visible"
-    );
+    cy.openInCurrentTab(commonWidgetSelector.previewButton);
+    verifyCSA(data);
   });
 });

cypress-tests/cypress/e2e/exportImport/export.cy.js

@@ -42,7 +42,8 @@ describe("App Export Functionality", () => {
       .should("be.visible")
       .invoke("text")
       .then(() => {
-        cy.get(commonSelectors.editorPageLogo).should("be.visible").click();
+        cy.get(commonSelectors.editorPageLogo).should("be.visible");
+        cy.backToApps();
         cy.get(commonSelectors.appHeaderLable).should("be.visible");
         cy.reload();
         selectAppCardOption(
@@ -99,7 +100,7 @@ describe("App Export Functionality", () => {
       .should("be.visible")
       .invoke("text")
       .then(() => {
-        cy.get(commonSelectors.editorPageLogo).click();
+        cy.backToApps();
         cy.get(commonSelectors.appHeaderLable).should("be.visible");
         selectAppCardOption(
           data.appName1,

cypress-tests/cypress/e2e/exportImport/import.cy.js

@@ -87,7 +87,8 @@ describe("App Import Functionality", () => {
       data.appName
     );
     cy.waitForAutoSave();
-    cy.get(commonSelectors.editorPageLogo).should("be.visible").click();
+    cy.get(commonSelectors.editorPageLogo).should("be.visible");
+    cy.backToApps();
     cy.get(commonSelectors.appHeaderLable).should("be.visible");
     cy.reload();
     selectAppCardOption(
@@ -141,7 +142,7 @@ describe("App Import Functionality", () => {
       cy.exec("cd ./cypress/downloads/ && rm -rf *");
     });
     cy.renameApp(data.appReName);
-    cy.get(commonSelectors.editorPageLogo).click();
+    cy.backToApps();
     cy.get(commonSelectors.appHeaderLable).should("be.visible");
     cy.reload();
     navigateToAppEditor(data.appReName);
@@ -159,7 +160,7 @@ describe("App Import Functionality", () => {
           .invoke("text")
           .then((versionText) => {
             cy.log(versionText);
-            cy.get(commonSelectors.editorPageLogo).click();
+            cy.backToApps();
             cy.get(commonSelectors.appHeaderLable).should("be.visible");
             cy.reload();
             selectAppCardOption(

cypress-tests/cypress/e2e/regressionSuite/appBuilder/queryPanel/queryEditorRegression.cy.js

@@ -23,7 +23,7 @@ describe("Query Editor", () => {
   it("should verify Elements on query editor", () => {
     cy.apiCreateApp();
     cy.openApp();
-    verifyElemtsNoGds();
+    // verifyElemtsNoGds();
     verifyElemtsWithGds("cypress-psql");
     cy.apiDeleteDS(`cypress-psql`);
   });

cypress-tests/cypress/e2e/workspace/appCreate.cy.js

@@ -8,15 +8,18 @@ import { importText } from "Texts/exportImport";
 
 describe("App creation", () => {
     const data = {};
-    data.appName = `${fake.companyName}-App`;
-    data.rename = `New-${data.appName}`;
-    data.cloneAppName = `cloned-${data.appName}`;
     const appFile = "cypress/fixtures/templates/test-app.json";
 
     beforeEach(() => {
         cy.defaultWorkspaceLogin();
+        cy.skipWalkthrough();
     });
+
     it("Should verify create, rename and clone app flow", () => {
+        data.appName = `${fake.companyName}-App`;
+        data.rename = `New-${data.appName}`;
+        data.cloneAppName = `cloned-${data.appName}`;
+
         cy.get(commonSelectors.appCreateButton).click();
         cy.get(commonSelectors.createAppTitle).verifyVisibleElement(
             "have.text",
@@ -190,6 +193,8 @@ describe("App creation", () => {
         cy.get(commonSelectors.createAppButton).should("be.disabled");
     });
     it("Should verify the import app flow", () => {
+        data.appName = `${fake.companyName}-App`;
+
         cy.get(importSelectors.dropDownMenu).click();
         cy.get(importSelectors.importOptionInput).eq(0).selectFile(appFile, {
             force: true,
@@ -269,7 +274,7 @@ describe("App creation", () => {
         );
         cy.get(commonSelectors.appNameInput).verifyVisibleElement(
             "have.value",
-            "Customer dashboard"
+            "Applicant tracking system"
         );
         cy.get(commonSelectors.appNameInfoLabel).verifyVisibleElement(
             "have.text",

cypress-tests/cypress/e2e/workspace/bulkUserUpload.cy.js

@@ -10,9 +10,6 @@ import { userSignUp } from "Support/utils/onboarding";
 
 describe("Bulk user upload", () => {
   const data = {};
-  data.firstName = fake.firstName;
-  data.email = fake.email.toLowerCase();
-
   const without_name = "cypress/fixtures/bulkUser/without_name - Sheet1.csv";
   const without_email = "cypress/fixtures/bulkUser/without_email - Sheet1.csv";
   const without_group = "cypress/fixtures/bulkUser/without_group - Sheet1.csv";
@@ -33,16 +30,17 @@ describe("Bulk user upload", () => {
     "cypress/fixtures/bulkUser/without_lastname - Sheet1.csv";
   const invite_users = "cypress/fixtures/bulkUser/invite_users - Sheet1 .csv";
 
-  before(() => {
-    userSignUp(data.firstName, data.email, "Test");
-    common.logout();
-  });
-  beforeEach(() => {
-    cy.login(data.email, usersText.password);
-    common.navigateToManageUsers();
-  });
-
   it("Verfiy bulk user upload invalid files", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase();
+    data.workspaceName = data.firstName.toLowerCase();
+
+    cy.apiLogin()
+    cy.apiCreateWorkspace(data.firstName, data.workspaceName);
+    cy.visit(`${data.workspaceName}`)
+
+    common.navigateToManageUsers();
+
     cy.get(usersSelector.buttonAddUsers).click();
     cy.get(usersSelector.buttonUploadCsvFile).click();
 
@@ -122,6 +120,15 @@ describe("Bulk user upload", () => {
   });
 
   it("Verify bulk user upload functionality", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase();
+    data.workspaceName = data.firstName.toLowerCase();
+
+    cy.apiLogin()
+    cy.apiCreateWorkspace(data.firstName, data.workspaceName);
+    cy.visit(`${data.workspaceName}`)
+    common.navigateToManageUsers();
+
     cy.get(usersSelector.buttonAddUsers).click();
     cy.get(usersSelector.buttonUploadCsvFile).click();
 
@@ -137,7 +144,7 @@ describe("Bulk user upload", () => {
       force: true,
     });
     cy.get(usersSelector.buttonUploadUsers).click();
-    cy.wait(1000);
+    cy.wait(10000);
     cy.get(".go2072408551")
       .should("be.visible")
       .and("have.text", "250 users are being added");
@@ -153,4 +160,4 @@ describe("Bulk user upload", () => {
     cy.get(groupsSelector.usersLink).click();
     cy.contains("test12@gmail.com").should("be.visible");
   });
-});
+});

cypress-tests/cypress/e2e/workspace/dashboard.cy.js

@@ -32,12 +32,12 @@ describe("dashboard", () => {
   data.updatedFolderName = `new-${data.folderName}`;
 
   beforeEach(() => {
-    cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
-    // cy.intercept("GET", "/api/apps").as("appEditor");
     cy.intercept("GET", "/api/library_apps").as("appLibrary");
+    cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
+    cy.skipWalkthrough();
   });
 
-  before(() => {
+  it("should verify the elements on empty dashboard", () => {
     cy.intercept("GET", "/api/apps?page=1&folder=&searchKey=", {
       fixture: "intercept/emptyDashboard.json",
     }).as("emptyDashboard");
@@ -52,12 +52,7 @@ describe("dashboard", () => {
     cy.wait("@emptyDashboard");
     cy.wait("@folders");
     cy.wait("@version");
-    // deleteDownloadsFolder();
-    cy.visit('/my-workspace')
 
-  });
-
-  it("should verify the elements on empty dashboard", () => {
     cy.get(commonSelectors.homePageLogo).should("be.visible");
     cy.get(commonSelectors.workspaceName).verifyVisibleElement(
       "have.text",
@@ -111,10 +106,19 @@ describe("dashboard", () => {
       .should("have.attr", "class")
       .and("contain", "bg-light-gray");
 
-    cy.get(commonSelectors.profileSettings).should("be.visible").click();
-    cy.get(profileSelector.profileLink).verifyVisibleElement(
+    cy.wait(500);
+    cy.get(commonSelectors.settingsIcon).click();
+    cy.get(commonSelectors.marketplaceOption).verifyVisibleElement(
       "have.text",
-      profileText.profileLink
+      "Marketplace"
+    );
+    cy.get(commonSelectors.workspaceSettings).verifyVisibleElement(
+      "have.text",
+      "Workspace settings"
+    );
+    cy.get(commonSelectors.profileSettings).verifyVisibleElement(
+      "have.text",
+      "Profile settings"
     );
     cy.get(commonSelectors.logoutLink).verifyVisibleElement(
       "have.text",
@@ -157,13 +161,15 @@ describe("dashboard", () => {
 
     cy.get(dashboardSelector.appTemplateRow).should("be.visible");
     cy.reload();
-    verifyTooltip(commonSelectors.dashboardIcon, "Dashboard");
-    verifyTooltip(commonSelectors.databaseIcon, "Database");
+    verifyTooltip(commonSelectors.dashboardIcon, "Apps");
+    verifyTooltip(commonSelectors.databaseIcon, "ToolJet Database");
     verifyTooltip(commonSelectors.globalDataSourceIcon, "Data sources");
-    verifyTooltip(commonSelectors.workspaceSettingsIcon, "Workspace settings");
+    verifyTooltip(
+      '[data-cy="icon-workspace-constants"]',
+      "Workspace constants"
+    );
     verifyTooltip(commonSelectors.notificationsIcon, "Comment notifications");
     verifyTooltip(dashboardSelector.modeToggle, "Mode");
-    verifyTooltip(commonSelectors.avatarImage, "Profile");
   });
 
   it("Should verify app card elements and app card operations", () => {
@@ -172,7 +178,7 @@ describe("dashboard", () => {
     cy.openApp();
     cy.dragAndDropWidget("Table", 250, 250);
 
-    cy.get(commonSelectors.editorPageLogo).click();
+    cy.backToApps();
 
     cy.wait(500);
     cy.get(commonSelectors.appCard(data.appName))
@@ -243,6 +249,7 @@ describe("dashboard", () => {
       .contains(data.appName)
       .should("be.visible");
 
+    cy.wait(2000);
     viewAppCardOptions(data.appName);
 
     cy.get(commonSelectors.appCardOptions(commonText.removeFromFolderOption))
@@ -275,11 +282,13 @@ describe("dashboard", () => {
     viewAppCardOptions(data.appName);
     cy.get(commonSelectors.appCardOptions(commonText.cloneAppOption)).click();
     cy.get('[data-cy="clone-app"]').click();
-    cy.get('.go3958317564').should('be.visible').and('have.text', dashboardText.appClonedToast)
+    cy.get(".go3958317564")
+      .should("be.visible")
+      .and("have.text", dashboardText.appClonedToast);
     cy.wait(3000);
     cy.renameApp(data.cloneAppName);
     cy.dragAndDropWidget("button", 25, 25);
-    cy.get(commonSelectors.editorPageLogo).click();
+    cy.backToApps();
     cy.wait("@appLibrary");
     cy.wait(1000);
     cy.reloadAppForTheElement(data.cloneAppName);
@@ -330,12 +339,13 @@ describe("dashboard", () => {
   });
 
   it("Should verify the app CRUD operation", () => {
+    cy.skipWalkthrough();
     data.appName = `${fake.companyName}-App`;
     cy.defaultWorkspaceLogin();
     cy.createApp(data.appName);
     cy.dragAndDropWidget("Button", 450, 450);
 
-    cy.get(commonSelectors.editorPageLogo).click();
+    cy.backToApps();
 
     cy.get(commonSelectors.appCard(data.appName)).should(
       "contain.text",
@@ -344,7 +354,7 @@ describe("dashboard", () => {
 
     navigateToAppEditor(data.appName);
     cy.get(commonSelectors.canvas).should("contain", "Button");
-    cy.get(commonSelectors.editorPageLogo).click();
+    cy.backToApps();
     cy.wait("@appLibrary");
 
     cy.deleteApp(data.appName);
@@ -361,7 +371,7 @@ describe("dashboard", () => {
     cy.createApp(data.appName);
     cy.dragAndDropWidget("Button", 100, 100);
 
-    cy.get(commonSelectors.editorPageLogo).click();
+    cy.backToApps();
 
     cy.get(commonSelectors.createNewFolderButton).click();
     verifyModal(

cypress-tests/cypress/e2e/workspace/errorPage.cy.js

@@ -4,31 +4,22 @@ import { groupsSelector } from "Selectors/manageGroups";
 import { fake } from "Fixtures/fake";
 import {
     logout,
-    navigateToAppEditor,
     navigateToManageGroups,
     releaseApp,
 } from "Support/utils/common";
 import { commonText } from "Texts/common";
-import { inviteUser } from "Support/utils/manageUsers";
-import { userSignUp } from "Support/utils/onboarding";
 
 describe("Redirection error pages", () => {
     const data = {};
-    data.appName = `${fake.companyName} App`;
-    data.firstName = fake.firstName;
-    data.email = fake.email.toLowerCase();
-    data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
 
     beforeEach(() => {
         cy.apiLogin();
     });
-    before(() => {
-        cy.apiLogin();
-        inviteUser(data.firstName, data.email);
-        logout();
-    });
 
     it("Verify error modal in case of invalid app URL", () => {
+        data.lastName = fake.lastName.toLowerCase();
+        data.appName = `${fake.companyName} App`;
+
         cy.visit(`/applications/${data.lastName}`);
         cy.get(commonSelectors.modalHeader).verifyVisibleElement(
             "have.text",
@@ -50,14 +41,16 @@ describe("Redirection error pages", () => {
         cy.get(commonSelectors.backToHomeButton).click();
         cy.get(commonSelectors.workEmailLabel).should("be.visible");
 
-        cy.apiLogin(data.email, "password");
+        cy.apiLogin("test@tooljet.com", "password");
         cy.visit(`/applications/${data.lastName}`);
     });
 
     it("Verify error message in case of restricted access", () => {
+        data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
         data.appName = `${fake.companyName} App`;
         cy.apiCreateApp(data.appName);
         cy.openApp();
+        cy.wait(1000);
         releaseApp();
 
         cy.get(commonWidgetSelector.shareAppButton).click();
@@ -65,7 +58,7 @@ describe("Redirection error pages", () => {
         cy.wait(1000);
         cy.logoutApi();
 
-        cy.apiLogin(data.email, "password");
+        cy.apiLogin("test@tooljet.com", "password");
         cy.visit(`/applications/${data.slug}`);
 
         cy.get(commonSelectors.modalHeader).verifyVisibleElement(
@@ -86,7 +79,7 @@ describe("Redirection error pages", () => {
         cy.get(commonSelectors.pageSectionHeader).should("be.visible");
     });
 
-    it("Verify error modal for app url of unreleased apps", () => {
+    it.only("Verify error modal for app url of unreleased apps", () => {
         data.appName = `${fake.companyName} App`;
         data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
 
@@ -104,21 +97,27 @@ describe("Redirection error pages", () => {
         );
         cy.get(commonSelectors.modalDescription).verifyVisibleElement(
             "have.text",
-            'The app URL is currently unavailable because the app has not been released. Please either release it or contact admin for access.'
+            "The app URL is currently unavailable because the app has not been released. Please either release it or contact admin for access."
+        );
+        cy.get('[data-cy="open-app-button"]').verifyVisibleElement(
+            "have.text",
+            "Open app"
         );
-        cy.get('[data-cy="open-app-button"]').verifyVisibleElement("have.text", "Open app")
 
         cy.get(commonSelectors.backToHomeButton).verifyVisibleElement(
             "have.text",
             "Back to home page"
         );
 
-        cy.url().should("eq", `http://localhost:8082/error/url-unavailable?appSlug=${data.slug}`);
+        cy.url().should(
+            "eq",
+            `http://localhost:8082/error/url-unavailable?appSlug=${data.slug}`
+        );
         cy.get(commonSelectors.backToHomeButton).click();
         cy.get(commonSelectors.pageSectionHeader).should("be.visible");
 
         cy.logoutApi();
-        cy.apiLogin(data.email, "password");
+        cy.apiLogin("test@tooljet.com", "password");
         cy.wait(500);
 
         cy.visit(`http://localhost:8082/applications/${data.slug}`);
@@ -143,9 +142,10 @@ describe("Redirection error pages", () => {
 
         cy.defaultWorkspaceLogin();
         navigateToManageGroups();
+        cy.get(groupsSelector.appsLink).click();
         cy.wait(1000);
         cy.get(groupsSelector.appSearchBox).click();
-        cy.wait(500);
+        cy.wait(1000);
         cy.get(groupsSelector.searchBoxOptions).contains(data.appName).click();
         cy.get(groupsSelector.selectAddButton).click();
         cy.get("table").contains("td", data.appName);
@@ -156,7 +156,7 @@ describe("Redirection error pages", () => {
             });
 
         cy.logoutApi();
-        cy.apiLogin(data.email, "password");
+        cy.apiLogin("test@tooljet.com", "password");
         cy.wait(500);
 
         cy.visit(`http://localhost:8082/applications/${data.slug}`);
@@ -166,14 +166,17 @@ describe("Redirection error pages", () => {
         );
         cy.get(commonSelectors.modalDescription).verifyVisibleElement(
             "have.text",
-            'The app URL is currently unavailable because the app has not been released. Please either release it or contact admin for access.'
+            "The app URL is currently unavailable because the app has not been released. Please either release it or contact admin for access."
         );
         cy.get(commonSelectors.backToHomeButton).verifyVisibleElement(
             "have.text",
             "Back to home page"
         );
-        cy.url().should("eq", `http://localhost:8082/error/url-unavailable?appSlug=${data.slug}`);
+        cy.url().should(
+            "eq",
+            `http://localhost:8082/error/url-unavailable?appSlug=${data.slug}`
+        );
         cy.get(commonSelectors.backToHomeButton).click();
         cy.get(commonSelectors.pageSectionHeader).should("be.visible");
     });
-});
+});

cypress-tests/cypress/e2e/workspace/manageGroups.cy.js

@@ -10,11 +10,12 @@ const groupName = fake.firstName.replaceAll("[^A-Za-z]", "");
 const newGroupname = `New ${groupName}`;
 
 describe("Manage Groups", () => {
-  before(() => {
+  beforeEach(() => {
     cy.defaultWorkspaceLogin();
-    permissions.reset();
+    permissions.reset("all_users");
   });
   it("Should verify the elements and functionalities on manage groups page", () => {
+    cy.removeAssignedApps();
     common.navigateToManageGroups();
     cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
       expect($el.contents().first().text().trim()).to.eq("Workspace settings");
@@ -55,12 +56,13 @@ describe("Manage Groups", () => {
       groupName
     );
 
+    groups.OpenGroupCardOption(groupName);
     cy.get(groupsSelector.updateGroupNameLink(groupName)).verifyVisibleElement(
       "have.text",
       groupsText.editGroupNameButton
     );
 
-    cy.get(groupsSelector.deleteGroupLink(groupName)).verifyVisibleElement(
+    cy.get(groupsSelector.deleteGroupOption).verifyVisibleElement(
       "have.text",
       groupsText.deleteGroupButton
     );
@@ -95,19 +97,9 @@ describe("Manage Groups", () => {
       "have.text",
       groupsText.permissionstableHedaer
     );
-
-    cy.get("body").then(($title) => {
-      if ($title.text().includes(groupsText.helperTextNoAppsAdded)) {
-        cy.get(groupsSelector.helperTextNoAppsAdded).verifyVisibleElement(
-          "have.text",
-          groupsText.helperTextNoAppsAdded
-        );
-        cy.get(groupsSelector.helperTextPermissions).verifyVisibleElement(
-          "have.text",
-          groupsText.helperTextPermissions
-        );
-      }
-    });
+    cy.get(groupsSelector.helperTextNoAppsAdded)
+      .eq(0)
+      .verifyVisibleElement("have.text", groupsText.helperTextNoAppsAdded);
 
     cy.get(groupsSelector.searchBox).should("be.visible");
 
@@ -205,8 +197,9 @@ describe("Manage Groups", () => {
       newGroupname
     );
     cy.get(groupsSelector.groupLink(newGroupname)).click();
+    groups.OpenGroupCardOption(newGroupname);
 
-    cy.get(groupsSelector.deleteGroupLink(newGroupname)).click();
+    cy.get(groupsSelector.deleteGroupOption).click();
     cy.get(groupsSelector.confirmText).verifyVisibleElement(
       "have.text",
       groupsText.confirmText
@@ -221,7 +214,9 @@ describe("Manage Groups", () => {
     );
     cy.get(commonSelectors.buttonSelector("Cancel")).click();
 
-    cy.get(groupsSelector.deleteGroupLink(newGroupname)).click();
+    cy.get(groupsSelector.groupLink(newGroupname)).click();
+    groups.OpenGroupCardOption(newGroupname);
+    cy.get(groupsSelector.deleteGroupOption).click();
     cy.get(commonSelectors.buttonSelector("Yes")).click();
   });
 });

cypress-tests/cypress/e2e/workspace/manageSSO.cy.js

@@ -161,10 +161,10 @@ describe("Manage SSO for multi workspace", () => {
   if (envVar === "Community") {
     it("Should verify the workspace login page", () => {
       data.workspaceName = fake.companyName.toLowerCase();
-      cy.apiLogin()
-      cy.apiCreateWorkspace(data.workspaceName, data.workspaceName)
-      cy.visit(data.workspaceName)
-      cy.wait(500)
+      cy.apiLogin();
+      cy.apiCreateWorkspace(data.workspaceName, data.workspaceName);
+      cy.visit(data.workspaceName);
+      cy.wait(500);
       common.navigateToManageSSO();
       SSO.visitWorkspaceLoginPage();
       SSO.workspaceLoginPageElements(data.workspaceName);
@@ -246,10 +246,10 @@ describe("Manage SSO for multi workspace", () => {
       cy.notVisible(commonSelectors.loginButton);
 
       data.workspaceName = fake.companyName.toLowerCase();
-      cy.apiLogin()
-      cy.apiCreateWorkspace(data.workspaceName, data.workspaceName)
-      cy.visit(data.workspaceName)
-      cy.wait(500)
+      cy.apiLogin();
+      cy.apiCreateWorkspace(data.workspaceName, data.workspaceName);
+      cy.visit(data.workspaceName);
+      cy.wait(500);
       SSO.disableDefaultSSO();
       cy.get(ssoSelector.passwordEnableToggle).uncheck();
       cy.get(commonSelectors.buttonSelector("Yes")).click();

cypress-tests/cypress/e2e/workspace/manageUsers.cy.js

@@ -9,10 +9,9 @@ import { dashboardSelector } from "Selectors/dashboard";
 import { updateWorkspaceName } from "Support/utils/userPermissions";
 import { groupsSelector } from "Selectors/manageGroups";
 import { groupsText } from "Texts/manageGroups";
+import { addNewUser } from "../../support/utils/onboarding";
 
 const data = {};
-data.firstName = fake.firstName;
-data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
 data.groupName = fake.firstName.replaceAll("[^A-Za-z]", "");
 
 describe("Manage Users", () => {
@@ -25,6 +24,8 @@ describe("Manage Users", () => {
     userId,
     url = "";
   it("Should verify the Manage users page", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
     common.navigateToManageUsers();
 
     users.manageUsersElements();
@@ -73,10 +74,15 @@ describe("Manage Users", () => {
   });
 
   it("Should verify the confirm invite page and new user account", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+    cy.removeAssignedApps();
+
     common.navigateToManageUsers();
     users.fillUserInviteForm(data.firstName, data.email);
     cy.get(usersSelector.buttonInviteUsers).click();
-    users.fetchAndVisitInviteLink(data.email)
+    cy.wait(2000);
+    users.fetchAndVisitInviteLink(data.email);
     users.confirmInviteElements();
 
     cy.clearAndType(commonSelectors.passwordInputField, "pass");
@@ -102,14 +108,18 @@ describe("Manage Users", () => {
   });
 
   it("Should verify the user archive functionality", () => {
-    common.navigateToManageUsers();
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
 
+    addNewUser(data.firstName, data.email);
+    cy.logoutApi();
+
+    cy.defaultWorkspaceLogin();
+    common.navigateToManageUsers();
     common.searchUser(data.email);
-    cy.contains("td", data.email)
-      .parent()
-      .within(() => {
-        cy.get("td button").click();
-      });
+    cy.wait(1000);
+    cy.get(usersSelector.userActionButton).click();
+    cy.get('[data-cy="archive-button"]').click();
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
       usersText.archivedToast
@@ -135,11 +145,9 @@ describe("Manage Users", () => {
     cy.defaultWorkspaceLogin();
     common.navigateToManageUsers();
     common.searchUser(data.email);
-    cy.contains("td", data.email)
-      .parent()
-      .within(() => {
-        cy.get("td button").click();
-      });
+    cy.wait(1000);
+    cy.get(usersSelector.userActionButton).click();
+    cy.get('[data-cy="archive-button"]').click();
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
       usersText.unarchivedToast
@@ -201,33 +209,38 @@ describe("Manage Users", () => {
   it("Should verify the user onboarding with groups", () => {
     data.firstName = fake.firstName;
     data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+    const groupNames = ["All users", "Admin"];
+
     common.navigateToManageUsers();
 
     users.fillUserInviteForm(data.firstName, data.email);
     cy.wait(1500);
-    cy.get(".dropdown-heading-value > .gray").dblclick();
+    cy.get('[data-cy="user-group-select"]>>>>>').dblclick();
     cy.get("body").then(($body) => {
-      if (!$body.find(".search > input").length > 0) {
-        cy.get(".dropdown-heading-value > .gray").click();
+      if (!$body.find('[data-cy="user-group-select"]>>>>>').length > 0) {
+        cy.get('[data-cy="user-group-select"]>>>>>').click();
       }
     });
-    cy.clearAndType(".search > input", "Test");
-    cy.get(".no-options").verifyVisibleElement("have.text", "No options");
-    users.selectUserGroup("Admin");
-    cy.get(".dropdown-heading-value > span").verifyVisibleElement(
+    cy.get('[data-cy="user-group-select"]>>>>>').eq(0).type("Test");
+    cy.get(".css-1wlit7h-NoOptionsMessage").verifyVisibleElement(
       "have.text",
-      "Admin"
+      "No groups found"
     );
     cy.get(commonSelectors.cancelButton).click();
 
     cy.get(usersSelector.buttonAddUsers).click();
-    cy.get(".dropdown-heading-value > .gray").verifyVisibleElement(
+    users.selectUserGroup("Admin");
+    cy.get(".selected-value").verifyVisibleElement("have.text", "Admin");
+    cy.get(commonSelectors.cancelButton).click();
+
+    cy.get(usersSelector.buttonAddUsers).click();
+    cy.get(".css-1jqq78o-placeholder").should(
       "have.text",
       "Select groups to add for this user"
     );
     cy.get(commonSelectors.cancelButton).click();
 
-    users.inviteUserWithUserGroup(
+    users.inviteUserWithUserGroups(
       data.firstName,
       data.email,
       "All users",
@@ -251,7 +264,7 @@ describe("Manage Users", () => {
     );
 
     common.navigateToManageUsers();
-    users.inviteUserWithUserGroup(
+    users.inviteUserWithUserGroups(
       data.firstName,
       data.email,
       "All users",
@@ -265,4 +278,78 @@ describe("Manage Users", () => {
     cy.get(groupsSelector.usersLink).click();
     cy.get(groupsSelector.userRow(data.email)).should("be.visible");
   });
+
+  it("Should verify the edit user feature", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+
+    addNewUser(data.firstName, data.email);
+    cy.logoutApi();
+
+    cy.defaultWorkspaceLogin();
+    common.navigateToManageUsers();
+    common.searchUser(data.email);
+    cy.get(usersSelector.userActionButton).click();
+    cy.get(usersSelector.editUserDetailsButton).verifyVisibleElement(
+      "have.text",
+      "Edit user details"
+    );
+    cy.get('[data-cy="archive-button"]').verifyVisibleElement(
+      "have.text",
+      "Archive user"
+    );
+
+    cy.get(usersSelector.editUserDetailsButton).click();
+    cy.get(usersSelector.addUsersCardTitle).verifyVisibleElement(
+      "have.text",
+      "Edit user details"
+    );
+    cy.get(commonSelectors.labelFullNameInput).verifyVisibleElement(
+      "have.text",
+      "Name"
+    );
+    cy.get(commonSelectors.inputFieldFullName).verifyVisibleElement(
+      "have.value",
+      data.firstName
+    );
+    cy.get(commonSelectors.labelEmailInput).verifyVisibleElement(
+      "have.text",
+      "Email address"
+    );
+    cy.get(commonSelectors.inputFieldEmailAddress).verifyVisibleElement(
+      "have.value",
+      data.email
+    );
+    cy.get(commonSelectors.groupInputFieldLabel).verifyVisibleElement(
+      "have.text",
+      "User groups"
+    );
+    cy.get(".css-3w2yfm-ValueContainer").should("be.visible");
+    cy.get(commonSelectors.cancelButton).verifyVisibleElement(
+      "have.text",
+      "Cancel"
+    );
+    cy.get(usersSelector.buttonInviteUsers).verifyVisibleElement(
+      "have.text",
+      "Update"
+    );
+    cy.get(".css-3w2yfm-ValueContainer").click();
+    cy.get(".css-1c6ox7i-Input").type("Admin");
+    cy.get(".form-check-input").check();
+    cy.get(commonSelectors.cancelButton).click();
+
+    cy.get(usersSelector.userActionButton).click();
+    cy.get(usersSelector.editUserDetailsButton).click();
+    cy.get(".css-3w2yfm-ValueContainer").click();
+    cy.get(".css-1c6ox7i-Input").type("Admin");
+    cy.get(".form-check-input").check();
+    cy.get(usersSelector.buttonInviteUsers).click();
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      "User has been updated"
+    );
+
+    common.searchUser(data.email);
+    cy.get(usersSelector.groupChip).eq(1).should("have.text", "Admin");
+  });
 });

cypress-tests/cypress/e2e/workspace/profile.cy.js

@@ -24,52 +24,34 @@ describe("Profile Settings", () => {
       profileText.nameSuccessToast
     );
 
-    cy.get(profileSelector.firstNameInput).clear();
+    cy.get(profileSelector.userNameInput).clear();
     cy.get(profileSelector.updateButton).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      profileText.firstNameErrorToast
-    );
+    cy.verifyToastMessage(commonSelectors.toastMessage, "Name can't be empty!");
 
-    cy.get(profileSelector.lastNameInput).clear();
-    cy.get(profileSelector.updateButton).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      profileText.firstNameErrorToast
-    );
-
-    cy.clearAndType(profileSelector.firstNameInput, randomFirstName);
-    cy.clearAndType(profileSelector.lastNameInput, randomLastName);
+    cy.clearAndType(profileSelector.userNameInput, randomFirstName);
     cy.get(profileSelector.updateButton).click();
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
       profileText.nameSuccessToast
     );
-    cy.get(profileSelector.firstNameInput).verifyVisibleElement(
+    cy.get(profileSelector.userNameInput).verifyVisibleElement(
       "have.value",
       randomFirstName
     );
-    cy.get(profileSelector.lastNameInput).verifyVisibleElement(
-      "have.value",
-      randomLastName
-    );
 
-    cy.clearAndType(profileSelector.firstNameInput, profileText.firstName);
-    cy.clearAndType(profileSelector.lastNameInput, profileText.lastName);
+    cy.clearAndType(profileSelector.userNameInput, profileText.userName);
     cy.get(profileSelector.avatarUploadField).selectFile(avatarImage);
     cy.get(profileSelector.updateButton).click();
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
       profileText.nameSuccessToast
     );
-    cy.get(profileSelector.firstNameInput).verifyVisibleElement(
+    cy.get(profileSelector.userNameInput).verifyVisibleElement(
       "have.value",
-      profileText.firstName
-    );
-    cy.get(profileSelector.lastNameInput).verifyVisibleElement(
-      "have.value",
-      profileText.lastName
+      profileText.userName
     );
+    common.navigateToManageUsers();
+    cy.clearAndType(commonSelectors.inputUserSearch, "dev@tooljet.io");
     cy.get(commonSelectors.avatarImage).should("have.css", "background-image");
     common.logout();
   });
@@ -234,4 +216,4 @@ describe("Profile Settings", () => {
     cy.login(commonText.email, profileText.password);
     common.logout();
   });
-});
+});

cypress-tests/cypress/e2e/workspace/userPermissions.cy.js

@@ -10,44 +10,96 @@ import { workspaceVarSelectors } from "Selectors/workspaceVariable";
 import { workspaceVarText } from "Texts/workspacevarText";
 
 const data = {};
-data.firstName = fake.firstName;
-data.lastName = fake.lastName.replaceAll("[^A-Za-z]", "");
-data.email = fake.email.toLowerCase();
-data.appName = `${fake.companyName}-App`;
-data.folderName = `${fake.companyName.toLowerCase()}-folder`;
 
 describe("User permissions", () => {
-  before(() => {
-    cy.intercept("GET", "/api/apps?page=1&folder=&searchKey=").as("homePage");
-    cy.apiLogin();
-    cy.apiCreateApp(data.appName);
-    cy.visit('/my-workspace')
-    permissions.reset();
-    cy.get(commonSelectors.homePageLogo).click();
-    cy.wait("@homePage");
-    permissions.addNewUserMW(data.firstName, data.email);
-    cy.logoutApi();
-  });
   beforeEach(() => {
     cy.defaultWorkspaceLogin();
+    cy.removeAssignedApps();
+    permissions.reset();
+    cy.skipWalkthrough();
   });
+  it("Should verify the Create and Delete app permission", () => {
+    data.appName = `${fake.companyName}-App`;
 
-  it("Should verify the create new app permission", () => {
     cy.logoutApi();
-    cy.apiLogin(data.email, usersText.password);
-    cy.get("body").then(($title) => {
-      if ($title.text().includes(dashboardText.emptyPageDescription)) {
-        cy.get(commonSelectors.dashboardAppCreateButton).should('be.disabled');
-      } else {
-        cy.contains(dashboardText.createAppButton).should("not.exist");
-      }
-    });
+    cy.apiLogin("test@tooljet.com", usersText.password);
+    cy.visit("/my-workspace");
+    cy.get(commonSelectors.dashboardAppCreateButton).should("be.disabled");
     cy.logoutApi();
+
+    cy.apiLogin();
+    cy.apiCreateApp(data.appName);
+    cy.visit("/my-workspace");
+    cy.wait(500);
+
+    common.navigateToManageGroups();
+    cy.get(groupsSelector.appsLink).click();
+    cy.get(groupsSelector.appSearchBox).click();
+    cy.get(groupsSelector.searchBoxOptions).contains(data.appName).click();
+    cy.get(groupsSelector.selectAddButton).click();
+    cy.get("table").contains("td", data.appName);
+    cy.contains("td", data.appName)
+      .parent()
+      .within(() => {
+        cy.get("td input").first().should("be.checked");
+      });
+    cy.wait(1000);
+    cy.get(groupsSelector.permissionsLink).click();
+    cy.get(groupsSelector.appsCreateCheck).check();
+    cy.get(groupsSelector.permissionsLink).click();
+    cy.get(groupsSelector.appsDeleteCheck).check();
+
+    cy.logoutApi();
+    cy.apiLogin("test@tooljet.com", usersText.password);
+    cy.visit("/my-workspace");
+    cy.get(commonSelectors.appCreateButton).should("exist");
+    common.viewAppCardOptions(data.appName);
+    cy.contains("Delete app").should("exist");
+
+    common.logout();
+    cy.defaultWorkspaceLogin();
+    common.navigateToManageGroups();
+    cy.get(groupsSelector.permissionsLink).click();
+    cy.get(groupsSelector.appsDeleteCheck).uncheck();
+
+    cy.logoutApi();
+    cy.apiLogin("test@tooljet.com", usersText.password);
+    cy.visit("/my-workspace");
+    cy.wait(1000);
+    common.viewAppCardOptions(data.appName);
+    cy.contains("Delete app").should("not.exist");
+
+    data.appName = `${fake.companyName}-App`;
+    cy.createApp(data.appName);
+
+    cy.dragAndDropWidget("Table", 50, 50);
+    cy.backToApps();
+    common.viewAppCardOptions(data.appName);
+    cy.contains("Delete app").should("exist");
+    cy.get(commonSelectors.appCardOptions(commonText.deleteAppOption)).click();
+    cy.get(commonSelectors.buttonSelector("Yes")).click();
+
+    common.logout();
+    cy.defaultWorkspaceLogin();
+    common.navigateToManageGroups();
+    cy.get(groupsSelector.permissionsLink).click();
+    cy.get(groupsSelector.appsCreateCheck).uncheck();
+
+    cy.logoutApi();
+    cy.apiLogin("test@tooljet.com", usersText.password);
+    cy.visit("/my-workspace");
+    cy.wait(1000);
+    cy.contains("Create new application").should("not.exist");
   });
 
   it("Should verify the View and Edit permission", () => {
+    data.appName = `${fake.companyName}-App`;
+
+    cy.apiCreateApp(data.appName);
+    cy.reload();
     common.navigateToManageGroups();
     cy.wait(1000);
+    cy.get(groupsSelector.appsLink).click();
     cy.get(groupsSelector.appSearchBox).click();
     cy.get(groupsSelector.searchBoxOptions).contains(data.appName).click();
     cy.get(groupsSelector.selectAddButton).click();
@@ -59,9 +111,9 @@ describe("User permissions", () => {
       });
 
     cy.logoutApi();
-    cy.apiLogin(data.email, usersText.password);
+    cy.apiLogin("test@tooljet.com", usersText.password);
     cy.visit("/my-workspace");
-    cy.wait(500)
+    cy.wait(500);
     cy.contains(data.appName).should("exist");
     cy.get(commonSelectors.appCard(data.appName)).should(
       "contain.text",
@@ -80,7 +132,8 @@ describe("User permissions", () => {
 
     cy.defaultWorkspaceLogin();
     common.navigateToManageGroups();
-    cy.wait(500)
+    cy.get(groupsSelector.appsLink).click();
+    cy.wait(500);
     cy.contains("tr", data.appName)
       .parent()
       .within(() => {
@@ -92,9 +145,9 @@ describe("User permissions", () => {
     );
 
     cy.logoutApi();
-    cy.apiLogin(data.email, usersText.password);
+    cy.apiLogin("test@tooljet.com", usersText.password);
     cy.visit("/my-workspace");
-    cy.wait(500)
+    cy.wait(500);
     cy.get(commonSelectors.appCard(data.appName)).should(
       "contain.text",
       data.appName
@@ -109,89 +162,19 @@ describe("User permissions", () => {
       "tj-disabled-btn"
     );
     cy.get(commonSelectors.editButton).should("exist").and("be.enabled");
-
-    cy.get(commonSelectors.workspaceName).click();
-    cy.contains(`${data.email}`).click();
-    cy.contains(data.appName).should("not.exist");
-
-    cy.get(commonSelectors.workspaceName).click();
-    cy.contains("My workspace").should("be.visible").click();
-    cy.wait(200);
-  });
-
-  it("Should verify the Create and Delete app permission", () => {
-    data.appName = `${fake.companyName}-App`;
-    cy.apiCreateApp(data.appName);
-    // cy.visit('/my-workspace')
-    cy.wait(500);
-
-    common.navigateToManageGroups();
-    cy.get(groupsSelector.appSearchBox).click();
-    cy.get(groupsSelector.searchBoxOptions).contains(data.appName).click();
-    cy.get(groupsSelector.selectAddButton).click();
-    cy.get("table").contains("td", data.appName);
-    cy.contains("td", data.appName)
-      .parent()
-      .within(() => {
-        cy.get("td input").first().should("be.checked");
-      });
-    cy.wait(500)
-    cy.get(groupsSelector.permissionsLink).click();
-    cy.get(groupsSelector.appsCreateCheck).check();
-    cy.get(groupsSelector.permissionsLink).click();
-    cy.get(groupsSelector.appsDeleteCheck).check();
-
-    cy.logoutApi();
-    cy.apiLogin(data.email, usersText.password);
-    cy.visit('/my-workspace');
-    cy.get(commonSelectors.appCreateButton).should("exist");
-    common.viewAppCardOptions(data.appName);
-    cy.contains("Delete app").should("exist");
-
-    common.logout();
-    cy.defaultWorkspaceLogin();
-    common.navigateToManageGroups();
-    cy.get(groupsSelector.permissionsLink).click();
-    cy.get(groupsSelector.appsDeleteCheck).uncheck();
-
-    cy.logoutApi();
-    cy.apiLogin(data.email, usersText.password);
-    cy.visit("/my-workspace");
-    cy.wait(1000)
-    common.viewAppCardOptions(data.appName);
-    cy.contains("Delete app").should("not.exist");
-
-    cy.createApp(data.email);
-
-    cy.dragAndDropWidget("Table", 50, 50);
-    cy.get(commonSelectors.editorPageLogo).click();
-    common.viewAppCardOptions(data.email);
-    cy.contains("Delete app").should("exist");
-    cy.get(commonSelectors.appCardOptions(commonText.deleteAppOption)).click();
-    cy.get(commonSelectors.buttonSelector("Yes")).click();
-
-    common.logout
-    cy.defaultWorkspaceLogin();
-    common.navigateToManageGroups();
-    cy.get(groupsSelector.permissionsLink).click();
-    cy.get(groupsSelector.appsCreateCheck).uncheck();
-
-    cy.logoutApi();
-    cy.apiLogin(data.email, usersText.password);
-    cy.visit("/my-workspace");
-    cy.wait(1000)
-    cy.contains("Create new application").should("not.exist");
   });
 
   it("Should verify Create/Update/Delete folder permission", () => {
+    data.folderName = `${fake.companyName.toLowerCase()}-folder`;
+
     common.navigateToManageGroups();
     cy.get(groupsSelector.permissionsLink).click();
     cy.get(groupsSelector.foldersCreateCheck).check();
 
     cy.logoutApi();
-    cy.apiLogin(data.email, usersText.password);
+    cy.apiLogin("test@tooljet.com", usersText.password);
     cy.visit("/my-workspace");
-    cy.wait(500)
+    cy.wait(500);
 
     cy.get(commonSelectors.createNewFolderButton).click();
     cy.clearAndType(commonSelectors.folderNameInput, data.folderName);
@@ -215,27 +198,9 @@ describe("User permissions", () => {
     cy.get(groupsSelector.foldersCreateCheck).uncheck();
 
     common.logout();
-    cy.apiLogin(data.email, usersText.password);
+    cy.apiLogin("test@tooljet.com", usersText.password);
     cy.visit("/my-workspace");
-    cy.wait(500)
-
-    cy.defaultWorkspaceLogin();
-    common.navigateToManageGroups();
-    cy.contains("td", data.appName)
-      .parent()
-      .within(() => {
-        cy.get("td a").contains("Remove").click();
-      });
-
-    common.logout();
-    cy.apiLogin(data.email, usersText.password);
-    cy.visit("/my-workspace");
-    cy.wait(500)
-    cy.contains(data.appName).should("not.exist");
-
-    common.logout();
-    cy.appUILogin();
-    cy.deleteApp(data.appName);
+    cy.get(commonSelectors.createNewFolderButton).should("not.exist");
   });
 
   it("Should verify Create/Update/Delete workspace variable permission", () => {
@@ -247,18 +212,6 @@ describe("User permissions", () => {
     cy.get(
       '[data-cy="go-to-workspace-constants-option-button"]'
     ).verifyVisibleElement("have.text", "Go to workspace constants");
-    common.logout();
-
-    cy.apiLogin(data.email, usersText.password);
-    cy.visit("/my-workspace");
-    cy.wait(500)
-    common.navigateToWorkspaceVariable();
-    cy.get('[data-cy="alert-info-text"]>>.text-muted').verifyVisibleElement(
-      "have.text",
-      "There are no Workspace variables. Workspace variables are being deprecated soon, so please use Workspace constants instead."
-    );
-    cy.get(
-      '[data-cy="go-to-workspace-constants-option-button"]'
-    ).verifyVisibleElement("have.text", "Go to workspace constants");
+    cy.logoutApi();
   });
 });

cypress-tests/cypress/fixtures/fake.js

@@ -17,7 +17,7 @@ function fullName() {
   return `${faker.name.firstName()} ${faker.name.lastName()}`;
 }
 function companyName() {
-  const str = faker.company.companyName();
+  const str = `${faker.company.companyName()} ${faker.name.lastName()}`;
   return str.substring(0, str.indexOf(" ")).replace(/[^a-zA-Z ]/g, "");
 }
 function widgetName() {
@@ -29,7 +29,10 @@ function randomSentence() {
 
 function randomRgba() {
   let rgba = faker.color.rgb({ format: "decimal", includeAlpha: true });
-  rgba[rgba.length - 1] = rgba[rgba.length - 1].toPrecision(2) * 100;
+  let alpha = rgba[rgba.length - 1].toPrecision(2) * 100;
+
+  alpha = Math.min(Math.max(alpha, 20), 80);
+  rgba[rgba.length - 1] = alpha;
   return rgba;
 }
 
@@ -82,4 +85,3 @@ Object.defineProperty(fake, "randomRgb", { get: randomRgb });
 Object.defineProperty(fake, "boxShadowParam", { get: boxShadowParam });
 Object.defineProperty(fake, "randomRgbaHex", { get: randomRgbaHex });
 Object.defineProperty(fake, "tableName", { get: tableName });
-

cypress-tests/cypress/plugins/index.js

@@ -19,12 +19,12 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};
 const webpack = require("@cypress/webpack-preprocessor");
 module.exports = (on) => {
   const options = {
     webpackOptions: require("../webpack.config"),
-    watchOptions: {}
+    watchOptions: {},
   };
   on("file:preprocessor", webpack(options));
 };

cypress-tests/cypress/support/e2e.js

@@ -17,6 +17,8 @@
 import "../commands/commands";
 import "../commands/apiCommands";
 import "cypress-real-events";
+import "@cypress/code-coverage/support";
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 Cypress.on("uncaught:exception", (err, runnable) => {

cypress-tests/cypress/support/utils/common.js

@@ -8,13 +8,13 @@ import { groupsSelector } from "Selectors/manageGroups";
 import { groupsText } from "Texts/manageGroups";
 
 export const navigateToProfile = () => {
+  cy.get(commonSelectors.settingsIcon).click();
   cy.get(commonSelectors.profileSettings).click();
-  cy.get(profileSelector.profileLink).click();
   cy.url().should("include", "settings");
 };
 
 export const logout = () => {
-  cy.get(commonSelectors.profileSettings).click();
+  cy.get(commonSelectors.settingsIcon).click();
   cy.get(commonSelectors.logoutLink).click();
   cy.intercept("GET", "/api/metadata").as("publicConfig");
   cy.wait("@publicConfig");
@@ -22,15 +22,16 @@ export const logout = () => {
 };
 
 export const navigateToManageUsers = () => {
-  cy.get(commonSelectors.workspaceSettingsIcon).click();
+  cy.get(commonSelectors.settingsIcon).click();
+  cy.get(commonSelectors.workspaceSettings).click();
   cy.get(commonSelectors.manageUsersOption).click();
 };
 
 export const navigateToManageGroups = () => {
-  cy.get(commonSelectors.workspaceSettingsIcon).click();
+  cy.get(commonSelectors.settingsIcon).click();
+  cy.get(commonSelectors.workspaceSettings).click();
   cy.get(commonSelectors.manageGroupsOption).click();
-  navigateToAllUserGroup();
-
+  // navigateToAllUserGroup();
 };
 
 export const navigateToAllUserGroup = () => {
@@ -55,12 +56,14 @@ export const navigateToAllUserGroup = () => {
 };
 
 export const navigateToWorkspaceVariable = () => {
-  cy.get(commonSelectors.workspaceSettingsIcon).click();
+  cy.get(commonSelectors.settingsIcon).click();
+  cy.get(commonSelectors.workspaceSettings).click();
   cy.get(commonSelectors.workspaceVariableOption).click();
 };
 
 export const navigateToManageSSO = () => {
-  cy.get(commonSelectors.workspaceSettingsIcon).click();
+  cy.get(commonSelectors.settingsIcon).click();
+  cy.get(commonSelectors.workspaceSettings).click();
   cy.get(commonSelectors.manageSSOOption).click();
 };
 
@@ -121,6 +124,7 @@ export const navigateToAppEditor = (appName) => {
 };
 
 export const viewAppCardOptions = (appName) => {
+  cy.wait(1000);
   cy.reloadAppForTheElement(appName);
   cy.contains("div", appName)
     .parent()
@@ -201,6 +205,7 @@ export const manageUsersPagination = (email) => {
 
 export const searchUser = (email) => {
   cy.clearAndType(commonSelectors.inputUserSearch, email);
+  cy.wait(1000)
 };
 
 export const createWorkspace = (workspaceName) => {
@@ -208,7 +213,7 @@ export const createWorkspace = (workspaceName) => {
   cy.get(commonSelectors.addWorkspaceButton).click();
   cy.clearAndType(commonSelectors.workspaceNameInput, workspaceName);
   cy.clearAndType('[data-cy="workspace-slug-input-field"]', workspaceName);
-  cy.wait(1000)
+  cy.wait(1000);
   cy.intercept("GET", "/api/apps?page=1&folder=&searchKey=").as("homePage");
   cy.get(commonSelectors.createWorkspaceButton).click();
   cy.wait("@homePage");
@@ -269,4 +274,4 @@ export const releaseApp = () => {
   cy.get(commonSelectors.yesButton).click();
   cy.verifyToastMessage(commonSelectors.toastMessage, "Version v1 released");
   cy.wait(1000);
-};
+};

cypress-tests/cypress/support/utils/commonWidget.js

@@ -1,10 +1,6 @@
 import { faker } from "@faker-js/faker";
-import { commonSelectors, commonWidgetSelector } from "Selectors/common";
-import {
-  commonWidgetText,
-  commonText,
-  codeMirrorInputLabel,
-} from "Texts/common";
+import { commonWidgetSelector } from "Selectors/common";
+import { codeMirrorInputLabel, commonWidgetText } from "Texts/common";
 
 export const openAccordion = (
   accordionName,
@@ -50,6 +46,7 @@ export const verifyAndModifyToggleFx = (
     "have.text",
     paramName
   );
+  cy.get(commonWidgetSelector.parameterTogglebutton(paramName)).realHover();
   cy.get(commonWidgetSelector.parameterFxButton(paramName, " > svg")).click();
   if (defaultValue)
     cy.get(commonWidgetSelector.parameterInputField(paramName))
@@ -80,11 +77,11 @@ export const addAndVerifyTooltip = (widgetSelector, message) => {
 
 export const editAndVerifyWidgetName = (
   name,
-  accordion = ["General", "Properties", "Layout"]
+  accordion = ["General", "Properties", "Devices"]
 ) => {
   closeAccordions(accordion);
   cy.clearAndType(commonWidgetSelector.WidgetNameInputField, name);
-  cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
+  cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click({ force: true });
 
   cy.get(commonWidgetSelector.draggableWidget(name)).trigger("mouseover");
   cy.get(commonWidgetSelector.widgetConfigHandle(name))
@@ -129,9 +126,14 @@ export const selectColourFromColourPicker = (
   paramName,
   colour,
   index = 0,
-  parent = commonWidgetSelector.colourPickerParent
+  parent = commonWidgetSelector.colourPickerParent,
+  hasIndex = false
 ) => {
-  cy.get(commonWidgetSelector.stylePicker(paramName)).click();
+  if (hasIndex === false) {
+    cy.get(commonWidgetSelector.stylePicker(paramName)).last().click();
+  } else {
+    cy.get(commonWidgetSelector.stylePicker(paramName)).eq(hasIndex).click();
+  }
   cy.get(parent)
     .eq(index)
     .then(() => {
@@ -210,7 +212,8 @@ export const verifyAndModifyStylePickerFx = (
   defaultValue,
   value,
   index = 0,
-  boxShadow = ""
+  boxShadow = "",
+  hasIndex = false
 ) => {
   cy.get(commonWidgetSelector.parameterLabel(paramName)).should(
     "have.text",
@@ -224,8 +227,16 @@ export const verifyAndModifyStylePickerFx = (
   cy.get(commonWidgetSelector.stylePickerValue(paramName))
     .should("be.visible")
     .verifyVisibleElement("have.text", defaultValue);
-  cy.get(commonWidgetSelector.parameterFxButton(paramName, " > svg")).click();
 
+  if (hasIndex === false) {
+    cy.get(commonWidgetSelector.stylePicker(paramName)).last().realHover();
+  } else {
+    cy.get(commonWidgetSelector.stylePicker(paramName))
+      .eq(hasIndex)
+      .realHover();
+  }
+
+  cy.get(commonWidgetSelector.parameterFxButton(paramName)).click();
   cy.get(commonWidgetSelector.stylePickerFxInput(paramName)).within(() => {
     cy.get(".CodeMirror-line")
       .should("be.visible")
@@ -274,9 +285,12 @@ export const verifyLoaderColor = (widgetName, color) => {
     });
 };
 
-export const verifyLayout = (widgetName) => {
+export const verifyLayout = (
+  widgetName,
+  layout = commonWidgetText.accordionLayout
+) => {
   openEditorSidebar(widgetName);
-  openAccordion(commonWidgetText.accordionLayout);
+  openAccordion(layout);
   verifyAndModifyToggleFx(
     commonWidgetText.parameterShowOnDesktop,
     commonWidgetText.codeMirrorLabelTrue
@@ -306,21 +320,24 @@ export const verifyStylesGeneralAccordion = (
   boxShadowParameter,
   hexColor,
   boxShadowColor,
-  index = 0
+  index = 0,
+  boxShadowDefaultValue = commonWidgetText.boxShadowDefaultValue
 ) => {
   openEditorSidebar(widgetName);
   cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
   // openAccordion(commonWidgetText.accordionGenaral, []);
   verifyAndModifyStylePickerFx(
     commonWidgetText.parameterBoxShadow,
-    commonWidgetText.boxShadowDefaultValue,
+    boxShadowDefaultValue,
     `${boxShadowParameter[0]}px ${boxShadowParameter[1]}px ${boxShadowParameter[2]}px ${boxShadowParameter[3]}px ${hexColor}`,
     0,
     "0px 0px 0px 0px "
   );
   cy.get(
     commonWidgetSelector.parameterFxButton(commonWidgetText.parameterBoxShadow)
-  ).click();
+  )
+    .realHover()
+    .click();
 
   cy.get(
     commonWidgetSelector.stylePicker(commonWidgetText.parameterBoxShadow)
@@ -354,9 +371,7 @@ export const verifyTooltip = (widgetSelector, message) => {
     .trigger("mouseover", { timeout: 2000 })
     .trigger("mouseover")
     .then(() => {
-      cy.get(commonWidgetSelector.tooltipLabel)
-        .last()
-        .should("have.text", message);
+      cy.get(".tooltip-inner").last().should("have.text", message);
     });
 };
 
@@ -397,3 +412,41 @@ export const closeAccordions = (accordionNames = [], index = "0") => {
     });
   }
 };
+
+export const selectFromSidebarDropdown = (property, option) => {
+  cy.get(`[data-cy="dropdown-${property.toLowerCase().replace(/\s+/g, "-")}"]`)
+    .click()
+    .type(`${option}{enter}`);
+};
+
+export const addValueOnInput = (property, value) => {
+  cy.get(`[data-cy="${property.toLowerCase().replace(/\s+/g, "-")}-input"]`)
+    .clear()
+    .click()
+    .type(`${value}`);
+};
+
+export const verifyContainerElements = () => {
+  cy.get('[data-cy="widget-accordion-container"]').verifyVisibleElement(
+    "have.text",
+    "container"
+  );
+  cy.get('[data-cy="label-padding"]').verifyVisibleElement(
+    "have.text",
+    "Padding"
+  );
+  cy.get('[data-cy="togglr-button-default"]').verifyVisibleElement(
+    "have.text",
+    "Default"
+  );
+  cy.get('[data-cy="togglr-button-none"]').verifyVisibleElement(
+    "have.text",
+    "None"
+  );
+};
+
+export const checkPaddingOfContainer = (widgetName, value, mode = "Box") => {
+  cy.get(commonWidgetSelector.draggableWidget(widgetName))
+    .parents(`[role=${mode}]`)
+    .should("have.css", "padding", `${value}px`);
+};

cypress-tests/cypress/support/utils/dataSource.js

@@ -1,10 +1,12 @@
 import { postgreSqlSelector } from "Selectors/postgreSql";
 import { postgreSqlText } from "Texts/postgreSql";
-import { cyParamName } from "../../constants/selectors/common";
+import { cyParamName } from "Selectors/common";
 import { commonSelectors } from "Selectors/common";
 import { commonText } from "Texts/common";
 import { dataSourceSelector } from "Selectors/dataSource";
 import { dataSourceText } from "Texts/dataSource";
+import { navigateToAppEditor } from "Support/utils/common";
+
 
 export const verifyCouldnotConnectWithAlert = (dangerText) => {
   cy.get(postgreSqlSelector.connectionFailedText, {
@@ -112,6 +114,26 @@ export const addQuery = (queryName, query, dbName) => {
   });
 };
 
+export const addQueryAndOpenEditor = (queryName, query, dbName, appName) => {
+  cy.get('[data-cy="show-ds-popover-button"]').click();
+  cy.get(".css-1rrkggf-Input").type(`${dbName}`);
+  cy.intercept("POST", "http://localhost:3000/api/data_queries").as(
+    "createQuery"
+  );
+  cy.contains(`[id*="react-select-"]`, dbName).click();
+
+  cy.get('[data-cy="query-rename-input"]').clear().type(queryName);
+
+  cy.wait("@createQuery").then((interception) => {
+    const dataQueryId = interception.response.body.id;
+    cy.visit("/my-workspace");
+    cy.addQueryApi(queryName, query, dataQueryId);
+    navigateToAppEditor(appName);
+    cy.wait(2000);
+  });
+};
+
+
 export const verifyValueOnInspector = (queryName, value) => {
   cy.get('[data-cy="inspector-node-queries"]')
     .parent()
@@ -131,3 +153,10 @@ export const verifyValueOnInspector = (queryName, value) => {
     }
   });
 };
+
+export const selectDatasource = (datasourceName) => {
+  cy.get(dataSourceSelector.addedDsSearchIcon).click();
+  cy.clearAndType(dataSourceSelector.AddedDsSearchBar, datasourceName);
+  cy.wait(500)
+  cy.get(`[data-cy="${cyParamName(datasourceName)}-button"]`).click()
+}

cypress-tests/cypress/support/utils/dropdown.js

@@ -0,0 +1,98 @@
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import { openAccordion, openEditorSidebar } from "Support/utils/commonWidget";
+import { buttonText } from "Texts/button";
+import { commonWidgetText } from "Texts/common";
+import {
+  addDefaultEventHandler,
+  selectColourFromColourPicker,
+  verifyAndModifyParameter,
+  verifyBoxShadowCss,
+  verifyLoaderColor,
+  verifyPropertiesGeneralAccordion,
+  verifyStylesGeneralAccordion,
+  verifyTooltip,
+  verifyWidgetColorCss,
+} from "Support/utils/commonWidget";
+export const selectFromDropDown = (dropdownName, option, index = 3) => {
+  cy.get(`[data-cy="dropdown-input-${dropdownName.toLowerCase()}"]`).click(
+    "center"
+  );
+  cy.wait(100);
+  cy.contains(`[id*='react-select-${index}-option-']`, option).click();
+};
+
+export const clearSelection = (dropdownName) => {
+  cy.get(`[data-cy=dropdown-input-${dropdownName.toLowerCase()}]>>>>`)
+    .eq(1)
+    .click();
+};
+
+export const verifySelectedOptionOnDropdown = (dropdownName, option) => {
+  cy.get(`[data-cy=dropdown-input-${dropdownName.toLowerCase()}]>>>>`)
+    .eq(0)
+    .verifyVisibleElement("have.text", option);
+};
+
+export const verifyOptionOnSidePanel = (option) => {
+  cy.get(
+    `[data-cy="options-label-${option.toLowerCase()}"]`
+  ).verifyVisibleElement("have.text", option);
+};
+
+export const deleteOption = (option) => {
+  cy.get(`[data-cy="options-label-${option.toLowerCase()}"]`).realHover();
+  cy.get(
+    `[data-cy="options-${option.toLowerCase()}-delete-icon"]>span`
+  ).click();
+  cy.notVisible(`[data-cy="options-label-${option.toLowerCase()}"]`);
+};
+
+export const addNewOption = () => {
+  cy.get('[data-cy="add-new-dropdown-option"]').click();
+};
+
+export const updateOptionLabelAndValue = (option, label, value) => {
+  cy.get(`[data-cy="options-label-${option.toLowerCase()}"]`).click();
+  cy.get(`[data-cy="option-label-input-field"]`).clearAndTypeOnCodeMirror(
+    label
+  );
+  cy.get(`[data-cy="option-value-input-field"]`).clearAndTypeOnCodeMirror(
+    value
+  );
+};
+
+export const verifyOptionOnDropdown = (dropdownName, options) => {
+  cy.get(`[data-cy="dropdown-input-${dropdownName.toLowerCase()}"]`).click(
+    "center"
+  );
+  options.forEach((option, i) => {
+    cy.get(`#react-select-3-option-${i} > .d-flex`).verifyVisibleElement(
+      "have.text",
+      option
+    );
+  });
+};
+
+export const verifyOptionMenuElements = (option, options) => {
+  cy.get(`[data-cy="options-label-${option.toLowerCase()}"]`).click();
+
+  cy.get(`[data-cy="label-option-label"]`).verifyVisibleElement(
+    "have.text",
+    "Option label"
+  );
+  cy.get(`[data-cy="label-option-value"]`).verifyVisibleElement(
+    "have.text",
+    "Option value"
+  );
+
+  cy.get('[data-cy="label-mark-this-as-default-option"]').verifyVisibleElement(
+    "have.text",
+    "Mark this as default option"
+  );
+  cy.get('[data-cy="label-visibility"]')
+    .eq(1)
+    .verifyVisibleElement("have.text", "Visibility");
+  cy.get('[data-cy="label-disable"]')
+    .eq(1)
+    .verifyVisibleElement("have.text", "Disable");
+};

cypress-tests/cypress/support/utils/editor/inputFieldUtils.js

@@ -0,0 +1,176 @@
+import { commonWidgetSelector } from "Selectors/common";
+import {
+  addAndVerifyTooltip,
+  openAccordion,
+  openEditorSidebar,
+  selectColourFromColourPicker,
+  verifyAndModifyParameter,
+  verifyAndModifyToggleFx,
+  verifyWidgetColorCss,
+} from "Support/utils/commonWidget";
+import { commonWidgetText, customValidation } from "Texts/common";
+import { textInputText } from "Texts/textInput";
+
+export const addValidations = (
+  widgetName,
+  data,
+  min = commonWidgetText.labelMinLength,
+  max = commonWidgetText.labelMaxLength
+) => {
+  openEditorSidebar(widgetName);
+  openAccordion(commonWidgetText.accordionValidation);
+  verifyAndModifyParameter(
+    commonWidgetText.labelRegex,
+    commonWidgetText.regularExpression
+  );
+  verifyAndModifyParameter(min, data.minimumLength);
+  verifyAndModifyParameter(max, data.maximumLength);
+  verifyAndModifyParameter(
+    commonWidgetText.labelcustomValidadtion,
+    customValidation(data.widgetName, data.customText)
+  );
+  verifyAndModifyToggleFx("Make this field mandatory", "");
+};
+
+export const addAndVerifyAdditionalActions = (widgetName, tooltipText) => {
+  openEditorSidebar(widgetName);
+  openAccordion("Additional Actions");
+  verifyAndModifyToggleFx(
+    commonWidgetText.parameterVisibility,
+    commonWidgetText.codeMirrorLabelTrue
+  );
+  cy.get(commonWidgetSelector.draggableWidget(widgetName)).should(
+    "not.be.visible"
+  );
+
+  cy.get(
+    commonWidgetSelector.parameterTogglebutton(
+      commonWidgetText.parameterVisibility
+    )
+  ).click();
+
+  verifyAndModifyToggleFx(
+    commonWidgetText.parameterDisable,
+    commonWidgetText.codeMirrorLabelFalse
+  );
+  cy.waitForAutoSave();
+  cy.get(commonWidgetSelector.draggableWidget(widgetName)).should(
+    "have.attr",
+    "disabled"
+  );
+
+  cy.get(
+    commonWidgetSelector.parameterTogglebutton(
+      commonWidgetText.parameterDisable
+    )
+  ).click();
+
+  verifyAndModifyToggleFx(
+    commonWidgetText.loadingState,
+    commonWidgetText.codeMirrorLabelFalse
+  );
+  cy.get(commonWidgetSelector.draggableWidget(widgetName))
+    .parent()
+    .within(() => {
+      cy.get(".tj-widget-loader").should("be.visible");
+    });
+
+  cy.get(
+    commonWidgetSelector.parameterTogglebutton(commonWidgetText.loadingState)
+  ).click();
+
+  addAndVerifyTooltip(
+    commonWidgetSelector.draggableWidget(widgetName),
+    tooltipText
+  );
+};
+
+export const addAllInputFieldColors = (data) => {
+  selectColourFromColourPicker("Background", data.bgColor);
+  selectColourFromColourPicker("Border", data.borderColor);
+  selectColourFromColourPicker("Text", data.textColor);
+  selectColourFromColourPicker("Error text", data.errorTextColor);
+  selectColourFromColourPicker("", data.iconColor);
+  cy.forceClickOnCanvas();
+  openEditorSidebar(data.widgetName);
+  cy.get('[data-cy="make-this-field-mandatory-toggle-button"]').click();
+  cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
+};
+
+export const verifyInputFieldColors = (selectorInput, data) => {
+  verifyWidgetColorCss(selectorInput, "color", data.textColor);
+  verifyWidgetColorCss(selectorInput, "border-color", data.borderColor);
+  verifyWidgetColorCss(selectorInput, "background-color", data.bgColor);
+  cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).clear();
+  cy.forceClickOnCanvas();
+  cy.verifyCssProperty(
+    `[data-cy="${data.widgetName}-invalid-feedback"]`,
+    "color",
+    `rgba(${data.errorTextColor[0]}, ${data.errorTextColor[1]}, ${
+      data.errorTextColor[2]
+    }, ${data.errorTextColor[3] / 100})`
+  );
+
+  cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
+    .siblings("svg")
+    .should(
+      "have.css",
+      "stroke",
+      `rgba(${data.iconColor[0]}, ${data.iconColor[1]}, ${data.iconColor[2]}, ${
+        data.iconColor[3] / 100
+      })`
+    );
+};
+
+export const verifyLabelStyleElements = () => {
+  cy.get('[data-cy="widget-accordion-label"]').verifyVisibleElement(
+    "have.text",
+    "label"
+  );
+  cy.get('[data-cy="label-alignment"]').verifyVisibleElement(
+    "have.text",
+    "Alignment"
+  );
+  cy.get('[data-cy="label-width"]').verifyVisibleElement("have.text", "Width");
+  cy.get('[data-cy="width-input-field"]')
+    .eq(0)
+    .should("have.value", "33")
+    .siblings("label")
+    .should("have.text", "% of the field");
+  cy.get('[data-cy="auto-width-label"]').verifyVisibleElement(
+    "have.text",
+    "Auto width"
+  );
+};
+
+export const verifyAlignment = (componentName, position, side) => {
+  const alignments = {
+    topLeft: { y: "flex-column", x: "flex-start" },
+    topRight: { y: "flex-column", x: "flex-end" },
+    sideLeft: { y: "align-items-center", x: "flex-start" },
+    sideRight: { y: "align-items-center", x: "flex-end" },
+  };
+
+  const { y, x } = alignments[position];
+
+  cy.get(`[data-cy="label-${componentName.toLowerCase()}"]`)
+    .should("have.class", y)
+    .children("label")
+    .should("have.css", "justify-content", x);
+};
+
+export const verifyCustomWidthOfLabel = (componentName, width) => {
+  cy.get(`[data-cy="label-${componentName.toLowerCase()}"]`)
+    .children("label")
+    .should("have.attr", "style")
+    .and("include", `width: ${width}%`);
+  //
+  // .should("have.css", "width", `${width}%`);
+};
+
+export const addCustomWidthOfLabel = (width) => {
+  cy.get('[data-cy="auto-width-checkbox"]').click();
+  cy.get('[data-cy="width-input-field"]')
+    .eq(0)
+    .type(`{selectAll}{backspace}${width}`, { force: true });
+};

cypress-tests/cypress/support/utils/editor/passwordNumberInput.js

@@ -0,0 +1,136 @@
+import { faker } from "@faker-js/faker";
+import { commonWidgetSelector } from "Selectors/common";
+import { openAccordion, openEditorSidebar } from "Support/utils/commonWidget";
+import { buttonText } from "Texts/button";
+import { commonWidgetText } from "Texts/common";
+
+import {
+  addSupportCSAData,
+  selectCSA,
+  selectEvent,
+} from "Support/utils/events";
+
+export const verifyControlComponentAction = (widgetName, value) => {
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget("button", 340, 90);
+
+  openEditorSidebar(widgetName);
+  openAccordion(commonWidgetText.accordionEvents, ["Validation", "Devices"]);
+
+  cy.get(commonWidgetSelector.addMoreEventHandlerLink).click();
+  cy.get(commonWidgetSelector.eventHandlerCard).eq(1).click();
+
+  cy.get(commonWidgetSelector.actionSelection).type("Control component{Enter}");
+  cy.get(commonWidgetSelector.eventComponentSelection).type("button1{Enter}");
+  cy.get(commonWidgetSelector.eventComponentActionSelection).type(
+    "Set text{Enter}"
+  );
+  cy.get(commonWidgetSelector.componentTextInput)
+    .find('[data-cy*="-input-field"]')
+    .clearAndTypeOnCodeMirror(["{{", `components.${widgetName}.value}}`]);
+
+  cy.clearAndType(commonWidgetSelector.draggableWidget(widgetName), value);
+  cy.get(
+    commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
+  ).should("have.text", value);
+};
+
+export const randomString = (length) => {
+  let str = faker.lorem.words();
+  return str.replace(/\s/g, "").substr(0, length);
+};
+
+export const verifyCSA = (data) => {
+  cy.clearAndType(
+    commonWidgetSelector.draggableWidget("textinput1"),
+    data.customText
+  );
+  cy.get(
+    commonWidgetSelector.draggableWidget(data.widgetName)
+  ).verifyVisibleElement("have.value", data.customText);
+
+  cy.get(commonWidgetSelector.draggableWidget("button2")).click();
+  cy.get(
+    commonWidgetSelector.draggableWidget(data.widgetName)
+  ).verifyVisibleElement("have.value", "");
+
+  cy.get(commonWidgetSelector.draggableWidget("button5")).click();
+  cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
+    .should("have.focus")
+    .realType(String(data.customText));
+  cy.get(
+    commonWidgetSelector.draggableWidget(data.widgetName)
+  ).verifyVisibleElement("have.value", data.customText);
+  cy.get(commonWidgetSelector.draggableWidget("button4")).click();
+  cy.realType("not working123");
+  cy.get(
+    commonWidgetSelector.draggableWidget(data.widgetName)
+  ).verifyVisibleElement("have.value", data.customText);
+
+  cy.get(commonWidgetSelector.draggableWidget("button6")).click();
+  cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
+    .parent()
+    .within(() => {
+      cy.get(".tj-widget-loader").should("be.visible");
+    });
+
+  cy.get(commonWidgetSelector.draggableWidget("button3")).click();
+  cy.get(commonWidgetSelector.draggableWidget(data.widgetName))
+    .parent()
+    .should("have.attr", "data-disabled", "true");
+
+  cy.get(commonWidgetSelector.draggableWidget("button1")).click();
+  cy.get(commonWidgetSelector.draggableWidget(data.widgetName)).should(
+    "not.be.visible"
+  );
+};
+
+export const addCSA = (data) => {
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 50, 500);
+  selectEvent("On click", "Control Component");
+  selectCSA(data.widgetName, "Set visibility");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget("Text input", 50, 50);
+  selectEvent("On change", "Control Component");
+  cy.wait(500);
+  selectCSA(data.widgetName, "Set text", "500");
+  cy.wait(500);
+  addSupportCSAData("text", `{{components.textinput1.value`);
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 150, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA(data.widgetName, "Clear", "500");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 250, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA(data.widgetName, "Set disable", "500");
+  cy.wait(500);
+  cy.get('[data-cy="event-Value-fx-button"]').click();
+  cy.get('[data-cy="event-Value-input-field"]').clearAndTypeOnCodeMirror(
+    "{{true"
+  );
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 350, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA(data.widgetName, "Set blur", "500");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 450, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA(data.widgetName, "Set focus");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 300, 300);
+  selectEvent("On click", "Control Component");
+  selectCSA(data.widgetName, "Set loading", "500");
+  cy.wait(500);
+  cy.get('[data-cy="event-Value-fx-button"]').click();
+  cy.get('[data-cy="event-Value-input-field"]').clearAndTypeOnCodeMirror(
+    "{{true"
+  );
+};

cypress-tests/cypress/support/utils/editor/text.js

@@ -0,0 +1,5 @@
+export const verifyBasicStyles = (data) => {
+  verifyWidgetColorCss(selectorInput, "border-color", data.borderColor);
+  verifyWidgetColorCss(selectorInput, "background-color", data.bgColor);
+  verifyWidgetColorCss(selectorInput, "color", data.textColor);
+};

cypress-tests/cypress/support/utils/editor/textInput.js

@@ -0,0 +1,159 @@
+import { faker } from "@faker-js/faker";
+import { commonWidgetSelector } from "Selectors/common";
+import { openAccordion, openEditorSidebar } from "Support/utils/commonWidget";
+import { buttonText } from "Texts/button";
+import { commonWidgetText } from "Texts/common";
+
+import {
+  addSupportCSAData,
+  selectCSA,
+  selectEvent,
+} from "Support/utils/events";
+
+export const verifyControlComponentAction = (widgetName, value) => {
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget("button", 340, 90);
+
+  openEditorSidebar(widgetName);
+  openAccordion(commonWidgetText.accordionEvents, ["Validation", "Devices"]);
+
+  cy.get(commonWidgetSelector.addMoreEventHandlerLink).click();
+  cy.get(commonWidgetSelector.eventHandlerCard).eq(1).click();
+
+  cy.get(commonWidgetSelector.actionSelection).type("Control component{Enter}");
+  cy.get(commonWidgetSelector.eventComponentSelection).type("button1{Enter}");
+  cy.get(commonWidgetSelector.eventComponentActionSelection).type(
+    "Set text{Enter}"
+  );
+  cy.get(commonWidgetSelector.componentTextInput)
+    .find('[data-cy*="-input-field"]')
+    .clearAndTypeOnCodeMirror(["{{", `components.${widgetName}.value}}`]);
+
+  cy.clearAndType(commonWidgetSelector.draggableWidget(widgetName), value);
+  cy.get(
+    commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
+  ).should("have.text", value);
+};
+
+export const randomString = (length) => {
+  let str = faker.lorem.words();
+  return str.replace(/\s/g, "").substr(0, length);
+};
+
+export const verifyCSA = (data) => {
+  cy.clearAndType(
+    commonWidgetSelector.draggableWidget("textinput2"),
+    data.customText
+  );
+  cy.get(
+    commonWidgetSelector.draggableWidget("textinput1")
+  ).verifyVisibleElement("have.value", data.customText);
+
+  cy.get(commonWidgetSelector.draggableWidget("button2")).click();
+  cy.get(
+    commonWidgetSelector.draggableWidget("textinput1")
+  ).verifyVisibleElement("have.value", "");
+
+  cy.get(commonWidgetSelector.draggableWidget("button5")).click();
+  cy.realType(data.customText);
+  cy.get(
+    commonWidgetSelector.draggableWidget("textinput1")
+  ).verifyVisibleElement("have.value", data.customText);
+  cy.get(commonWidgetSelector.draggableWidget("button4")).click();
+  cy.realType("not working");
+  cy.get(
+    commonWidgetSelector.draggableWidget("textinput1")
+  ).verifyVisibleElement("have.value", data.customText);
+
+  cy.get(commonWidgetSelector.draggableWidget("button3")).click();
+  cy.get(commonWidgetSelector.draggableWidget("textinput1"))
+    .parent()
+    .should("have.attr", "data-disabled", "true");
+
+  cy.get(commonWidgetSelector.draggableWidget("button1")).click();
+  cy.get(commonWidgetSelector.draggableWidget("textinput1")).should(
+    "not.be.visible"
+  );
+
+  cy.get(commonWidgetSelector.draggableWidget("button7")).click();
+  cy.get(commonWidgetSelector.draggableWidget("textinput1")).should(
+    "be.visible"
+  );
+
+  cy.get(commonWidgetSelector.draggableWidget("button6")).click();
+  cy.get(commonWidgetSelector.draggableWidget("textinput1"))
+    .parent()
+    .should("not.have.attr", "data-disabled", "true");
+
+  cy.get(commonWidgetSelector.draggableWidget("button8")).click();
+  cy.get(commonWidgetSelector.draggableWidget("textinput1"))
+    .parent()
+    .within(() => {
+      cy.get(".tj-widget-loader").should("be.visible");
+    });
+};
+
+export const addCSA = (data) => {
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 50, 500);
+  selectEvent("On click", "Control Component");
+  selectCSA("textinput1", "Visibility");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget("Text input", 50, 50);
+  selectEvent("On change", "Control Component");
+  cy.wait(500);
+  selectCSA("textinput1", "Set text", "500");
+  cy.wait(500);
+  addSupportCSAData("text", "{{components.textinput2.value");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 150, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA("textinput1", "Clear", "500");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 250, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA("textinput1", "Disable", "500");
+  cy.wait(500);
+  cy.get('[data-cy="event-Value-fx-button"]').click();
+  cy.get('[data-cy="event-Value-input-field"]').clearAndTypeOnCodeMirror(
+    "{{true"
+  );
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 350, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA("textinput1", "Set blur", "500");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 450, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA("textinput1", "Set focus");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 550, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA("textinput1", "Set disable", "500");
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 650, 400);
+  selectEvent("On click", "Control Component");
+  selectCSA("textinput1", "Set visibility", "500");
+  cy.wait(500);
+  cy.get('[data-cy="event-Value-fx-button"]').click();
+  cy.get('[data-cy="event-Value-input-field"]').clearAndTypeOnCodeMirror(
+    "{{true"
+  );
+
+  cy.forceClickOnCanvas();
+  cy.dragAndDropWidget(buttonText.defaultWidgetText, 300, 300);
+  selectEvent("On click", "Control Component");
+  selectCSA("textinput1", "Set loading", "500");
+  cy.wait(500);
+  cy.get('[data-cy="event-Value-fx-button"]').click();
+  cy.get('[data-cy="event-Value-input-field"]').clearAndTypeOnCodeMirror(
+    "{{true"
+  );
+};

cypress-tests/cypress/support/utils/events.js

@@ -5,6 +5,7 @@ export const selectEvent = (
   addEventhandlerSelector = '[data-cy="add-event-handler"]',
   eventIndex = 0
 ) => {
+  cy.intercept("PUT", "events").as("events");
   cy.get(addEventhandlerSelector).eq(index).click();
   cy.get('[data-cy="event-handler"]').eq(eventIndex).click();
   cy.get('[data-cy="event-selection"]')
@@ -15,6 +16,7 @@ export const selectEvent = (
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${action}{enter}`);
+  cy.wait("@events");
 };
 
 export const selectCSA = (
@@ -22,6 +24,7 @@ export const selectCSA = (
   componentAction,
   debounce = `{selectAll}{backspace}`
 ) => {
+  cy.intercept("PUT", "events").as("events");
   cy.get('[data-cy="action-options-component-selection-field"]')
     .click()
     .find("input")
@@ -30,19 +33,37 @@ export const selectCSA = (
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${componentAction}{enter}`);
-  cy.get('[data-cy="-input-field"]')
+  cy.wait("@events");
+  cy.get('[data-cy="debounce-input-field"]')
     .eq(1)
+    .click()
     .type(`{selectAll}{backspace}${debounce}{enter}`);
+  cy.wait("@events");
 };
 
 export const addSupportCSAData = (field, data) => {
-  cy.get(`[data-cy="${field}-input-field"]`).clearAndTypeOnCodeMirror(data);
+  cy.intercept("PUT", "events").as("events");
+  cy.get(`[data-cy="event-${field}-input-field"]`)
+    .click({ force: true })
+    .clearAndTypeOnCodeMirror(data);
 };
 
 export const selectSupportCSAData = (option) => {
+  cy.intercept("PUT", "events").as("events");
   cy.get('[data-cy="action-options-action-selection-field"]')
     .eq(1)
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${option}{enter}`);
+  cy.wait("@events");
+};
+
+export const changeEventType = (event, eventIndex = 0) => {
+  cy.intercept("PUT", "events").as("events");
+  cy.get('[data-cy="event-handler"]').eq(eventIndex).click();
+  cy.get('[data-cy="event-selection"]')
+    .click()
+    .find("input")
+    .type(`{selectAll}{backspace}${event}{enter}`);
+  cy.wait("@events");
 };

cypress-tests/cypress/support/utils/inspector.js

@@ -24,11 +24,29 @@ export const verifyValue = (node, type, children, index = 0) => {
   cy.get(`[data-cy="inspector-node-${node.toLowerCase()}"] > .mx-2`)
     .eq(index)
     .realHover()
-    .verifyVisibleElement("have.text", `${children}`);
+    .verifyVisibleElement("contain.text", `${children}`);
   cy.get(`[data-cy="inspector-node-${node.toLowerCase()}"] > .node-key`)
     .eq(index)
-    .verifyVisibleElement("have.text", node);
+    .verifyVisibleElement("contain.text", node);
   cy.get(`[data-cy="inspector-node-${node.toLowerCase()}"] > .mx-1`)
     .eq(index)
-    .verifyVisibleElement("have.text", type);
+    .verifyVisibleElement("contain.text", type);
+};
+export const deleteComponentFromInspector = (node) => {
+  cy.get('[data-cy="inspector-node-components"] > .node-key').click();
+  cy.get(`[data-cy="inspector-node-${node}"] > .node-key`).click();
+  cy.get('[style="height: 13px; width: 13px;"] > img').click();
+};
+
+export const verifyfunctions = (node, type, index = 0) => {
+  cy.get(`[data-cy="inspector-node-${node.toLowerCase()}"] > .mx-1`)
+    .eq(index)
+    .realHover()
+    .verifyVisibleElement("contain.text", `${type}`);
+  cy.get(`[data-cy="inspector-node-${node.toLowerCase()}"] > .node-key`)
+    .eq(index)
+    .verifyVisibleElement("contain.text", node);
+  // cy.get(`[data-cy="inspector-node-${node.toLowerCase()}"] > .mx-1`)
+  //   .eq(index)
+  //   .verifyVisibleElement("contain.text", type);
 };

cypress-tests/cypress/support/utils/manageGroups.js

@@ -2,7 +2,8 @@ import { groupsSelector } from "Selectors/manageGroups";
 import { groupsText } from "Texts/manageGroups";
 import { commonSelectors } from "Selectors/common";
 import { commonText } from "Texts/common";
-import { navigateToAllUserGroup } from "../utils/common";
+import { navigateToAllUserGroup, createGroup, navigateToManageGroups } from "Support/utils/common";
+import { cyParamName } from "../../constants/selectors/common";
 
 export const manageGroupsElements = () => {
   cy.get(groupsSelector.groupLink("All users")).verifyVisibleElement(
@@ -62,15 +63,13 @@ export const manageGroupsElements = () => {
   );
 
   cy.get("body").then(($title) => {
-    if ($title.text().includes(groupsText.helperTextNoAppsAdded)) {
-      cy.get(groupsSelector.helperTextNoAppsAdded).verifyVisibleElement(
-        "have.text",
-        groupsText.helperTextNoAppsAdded
-      );
-      cy.get(groupsSelector.helperTextPermissions).verifyVisibleElement(
-        "have.text",
-        groupsText.helperTextPermissions
-      );
+    if ($title.find(groupsSelector.helperTextNoAppsAdded).length > 0) {
+      cy.get(groupsSelector.helperTextNoAppsAdded)
+        .eq(0)
+        .verifyVisibleElement("have.text", groupsText.helperTextNoAppsAdded);
+      cy.get(groupsSelector.helperTextPermissions)
+        .eq(0)
+        .verifyVisibleElement("have.text", groupsText.helperTextPermissions);
     }
   });
 
@@ -89,13 +88,16 @@ export const manageGroupsElements = () => {
     groupsText.createGroupButton
   );
   cy.get(groupsSelector.cancelButton).click();
-  cy.get(groupsSelector.searchBox).should("be.visible");
-
-  cy.get(groupsSelector.usersLink).click();
   cy.get(groupsSelector.helperTextAllUsersIncluded).verifyVisibleElement(
     "have.text",
     groupsText.helperTextAllUsersIncluded
   );
+
+  // cy.get(groupsSelector.usersLink).click();
+  // cy.get(groupsSelector.helperTextAllUsersIncluded).verifyVisibleElement(
+  //   "have.text",
+  //   groupsText.helperTextAllUsersIncluded
+  // );
   cy.get(groupsSelector.nameTableHeader).verifyVisibleElement(
     "have.text",
     groupsText.userNameTableHeader
@@ -182,15 +184,13 @@ export const manageGroupsElements = () => {
   );
 
   cy.get("body").then(($title) => {
-    if ($title.text().includes(groupsText.helperTextNoAppsAdded)) {
-      cy.get(groupsSelector.helperTextNoAppsAdded).verifyVisibleElement(
-        "have.text",
-        groupsText.helperTextNoAppsAdded
-      );
-      cy.get(groupsSelector.helperTextPermissions).verifyVisibleElement(
-        "have.text",
-        groupsText.helperTextPermissions
-      );
+    if ($title.find(groupsSelector.helperTextNoAppsAdded).length > 0) {
+      cy.get(groupsSelector.helperTextNoAppsAdded)
+        .eq(0)
+        .verifyVisibleElement("have.text", groupsText.helperTextNoAppsAdded);
+      cy.get(groupsSelector.helperTextPermissions)
+        .eq(0)
+        .verifyVisibleElement("have.text", groupsText.helperTextPermissions);
     }
   });
 
@@ -260,4 +260,107 @@ export const addUserToGroup = (groupName, email) => {
     cy.get("input").check();
   });
   cy.get(`[data-cy="${groupName}-group-add-button"]`).click();
-};
+};
+
+export const createGroupAddAppAndUserToGroup = (groupName, email) => {
+  cy.intercept("GET", "http://localhost:3000/api/group_permissions").as(
+    `${groupName}`
+  );
+  createGroup(groupName);
+
+  cy.wait(`@${groupName}`).then((groupResponse) => {
+    const groupId = groupResponse.response.body.group_permissions.find(
+      (group) => group.group === groupName
+    ).id;
+
+    cy.getCookie("tj_auth_token").then((cookie) => {
+      const headers = {
+        "Tj-Workspace-Id": Cypress.env("workspaceId"),
+        Cookie: `tj_auth_token=${cookie.value}`,
+      };
+
+      cy.request({
+        method: "PUT",
+        url: `http://localhost:3000/api/group_permissions/${groupId}`,
+        headers: headers,
+        body: { add_apps: [Cypress.env("appId")] },
+      }).then((patchResponse) => {
+        expect(patchResponse.status).to.equal(200);
+      });
+
+      cy.task("updateId", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `select id from users where email='${email}';`,
+      }).then((resp) => {
+        const userId = resp.rows[0].id;
+
+        cy.request({
+          method: "PUT",
+          url: `http://localhost:3000/api/group_permissions/${groupId}`,
+          headers: headers,
+          body: { add_users: [userId] },
+        }).then((patchResponse) => {
+          expect(patchResponse.status).to.equal(200);
+        });
+
+        cy.get('[data-cy="all-users-list-item"] > span').click();
+        cy.get(`[data-cy="${cyParamName(groupName)}-list-item"]`).click();
+        cy.wait(1000);
+        cy.get(groupsSelector.appsLink).click();
+        cy.wait(1000);
+        cy.get('[data-cy="checkbox-app-edit"]').check();
+      });
+    });
+  });
+};
+
+export const OpenGroupCardOption = (groupName) => {
+  cy.get(groupsSelector.groupLink(groupName))
+    .trigger("mouseenter")
+    .trigger("mouseover")
+    .then(() => {
+      cy.wait(2000).then(() => {
+        cy.get(
+          `[data-cy="${cyParamName(
+            groupName
+          )}-list-item"] > :nth-child(2) > .tj-base-btn`
+        ).click({ force: true });
+      });
+    });
+};
+export const verifyGroupCardOptions = (groupName) => {
+  cy.get(groupsSelector.groupLink(groupName)).click();
+  OpenGroupCardOption(groupName);
+  cy.get(groupsSelector.duplicateOption).verifyVisibleElement(
+    "have.text",
+    "Duplicate group"
+  );
+  cy.get(groupsSelector.deleteGroupOption).verifyVisibleElement(
+    "have.text",
+    groupsText.deleteGroupButton
+  );
+};
+
+export const groupPermission = (fieldsToCheckOrUncheck, groupName = "All users", shouldCheck = false,) => {
+  navigateToManageGroups();
+  cy.get(groupsSelector.groupLink(groupName))
+  cy.get(groupsSelector.permissionsLink).click();
+
+  fieldsToCheckOrUncheck.forEach((field) => {
+    const selector = groupsSelector[field];
+    cy.get(selector).then(($el) => {
+      if ($el.is(":checked") !== shouldCheck) {
+        if (shouldCheck) {
+          cy.get(selector).check();
+        } else {
+          cy.get(selector).uncheck();
+        }
+      }
+    });
+  });
+};
+
+export const duplicateGroup = () => {
+  OpenGroupCardOption(groupName);
+  cy.get(groupsSelector.duplicateOption).click()
+}

cypress-tests/cypress/support/utils/manageUsers.js

@@ -15,7 +15,7 @@ export const manageUsersElements = () => {
   });
   cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
     "have.text",
-    usersText.breadcrumbUsersPageTitle
+    " Users"
   );
 
   for (const element in usersSelector.usersElements) {
@@ -41,11 +41,19 @@ export const manageUsersElements = () => {
       cy.get(
         usersSelector.userStatus(usersText.adminUserName)
       ).verifyVisibleElement("have.text", usersText.activeStatus);
-      cy.get("td button").verifyVisibleElement(
-        "have.text",
-        usersText.adminUserState
-      );
+      cy.wait(1000);
+      cy.get('[data-cy="user-actions-button"]').click();
     });
+
+  cy.get('[data-cy="edit-user-details-button"]').verifyVisibleElement(
+    "have.text",
+    "Edit user details"
+  );
+  cy.get('[data-cy="archive-button"]').verifyVisibleElement(
+    "have.text",
+    "Archive user"
+  );
+
   cy.get(usersSelector.userFilterInput).should("be.visible");
 
   cy.get(usersSelector.buttonAddUsers)
@@ -67,7 +75,7 @@ export const manageUsersElements = () => {
 
   cy.get(commonSelectors.labelFullNameInput).verifyVisibleElement(
     "have.text",
-    commonText.labelFullNameInput
+    "Name"
   );
   cy.get(commonSelectors.inputFieldFullName).should("be.visible");
   cy.get(commonSelectors.labelEmailInput).verifyVisibleElement(
@@ -81,10 +89,8 @@ export const manageUsersElements = () => {
     "have.text",
     commonText.groupInputFieldLabel
   );
-  cy.get(".dropdown-heading-value > .gray").verifyVisibleElement(
-    "have.text",
-    "Select groups to add for this user"
-  );
+  cy.wait(1000);
+  cy.get('[data-cy="user-group-select"]').should("be.visible");
   cy.get(commonSelectors.cancelButton).verifyVisibleElement(
     "have.text",
     usersText.cancelButton
@@ -157,14 +163,24 @@ export const confirmInviteElements = () => {
     commonText.emailInputLabel
   );
   cy.get(commonSelectors.invitedUserEmail).should("be.visible");
-  cy.get(commonSelectors.passwordLabel).verifyVisibleElement(
+
+  cy.get("body").then(($el) => {
+    if ($el.text().includes(commonText.passwordLabel)) {
+      cy.get(commonSelectors.passwordLabel).verifyVisibleElement(
+        "have.text",
+        commonText.passwordLabel
+      );
+      cy.get(commonSelectors.passwordInputField).should("be.visible");
+      cy.get(commonSelectors.acceptInviteButton)
+        .verifyVisibleElement("have.text", commonText.acceptInviteButton)
+        .should("be.disabled");
+    }
+  });
+
+  cy.get(commonSelectors.acceptInviteButton).verifyVisibleElement(
     "have.text",
-    commonText.passwordLabel
+    commonText.acceptInviteButton
   );
-  cy.get(commonSelectors.passwordInputField).should("be.visible");
-  cy.get(commonSelectors.acceptInviteButton)
-    .verifyVisibleElement("have.text", commonText.acceptInviteButton)
-    .should("be.disabled");
 
   cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
     expect($el.contents().first().text().trim()).to.eq(
@@ -219,21 +235,6 @@ export const bulkUserUpload = (file, fileName, toastMessage) => {
   cy.wait(200);
 };
 
-export const inviteUserWithUserGroup = (firstName, email, group1, group2) => {
-  fillUserInviteForm(firstName, email);
-  selectUserGroup(group1);
-  selectUserGroup(group2);
-  cy.get(usersSelector.buttonInviteUsers).click();
-  cy.verifyToastMessage(
-    commonSelectors.toastMessage,
-    usersText.userCreatedToast
-  );
-  // copyInvitationLink(firstName, email);
-  cy.wait(1000);
-  fetchAndVisitInviteLink(email);
-  cy.clearAndType(commonSelectors.passwordInputField, "password");
-  cy.get(commonSelectors.acceptInviteButton).click();
-};
 
 export const copyInvitationLink = (firstName, email) => {
   cy.window().then((win) => {
@@ -263,20 +264,57 @@ export const fillUserInviteForm = (firstName, email) => {
 
 export const selectUserGroup = (groupName) => {
   cy.wait(1500);
+
   cy.get("body").then(($body) => {
-    if (!$body.find(".search > input").length > 0) {
-      cy.get(".dropdown-heading-value > .gray").click();
-      cy.clearAndType(".search > input", groupName);
-      cy.wait(500);
-      cy.get("li > .select-item > .item-renderer").last().click();
-    } else {
-      cy.clearAndType(".search > input", groupName);
-      cy.wait(500);
-      cy.get("li > .select-item > .item-renderer").last().click();
+    const selectDropdown = $body.find('[data-cy="user-group-select"]>>>>>');
+
+    if (selectDropdown.length === 0) {
+      cy.get('[data-cy="user-group-select"]>>>>>').click();
     }
+
+    cy.get('[data-cy="user-group-select"]>>>>>').eq(0).type(groupName);
+    cy.wait(1000);
+    cy.get('[data-cy="user-group-select"]>>>>>').eq(2).click();
   });
 };
 
+export const inviteUserWithUserGroups = (
+  firstName,
+  email,
+  groupName1,
+  groupName2
+) => {
+  fillUserInviteForm(firstName, email);
+
+  cy.wait(2000);
+
+  cy.get("body").then(($body) => {
+    const selectDropdown = $body.find('[data-cy="user-group-select"]>>>>>');
+
+    if (selectDropdown.length === 0) {
+      cy.get('[data-cy="user-group-select"]>>>>>').click();
+    }
+    cy.get('[data-cy="user-group-select"]>>>>>').eq(0).type(groupName1);
+    cy.wait(1000);
+    cy.get('[data-cy="user-group-select"]>>>>>').eq(2).click();
+    cy.wait(1000);
+    cy.get('[data-cy="user-group-select"]>>>>>').eq(0).type(groupName2);
+    cy.wait(1000);
+    cy.get('[data-cy="user-group-select"]>>>>>').eq(4).click();
+  });
+
+  cy.get(usersSelector.buttonInviteUsers).click();
+  cy.verifyToastMessage(
+    commonSelectors.toastMessage,
+    usersText.userCreatedToast
+  );
+
+  cy.wait(1000);
+  fetchAndVisitInviteLink(email);
+  cy.clearAndType(commonSelectors.passwordInputField, "password");
+  cy.get(commonSelectors.acceptInviteButton).click();
+};
+
 export const fetchAndVisitInviteLink = (email) => {
   let invitationToken,
     organizationToken,

cypress-tests/cypress/support/utils/onboarding.js

@@ -5,7 +5,7 @@ import {
   verifyandModifyUserRole,
   verifyandModifySizeOftheCompany,
 } from "Support/utils/selfHostSignUp";
-import { updateWorkspaceName } from "Support/utils/userPermissions";
+import { navigateToManageUsers } from "Support/utils/common";
 
 export const verifyConfirmEmailPage = (email) => {
   cy.get(commonSelectors.pageLogo).should("be.visible");
@@ -143,6 +143,7 @@ export const verifyInvalidInvitationLink = () => {
 export const userSignUp = (fullName, email, workspaceName) => {
   let invitationLink;
   cy.visit("/");
+  cy.wait(1000);
   cy.get(commonSelectors.createAnAccountLink).realClick();
   cy.clearAndType(commonSelectors.nameInputField, fullName);
   cy.clearAndType(commonSelectors.emailInputField, email);
@@ -158,13 +159,108 @@ export const userSignUp = (fullName, email, workspaceName) => {
     cy.visit(invitationLink);
     cy.get(commonSelectors.setUpToolJetButton).click();
     cy.wait(4000);
-    cy.get("body").then(($el) => {
-      if (!$el.text().includes(dashboardText.emptyPageHeader)) {
-        verifyOnboardingQuestions(fullName, workspaceName);
-        updateWorkspaceName(email);
-      } else {
-        updateWorkspaceName(email);
-      }
+    verifyOnboardingQuestions(fullName, workspaceName);
+    updateWorkspaceName(email, workspaceName);
+  });
+};
+
+export const fetchAndVisitInviteLink = (email) => {
+  let invitationToken,
+    organizationToken,
+    workspaceId,
+    userId,
+    url = "";
+
+  cy.task("updateId", {
+    dbconfig: Cypress.env("app_db"),
+    sql: `select invitation_token from users where email='${email}';`,
+  }).then((resp) => {
+    invitationToken = resp.rows[0].invitation_token;
+
+    cy.task("updateId", {
+      dbconfig: Cypress.env("app_db"),
+      sql: "select id from organizations where name='My workspace';",
+    }).then((resp) => {
+      workspaceId = resp.rows[0].id;
+
+      cy.task("updateId", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `select id from users where email='${email}';`,
+      }).then((resp) => {
+        userId = resp.rows[0].id;
+
+        cy.task("updateId", {
+          dbconfig: Cypress.env("app_db"),
+          sql: `select invitation_token from organization_users where user_id='${userId}';`,
+        }).then((resp) => {
+          organizationToken = resp.rows[1].invitation_token;
+
+          url = `/invitations/${invitationToken}/workspaces/${organizationToken}?oid=${workspaceId}`;
+          cy.logoutApi();
+          cy.wait(1000);
+          cy.visit(url);
+        });
+      });
+    });
+  });
+};
+
+export const inviteUser = (firstName, email) => {
+  cy.userInviteApi(firstName, email);
+  fetchAndVisitInviteLink(email);
+  cy.wait(1000)
+  cy.get(commonSelectors.passwordInputField).should("be.visible")
+  cy.clearAndType(commonSelectors.passwordInputField, "password");
+  cy.get(commonSelectors.acceptInviteButton).click();
+};
+
+export const addNewUser = (firstName, email) => {
+  navigateToManageUsers();
+  inviteUser(firstName, email);
+  updateWorkspaceName(email);
+};
+
+export const updateWorkspaceName = (email, workspaceName = email) => {
+  let workspaceNametimeStamp, workspaceId, userId, defuserId, defWorkspaceId;
+
+  cy.task("updateId", {
+    dbconfig: Cypress.env("app_db"),
+    sql: `select id from users where email='${email}';`,
+  }).then((resp) => {
+    userId = resp.rows[0].id;
+
+    cy.task("updateId", {
+      dbconfig: Cypress.env("app_db"),
+      sql: "select id from users where email='dev@tooljet.io';",
+    }).then((resp) => {
+      defuserId = resp.rows[0].id;
+
+      cy.task("updateId", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `SELECT organization_id FROM organization_users WHERE user_id = '${defuserId}' `,
+      }).then((resp) => {
+        defWorkspaceId = resp.rows[0].organization_id;
+        cy.task("updateId", {
+          dbconfig: Cypress.env("app_db"),
+          sql: `SELECT organization_id FROM organization_users WHERE user_id = '${userId}'AND organization_id <> '${defWorkspaceId}';`,
+        }).then((resp) => {
+          workspaceId = resp.rows[0].organization_id;
+
+          cy.task("updateId", {
+            dbconfig: Cypress.env("app_db"),
+            sql: `select name from organizations where id='${workspaceId}';`,
+          }).then((resp) => {
+            workspaceNametimeStamp = resp.rows[0].name;
+            cy.get(commonSelectors.workspaceName).eq(0).click();
+            cy.contains(`${workspaceNametimeStamp}`).should("exist");
+
+            cy.task("updateId", {
+              dbconfig: Cypress.env("app_db"),
+              sql: `update organizations set name ='${workspaceName}' where name='${workspaceNametimeStamp}';`,
+            });
+          });
+        });
+      });
     });
   });
 };

cypress-tests/cypress/support/utils/profile.js

@@ -16,14 +16,11 @@ export const profilePageElements = () => {
     "have.text",
     profileText.changePasswordButton
   );
-  cy.get(profileSelector.firstNameInput).verifyVisibleElement(
+  cy.get(profileSelector.userNameInput).verifyVisibleElement(
     "have.value",
-    profileText.firstName
-  );
-  cy.get(profileSelector.lastNameInput).verifyVisibleElement(
-    "have.value",
-    profileText.lastName
+    profileText.userName
   );
+
   cy.get(profileSelector.emailInput).verifyVisibleElement(
     "have.value",
     profileText.email

cypress-tests/cypress/support/utils/textInput.js

@@ -1,35 +0,0 @@
-import { commonWidgetSelector } from "Selectors/common";
-import { openAccordion, openEditorSidebar } from "Support/utils/commonWidget";
-import { buttonText } from "Texts/button";
-import { commonWidgetText } from "Texts/common";
-import { faker } from "@faker-js/faker";
-
-export const verifyControlComponentAction = (widgetName, value) => {
-  cy.forceClickOnCanvas();
-  cy.dragAndDropWidget("button", 340, 90);
-
-  openEditorSidebar(widgetName);
-  openAccordion(commonWidgetText.accordionEvents, ["Validation", "Layout"]);
-
-  cy.get(commonWidgetSelector.addMoreEventHandlerLink).click();
-  cy.get(commonWidgetSelector.eventHandlerCard).eq(1).click();
-
-  cy.get(commonWidgetSelector.actionSelection).type("Control component{Enter}");
-  cy.get(commonWidgetSelector.eventComponentSelection).type("button1{Enter}");
-  cy.get(commonWidgetSelector.eventComponentActionSelection).type(
-    "Set text{Enter}"
-  );
-  cy.get(commonWidgetSelector.componentTextInput)
-    .find('[data-cy*="-input-field"]')
-    .clearAndTypeOnCodeMirror(["{{", `components.${widgetName}.value}}`]);
-
-  cy.clearAndType(commonWidgetSelector.draggableWidget(widgetName), value);
-  cy.get(
-    commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
-  ).should("have.text", value);
-};
-
-export const randomString = (length) => {
-  let str = faker.lorem.words();
-  return str.replace(/\s/g, "").substr(0, length);
-};

cypress-tests/cypress/support/utils/userPermissions.js

@@ -43,16 +43,6 @@ export const reset = () => {
   });
 };
 
-export const addNewUserMW = (firstName, email, companyName) => {
-  common.navigateToManageUsers();
-  users.inviteUser(firstName, email);
-  // cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-  //   "have.text",
-  //   "My workspace"
-  // );
-  updateWorkspaceName(email);
-};
-
 export const updateWorkspaceName = (email) => {
   let workspaceNametimeStamp, workspaceId, userId, defuserId, defWorkspaceId;
 

cypress-tests/package.json

@@ -7,6 +7,7 @@
     "cy:open": "cypress open --browser=chrome 103, --e2e"
   },
   "devDependencies": {
+    "@cypress/code-coverage": "^3.12.12",
     "@cypress/webpack-preprocessor": "^5.12.0",
     "@faker-js/faker": "^7.3.0",
     "cypress": "^12.5.1"

docs/build-latest-version.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+set -e
+
+jq '[.[0]]' versions.json > tmp_versions.json
+mv tmp_versions.json versions.json
+
+npm i && npm run build
+
+exec "$@"

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

@@ -6,8 +6,8 @@ title: 'Marketplace: Development Setup'
 The Marketplace offers custom plugins that can be installed in your ToolJet instance. This guide aims to assist you in creating a new plugin for the ToolJet marketplace.
 
 ## Requirements
-- [Node.js](https://nodejs.org/en/download/) **(v18.3.0)**
-- [npm](https://www.npmjs.com/get-npm) **(v8.11.0)**
+- [Node.js](https://nodejs.org/en/download/) **(v18.18.2)**
+- [npm](https://www.npmjs.com/get-npm) **(v9.8.1)**
 
 ## Getting started
 

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

@@ -21,5 +21,5 @@ ToolJet client is a ReactJS application. Client is responsible for visually edit
 
 ## Requirements
 
-1. **Node version 18.3.0**
-2. **npm version 8.11.0**
+1. **Node version 18.18.2**
+2. **npm version 9.8.1**

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

@@ -11,12 +11,12 @@ Open the terminal and run the commands below.
 
 ### 1. Set up the environment 
 
-1. Install Node.js ( version: v18.3.0 ) and npm (version: v8.11.0)
+1. Install Node.js ( version: v18.18.2 ) and npm (version: v9.8.1)
 
 ```
-nvm install 18.3.0
-nvm use 18.3.0
-npm install -g npm@8.11.0
+nvm install 18.18.2
+nvm use 18.18.2
+npm install -g npm@9.8.1
 ```
 
 2. Install Postgres
@@ -83,7 +83,7 @@ SERVE_CLIENT=true
 
 ### 3.  Install and build dependencies
 
-Make sure node version is set to 18.3.0 before running the below command:
+Make sure node version is set to 18.18.2 before running the below command:
 
 ```
 npm install
@@ -97,7 +97,7 @@ npm run build:plugins
 
 ```
 npm run --prefix server db:create
-npm run --prefix server db:mirgate
+npm run --prefix server db:migrate
 ```
 
 If at any point you need to reset the database, use this command `npm run --prefix server db:reset`
@@ -114,4 +114,4 @@ cd ./frontend && NODE=production npm run build
 cd ./server && npm run start:prod
 ```
 
-The client will start on the **port 3000**, you can access the client by visiting the url created by codespace - `https://<url>/apps/tooljet`
+The client will start on the **port 3000**, you can access the client by visiting the url created by codespace - `https://<url>/apps/tooljet`