Merge branch 'main' into release/marketplace-sprint-7

.github/workflows/cypress-platform.yml

@@ -59,7 +59,7 @@ 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 "ENABLE_ONBOARDING_QUESTIONS_FOR_ALL_SIGN_UPS=false" >> .env
           echo "PGRST_HOST=localhost:3001" >> .env
           echo "SSO_GIT_OAUTH2_CLIENT_ID=dummy" >> .env
           echo "SSO_GIT_OAUTH2_CLIENT_SECRET=dummy" >> .env
@@ -153,8 +153,26 @@ jobs:
       - name: use mybuilder buildx
         run: docker buildx use mybuilder
 
-      - name: Build docker image
-        run: docker buildx build --platform=linux/amd64 -f docker/production.Dockerfile  . -t tooljet/tj-osv:cypressplaform
+      - 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: Set up environment variables
         run: |
@@ -174,7 +192,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 "ENABLE_ONBOARDING_QUESTIONS_FOR_ALL_SIGN_UPS=false" >> .env
           echo "SSO_GIT_OAUTH2_CLIENT_ID=dummy" >> .env
           echo "SSO_GIT_OAUTH2_CLIENT_SECRET=dummy" >> .env
           echo "SSO_GIT_OAUTH2_HOST=dummy" >> .env
@@ -188,6 +206,16 @@ jobs:
       - name: Pulling the docker-compose file
         run: curl -LO https://tooljet-test.s3.us-west-1.amazonaws.com/docker-compose.yaml && mkdir postgres_data
 
+      - name: Update docker-compose file
+        run: |
+            # Update docker-compose.yaml with the new image
+            sed -i '/^[[:space:]]*tooljet:/,/^$/ s|^\([[:space:]]*image:[[:space:]]*\).*|\1tooljet/tj-osv:${{ env.SAFE_BRANCH_NAME }}|' docker-compose.yaml
+
+      - name: Install Docker Compose
+        run: |
+          curl -L "https://github.com/docker/compose/releases/download/v2.10.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+          chmod +x /usr/local/bin/docker-compose
+
       - name: Run docker-compose file
         run: docker-compose up -d
 
@@ -200,7 +228,7 @@ jobs:
       - name: Wait for the server to be ready
         run: |
           timeout 1500 bash -c '
-          until curl --silent --fail http://localhost:80/apps/tooljet/; do
+          until curl --silent --fail http://localhost:3000/apps/tooljet/; do
             sleep 5
           done'
 
@@ -212,14 +240,14 @@ jobs:
         uses: jsdaniell/create-json@1.1.2
         with:
           name: "cypress.env.json"
-          json: ${{ secrets.CYPRESS_SECRETS }}
+          json: ${{ secrets.CYPRESS_SECRETS_SUBPATH }}
           dir: "./cypress-tests"
 
       - name: Platform-subpath
         uses: cypress-io/github-action@v5
         with:
           working-directory: ./cypress-tests
-          config: "baseUrl=http://localhost:80/apps/tooljet/"
+          config: "baseUrl=http://localhost:3000/apps/tooljet/"
           config-file: cypress-workspace.config.js
 
       - name: Capture Screenshots

.version

@@ -1 +1 @@
-3.0.5-ce
+3.1.1-ce

cypress-tests/cypress.config.js

@@ -82,7 +82,7 @@ module.exports = defineConfig({
     experimentalModfyObstructiveThirdPartyCode: true,
     experimentalRunAllSpecs: true,
     baseUrl: "http://localhost:8082",
-    specPattern: "cypress/e2e/happyPath/platform/commonTestcases/**/*.cy.js",
+    specPattern: "cypress/e2e/happyPath/**/*.cy.js",
     downloadsFolder: "cypress/downloads",
     numTestsKeptInMemory: 0,
     redirectionLimit: 10,

cypress-tests/cypress/commands/apiCommands.js

@@ -7,7 +7,7 @@ Cypress.Commands.add(
     redirection = "/"
   ) => {
     cy.request({
-      url: `http://localhost:3000/api/authenticate/${workspaceId}`,
+      url: `${Cypress.env("server_host")}/api/authenticate/${workspaceId}`,
       method: "POST",
       body: {
         email: userEmail,
@@ -69,7 +69,7 @@ Cypress.Commands.add("apiCreateApp", (appName = "testApp") => {
     Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
     cy.request({
       method: "POST",
-      url: "http://localhost:3000/api/apps",
+      url: `${Cypress.env("server_host")}/api/apps`,
       headers: {
         "Tj-Workspace-Id": Cypress.env("workspaceId"),
         Cookie: `tj_auth_token = ${cookie.value}`,
@@ -103,7 +103,7 @@ Cypress.Commands.add("apiDeleteApp", (appId = Cypress.env("appId")) => {
   cy.request(
     {
       method: "DELETE",
-      url: `http://localhost:3000/api/apps/${Cypress.env("appId")}`,
+      url: `${Cypress.env("server_host")}/api/apps/${Cypress.env("appId")}`,
       headers: {
         "Tj-Workspace-Id": Cypress.env("workspaceId"),
         Cookie: Cypress.env("authToken"),
@@ -122,15 +122,26 @@ Cypress.Commands.add("apiDeleteApp", (appId = Cypress.env("appId")) => {
 
 Cypress.Commands.add(
   "openApp",
-  (
+  (slug = '',
     workspaceId = Cypress.env("workspaceId"),
     appId = Cypress.env("appId"),
     componentSelector = "[data-cy='empty-editor-text']"
   ) => {
+    cy.intercept('GET', '/api/v2/apps/*').as('getAppData');
     cy.window({ log: false }).then((win) => {
       win.localStorage.setItem("walkthroughCompleted", "true");
     });
-    cy.visit(`/${workspaceId}/apps/${appId}`);
+    cy.visit(`/${workspaceId}/apps/${appId}${slug}`);
+    cy.wait('@getAppData').then((interception) => {
+      // Assuming the response body is a JSON object
+      const responseData = interception.response.body;
+
+      // Set the response data as an environment variable
+      Cypress.env('apiResponseData', responseData);
+
+      // You can log it to check if the env var is set correctly
+      cy.log(Cypress.env('apiResponseData'));
+    });
     cy.get(componentSelector, { timeout: 10000 });
   }
 );
@@ -140,7 +151,7 @@ Cypress.Commands.add("apiCreateWorkspace", (workspaceName, workspaceSlug) => {
     cy.request(
       {
         method: "POST",
-        url: "http://localhost:3000/api/organizations",
+        url: `${Cypress.env("server_host")}/api/organizations`,
         headers: {
           "Tj-Workspace-Id": Cypress.env("workspaceId"),
           Cookie: `tj_auth_token=${cookie.value}`,
@@ -162,7 +173,7 @@ Cypress.Commands.add("logoutApi", () => {
     cy.request(
       {
         method: "GET",
-        url: "http://localhost:3000/api/logout",
+        url: `${Cypress.env("server_host")}/api/logout`,
         headers: {
           "Tj-Workspace-Id": Cypress.env("workspaceId"),
           Cookie: `tj_auth_token=${cookie.value}`,
@@ -180,7 +191,7 @@ Cypress.Commands.add("userInviteApi", (userName, userEmail) => {
     cy.request(
       {
         method: "POST",
-        url: "http://localhost:3000/api/organization_users",
+        url: `${Cypress.env("server_host")}/api/organization_users`,
         headers: {
           "Tj-Workspace-Id": Cypress.env("workspaceId"),
           Cookie: `tj_auth_token=${cookie.value}`,
@@ -207,7 +218,7 @@ Cypress.Commands.add("addQueryApi", (queryName, query, dataQueryId) => {
     };
     cy.request({
       method: "PATCH",
-      url: `http://localhost:3000/api/data_queries/${dataQueryId}`,
+      url: `${Cypress.env("server_host")}/api/data_queries/${dataQueryId}`,
       headers: headers,
       body: {
         name: queryName,
@@ -234,7 +245,7 @@ Cypress.Commands.add(
 
       cy.request({
         method: "GET",
-        url: `http://localhost:3000/api/apps/${appId}`,
+        url: `${Cypress.env("server_host")}/api/apps/${appId}`,
         headers: {
           "Tj-Workspace-Id": workspaceId,
           Cookie: `${authToken}; app_id=${appId}`,
@@ -246,7 +257,7 @@ Cypress.Commands.add(
 
         cy.request({
           method: "POST",
-          url: "http://localhost:3000/api/data_queries",
+          url: `${Cypress.env("server_host")}/api/data_queries`,
           headers: {
             "Content-Type": "application/json",
             Cookie: authToken,
@@ -273,3 +284,73 @@ Cypress.Commands.add(
     });
   }
 );
+
+
+Cypress.Commands.add("addComponentToApp", (appName, componentName, layoutConfig = {}) => {
+  cy.task("updateId", {
+    dbconfig: Cypress.env("app_db"),
+    sql: `select id from apps where name='${appName}';`,
+  }).then((resp) => {
+    const appId = resp.rows[0]?.id; // Safely access the id field
+
+    if (!appId) {
+      throw new Error(`App ID not found for appName: ${appName}`);
+    }
+
+    // Default layout values
+    const defaultLayout = {
+      desktop: { top: 90, left: 9, width: 6, height: 40 },
+      mobile: { top: 90, left: 9, width: 6, height: 40 },
+    };
+
+    // Merge default layout with the provided configuration
+    const layouts = {
+      desktop: { ...defaultLayout.desktop, ...layoutConfig.desktop },
+      mobile: { ...defaultLayout.mobile, ...layoutConfig.mobile },
+    };
+
+    cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
+      Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
+
+      cy.request({
+        method: "GET",
+        url: `${Cypress.env("server_host")}/api/v2/apps/${appId}`,
+        headers: {
+          "Tj-Workspace-Id": Cypress.env("workspaceId"),
+          Cookie: `tj_auth_token=${cookie.value}`,
+        },
+      }).then((response) => {
+        expect(response.status).to.eq(200);
+
+        const { id: editingVersionId, home_page_id: homePageId } = response.body.editing_version;
+        const componentId = crypto.randomUUID ? crypto.randomUUID() : require("uuid").v4();
+
+        const requestBody = {
+          is_user_switched_version: false,
+          pageId: homePageId,
+          diff: {
+            [componentId]: {
+              name: componentName,
+              layouts: layouts,
+              type: "Text",
+            },
+          },
+        };
+
+        cy.request({
+          method: "POST",
+          url: `${Cypress.env("server_host")}/api/v2/apps/${appId}/versions/${editingVersionId}/components`,
+          headers: {
+            "Content-Type": "application/json",
+            "Tj-Workspace-Id": Cypress.env("workspaceId"),
+            Cookie: `tj_auth_token=${cookie.value}`,
+          },
+          body: requestBody,
+        }).then((postResponse) => {
+          expect(postResponse.status).to.eq(201);
+          cy.log(`Component ${componentId} added successfully`);
+        });
+      });
+    });
+  });
+});

cypress-tests/cypress/commands/commands.js

@@ -5,16 +5,21 @@ import { commonText, createBackspaceText } from "Texts/common";
 import { passwordInputText } from "Texts/passwordInput";
 import { importSelectors } from "Selectors/exportImport";
 import { importText } from "Texts/exportImport";
+import { onboardingSelectors } from "Selectors/onboarding";
 
 Cypress.Commands.add(
-  "login",
+  "appUILogin",
   (email = "dev@tooljet.io", password = "password") => {
     cy.visit("/");
-    cy.clearAndType(commonSelectors.workEmailInputField, email);
-    cy.clearAndType(commonSelectors.passwordInputField, password);
-    cy.get(commonSelectors.signInButton).click();
-    cy.wait(2000);
-    cy.get(commonSelectors.homePageLogo).should("be.visible");
+    cy.wait(3000);
+    cy.clearAndType(onboardingSelectors.loginEmailInput, email);
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, password);
+    cy.get(onboardingSelectors.signInButton).click();
+
+    cy.intercept("GET", "/api/library_apps/").as("library_apps");
+    cy.get(commonSelectors.homePageLogo, { timeout: 10000 });
+    cy.wait("@library_apps");
+
   }
 );
 
@@ -69,7 +74,7 @@ Cypress.Commands.add(
   "dragAndDropWidget",
   (
     widgetName,
-    positionX = 190,
+    positionX = 80,
     positionY = 80,
     widgetName2 = widgetName,
     canvas = commonSelectors.canvas
@@ -90,51 +95,48 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add("appUILogin", () => {
-  cy.visit("/");
-  cy.clearAndType(commonSelectors.workEmailInputField, "dev@tooljet.io");
-  cy.clearAndType(commonSelectors.passwordInputField, "password");
-  cy.get(commonSelectors.signInButton).click();
-  cy.wait(2000);
-  cy.get(commonSelectors.homePageLogo).should("be.visible");
-});
 
-Cypress.Commands.add(
-  "clearAndTypeOnCodeMirror",
-  {
-    prevSubject: "optional",
-  },
-  (subject, value) => {
-    cy.wrap(subject)
-      .realClick()
-      .find("pre.CodeMirror-line")
-      .invoke("text")
-      .then((text) => {
-        cy
-          .wrap(subject)
-          .last()
-          .click()
-          .type(createBackspaceText(text), { delay: 0 }),
-        {
-          delay: 0,
-        };
-      });
-    if (!Array.isArray(value)) {
-      cy.wrap(subject).last().type(value, {
-        parseSpecialCharSequences: false,
-        delay: 0,
-      });
-    } else {
+Cypress.Commands.add("clearAndTypeOnCodeMirror", { prevSubject: "optional" }, (subject, value) => {
+  cy.wrap(subject)
+    .realClick()
+    .find(".cm-line")
+    .invoke("text")
+    .then((text) => {
       cy.wrap(subject)
         .last()
-        .type(value[1], {
-          parseSpecialCharSequences: false,
-          delay: 0,
-        })
-        .type(`{home}${value[0]}`, { delay: 0 });
-    }
+        .click()
+        .type(createBackspaceText(text), { delay: 0 });
+    });
+
+  const splitIntoFlatArray = (value) => {
+    const regex = /(\{\{)|([^{}]+)|(\}\})/g;
+    let prefix = "";
+    return value.match(regex)?.reduce((acc, part) => {
+      if (part === "{{") {
+        prefix = "{leftarrow}{leftarrow}";
+        acc.push(part); // Keep '{{' as is
+      } else if (part === "}}") {
+        // Skip '}}'
+      } else {
+        acc.push(prefix + part); // Add prefix to any other part, including spaces
+        prefix = ""; // Reset prefix
+      }
+      return acc;
+    }, []) || [];
+  };
+
+  if (Array.isArray(value)) {
+    cy.wrap(subject).last().realType(value, { parseSpecialCharSequences: false, delay: 0, force: true });
+  } else {
+    splitIntoFlatArray(value).forEach((i) => {
+      cy.wrap(subject)
+        .last()
+        .click()
+        .realType(`{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}{end}${i}`, { parseSpecialCharSequences: false, delay: 0, force: true });
+    });
   }
-);
+});
+
 
 Cypress.Commands.add("deleteApp", (appName) => {
   cy.intercept("DELETE", "/api/apps/*").as("appDeleted");
@@ -189,7 +191,7 @@ Cypress.Commands.add(
   (subject, value) => {
     cy.wrap(subject)
       .realClick()
-      .find("pre.CodeMirror-line")
+      .find(".cm-line")
       .invoke("text")
       .then((text) => {
         cy.wrap(subject).realType(createBackspaceText(text)),
@@ -365,7 +367,7 @@ Cypress.Commands.add("getPosition", (componentName) => {
 
 Cypress.Commands.add("defaultWorkspaceLogin", () => {
   cy.apiLogin();
-  cy.intercept("GET", "http://localhost:3000/api/library_apps").as(
+  cy.intercept("GET", "/api/library_apps").as(
     "library_apps"
   );
   cy.visit("/my-workspace");
@@ -468,3 +470,12 @@ Cypress.Commands.add("appPrivacy", (appName, isPublic) => {
     sql: `UPDATE apps SET is_public = ${isPublicValue} WHERE name = '${appName}';`,
   });
 });
+
+Cypress.Commands.overwrite('intercept', (originalFn, method, endpoint, mockData) => {
+  const isSubpath = Cypress.config('baseUrl')?.includes('/apps/tooljet');
+  const cleanEndpoint = endpoint.replace('/apps/tooljet', '');
+  const fullUrl = isSubpath ? `/apps/tooljet${cleanEndpoint}` : cleanEndpoint;
+
+  return originalFn(method, fullUrl, mockData);
+});
+

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

@@ -5,10 +5,10 @@ export const cyParamName = (paramName = "") => {
 export const commonSelectors = {
   toastMessage: ".go3958317564",
   oldToastMessage: ".go318386747",
-  newToastMessage:
-    '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551',
+  newToastMessage: '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551 > .go3958317564',
   toastCloseButton: '[data-cy="toast-close-button"]',
   editButton: "[data-cy=edit-button]",
+  fileSelector: "[data-cy=uploaded-file-data]",
   searchField: "[data-cy='widget-search-box-search-bar']",
   firstWidget: "[data-cy=widget-list]:eq(0)",
   canvas: "[data-cy=real-canvas]",
@@ -21,9 +21,9 @@ export const commonSelectors = {
   workEmailLabel: '[data-cy="work-email-label"]',
   workEmailInputField: "[data-cy=work-email-input]",
   emailInputError: '[data-cy="email-error-message"]',
-  passwordLabel: '[data-cy="password-label"]',
+  passwordLabel: '[data-cy="password-input-label"]',
   forgotPasswordLink: '[data-cy="forgot-password-link"]',
-  passwordInputField: '[data-cy="password-input-field"]',
+  passwordInputField: '[data-cy="password-input-input"]',
   signInButton: "[data-cy=login-button]",
   loginButton: '[data-cy="login-button"]',
   dropdown: "[data-cy=workspace-dropdown]",
@@ -63,20 +63,21 @@ export const commonSelectors = {
   workspaceLoginUrl: "[data-cy=workspace-login-url]",
   workspaceName: '[data-cy="workspace-name"]:eq(0)',
   signInHeader: '[data-cy="sign-in-header"]',
-  signInSubHeader: '[data-cy="sign-in-sub-header"]',
+  signInSubHeader: '[data-cy="signup-info"]',
   createAnAccountLink: '[data-cy="create-an-account-link"]',
-  SignUpSectionHeader: '[data-cy="signup-section-header"]',
+  signUpSectionHeader: '[data-cy="sign-up-header"]',
   signInRedirectText: '[data-cy="signin-redirect-text"]',
-  signInRedirectLink: '[data-cy="signin-redirect-link"]',
+  signInRedirectLink: '[data-cy="signin-link"]',
   signUpTermsHelperText: '[data-cy="signup-terms-helper"]',
   termsOfServiceLink: '[data-cy="terms-of-service-link"]',
   privacyPolicyLink: '[data-cy="privacy-policy-link"]',
   redirectURL: '[data-cy="redirect-url"]',
-  invitePageHeader: '[data-cy="invite-page-header"]',
-  invitePageSubHeader: '[data-cy="invite-page-sub-header"]',
+  invitePageHeader: '[data-cy="join-my-workspace-header"]',
+  invitePageSubHeader: '[data-cy="onboarding-page-description"]',
   userNameInputLabel: '[data-cy="name-input-label"]',
-  invitedUserName: '[data-cy="invited-user-name"]',
-  invitedUserEmail: '[data-cy="invited-user-email"]',
+  invitedUserName: '[data-cy="name-input-input-value"]',
+  invitedUserEmail: '[data-cy="email-input-value"]',
+  invitedUseremail: '[data-cy="email-input-input-value"]',
   acceptInviteButton: '[data-cy="accept-invite-button"]',
   databaseIcon: '[data-cy="icon-database"]',
   profileSettings: '[data-cy="profile-settings"]',
@@ -108,6 +109,9 @@ export const commonSelectors = {
   exportAllButton: '[data-cy="export-all-button"]',
   avatarImage: '[data-cy="avatar-image"]',
   selfHostSetUpBanner: '[data-cy="setup-banner-inner"]',
+  HostBanner: '[data-cy="onboarding-image"]',
+  adminSetup: '[data-cy="set-up-your-admin-account-header"]',
+  signupTerms: '[data-cy="signup-terms-helper"]',
   selfHostSetUpSubBanner: '[data-cy="setup-sub-banner"]',
   selfHostSetUpCard: '[data-cy="setup-card"]',
   selfHostSetUpCardImage: '[data-cy="setup-card-image"]',
@@ -115,52 +119,59 @@ export const commonSelectors = {
   selfHostSetUpCardSubHeader: '[data-cy="setup-card-sub-header"]',
   setUpToolJetButton: '[data-cy="setup-tooljet-button"]',
   setUpadminCheckPoint: '[data-cy="set-up-admin-check-point"]',
-  setUpworkspaceCheckPoint: '[data-cy="set-up-workspace-check-point"]',
+  setUpworkspaceCheckPoint: '[data-cy="set-up-your-workspace!-header"]',
   companyProfileCheckPoint: '[data-cy="company-profile-check-point"]',
   onboardingPageHeader: '[data-cy="onboarding-page-header"]',
   onboardingPageSubHeader: '[data-cy="onboarding-page-sub-header"]',
   onboardingPageDescription: '[data-cy="onboarding-page-description"]',
-  passwordHelperText: '[data-cy="password-helper-text"]',
+  passwordHelperText: '[data-cy="new-password-input-hint"]',
   continueButton: '[data-cy="continue-button"]',
+  passwordHelperTextSignup: '[data-cy="password-input-hint"]',
+  continueButton: '[data-cy="sign-up-button"]',
+  OnbordingContinue: '[data-cy="onboarding-submit-button"]',
   userAccountNameAvatar: '[data-cy="user-account-name-avatar"]',
-  workspaceNameInputLabel: '[data-cy="workspace-name-input-label"]',
-  workspaceNameInputField: '[data-cy="workspace-name-input-field"]',
+  workspaceNameInputLabel: '[data-cy="onboarding-workspace-name-label"]',
+  workspaceNameInputField: '[data-cy="onboarding-workspace-name-input"]',
   backArrow: '[data-cy="back-arrow"]',
   backArrowText: '[data-cy="back-arrow-text"]',
   onboardingPorgressBubble: '[data-cy="onboarding-progress-bubbles"]',
   skipArrow: '[data-cy="skip-button"]',
   skipArrowText: '[data-cy="skip-arrow-text"]',
   companyNameInputField: '[data-cy="company-name-input-field"]',
-  nameInputField: '[data-cy="name-input-field"]',
-  emailInputField: '[data-cy="email-input-field"]',
+  nameInputField: '[data-cy="name-input-input"]',
+  emailInputField: '[data-cy="email-input-input"]',
+  skipbutton: '[class="driver-close-btn"]',
+  backLogo: '[data-cy="editor-page-logo"]',
+  backtoapps: '[data-cy="back-to-app-option"]',
   signUpButton: '[data-cy="sign-up-button"]',
   emailImage: '[data-cy="email-image"]',
-  spamMessage: '[data-cy="email-page-spam-msg"]',
-  resendEmailButton: '[data-cy="resend-email-button"]',
+  spamMessage: '[data-cy="info-message"]',
+  resendEmailButton: '[data-cy="resend-verification-email-button"]',
   editEmailButton: '[data-cy="edit-email-button"]',
   createAccountCheckMark: '[data-cy="create-account-check-mark"]',
   createAccountCheckPoint: '[data-cy="create-account-check-point"]',
   verifyEmailCheckMark: '[data-cy="verify-email-check-mark"]',
   verifyEmailCheckPoint: '[data-cy="verify-email-check-point"]',
   backtoSignUpButton: '[data-cy="back-to-signup-button"]',
-  forgotPasswordPageHeader: '[data-cy="forgot-password-page-header"]',
-  forgotPasswordPageSubHeader: '[data-cy="forgot-password-sub-header"]',
-  resetPasswordLinkButton: '[data-cy="reset-password-link"]',
+  forgotPasswordPageHeader: '[data-cy="forgot-password-header"]',
+  forgotPasswordPageSubHeader: '[data-cy="signup-redirect-text"]',
+  resetPasswordLinkButton: '[data-cy="send-a-reset-link-button"]',
   enterIcon: '[data-cy="enter-icon"]',
-  passwordResetPageHeader: '[data-cy="reset-password-page-header"]',
+  passwordResetPageHeader: '[data-cy="reset-password-header"]',
   newPasswordInputLabel: '[data-cy="new-password-input-label"]',
-  newPasswordInputField: '[data-cy="new-password-input-field"]',
+  newPasswordInputField: '[data-cy="new-password-input-input"]',
   confirmPasswordInputFieldLabel: '[data-cy="confirm-password-input-label"]',
-  confirmPasswordInputField: '[data-cy="confirm-password-input-field"]',
+  confirmPasswordInputField: '[data-cy="confirm-password-input-input"]',
   resetPasswordButton: '[data-cy="reset-password-button"]',
   resetPasswordPageDescription: '[data-cy="reset-password-page-description"]',
-  backToLoginButton: '[data-cy="back-to-login-button"]',
+  backToLoginButton: '[data-cy="back-to-login"]',
   breadcrumbTitle: '[data-cy="app-header-label"]>>',
+  // breadcrumbPageTitle: '[data-cy="app-header-label"]',
   breadcrumbPageTitle: '[data-cy="breadcrumb-page-title"]',
-  labelFullNameInput: '[data-cy="label-full-name-input-field"]',
-  inputFieldFullName: '[data-cy="input-field-full-name"]',
-  labelEmailInput: '[data-cy="label-email-input-field"]',
-  inputFieldEmailAddress: '[data-cy="input-field-email"]',
+  labelFullNameInput: '[data-cy="name-label"]',
+  inputFieldFullName: '[data-cy="name-input"]',
+  labelEmailInput: '[data-cy="email-label"]',
+  inputFieldEmailAddress: '[data-cy="email-input"]',
   closeButton: '[data-cy="close-button"]',
   emptyAppCreateButton: "[data-cy='button-new-app-from-scratch']",
   globalDataSourceIcon: '[data-cy="icon-global-datasources"]',
@@ -212,7 +223,7 @@ export const commonSelectors = {
     return `[data-cy="${cyParamName(folderName)}-edit-folder-option"]`;
   },
   inspectorPinIcon: '.d-flex > [data-cy="left-sidebar-inspector"]',
-  groupInputFieldLabel: '[data-cy="label-group-input-field"]',
+  groupInputFieldLabel: '[data-cy="user-group-label"]',
   pageSectionHeader: '[data-cy="dashboard-section-header"]',
   yesButton: '[data-cy="yes-button"]',
 
@@ -262,7 +273,7 @@ export const commonSelectors = {
 
 export const commonWidgetSelector = {
   widgetBox: (widgetName) => {
-    return `[data-cy=widget-list-box-${cyParamName(widgetName)}]`;
+    return `[data-cy=widget-list-box-${cyParamName(widgetName)}]:eq(0)`;
   },
 
   draggableWidget: (widgetName) => {

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

@@ -16,7 +16,7 @@ export const dashboardSelector = {
   ManageSSO: "[data-cy=manage-sso]",
   userMenu: "[data-cy=user-menu]",
   profileLink: "[data-cy=profile-link]",
-  logoutLink: "[data-cy=logout-link]",
+  logoutLink: '[data-cy="logout-link"]',
   changeIconTitle: "[data-cy=change-icon-title]",
   appCardDefaultIcon: "[data-cy=app-card-apps-icon]",
   changeButton: "[data-cy=change-button]",

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

@@ -32,8 +32,8 @@ export const ssoSelector = {
   redirectUrlLabel: "[data-cy=redirect-url-label]",
   redirectUrl: "[data-cy=redirect-url]",
   googleTile: '[data-cy="google-sign-in-text"]',
-  googleIcon: "[data-cy=google-sso-icon]",
-  googleSSOText: "[data-cy=google-sso-text]",
+  googleIcon: "[data-cy=google-sso-button]",
+  googleSSOText: "[data-cy=google-sso-button-text]",
   git: '[data-cy="github-sso-card"]',
   gitEnableToggle: '[data-cy="github-toggle-input"]',
   githubLabel: '[data-cy="github-label"]',
@@ -41,9 +41,9 @@ export const ssoSelector = {
   encriptedLabel: "[data-cy=encripted-label]",
   clientSecretInput: "[data-cy=client-secret-input]",
   gitTile: "[data-cy=git-tile]",
-  gitIcon: "[data-cy=git-sso-icon]",
-  gitSignInText: "[data-cy=git-sso-text]",
-  gitSSOText: "[data-cy=git-sso-text]",
+  gitIcon: "[data-cy='git-sso-button-text']",
+  gitSignInText: "[data-cy='git-sso-button-text']",
+  gitSSOText: "[data-cy=git-sso-button-text]",
   password: "[data-cy=left-menu-items] :eq(3)",
   passwordEnableToggle: '[data-cy="password-enable-toggle"]',
   loginHelpText: "[data-cy=login-help-text]",

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

@@ -62,10 +62,8 @@ export const usersSelector = {
   inputFieldBulkUpload: '[data-cy="input-field-bulk-upload"]',
   copyInvitationLink: '[data-cy="copy-invitation-link"]',
   uploadedFileData: '[data-cy="uploaded-file-data"]',
-  toastCloseButton:
-    '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551 > [data-cy="toast-close-button"]',
-
-
+  modalClose: '.tj-base-btn.tj-large-btn.tj-primary-btn.close-btn',
+  toastCloseButton:'.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551 > [data-cy="toast-close-button"]',
   userName: (userName) => {
     return `[data-cy="${cyParamName(userName)}-user-name"]`;
   },

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

@@ -0,0 +1,20 @@
+export const cyParamName = (paramName = "") => {
+  return paramName.toLowerCase().replace(/\s+/g, "-");
+};
+
+export const onboardingSelectors = {
+  emailLabel: "[data-cy='email-label']",
+  emailInput: "[data-cy='email-input-input']",
+  signupEmailInput: "[data-cy='email-input']",
+  loginEmailInput: "[data-cy='email-input']",
+  passwordLabel: "[data-cy='password-label']",
+  passwordInput: "[data-cy='password-input-input']",
+  loginPasswordInput: "[data-cy='password-input']",
+  signInButton: "[data-cy='sign-in-button']",
+  passwordError: "[data-cy='password-error']",
+  nameInput: "[data-cy='name-input']",
+  nameLabel: '[data-cy="name-input-label"]',
+  signupNameLabel: '[data-cy="name-label"]',
+  forgotEmailInput: '[data-cy="email-input-field-input"]',
+  createAnAccountLink: '[data-cy="create-an-account-link"]',
+} 

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

@@ -1,19 +1,19 @@
-export const cyParamName = (paramName = "") => {
-    return paramName.toLowerCase().replace(/\s+/g, "-");
-};
+import { cyParamName } from "./common";
+
 
 export const workspaceConstantsSelectors = {
     workspaceConstantsHelperText: '[data-cy="workspace-constant-helper-text"]',
     emptyStateImage: '[data-cy="empty-state-image"]',
     emptyStateHeader: '[data-cy="empty-state-header"]',
     emptyStateText: '[data-cy="empty-state-text"]',
-    addNewConstantButton: '[data-cy="add-new-constant-button"]',
+    addNewConstantButton: '[data-cy="form-add-new-constant-button"]',
     contantFormTitle: '[data-cy="constant-form-title"]',
     addConstantButton: '[data-cy="add-constant-button"]',
     envName: '[data-cy="env-name"]',
     constantsTableNameHeader: '[data-cy="workspace-variable-table-name-header"]',
     constantsTableValueHeader:
         '[data-cy="workspace-variable-table-value-header"]',
+    nameInputFiled: '[data-cy="name-input-field"]',
 
     constantName: (constName) => {
         return `[data-cy="${cyParamName(constName)}-workspace-constant-name"]`;
@@ -30,4 +30,7 @@ export const workspaceConstantsSelectors = {
     constHideButton: (constName) => {
         return `[data-cy="${cyParamName(constName)}-constant-visibility"]`;
     },
+    constantsType: (type) => {
+        return `[data-cy="${cyParamName(type)}-constants-input"]`;
+    },
 };

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

@@ -52,13 +52,14 @@ export const commonText = {
   },
   closeButton: "modal close",
   workEmailLabel: "Email",
-  emailInputError: "Invalid Email",
-  passwordLabel: "Password",
+  emailInputError: "Email is invalid",
+  passwordLabel: "Password *",
+  LoginPasswordLabel: "Password",
   forgotPasswordLink: "Forgot?",
   loginButton: " Login",
   signInHeader: "Sign in",
   signInSubHeader: "New to ToolJet?Create an account",
-  SignUpSectionHeader: "Join ToolJet",
+  signUpSectionHeader: "Join ToolJet",
   signInRedirectText: "Already have an account?",
   signInRedirectLink: "Sign in",
   signUpTermsHelperText: "By signing up you are agreeing to the",
@@ -67,11 +68,11 @@ export const commonText = {
   invitePageHeader: "Join My workspace",
   invitePageSubHeader:
     "You are invited to a workspace My workspace. Accept the invite to join the workspace.",
-  userNameInputLabel: "Name",
-  acceptInviteButton: "Accept invite",
+  userNameInputLabel: "Name *",
+  acceptInviteButton: "Accept Invite",
   createButton: "Create",
   saveChangesButton: "Save changes",
-  emailInputLabel: "Email",
+  emailInputLabel: "Email *",
   allApplicationLink: "All apps",
   notificationsCardTitle: "Notifications",
   emptyNotificationTitle: "You're all caught up!",
@@ -86,7 +87,7 @@ export const commonText = {
     "Let’s set up your workspace to get started with ToolJet",
   setUpToolJetButton: "Set up ToolJet",
   setUpadminCheckPoint: "Set up admin",
-  setUpworkspaceCheckPoint: "Set up workspace",
+  setUpworkspaceCheckPoint: "Set up your workspace!",
   companyProfileCheckPoint: "Company profile",
   setUpAdminHeader: "Set up your admin account",
   onboardingPageSubHeader: "This information will help us improve ToolJet.",
@@ -94,17 +95,18 @@ export const commonText = {
   continueButton: "Continue",
   resetPasswordButton: "Reset password",
   setUpWorkspaceHeader: "Set up your workspace",
+  loginPasswordLabel: "Password *",
   userRolePageHeader: "What best describes your role?",
   sizeOftheCompanyHeader: "What is the size of your company?",
-  workspaceNameInputLabel: "Workspace name",
+  workspaceNameInputLabel: "Workspace name *",
   onboardingSeperatorText: "OR",
   getStartedButton: "Get started for free",
   emailPageHeader: "Check your mail",
-  spamMessage: "Did not receive an email? Check your spam folder.",
+  spamMessage: "Did not receive an email? Check your spam folder!",
   resendEmailButton: "Resend verification mail",
   editEmailButton: "Edit email address",
   emailVerifiedText: "Successfully verified email",
-  continueToSetUp: "Continue to set up your workspace to start using ToolJet.",
+  continueToSetUp: "Set up workspaces to manage users, applications & resources across various teams",
   createAccountCheckPoint: "Create account",
   verifyEmailCheckPoint: "Verify email",
   inalidInvitationLinkHeader: "Invalid verification link",
@@ -114,15 +116,15 @@ export const commonText = {
   forgotPasswordPageHeader: "Forgot Password",
   newToTooljetText: "New to ToolJet?",
   emailAddressLabel: "Email address",
-  resetPasswordLinkButton: " Send a reset link",
+  resetPasswordLinkButton: "Send a reset link",
   passwordResetEmailToast:
-    "Please check your email/inbox for the password reset link",
+    "Please check your email for the password reset link",
   passwordResetPageHeader: "Reset Password",
   passwordResetSuccessPageHeader: "Password has been reset",
-  newPasswordInputLabel: "New Password",
-  confirmPasswordInputFieldLabel: "Re-enter the password",
+  newPasswordInputLabel: "New Password *",
+  confirmPasswordInputFieldLabel: "Re-enter the password *",
   passwordResetSuccessToast: "Password reset successfully",
-  backToLoginButton: "Back to log in",
+  backToLoginButton: "Back to login",
   resetPasswordPageDescription:
     "Your password has been reset successfully, log into ToolJet to continue your session",
   labelFullNameInput: "Enter full name",
@@ -135,13 +137,13 @@ export const commonText = {
   addNewDataSourceButton: "Add new datasource",
 
   emailPageDescription: (email) => {
-    return `We’ve sent an email to ${email} with a verification link. Please use that to verify your email address.`;
+    return `We've sent a verification email to ${email}. Click the link inside to confirm your email and continue. This helps us ensure account security.`
   },
   companyPageHeader: (userName) => {
     return `Where do you work ${userName}?`;
   },
   resetPasswordEmailDescription: (email) => {
-    return `We’ve sent an email to ${email} with a password reset link. Please click on that link to reset your password.`;
+    return `We've sent a password reset link to ${email}. Click the link inside to reset your password and continue.`;
   },
   userJobRole: {
     HeadOfEngineering: "Head of engineering",

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

@@ -1,10 +1,12 @@
 export const workspaceConstantsText = {
     workspaceConstantsHelperText:
-        "To resolve a Workspace constant use {{constants.access_token}}",
+        "To resolve a global workspace constant use {{constants.access_token}}",
     emptyStateHeader: "No Workspace constants yet",
     emptyStateText:
         "Use workspace constants seamlessly in both the app builder and data source connections across ToolJet.",
-    addNewConstantButton: "Create new constant",
+    addNewConstantButton: "+ Create new constant",
     addConstatntText: "Add new constant in production ",
-    constantCreatedToast: "Constant has been created",
+    constantCreatedToast: (type) => { return `${type} constant created successfully!` },
+    constantsExisitToast: (type) => { return `${type} constant already exists!` }
+
 };

cypress-tests/cypress/e2e/happyPath/appbuilder/commonTestcases/codehinter.cy.js

@@ -0,0 +1,29 @@
+import { fake } from "Fixtures/fake";
+import { addAndVerifyOnSingleLine } from "Support/utils/editor/codehinter";
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import {
+    openEditorSidebar,
+} from "Support/utils/commonWidget";
+
+describe("Editor- CodeHinter", () => {
+    let currentVersion = "";
+    let newVersion = [];
+    let versionFrom = "";
+    beforeEach(() => {
+        cy.apiLogin();
+        cy.apiCreateApp(`${fake.companyName}-inspector-App`);
+        cy.apiOpenApp();
+    });
+
+    it.only("should verify singleLine: non dynamic values", () => {
+        cy.dragAndDropWidget("Text", 500, 500);
+        addAndVerifyOnSingleLine(`{{globals.currentUser.email}} {{globals.currentUser.firstName}} {{globals.currentUser.lastName}} {{globals.currentUser.id}} {{globals.currentUser.avatarId}} {{globals.currentUser.groups[0]}} {{globals.currentUser.groups[1]}} {{globals.currentUser.groups[2]}} {{globals.currentUser.role}} {{globals.currentUser.ssoUserInfo}} {{globals.environment.id}} {{globals.environment.name}} {{globals.mode.value}} {{globals.theme.name}} {{globals.urlparams}} {{page.handle}} {{page.id}} {{page.name}}`)
+        cy.get('[data-cy=draggable-widget-text1]:eq(0)').invoke('text').then((text => { cy.log(text) }))
+    });
+    it("should verify singleLine: dynamic values", () => {
+    });
+    it("should verify multiLine: non dynamic values", () => {
+    });
+    it("should verify multiLine: dynamic values", () => {
+    });
+});

cypress-tests/cypress/e2e/happyPath/appbuilder/commonTestcases/inspectorHappypath.cy.js

@@ -1,119 +1,79 @@
 import { fake } from "Fixtures/fake";
-import {
-  verifyMultipleComponentValuesFromInspector,
-  verifyComponentValueFromInspector,
-} from "Support/utils/commonWidget";
-import {
-  verifyNodeData,
-  openNode,
-  verifyValue,
-  deleteComponentFromInspector,
-} from "Support/utils/inspector";
-import { commonSelectors, commonWidgetSelector } from "Selectors/common";
-import { addNewPage } from "Support/utils/multipage";
-import {
-  selectCSA,
-  selectEvent,
-  addSupportCSAData,
-} from "Support/utils/events";
+import { commonWidgetSelector } from "Selectors/common";
 import { multipageSelector } from "Selectors/multipage";
-import { navigateToCreateNewVersionModal } from "Support/utils/version";
+import { addSupportCSAData, selectEvent } from "Support/utils/events";
 import { createNewVersion } from "Support/utils/exportImport";
+import { deleteComponentFromInspector, openNode, verifyNodeData, verifyValue, verifyNodes, openAndVerifyNode } from "Support/utils/inspector";
+import { addNewPage } from "Support/utils/multipage";
+import { navigateToCreateNewVersionModal } from "Support/utils/version";
+import testData from "Fixtures/inspectorItems.json";
 
 describe("Editor- Inspector", () => {
   let currentVersion = "";
   let newVersion = [];
   let versionFrom = "";
+
   beforeEach(() => {
     cy.apiLogin();
     cy.apiCreateApp(`${fake.companyName}-inspector-App`);
-    cy.openApp();
+    cy.openApp("?key=value");
   });
 
   it("should verify the values of inspector", () => {
-    const countGlobal =
-      Cypress.env("environment") === "Community" ? "4 entries " : "5 entries ";
-    const countUser =
-      Cypress.env("environment") === "Community" ? "4 entries " : "5 entries ";
     cy.get(commonWidgetSelector.sidebarinspector).click();
     cy.get(".tooltip-inner").invoke("hide");
-    verifyNodeData("queries", "Object", "0 entry ");
-    verifyNodeData("components", "Object", "0 entry ");
-    verifyNodeData("globals", "Object", countGlobal);
-    verifyNodeData("variables", "Object", "0 entry ");
-    verifyNodeData("page", "Object", "4 entries ");
 
-    openNode("globals");
-    verifyNodeData("theme", "Object", "1 entry ");
-    verifyNodeData("urlparams", "Object", "0 entry ");
-    verifyNodeData("currentUser", "Object", countUser);
+    openAndVerifyNode("globals", testData.globalsNodes, verifyNodeData);
+    openAndVerifyNode("currentUser", testData.currentUserNodes, verifyValue);
+    openAndVerifyNode("theme", testData.themeNodes, verifyValue);
+    openAndVerifyNode("mode", testData.modeNodes, verifyValue);
+    openAndVerifyNode("urlparams", testData.urlparamsNode, verifyValue);
 
-    openNode("theme");
-    verifyValue("name", "String", `"light"`);
-
-    openNode("currentUser");
-    verifyValue("email", "String", `"dev@tooljet.io"`);
-    verifyValue("firstName", "String", `"The"`);
-    verifyValue("lastName", "String", `"Developer"`);
-    verifyNodeData("groups", "Array", "2 items ");
     if (Cypress.env("environment") !== "Community") {
-      cy.get(
-        '[data-cy="inspector-node-ssouserinfo"] > .node-key'
-      ).verifyVisibleElement("have.text", "ssoUserInfo");
-      cy.get(
-        '[data-cy="inspector-node-ssouserinfo"] > .mx-2'
-      ).verifyVisibleElement("have.text", "undefined");
+      const ssoUserInfoNode = '[data-cy="inspector-node-ssouserinfo"]';
+      const inspectorNodeId = '[data-cy="inspector-node-id"]';
+
+      cy.get(`${ssoUserInfoNode} > .node-key`).should("have.text", "ssoUserInfo");
+      cy.get(`${ssoUserInfoNode} > .mx-2`).should("have.text", "undefined");
+
       openNode("theme");
       openNode("environment");
       verifyValue("name", "String", `"development"`);
-      cy.get('[data-cy="inspector-node-id"] > .node-key').verifyVisibleElement(
-        "have.text",
-        "id"
-      );
+      cy.get(`${inspectorNodeId} > .node-key`).should("have.text", "id");
     }
-    openNode("mode");
-    verifyValue("value", "String", `"edit"`);
 
-    openNode("groups");
-    verifyValue("0", "String", `"all_users"`);
-    verifyValue("1", "String", `"admin"`);
-    verifyNodeData("constants", "Object", "0 entry ");
+    cy.apiDeleteApp();
+  });
 
-    openNode("globals");
-    openNode("page");
-    verifyValue("handle", "String", `"home"`);
-    verifyValue("name", "String", `"Home"`);
+  it("should verify dynamic items", () => {
+    cy.get(commonWidgetSelector.sidebarinspector).click();
+    cy.get(".tooltip-inner").invoke("hide");
 
     cy.get(multipageSelector.sidebarPageButton).click();
     addNewPage("test_page");
 
     cy.dragAndDropWidget("Button", 500, 500);
     selectEvent("On click", "Switch page");
-    cy.get('[data-cy="switch-page-label-and-input"] > .select-search')
-      .click()
-      .type("home{enter}");
+    cy.get('[data-cy="switch-page-label-and-input"] > .select-search').click().type("home{enter}");
 
     cy.get('[data-cy="button-add-query-param"]').click();
     cy.wait(3000);
     cy.get("body").then(($body) => {
-      if (
-        $body.find('[data-cy="event-query-param-key-input-field"]').length == 0
-      ) {
+      if ($body.find('[data-cy="event-query-param-key-input-field"]').length == 0) {
         cy.get('[data-cy="button-add-query-param"]').click();
       }
     });
 
-    addSupportCSAData("query-param-key", "key");
-    addSupportCSAData("query-param-value", "value");
-    cy.get('[data-cy="switch-page-label-and-input"] > .select-search')
-      .click()
-      .type("home{enter}");
+    addSupportCSAData("event-query-param-key", "key");
+    addSupportCSAData("event-query-param-value", "value");
+    cy.get('[data-cy="switch-page-label-and-input"] > .select-search').click().type("home{enter}");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
     cy.dragAndDropWidget("Button", 500, 300);
     selectEvent("On click", "Set variable");
-    addSupportCSAData("key", "globalVar");
+    addSupportCSAData("event-key", "globalVar");
     addSupportCSAData("variable", "globalVar");
+
     cy.forceClickOnCanvas();
     cy.waitForAutoSave();
     cy.get(commonWidgetSelector.draggableWidget("button2")).click();
@@ -123,41 +83,41 @@ describe("Editor- Inspector", () => {
     selectEvent("On click", "Set page variable");
     addSupportCSAData("key", "pageVar");
     addSupportCSAData("variable", "pageVar");
+
     cy.forceClickOnCanvas();
     cy.waitForAutoSave();
     cy.get(commonWidgetSelector.draggableWidget("button3")).click();
 
     cy.get(commonWidgetSelector.sidebarinspector).click();
-    openNode("variables");
-    verifyValue("globalVar", "String", `"globalVar"`);
+    openAndVerifyNode("variables", testData.variablesNodes, verifyValue);
 
-    openNode("page");
+    cy.forceClickOnCanvas()
+    cy.wait(500)
+    cy.get(commonWidgetSelector.sidebarinspector).click();
+    cy.get(".tooltip-inner").invoke("hide");
+
+    // openNode("page");
+
+    openAndVerifyNode("page", testData.testPageNodes, verifyValue);
     openNode("variables", 1);
     verifyValue("pageVar", "String", `"pageVar"`);
-    verifyValue("handle", "String", `"test-page"`);
-    verifyValue("name", "String", `"test_page"`);
 
-    openNode("components");
-    verifyNodeData("button1", "Object", "7 entries ");
-    verifyNodeData("button2", "Object", "7 entries ");
-    verifyNodeData("button3", "Object", "7 entries ");
+    openAndVerifyNode("components", testData.componentsNodes, verifyNodeData);
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
     cy.get(commonWidgetSelector.draggableWidget("button1")).click();
     cy.get(commonWidgetSelector.sidebarinspector).click();
 
-    openNode("page");
-    verifyValue("handle", "String", `"home"`);
-    verifyValue("name", "String", `"Home"`);
-
+    openAndVerifyNode("page", testData.pageNodes, verifyValue);
     openNode("globals");
-    verifyNodeData("urlparams", "Object", "1 entry ");
-
     openNode("urlparams");
     verifyValue("key", "String", `"value"`);
 
-    cy.get(`[data-cy="inspector-node-key"] > .mx-1`).realHover();
-    cy.get('[data-cy="copy-path-to-clipboard"]').realClick();
+    cy.get(`[data-cy="inspector-node-key"] > .mx-1`)
+      .realHover()
+      .parent()
+      .find('[data-cy="copy-path-to-clipboard"]')
+      .realClick();
     cy.realPress("Escape");
 
     cy.window().then((win) => {
@@ -166,7 +126,11 @@ describe("Editor- Inspector", () => {
       });
     });
 
-    cy.get('[data-cy="copy-value-to-clicpboard"]').realClick();
+    cy.get(`[data-cy="inspector-node-key"] > .mx-1`)
+      .realHover()
+      .parent()
+      .find('[data-cy="copy-value-to-clicpboard"]')
+      .realClick();
     cy.realPress("Escape");
     cy.window().then((win) => {
       win.navigator.clipboard.readText().then((text) => {
@@ -182,16 +146,16 @@ 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)"
-    );
+    cy.verifyToastMessage(`[class=go3958317564]`, "Component deleted! (⌘ + Z to undo)");
+
     navigateToCreateNewVersionModal((currentVersion = "v1"));
     createNewVersion((newVersion = ["v2"]), (versionFrom = "v1"));
     cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
+    cy.apiDeleteApp();
   });
 });

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/app-version/version.cy.js

@@ -65,15 +65,15 @@ describe("App Version Functionality", () => {
     closeModal(commonText.closeButton);
   });
 
-  it("Verify all functionality for the app version", () => {
+  it.skip("Verify all functionality for the app version", () => {
     data.appName = `${fake.companyName}-App`;
     cy.apiCreateApp(data.appName);
     cy.openApp()
     cy.get('[data-cy="widget-list-box-table"]').should("be.visible");
-
-    cy.dragAndDropWidget("Text", 50, 50);
+  
+    // cy.dragAndDropWidget("Text", 50, 50);
     verifyComponent("text1");
-
+   
     navigateToCreateNewVersionModal((currentVersion = "v1"));
     createNewVersion((newVersion = ["v2"]), (versionFrom = "v1"));
     verifyComponent("text1");

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/editor/appSlug.cy.js

@@ -41,7 +41,7 @@ describe("App slug", () => {
         );
         cy.get(commonWidgetSelector.appLinkField).verifyVisibleElement(
             "have.text",
-            `http://localhost:8082/my-workspace/apps/${Cypress.env("appId")}`
+            `${Cypress.config('baseUrl')}/my-workspace/apps/${Cypress.env("appId")}`
         );
 
         cy.wait(500);
@@ -84,11 +84,11 @@ describe("App slug", () => {
         );
         cy.get(commonWidgetSelector.appLinkField).verifyVisibleElement(
             "have.text",
-            `http://localhost:8082/my-workspace/apps/${data.slug}`
+            `${Cypress.config('baseUrl')}/my-workspace/apps/${data.slug}`
         );
         cy.url().should(
             "eq",
-            `http://localhost:8082/my-workspace/apps/${data.slug}/home`
+            `${Cypress.config('baseUrl')}/my-workspace/apps/${data.slug}`
         );
 
         releaseApp();
@@ -97,15 +97,15 @@ describe("App slug", () => {
         cy.wait(2000);
         cy.url().should(
             "eq",
-            `http://localhost:8082/applications/${data.slug}/home?version=v1`
+            `${Cypress.config('baseUrl')}/applications/${data.slug}/home?version=v1`
         );
         cy.visit("/my-workspace");
         cy.wait(500);
 
         cy.visitSlug({
-            actualUrl: `http://localhost:8082/applications/${data.slug}`,
+            actualUrl: `${Cypress.config('baseUrl')}/applications/${data.slug}`,
         });
-        cy.url().should("eq", `http://localhost:8082/applications/${data.slug}`);
+        cy.url().should("eq", `${Cypress.config('baseUrl')}/applications/${data.slug}`);
         cy.visit("/my-workspace");
         cy.wait(500);
 
@@ -176,20 +176,20 @@ describe("App slug", () => {
         cy.get(commonWidgetSelector.modalCloseButton).click();
         cy.url().should(
             "eq",
-            `http://localhost:8082/my-workspace/apps/${data.slug}/home`
+            `${Cypress.config('baseUrl')}/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`
+            `${Cypress.config('baseUrl')}/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.url().should("eq", `${Cypress.config('baseUrl')}/applications/${data.slug}`);
         cy.visit("/my-workspace");
         cy.wait(500);
 

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/editor/privateAndPublicApp.cy.js

@@ -14,6 +14,7 @@ import { addAppToGroup } from "Support/utils/manageGroups";
 import { ssoSelector } from "Selectors/manageSSO";
 import { fetchAndVisitInviteLink } from "Support/utils/manageUsers";
 import { usersSelector } from "Selectors/manageUsers";
+import { onboardingSelectors } from "Selectors/onboarding";
 
 describe(
   "App share functionality",
@@ -26,7 +27,6 @@ describe(
     const data = {};
     beforeEach(() => {
       cy.defaultWorkspaceLogin();
-      // cy.removeAssignedApps();
       cy.skipWalkthrough();
     });
 
@@ -36,16 +36,19 @@ describe(
 
       cy.apiCreateApp(data.appName);
       cy.openApp();
-      cy.dragAndDropWidget("Table", 250, 250);
+      cy.addComponentToApp(data.appName, "text1");
 
-      verifyTooltip(
-        commonWidgetSelector.shareAppButton,
-        "Share URL is unavailable until current version is released"
-      );
-      cy.get('[data-cy="share-button-link"]>span').should(
-        "have.class",
-        "share-disabled"
-      );
+      //Need to automate with the new flow
+
+      // verifyTooltip(
+      //   commonWidgetSelector.shareAppButton,
+      //   "Share URL is unavailable until current version is released"
+      // );
+
+      // cy.get('[data-cy="share-button-link"]>span').should(
+      //   "have.class",
+      //   "share-disabled"
+      // );
       releaseApp();
       cy.get(commonWidgetSelector.shareAppButton).click();
 
@@ -72,30 +75,30 @@ describe(
 
       logout();
       cy.wait(4000);
-      cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
         "be.visible"
       );
       cy.visitSlug({
-        actualUrl: `http://localhost:8082/applications/${data.slug}`,
+        actualUrl: `${Cypress.config('baseUrl')}/applications/${data.slug}`,
       });
       cy.wait(3000);
 
-      cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
         "be.visible"
       );
 
-      cy.clearAndType(commonSelectors.workEmailInputField, "dev@tooljet.io");
-      cy.clearAndType(commonSelectors.passwordInputField, "password");
-      cy.get(commonSelectors.loginButton).click();
+      cy.clearAndType(onboardingSelectors.loginEmailInput, "dev@tooljet.io");
+      cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
+      cy.get(onboardingSelectors.signInButton).click();
 
       cy.wait(500);
-      cy.get('[data-cy="draggable-widget-table1"]').should("be.visible");
+      cy.get(".text-widget-section > div").should("be.visible");
       cy.get(commonSelectors.viewerPageLogo).click();
 
       cy.openApp(
         "my-workspace",
         Cypress.env("appId"),
-        '[data-cy="draggable-widget-table1"]'
+        ".text-widget-section > div"
       );
       cy.get(commonWidgetSelector.shareAppButton).click();
       cy.get(commonWidgetSelector.makePublicAppToggle).check();
@@ -104,23 +107,22 @@ describe(
 
       logout();
       cy.wait(4000);
-      cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
         "be.visible"
       );
       cy.visitSlug({
-        actualUrl: `http://localhost:8082/applications/${data.slug}`,
+        actualUrl: `${Cypress.config('baseUrl')}/applications/${data.slug}`,
       });
       cy.wait(3000);
-      cy.get('[data-cy="draggable-widget-table1"]').should("be.visible");
+      cy.get(".text-widget-section > div").should("be.visible");
     });
 
     it("Verify app private and public app visibility for the same workspace user", () => {
       data.appName = `${fake.companyName} App`;
       data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
-
       cy.apiCreateApp(data.appName);
       cy.openApp();
-      cy.dragAndDropWidget("Table", 250, 250);
+      cy.addComponentToApp(data.appName, "text1");
       releaseApp();
 
       cy.wait(1000);
@@ -132,13 +134,13 @@ describe(
       cy.backToApps();
 
       cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
-      cy.get('[data-cy="draggable-widget-table1"]').should("be.visible");
+      cy.get(".text-widget-section > div").should("be.visible");
 
       cy.defaultWorkspaceLogin();
       cy.openApp(
         "my-workspace",
         Cypress.env("appId"),
-        '[data-cy="draggable-widget-table1"]'
+        ".text-widget-section > div"
       );
       cy.wait(2000);
       cy.get(commonWidgetSelector.shareAppButton).click();
@@ -149,20 +151,21 @@ describe(
 
       logout();
       cy.wait(4000);
-      cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
         "be.visible"
       );
 
       cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
 
-      cy.login("test@tooljet.com", "password");
+      cy.appUILogin("test@tooljet.com", "password");
       cy.get(commonSelectors.allApplicationLink).verifyVisibleElement(
         "have.text",
         commonText.allApplicationLink
       );
     });
 
-    it("Verify app private and public app visibility for the same instance user", () => {
+    //Fix the case after bug fix
+    it.skip("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`;
@@ -171,7 +174,8 @@ describe(
 
       cy.apiCreateApp(data.appName);
       cy.openApp();
-      cy.dragAndDropWidget("Table", 250, 250);
+      cy.addComponentToApp(data.appName, "text1");
+
       releaseApp();
 
       cy.wait(1000);
@@ -183,13 +187,19 @@ describe(
       cy.logoutApi();
       userSignUp(data.firstName, data.email, data.workspaceName);
       cy.wait(3000);
+      cy.backToApps();
+      cy.wait(1000);
 
       cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
       cy.wait(1000);
+      cy.pause();
 
-      cy.clearAndType(commonSelectors.workEmailInputField, data.email);
-      cy.clearAndType(commonSelectors.passwordInputField, "password");
-      cy.get(commonSelectors.signInButton).click();
+      // logout();
+
+      cy.clearAndType(onboardingSelectors.loginEmailInput, data.email);
+      cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
+      cy.get(onboardingSelectors.signInButton).click();
+      cy.pause();
       cy.wait(1000);
       cy.get(ssoSelector.workspaceSubHeader).verifyVisibleElement(
         "have.text",
@@ -211,15 +221,16 @@ describe(
 
       logout();
       cy.wait(4000);
-      cy.get(commonSelectors.loginButton, { timeout: 20000 }).should(
+      cy.get(onboardingSelectors.signInButton, { timeout: 20000 }).should(
         "be.visible"
       );
       cy.visitSlug({ actualUrl: `/applications/${data.slug}` });
-      cy.get('[data-cy="draggable-widget-table1"]').should("be.visible");
+      cy.get(".text-widget-section > div").should("be.visible");
       cy.get(commonSelectors.viewerPageLogo).click();
     });
 
-    it("hould redirect to the workspace login page, allow signup, proceed to accept invite page, and load the app", () => {
+    //Need to update with the new permission flow
+    it.skip("hould redirect to the workspace login page, allow signup, proceed to accept invite page, and load the app", () => {
       let invitationToken,
         organizationToken,
         workspaceId,
@@ -235,7 +246,8 @@ describe(
       setSignupStatus(true);
       cy.apiCreateApp(data.appName);
       cy.openApp();
-      cy.dragAndDropWidget("Table", 250, 250);
+      cy.addComponentToApp(data.appName, "text1");
+
       releaseApp();
 
       cy.wait(1000);
@@ -258,8 +270,8 @@ describe(
       cy.get(commonSelectors.createAnAccountLink).click();
 
       cy.clearAndType(commonSelectors.nameInputField, data.firstName);
-      cy.clearAndType(commonSelectors.emailInputField, data.email);
-      cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
+      cy.clearAndType(onboardingSelectors.loginEmailInput, data.email);
+      cy.clearAndType(onboardingSelectors.loginPasswordInput, commonText.password);
       cy.get(commonSelectors.signUpButton).click();
 
       cy.apiLogin();
@@ -296,7 +308,7 @@ describe(
         });
       });
 
-      cy.get('[data-cy="draggable-widget-table1"]').should("be.visible");
+      cy.get(".text-widget-section > div").should("be.visible");
     });
   }
 );

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/globalDataSources/globalDataSourcePermissions.cy.js

@@ -215,7 +215,7 @@ describe("Global Datasource Manager", () => {
     cy.get('[data-cy="databases-datasource-button"]').should("be.visible");
 
     cy.apiCreateGDS(
-      "http://localhost:3000/api/v2/data_sources",
+      `${Cypress.env("server_host")}/api/v2/data_sources`,
       `cypress-${data.dsName2}-postgresql`,
       "postgresql",
       [

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/selfHost/selfHostSignUp.cy.js

@@ -1,166 +0,0 @@
-import { commonSelectors } from "Selectors/common";
-import { commonText } from "Texts/common";
-import * as signup from "Support/utils/selfHostSignUp";
-import { logout } from "Support/utils/common";
-
-describe("Self host onboarding", () => {
-  beforeEach(() => {
-    cy.visit('/setup');
-  });
-
-  it("verify elements on self host onboarding page", () => {
-    cy.get(commonSelectors.selfHostSetUpBanner).should("be.visible");
-    cy.get(commonSelectors.selfHostSetUpSubBanner).should("be.visible");
-    cy.get(commonSelectors.selfHostSetUpCard).should("be.visible");
-    cy.get(commonSelectors.selfHostSetUpCardImage).should("be.visible");
-    cy.get(commonSelectors.selfHostSetUpCardHeader).verifyVisibleElement(
-      "have.text",
-      commonText.selfHostSetUpCardHeader
-    );
-    cy.get(commonSelectors.selfHostSetUpCardSubHeader).verifyVisibleElement(
-      "have.text",
-      commonText.selfHostSetUpCardSubHeader
-    );
-    cy.get(commonSelectors.setUpToolJetButton)
-      .verifyVisibleElement("have.text", commonText.setUpToolJetButton)
-      .click();
-
-    signup.selfHostCommonElements();
-    cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
-      "have.text",
-      commonText.setUpAdminHeader
-    );
-
-    cy.get(commonSelectors.userNameInputLabel).verifyVisibleElement(
-      "have.text",
-      commonText.userNameInputLabel
-    );
-    cy.get(commonSelectors.nameInputField).should("be.visible");
-    cy.get(commonSelectors.emailInputLabel).verifyVisibleElement(
-      "have.text",
-      commonText.emailInputLabel
-    );
-    cy.get(commonSelectors.emailInputField).should("be.visible");
-    cy.get(commonSelectors.passwordLabel).verifyVisibleElement(
-      "have.text",
-      commonText.passwordLabel
-    );
-    cy.get(commonSelectors.passwordInputField).should("be.visible");
-
-    cy.get(commonSelectors.passwordHelperText).verifyVisibleElement(
-      "have.text",
-      commonText.passwordHelperText
-    );
-
-    cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
-      expect($el.contents().first().text().trim()).to.eq(
-        commonText.selfHostSignUpTermsHelperText
-      );
-    });
-    cy.get(commonSelectors.termsOfServiceLink)
-      .verifyVisibleElement("have.text", commonText.termsOfServiceLink)
-      .and("have.attr", "href")
-      .and("equal", "https://www.tooljet.com/terms");
-    cy.get(commonSelectors.privacyPolicyLink)
-      .verifyVisibleElement("have.text", commonText.privacyPolicyLink)
-      .and("have.attr", "href")
-      .and("equal", "https://www.tooljet.com/privacy");
-
-    cy.clearAndType(commonSelectors.nameInputField, "The Developer");
-    cy.clearAndType(commonSelectors.emailInputField, "dev@tooljet.io");
-    cy.clearAndType(commonSelectors.passwordInputField, "password");
-    cy.get(commonSelectors.continueButton).click();
-
-    signup.selfHostCommonElements();
-    cy.get(commonSelectors.userAccountNameAvatar).should("be.visible");
-    cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
-      "have.text",
-      "Set up your workspace"
-    );
-    cy.get(commonSelectors.workspaceNameInputLabel).verifyVisibleElement(
-      "have.text",
-      commonText.workspaceNameInputLabel
-    );
-    cy.get(commonSelectors.workspaceNameInputField).should("be.visible");
-    cy.clearAndType(commonSelectors.workspaceNameInputField, "My workspace");
-    cy.get(commonSelectors.continueButton).click();
-
-    signup.selfHostCommonElements();
-    signup.commonElementsWorkspaceSetup();
-    cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
-      "have.text",
-      commonText.companyPageHeader("The Developer")
-    );
-    cy.get(commonSelectors.companyNameInputField).should("be.visible");
-    cy.clearAndType(commonSelectors.companyNameInputField, "ToolJet");
-    cy.get(commonSelectors.continueButton).click();
-
-    signup.selfHostCommonElements();
-    signup.commonElementsWorkspaceSetup();
-    cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
-      "have.text",
-      commonText.userRolePageHeader
-    );
-    signup.verifyandModifyUserRole();
-
-    signup.selfHostCommonElements();
-    signup.commonElementsWorkspaceSetup();
-    cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
-      "have.text",
-      commonText.sizeOftheCompanyHeader
-    );
-
-    signup.verifyandModifySizeOftheCompany();
-
-    cy.get(commonSelectors.pageLogo).should("be.visible");
-    cy.get(commonSelectors.setUpadminCheckPoint).verifyVisibleElement(
-      "have.text",
-      commonText.setUpadminCheckPoint
-    );
-    cy.get(commonSelectors.setUpworkspaceCheckPoint).verifyVisibleElement(
-      "have.text",
-      commonText.setUpworkspaceCheckPoint
-    );
-    cy.get(commonSelectors.companyProfileCheckPoint).verifyVisibleElement(
-      "have.text",
-      commonText.companyProfileCheckPoint
-    );
-    cy.get(commonSelectors.onboardingPageSubHeader).verifyVisibleElement(
-      "have.text",
-      commonText.onboardingPageSubHeader
-    );
-    cy.get(commonSelectors.continueButton).verifyVisibleElement(
-      "have.text",
-      commonText.continueButton
-    );
-
-    signup.commonElementsWorkspaceSetup();
-    cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
-      "have.text",
-      "Enter your phone number"
-    );
-
-    cy.get(".form-control").should("be.visible");
-    cy.get(".tj-onboarding-phone-input-wrapper")
-      .find("input")
-      .type("919876543210");
-    cy.get(commonSelectors.continueButton).click();
-
-    cy.get("body").then(($title) => {
-      if (!$title.text().includes("Enter your phone number")) {
-        cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-          "have.text",
-          "My workspace"
-        );
-
-        logout();
-        cy.appUILogin();
-
-        cy.get(commonSelectors.workspaceName).verifyVisibleElement(
-          "have.text",
-          "My workspace"
-        );
-      }
-    });
-  });
-});

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/userFlow/firstUserOnboarding.cy.js

@@ -0,0 +1,84 @@
+import { commonSelectors } from "Selectors/common";
+import { commonText } from "Texts/common";
+import * as signup from "Support/utils/selfHostSignUp";
+import { logout } from "Support/utils/common";
+import { onboardingSelectors } from "Selectors/onboarding";
+
+describe("Self host onboarding", () => {
+  beforeEach(() => {
+    cy.visit("/setup");
+  });
+
+  it("verify elements on self host onboarding page", () => {
+    cy.get(commonSelectors.HostBanner).should("be.visible");
+    cy.get(commonSelectors.pageLogo).should("be.visible");
+    cy.get(commonSelectors.adminSetup).should("be.visible");
+    cy.get(commonSelectors.signupTerms).should("be.visible");
+
+    cy.get(commonSelectors.userNameInputLabel).verifyVisibleElement(
+      "have.text",
+      commonText.userNameInputLabel
+    );
+    cy.get(commonSelectors.nameInputField).should("be.visible");
+    cy.get(commonSelectors.emailInputLabel).verifyVisibleElement(
+      "have.text",
+      commonText.emailInputLabel
+    );
+    cy.get(onboardingSelectors.emailInput).should("be.visible");
+    cy.get(commonSelectors.passwordLabel).verifyVisibleElement(
+      "have.text",
+      commonText.passwordLabel
+    );
+    cy.get(onboardingSelectors.passwordInput).should("be.visible");
+    cy.get(commonSelectors.passwordHelperTextSignup).verifyVisibleElement(
+      "have.text",
+      commonText.passwordHelperText
+    );
+
+    cy.get(commonSelectors.signUpTermsHelperText).should(($el) => {
+      expect($el.contents().first().text().trim()).to.eq(
+        commonText.selfHostSignUpTermsHelperText
+      );
+    });
+    cy.get(commonSelectors.termsOfServiceLink)
+      .verifyVisibleElement("have.text", commonText.termsOfServiceLink)
+      .and("have.attr", "href")
+      .and("equal", "https://www.tooljet.com/terms");
+    cy.get(commonSelectors.privacyPolicyLink)
+      .verifyVisibleElement("have.text", commonText.privacyPolicyLink)
+      .and("have.attr", "href")
+      .and("equal", "https://www.tooljet.com/privacy");
+
+    cy.clearAndType(commonSelectors.nameInputField, "The Developer");
+    cy.clearAndType(onboardingSelectors.emailInput, "dev@tooljet.io");
+    cy.clearAndType(onboardingSelectors.passwordInput, "password");
+    cy.get(commonSelectors.continueButton).click();
+
+    cy.get(commonSelectors.setUpworkspaceCheckPoint).verifyVisibleElement(
+      "have.text",
+      "Set up your workspace!"
+    );
+    cy.get(commonSelectors.workspaceNameInputLabel).verifyVisibleElement(
+      "have.text",
+      commonText.workspaceNameInputLabel
+    );
+    cy.get(commonSelectors.workspaceNameInputField).should("be.visible");
+    cy.clearAndType(commonSelectors.workspaceNameInputField, "My workspace");
+    cy.get(commonSelectors.OnbordingContinue).click();
+
+    cy.get(commonSelectors.skipbutton).click();
+    cy.get(commonSelectors.backLogo).click();
+    cy.get(commonSelectors.backtoapps).click();
+
+    logout();
+    cy.appUILogin();
+
+    cy.get(commonSelectors.workspaceName).verifyVisibleElement(
+      "have.text",
+      "My workspace"
+    );
+  });
+});
+
+
+

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/manageSSO.cy.js

@@ -28,11 +28,6 @@ describe("Manage SSO for multi workspace", () => {
         commonText.breadcrumbworkspaceSettingTitle
       );
     });
-    cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
-      "have.text",
-      ssoText.pagetitle
-    );
-
     cy.get(ssoSelector.cardTitle).verifyVisibleElement(
       "have.text",
       "Workspace login"
@@ -72,6 +67,7 @@ describe("Manage SSO for multi workspace", () => {
 
   it("Should verify Google SSO page elements", () => {
     common.navigateToManageSSO();
+    cy.wait(2000);
     cy.get(ssoSelector.google).should("be.visible").click();
     cy.get(ssoSelector.cardTitle)
       .eq(1)

cypress-tests/cypress/e2e/happyPath/platform/ceTestcases/workspace/workspaceConstants.cy.js

@@ -7,6 +7,7 @@ import * as common from "Support/utils/common";
 import {
     contantsNameValidation,
     AddNewconstants,
+    existingNameValidation,
 } from "Support/utils/workspaceConstants";
 import { buttonText } from "Texts/button";
 import { editAndVerifyWidgetName } from "Support/utils/commonWidget";
@@ -28,7 +29,7 @@ describe("Workspace constants", () => {
     const envVar = Cypress.env("environment");
     beforeEach(() => {
         cy.defaultWorkspaceLogin();
-        cy.intercept("GET", "/api/library_apps").as("homePage");
+        // cy.intercept("GET", "/api/library_apps", "homePage");
         cy.skipWalkthrough();
     });
     it("Verify workspace constants UI and CRUD operations", () => {
@@ -57,7 +58,7 @@ describe("Workspace constants", () => {
 
         cy.get(commonSelectors.documentationLink).verifyVisibleElement(
             "have.text",
-            commonText.documentationLink
+            "Read documentation"
         );
 
         cy.get("body").then(($body) => {
@@ -91,13 +92,13 @@ describe("Workspace constants", () => {
         cy.get(commonSelectors.nameLabel).verifyVisibleElement("have.text", "Name");
         cy.get(commonSelectors.nameInputField)
             .invoke("attr", "placeholder")
-            .should("eq", "Enter Constant Name");
+            .should("eq", "Enter constant name");
         cy.get(commonSelectors.nameInputField).should("be.visible");
         cy.get(commonSelectors.valueLabel).should(($el) => {
             expect($el.contents().first().text().trim()).to.eq("Value");
         });
-        cy.get('[data-cy="encrypted-label"]>').should("be.visible");
-        cy.verifyLabel("Encrypted");
+        cy.get('[data-cy="form-encrypted-label"]')
+            .verifyVisibleElement("have.text", "Encrypted");
         cy.get(commonSelectors.valueInputField)
             .invoke("attr", "placeholder")
             .should("eq", "Enter value");
@@ -116,12 +117,12 @@ describe("Workspace constants", () => {
         contantsNameValidation("9", commonText.constantsNameError);
         contantsNameValidation("%", commonText.constantsNameError);
         contantsNameValidation(
-            "ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`a",
+            "Xk4jY2mLn8pQsZ9Rt6vBc7wJaHqOdEfGuVxY3NkMLzPoWX5wee",
             "Maximum length has been reached"
         );
         contantsNameValidation(
-            "ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`afgg",
-            "Constant name should be between 1 and 32 characters"
+            "Xk4jY2mLn8pQsZ9Rt6vBc7wJaHqOdEfGuVxY3NkMLzPoWX5weetr",
+            "Constant name has exceeded 50 characters"
         );
 
         cy.get(commonSelectors.valueInputField).click();
@@ -137,6 +138,7 @@ describe("Workspace constants", () => {
         cy.clearAndType(commonSelectors.nameInputField, data.constName);
         cy.get(commonSelectors.valueInputField).click();
         cy.clearAndType(commonSelectors.valueInputField, data.constName);
+        cy.get(workspaceConstantsSelectors.constantsType("global")).check();
         cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
         cy.get(commonSelectors.cancelButton).click();
         cy.get(workspaceConstantsSelectors.constantName(data.constName)).should(
@@ -147,26 +149,23 @@ describe("Workspace constants", () => {
         cy.clearAndType(commonSelectors.nameInputField, data.constName);
         cy.get(commonSelectors.valueInputField).click();
         cy.clearAndType(commonSelectors.valueInputField, data.constName);
+        cy.get(workspaceConstantsSelectors.constantsType("global")).check();
         cy.get(workspaceConstantsSelectors.addConstantButton).click();
         cy.verifyToastMessage(
             commonSelectors.toastMessage,
-            workspaceConstantsText.constantCreatedToast
+            workspaceConstantsText.constantCreatedToast("Global")
         );
 
         cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
-        contantsNameValidation(
-            data.constName,
-            "Constant with this name already exists in Production environment"
-        );
+        existingNameValidation(data.constName, "test");
         cy.get(commonSelectors.cancelButton).click();
 
-        cy.get(workspaceConstantsSelectors.envName).verifyVisibleElement(
-            "have.text",
-            "Production"
-        );
+        cy.get(workspaceConstantsSelectors.envName).should(($el) => {
+            expect($el.contents().first().text().trim()).to.eq("Production");
+        });
         cy.get(
             workspaceConstantsSelectors.addNewConstantButton
-        ).verifyVisibleElement("have.text", "Create new constant");
+        ).verifyVisibleElement("have.text", "+ Create new constant");
         cy.get(
             workspaceConstantsSelectors.constantsTableNameHeader
         ).verifyVisibleElement("have.text", "Name");
@@ -270,7 +269,8 @@ describe("Workspace constants", () => {
         );
     });
 
-    it("should verify the constants resolving value on components and query", () => {
+    //Fix after app builder 
+    it.skip("should verify the constants resolving value on components and query", () => {
         cy.viewport(1200, 1300);
 
         data.widgetName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
@@ -306,9 +306,9 @@ describe("Workspace constants", () => {
         editAndVerifyWidgetName(data.widgetName, []);
         cy.waitForAutoSave();
 
-        cy.get(
-            '[data-cy="default-value-input-field"]'
-        ).clearAndTypeOnCodeMirror(`{{queries.restapi1.data.message`);
+        cy.get('[data-cy="default-value-input-field"]').clearAndTypeOnCodeMirror(
+            `{{queries.restapi1.data.message`
+        );
         cy.forceClickOnCanvas();
         cy.waitForAutoSave();
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
@@ -323,7 +323,7 @@ describe("Workspace constants", () => {
             commonWidgetSelector.draggableWidget(data.widgetName)
         ).verifyVisibleElement("have.value", "Production environment testing");
     });
-    it("should verify the constants resolving in datasource connection form", () => {
+    it.skip("should verify the constants resolving in datasource connection form", () => {
         data.ds = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
 
         data.widgetName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
@@ -341,7 +341,7 @@ describe("Workspace constants", () => {
         AddNewconstants(data.restapiHeaderKey, "customHeader");
         AddNewconstants(data.restapiHeaderValue, "key=value");
         cy.apiCreateGDS(
-            "http://localhost:3000/api/v2/data_sources",
+            `${Cypress.env("server_host")}/api/v2/data_sources`,
             data.ds,
             "restapi",
             [
@@ -380,7 +380,7 @@ describe("Workspace constants", () => {
             };
             cy.request({
                 method: "GET",
-                url: `http://localhost:3000/api/app-environments/versions?app_id=${Cypress.env(
+                url: `${Cypress.env("server_host")}/api/app-environments/versions?app_id=${Cypress.env(
                     "appId"
                 )}`,
                 headers: headers,

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/authentication/forgotPassword.cy.js

@@ -1,183 +0,0 @@
-import { commonSelectors } from "Selectors/common";
-import { commonText } from "Texts/common";
-import { fake } from "Fixtures/fake";
-import { addNewUser } from "Support/utils/onboarding";
-import { logout } from "Support/utils/common";
-
-describe("Password reset functionality", () => {
-  const data = {};
-  let passwordResetLink = "";
-
-  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");
-      cy.get(commonSelectors.loginButton).click();
-      cy.verifyToastMessage(
-        commonSelectors.toastMessage,
-        "Invalid credentials"
-      );
-    }
-    cy.clearAndType(commonSelectors.workEmailInputField, data.email);
-    cy.clearAndType(commonSelectors.passwordInputField, "passw");
-    cy.get(commonSelectors.loginButton).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      "Maximum password retry limit reached, please reset your password using forgot password option"
-    );
-  });
-  it("Verify forgot password page elements and functionality", () => {
-    cy.visit("/");
-    cy.get(commonSelectors.forgotPasswordLink).click();
-    cy.get(commonSelectors.pageLogo).should("be.visible");
-    cy.get(commonSelectors.forgotPasswordPageHeader).verifyVisibleElement(
-      "have.text",
-      commonText.forgotPasswordPageHeader
-    );
-    cy.get(commonSelectors.forgotPasswordPageSubHeader).should(($el) => {
-      expect($el.contents().first().text().trim()).to.eq(
-        "New to"
-      );
-    });
-    cy.get(commonSelectors.createAnAccountLink).verifyVisibleElement(
-      "have.text",
-      commonText.createAnAccountLink
-    );
-    cy.get(commonSelectors.emailInputLabel).verifyVisibleElement(
-      "have.text",
-      commonText.emailAddressLabel
-    );
-    cy.get(commonSelectors.emailInputField).should("be.visible");
-    cy.get(commonSelectors.resetPasswordLinkButton)
-      .verifyVisibleElement("have.text", commonText.resetPasswordLinkButton)
-      .and("be.disabled");
-    cy.get(commonSelectors.enterIcon).should("be.visible");
-
-    cy.clearAndType(commonSelectors.emailInputField, data.email);
-    cy.get(commonSelectors.resetPasswordLinkButton).click();
-
-    cy.get("body").then(($title) => {
-      if (!$title.text().includes("Forgot Password")) {
-        cy.verifyToastMessage(
-          commonSelectors.toastMessage,
-          commonText.passwordResetEmailToast
-        );
-        cy.get(commonSelectors.pageLogo).should("be.visible");
-        cy.get(commonSelectors.emailImage).should("be.visible");
-        cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
-          "have.text",
-          commonText.emailPageHeader
-        );
-        cy.get(commonSelectors.onboardingPageDescription).verifyVisibleElement(
-          "have.text",
-          commonText.resetPasswordEmailDescription(data.email)
-        );
-        cy.get(commonSelectors.spamMessage).verifyVisibleElement(
-          "have.text",
-          commonText.spamMessage
-        );
-        cy.get(commonSelectors.onboardingSeperator).should("be.visible");
-        cy.get(commonSelectors.onboardingSeperatorText).verifyVisibleElement(
-          "have.text",
-          commonText.onboardingSeperatorText
-        );
-        cy.get(commonSelectors.backToLoginButton).verifyVisibleElement(
-          "have.text",
-          commonText.backToLoginButton
-        );
-      }
-    });
-
-    cy.task("updateId", {
-      dbconfig: Cypress.env("app_db"),
-      sql: `select forgot_password_token from users where email='${data.email}';`,
-    }).then((resp) => {
-      passwordResetLink = `/reset-password/${resp.rows[0].forgot_password_token}`;
-    });
-  });
-
-  it("Verify reset password page and functionality", () => {
-    cy.visit(passwordResetLink);
-    cy.get(commonSelectors.pageLogo).should("be.visible");
-    cy.get(commonSelectors.passwordResetPageHeader).verifyVisibleElement(
-      "have.text",
-      commonText.passwordResetPageHeader
-    );
-    cy.get(commonSelectors.newPasswordInputLabel).verifyVisibleElement(
-      "have.text",
-      commonText.newPasswordInputLabel
-    );
-    cy.get(commonSelectors.newPasswordInputField).should("be.visible");
-    cy.get(commonSelectors.passwordHelperText)
-      .eq(0)
-      .verifyVisibleElement("have.text", commonText.passwordHelperText);
-    cy.get(commonSelectors.confirmPasswordInputFieldLabel).verifyVisibleElement(
-      "have.text",
-      commonText.confirmPasswordInputFieldLabel
-    );
-    cy.get(commonSelectors.confirmPasswordInputField).should("be.visible");
-    cy.get(commonSelectors.passwordHelperText)
-      .eq(1)
-      .verifyVisibleElement("have.text", commonText.passwordHelperText);
-    cy.get(commonSelectors.resetPasswordButton)
-      .verifyVisibleElement("have.text", commonText.resetPasswordButton)
-      .and("be.disabled");
-    cy.get(commonSelectors.enterIcon).should("be.visible");
-
-    cy.clearAndType(commonSelectors.newPasswordInputField, "Pass");
-    cy.get(commonSelectors.resetPasswordButton).should("be.disabled");
-
-    cy.get(commonSelectors.newPasswordInputField).clear();
-    cy.clearAndType(commonSelectors.confirmPasswordInputField, "Pass");
-    cy.get(commonSelectors.resetPasswordButton).should("be.disabled");
-
-    cy.clearAndType(commonSelectors.newPasswordInputField, "Pass");
-    cy.clearAndType(commonSelectors.confirmPasswordInputField, "Pass");
-    cy.get(commonSelectors.resetPasswordButton).should("be.disabled");
-
-    cy.clearAndType(commonSelectors.newPasswordInputField, "password1");
-    cy.clearAndType(commonSelectors.confirmPasswordInputField, "password");
-    cy.get(commonSelectors.resetPasswordButton).should("be.disabled");
-
-    cy.clearAndType(commonSelectors.newPasswordInputField, "Password");
-    cy.clearAndType(commonSelectors.confirmPasswordInputField, "password");
-    cy.get(commonSelectors.resetPasswordButton).click();
-    cy.verifyToastMessage(commonSelectors.toastMessage, "Password don't match");
-
-    cy.clearAndType(commonSelectors.newPasswordInputField, "Password");
-    cy.clearAndType(commonSelectors.confirmPasswordInputField, "Password");
-    cy.get(commonSelectors.resetPasswordButton).should("be.enabled").click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      commonText.passwordResetSuccessToast
-    );
-
-    cy.get(commonSelectors.pageLogo).should("be.visible");
-    cy.get(commonSelectors.passwordResetPageHeader).verifyVisibleElement(
-      "have.text",
-      commonText.passwordResetSuccessPageHeader
-    );
-    cy.get(commonSelectors.resetPasswordPageDescription).verifyVisibleElement(
-      "have.text",
-      commonText.resetPasswordPageDescription
-    );
-    cy.get(commonSelectors.backToLoginButton).verifyVisibleElement(
-      "have.text",
-      commonText.backToLoginButton
-    );
-  });
-  it("Verify user login using new password", () => {
-    cy.visit("/");
-    cy.clearAndType(commonSelectors.workEmailInputField, data.email);
-    cy.clearAndType(commonSelectors.passwordInputField, "Password");
-    cy.get(commonSelectors.loginButton).click();
-    cy.get(commonSelectors.workspaceName).should("be.visible");
-  });
-});

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/authentication/login.cy.js

@@ -1,85 +0,0 @@
-import { commonSelectors } from "Selectors/common";
-import { fake } from "Fixtures/fake";
-import { commonText, path } from "Texts/common";
-
-describe("Login functionality", () => {
-  let user;
-  const invalidEmail = fake.email;
-  const invalidPassword = fake.password;
-
-  beforeEach(() => {
-    cy.fixture("credentials/login.json").then((login) => {
-      user = login;
-    });
-    cy.visit("/");
-  });
-  it("Should verify elements on the login page", () => {
-    cy.url().should("include", path.loginPath);
-    cy.get(commonSelectors.pageLogo).should("be.visible");
-    cy.get(commonSelectors.signInHeader).verifyVisibleElement(
-      "have.text",
-      commonText.signInHeader
-    );
-    cy.get(commonSelectors.workEmailLabel).verifyVisibleElement(
-      "have.text",
-      commonText.workEmailLabel
-    );
-    cy.get(commonSelectors.passwordLabel).should(($el) => {
-      expect($el.contents().first().text().trim()).to.eq(
-        commonText.passwordLabel
-      );
-    });
-    cy.get(commonSelectors.forgotPasswordLink).verifyVisibleElement(
-      "have.text",
-      commonText.forgotPasswordLink
-    );
-    cy.get(commonSelectors.loginButton).verifyVisibleElement(
-      "have.text",
-      commonText.loginButton
-    );
-
-    cy.get(commonSelectors.workEmailInputField).should("be.visible");
-    cy.get(commonSelectors.passwordInputField).should("be.visible");
-  });
-  it("Should not be able to login with invalid credentials", () => {
-    cy.get(commonSelectors.loginButton).click();
-    cy.get(commonSelectors.emailInputError).verifyVisibleElement(
-      "have.text",
-      commonText.emailInputError
-    );
-
-    cy.clearAndType(commonSelectors.workEmailInputField, invalidEmail);
-    cy.get(commonSelectors.loginButton).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      commonText.loginErrorToast
-    );
-
-    cy.get(commonSelectors.workEmailInputField).clear();
-    cy.clearAndType(commonSelectors.passwordInputField, invalidPassword);
-    cy.get(commonSelectors.loginButton).click();
-    cy.get(commonSelectors.emailInputError).verifyVisibleElement(
-      "have.text",
-      commonText.emailInputError
-    );
-
-    cy.clearAndType(commonSelectors.workEmailInputField, user.email);
-    cy.get(commonSelectors.passwordInputField).clear();
-    cy.get(commonSelectors.loginButton).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      commonText.loginErrorToast
-    );
-
-    cy.get(commonSelectors.workEmailInputField).clear();
-    cy.clearAndType(commonSelectors.passwordInputField, user.password);
-    cy.get(commonSelectors.loginButton).click();
-    cy.get(commonSelectors.emailInputError).verifyVisibleElement(
-      "have.text",
-      commonText.emailInputError
-    );
-  });
-  it("Should be able to login with valid credentials", () => {
-    cy.login(user.email, user.password);
-  });
-});

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/authentication/signUp.cy.js

@@ -1,104 +0,0 @@
-import { commonSelectors } from "Selectors/common";
-import { commonText } from "Texts/common";
-import { SignUpPageElements } from "Support/utils/onboarding";
-import { fake } from "Fixtures/fake";
-import {
-  verifyConfirmEmailPage,
-  verifyConfirmPageElements,
-  verifyOnboardingQuestions,
-  verifyInvalidInvitationLink,
-  updateWorkspaceName
-} from "Support/utils/onboarding";
-import { dashboardText } from "Texts/dashboard";
-import {
-  verifyandModifyUserRole,
-  verifyandModifySizeOftheCompany,
-} from "Support/utils/selfHostSignUp";
-
-describe("User signup", () => {
-  const data = {};
-  let invitationLink = "";
-
-  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("/");
-    cy.get(commonSelectors.createAnAccountLink).realClick();
-    SignUpPageElements();
-
-    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(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);
-    });
-
-    verifyConfirmPageElements();
-    cy.get(commonSelectors.setUpToolJetButton).click();
-    cy.wait(4000);
-    verifyOnboardingQuestions(data.fullName, data.workspaceName);
-  });
-  it("Verify invalid invitation link", () => {
-    cy.log(invitationLink)
-    cy.visit(invitationLink);
-    verifyInvalidInvitationLink();
-    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/happyPath/platform/commonTestcases/userManagment/Login.cy.js

@@ -0,0 +1,88 @@
+import { commonSelectors } from "Selectors/common";
+import { fake } from "Fixtures/fake";
+import { commonText, path } from "Texts/common";
+import { onboardingSelectors } from "Selectors/onboarding";
+import { dashboardSelector } from "Selectors/dashboard";
+import { logout } from "Support/utils/common";
+
+describe("Login functionality", () => {
+  let user;
+  const invalidEmail = fake.email;
+  const invalidPassword = fake.password;
+
+  beforeEach(() => {
+    cy.fixture("credentials/login.json").then((login) => {
+      user = login;
+    });
+    cy.visit("/");
+  });
+  it("Should verify elements on the login page", () => {
+    cy.url().should("include", path.loginPath);
+    cy.get(commonSelectors.pageLogo).should("be.visible");
+    cy.get(commonSelectors.signInHeader).verifyVisibleElement(
+      "have.text",
+      commonText.signInHeader
+    );
+    cy.get(onboardingSelectors.emailLabel).verifyVisibleElement(
+      "have.text",
+      "Email *"
+    );
+    cy.get(onboardingSelectors.passwordLabel).should(($el) => {
+      expect($el.contents().first().text().trim()).to.eq(
+        commonText.LoginPasswordLabel
+      );
+    });
+    cy.get(commonSelectors.forgotPasswordLink).verifyVisibleElement(
+      "have.text",
+      commonText.forgotPasswordLink
+    );
+    cy.get(onboardingSelectors.signInButton).verifyVisibleElement(
+      "have.text",
+      "Sign in"
+    );
+    cy.get(onboardingSelectors.signInButton).should("be.disabled");
+
+    cy.get(onboardingSelectors.signupEmailInput).should("be.visible");
+    cy.get(onboardingSelectors.loginPasswordInput).should("be.visible");
+  });
+
+  it("Should be able to login with valid credentials", () => {
+    cy.appUILogin(user.email, user.password);
+    cy.get(commonSelectors.settingsIcon).click();
+    cy.get(dashboardSelector.logoutLink);
+  });
+
+  it("Should not be able to login with invalid credentials", () => {
+    cy.wait(3000);
+    cy.clearAndType(onboardingSelectors.signupEmailInput, "test");
+    cy.clearAndType(onboardingSelectors.signupEmailInput, "test");
+    cy.get(commonSelectors.emailInputError).verifyVisibleElement(
+      "have.text",
+      commonText.emailInputError
+    );
+    cy.get(onboardingSelectors.signInButton).should("be.disabled");
+
+    cy.get(onboardingSelectors.signupEmailInput).clear();
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, invalidPassword);
+    cy.get(onboardingSelectors.signInButton).should("be.disabled");
+
+    cy.clearAndType(onboardingSelectors.signupEmailInput, user.email);
+    cy.get(onboardingSelectors.loginPasswordInput).clear();
+    cy.get(onboardingSelectors.signInButton).should("be.disabled");
+
+    cy.clearAndType(onboardingSelectors.signupEmailInput, user.email);
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, "Pass");
+    cy.get(onboardingSelectors.passwordError).verifyVisibleElement(
+      "have.text",
+      "Password must be at least 5 characters long"
+    );
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, invalidPassword);
+    cy.get(onboardingSelectors.signInButton).click();
+    cy.verifyToastMessage(commonSelectors.toastMessage, "Invalid credentials");
+  });
+
+  it("Should be able to login with valid credentials using api", () => {
+    cy.appUILogin(user.email, user.password);
+    logout();
+  });
+});

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/Signup.cy.js

@@ -0,0 +1,91 @@
+import { commonSelectors } from "Selectors/common";
+import { commonText } from "Texts/common";
+import { SignUpPageElements } from "Support/utils/onboarding";
+import { fake } from "Fixtures/fake";
+import {
+  verifyConfirmEmailPage,
+  verifyConfirmPageElements,
+  verifyOnboardingQuestions,
+  verifyInvalidInvitationLink,
+  updateWorkspaceName,
+} from "Support/utils/onboarding";
+import { dashboardText } from "Texts/dashboard";
+import {
+  verifyandModifyUserRole,
+  verifyandModifySizeOftheCompany,
+} from "Support/utils/selfHostSignUp";
+import { onboardingSelectors } from "Selectors/onboarding";
+import { logout } from "Support/utils/common";
+
+describe("User signup", () => {
+  const data = {};
+  let invitationLink = "";
+
+  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("/");
+    cy.wait(500)
+    cy.get(commonSelectors.createAnAccountLink).realClick();
+    SignUpPageElements();
+
+    cy.get(onboardingSelectors.nameInput).clear();
+    cy.get(onboardingSelectors.nameInput).type(data.fullName);
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(
+      onboardingSelectors.loginPasswordInput,
+      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);
+    });
+
+    logout();
+  });
+
+  it("Verify invalid invitation link", () => {
+    cy.log(invitationLink);
+    cy.visit(invitationLink);
+    verifyInvalidInvitationLink();
+    cy.get(commonSelectors.pageLogo).click();
+    cy.get('[data-cy="sign-in-header"]').should("be.visible");
+  });
+
+  it("Verify onboarding flow", () => {
+    // rewrite for for EE and cloud
+    data.fullName = fake.fullName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.workspaceName = fake.companyName;
+
+    cy.visit("/");
+    cy.wait(8000);
+    cy.get(onboardingSelectors.createAnAccountLink).click();
+    cy.wait(6000);
+    cy.get(onboardingSelectors.nameInput).clear();
+    cy.get(onboardingSelectors.nameInput).type(data.fullName);
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(
+      onboardingSelectors.loginPasswordInput,
+      commonText.password
+    );
+    cy.get(commonSelectors.signUpButton).click();
+    cy.wait(8000);
+    cy.get(commonSelectors.resendEmailButton).click();
+    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}`;
+    });
+  });
+});

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/UserInviteFlow.cy.js

@@ -11,6 +11,21 @@ import {
   inviteUserWithUserRole,
   fetchAndVisitInviteLink,
 } from "Support/utils/manageUsers";
+import {
+  addNewUser,
+  visitWorkspaceInvitation,
+  newInvite,
+} from "Support/utils/onboarding";
+import { commonText } from "Texts/common";
+import { setSignupStatus, enableSignUp } from "Support/utils/manageSSO";
+import { ssoSelector } from "Selectors/manageSSO";
+import {
+  SignUpPageElements,
+  verifyConfirmEmailPage,
+  signUpLink,
+  verifyOnboardingQuestions,
+} from "Support/utils/onboarding";
+
 import {
   navigateToManageUsers,
   logout,
@@ -20,20 +35,20 @@ import {
 import { updateWorkspaceName } from "Support/utils/userPermissions";
 import { groupsSelector } from "Selectors/manageGroups";
 import { groupsText } from "Texts/manageGroups";
-import { addNewUser, visitWorkspaceInvitation } from "Support/utils/onboarding";
-import { commonText } from "Texts/common";
+import { onboardingSelectors } from "Selectors/onboarding";
+
+let invitationToken,
+  organizationToken,
+  workspaceId,
+  userId,
+  url = "";
 
 const data = {};
 
-describe("Manage Users", () => {
+describe("user invite flow cases", () => {
   beforeEach(() => {
     cy.defaultWorkspaceLogin();
   });
-  let invitationToken,
-    organizationToken,
-    workspaceId,
-    userId,
-    url = "";
   it("Should verify the Manage users page", () => {
     data.firstName = fake.firstName;
     data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
@@ -45,8 +60,7 @@ describe("Manage Users", () => {
     cy.get(usersSelector.usersPageTitle).should("be.visible");
     cy.get(usersSelector.buttonAddUsers).click();
 
-    cy.get(usersSelector.buttonInviteUsers).should('be.disabled');
-
+    cy.get(usersSelector.buttonInviteUsers).should("be.disabled");
 
     cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
     cy.clearAndType(commonSelectors.inputFieldEmailAddress, data.email);
@@ -55,7 +69,7 @@ describe("Manage Users", () => {
       "have.text",
       "Email is not valid"
     );
-    cy.get(usersSelector.buttonInviteUsers).should('be.disabled');
+    cy.get(usersSelector.buttonInviteUsers).should("be.disabled");
 
     cy.clearAndType(commonSelectors.inputFieldFullName, data.firstName);
     cy.clearAndType(
@@ -64,18 +78,25 @@ describe("Manage Users", () => {
     );
     cy.get(usersSelector.buttonInviteUsers).click();
 
-    cy.get('[data-cy="modal-icon"]').should('be.visible')
-    cy.get('[data-cy="modal-header"]').verifyVisibleElement("have.text", "Duplicate email");
-    cy.get(commonSelectors.modalMessage).verifyVisibleElement("have.text", "Duplicate email found. Please provide a unique email address.")
-    cy.get('[data-cy="close-button"]:eq(1)').should('be.visible').click();
-    cy.get(commonSelectors.inputFieldEmailAddress).should("have.value", usersText.adminUserEmail)
-
+    cy.get('[data-cy="modal-icon"]').should("be.visible");
+    cy.get('[data-cy="modal-header"]').verifyVisibleElement(
+      "have.text",
+      "Duplicate email"
+    );
+    cy.get(commonSelectors.modalMessage).verifyVisibleElement(
+      "have.text",
+      "Duplicate email found. Please provide a unique email address."
+    );
+    cy.get('[data-cy="close-button"]:eq(1)').should("be.visible").click();
+    cy.get(commonSelectors.inputFieldEmailAddress).should(
+      "have.value",
+      usersText.adminUserEmail
+    );
   });
 
   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();
 
     navigateToManageUsers();
     fillUserInviteForm(data.firstName, data.email);
@@ -84,9 +105,9 @@ describe("Manage Users", () => {
     fetchAndVisitInviteLink(data.email);
     confirmInviteElements(data.email);
 
-    cy.clearAndType(commonSelectors.passwordInputField, "pass");
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, "pass");
     cy.get(commonSelectors.signUpButton).should("be.disabled");
-    cy.clearAndType(commonSelectors.passwordInputField, usersText.password);
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, usersText.password);
     cy.get(commonSelectors.signUpButton).should("not.be.disabled");
     cy.get(commonSelectors.signUpButton).click();
 
@@ -98,14 +119,12 @@ describe("Manage Users", () => {
       "have.text",
       commonText.invitePageSubHeader
     );
-    cy.verifyLabel("Name");
     cy.get(commonSelectors.invitedUserName).verifyVisibleElement(
       "have.text",
       data.firstName
     );
-    cy.verifyLabel("Email");
-
-    cy.get(commonSelectors.invitedUserEmail).verifyVisibleElement(
+    cy.wait(3000);
+    cy.get(commonSelectors.invitedUseremail).verifyVisibleElement(
       "have.text",
       data.email
     );
@@ -155,14 +174,9 @@ describe("Manage Users", () => {
 
     logout();
     cy.visit("/");
-    cy.clearAndType(commonSelectors.workEmailInputField, data.email);
-    cy.clearAndType(commonSelectors.passwordInputField, usersText.password);
-    cy.get(commonSelectors.loginButton).click();
-
-    updateWorkspaceName(data.email);
-    cy.get(commonSelectors.workspaceName).click();
-    cy.contains("My workspace").should("not.exist");
-    logout();
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, usersText.password);
+    cy.get(onboardingSelectors.signInButton).click();
 
     cy.defaultWorkspaceLogin();
     navigateToManageUsers();
@@ -177,9 +191,9 @@ describe("Manage Users", () => {
 
     visitWorkspaceInvitation(data.email, "My workspace");
 
-    cy.clearAndType(commonSelectors.workEmailInputField, data.email);
-    cy.clearAndType(commonSelectors.passwordInputField, "password");
-    cy.get(commonSelectors.signInButton).click();
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
+    cy.get(onboardingSelectors.signInButton).click();
     cy.get(usersSelector.acceptInvite).click();
     cy.verifyToastMessage(commonSelectors.toastMessage, usersText.inviteToast);
     logout();
@@ -199,7 +213,6 @@ describe("Manage Users", () => {
     data.groupName1 = fake.firstName.replaceAll("[^A-Za-z]", "");
     data.groupName2 = fake.firstName.replaceAll("[^A-Za-z]", "");
 
-
     const groupNames = ["All users", "Admin"];
 
     navigateToManageUsers();
@@ -213,10 +226,6 @@ describe("Manage Users", () => {
       }
     });
     cy.get('[data-cy="user-group-select"]>>>>>').eq(0).type("Test");
-    cy.get(".css-1wlit7h-NoOptionsMessage").verifyVisibleElement(
-      "have.text",
-      "No groups found"
-    );
     cy.get(commonSelectors.cancelButton).click();
 
     cy.get(usersSelector.buttonAddUsers).click();
@@ -225,7 +234,7 @@ describe("Manage Users", () => {
     cy.get(commonSelectors.cancelButton).click();
 
     cy.get(usersSelector.buttonAddUsers).click();
-    cy.get('.selected-value').should('have.text', "End-user")
+    cy.get(".selected-value").should("have.text", "End-user");
     cy.get(commonSelectors.cancelButton).click();
 
     inviteUserWithUserRole(data.firstName, data.email, "Admin");
@@ -257,7 +266,7 @@ describe("Manage Users", () => {
       data.groupName2
     );
     logout();
-
+    cy.wait(3000);
     cy.defaultWorkspaceLogin();
     navigateToManageGroups();
     cy.get(groupsSelector.groupLink(data.groupName1)).click();
@@ -337,12 +346,27 @@ describe("Manage Users", () => {
 
     cy.get(usersSelector.buttonInviteUsers).click();
 
-    cy.get('[data-cy="modal-title"] > .tj-text-md').verifyVisibleElement("have.text", "Edit user role")
-    cy.get('[data-cy="user-email"]').verifyVisibleElement("have.text", data.email);
-    cy.get('[data-cy="modal-body"]>').verifyVisibleElement("have.text", "Are you sure you want to continue?");
-    cy.get('.modal-footer > [data-cy="cancel-button"]').verifyVisibleElement("have.text", "Cancel");
-    cy.get('[data-cy="confim-button"]').verifyVisibleElement("have.text", "Continue");
-    cy.get('[data-cy="modal-close-button"]').should('be.visible').click();
+    cy.get('[data-cy="modal-title"] > .tj-text-md').verifyVisibleElement(
+      "have.text",
+      "Edit user role"
+    );
+    cy.get('[data-cy="user-email"]').verifyVisibleElement(
+      "have.text",
+      data.email
+    );
+    cy.get('[data-cy="modal-body"]>').verifyVisibleElement(
+      "have.text",
+      "Updating the user's details will change their role from end-user to admin. Are you sure you want to continue?"
+    );
+    cy.get('.modal-footer > [data-cy="cancel-button"]').verifyVisibleElement(
+      "have.text",
+      "Cancel"
+    );
+    cy.get('[data-cy="confim-button"]').verifyVisibleElement(
+      "have.text",
+      "Continue"
+    );
+    cy.get('[data-cy="modal-close-button"]').should("be.visible").click();
 
     cy.get(usersSelector.userActionButton).click();
     cy.get(usersSelector.editUserDetailsButton).click();
@@ -359,7 +383,7 @@ describe("Manage Users", () => {
     cy.get('[data-cy="group-check-input"]').eq(0).check();
 
     cy.get(usersSelector.buttonInviteUsers).click();
-    cy.get('.modal-footer > [data-cy="cancel-button"]').click()
+    cy.get('.modal-footer > [data-cy="cancel-button"]').click();
 
     cy.get(usersSelector.userActionButton).click();
     cy.get(usersSelector.editUserDetailsButton).click();
@@ -376,15 +400,37 @@ describe("Manage Users", () => {
     cy.get('[data-cy="group-check-input"]').eq(0).check();
 
     cy.get(usersSelector.buttonInviteUsers).click();
-    cy.get('[data-cy="confim-button"]').click()
+    cy.get('[data-cy="confim-button"]').click();
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
       "User has been updated"
     );
-
     searchUser(data.email);
-    cy.get('[data-name="role-header"] [data-cy="group-chip"]').should("have.text", "Admin");
+    cy.get('[data-name="role-header"] [data-cy="group-chip"]').should(
+      "have.text",
+      "Admin"
+    );
+
+    cy.get(usersSelector.userActionButton).click();
+    cy.get(usersSelector.editUserDetailsButton).click();
+    cy.get('[data-cy="user-group-select"]>>>>>').eq(0).type("Builder");
+    cy.wait(1000);
+    cy.get('[data-cy="group-check-input"]').eq(0).check();
+
+    cy.get(usersSelector.buttonInviteUsers).click();
+    cy.get('[data-cy="confim-button"]').click();
+
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      "User has been updated"
+    );
+    searchUser(data.email);
+    cy.get('[data-name="role-header"] [data-cy="group-chip"]').should(
+      "have.text",
+      "Builder"
+    );
+
   });
 
   it("Should verify exisiting user invite flow", () => {
@@ -404,10 +450,10 @@ describe("Manage Users", () => {
     cy.get(usersSelector.buttonInviteUsers).click();
     cy.wait(2000);
     visitWorkspaceInvitation(data.email, workspaceName);
-
-    cy.clearAndType(commonSelectors.workEmailInputField, data.email);
-    cy.clearAndType(commonSelectors.passwordInputField, "password");
-    cy.get(commonSelectors.signInButton).click();
+    cy.wait(3000);
+    cy.clearAndType(onboardingSelectors.loginEmailInput, data.email);
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
+    cy.get(onboardingSelectors.signInButton).click();
     cy.get(usersSelector.acceptInvite).click();
     cy.verifyToastMessage(commonSelectors.toastMessage, usersText.inviteToast);
     logout();
@@ -421,4 +467,118 @@ describe("Manage Users", () => {
         cy.get("td small").should("have.text", usersText.activeStatus);
       });
   });
+
+  it("should verify the user signup after invited in a workspace", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.signUpName = fake.firstName;
+    data.workspaceName = fake.companyName;
+
+    setSignupStatus(true);
+    navigateToManageUsers();
+    fillUserInviteForm(data.firstName, data.email);
+    cy.get(usersSelector.buttonInviteUsers).click();
+    cy.logoutApi();
+
+    cy.visit("/");
+    cy.get(commonSelectors.createAnAccountLink).click();
+    SignUpPageElements();
+    cy.wait(3000);
+    cy.clearAndType(onboardingSelectors.nameInput, data.signUpName);
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(
+      onboardingSelectors.loginPasswordInput,
+      commonText.password
+    );
+    cy.get(commonSelectors.signUpButton).click();
+    cy.wait(1000);
+    signUpLink(data.email);
+    cy.wait(1000);
+    visitWorkspaceInvitation(data.email, "My workspace");
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, usersText.password);
+    cy.get(onboardingSelectors.signInButton).click();
+    cy.wait(3000);
+    cy.get(commonSelectors.invitedUserName).verifyVisibleElement(
+      "have.text",
+      data.signUpName
+    );
+    cy.get(commonSelectors.acceptInviteButton).click();
+  });
+
+  it("should verify the user signup with same creds after invited in a workspace", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.signUpName = fake.firstName;
+    data.workspaceName = fake.companyName;
+
+    setSignupStatus(true);
+    navigateToManageUsers();
+    fillUserInviteForm(data.firstName, data.email);
+    cy.get(usersSelector.buttonInviteUsers).click();
+    logout();
+
+    cy.get(commonSelectors.createAnAccountLink).click();
+    SignUpPageElements();
+    cy.wait(5000);
+
+    cy.clearAndType(onboardingSelectors.nameInput, data.signUpName);
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(
+      onboardingSelectors.loginPasswordInput,
+      commonText.password
+    );
+    cy.get(commonSelectors.signUpButton).click();
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      "The user is already registered. Please check your inbox for the activation link"
+    );
+  });
+
+  it("should verify exisiting user workspace signup from instance using form", () => {
+    data.firstName = fake.firstName;
+    data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
+    data.signUpName = fake.firstName;
+    data.workspaceName = fake.firstName.toLowerCase();
+
+    setSignupStatus(true);
+    navigateToManageUsers();
+    addNewUser(data.firstName, data.email);
+    logout();
+    cy.wait(3000);
+    cy.get(commonSelectors.createAnAccountLink).click();
+    cy.wait(1000);
+    cy.clearAndType(onboardingSelectors.nameInput, data.firstName);
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(
+      onboardingSelectors.loginPasswordInput,
+      commonText.password
+    );
+    cy.get(commonSelectors.signUpButton).click();
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      "User already exists in the workspace."
+    );
+    cy.apiLogin();
+    cy.apiCreateWorkspace(data.workspaceName, data.workspaceName);
+    cy.visit(`${data.workspaceName}`);
+    cy.wait(3000);
+    setSignupStatus(true, data.workspaceName);
+    logout();
+
+    cy.get(commonSelectors.createAnAccountLink).click();
+    cy.wait(3000);
+    cy.clearAndType(onboardingSelectors.nameInput, data.firstName);
+    cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+    cy.clearAndType(
+      onboardingSelectors.loginPasswordInput,
+      commonText.password
+    );
+    cy.get(commonSelectors.signUpButton).click();
+
+    cy.defaultWorkspaceLogin();
+    visitWorkspaceInvitation(data.email, data.workspaceName);
+    cy.verifyToastMessage(commonSelectors.toastMessage, usersText.inviteToast);
+    logout();
+  });
 });

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/bulkUsersUpload.cy.js

@@ -1,7 +1,7 @@
 import { commonSelectors } from "Selectors/common";
 import { usersText } from "Texts/manageUsers";
 import { usersSelector } from "Selectors/manageUsers";
-import { bulkUserUpload } from "Support/utils/manageUsers";
+import { bulkUserUpload,bulkUserUploadDuplicate} from "Support/utils/manageUsers";
 import * as common from "Support/utils/common";
 import { path } from "Texts/common";
 import { groupsSelector } from "Selectors/manageGroups";
@@ -14,8 +14,6 @@ describe("Bulk user upload", () => {
   const without_email = "cypress/fixtures/bulkUser/without_email - Sheet1.csv";
   const without_group = "cypress/fixtures/bulkUser/without_group - Sheet1.csv";
   const same_email = "cypress/fixtures/bulkUser/same_email - Sheet1.csv";
-  const invalid_group_name =
-    "cypress/fixtures/bulkUser/invalid_group_name - Sheet1.csv";
   const empty_first_and_last_name =
     "cypress/fixtures/bulkUser/empty_first_and_last_name - Sheet1.csv";
   const limit_exceeded_list =
@@ -24,11 +22,10 @@ describe("Bulk user upload", () => {
     "cypress/fixtures/bulkUser/non_existing_group -Sheet1 .csv";
   const multiple_groups =
     "cypress/fixtures/bulkUser/multiple_groups - Sheet1.csv";
-  const without_firstName =
-    "cypress/fixtures/bulkUser/without_firstname - Sheet1.csv";
-  const without_lastName =
-    "cypress/fixtures/bulkUser/without_lastname - Sheet1.csv";
+  const without_Role =
+    "cypress/fixtures/bulkUser/without_Role - Sheet1.csv";
   const invite_users = "cypress/fixtures/bulkUser/invite_users - Sheet1 .csv";
+  const Validinvite = "cypress/fixtures/bulkUser/10usersupload.csv";
 
   it("Verfiy bulk user upload invalid files", () => {
     data.firstName = fake.firstName;
@@ -42,80 +39,57 @@ describe("Bulk user upload", () => {
 
     cy.get(usersSelector.buttonAddUsers).click();
     cy.get(usersSelector.buttonUploadCsvFile).click();
-
     bulkUserUpload(
       without_name,
       "without_name",
-      "Invalid row(s): [first_name, last_name] in [11] row(s). No users were uploaded."
+      "Missing first_name,last_name,groups information in 10 row(s);. No users were uploaded, please update and try again."
     );
+
     bulkUserUpload(
       without_email,
       "without_email",
-      "Invalid row(s): [email] in [11] row(s). No users were uploaded."
+      "Missing email,groups information in 10 row(s);. No users were uploaded, please update and try again."
     );
-    bulkUserUpload(
-      without_group,
-      "without_group",
-      "Invalid row(s): [groups] in [5] row(s). No users were uploaded."
-    );
-    bulkUserUpload(
+
+    bulkUserUploadDuplicate(
       same_email,
       "same_email",
       "Duplicate email found. Please provide a unique email address."
     );
-    bulkUserUpload(
-      invalid_group_name,
-      "invalid_group_name",
-      "11 groups doesn't exist. No users were uploaded"
-    );
+
     bulkUserUpload(
       empty_first_and_last_name,
       "empty_first_and_last_name",
-      "Invalid row(s): [first_name, last_name] in [1] row(s). No users were uploaded."
+      "Missing first_name,last_name,groups information in 1 row(s);. No users were uploaded, please update and try again."
     );
     bulkUserUpload(
       limit_exceeded_list,
       "500_invite_users",
       "You can only invite 250 users at a time"
     );
+
     bulkUserUpload(
       non_existing_group,
       "non_existing_group",
-      "1 group doesn't exist. No users were uploaded"
+      "2 groups doesn't exist. No users were uploaded"
     );
+
     bulkUserUpload(
-      multiple_groups,
-      "multiple_groups",
-      "Conflicting Group Memberships: User cannot be in both the Admin group and other groups simultaneously."
+      without_Role,
+      "without_Role",
+      "Missing user_role,groups information in 5 row(s);. No users were uploaded, please update and try again."
     );
 
-    cy.get(usersSelector.inputFieldBulkUpload).selectFile(without_firstName, {
-      force: true,
-    });
-    cy.get(usersSelector.uploadedFileData).should(
-      "contain",
-      "without_firstname"
-    );
-    cy.get(usersSelector.buttonUploadUsers).click();
-    cy.get(".go2072408551")
-      .should("be.visible")
-      .and("have.text", "5 users are being added");
+    //add more groups and verify
 
-    cy.wait(5000);
+    // bulkUserUpload(
+    //   multiple_groups,
+    //   "multiple_groups",
+    //   "Conflicting Group Memberships: User cannot be in both the Admin group and other groups simultaneously."
+    // );
+
+    //   );
 
-    cy.get(usersSelector.buttonAddUsers).click();
-    cy.get(usersSelector.buttonUploadCsvFile).click();
-    cy.get(usersSelector.inputFieldBulkUpload).selectFile(without_lastName, {
-      force: true,
-    });
-    cy.get(usersSelector.uploadedFileData).should(
-      "contain",
-      "without_lastname"
-    );
-    cy.get(usersSelector.buttonUploadUsers).click();
-    cy.get(".go2072408551")
-      .should("be.visible")
-      .and("have.text", "5 users are being added");
   });
 
   it("Verify bulk user upload functionality", () => {
@@ -130,22 +104,14 @@ describe("Bulk user upload", () => {
     cy.get(usersSelector.buttonAddUsers).click();
     cy.get(usersSelector.buttonUploadCsvFile).click();
 
-    cy.get(usersSelector.inputFieldBulkUpload).selectFile(invite_users, {
-      force: true,
-    });
-    cy.get(usersSelector.uploadedFileData).should("contain", "invite_users");
-    cy.get(commonSelectors.cancelButton).click();
-
-    cy.get(usersSelector.buttonAddUsers).click();
-    cy.get(usersSelector.buttonUploadCsvFile).click();
-    cy.get(usersSelector.inputFieldBulkUpload).selectFile(invite_users, {
+    cy.get(usersSelector.inputFieldBulkUpload).selectFile(Validinvite, {
       force: true,
     });
+    cy.get(commonSelectors.fileSelector).should("contain", " 10usersupload");
     cy.get(usersSelector.buttonUploadUsers).click();
-    cy.wait(30000);
     cy.get(".go2072408551")
       .should("be.visible")
-      .and("have.text", "250 users are being added");
+      .and("have.text", "10 users are being added");
     common.searchUser("test12@gmail.com");
     cy.contains("td", "test12@gmail.com")
       .parent()

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/userManagment/resetPassword.cy.js

@@ -0,0 +1,187 @@
+import { commonSelectors } from "Selectors/common";
+import { commonText } from "Texts/common";
+import { fake } from "Fixtures/fake";
+import { addNewUser } from "Support/utils/onboarding";
+import { logout } from "Support/utils/common";
+import { onboardingSelectors } from "Selectors/onboarding";
+
+
+describe("Password reset functionality", () => {
+    const data = {};
+    let passwordResetLink = "";
+  
+    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(onboardingSelectors.signupEmailInput, data.email);
+        cy.clearAndType(onboardingSelectors.loginPasswordInput, "passw");
+        cy.get(onboardingSelectors.signInButton).click();
+        cy.verifyToastMessage(
+          commonSelectors.toastMessage,
+          "Invalid credentials"
+        );
+      }
+      cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+      cy.clearAndType(onboardingSelectors.loginPasswordInput, "passw");
+      cy.get(onboardingSelectors.signInButton).click();
+      cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        "Maximum password retry limit reached, please reset your password using forgot password option"
+      );
+    });
+
+    it("Verify forgot password page elements and functionality", () => {
+      cy.visit("/");
+      cy.get(commonSelectors.forgotPasswordLink).click();
+      cy.get(commonSelectors.pageLogo).should("be.visible");
+      cy.get(commonSelectors.forgotPasswordPageHeader).verifyVisibleElement(
+        "have.text",
+        commonText.forgotPasswordPageHeader
+      );
+      cy.get(commonSelectors.forgotPasswordPageSubHeader).verifyVisibleElement(
+        "have.text",
+        "New to ToolJet? Create an account"
+      );
+  
+      cy.get(commonSelectors.createAnAccountLink).verifyVisibleElement(
+        "have.text",
+        commonText.createAnAccountLink
+      );
+  
+      cy.get('[data-cy="email-input-field-label"]').verifyVisibleElement(
+        "have.text",
+        "Email address *"
+      );
+  
+      cy.get('[data-cy="email-input-field-input"]').should("be.visible");
+      cy.get(commonSelectors.resetPasswordLinkButton)
+        .verifyVisibleElement("have.text", commonText.resetPasswordLinkButton)
+        .and("be.disabled");
+      cy.wait(5000);
+      cy.clearAndType('[data-cy="email-input-field-input"]', data.email);
+      cy.get(commonSelectors.resetPasswordLinkButton).click();
+  
+      cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        commonText.passwordResetEmailToast
+      );
+      cy.get(commonSelectors.pageLogo).should("be.visible");
+  
+      cy.get('[data-cy="check-your-mail-header"]').verifyVisibleElement(
+        "have.text",
+        "Check your mail"
+      );
+  
+      cy.get(commonSelectors.onboardingPageDescription).verifyVisibleElement(
+        "have.text",
+        commonText.resetPasswordEmailDescription(data.email)
+      );
+      cy.get(commonSelectors.spamMessage).verifyVisibleElement(
+        "have.text",
+        commonText.spamMessage
+      );
+      cy.get(commonSelectors.onboardingSeperator).should("be.visible");
+      cy.get(commonSelectors.onboardingSeperatorText).verifyVisibleElement(
+        "have.text",
+        commonText.onboardingSeperatorText
+      );
+      cy.get(commonSelectors.backToLoginButton).verifyVisibleElement(
+        "have.text",
+        commonText.backToLoginButton
+      );
+  
+      cy.task("updateId", {
+        dbconfig: Cypress.env("app_db"),
+        sql: `select forgot_password_token from users where email='${data.email}';`,
+      }).then((resp) => {
+        passwordResetLink = `/reset-password/${resp.rows[0].forgot_password_token}`;
+      });
+    });
+
+    it("Verify reset password page and functionality", () => {
+      cy.visit(passwordResetLink);
+      cy.get(commonSelectors.pageLogo).should("be.visible");
+      cy.get(commonSelectors.passwordResetPageHeader).verifyVisibleElement(
+        "have.text",
+        commonText.passwordResetPageHeader
+      );
+      cy.get(commonSelectors.newPasswordInputLabel).verifyVisibleElement(
+        "have.text",
+        commonText.newPasswordInputLabel
+      );
+      cy.get(commonSelectors.newPasswordInputField).should("be.visible");
+      cy.get(commonSelectors.passwordHelperText)
+        .eq(0)
+        .verifyVisibleElement("have.text", commonText.passwordHelperText);
+      cy.get(commonSelectors.confirmPasswordInputFieldLabel).verifyVisibleElement(
+        "have.text",
+        commonText.confirmPasswordInputFieldLabel
+      );
+      cy.get(commonSelectors.confirmPasswordInputField).should("be.visible");
+      cy.get(commonSelectors.passwordHelperText).verifyVisibleElement(
+        "have.text",
+        commonText.passwordHelperText
+      );
+      cy.get(commonSelectors.resetPasswordButton)
+        .verifyVisibleElement("have.text", commonText.resetPasswordButton)
+        .and("be.disabled");
+  
+      cy.clearAndType(commonSelectors.newPasswordInputField, "Pass");
+      cy.get(commonSelectors.resetPasswordButton).should("be.disabled");
+  
+      cy.get(commonSelectors.newPasswordInputField).clear();
+      cy.clearAndType(commonSelectors.confirmPasswordInputField, "Pass");
+      cy.get(commonSelectors.resetPasswordButton).should("be.disabled");
+  
+      cy.clearAndType(commonSelectors.newPasswordInputField, "Pass");
+      cy.clearAndType(commonSelectors.confirmPasswordInputField, "Pass");
+      cy.get(commonSelectors.resetPasswordButton).should("be.disabled");
+  
+      cy.clearAndType(commonSelectors.newPasswordInputField, "password1");
+      cy.clearAndType(commonSelectors.confirmPasswordInputField, "password");
+      cy.get(commonSelectors.resetPasswordButton).should("be.disabled");
+  
+      cy.clearAndType(commonSelectors.newPasswordInputField, "Password");
+      cy.clearAndType(commonSelectors.confirmPasswordInputField, "password");
+      cy.get('[data-cy="confirm-password-input-error"]').verifyVisibleElement(
+        "have.text",
+        "Passwords don't match"
+      );
+  
+      cy.clearAndType(commonSelectors.newPasswordInputField, "Password");
+      cy.clearAndType(commonSelectors.confirmPasswordInputField, "Password");
+      cy.get(commonSelectors.resetPasswordButton).should("be.enabled").click();
+      cy.verifyToastMessage(
+        commonSelectors.toastMessage,
+        commonText.passwordResetSuccessToast
+      );
+  
+      cy.get(commonSelectors.pageLogo).should("be.visible");
+      cy.get('[data-cy="password-has-been-reset-header"]').verifyVisibleElement(
+        "have.text",
+        commonText.passwordResetSuccessPageHeader
+      );
+      cy.get(commonSelectors.resetPasswordPageDescription).verifyVisibleElement(
+        "have.text",
+        commonText.resetPasswordPageDescription
+      );
+      cy.get(commonSelectors.backToLoginButton).verifyVisibleElement(
+        "have.text",
+        commonText.backToLoginButton
+      );
+    });
+    
+    it("Verify user login using new password", () => {
+      cy.visit("/");
+      cy.clearAndType(onboardingSelectors.signupEmailInput, data.email);
+      cy.clearAndType(onboardingSelectors.loginPasswordInput, "Password");
+      cy.get(onboardingSelectors.signInButton).click();
+      cy.get(commonSelectors.workspaceName).should("be.visible");
+    });
+  });

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/dashboard.cy.js

@@ -41,13 +41,18 @@ describe("dashboard", () => {
     cy.intercept("GET", "/api/apps?page=1&folder=&searchKey=", {
       fixture: "intercept/emptyDashboard.json",
     }).as("emptyDashboard");
-    cy.intercept("GET", "/api/folders?searchKey=", { folders: [] }).as(
-      "folders"
-    );
-    cy.intercept("GET", "api/metadata", {
-      installed_version: "2.9.2",
-      version_ignored: false,
+
+    cy.intercept("GET", "/api/folders?searchKey=", {
+      body: { folders: [] },
+    }).as("folders");
+
+    cy.intercept("GET", "/api/metadata", {
+      body: {
+        installed_version: "2.9.2",
+        version_ignored: false,
+      },
     }).as("version");
+
     cy.defaultWorkspaceLogin();
     cy.wait("@emptyDashboard");
     cy.wait("@folders");
@@ -59,7 +64,7 @@ describe("dashboard", () => {
       "My workspace"
     );
     cy.get(commonSelectors.workspaceName).click();
-    cy.get(commonSelectors.editRectangleIcon).should("be.visible");
+    // cy.get(commonSelectors.editRectangleIcon).should("be.visible");
     cy.get(commonSelectors.appCreateButton).verifyVisibleElement(
       "have.text",
       "Create an app"
@@ -173,10 +178,14 @@ describe("dashboard", () => {
   });
 
   it("Should verify app card elements and app card operations", () => {
+    const customLayout = {
+      desktop: { top: 100, left: 20 },
+      mobile: { width: 8, height: 50 },
+    };
     cy.apiLogin();
     cy.apiCreateApp(data.appName);
     cy.openApp();
-    cy.dragAndDropWidget("Table", 250, 250);
+    cy.addComponentToApp(data.appName, "text1", customLayout);
 
     cy.backToApps();
 
@@ -190,11 +199,8 @@ describe("dashboard", () => {
           data.appName
         );
         cy.get(commonSelectors.appCreationDetails).should("be.visible");
-        cy.get(commonSelectors.appCreationDetails)
-          .should("be.visible")
-          .and(($el) => {
-            expect($el.contents().last().text().trim()).to.eq("The Developer");
-          });
+
+        //Add the edited details
       });
 
     viewAppCardOptions(data.appName);
@@ -287,7 +293,7 @@ describe("dashboard", () => {
       .and("have.text", dashboardText.appClonedToast);
     cy.wait(3000);
     cy.renameApp(data.cloneAppName);
-    cy.dragAndDropWidget("button", 25, 25);
+    cy.addComponentToApp(data.cloneAppName, "button", 25, 25);
     cy.backToApps();
     cy.wait("@appLibrary");
     cy.wait(1000);
@@ -339,11 +345,16 @@ describe("dashboard", () => {
   });
 
   it("Should verify the app CRUD operation", () => {
+    const customLayout = {
+      desktop: { top: 100, left: 20 },
+      mobile: { width: 8, height: 50 },
+    };
+
     cy.skipWalkthrough();
     data.appName = `${fake.companyName}-App`;
     cy.defaultWorkspaceLogin();
     cy.createApp(data.appName);
-    cy.dragAndDropWidget("Button", 450, 450);
+    cy.addComponentToApp(data.appName, "text1", customLayout);
 
     cy.backToApps();
 
@@ -353,7 +364,8 @@ describe("dashboard", () => {
     );
 
     navigateToAppEditor(data.appName);
-    cy.get(commonSelectors.canvas).should("contain", "Button");
+    // cy.get(commonSelectors.canvas).should("contain", "text1");
+    cy.get(".text-widget-section > div").should("be.visible");
     cy.backToApps();
     cy.wait("@appLibrary");
 
@@ -366,10 +378,16 @@ describe("dashboard", () => {
   });
 
   it("Should verify the folder CRUD operation", () => {
+    const customLayout = {
+      desktop: { top: 100, left: 20 },
+      mobile: { width: 8, height: 50 },
+    };
+
     data.appName = `${fake.companyName}-App`;
     cy.defaultWorkspaceLogin();
     cy.createApp(data.appName);
-    cy.dragAndDropWidget("Button", 100, 100);
+
+    cy.addComponentToApp(data.appName, "text1", customLayout);
 
     cy.backToApps();
 

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/errorPage.cy.js

@@ -36,13 +36,12 @@ describe("Redirection error pages", () => {
         cy.get(commonSelectors.backToHomeButton).click();
         cy.get(commonSelectors.pageSectionHeader).should("be.visible");
         cy.logoutApi();
-
-        cy.visit(`/applications/${data.lastName}`);
-        cy.get(commonSelectors.backToHomeButton).click();
-        cy.get(commonSelectors.workEmailLabel).should("be.visible");
+        cy.wait(3000);
 
         cy.apiLogin("test@tooljet.com", "password");
         cy.visit(`/applications/${data.lastName}`);
+        cy.get(commonSelectors.backToHomeButton).click();
+
     });
 
     it("Verify error message in case of restricted access", () => {
@@ -52,34 +51,30 @@ describe("Redirection error pages", () => {
         cy.openApp();
         cy.wait(1000);
         releaseApp();
-
         cy.get(commonWidgetSelector.shareAppButton).click();
-        cy.clearAndType(commonWidgetSelector.appNameSlugInput, data.slug);
         cy.wait(1000);
         cy.logoutApi();
-
         cy.apiLogin("test@tooljet.com", "password");
         cy.visit(`/applications/${data.slug}`);
-
         cy.get(commonSelectors.modalHeader).verifyVisibleElement(
             "have.text",
-            "Restricted access"
+            "Invalid link"
         );
         cy.get(commonSelectors.modalDescription).verifyVisibleElement(
             "have.text",
-            "You don’t have access to this app. Kindly contact admin to know more."
+            "The link you provided is invalid. Please check the link and try again."
         );
         cy.get(commonSelectors.backToHomeButton).verifyVisibleElement(
             "have.text",
             "Back to home page"
         );
-        cy.url().should("eq", "http://localhost:8082/error/restricted");
+        cy.url().should("eq", `${Cypress.config('baseUrl')}/error/invalid-link`);
 
         cy.get(commonSelectors.backToHomeButton).click();
         cy.get(commonSelectors.pageSectionHeader).should("be.visible");
     });
 
-    it.only("Verify error modal for app url of unreleased apps", () => {
+    it("Verify error modal for app url of unreleased apps", () => {
         data.appName = `${fake.companyName} App`;
         data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
 
@@ -90,7 +85,7 @@ describe("Redirection error pages", () => {
         cy.clearAndType(commonWidgetSelector.appSlugInput, data.slug);
         cy.wait(1000);
 
-        cy.visit(`http://localhost:8082/applications/${data.slug}`);
+        cy.visit(`${Cypress.config('baseUrl')}/applications/${data.slug}`);
         cy.get(commonSelectors.modalHeader).verifyVisibleElement(
             "have.text",
             "App URL Unavailable"
@@ -109,10 +104,7 @@ describe("Redirection error pages", () => {
             "Back to home page"
         );
 
-        cy.url().should(
-            "eq",
-            `http://localhost:8082/error/url-unavailable?appSlug=${data.slug}`
-        );
+        cy.url().should('contain', '/error/')
         cy.get(commonSelectors.backToHomeButton).click();
         cy.get(commonSelectors.pageSectionHeader).should("be.visible");
 
@@ -120,46 +112,28 @@ describe("Redirection error pages", () => {
         cy.apiLogin("test@tooljet.com", "password");
         cy.wait(500);
 
-        cy.visit(`http://localhost:8082/applications/${data.slug}`);
+        cy.visit(`${Cypress.config('baseUrl')}/applications/${data.slug}`);
         cy.get(commonSelectors.modalHeader).verifyVisibleElement(
             "have.text",
-            "Restricted access"
+            "App URL Unavailable"
         );
         cy.get(commonSelectors.modalDescription).verifyVisibleElement(
             "have.text",
-            "You don’t have access to this app. Kindly contact admin to know more."
+            "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(commonSelectors.backToHomeButton).verifyVisibleElement(
             "have.text",
             "Back to home page"
         );
-        cy.url().should("eq", "http://localhost:8082/error/restricted");
+        cy.url().should('contain', '/error/')
         cy.get(commonSelectors.backToHomeButton).click();
         cy.get(commonSelectors.pageSectionHeader).should("be.visible");
         logout();
-
-        cy.defaultWorkspaceLogin();
-        navigateToManageGroups();
-        cy.get(groupsSelector.appsLink).click();
-        cy.wait(1000);
-        cy.get(groupsSelector.appSearchBox).click();
-        cy.wait(1000);
-        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").eq(1).check();
-            });
-
-        cy.logoutApi();
         cy.apiLogin("test@tooljet.com", "password");
         cy.wait(500);
 
-        cy.visit(`http://localhost:8082/applications/${data.slug}`);
+        cy.visit(`${Cypress.config('baseUrl')}/applications/${data.slug}`);
         cy.get(commonSelectors.modalHeader).verifyVisibleElement(
             "have.text",
             "App URL Unavailable"
@@ -172,10 +146,18 @@ describe("Redirection error pages", () => {
             "have.text",
             "Back to home page"
         );
+<<<<<<< HEAD
         cy.url().should(
             "eq",
-            `http://localhost:8082/error/url-unavailable?appSlug=${data.slug}`
+<<<<<<< HEAD
+            `${Cypress.config('baseUrl')}/error/url-unavailable?appSlug=${data.slug}`
+=======
+            `http://localhost:8082/error/restricted`
+>>>>>>> main
         );
+=======
+        cy.url().should('contain', '/error/')
+>>>>>>> main
         cy.get(commonSelectors.backToHomeButton).click();
         cy.get(commonSelectors.pageSectionHeader).should("be.visible");
     });

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/inviteflow.cy.js

@@ -1,149 +0,0 @@
-import { commonSelectors } from "Selectors/common";
-import { fake } from "Fixtures/fake";
-import { usersText } from "Texts/manageUsers";
-import { usersSelector } from "Selectors/manageUsers";
-import {
-    manageUsersElements,
-    fillUserInviteForm,
-    confirmInviteElements,
-    selectUserGroup,
-    inviteUserWithUserGroups,
-    fetchAndVisitInviteLink,
-} from "Support/utils/manageUsers";
-import {
-    navigateToManageUsers,
-    logout,
-    searchUser,
-    navigateToManageGroups,
-} from "Support/utils/common";
-import { updateWorkspaceName } from "Support/utils/userPermissions";
-import { groupsSelector } from "Selectors/manageGroups";
-import { groupsText } from "Texts/manageGroups";
-import { addNewUser, visitWorkspaceInvitation, newInvite } from "Support/utils/onboarding";
-import { commonText } from "Texts/common";
-import { setSignupStatus, enableSignUp } from "Support/utils/manageSSO";
-import { ssoSelector } from "Selectors/manageSSO";
-import {
-    SignUpPageElements,
-    verifyConfirmEmailPage,
-    signUpLink,
-    verifyOnboardingQuestions,
-} from "Support/utils/onboarding";
-
-const data = {};
-
-describe("user invite flow cases", () => {
-    beforeEach(() => {
-        cy.defaultWorkspaceLogin();
-    });
-    it("should verify the user signup after invited in a workspace", () => {
-        data.firstName = fake.firstName;
-        data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
-        data.signUpName = fake.firstName;
-        data.workspaceName = fake.companyName;
-
-        setSignupStatus(true);
-        navigateToManageUsers();
-        fillUserInviteForm(data.firstName, data.email);
-        cy.get(usersSelector.buttonInviteUsers).click();
-        cy.logoutApi();
-
-        cy.visit("/");
-        cy.get(commonSelectors.createAnAccountLink).click();
-        SignUpPageElements();
-
-        cy.clearAndType(commonSelectors.nameInputField, data.signUpName);
-        cy.clearAndType(commonSelectors.emailInputField, data.email);
-        cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
-        cy.get(commonSelectors.signUpButton).click();
-        signUpLink(data.email);
-        cy.get(commonSelectors.setUpToolJetButton).click();
-        verifyOnboardingQuestions(data.signUpName, data.workspaceName);
-        visitWorkspaceInvitation(data.email, "My workspace");
-        cy.clearAndType(commonSelectors.workEmailInputField, data.email);
-        cy.clearAndType(commonSelectors.passwordInputField, usersText.password);
-        cy.get(commonSelectors.loginButton).click();
-
-        cy.get(commonSelectors.invitedUserName).verifyVisibleElement(
-            "have.text",
-            data.signUpName
-        );
-        cy.get(commonSelectors.acceptInviteButton).click();
-    });
-
-    it("should verify the user signup after invited in a workspace", () => {
-        data.firstName = fake.firstName;
-        data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
-        data.signUpName = fake.firstName;
-        data.workspaceName = fake.companyName;
-
-        setSignupStatus(true);
-        navigateToManageUsers();
-        fillUserInviteForm(data.firstName, data.email);
-        cy.get(usersSelector.buttonInviteUsers).click();
-        logout();
-
-        cy.get(ssoSelector.workspaceSubHeader).verifyVisibleElement(
-            "have.text",
-            "Sign in to your workspace - My workspace"
-        );
-        cy.get(commonSelectors.signInSubHeader).verifyVisibleElement(
-            "have.text",
-            "New to this workspace?Sign up"
-        );
-        cy.get(commonSelectors.createAnAccountLink).click();
-        SignUpPageElements();
-        cy.get(ssoSelector.workspaceSignUpHeader).verifyVisibleElement(
-            "have.text",
-            "Sign up to the workspace - My workspace"
-        );
-
-        cy.clearAndType(commonSelectors.nameInputField, data.signUpName);
-        cy.clearAndType(commonSelectors.emailInputField, data.email);
-        cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
-        cy.get(commonSelectors.signUpButton).click();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            "The user is already registered. Please check your inbox for the activation link"
-        );
-    });
-
-    it("should verify exisiting user workspace signup", () => {
-        data.firstName = fake.firstName;
-        data.email = fake.email.toLowerCase().replaceAll("[^A-Za-z]", "");
-        data.signUpName = fake.firstName;
-        data.workspaceName = fake.firstName.toLowerCase();
-
-        setSignupStatus(true);
-        navigateToManageUsers();
-        addNewUser(data.firstName, data.email);
-        logout();
-
-        cy.get(commonSelectors.createAnAccountLink).click();
-        cy.clearAndType(commonSelectors.nameInputField, data.firstName);
-        cy.clearAndType(commonSelectors.emailInputField, data.email);
-        cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
-        cy.get(commonSelectors.signUpButton).click();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            "User already exists in the workspace."
-        );
-        cy.apiLogin();
-        cy.apiCreateWorkspace(data.workspaceName, data.workspaceName);
-        cy.visit(`${data.workspaceName}`);
-        cy.wait(3000)
-        setSignupStatus(true, data.workspaceName);
-        logout();
-
-        cy.get(commonSelectors.createAnAccountLink).click();
-        cy.clearAndType(commonSelectors.nameInputField, data.firstName);
-        cy.clearAndType(commonSelectors.emailInputField, data.email);
-        cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
-        cy.get(commonSelectors.signUpButton).click();
-
-        cy.defaultWorkspaceLogin();
-        visitWorkspaceInvitation(data.email, data.workspaceName);
-        cy.verifyToastMessage(commonSelectors.toastMessage, usersText.inviteToast);
-        logout();
-    });
-});

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/profile.cy.js

@@ -5,6 +5,7 @@ import { profileText } from "Texts/profile";
 import { commonSelectors } from "Selectors/common";
 import { fake } from "Fixtures/fake";
 import { commonText } from "Texts/common";
+import { onboardingSelectors } from "Selectors/onboarding";
 
 describe("Profile Settings", () => {
   const randomFirstName = fake.firstName;
@@ -15,6 +16,7 @@ describe("Profile Settings", () => {
     common.navigateToProfile();
   });
 
+  // neeed to reset and seed bd after 1 run (as password changes will get 401 error )
   it("Should verify the elements on profile settings page and name reset functionality", () => {
     profile.profilePageElements();
 
@@ -183,20 +185,16 @@ describe("Profile Settings", () => {
     );
 
     common.logout();
-
-    cy.clearAndType(commonSelectors.workEmailInputField, commonText.email);
-    cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
-    cy.get(commonSelectors.loginButton).click();
+    cy.clearAndType(onboardingSelectors.loginEmailInput, commonText.email);
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, commonText.password);
+    cy.get(onboardingSelectors.signInButton).click();
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
       profileText.loginErrorToast
     );
 
-    cy.clearAndType(
-      commonSelectors.passwordInputField,
-      profileText.newPassword
-    );
-    cy.get(commonSelectors.signInButton).click();
+    cy.clearAndType(onboardingSelectors.loginPasswordInput, profileText.newPassword);
+    cy.get(onboardingSelectors.signInButton).click();
     common.navigateToProfile();
 
     cy.clearAndType(
@@ -213,7 +211,7 @@ describe("Profile Settings", () => {
 
     common.logout();
 
-    cy.login(commonText.email, profileText.password);
+    cy.appUILogin(commonText.email, profileText.password);
     common.logout();
   });
 });

cypress-tests/cypress/e2e/happyPath/platform/commonTestcases/workspace/workspace.cy.js

@@ -52,7 +52,7 @@ describe("Workspace", () => {
         );
         cy.get(dashboardSelector.slugField).verifyVisibleElement(
             "have.text",
-            "http://localhost:8082/<workspace-slug>"
+            `${Cypress.config('baseUrl')}/<workspace-slug>`
         );
         cy.get(commonSelectors.cancelButton).verifyVisibleElement(
             "have.text",
@@ -120,7 +120,7 @@ describe("Workspace", () => {
         );
         cy.get(dashboardSelector.slugField).verifyVisibleElement(
             "have.text",
-            `http://localhost:8082/${data.workspaceSlug}`
+            `${Cypress.config('baseUrl')}/${data.workspaceSlug}`
         );
         cy.get(dashboardSelector.slugErrorLabel).verifyVisibleElement(
             "have.text",
@@ -171,7 +171,7 @@ describe("Workspace", () => {
             "have.text",
             data.workspaceName
         );
-        cy.url().should("eq", `http://localhost:8082/${data.workspaceSlug}`);
+        cy.url().should("eq", `${Cypress.config('baseUrl')}/${data.workspaceSlug}`);
 
         cy.get(commonSelectors.workspaceName).click();
         cy.get(commonSelectors.editRectangleIcon).click();
@@ -211,7 +211,7 @@ describe("Workspace", () => {
         );
         cy.get(dashboardSelector.slugField).verifyVisibleElement(
             "have.text",
-            `http://localhost:8082/${data.workspaceSlug}`
+            `${Cypress.config('baseUrl')}/${data.workspaceSlug}`
         );
         cy.get(commonSelectors.cancelButton).verifyVisibleElement(
             "have.text",
@@ -299,6 +299,6 @@ describe("Workspace", () => {
             "have.text",
             data.workspaceName
         );
-        cy.url().should("eq", `http://localhost:8082/${data.workspaceSlug}`);
+        cy.url().should("eq", `${Cypress.config('baseUrl')}/${data.workspaceSlug}`);
     });
 });

cypress-tests/cypress/fixtures/bulkUser/10usersupload.csv

@@ -0,0 +1,11 @@
+First Name,Last Name,Email,User Role,Group
+test1,user,test1@gmail.com,Builder,
+test2,user,test3@gmail.com,End User,
+Test3,Example,test12@gmail.com,Admin,
+Test4,Example,test23@gmail.com,End User,
+Test5,Example,test24@gmail.com,End User,
+Test6,Example,test25@gmail.com,End User,
+Test7,Example,test26@gmail.com,Admin,
+Test8,Example,test27@gmail.com,Builder,
+Test9,Example,test28@gmail.com,Builder,
+Test10,Example,test29@gmail.com,End User,

cypress-tests/cypress/fixtures/bulkUser/500_invite_users - Sheet1.csv

@@ -1,499 +1,252 @@
-First Name,Last Name,Email,Groups
-Vijay,Yadav,vjyaav12@gmail.com,All Users|Admin
-Vijay,Yadav,vjyaav13@gmail.com,All Users
-Vijay,Yadav,vjyaav14@gmail.com,All Users
-Vijay,Yadav,vjyaav15@gmail.com,All Users
-Vijay,Yadav,vjyaav16@gmail.com,All Users
-Vijay,Yadav,vjyaav17@gmail.com,All Users
-Vijay,Yadav,vjyaav18@gmail.com,All Users
-Vijay,Yadav,vjyaav19@gmail.com,All Users
-Vijay,Yadav,vjyaav20@gmail.com,All Users
-Vijay,Yadav,vjyaav21@gmail.com,All Users
-Vijay,Yadav,vjyaav22@gmail.com,All Users
-Vijay,Yadav,vjyaav23@gmail.com,All Users
-Vijay,Yadav,vjyaav24@gmail.com,All Users
-Vijay,Yadav,vjyaav25@gmail.com,All Users
-Vijay,Yadav,vjyaav26@gmail.com,All Users
-Vijay,Yadav,vjyaav27@gmail.com,All Users
-Vijay,Yadav,vjyaav28@gmail.com,All Users
-Vijay,Yadav,vjyaav29@gmail.com,All Users
-Vijay,Yadav,vjyaav30@gmail.com,All Users
-Vijay,Yadav,vjyaav31@gmail.com,All Users
-Vijay,Yadav,vjyaav32@gmail.com,All Users
-Vijay,Yadav,vjyaav33@gmail.com,All Users
-Vijay,Yadav,vjyaav34@gmail.com,All Users
-Vijay,Yadav,vjyaav35@gmail.com,All Users
-Vijay,Yadav,vjyaav36@gmail.com,All Users
-Vijay,Yadav,vjyaav37@gmail.com,All Users
-Vijay,Yadav,vjyaav38@gmail.com,All Users
-Vijay,Yadav,vjyaav39@gmail.com,All Users
-Vijay,Yadav,vjyaav40@gmail.com,All Users
-Vijay,Yadav,vjyaav41@gmail.com,All Users
-Vijay,Yadav,vjyaav42@gmail.com,All Users
-Vijay,Yadav,vjyaav43@gmail.com,All Users
-Vijay,Yadav,vjyaav44@gmail.com,All Users
-Vijay,Yadav,vjyaav45@gmail.com,All Users
-Vijay,Yadav,vjyaav46@gmail.com,All Users
-Vijay,Yadav,vjyaav47@gmail.com,All Users
-Vijay,Yadav,vjyaav48@gmail.com,All Users
-Vijay,Yadav,vjyaav49@gmail.com,All Users
-Vijay,Yadav,vjyaav50@gmail.com,All Users
-Vijay,Yadav,vjyaav51@gmail.com,All Users
-Vijay,Yadav,vjyaav52@gmail.com,All Users
-Vijay,Yadav,vjyaav53@gmail.com,All Users
-Vijay,Yadav,vjyaav54@gmail.com,All Users
-Vijay,Yadav,vjyaav55@gmail.com,All Users
-Vijay,Yadav,vjyaav56@gmail.com,All Users
-Vijay,Yadav,vjyaav57@gmail.com,All Users
-Vijay,Yadav,vjyaav58@gmail.com,All Users
-Vijay,Yadav,vjyaav59@gmail.com,All Users
-Vijay,Yadav,vjyaav60@gmail.com,All Users
-Vijay,Yadav,vjyaav61@gmail.com,All Users
-Vijay,Yadav,vjyaav62@gmail.com,All Users
-Vijay,Yadav,vjyaav63@gmail.com,All Users
-Vijay,Yadav,vjyaav64@gmail.com,All Users
-Vijay,Yadav,vjyaav65@gmail.com,All Users
-Vijay,Yadav,vjyaav66@gmail.com,All Users
-Vijay,Yadav,vjyaav67@gmail.com,All Users
-Vijay,Yadav,vjyaav68@gmail.com,All Users
-Vijay,Yadav,vjyaav69@gmail.com,All Users
-Vijay,Yadav,vjyaav70@gmail.com,All Users
-Vijay,Yadav,vjyaav71@gmail.com,All Users
-Vijay,Yadav,vjyaav72@gmail.com,All Users
-Vijay,Yadav,vjyaav73@gmail.com,All Users
-Vijay,Yadav,vjyaav74@gmail.com,All Users
-Vijay,Yadav,vjyaav75@gmail.com,All Users
-Vijay,Yadav,vjyaav76@gmail.com,All Users
-Vijay,Yadav,vjyaav77@gmail.com,All Users
-Vijay,Yadav,vjyaav78@gmail.com,All Users
-Vijay,Yadav,vjyaav79@gmail.com,All Users
-Vijay,Yadav,vjyaav80@gmail.com,All Users
-Vijay,Yadav,vjyaav81@gmail.com,All Users
-Vijay,Yadav,vjyaav82@gmail.com,All Users
-Vijay,Yadav,vjyaav83@gmail.com,All Users
-Vijay,Yadav,vjyaav84@gmail.com,All Users
-Vijay,Yadav,vjyaav85@gmail.com,All Users
-Vijay,Yadav,vjyaav86@gmail.com,All Users
-Vijay,Yadav,vjyaav87@gmail.com,All Users
-Vijay,Yadav,vjyaav88@gmail.com,All Users
-Vijay,Yadav,vjyaav89@gmail.com,All Users
-Vijay,Yadav,vjyaav90@gmail.com,All Users
-Vijay,Yadav,vjyaav91@gmail.com,All Users
-Vijay,Yadav,vjyaav92@gmail.com,All Users
-Vijay,Yadav,vjyaav93@gmail.com,All Users
-Vijay,Yadav,vjyaav94@gmail.com,All Users
-Vijay,Yadav,vjyaav95@gmail.com,All Users
-Vijay,Yadav,vjyaav96@gmail.com,All Users
-Vijay,Yadav,vjyaav97@gmail.com,All Users
-Vijay,Yadav,vjyaav98@gmail.com,All Users
-Vijay,Yadav,vjyaav99@gmail.com,All Users
-Vijay,Yadav,vjyaav100@gmail.com,All Users
-Vijay,Yadav,vjyaav101@gmail.com,All Users
-Vijay,Yadav,vjyaav102@gmail.com,All Users
-Vijay,Yadav,vjyaav103@gmail.com,All Users
-Vijay,Yadav,vjyaav104@gmail.com,All Users
-Vijay,Yadav,vjyaav105@gmail.com,All Users
-Vijay,Yadav,vjyaav106@gmail.com,All Users
-Vijay,Yadav,vjyaav107@gmail.com,All Users
-Vijay,Yadav,vjyaav108@gmail.com,All Users
-Vijay,Yadav,vjyaav109@gmail.com,All Users
-Vijay,Yadav,vjyaav110@gmail.com,All Users
-Vijay,Yadav,vjyaav111@gmail.com,All Users
-Vijay,Yadav,vjyaav112@gmail.com,All Users
-Vijay,Yadav,vjyaav113@gmail.com,All Users
-Vijay,Yadav,vjyaav114@gmail.com,All Users
-Vijay,Yadav,vjyaav115@gmail.com,All Users
-Vijay,Yadav,vjyaav116@gmail.com,All Users
-Vijay,Yadav,vjyaav117@gmail.com,All Users
-Vijay,Yadav,vjyaav118@gmail.com,All Users
-Vijay,Yadav,vjyaav119@gmail.com,All Users
-Vijay,Yadav,vjyaav120@gmail.com,All Users
-Vijay,Yadav,vjyaav121@gmail.com,All Users
-Vijay,Yadav,vjyaav122@gmail.com,All Users
-Vijay,Yadav,vjyaav123@gmail.com,All Users
-Vijay,Yadav,vjyaav124@gmail.com,All Users
-Vijay,Yadav,vjyaav125@gmail.com,All Users
-Vijay,Yadav,vjyaav126@gmail.com,All Users
-Vijay,Yadav,vjyaav127@gmail.com,All Users
-Vijay,Yadav,vjyaav128@gmail.com,All Users
-Vijay,Yadav,vjyaav129@gmail.com,All Users
-Vijay,Yadav,vjyaav130@gmail.com,All Users
-Vijay,Yadav,vjyaav131@gmail.com,All Users
-Vijay,Yadav,vjyaav132@gmail.com,All Users
-Vijay,Yadav,vjyaav133@gmail.com,All Users
-Vijay,Yadav,vjyaav134@gmail.com,All Users
-Vijay,Yadav,vjyaav135@gmail.com,All Users
-Vijay,Yadav,vjyaav136@gmail.com,All Users
-Vijay,Yadav,vjyaav137@gmail.com,All Users
-Vijay,Yadav,vjyaav138@gmail.com,All Users
-Vijay,Yadav,vjyaav139@gmail.com,All Users
-Vijay,Yadav,vjyaav140@gmail.com,All Users
-Vijay,Yadav,vjyaav141@gmail.com,All Users
-Vijay,Yadav,vjyaav142@gmail.com,All Users
-Vijay,Yadav,vjyaav143@gmail.com,All Users
-Vijay,Yadav,vjyaav144@gmail.com,All Users
-Vijay,Yadav,vjyaav145@gmail.com,All Users
-Vijay,Yadav,vjyaav146@gmail.com,All Users
-Vijay,Yadav,vjyaav147@gmail.com,All Users
-Vijay,Yadav,vjyaav148@gmail.com,All Users
-Vijay,Yadav,vjyaav149@gmail.com,All Users
-Vijay,Yadav,vjyaav150@gmail.com,All Users
-Vijay,Yadav,vjyaav151@gmail.com,All Users
-Vijay,Yadav,vjyaav152@gmail.com,All Users
-Vijay,Yadav,vjyaav153@gmail.com,All Users
-Vijay,Yadav,vjyaav154@gmail.com,All Users
-Vijay,Yadav,vjyaav155@gmail.com,All Users
-Vijay,Yadav,vjyaav156@gmail.com,All Users
-Vijay,Yadav,vjyaav157@gmail.com,All Users
-Vijay,Yadav,vjyaav158@gmail.com,All Users
-Vijay,Yadav,vjyaav159@gmail.com,All Users
-Vijay,Yadav,vjyaav160@gmail.com,All Users
-Vijay,Yadav,vjyaav161@gmail.com,All Users
-Vijay,Yadav,vjyaav162@gmail.com,All Users
-Vijay,Yadav,vjyaav163@gmail.com,All Users
-Vijay,Yadav,vjyaav164@gmail.com,All Users
-Vijay,Yadav,vjyaav165@gmail.com,All Users
-Vijay,Yadav,vjyaav166@gmail.com,All Users
-Vijay,Yadav,vjyaav167@gmail.com,All Users
-Vijay,Yadav,vjyaav168@gmail.com,All Users
-Vijay,Yadav,vjyaav169@gmail.com,All Users
-Vijay,Yadav,vjyaav170@gmail.com,All Users
-Vijay,Yadav,vjyaav171@gmail.com,All Users
-Vijay,Yadav,vjyaav172@gmail.com,All Users
-Vijay,Yadav,vjyaav173@gmail.com,All Users
-Vijay,Yadav,vjyaav174@gmail.com,All Users
-Vijay,Yadav,vjyaav175@gmail.com,All Users
-Vijay,Yadav,vjyaav176@gmail.com,All Users
-Vijay,Yadav,vjyaav177@gmail.com,All Users
-Vijay,Yadav,vjyaav178@gmail.com,All Users
-Vijay,Yadav,vjyaav179@gmail.com,All Users
-Vijay,Yadav,vjyaav180@gmail.com,All Users
-Vijay,Yadav,vjyaav181@gmail.com,All Users
-Vijay,Yadav,vjyaav182@gmail.com,All Users
-Vijay,Yadav,vjyaav183@gmail.com,All Users
-Vijay,Yadav,vjyaav184@gmail.com,All Users
-Vijay,Yadav,vjyaav185@gmail.com,All Users
-Vijay,Yadav,vjyaav186@gmail.com,All Users
-Vijay,Yadav,vjyaav187@gmail.com,All Users
-Vijay,Yadav,vjyaav188@gmail.com,All Users
-Vijay,Yadav,vjyaav189@gmail.com,All Users
-Vijay,Yadav,vjyaav190@gmail.com,All Users
-Vijay,Yadav,vjyaav191@gmail.com,All Users
-Vijay,Yadav,vjyaav192@gmail.com,All Users
-Vijay,Yadav,vjyaav193@gmail.com,All Users
-Vijay,Yadav,vjyaav194@gmail.com,All Users
-Vijay,Yadav,vjyaav195@gmail.com,All Users
-Vijay,Yadav,vjyaav196@gmail.com,All Users
-Vijay,Yadav,vjyaav197@gmail.com,All Users
-Vijay,Yadav,vjyaav198@gmail.com,All Users
-Vijay,Yadav,vjyaav199@gmail.com,All Users
-Vijay,Yadav,vjyaav200@gmail.com,All Users
-Vijay,Yadav,vjyaav201@gmail.com,All Users
-Vijay,Yadav,vjyaav202@gmail.com,All Users
-Vijay,Yadav,vjyaav203@gmail.com,All Users
-Vijay,Yadav,vjyaav204@gmail.com,All Users
-Vijay,Yadav,vjyaav205@gmail.com,All Users
-Vijay,Yadav,vjyaav206@gmail.com,All Users
-Vijay,Yadav,vjyaav207@gmail.com,All Users
-Vijay,Yadav,vjyaav208@gmail.com,All Users
-Vijay,Yadav,vjyaav209@gmail.com,All Users
-Vijay,Yadav,vjyaav210@gmail.com,All Users
-Vijay,Yadav,vjyaav211@gmail.com,All Users
-Vijay,Yadav,vjyaav212@gmail.com,All Users
-Vijay,Yadav,vjyaav213@gmail.com,All Users
-Vijay,Yadav,vjyaav214@gmail.com,All Users
-Vijay,Yadav,vjyaav215@gmail.com,All Users
-Vijay,Yadav,vjyaav216@gmail.com,All Users
-Vijay,Yadav,vjyaav217@gmail.com,All Users
-Vijay,Yadav,vjyaav218@gmail.com,All Users
-Vijay,Yadav,vjyaav219@gmail.com,All Users
-Vijay,Yadav,vjyaav220@gmail.com,All Users
-Vijay,Yadav,vjyaav221@gmail.com,All Users
-Vijay,Yadav,vjyaav222@gmail.com,All Users
-Vijay,Yadav,vjyaav223@gmail.com,All Users
-Vijay,Yadav,vjyaav224@gmail.com,All Users
-Vijay,Yadav,vjyaav225@gmail.com,All Users
-Vijay,Yadav,vjyaav226@gmail.com,All Users
-Vijay,Yadav,vjyaav227@gmail.com,All Users
-Vijay,Yadav,vjyaav228@gmail.com,All Users
-Vijay,Yadav,vjyaav229@gmail.com,All Users
-Vijay,Yadav,vjyaav230@gmail.com,All Users
-Vijay,Yadav,vjyaav231@gmail.com,All Users
-Vijay,Yadav,vjyaav232@gmail.com,All Users
-Vijay,Yadav,vjyaav233@gmail.com,All Users
-Vijay,Yadav,vjyaav234@gmail.com,All Users
-Vijay,Yadav,vjyaav235@gmail.com,All Users
-Vijay,Yadav,vjyaav236@gmail.com,All Users
-Vijay,Yadav,vjyaav237@gmail.com,All Users
-Vijay,Yadav,vjyaav238@gmail.com,All Users
-Vijay,Yadav,vjyaav239@gmail.com,All Users
-Vijay,Yadav,vjyaav240@gmail.com,All Users
-Vijay,Yadav,vjyaav241@gmail.com,All Users
-Vijay,Yadav,vjyaav242@gmail.com,All Users
-Vijay,Yadav,vjyaav243@gmail.com,All Users
-Vijay,Yadav,vjyaav244@gmail.com,All Users
-Vijay,Yadav,vjyaav245@gmail.com,All Users
-Vijay,Yadav,vjyaav246@gmail.com,All Users
-Vijay,Yadav,vjyaav247@gmail.com,All Users
-Vijay,Yadav,vjyaav248@gmail.com,All Users
-Vijay,Yadav,vjyaav249@gmail.com,All Users
-Vijay,Yadav,vjyaav250@gmail.com,All Users
-Vijay,Yadav,vjyaav251@gmail.com,All Users
-Vijay,Yadav,vjyaav252@gmail.com,All Users
-Vijay,Yadav,vjyaav253@gmail.com,All Users
-Vijay,Yadav,vjyaav254@gmail.com,All Users
-Vijay,Yadav,vjyaav255@gmail.com,All Users
-Vijay,Yadav,vjyaav256@gmail.com,All Users
-Vijay,Yadav,vjyaav257@gmail.com,All Users
-Vijay,Yadav,vjyaav258@gmail.com,All Users
-Vijay,Yadav,vjyaav259@gmail.com,All Users
-Vijay,Yadav,vjyaav260@gmail.com,All Users
-Vijay,Yadav,vjyaav261@gmail.com,All Users
-Vijay,Yadav,vjyaav262@gmail.com,All Users
-Vijay,Yadav,vjyaav263@gmail.com,All Users
-Vijay,Yadav,vjyaav264@gmail.com,All Users
-Vijay,Yadav,vjyaav265@gmail.com,All Users
-Vijay,Yadav,vjyaav266@gmail.com,All Users
-Vijay,Yadav,vjyaav267@gmail.com,All Users
-Vijay,Yadav,vjyaav268@gmail.com,All Users
-Vijay,Yadav,vjyaav269@gmail.com,All Users
-Vijay,Yadav,vjyaav270@gmail.com,All Users
-Vijay,Yadav,vjyaav271@gmail.com,All Users
-Vijay,Yadav,vjyaav272@gmail.com,All Users
-Vijay,Yadav,vjyaav273@gmail.com,All Users
-Vijay,Yadav,vjyaav274@gmail.com,All Users
-Vijay,Yadav,vjyaav275@gmail.com,All Users
-Vijay,Yadav,vjyaav276@gmail.com,All Users
-Vijay,Yadav,vjyaav277@gmail.com,All Users
-Vijay,Yadav,vjyaav278@gmail.com,All Users
-Vijay,Yadav,vjyaav279@gmail.com,All Users
-Vijay,Yadav,vjyaav280@gmail.com,All Users
-Vijay,Yadav,vjyaav281@gmail.com,All Users
-Vijay,Yadav,vjyaav282@gmail.com,All Users
-Vijay,Yadav,vjyaav283@gmail.com,All Users
-Vijay,Yadav,vjyaav284@gmail.com,All Users
-Vijay,Yadav,vjyaav285@gmail.com,All Users
-Vijay,Yadav,vjyaav286@gmail.com,All Users
-Vijay,Yadav,vjyaav287@gmail.com,All Users
-Vijay,Yadav,vjyaav288@gmail.com,All Users
-Vijay,Yadav,vjyaav289@gmail.com,All Users
-Vijay,Yadav,vjyaav290@gmail.com,All Users
-Vijay,Yadav,vjyaav291@gmail.com,All Users
-Vijay,Yadav,vjyaav292@gmail.com,All Users
-Vijay,Yadav,vjyaav293@gmail.com,All Users
-Vijay,Yadav,vjyaav294@gmail.com,All Users
-Vijay,Yadav,vjyaav295@gmail.com,All Users
-Vijay,Yadav,vjyaav296@gmail.com,All Users
-Vijay,Yadav,vjyaav297@gmail.com,All Users
-Vijay,Yadav,vjyaav298@gmail.com,All Users
-Vijay,Yadav,vjyaav299@gmail.com,All Users
-Vijay,Yadav,vjyaav300@gmail.com,All Users
-Vijay,Yadav,vjyaav301@gmail.com,All Users
-Vijay,Yadav,vjyaav302@gmail.com,All Users
-Vijay,Yadav,vjyaav303@gmail.com,All Users
-Vijay,Yadav,vjyaav304@gmail.com,All Users
-Vijay,Yadav,vjyaav305@gmail.com,All Users
-Vijay,Yadav,vjyaav306@gmail.com,All Users
-Vijay,Yadav,vjyaav307@gmail.com,All Users
-Vijay,Yadav,vjyaav308@gmail.com,All Users
-Vijay,Yadav,vjyaav309@gmail.com,All Users
-Vijay,Yadav,vjyaav310@gmail.com,All Users
-Vijay,Yadav,vjyaav311@gmail.com,All Users
-Vijay,Yadav,vjyaav312@gmail.com,All Users
-Vijay,Yadav,vjyaav313@gmail.com,All Users
-Vijay,Yadav,vjyaav314@gmail.com,All Users
-Vijay,Yadav,vjyaav315@gmail.com,All Users
-Vijay,Yadav,vjyaav316@gmail.com,All Users
-Vijay,Yadav,vjyaav317@gmail.com,All Users
-Vijay,Yadav,vjyaav318@gmail.com,All Users
-Vijay,Yadav,vjyaav319@gmail.com,All Users
-Vijay,Yadav,vjyaav320@gmail.com,All Users
-Vijay,Yadav,vjyaav321@gmail.com,All Users
-Vijay,Yadav,vjyaav322@gmail.com,All Users
-Vijay,Yadav,vjyaav323@gmail.com,All Users
-Vijay,Yadav,vjyaav324@gmail.com,All Users
-Vijay,Yadav,vjyaav325@gmail.com,All Users
-Vijay,Yadav,vjyaav326@gmail.com,All Users
-Vijay,Yadav,vjyaav327@gmail.com,All Users
-Vijay,Yadav,vjyaav328@gmail.com,All Users
-Vijay,Yadav,vjyaav329@gmail.com,All Users
-Vijay,Yadav,vjyaav330@gmail.com,All Users
-Vijay,Yadav,vjyaav331@gmail.com,All Users
-Vijay,Yadav,vjyaav332@gmail.com,All Users
-Vijay,Yadav,vjyaav333@gmail.com,All Users
-Vijay,Yadav,vjyaav334@gmail.com,All Users
-Vijay,Yadav,vjyaav335@gmail.com,All Users
-Vijay,Yadav,vjyaav336@gmail.com,All Users
-Vijay,Yadav,vjyaav337@gmail.com,All Users
-Vijay,Yadav,vjyaav338@gmail.com,All Users
-Vijay,Yadav,vjyaav339@gmail.com,All Users
-Vijay,Yadav,vjyaav340@gmail.com,All Users
-Vijay,Yadav,vjyaav341@gmail.com,All Users
-Vijay,Yadav,vjyaav342@gmail.com,All Users
-Vijay,Yadav,vjyaav343@gmail.com,All Users
-Vijay,Yadav,vjyaav344@gmail.com,All Users
-Vijay,Yadav,vjyaav345@gmail.com,All Users
-Vijay,Yadav,vjyaav346@gmail.com,All Users
-Vijay,Yadav,vjyaav347@gmail.com,All Users
-Vijay,Yadav,vjyaav348@gmail.com,All Users
-Vijay,Yadav,vjyaav349@gmail.com,All Users
-Vijay,Yadav,vjyaav350@gmail.com,All Users
-Vijay,Yadav,vjyaav351@gmail.com,All Users
-Vijay,Yadav,vjyaav352@gmail.com,All Users
-Vijay,Yadav,vjyaav353@gmail.com,All Users
-Vijay,Yadav,vjyaav354@gmail.com,All Users
-Vijay,Yadav,vjyaav355@gmail.com,All Users
-Vijay,Yadav,vjyaav356@gmail.com,All Users
-Vijay,Yadav,vjyaav357@gmail.com,All Users
-Vijay,Yadav,vjyaav358@gmail.com,All Users
-Vijay,Yadav,vjyaav359@gmail.com,All Users
-Vijay,Yadav,vjyaav360@gmail.com,All Users
-Vijay,Yadav,vjyaav361@gmail.com,All Users
-Vijay,Yadav,vjyaav362@gmail.com,All Users
-Vijay,Yadav,vjyaav363@gmail.com,All Users
-Vijay,Yadav,vjyaav364@gmail.com,All Users
-Vijay,Yadav,vjyaav365@gmail.com,All Users
-Vijay,Yadav,vjyaav366@gmail.com,All Users
-Vijay,Yadav,vjyaav367@gmail.com,All Users
-Vijay,Yadav,vjyaav368@gmail.com,All Users
-Vijay,Yadav,vjyaav369@gmail.com,All Users
-Vijay,Yadav,vjyaav370@gmail.com,All Users
-Vijay,Yadav,vjyaav371@gmail.com,All Users
-Vijay,Yadav,vjyaav372@gmail.com,All Users
-Vijay,Yadav,vjyaav373@gmail.com,All Users
-Vijay,Yadav,vjyaav374@gmail.com,All Users
-Vijay,Yadav,vjyaav375@gmail.com,All Users
-Vijay,Yadav,vjyaav376@gmail.com,All Users
-Vijay,Yadav,vjyaav377@gmail.com,All Users
-Vijay,Yadav,vjyaav378@gmail.com,All Users
-Vijay,Yadav,vjyaav379@gmail.com,All Users
-Vijay,Yadav,vjyaav380@gmail.com,All Users
-Vijay,Yadav,vjyaav381@gmail.com,All Users
-Vijay,Yadav,vjyaav382@gmail.com,All Users
-Vijay,Yadav,vjyaav383@gmail.com,All Users
-Vijay,Yadav,vjyaav384@gmail.com,All Users
-Vijay,Yadav,vjyaav385@gmail.com,All Users
-Vijay,Yadav,vjyaav386@gmail.com,All Users
-Vijay,Yadav,vjyaav387@gmail.com,All Users
-Vijay,Yadav,vjyaav388@gmail.com,All Users
-Vijay,Yadav,vjyaav389@gmail.com,All Users
-Vijay,Yadav,vjyaav390@gmail.com,All Users
-Vijay,Yadav,vjyaav391@gmail.com,All Users
-Vijay,Yadav,vjyaav392@gmail.com,All Users
-Vijay,Yadav,vjyaav393@gmail.com,All Users
-Vijay,Yadav,vjyaav394@gmail.com,All Users
-Vijay,Yadav,vjyaav395@gmail.com,All Users
-Vijay,Yadav,vjyaav396@gmail.com,All Users
-Vijay,Yadav,vjyaav397@gmail.com,All Users
-Vijay,Yadav,vjyaav398@gmail.com,All Users
-Vijay,Yadav,vjyaav399@gmail.com,All Users
-Vijay,Yadav,vjyaav400@gmail.com,All Users
-Vijay,Yadav,vjyaav401@gmail.com,All Users
-Vijay,Yadav,vjyaav402@gmail.com,All Users
-Vijay,Yadav,vjyaav403@gmail.com,All Users
-Vijay,Yadav,vjyaav404@gmail.com,All Users
-Vijay,Yadav,vjyaav405@gmail.com,All Users
-Vijay,Yadav,vjyaav406@gmail.com,All Users
-Vijay,Yadav,vjyaav407@gmail.com,All Users
-Vijay,Yadav,vjyaav408@gmail.com,All Users
-Vijay,Yadav,vjyaav409@gmail.com,All Users
-Vijay,Yadav,vjyaav410@gmail.com,All Users
-Vijay,Yadav,vjyaav411@gmail.com,All Users
-Vijay,Yadav,vjyaav412@gmail.com,All Users
-Vijay,Yadav,vjyaav413@gmail.com,All Users
-Vijay,Yadav,vjyaav414@gmail.com,All Users
-Vijay,Yadav,vjyaav415@gmail.com,All Users
-Vijay,Yadav,vjyaav416@gmail.com,All Users
-Vijay,Yadav,vjyaav417@gmail.com,All Users
-Vijay,Yadav,vjyaav418@gmail.com,All Users
-Vijay,Yadav,vjyaav419@gmail.com,All Users
-Vijay,Yadav,vjyaav420@gmail.com,All Users
-Vijay,Yadav,vjyaav421@gmail.com,All Users
-Vijay,Yadav,vjyaav422@gmail.com,All Users
-Vijay,Yadav,vjyaav423@gmail.com,All Users
-Vijay,Yadav,vjyaav424@gmail.com,All Users
-Vijay,Yadav,vjyaav425@gmail.com,All Users
-Vijay,Yadav,vjyaav426@gmail.com,All Users
-Vijay,Yadav,vjyaav427@gmail.com,All Users
-Vijay,Yadav,vjyaav428@gmail.com,All Users
-Vijay,Yadav,vjyaav429@gmail.com,All Users
-Vijay,Yadav,vjyaav430@gmail.com,All Users
-Vijay,Yadav,vjyaav431@gmail.com,All Users
-Vijay,Yadav,vjyaav432@gmail.com,All Users
-Vijay,Yadav,vjyaav433@gmail.com,All Users
-Vijay,Yadav,vjyaav434@gmail.com,All Users
-Vijay,Yadav,vjyaav435@gmail.com,All Users
-Vijay,Yadav,vjyaav436@gmail.com,All Users
-Vijay,Yadav,vjyaav437@gmail.com,All Users
-Vijay,Yadav,vjyaav438@gmail.com,All Users
-Vijay,Yadav,vjyaav439@gmail.com,All Users
-Vijay,Yadav,vjyaav440@gmail.com,All Users
-Vijay,Yadav,vjyaav441@gmail.com,All Users
-Vijay,Yadav,vjyaav442@gmail.com,All Users
-Vijay,Yadav,vjyaav443@gmail.com,All Users
-Vijay,Yadav,vjyaav444@gmail.com,All Users
-Vijay,Yadav,vjyaav445@gmail.com,All Users
-Vijay,Yadav,vjyaav446@gmail.com,All Users
-Vijay,Yadav,vjyaav447@gmail.com,All Users
-Vijay,Yadav,vjyaav448@gmail.com,All Users
-Vijay,Yadav,vjyaav449@gmail.com,All Users
-Vijay,Yadav,vjyaav450@gmail.com,All Users
-Vijay,Yadav,vjyaav451@gmail.com,All Users
-Vijay,Yadav,vjyaav452@gmail.com,All Users
-Vijay,Yadav,vjyaav453@gmail.com,All Users
-Vijay,Yadav,vjyaav454@gmail.com,All Users
-Vijay,Yadav,vjyaav455@gmail.com,All Users
-Vijay,Yadav,vjyaav456@gmail.com,All Users
-Vijay,Yadav,vjyaav457@gmail.com,All Users
-Vijay,Yadav,vjyaav458@gmail.com,All Users
-Vijay,Yadav,vjyaav459@gmail.com,All Users
-Vijay,Yadav,vjyaav460@gmail.com,All Users
-Vijay,Yadav,vjyaav461@gmail.com,All Users
-Vijay,Yadav,vjyaav462@gmail.com,All Users
-Vijay,Yadav,vjyaav463@gmail.com,All Users
-Vijay,Yadav,vjyaav464@gmail.com,All Users
-Vijay,Yadav,vjyaav465@gmail.com,All Users
-Vijay,Yadav,vjyaav466@gmail.com,All Users
-Vijay,Yadav,vjyaav467@gmail.com,All Users
-Vijay,Yadav,vjyaav468@gmail.com,All Users
-Vijay,Yadav,vjyaav469@gmail.com,All Users
-Vijay,Yadav,vjyaav470@gmail.com,All Users
-Vijay,Yadav,vjyaav471@gmail.com,All Users
-Vijay,Yadav,vjyaav472@gmail.com,All Users
-Vijay,Yadav,vjyaav473@gmail.com,All Users
-Vijay,Yadav,vjyaav474@gmail.com,All Users
-Vijay,Yadav,vjyaav475@gmail.com,All Users
-Vijay,Yadav,vjyaav476@gmail.com,All Users
-Vijay,Yadav,vjyaav477@gmail.com,All Users
-Vijay,Yadav,vjyaav478@gmail.com,All Users
-Vijay,Yadav,vjyaav479@gmail.com,All Users
-Vijay,Yadav,vjyaav480@gmail.com,All Users
-Vijay,Yadav,vjyaav481@gmail.com,All Users
-Vijay,Yadav,vjyaav482@gmail.com,All Users
-Vijay,Yadav,vjyaav483@gmail.com,All Users
-Vijay,Yadav,vjyaav484@gmail.com,All Users
-Vijay,Yadav,vjyaav485@gmail.com,All Users
-Vijay,Yadav,vjyaav486@gmail.com,All Users
-Vijay,Yadav,vjyaav487@gmail.com,All Users
-Vijay,Yadav,vjyaav488@gmail.com,All Users
-Vijay,Yadav,vjyaav489@gmail.com,All Users
-Vijay,Yadav,vjyaav490@gmail.com,All Users
-Vijay,Yadav,vjyaav491@gmail.com,All Users
-Vijay,Yadav,vjyaav492@gmail.com,All Users
-Vijay,Yadav,vjyaav493@gmail.com,All Users
-Vijay,Yadav,vjyaav494@gmail.com,All Users
-Vijay,Yadav,vjyaav495@gmail.com,All Users
-Vijay,Yadav,vjyaav496@gmail.com,All Users
-Vijay,Yadav,vjyaav497@gmail.com,All Users
-Vijay,Yadav,vjyaav498@gmail.com,All Users
-Vijay,Yadav,vjyaav499@gmail.com,All Users
-Vijay,Yadav,vjyaav500@gmail.com,All Users
-Vijay,Yadav,vjyaav501@gmail.com,All Users
-Vijay,Yadav,vjyaav502@gmail.com,All Users
-Vijay,Yadav,vjyaav503@gmail.com,All Users
-Vijay,Yadav,vjyaav504@gmail.com,All Users
-Vijay,Yadav,vjyaav505@gmail.com,All Users
-Vijay,Yadav,vjyaav506@gmail.com,All Users
-Vijay,Yadav,vjyaav507@gmail.com,All Users
-Vijay,Yadav,vjyaav508@gmail.com,All Users
-Vijay,Yadav,vjyaav509@gmail.com,All Users
+First Name,Last Name,Email,User Role,Group
+Vijay,Yadav,vjyaav1@gmail.com,Admin,
+Vijay,Yadav,vjyaav2@gmail.com,Builder,
+Vijay,Yadav,vjyaav3@gmail.com,Builder,
+Vijay,Yadav,vjyaav4@gmail.com,End User,
+Vijay,Yadav,vjyaav5@gmail.com,End User,
+Vijay,Yadav,vjyaav6@gmail.com,End User,
+Vijay,Yadav,vjyaav7@gmail.com,End User,
+Vijay,Yadav,vjyaav8@gmail.com,End User,
+Vijay,Yadav,vjyaav9@gmail.com,End User,
+Vijay,Yadav,vjyaav10@gmail.com,End User,
+Vijay,Yadav,vjyaav11@gmail.com,End User,
+Vijay,Yadav,vjyaav12@gmail.com,End User,
+Vijay,Yadav,vjyaav13@gmail.com,End User,
+Vijay,Yadav,vjyaav14@gmail.com,End User,
+Vijay,Yadav,vjyaav15@gmail.com,End User,
+Vijay,Yadav,vjyaav16@gmail.com,End User,
+Vijay,Yadav,vjyaav17@gmail.com,End User,
+Vijay,Yadav,vjyaav18@gmail.com,End User,
+Vijay,Yadav,vjyaav19@gmail.com,End User,
+Vijay,Yadav,vjyaav20@gmail.com,End User,
+Vijay,Yadav,vjyaav21@gmail.com,End User,
+Vijay,Yadav,vjyaav22@gmail.com,End User,
+Vijay,Yadav,vjyaav23@gmail.com,End User,
+Vijay,Yadav,vjyaav24@gmail.com,End User,
+Vijay,Yadav,vjyaav25@gmail.com,End User,
+Vijay,Yadav,vjyaav26@gmail.com,End User,
+Vijay,Yadav,vjyaav27@gmail.com,End User,
+Vijay,Yadav,vjyaav28@gmail.com,End User,
+Vijay,Yadav,vjyaav29@gmail.com,End User,
+Vijay,Yadav,vjyaav30@gmail.com,End User,
+Vijay,Yadav,vjyaav31@gmail.com,End User,
+Vijay,Yadav,vjyaav32@gmail.com,End User,
+Vijay,Yadav,vjyaav33@gmail.com,End User,
+Vijay,Yadav,vjyaav34@gmail.com,End User,
+Vijay,Yadav,vjyaav35@gmail.com,End User,
+Vijay,Yadav,vjyaav36@gmail.com,End User,
+Vijay,Yadav,vjyaav37@gmail.com,End User,
+Vijay,Yadav,vjyaav38@gmail.com,End User,
+Vijay,Yadav,vjyaav39@gmail.com,End User,
+Vijay,Yadav,vjyaav40@gmail.com,End User,
+Vijay,Yadav,vjyaav41@gmail.com,End User,
+Vijay,Yadav,vjyaav42@gmail.com,End User,
+Vijay,Yadav,vjyaav43@gmail.com,End User,
+Vijay,Yadav,vjyaav44@gmail.com,End User,
+Vijay,Yadav,vjyaav45@gmail.com,End User,
+Vijay,Yadav,vjyaav46@gmail.com,End User,
+Vijay,Yadav,vjyaav47@gmail.com,End User,
+Vijay,Yadav,vjyaav48@gmail.com,End User,
+Vijay,Yadav,vjyaav49@gmail.com,End User,
+Vijay,Yadav,vjyaav50@gmail.com,End User,
+Vijay,Yadav,vjyaav51@gmail.com,End User,
+Vijay,Yadav,vjyaav52@gmail.com,End User,
+Vijay,Yadav,vjyaav53@gmail.com,End User,
+Vijay,Yadav,vjyaav54@gmail.com,End User,
+Vijay,Yadav,vjyaav55@gmail.com,End User,
+Vijay,Yadav,vjyaav56@gmail.com,End User,
+Vijay,Yadav,vjyaav57@gmail.com,End User,
+Vijay,Yadav,vjyaav58@gmail.com,End User,
+Vijay,Yadav,vjyaav59@gmail.com,End User,
+Vijay,Yadav,vjyaav60@gmail.com,End User,
+Vijay,Yadav,vjyaav61@gmail.com,End User,
+Vijay,Yadav,vjyaav62@gmail.com,End User,
+Vijay,Yadav,vjyaav63@gmail.com,End User,
+Vijay,Yadav,vjyaav64@gmail.com,End User,
+Vijay,Yadav,vjyaav65@gmail.com,End User,
+Vijay,Yadav,vjyaav66@gmail.com,End User,
+Vijay,Yadav,vjyaav67@gmail.com,End User,
+Vijay,Yadav,vjyaav68@gmail.com,End User,
+Vijay,Yadav,vjyaav69@gmail.com,End User,
+Vijay,Yadav,vjyaav70@gmail.com,End User,
+Vijay,Yadav,vjyaav71@gmail.com,End User,
+Vijay,Yadav,vjyaav72@gmail.com,End User,
+Vijay,Yadav,vjyaav73@gmail.com,End User,
+Vijay,Yadav,vjyaav74@gmail.com,End User,
+Vijay,Yadav,vjyaav75@gmail.com,End User,
+Vijay,Yadav,vjyaav76@gmail.com,End User,
+Vijay,Yadav,vjyaav77@gmail.com,End User,
+Vijay,Yadav,vjyaav78@gmail.com,End User,
+Vijay,Yadav,vjyaav79@gmail.com,End User,
+Vijay,Yadav,vjyaav80@gmail.com,End User,
+Vijay,Yadav,vjyaav81@gmail.com,End User,
+Vijay,Yadav,vjyaav82@gmail.com,End User,
+Vijay,Yadav,vjyaav83@gmail.com,End User,
+Vijay,Yadav,vjyaav84@gmail.com,End User,
+Vijay,Yadav,vjyaav85@gmail.com,End User,
+Vijay,Yadav,vjyaav86@gmail.com,End User,
+Vijay,Yadav,vjyaav87@gmail.com,End User,
+Vijay,Yadav,vjyaav88@gmail.com,End User,
+Vijay,Yadav,vjyaav89@gmail.com,End User,
+Vijay,Yadav,vjyaav90@gmail.com,End User,
+Vijay,Yadav,vjyaav91@gmail.com,End User,
+Vijay,Yadav,vjyaav92@gmail.com,End User,
+Vijay,Yadav,vjyaav93@gmail.com,End User,
+Vijay,Yadav,vjyaav94@gmail.com,End User,
+Vijay,Yadav,vjyaav95@gmail.com,End User,
+Vijay,Yadav,vjyaav96@gmail.com,End User,
+Vijay,Yadav,vjyaav97@gmail.com,End User,
+Vijay,Yadav,vjyaav98@gmail.com,End User,
+Vijay,Yadav,vjyaav99@gmail.com,End User,
+Vijay,Yadav,vjyaav100@gmail.com,End User,
+Vijay,Yadav,vjyaav101@gmail.com,End User,
+Vijay,Yadav,vjyaav102@gmail.com,End User,
+Vijay,Yadav,vjyaav103@gmail.com,End User,
+Vijay,Yadav,vjyaav104@gmail.com,End User,
+Vijay,Yadav,vjyaav105@gmail.com,End User,
+Vijay,Yadav,vjyaav106@gmail.com,End User,
+Vijay,Yadav,vjyaav107@gmail.com,End User,
+Vijay,Yadav,vjyaav108@gmail.com,End User,
+Vijay,Yadav,vjyaav109@gmail.com,End User,
+Vijay,Yadav,vjyaav110@gmail.com,End User,
+Vijay,Yadav,vjyaav111@gmail.com,End User,
+Vijay,Yadav,vjyaav112@gmail.com,End User,
+Vijay,Yadav,vjyaav113@gmail.com,End User,
+Vijay,Yadav,vjyaav114@gmail.com,End User,
+Vijay,Yadav,vjyaav115@gmail.com,End User,
+Vijay,Yadav,vjyaav116@gmail.com,End User,
+Vijay,Yadav,vjyaav117@gmail.com,End User,
+Vijay,Yadav,vjyaav118@gmail.com,End User,
+Vijay,Yadav,vjyaav119@gmail.com,End User,
+Vijay,Yadav,vjyaav120@gmail.com,End User,
+Vijay,Yadav,vjyaav121@gmail.com,End User,
+Vijay,Yadav,vjyaav122@gmail.com,End User,
+Vijay,Yadav,vjyaav123@gmail.com,End User,
+Vijay,Yadav,vjyaav124@gmail.com,End User,
+Vijay,Yadav,vjyaav125@gmail.com,End User,
+Vijay,Yadav,vjyaav126@gmail.com,End User,
+Vijay,Yadav,vjyaav127@gmail.com,End User,
+Vijay,Yadav,vjyaav128@gmail.com,End User,
+Vijay,Yadav,vjyaav129@gmail.com,End User,
+Vijay,Yadav,vjyaav130@gmail.com,End User,
+Vijay,Yadav,vjyaav131@gmail.com,End User,
+Vijay,Yadav,vjyaav132@gmail.com,End User,
+Vijay,Yadav,vjyaav133@gmail.com,End User,
+Vijay,Yadav,vjyaav134@gmail.com,End User,
+Vijay,Yadav,vjyaav135@gmail.com,End User,
+Vijay,Yadav,vjyaav136@gmail.com,End User,
+Vijay,Yadav,vjyaav137@gmail.com,End User,
+Vijay,Yadav,vjyaav138@gmail.com,End User,
+Vijay,Yadav,vjyaav139@gmail.com,End User,
+Vijay,Yadav,vjyaav140@gmail.com,End User,
+Vijay,Yadav,vjyaav141@gmail.com,End User,
+Vijay,Yadav,vjyaav142@gmail.com,End User,
+Vijay,Yadav,vjyaav143@gmail.com,End User,
+Vijay,Yadav,vjyaav144@gmail.com,End User,
+Vijay,Yadav,vjyaav145@gmail.com,End User,
+Vijay,Yadav,vjyaav146@gmail.com,End User,
+Vijay,Yadav,vjyaav147@gmail.com,End User,
+Vijay,Yadav,vjyaav148@gmail.com,End User,
+Vijay,Yadav,vjyaav149@gmail.com,End User,
+Vijay,Yadav,vjyaav150@gmail.com,End User,
+Vijay,Yadav,vjyaav151@gmail.com,End User,
+Vijay,Yadav,vjyaav152@gmail.com,End User,
+Vijay,Yadav,vjyaav153@gmail.com,End User,
+Vijay,Yadav,vjyaav154@gmail.com,End User,
+Vijay,Yadav,vjyaav155@gmail.com,End User,
+Vijay,Yadav,vjyaav156@gmail.com,End User,
+Vijay,Yadav,vjyaav157@gmail.com,End User,
+Vijay,Yadav,vjyaav158@gmail.com,End User,
+Vijay,Yadav,vjyaav159@gmail.com,End User,
+Vijay,Yadav,vjyaav160@gmail.com,End User,
+Vijay,Yadav,vjyaav161@gmail.com,End User,
+Vijay,Yadav,vjyaav162@gmail.com,End User,
+Vijay,Yadav,vjyaav163@gmail.com,End User,
+Vijay,Yadav,vjyaav164@gmail.com,End User,
+Vijay,Yadav,vjyaav165@gmail.com,End User,
+Vijay,Yadav,vjyaav166@gmail.com,End User,
+Vijay,Yadav,vjyaav167@gmail.com,End User,
+Vijay,Yadav,vjyaav168@gmail.com,End User,
+Vijay,Yadav,vjyaav169@gmail.com,End User,
+Vijay,Yadav,vjyaav170@gmail.com,End User,
+Vijay,Yadav,vjyaav171@gmail.com,End User,
+Vijay,Yadav,vjyaav172@gmail.com,End User,
+Vijay,Yadav,vjyaav173@gmail.com,End User,
+Vijay,Yadav,vjyaav174@gmail.com,End User,
+Vijay,Yadav,vjyaav175@gmail.com,End User,
+Vijay,Yadav,vjyaav176@gmail.com,End User,
+Vijay,Yadav,vjyaav177@gmail.com,End User,
+Vijay,Yadav,vjyaav178@gmail.com,End User,
+Vijay,Yadav,vjyaav179@gmail.com,End User,
+Vijay,Yadav,vjyaav180@gmail.com,End User,
+Vijay,Yadav,vjyaav181@gmail.com,End User,
+Vijay,Yadav,vjyaav182@gmail.com,End User,
+Vijay,Yadav,vjyaav183@gmail.com,End User,
+Vijay,Yadav,vjyaav184@gmail.com,End User,
+Vijay,Yadav,vjyaav185@gmail.com,End User,
+Vijay,Yadav,vjyaav186@gmail.com,End User,
+Vijay,Yadav,vjyaav187@gmail.com,End User,
+Vijay,Yadav,vjyaav188@gmail.com,End User,
+Vijay,Yadav,vjyaav189@gmail.com,End User,
+Vijay,Yadav,vjyaav190@gmail.com,End User,
+Vijay,Yadav,vjyaav191@gmail.com,End User,
+Vijay,Yadav,vjyaav192@gmail.com,End User,
+Vijay,Yadav,vjyaav193@gmail.com,End User,
+Vijay,Yadav,vjyaav194@gmail.com,End User,
+Vijay,Yadav,vjyaav195@gmail.com,End User,
+Vijay,Yadav,vjyaav196@gmail.com,End User,
+Vijay,Yadav,vjyaav197@gmail.com,End User,
+Vijay,Yadav,vjyaav198@gmail.com,End User,
+Vijay,Yadav,vjyaav199@gmail.com,End User,
+Vijay,Yadav,vjyaav200@gmail.com,End User,
+Vijay,Yadav,vjyaav201@gmail.com,End User,
+Vijay,Yadav,vjyaav202@gmail.com,End User,
+Vijay,Yadav,vjyaav203@gmail.com,End User,
+Vijay,Yadav,vjyaav204@gmail.com,End User,
+Vijay,Yadav,vjyaav205@gmail.com,End User,
+Vijay,Yadav,vjyaav206@gmail.com,End User,
+Vijay,Yadav,vjyaav207@gmail.com,End User,
+Vijay,Yadav,vjyaav208@gmail.com,End User,
+Vijay,Yadav,vjyaav209@gmail.com,End User,
+Vijay,Yadav,vjyaav210@gmail.com,End User,
+Vijay,Yadav,vjyaav211@gmail.com,End User,
+Vijay,Yadav,vjyaav212@gmail.com,End User,
+Vijay,Yadav,vjyaav213@gmail.com,End User,
+Vijay,Yadav,vjyaav214@gmail.com,End User,
+Vijay,Yadav,vjyaav215@gmail.com,End User,
+Vijay,Yadav,vjyaav216@gmail.com,End User,
+Vijay,Yadav,vjyaav217@gmail.com,End User,
+Vijay,Yadav,vjyaav218@gmail.com,End User,
+Vijay,Yadav,vjyaav219@gmail.com,End User,
+Vijay,Yadav,vjyaav220@gmail.com,End User,
+Vijay,Yadav,vjyaav221@gmail.com,End User,
+Vijay,Yadav,vjyaav222@gmail.com,End User,
+Vijay,Yadav,vjyaav223@gmail.com,End User,
+Vijay,Yadav,vjyaav224@gmail.com,End User,
+Vijay,Yadav,vjyaav225@gmail.com,End User,
+Vijay,Yadav,vjyaav226@gmail.com,End User,
+Vijay,Yadav,vjyaav227@gmail.com,End User,
+Vijay,Yadav,vjyaav228@gmail.com,End User,
+Vijay,Yadav,vjyaav229@gmail.com,End User,
+Vijay,Yadav,vjyaav230@gmail.com,End User,
+Vijay,Yadav,vjyaav231@gmail.com,End User,
+Vijay,Yadav,vjyaav232@gmail.com,End User,
+Vijay,Yadav,vjyaav233@gmail.com,End User,
+Vijay,Yadav,vjyaav234@gmail.com,End User,
+Vijay,Yadav,vjyaav235@gmail.com,End User,
+Vijay,Yadav,vjyaav236@gmail.com,End User,
+Vijay,Yadav,vjyaav237@gmail.com,End User,
+Vijay,Yadav,vjyaav238@gmail.com,End User,
+Vijay,Yadav,vjyaav239@gmail.com,End User,
+Vijay,Yadav,vjyaav240@gmail.com,End User,
+Vijay,Yadav,vjyaav241@gmail.com,End User,
+Vijay,Yadav,vjyaav242@gmail.com,End User,
+Vijay,Yadav,vjyaav243@gmail.com,End User,
+Vijay,Yadav,vjyaav244@gmail.com,End User,
+Vijay,Yadav,vjyaav245@gmail.com,End User,
+Vijay,Yadav,vjyaav246@gmail.com,End User,
+Vijay,Yadav,vjyaav247@gmail.com,End User,
+Vijay,Yadav,vjyaav248@gmail.com,End User,
+Vijay,Yadav,vjyaav249@gmail.com,End User,
+Vijay,Yadav,vjyaav250@gmail.com,End User,
+Vijay,Yadav,vjyaav251@gmail.com,End User,

cypress-tests/cypress/fixtures/bulkUser/empty_first_and_last_name - Sheet1.csv

@@ -1,6 +1,6 @@
-First Name,Last Name,Email,Groups
-,,test12empty@gmail.com,All Users
-Test,Example,test12empty@gmail.com,All Users
-Test,Example,test14empty@gmail.com,All Users
-Test,Example,test14empty@gmail.com,All Users
-Test,Example,test16empty@gmail.com,All Users
+First Name,Last Name,Email,User Role,Group
+,,test12empty@gmail.com,Admin,Admin
+Test,Example,test12empty@gmail.com,Builder,Builder
+Test,Example,test14empty@gmail.com,End User,End User
+Test,Example,test14empty@gmail.com,End User,End User
+Test,Example,test16empty@gmail.com,End User,End User

cypress-tests/cypress/fixtures/bulkUser/invalid_group_name - Sheet1.csv

@@ -1,12 +0,0 @@
-First Name,Last Name,Email,Groups
-Test,Example,test12@gmail.com,All-users
-Test,Example,test13@gmail.com,All-users
-Test,Example,test14@gmail.com,All-users
-Test,Example,test15@gmail.com,All-users
-Test,Example,test16@gmail.com,All-users
-Test,Example,test17@gmail.com,All-users
-Test,Example,test18@gmail.com,All-users
-Test,Example,test19@gmail.com,All-users
-Test,Example,test20@gmail.com,All-users
-Test,Example,test21@gmail.com,All-users
-Test,Example,test22@gmail.com,All-users

cypress-tests/cypress/fixtures/bulkUser/invite_users - Sheet1 .csv

@@ -1,251 +1,251 @@
-First Name,Last Name,Email,Groups
-Test,Example,test12@gmail.com,All Users|Admin
-Test,Example,test13@gmail.com,All Users
-Test,Example,test14@gmail.com,All Users
-Test,Example,test15@gmail.com,All Users
-Test,Example,test16@gmail.com,All Users
-Test,Example,test17@gmail.com,All Users
-Test,Example,test18@gmail.com,All Users
-Test,Example,test19@gmail.com,All Users
-Test,Example,test20@gmail.com,All Users
-Test,Example,test21@gmail.com,All Users
-Test,Example,test22@gmail.com,All Users
-Test,Example,test23@gmail.com,All Users
-Test,Example,test24@gmail.com,All Users
-Test,Example,test25@gmail.com,All Users
-Test,Example,test26@gmail.com,All Users
-Test,Example,test27@gmail.com,All Users
-Test,Example,test28@gmail.com,All Users
-Test,Example,test29@gmail.com,All Users
-Test,Example,test30@gmail.com,All Users
-Test,Example,test31@gmail.com,All Users
-Test,Example,test32@gmail.com,All Users
-Test,Example,test33@gmail.com,All Users
-Test,Example,test34@gmail.com,All Users
-Test,Example,test35@gmail.com,All Users
-Test,Example,test36@gmail.com,All Users
-Test,Example,test37@gmail.com,All Users
-Test,Example,test38@gmail.com,All Users
-Test,Example,test39@gmail.com,All Users
-Test,Example,test40@gmail.com,All Users
-Test,Example,test41@gmail.com,All Users
-Test,Example,test42@gmail.com,All Users
-Test,Example,test43@gmail.com,All Users
-Test,Example,test44@gmail.com,All Users
-Test,Example,test45@gmail.com,All Users
-Test,Example,test46@gmail.com,All Users
-Test,Example,test47@gmail.com,All Users
-Test,Example,test48@gmail.com,All Users
-Test,Example,test49@gmail.com,All Users
-Test,Example,test50@gmail.com,All Users
-Test,Example,test51@gmail.com,All Users
-Test,Example,test52@gmail.com,All Users
-Test,Example,test53@gmail.com,All Users
-Test,Example,test54@gmail.com,All Users
-Test,Example,test55@gmail.com,All Users
-Test,Example,test56@gmail.com,All Users
-Test,Example,test57@gmail.com,All Users
-Test,Example,test58@gmail.com,All Users
-Test,Example,test59@gmail.com,All Users
-Test,Example,test60@gmail.com,All Users
-Test,Example,test61@gmail.com,All Users
-Test,Example,test62@gmail.com,All Users
-Test,Example,test63@gmail.com,All Users
-Test,Example,test64@gmail.com,All Users
-Test,Example,test65@gmail.com,All Users
-Test,Example,test66@gmail.com,All Users
-Test,Example,test67@gmail.com,All Users
-Test,Example,test68@gmail.com,All Users
-Test,Example,test69@gmail.com,All Users
-Test,Example,test70@gmail.com,All Users
-Test,Example,test71@gmail.com,All Users
-Test,Example,test72@gmail.com,All Users
-Test,Example,test73@gmail.com,All Users
-Test,Example,test74@gmail.com,All Users
-Test,Example,test75@gmail.com,All Users
-Test,Example,test76@gmail.com,All Users
-Test,Example,test77@gmail.com,All Users
-Test,Example,test78@gmail.com,All Users
-Test,Example,test79@gmail.com,All Users
-Test,Example,test80@gmail.com,All Users
-Test,Example,test81@gmail.com,All Users
-Test,Example,test82@gmail.com,All Users
-Test,Example,test83@gmail.com,All Users
-Test,Example,test84@gmail.com,All Users
-Test,Example,test85@gmail.com,All Users
-Test,Example,test86@gmail.com,All Users
-Test,Example,test87@gmail.com,All Users
-Test,Example,test88@gmail.com,All Users
-Test,Example,test89@gmail.com,All Users
-Test,Example,test90@gmail.com,All Users
-Test,Example,test91@gmail.com,All Users
-Test,Example,test92@gmail.com,All Users
-Test,Example,test93@gmail.com,All Users
-Test,Example,test94@gmail.com,All Users
-Test,Example,test95@gmail.com,All Users
-Test,Example,test96@gmail.com,All Users
-Test,Example,test97@gmail.com,All Users
-Test,Example,test98@gmail.com,All Users
-Test,Example,test99@gmail.com,All Users
-Test,Example,test100@gmail.com,All Users
-Test,Example,test101@gmail.com,All Users
-Test,Example,test102@gmail.com,All Users
-Test,Example,test103@gmail.com,All Users
-Test,Example,test104@gmail.com,All Users
-Test,Example,test105@gmail.com,All Users
-Test,Example,test106@gmail.com,All Users
-Test,Example,test107@gmail.com,All Users
-Test,Example,test108@gmail.com,All Users
-Test,Example,test109@gmail.com,All Users
-Test,Example,test110@gmail.com,All Users
-Test,Example,test111@gmail.com,All Users
-Test,Example,test112@gmail.com,All Users
-Test,Example,test113@gmail.com,All Users
-Test,Example,test114@gmail.com,All Users
-Test,Example,test115@gmail.com,All Users
-Test,Example,test116@gmail.com,All Users
-Test,Example,test117@gmail.com,All Users
-Test,Example,test118@gmail.com,All Users
-Test,Example,test119@gmail.com,All Users
-Test,Example,test120@gmail.com,All Users
-Test,Example,test121@gmail.com,All Users
-Test,Example,test122@gmail.com,All Users
-Test,Example,test123@gmail.com,All Users
-Test,Example,test124@gmail.com,All Users
-Test,Example,test125@gmail.com,All Users
-Test,Example,test126@gmail.com,All Users
-Test,Example,test127@gmail.com,All Users
-Test,Example,test128@gmail.com,All Users
-Test,Example,test129@gmail.com,All Users
-Test,Example,test130@gmail.com,All Users
-Test,Example,test131@gmail.com,All Users
-Test,Example,test132@gmail.com,All Users
-Test,Example,test133@gmail.com,All Users
-Test,Example,test134@gmail.com,All Users
-Test,Example,test135@gmail.com,All Users
-Test,Example,test136@gmail.com,All Users
-Test,Example,test137@gmail.com,All Users
-Test,Example,test138@gmail.com,All Users
-Test,Example,test139@gmail.com,All Users
-Test,Example,test140@gmail.com,All Users
-Test,Example,test141@gmail.com,All Users
-Test,Example,test142@gmail.com,All Users
-Test,Example,test143@gmail.com,All Users
-Test,Example,test144@gmail.com,All Users
-Test,Example,test145@gmail.com,All Users
-Test,Example,test146@gmail.com,All Users
-Test,Example,test147@gmail.com,All Users
-Test,Example,test148@gmail.com,All Users
-Test,Example,test149@gmail.com,All Users
-Test,Example,test150@gmail.com,All Users
-Test,Example,test151@gmail.com,All Users
-Test,Example,test152@gmail.com,All Users
-Test,Example,test153@gmail.com,All Users
-Test,Example,test154@gmail.com,All Users
-Test,Example,test155@gmail.com,All Users
-Test,Example,test156@gmail.com,All Users
-Test,Example,test157@gmail.com,All Users
-Test,Example,test158@gmail.com,All Users
-Test,Example,test159@gmail.com,All Users
-Test,Example,test160@gmail.com,All Users
-Test,Example,test161@gmail.com,All Users
-Test,Example,test162@gmail.com,All Users
-Test,Example,test163@gmail.com,All Users
-Test,Example,test164@gmail.com,All Users
-Test,Example,test165@gmail.com,All Users
-Test,Example,test166@gmail.com,All Users
-Test,Example,test167@gmail.com,All Users
-Test,Example,test168@gmail.com,All Users
-Test,Example,test169@gmail.com,All Users
-Test,Example,test170@gmail.com,All Users
-Test,Example,test171@gmail.com,All Users
-Test,Example,test172@gmail.com,All Users
-Test,Example,test173@gmail.com,All Users
-Test,Example,test174@gmail.com,All Users
-Test,Example,test175@gmail.com,All Users
-Test,Example,test176@gmail.com,All Users
-Test,Example,test177@gmail.com,All Users
-Test,Example,test178@gmail.com,All Users
-Test,Example,test179@gmail.com,All Users
-Test,Example,test180@gmail.com,All Users
-Test,Example,test181@gmail.com,All Users
-Test,Example,test182@gmail.com,All Users
-Test,Example,test183@gmail.com,All Users
-Test,Example,test184@gmail.com,All Users
-Test,Example,test185@gmail.com,All Users
-Test,Example,test186@gmail.com,All Users
-Test,Example,test187@gmail.com,All Users
-Test,Example,test188@gmail.com,All Users
-Test,Example,test189@gmail.com,All Users
-Test,Example,test190@gmail.com,All Users
-Test,Example,test191@gmail.com,All Users
-Test,Example,test192@gmail.com,All Users
-Test,Example,test193@gmail.com,All Users
-Test,Example,test194@gmail.com,All Users
-Test,Example,test195@gmail.com,All Users
-Test,Example,test196@gmail.com,All Users
-Test,Example,test197@gmail.com,All Users
-Test,Example,test198@gmail.com,All Users
-Test,Example,test199@gmail.com,All Users
-Test,Example,test200@gmail.com,All Users
-Test,Example,test201@gmail.com,All Users
-Test,Example,test202@gmail.com,All Users
-Test,Example,test203@gmail.com,All Users
-Test,Example,test204@gmail.com,All Users
-Test,Example,test205@gmail.com,All Users
-Test,Example,test206@gmail.com,All Users
-Test,Example,test207@gmail.com,All Users
-Test,Example,test208@gmail.com,All Users
-Test,Example,test209@gmail.com,All Users
-Test,Example,test210@gmail.com,All Users
-Test,Example,test211@gmail.com,All Users
-Test,Example,test212@gmail.com,All Users
-Test,Example,test213@gmail.com,All Users
-Test,Example,test214@gmail.com,All Users
-Test,Example,test215@gmail.com,All Users
-Test,Example,test216@gmail.com,All Users
-Test,Example,test217@gmail.com,All Users
-Test,Example,test218@gmail.com,All Users
-Test,Example,test219@gmail.com,All Users
-Test,Example,test220@gmail.com,All Users
-Test,Example,test221@gmail.com,All Users
-Test,Example,test222@gmail.com,All Users
-Test,Example,test223@gmail.com,All Users
-Test,Example,test224@gmail.com,All Users
-Test,Example,test225@gmail.com,All Users
-Test,Example,test226@gmail.com,All Users
-Test,Example,test227@gmail.com,All Users
-Test,Example,test228@gmail.com,All Users
-Test,Example,test229@gmail.com,All Users
-Test,Example,test230@gmail.com,All Users
-Test,Example,test231@gmail.com,All Users
-Test,Example,test232@gmail.com,All Users
-Test,Example,test233@gmail.com,All Users
-Test,Example,test234@gmail.com,All Users
-Test,Example,test235@gmail.com,All Users
-Test,Example,test236@gmail.com,All Users
-Test,Example,test237@gmail.com,All Users
-Test,Example,test238@gmail.com,All Users
-Test,Example,test239@gmail.com,All Users
-Test,Example,test240@gmail.com,All Users
-Test,Example,test241@gmail.com,All Users
-Test,Example,test242@gmail.com,All Users
-Test,Example,test243@gmail.com,All Users
-Test,Example,test244@gmail.com,All Users
-Test,Example,test245@gmail.com,All Users
-Test,Example,test246@gmail.com,All Users
-Test,Example,test247@gmail.com,All Users
-Test,Example,test248@gmail.com,All Users
-Test,Example,test249@gmail.com,All Users
-Test,Example,test250@gmail.com,All Users
-Test,Example,test251@gmail.com,All Users
-Test,Example,test252@gmail.com,All Users
-Test,Example,test253@gmail.com,All Users
-Test,Example,test254@gmail.com,All Users
-Test,Example,test255@gmail.com,All Users
-Test,Example,test256@gmail.com,All Users
-Test,Example,test257@gmail.com,All Users
-Test,Example,test258@gmail.com,All Users
-Test,Example,test259@gmail.com,All Users
-Test,Example,test260@gmail.com,All Users
-Test,Example,test261@gmail.com,All Users
+First Name,Last Name,Email,User Role,Group
+test,test,test1@gmail.com,Admin,Admin
+test,test,test2@gmail.com,Builder,Builder
+test,test,test3@gmail.com,Builder,Builder
+test,test,test4@gmail.com,End User,End User
+test,test,test5@gmail.com,End User,End User
+test,test,test6@gmail.com,End User,End User
+test,test,test7@gmail.com,End User,End User
+test,test,test8@gmail.com,End User,End User
+test,test,test9@gmail.com,End User,End User
+test,test,test10@gmail.com,End User,End User
+test,test,test11@gmail.com,End User,End User
+test,test,test12@gmail.com,End User,End User
+test,test,test13@gmail.com,End User,End User
+test,test,test14@gmail.com,End User,End User
+test,test,test15@gmail.com,End User,End User
+test,test,test16@gmail.com,End User,End User
+test,test,test17@gmail.com,End User,End User
+test,test,test18@gmail.com,End User,End User
+test,test,test19@gmail.com,End User,End User
+test,test,test20@gmail.com,End User,End User
+test,test,test21@gmail.com,End User,End User
+test,test,test22@gmail.com,End User,End User
+test,test,test23@gmail.com,End User,End User
+test,test,test24@gmail.com,End User,End User
+test,test,test25@gmail.com,End User,End User
+test,test,test26@gmail.com,End User,End User
+test,test,test27@gmail.com,End User,End User
+test,test,test28@gmail.com,End User,End User
+test,test,test29@gmail.com,End User,End User
+test,test,test30@gmail.com,End User,End User
+test,test,test31@gmail.com,End User,End User
+test,test,test32@gmail.com,End User,End User
+test,test,test33@gmail.com,End User,End User
+test,test,test34@gmail.com,End User,End User
+test,test,test35@gmail.com,End User,End User
+test,test,test36@gmail.com,End User,End User
+test,test,test37@gmail.com,End User,End User
+test,test,test38@gmail.com,End User,End User
+test,test,test39@gmail.com,End User,End User
+test,test,test40@gmail.com,End User,End User
+test,test,test41@gmail.com,End User,End User
+test,test,test42@gmail.com,End User,End User
+test,test,test43@gmail.com,End User,End User
+test,test,test44@gmail.com,End User,End User
+test,test,test45@gmail.com,End User,End User
+test,test,test46@gmail.com,End User,End User
+test,test,test47@gmail.com,End User,End User
+test,test,test48@gmail.com,End User,End User
+test,test,test49@gmail.com,End User,End User
+test,test,test50@gmail.com,End User,End User
+test,test,test51@gmail.com,End User,End User
+test,test,test52@gmail.com,End User,End User
+test,test,test53@gmail.com,End User,End User
+test,test,test54@gmail.com,End User,End User
+test,test,test55@gmail.com,End User,End User
+test,test,test56@gmail.com,End User,End User
+test,test,test57@gmail.com,End User,End User
+test,test,test58@gmail.com,End User,End User
+test,test,test59@gmail.com,End User,End User
+test,test,test60@gmail.com,End User,End User
+test,test,test61@gmail.com,End User,End User
+test,test,test62@gmail.com,End User,End User
+test,test,test63@gmail.com,End User,End User
+test,test,test64@gmail.com,End User,End User
+test,test,test65@gmail.com,End User,End User
+test,test,test66@gmail.com,End User,End User
+test,test,test67@gmail.com,End User,End User
+test,test,test68@gmail.com,End User,End User
+test,test,test69@gmail.com,End User,End User
+test,test,test70@gmail.com,End User,End User
+test,test,test71@gmail.com,End User,End User
+test,test,test72@gmail.com,End User,End User
+test,test,test73@gmail.com,End User,End User
+test,test,test74@gmail.com,End User,End User
+test,test,test75@gmail.com,End User,End User
+test,test,test76@gmail.com,End User,End User
+test,test,test77@gmail.com,End User,End User
+test,test,test78@gmail.com,End User,End User
+test,test,test79@gmail.com,End User,End User
+test,test,test80@gmail.com,End User,End User
+test,test,test81@gmail.com,End User,End User
+test,test,test82@gmail.com,End User,End User
+test,test,test83@gmail.com,End User,End User
+test,test,test84@gmail.com,End User,End User
+test,test,test85@gmail.com,End User,End User
+test,test,test86@gmail.com,End User,End User
+test,test,test87@gmail.com,End User,End User
+test,test,test88@gmail.com,End User,End User
+test,test,test89@gmail.com,End User,End User
+test,test,test90@gmail.com,End User,End User
+test,test,test91@gmail.com,End User,End User
+test,test,test92@gmail.com,End User,End User
+test,test,test93@gmail.com,End User,End User
+test,test,test94@gmail.com,End User,End User
+test,test,test95@gmail.com,End User,End User
+test,test,test96@gmail.com,End User,End User
+test,test,test97@gmail.com,End User,End User
+test,test,test98@gmail.com,End User,End User
+test,test,test99@gmail.com,End User,End User
+test,test,test100@gmail.com,End User,End User
+test,test,test101@gmail.com,End User,End User
+test,test,test102@gmail.com,End User,End User
+test,test,test103@gmail.com,End User,End User
+test,test,test104@gmail.com,End User,End User
+test,test,test105@gmail.com,End User,End User
+test,test,test106@gmail.com,End User,End User
+test,test,test107@gmail.com,End User,End User
+test,test,test108@gmail.com,End User,End User
+test,test,test109@gmail.com,End User,End User
+test,test,test110@gmail.com,End User,End User
+test,test,test111@gmail.com,End User,End User
+test,test,test112@gmail.com,End User,End User
+test,test,test113@gmail.com,End User,End User
+test,test,test114@gmail.com,End User,End User
+test,test,test115@gmail.com,End User,End User
+test,test,test116@gmail.com,End User,End User
+test,test,test117@gmail.com,End User,End User
+test,test,test118@gmail.com,End User,End User
+test,test,test119@gmail.com,End User,End User
+test,test,test120@gmail.com,End User,End User
+test,test,test121@gmail.com,End User,End User
+test,test,test122@gmail.com,End User,End User
+test,test,test123@gmail.com,End User,End User
+test,test,test124@gmail.com,End User,End User
+test,test,test125@gmail.com,End User,End User
+test,test,test126@gmail.com,End User,End User
+test,test,test127@gmail.com,End User,End User
+test,test,test128@gmail.com,End User,End User
+test,test,test129@gmail.com,End User,End User
+test,test,test130@gmail.com,End User,End User
+test,test,test131@gmail.com,End User,End User
+test,test,test132@gmail.com,End User,End User
+test,test,test133@gmail.com,End User,End User
+test,test,test134@gmail.com,End User,End User
+test,test,test135@gmail.com,End User,End User
+test,test,test136@gmail.com,End User,End User
+test,test,test137@gmail.com,End User,End User
+test,test,test138@gmail.com,End User,End User
+test,test,test139@gmail.com,End User,End User
+test,test,test140@gmail.com,End User,End User
+test,test,test141@gmail.com,End User,End User
+test,test,test142@gmail.com,End User,End User
+test,test,test143@gmail.com,End User,End User
+test,test,test144@gmail.com,End User,End User
+test,test,test145@gmail.com,End User,End User
+test,test,test146@gmail.com,End User,End User
+test,test,test147@gmail.com,End User,End User
+test,test,test148@gmail.com,End User,End User
+test,test,test149@gmail.com,End User,End User
+test,test,test150@gmail.com,End User,End User
+test,test,test151@gmail.com,End User,End User
+test,test,test152@gmail.com,End User,End User
+test,test,test153@gmail.com,End User,End User
+test,test,test154@gmail.com,End User,End User
+test,test,test155@gmail.com,End User,End User
+test,test,test156@gmail.com,End User,End User
+test,test,test157@gmail.com,End User,End User
+test,test,test158@gmail.com,End User,End User
+test,test,test159@gmail.com,End User,End User
+test,test,test160@gmail.com,End User,End User
+test,test,test161@gmail.com,End User,End User
+test,test,test162@gmail.com,End User,End User
+test,test,test163@gmail.com,End User,End User
+test,test,test164@gmail.com,End User,End User
+test,test,test165@gmail.com,End User,End User
+test,test,test166@gmail.com,End User,End User
+test,test,test167@gmail.com,End User,End User
+test,test,test168@gmail.com,End User,End User
+test,test,test169@gmail.com,End User,End User
+test,test,test170@gmail.com,End User,End User
+test,test,test171@gmail.com,End User,End User
+test,test,test172@gmail.com,End User,End User
+test,test,test173@gmail.com,End User,End User
+test,test,test174@gmail.com,End User,End User
+test,test,test175@gmail.com,End User,End User
+test,test,test176@gmail.com,End User,End User
+test,test,test177@gmail.com,End User,End User
+test,test,test178@gmail.com,End User,End User
+test,test,test179@gmail.com,End User,End User
+test,test,test180@gmail.com,End User,End User
+test,test,test181@gmail.com,End User,End User
+test,test,test182@gmail.com,End User,End User
+test,test,test183@gmail.com,End User,End User
+test,test,test184@gmail.com,End User,End User
+test,test,test185@gmail.com,End User,End User
+test,test,test186@gmail.com,End User,End User
+test,test,test187@gmail.com,End User,End User
+test,test,test188@gmail.com,End User,End User
+test,test,test189@gmail.com,End User,End User
+test,test,test190@gmail.com,End User,End User
+test,test,test191@gmail.com,End User,End User
+test,test,test192@gmail.com,End User,End User
+test,test,test193@gmail.com,End User,End User
+test,test,test194@gmail.com,End User,End User
+test,test,test195@gmail.com,End User,End User
+test,test,test196@gmail.com,End User,End User
+test,test,test197@gmail.com,End User,End User
+test,test,test198@gmail.com,End User,End User
+test,test,test199@gmail.com,End User,End User
+test,test,test200@gmail.com,End User,End User
+test,test,test201@gmail.com,End User,End User
+test,test,test202@gmail.com,End User,End User
+test,test,test203@gmail.com,End User,End User
+test,test,test204@gmail.com,End User,End User
+test,test,test205@gmail.com,End User,End User
+test,test,test206@gmail.com,End User,End User
+test,test,test207@gmail.com,End User,End User
+test,test,test208@gmail.com,End User,End User
+test,test,test209@gmail.com,End User,End User
+test,test,test210@gmail.com,End User,End User
+test,test,test211@gmail.com,End User,End User
+test,test,test212@gmail.com,End User,End User
+test,test,test213@gmail.com,End User,End User
+test,test,test214@gmail.com,End User,End User
+test,test,test215@gmail.com,End User,End User
+test,test,test216@gmail.com,End User,End User
+test,test,test217@gmail.com,End User,End User
+test,test,test218@gmail.com,End User,End User
+test,test,test219@gmail.com,End User,End User
+test,test,test220@gmail.com,End User,End User
+test,test,test221@gmail.com,End User,End User
+test,test,test222@gmail.com,End User,End User
+test,test,test223@gmail.com,End User,End User
+test,test,test224@gmail.com,End User,End User
+test,test,test225@gmail.com,End User,End User
+test,test,test226@gmail.com,End User,End User
+test,test,test227@gmail.com,End User,End User
+test,test,test228@gmail.com,End User,End User
+test,test,test229@gmail.com,End User,End User
+test,test,test230@gmail.com,End User,End User
+test,test,test231@gmail.com,End User,End User
+test,test,test232@gmail.com,End User,End User
+test,test,test233@gmail.com,End User,End User
+test,test,test234@gmail.com,End User,End User
+test,test,test235@gmail.com,End User,End User
+test,test,test236@gmail.com,End User,End User
+test,test,test237@gmail.com,End User,End User
+test,test,test238@gmail.com,End User,End User
+test,test,test239@gmail.com,End User,End User
+test,test,test240@gmail.com,End User,End User
+test,test,test241@gmail.com,End User,End User
+test,test,test242@gmail.com,End User,End User
+test,test,test243@gmail.com,End User,End User
+test,test,test244@gmail.com,End User,End User
+test,test,test245@gmail.com,End User,End User
+test,test,test246@gmail.com,End User,End User
+test,test,test247@gmail.com,End User,End User
+test,test,test248@gmail.com,End User,End User
+test,test,test249@gmail.com,End User,End User
+test,test,test250@gmail.com,End User,End User

cypress-tests/cypress/fixtures/bulkUser/multiple_groups - Sheet1.csv

@@ -1,7 +1,7 @@
-First Name,Last Name,Email,Groups
-Test,Example,test12@example.com,All Users|Admin|Test
-Test,Example,test13@example.com,All Users
-Test,Example,test14@example.com,All Users
-Test,Example,test15@example.com,All Users
-Test,Example,test16@example.com,All Users
-Test,Example,test17@example.com,All Users
+First Name,Last Name,Email,User Role,Group
+Test,Example,test12@example.com,Admin,Admin|Builder
+Test,Example,test13@example.com,Buider,Buider|Test
+Test,Example,test14@example.com,End user,End user|Abc
+Test,Example,test15@example.com,End user,End user|Abc
+Test,Example,test16@example.com,End user,End user|Abc
+Test,Example,test17@example.com,End user,End user|Abc

cypress-tests/cypress/fixtures/bulkUser/non_existing_group -Sheet1 .csv

@@ -1,251 +1,3 @@
-First Name,Last Name,Email,Groups
-Test,Example,test12@gmail.com,All Users|Test
-Test,Example,test13@gmail.com,All Users
-Test,Example,test14@gmail.com,All Users
-Test,Example,test15@gmail.com,All Users
-Test,Example,test16@gmail.com,All Users
-Test,Example,test17@gmail.com,All Users
-Test,Example,test18@gmail.com,All Users
-Test,Example,test19@gmail.com,All Users
-Test,Example,test20@gmail.com,All Users
-Test,Example,test21@gmail.com,All Users
-Test,Example,test22@gmail.com,All Users
-Test,Example,test23@gmail.com,All Users
-Test,Example,test24@gmail.com,All Users
-Test,Example,test25@gmail.com,All Users
-Test,Example,test26@gmail.com,All Users
-Test,Example,test27@gmail.com,All Users
-Test,Example,test28@gmail.com,All Users
-Test,Example,test29@gmail.com,All Users
-Test,Example,test30@gmail.com,All Users
-Test,Example,test31@gmail.com,All Users
-Test,Example,test32@gmail.com,All Users
-Test,Example,test33@gmail.com,All Users
-Test,Example,test34@gmail.com,All Users
-Test,Example,test35@gmail.com,All Users
-Test,Example,test36@gmail.com,All Users
-Test,Example,test37@gmail.com,All Users
-Test,Example,test38@gmail.com,All Users
-Test,Example,test39@gmail.com,All Users
-Test,Example,test40@gmail.com,All Users
-Test,Example,test41@gmail.com,All Users
-Test,Example,test42@gmail.com,All Users
-Test,Example,test43@gmail.com,All Users
-Test,Example,test44@gmail.com,All Users
-Test,Example,test45@gmail.com,All Users
-Test,Example,test46@gmail.com,All Users
-Test,Example,test47@gmail.com,All Users
-Test,Example,test48@gmail.com,All Users
-Test,Example,test49@gmail.com,All Users
-Test,Example,test50@gmail.com,All Users
-Test,Example,test51@gmail.com,All Users
-Test,Example,test52@gmail.com,All Users
-Test,Example,test53@gmail.com,All Users
-Test,Example,test54@gmail.com,All Users
-Test,Example,test55@gmail.com,All Users
-Test,Example,test56@gmail.com,All Users
-Test,Example,test57@gmail.com,All Users
-Test,Example,test58@gmail.com,All Users
-Test,Example,test59@gmail.com,All Users
-Test,Example,test60@gmail.com,All Users
-Test,Example,test61@gmail.com,All Users
-Test,Example,test62@gmail.com,All Users
-Test,Example,test63@gmail.com,All Users
-Test,Example,test64@gmail.com,All Users
-Test,Example,test65@gmail.com,All Users
-Test,Example,test66@gmail.com,All Users
-Test,Example,test67@gmail.com,All Users
-Test,Example,test68@gmail.com,All Users
-Test,Example,test69@gmail.com,All Users
-Test,Example,test70@gmail.com,All Users
-Test,Example,test71@gmail.com,All Users
-Test,Example,test72@gmail.com,All Users
-Test,Example,test73@gmail.com,All Users
-Test,Example,test74@gmail.com,All Users
-Test,Example,test75@gmail.com,All Users
-Test,Example,test76@gmail.com,All Users
-Test,Example,test77@gmail.com,All Users
-Test,Example,test78@gmail.com,All Users
-Test,Example,test79@gmail.com,All Users
-Test,Example,test80@gmail.com,All Users
-Test,Example,test81@gmail.com,All Users
-Test,Example,test82@gmail.com,All Users
-Test,Example,test83@gmail.com,All Users
-Test,Example,test84@gmail.com,All Users
-Test,Example,test85@gmail.com,All Users
-Test,Example,test86@gmail.com,All Users
-Test,Example,test87@gmail.com,All Users
-Test,Example,test88@gmail.com,All Users
-Test,Example,test89@gmail.com,All Users
-Test,Example,test90@gmail.com,All Users
-Test,Example,test91@gmail.com,All Users
-Test,Example,test92@gmail.com,All Users
-Test,Example,test93@gmail.com,All Users
-Test,Example,test94@gmail.com,All Users
-Test,Example,test95@gmail.com,All Users
-Test,Example,test96@gmail.com,All Users
-Test,Example,test97@gmail.com,All Users
-Test,Example,test98@gmail.com,All Users
-Test,Example,test99@gmail.com,All Users
-Test,Example,test100@gmail.com,All Users
-Test,Example,test101@gmail.com,All Users
-Test,Example,test102@gmail.com,All Users
-Test,Example,test103@gmail.com,All Users
-Test,Example,test104@gmail.com,All Users
-Test,Example,test105@gmail.com,All Users
-Test,Example,test106@gmail.com,All Users
-Test,Example,test107@gmail.com,All Users
-Test,Example,test108@gmail.com,All Users
-Test,Example,test109@gmail.com,All Users
-Test,Example,test110@gmail.com,All Users
-Test,Example,test111@gmail.com,All Users
-Test,Example,test112@gmail.com,All Users
-Test,Example,test113@gmail.com,All Users
-Test,Example,test114@gmail.com,All Users
-Test,Example,test115@gmail.com,All Users
-Test,Example,test116@gmail.com,All Users
-Test,Example,test117@gmail.com,All Users
-Test,Example,test118@gmail.com,All Users
-Test,Example,test119@gmail.com,All Users
-Test,Example,test120@gmail.com,All Users
-Test,Example,test121@gmail.com,All Users
-Test,Example,test122@gmail.com,All Users
-Test,Example,test123@gmail.com,All Users
-Test,Example,test124@gmail.com,All Users
-Test,Example,test125@gmail.com,All Users
-Test,Example,test126@gmail.com,All Users
-Test,Example,test127@gmail.com,All Users
-Test,Example,test128@gmail.com,All Users
-Test,Example,test129@gmail.com,All Users
-Test,Example,test130@gmail.com,All Users
-Test,Example,test131@gmail.com,All Users
-Test,Example,test132@gmail.com,All Users
-Test,Example,test133@gmail.com,All Users
-Test,Example,test134@gmail.com,All Users
-Test,Example,test135@gmail.com,All Users
-Test,Example,test136@gmail.com,All Users
-Test,Example,test137@gmail.com,All Users
-Test,Example,test138@gmail.com,All Users
-Test,Example,test139@gmail.com,All Users
-Test,Example,test140@gmail.com,All Users
-Test,Example,test141@gmail.com,All Users
-Test,Example,test142@gmail.com,All Users
-Test,Example,test143@gmail.com,All Users
-Test,Example,test144@gmail.com,All Users
-Test,Example,test145@gmail.com,All Users
-Test,Example,test146@gmail.com,All Users
-Test,Example,test147@gmail.com,All Users
-Test,Example,test148@gmail.com,All Users
-Test,Example,test149@gmail.com,All Users
-Test,Example,test150@gmail.com,All Users
-Test,Example,test151@gmail.com,All Users
-Test,Example,test152@gmail.com,All Users
-Test,Example,test153@gmail.com,All Users
-Test,Example,test154@gmail.com,All Users
-Test,Example,test155@gmail.com,All Users
-Test,Example,test156@gmail.com,All Users
-Test,Example,test157@gmail.com,All Users
-Test,Example,test158@gmail.com,All Users
-Test,Example,test159@gmail.com,All Users
-Test,Example,test160@gmail.com,All Users
-Test,Example,test161@gmail.com,All Users
-Test,Example,test162@gmail.com,All Users
-Test,Example,test163@gmail.com,All Users
-Test,Example,test164@gmail.com,All Users
-Test,Example,test165@gmail.com,All Users
-Test,Example,test166@gmail.com,All Users
-Test,Example,test167@gmail.com,All Users
-Test,Example,test168@gmail.com,All Users
-Test,Example,test169@gmail.com,All Users
-Test,Example,test170@gmail.com,All Users
-Test,Example,test171@gmail.com,All Users
-Test,Example,test172@gmail.com,All Users
-Test,Example,test173@gmail.com,All Users
-Test,Example,test174@gmail.com,All Users
-Test,Example,test175@gmail.com,All Users
-Test,Example,test176@gmail.com,All Users
-Test,Example,test177@gmail.com,All Users
-Test,Example,test178@gmail.com,All Users
-Test,Example,test179@gmail.com,All Users
-Test,Example,test180@gmail.com,All Users
-Test,Example,test181@gmail.com,All Users
-Test,Example,test182@gmail.com,All Users
-Test,Example,test183@gmail.com,All Users
-Test,Example,test184@gmail.com,All Users
-Test,Example,test185@gmail.com,All Users
-Test,Example,test186@gmail.com,All Users
-Test,Example,test187@gmail.com,All Users
-Test,Example,test188@gmail.com,All Users
-Test,Example,test189@gmail.com,All Users
-Test,Example,test190@gmail.com,All Users
-Test,Example,test191@gmail.com,All Users
-Test,Example,test192@gmail.com,All Users
-Test,Example,test193@gmail.com,All Users
-Test,Example,test194@gmail.com,All Users
-Test,Example,test195@gmail.com,All Users
-Test,Example,test196@gmail.com,All Users
-Test,Example,test197@gmail.com,All Users
-Test,Example,test198@gmail.com,All Users
-Test,Example,test199@gmail.com,All Users
-Test,Example,test200@gmail.com,All Users
-Test,Example,test201@gmail.com,All Users
-Test,Example,test202@gmail.com,All Users
-Test,Example,test203@gmail.com,All Users
-Test,Example,test204@gmail.com,All Users
-Test,Example,test205@gmail.com,All Users
-Test,Example,test206@gmail.com,All Users
-Test,Example,test207@gmail.com,All Users
-Test,Example,test208@gmail.com,All Users
-Test,Example,test209@gmail.com,All Users
-Test,Example,test210@gmail.com,All Users
-Test,Example,test211@gmail.com,All Users
-Test,Example,test212@gmail.com,All Users
-Test,Example,test213@gmail.com,All Users
-Test,Example,test214@gmail.com,All Users
-Test,Example,test215@gmail.com,All Users
-Test,Example,test216@gmail.com,All Users
-Test,Example,test217@gmail.com,All Users
-Test,Example,test218@gmail.com,All Users
-Test,Example,test219@gmail.com,All Users
-Test,Example,test220@gmail.com,All Users
-Test,Example,test221@gmail.com,All Users
-Test,Example,test222@gmail.com,All Users
-Test,Example,test223@gmail.com,All Users
-Test,Example,test224@gmail.com,All Users
-Test,Example,test225@gmail.com,All Users
-Test,Example,test226@gmail.com,All Users
-Test,Example,test227@gmail.com,All Users
-Test,Example,test228@gmail.com,All Users
-Test,Example,test229@gmail.com,All Users
-Test,Example,test230@gmail.com,All Users
-Test,Example,test231@gmail.com,All Users
-Test,Example,test232@gmail.com,All Users
-Test,Example,test233@gmail.com,All Users
-Test,Example,test234@gmail.com,All Users
-Test,Example,test235@gmail.com,All Users
-Test,Example,test236@gmail.com,All Users
-Test,Example,test237@gmail.com,All Users
-Test,Example,test238@gmail.com,All Users
-Test,Example,test239@gmail.com,All Users
-Test,Example,test240@gmail.com,All Users
-Test,Example,test241@gmail.com,All Users
-Test,Example,test242@gmail.com,All Users
-Test,Example,test243@gmail.com,All Users
-Test,Example,test244@gmail.com,All Users
-Test,Example,test245@gmail.com,All Users
-Test,Example,test246@gmail.com,All Users
-Test,Example,test247@gmail.com,All Users
-Test,Example,test248@gmail.com,All Users
-Test,Example,test249@gmail.com,All Users
-Test,Example,test250@gmail.com,All Users
-Test,Example,test251@gmail.com,All Users
-Test,Example,test252@gmail.com,All Users
-Test,Example,test253@gmail.com,All Users
-Test,Example,test254@gmail.com,All Users
-Test,Example,test255@gmail.com,All Users
-Test,Example,test256@gmail.com,All Users
-Test,Example,test257@gmail.com,All Users
-Test,Example,test258@gmail.com,All Users
-Test,Example,test259@gmail.com,All Users
-Test,Example,test260@gmail.com,All Users
-Test,Example,test261@gmail.com,All Users
+First Name,Last Name,Email,User Role,Group
+test,test,demo1@gmail.com,Admin,test
+test,test,demo2@gmail.com,Builder,abc

cypress-tests/cypress/fixtures/bulkUser/same_email - Sheet1.csv

@@ -1,6 +1,4 @@
-First Name,Last Name,Email,Groups
-Test,Example,test12@gmail.com,All Users
-Test,Example,test12@gmail.com,All Users
-Test,Example,test14@gmail.com,All Users
-Test,Example,test14@gmail.com,All Users
-Test,Example,test16@gmail.com,All Users
+First Name,Last Name,Email,User Role,Group
+test,test,demo11@gmail.com,Admin,
+test,test,demo11@gmail.com,Builder,
+test,test,demo12@gmail.com,Builder,

cypress-tests/cypress/fixtures/bulkUser/without_email - Sheet1.csv

@@ -1,12 +1,11 @@
-First Name,Last Name,Email,Groups
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
-Test,Example,,All Users
+First Name,Last Name,Email,User Role,Group
+test,test,,Admin,Admin
+test,test,,Builder,Builder
+test,test,,Builder,Builder
+test,test,,End User,End User
+test,test,,End User,End User
+test,test,,End User,End User
+test,test,,End User,End User
+test,test,,End User,End User
+test,test,,End User,End User
+test,test,,End User,End User

cypress-tests/cypress/fixtures/bulkUser/without_firstname - Sheet1.csv

@@ -1,6 +0,0 @@
-First Name,Last Name,Email,Groups
-,Example,test12withoutfirstname@gmail.com,All Users
-,Example,test13withoutfirstname@gmail.com,All Users
-,Example,test14withoutfirstname@gmail.com,All Users
-,Example,test15withoutfirstname@gmail.com,All Users
-,Example,test16withoutfirstname@gmail.com,All Users

cypress-tests/cypress/fixtures/bulkUser/without_group - Sheet1.csv

@@ -1,6 +0,0 @@
-First Name,Last Name,Email,Groups
-Test,Example,test12@gmail.com,
-Test,Example,test13@gmail.com,
-Test,Example,test14@gmail.com,
-Test,Example,test15@gmail.com,
-Test,Example,test16@gmail.com,

cypress-tests/cypress/fixtures/bulkUser/without_lastname - Sheet1.csv

@@ -1,6 +0,0 @@
-First Name,Last Name,Email,Groups
-Test,,test12withoutlastname@gmail.com,All Users
-Test,,test13withoutlastname@gmail.com,All Users
-Test,,test14withoutlastname@gmail.com,All Users
-Test,,test15withoutlastname@gmail.com,All Users
-Test,,test16withoutlastname@gmail.com,All Users

cypress-tests/cypress/fixtures/bulkUser/without_name - Sheet1.csv

@@ -1,12 +1,11 @@
-First Name,Last Name,Email,Groups
-,,test12@gmail.com,All Users
-,,test13@gmail.com,All Users
-,,test14@gmail.com,All Users
-,,test15@gmail.com,All Users
-,,test16@gmail.com,All Users
-,,test17@gmail.com,All Users
-,,test18@gmail.com,All Users
-,,test19@gmail.com,All Users
-,,test20@gmail.com,All Users
-,,test21@gmail.com,All Users
-,,test22@gmail.com,All Users
+First Name,Last Name,Email,User Role,Group
+,,withoutname1@gmail.com,Admin,Admin
+,,withoutname2@gmail.com,Builder,Builder
+,,withoutname3@gmail.com,Builder,Builder
+,,withoutname4@gmail.com,End User,End User
+,,withoutname5@gmail.com,End User,End User
+,,withoutname6@gmail.com,End User,End User
+,,withoutname7@gmail.com,End User,End User
+,,withoutname8@gmail.com,End User,End User
+,,withoutname9@gmail.com,End User,End User
+,,withoutname10@gmail.com,End User,End User

cypress-tests/cypress/fixtures/bulkUser/without_role - Sheet1.csv

@@ -0,0 +1,6 @@
+First Name,Last Name,Email,User Role,Group
+Test,Example,test12@gmail.com,,
+Test,Example,test13@gmail.com,,
+Test,Example,test14@gmail.com,,
+Test,Example,test15@gmail.com,,
+Test,Example,test16@gmail.com,,

cypress-tests/cypress/fixtures/inspectorItems.json

@@ -0,0 +1,32 @@
+{
+  "globalsNodes": [
+    { "key": "theme", "type": "Object", "value": "1 entry " },
+    { "key": "urlparams", "type": "Object", "value": "1 entry " },
+    { "key": "currentUser", "type": "Object", "value": "8 entries " }
+  ],
+  "componentsNodes": [
+    { "key": "button1", "type": "Object", "value": "13 entries " },
+    { "key": "button2", "type": "Object", "value": "13 entries " },
+    { "key": "button3", "type": "Object", "value": "13 entries " }
+  ],
+  "pageNodes": [
+    { "key": "handle", "type": "String", "value": "\"home\"" },
+    { "key": "name", "type": "String", "value": "\"Home\"" }
+  ],
+  "testPageNodes": [
+    { "key": "handle", "type": "String", "value": "\"test-page\"" },
+    { "key": "name", "type": "String", "value": "\"test_page\"" }
+  ],
+  "currentUserNodes": [
+    { "key": "email", "type": "String", "value": "\"dev@tooljet.io\"" },
+    { "key": "firstName", "type": "String", "value": "\"The\"" },
+    { "key": "lastName", "type": "String", "value": "\"Developer\"" },
+    { "key": "role", "type": "String", "value": "\"admin\"" }
+  ],
+  "themeNodes": [{ "key": "name", "type": "String", "value": "\"light\"" }],
+  "modeNodes": [{ "key": "value", "type": "String", "value": "\"edit\"" }],
+  "urlparamsNode": [{ "key": "key", "type": "String", "value": "\"value\"" }],
+  "variablesNodes": [
+    { "key": "globalVar", "type": "String", "value": "\"globalVar\"" }
+  ]
+}

cypress-tests/cypress/support/e2e.js

@@ -24,3 +24,10 @@ import "@cypress/code-coverage/support";
 Cypress.on("uncaught:exception", (err, runnable) => {
   return false;
 });
+
+beforeEach(() => {
+  if (Cypress.env("deployment") === "proxy") {
+    cy.visit("/");
+    cy.get("button").contains("Visit Site").click();
+  }
+});

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

@@ -31,9 +31,7 @@ export const verifyAndModifyParameter = (paramName, value) => {
 export const openEditorSidebar = (widgetName = "") => {
   cy.hideTooltip();
 
-  cy.get(`${commonWidgetSelector.draggableWidget(widgetName)}:eq(0)`).trigger(
-    "mouseover"
-  );
+  cy.get(`${commonWidgetSelector.draggableWidget(widgetName)}:eq(0)`).realHover()
   cy.get(commonWidgetSelector.widgetConfigHandle(widgetName)).click();
 };
 
@@ -195,8 +193,7 @@ export const verifyBoxShadowCss = (
   ).should(
     "have.css",
     "box-shadow",
-    `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3] / 100}) ${
-      shadowParam[0]
+    `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3] / 100}) ${shadowParam[0]
     }px ${shadowParam[1]}px ${shadowParam[2]}px ${shadowParam[3]}px`
   );
 };
@@ -285,8 +282,7 @@ export const verifyLoaderColor = (widgetName, color) => {
     .then((style) => {
       const loaderColor = style.split(" ").join("");
       expect(loaderColor).to.include(
-        `--loader-color:rgba(${color[0]},${color[1]},${color[2]},${
-          color[3] / 100
+        `--loader-color:rgba(${color[0]},${color[1]},${color[2]},${color[3] / 100
         })`
       );
     });

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

@@ -11,9 +11,9 @@ import {
 
 export const login = () => {
   cy.visit("/");
-  cy.clearAndType(commonSelectors.workEmailInputField, "dev@tooljet.io");
-  cy.clearAndType(commonSelectors.passwordInputField, "password");
-  cy.get(commonSelectors.loginButton).click();
+  cy.clearAndType(onboardingSelectors.loginEmailInput, "dev@tooljet.io");
+  cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
+  cy.get(onboardingSelectors.signInButton).click();
 };
 
 export const modifyAndVerifyAppCardIcon = (appName) => {

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

@@ -79,7 +79,7 @@ export const addQueryN = (queryName, query, dbName) => {
       cy.clearAndType('[data-cy="gds-querymanager-search-bar"]', `${dbName}`);
     }
   });
-  cy.intercept("POST", "http://localhost:3000/api/data_queries").as(
+  cy.intercept("POST", "/api/data_queries").as(
     "createQuery"
   );
 
@@ -98,7 +98,7 @@ export const addQueryN = (queryName, query, dbName) => {
 export const addQuery = (queryName, query, dbName) => {
   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(
+  cy.intercept("POST", "/api/data_queries").as(
     "createQuery"
   );
   cy.contains(`[id*="react-select-"]`, dbName).click();
@@ -116,7 +116,7 @@ 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(
+  cy.intercept("POST", "/api/data_queries").as(
     "createQuery"
   );
   cy.contains(`[id*="react-select-"]`, dbName).click();
@@ -181,7 +181,7 @@ export const createDataQuery = (appName, url, key, value) => {
 
         cy.request({
           method: "POST",
-          url: "http://localhost:3000/api/data_queries",
+          url: `${Cypress.env("server_host")}/api/data_queries`,
           headers: headers,
           body: {
             app_id: appId,
@@ -241,7 +241,7 @@ export const createrestAPIQuery = (data) => {
     };
     cy.request({
       method: "POST",
-      url: "http://localhost:3000/api/data_queries",
+      url: `${Cypress.env("server_host")}/api/data_queries`,
       headers: headers,
       body: requestBody,
     }).then((response) => {

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

@@ -0,0 +1,20 @@
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import {
+    openEditorSidebar,
+} from "Support/utils/commonWidget";
+
+export const addAndVerifyOnSingleLine = (data, property = '', componentName = 'text1',) => {
+    cy.intercept("PUT", "/api/v2/apps/**/*").as("editorAPI");
+    cy.get(
+        commonWidgetSelector.parameterInputField(property)
+    ).clearAndTypeOnCodeMirror(data)
+    cy.forceClickOnCanvas()
+    cy.wait("@editorAPI");
+    openEditorSidebar(componentName)
+    cy.get(
+        commonWidgetSelector.parameterInputField(property)
+    )
+        .realClick()
+        .find(".cm-line")
+        .invoke("text").should("equals", data)
+};

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

@@ -12,13 +12,13 @@ export const selectEvent = (
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${event}{enter}`);
-    cy.get('[data-cy="event-label"]').click({force:true})
+  cy.get('[data-cy="event-label"]').click({ force: true })
 
   cy.get('[data-cy="action-selection"]')
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${action}{enter}`);
-    cy.get('[data-cy="event-label"]').click({force:true})
+  cy.get('[data-cy="event-label"]').click({ force: true })
   cy.wait("@events");
 };
 
@@ -32,28 +32,28 @@ export const selectCSA = (
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${component}{enter}`);
-    cy.get('[data-cy="event-label"]').click({force:true})
+  cy.get('[data-cy="event-label"]').click({ force: true })
 
   cy.get('[data-cy="action-options-action-selection-field"]')
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${componentAction}{enter}`);
-    cy.get('[data-cy="event-label"]').click({force:true})
+  cy.get('[data-cy="event-label"]').click({ force: true })
 
   cy.wait("@events");
   cy.get('[data-cy="debounce-input-field"]')
     .click()
     .type(`{selectAll}{backspace}${debounce}{enter}`);
-    cy.get('[data-cy="event-label"]').click({force:true})
+  cy.get('[data-cy="event-label"]').click({ force: true })
   cy.wait("@events");
 };
 
 export const addSupportCSAData = (field, data) => {
   cy.intercept("PUT", "events").as("events");
-  cy.get(`[data-cy="event-${field}-input-field"]`)
+  cy.get(`[data-cy="${field}-input-field"]`)
     .click({ force: true })
     .clearAndTypeOnCodeMirror(data);
-    cy.get('[data-cy="event-label"]').click({force:true})
+  cy.get('[data-cy="event-label"]').click({ force: true })
 };
 
 export const selectSupportCSAData = (option) => {
@@ -63,7 +63,7 @@ export const selectSupportCSAData = (option) => {
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${option}{enter}`);
-    cy.get('[data-cy="event-label"]').click({force:true})
+  cy.get('[data-cy="event-label"]').click({ force: true })
   cy.wait("@events");
 };
 
@@ -74,6 +74,6 @@ export const changeEventType = (event, eventIndex = 0) => {
     .click()
     .find("input")
     .type(`{selectAll}{backspace}${event}{enter}`);
-    cy.get('[data-cy="event-label"]').click({force:true})
+  cy.get('[data-cy="event-label"]').click({ force: true })
   cy.wait("@events");
 };

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

@@ -34,8 +34,7 @@ export const verifyValue = (node, type, children, index = 0) => {
 };
 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();
+  cy.get(`[data-cy="inspector-node-${node}"] > .node-key`).realHover().parent().find('[style="height: 13px; width: 13px;"] > img').click();
 };
 
 export const verifyfunctions = (node, type, index = 0) => {
@@ -50,3 +49,12 @@ export const verifyfunctions = (node, type, index = 0) => {
   //   .eq(index)
   //   .verifyVisibleElement("contain.text", type);
 };
+
+export const verifyNodes = (nodes, verificationFunction) => {
+  nodes.forEach(node => verificationFunction(node.key, node.type, node.value));
+};
+
+export const openAndVerifyNode = (nodeName, nodes, verificationFunction) => {
+  openNode(nodeName);
+  verifyNodes(nodes, verificationFunction);
+};

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

@@ -564,7 +564,7 @@ export const addUserToGroup = (groupName, email) => {
 };
 
 export const createGroupAddAppAndUserToGroup = (groupName, email) => {
-  cy.intercept("GET", "http://localhost:3000/api/group_permissions").as(
+  cy.intercept("GET", "/api/group_permissions").as(
     `${groupName}`
   );
   createGroup(groupName);
@@ -582,7 +582,7 @@ export const createGroupAddAppAndUserToGroup = (groupName, email) => {
 
       cy.request({
         method: "PUT",
-        url: `http://localhost:3000/api/group_permissions/${groupId}`,
+        url: `${Cypress.env("server_host")}/api/group_permissions/${groupId}`,
         headers: headers,
         body: { add_apps: [Cypress.env("appId")] },
       }).then((patchResponse) => {
@@ -597,7 +597,7 @@ export const createGroupAddAppAndUserToGroup = (groupName, email) => {
 
         cy.request({
           method: "PUT",
-          url: `http://localhost:3000/api/group_permissions/${groupId}`,
+          url: `${Cypress.env("server_host")}/api/group_permissions/${groupId}`,
           headers: headers,
           body: { add_users: [userId] },
         }).then((patchResponse) => {

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

@@ -56,12 +56,9 @@ export const generalSettings = () => {
 
 export const googleSSOPageElements = () => {
   cy.get(ssoSelector.googleEnableToggle).click();
+  cy.wait(5000);
   cy.get(ssoSelector.saveButton).eq(1).click();
-
-  cy.get('[data-cy="modal-title"]').verifyVisibleElement(
-    "have.text",
-    "Enable Google"
-  );
+  cy.wait(2000);
   cy.get('[data-cy="modal-close-button"]').should("be.visible");
   cy.get('[data-cy="modal-message"]').verifyVisibleElement(
     "have.text",
@@ -235,18 +232,18 @@ export const workspaceLoginPageElements = (workspaceName) => {
 };
 
 export const passwordLoginVisible = () => {
-  cy.get(commonSelectors.workEmailInputField).should("be.visible");
-  cy.get(commonSelectors.passwordInputField).should("be.visible");
-  cy.get(commonSelectors.loginButton).verifyVisibleElement(
+  cy.get(onboardingSelectors.loginEmailInput).should("be.visible");
+  cy.get(onboardingSelectors.loginPasswordInput).should("be.visible");
+  cy.get(onboardingSelectors.signInButton).verifyVisibleElement(
     "have.text",
     commonText.loginButton
   );
 };
 
 export const workspaceLogin = (workspaceName) => {
-  cy.clearAndType(commonSelectors.workEmailInputField, "dev@tooljet.io");
-  cy.clearAndType(commonSelectors.passwordInputField, "password");
-  cy.get(commonSelectors.loginButton).click();
+  cy.clearAndType(onboardingSelectors.loginEmailInput, "dev@tooljet.io");
+  cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
+  cy.get(onboardingSelectors.signInButton).click();
   cy.wait(2000);
   cy.get(commonSelectors.homePageLogo).should("be.visible");
   cy.get(commonSelectors.workspaceName).verifyVisibleElement(
@@ -295,13 +292,13 @@ export const signInPageElements = () => {
     "have.text",
     commonText.forgotPasswordLink
   );
-  cy.get(commonSelectors.loginButton).verifyVisibleElement(
+  cy.get(onboardingSelectors.signInButton).verifyVisibleElement(
     "have.text",
     commonText.loginButton
   );
 
-  cy.get(commonSelectors.workEmailInputField).should("be.visible");
-  cy.get(commonSelectors.passwordInputField).should("be.visible");
+  cy.get(onboardingSelectors.loginEmailInput).should("be.visible");
+  cy.get(onboardingSelectors.loginPasswordInput).should("be.visible");
 
   cy.get("body").then(($el) => {
     if ($el.text().includes("Google")) {
@@ -477,7 +474,7 @@ export const invitePageElements = () => {
     "have.text",
     commonText.passwordLabel
   );
-  cy.get(commonSelectors.passwordInputField).should("be.visible");
+  cy.get(onboardingSelectors.loginPasswordInput).should("be.visible");
   cy.get(commonSelectors.acceptInviteButton).verifyVisibleElement(
     "have.text",
     commonText.acceptInviteButton
@@ -538,7 +535,7 @@ export const defaultSSO = (enable) => {
     cy.request(
       {
         method: "PATCH",
-        url: "http://localhost:3000/api/organizations",
+        url: `${Cypress.env("server_host")}/api/organizations`,
         headers: {
           "Tj-Workspace-Id": Cypress.env("workspaceId"),
           Cookie: `tj_auth_token=${cookie.value}`,
@@ -562,7 +559,7 @@ export const setSignupStatus = (enable, workspaceName = 'My workspace') => {
     cy.getCookie("tj_auth_token").then((cookie) => {
       cy.request({
         method: "PATCH",
-        url: "http://localhost:3000/api/organizations",
+        url: `${Cypress.env("server_host")}/api/organizations`,
         headers: {
           "Tj-Workspace-Id": workspaceId,
           Cookie: `tj_auth_token=${cookie.value}`,
@@ -598,7 +595,7 @@ export const resetDomain = () => {
     cy.request(
       {
         method: "PATCH",
-        url: "http://localhost:3000/api/organizations",
+        url: `${Cypress.env("server_host")}/api/organizations`,
         headers: {
           "Tj-Workspace-Id": Cypress.env("workspaceId"),
           Cookie: `tj_auth_token=${cookie.value}`,

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

@@ -6,6 +6,8 @@ import { ssoSelector } from "Selectors/manageSSO";
 import { ssoText } from "Texts/manageSSO";
 import * as common from "Support/utils/common";
 import { commonText } from "Texts/common";
+import { onboardingSelectors } from "Selectors/onboarding";
+
 
 export const manageUsersElements = () => {
   cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
@@ -150,19 +152,19 @@ export const manageUsersElements = () => {
 export const inviteUser = (firstName, email) => {
   cy.userInviteApi(firstName, email);
   fetchAndVisitInviteLink(email);
-  cy.clearAndType(commonSelectors.passwordInputField, "password");
+  cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
   cy.get(commonSelectors.acceptInviteButton).click();
 };
 
 export const confirmInviteElements = (email) => {
 
-  cy.get(commonSelectors.SignUpSectionHeader).verifyVisibleElement(
+  cy.get(commonSelectors.signUpSectionHeader).verifyVisibleElement(
     "have.text", "Sign up");
-  cy.get('[data-cy="workspace-signup-header"]').verifyVisibleElement(
-    "have.text", "Sign up to the workspace - My workspace");
+  cy.get('[data-cy="signup-info"]').verifyVisibleElement(
+    "have.text", "Sign up to the workspace - My workspace. ");
 
-  cy.verifyLabel("Email")
-  cy.verifyLabel("Create a password")
+  // cy.verifyLabel("Email")
+  // cy.verifyLabel("Create a password")
   cy.get(commonSelectors.invitedUserEmail).verifyVisibleElement(
     "have.text", email);
 
@@ -215,7 +217,19 @@ export const bulkUserUpload = (file, fileName, toastMessage) => {
     .should("be.visible")
     .and("have.text", toastMessage);
   cy.get(usersSelector.toastCloseButton).click();
+  cy.wait(200);
+};
 
+export const bulkUserUploadDuplicate = (file, fileName, toastMessage) => {
+  cy.get(usersSelector.inputFieldBulkUpload).selectFile(file, {
+    force: true,
+  });
+  cy.get(usersSelector.uploadedFileData).should("contain", fileName);
+  cy.get(usersSelector.buttonUploadUsers).click();
+  cy.get(commonSelectors.modalMessage)
+    .should("be.visible")
+    .and("have.text", toastMessage);
+  cy.get(usersSelector.modalClose).click();
   cy.wait(200);
 };
 
@@ -242,8 +256,8 @@ export const copyInvitationLink = (firstName, email) => {
 
 export const fillUserInviteForm = (firstName, email) => {
   cy.get(usersSelector.buttonAddUsers).click();
-  cy.clearAndType(commonSelectors.inputFieldFullName, firstName);
-  cy.clearAndType(commonSelectors.inputFieldEmailAddress, email);
+  cy.clearAndType(onboardingSelectors.nameInput, firstName);
+  cy.clearAndType(onboardingSelectors.signupEmailInput, email);
 };
 
 export const selectUserGroup = (groupName) => {
@@ -293,7 +307,8 @@ export const inviteUserWithUserGroups = (
 
   cy.wait(1000);
   fetchAndVisitInviteLink(email);
-  cy.clearAndType(commonSelectors.passwordInputField, "password");
+  cy.wait(2000);
+  cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
   // cy.intercept('GET', '/api/organizations').as('org')
   cy.get(commonSelectors.signUpButton).click();
   cy.wait(2000);
@@ -372,7 +387,7 @@ export const inviteUserWithUserRole = (
 
   cy.wait(1000);
   fetchAndVisitInviteLink(email);
-  cy.clearAndType(commonSelectors.passwordInputField, "password");
+  cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
   cy.get(commonSelectors.signUpButton).click();
   cy.wait(2000);
   cy.get(commonSelectors.acceptInviteButton).click();

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

@@ -8,11 +8,12 @@ import {
 import { navigateToManageUsers, logout } from "Support/utils/common";
 import { ssoSelector } from "Selectors/manageSSO";
 import { ssoText } from "Texts/manageSSO";
+import { onboardingSelectors } from "Selectors/onboarding";
+
 
 export const verifyConfirmEmailPage = (email) => {
   cy.get(commonSelectors.pageLogo).should("be.visible");
-  cy.get(commonSelectors.emailImage).should("be.visible");
-  cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
+  cy.get('[data-cy="check-your-mail-header"]').verifyVisibleElement(
     "have.text",
     commonText.emailPageHeader
   );
@@ -31,32 +32,17 @@ export const verifyConfirmEmailPage = (email) => {
     "have.text",
     commonText.onboardingSeperatorText
   );
+
   cy.get(commonSelectors.resendEmailButton).should("be.visible");
-  cy.get(commonSelectors.editEmailButton).verifyVisibleElement(
+  cy.get('[data-cy="back-to-signup"]').verifyVisibleElement(
     "have.text",
-    commonText.editEmailButton
+    "Back to sign up"
   );
 };
 
-export const verifyConfirmPageElements = () => {
-  cy.get(commonSelectors.pageLogo).should("be.visible");
-  cy.get(commonSelectors.emailImage).should("be.visible");
-  cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
-    "have.text",
-    commonText.emailVerifiedText
-  );
-
-  cy.get(commonSelectors.onboardingPageDescription).verifyVisibleElement(
-    "have.text",
-    commonText.continueToSetUp
-  );
-  cy.get(commonSelectors.setUpToolJetButton).verifyVisibleElement(
-    "have.text",
-    commonText.setUpToolJetButton
-  );
-};
 
 export const verifyOnboardingQuestions = (fullName, workspaceName) => {
+  cy.wait(5000);
   cy.get(commonSelectors.pageLogo).should("be.visible");
   cy.get(commonSelectors.userAccountNameAvatar).should("be.visible");
   cy.get(commonSelectors.createAccountCheckMark).should("be.visible");
@@ -125,7 +111,7 @@ export const verifyOnboardingQuestions = (fullName, workspaceName) => {
 
 export const verifyInvalidInvitationLink = () => {
   cy.get(commonSelectors.pageLogo).should("be.visible");
-  cy.get(commonSelectors.emailImage).should("be.visible");
+  // cy.get(commonSelectors.emailImage).should("be.visible");
 
   cy.get(commonSelectors.onboardingPageHeader).verifyVisibleElement(
     "have.text",
@@ -136,20 +122,24 @@ export const verifyInvalidInvitationLink = () => {
     commonText.inalidInvitationLinkDescription
   );
 
-  cy.get(commonSelectors.backtoSignUpButton).verifyVisibleElement(
-    "have.text",
-    commonText.backtoSignUpButton
-  );
+  // cy.get(commonSelectors.backtoSignUpButton).verifyVisibleElement(
+  //   "have.text",
+  //   commonText.backtoSignUpButton
+  // );
 };
 
 export const userSignUp = (fullName, email, workspaceName) => {
   let invitationLink;
+  cy.intercept("GET", "/api/organizations/public-configs").as("publicConfig");
   cy.visit("/");
-  cy.wait(1000);
+  cy.wait("@publicConfig");
   cy.get(commonSelectors.createAnAccountLink).realClick();
-  cy.clearAndType(commonSelectors.nameInputField, fullName);
-  cy.clearAndType(commonSelectors.emailInputField, email);
-  cy.clearAndType(commonSelectors.passwordInputField, commonText.password);
+  cy.get(onboardingSelectors.nameInput).should('not.be.disabled');
+  cy.wait(3000)
+  cy.get(onboardingSelectors.nameInput).clear();
+  cy.get(onboardingSelectors.nameInput).type(fullName);
+  cy.clearAndType(onboardingSelectors.loginEmailInput, email);
+  cy.clearAndType(onboardingSelectors.loginPasswordInput, commonText.password);
   cy.get(commonSelectors.signUpButton).click();
 
   cy.wait(500);
@@ -159,10 +149,9 @@ export const userSignUp = (fullName, email, workspaceName) => {
   }).then((resp) => {
     invitationLink = `/invitations/${resp.rows[0].invitation_token}`;
     cy.visit(invitationLink);
-    cy.get(commonSelectors.setUpToolJetButton).click();
     cy.wait(4000);
-    verifyOnboardingQuestions(fullName, workspaceName);
-    updateWorkspaceName(email, workspaceName);
+    cy.clearAndType('[data-cy="onboarding-workspace-name-input"]', workspaceName)
+    cy.get('[data-cy="onboarding-submit-button"]').click();
   });
 };
 
@@ -211,10 +200,10 @@ 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(onboardingSelectors.loginPasswordInput).should("be.visible");
+  cy.clearAndType(onboardingSelectors.loginPasswordInput, "password");
   // cy.intercept("GET", "/api/organizations").as("org");
-  cy.get(commonSelectors.signUpButton).click();
+  cy.get(commonSelectors.continueButton).click();
   cy.wait(2000);
   cy.get(commonSelectors.acceptInviteButton).click();
 };
@@ -222,7 +211,7 @@ export const inviteUser = (firstName, email) => {
 export const addNewUser = (firstName, email) => {
   navigateToManageUsers();
   inviteUser(firstName, email);
-  updateWorkspaceName(email);
+  // updateWorkspaceName(email);
 };
 
 export const updateWorkspaceName = (email, workspaceName = email) => {
@@ -300,19 +289,32 @@ export const visitWorkspaceInvitation = (email, workspaceName) => {
 
 export const SignUpPageElements = () => {
   cy.get(commonSelectors.pageLogo).should("be.visible");
-  cy.get(commonSelectors.SignUpSectionHeader).verifyVisibleElement(
+  cy.get(commonSelectors.signUpSectionHeader).verifyVisibleElement(
     "have.text",
     "Sign up"
   );
   cy.get(commonSelectors.signUpButton).verifyVisibleElement(
     "have.text",
-    commonText.getStartedButton
+    "Sign up"
   );
-  cy.get(commonSelectors.signInRedirectText).should(($el) => {
-    expect($el.contents().first().text().trim()).to.eq(
-      commonText.signInRedirectText
-    );
-  });
+
+  // cy.get('[data-cy="signup-info"]').should(($el) => {
+  //   expect($el.contents().first().text().trim()).to.eq(
+  //     commonText.signInRedirectText
+  //   );
+  // });
+
+  cy.get(onboardingSelectors.signupNameLabel).verifyVisibleElement("have.text", "Name *");
+  cy.get(onboardingSelectors.nameInput).should('be.visible');
+  cy.get(onboardingSelectors.emailLabel).verifyVisibleElement(
+    "have.text",
+    "Email *"
+  );
+  // cy.get(commonSelectors.loginPasswordLabel).verifyVisibleElement("have.text", "Password *");
+
+  cy.get(onboardingSelectors.loginPasswordInput).should("be.visible");
+
+
   cy.get(commonSelectors.signInRedirectLink).verifyVisibleElement(
     "have.text",
     commonText.signInRedirectLink
@@ -357,5 +359,6 @@ export const signUpLink = (email) => {
   }).then((resp) => {
     invitationLink = `/invitations/${resp.rows[0].invitation_token}`;
     cy.visit(invitationLink);
+    cy.wait(3000);
   });
 }

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

@@ -3,27 +3,27 @@ import { commonText } from "Texts/common";
 
 export const selfHostCommonElements = () => {
   cy.get(commonSelectors.pageLogo).should("be.visible");
-  cy.get(commonSelectors.setUpadminCheckPoint).verifyVisibleElement(
-    "have.text",
-    commonText.setUpadminCheckPoint
-  );
+  // cy.get(commonSelectors.setUpadminCheckPoint).verifyVisibleElement(
+  //   "have.text",
+  //   commonText.setUpadminCheckPoint
+  // );
   cy.get(commonSelectors.setUpworkspaceCheckPoint).verifyVisibleElement(
     "have.text",
     commonText.setUpworkspaceCheckPoint
   );
-  cy.get(commonSelectors.companyProfileCheckPoint).verifyVisibleElement(
-    "have.text",
-    commonText.companyProfileCheckPoint
-  );
-  cy.get(commonSelectors.onboardingPageSubHeader).verifyVisibleElement(
-    "have.text",
-    commonText.onboardingPageSubHeader
-  );
-  cy.get(commonSelectors.continueButton).verifyVisibleElement(
+  // cy.get(commonSelectors.companyProfileCheckPoint).verifyVisibleElement(
+  //   "have.text",
+  //   commonText.companyProfileCheckPoint
+  // );
+  // cy.get(commonSelectors.onboardingPageSubHeader).verifyVisibleElement(
+  //   "have.text",
+  //   commonText.onboardingPageSubHeader
+  // );
+  cy.get(commonSelectors.OnbordingContinue).verifyVisibleElement(
     "have.text",
     commonText.continueButton
   );
-  cy.get(commonSelectors.continueButton).should("be.disabled");
+  //   cy.get(commonSelectors.OnbordingContinue).should("be.disabled");
 };
 
 export const commonElementsWorkspaceSetup = () => {

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

@@ -14,10 +14,29 @@ export const contantsNameValidation = (value, error) => {
     cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
 };
 
-export const AddNewconstants = (name, value) => {
+export const AddNewconstants = (name, value, type = "global") => {
     cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
     cy.clearAndType(commonSelectors.nameInputField, name);
     cy.get(commonSelectors.valueInputField).click();
     cy.clearAndType(commonSelectors.valueInputField, value);
+    cy.get(workspaceConstantsSelectors.constantsType(type)).check();
     cy.get(workspaceConstantsSelectors.addConstantButton).click();
 };
+
+export const existingNameValidation = (
+    constName,
+    constValue,
+    type = "Global"
+) => {
+    cy.clearAndType(commonSelectors.nameInputField, constName);
+    cy.get(workspaceConstantsSelectors.constantsType(type)).check();
+    cy.get(commonSelectors.valueInputField).click();
+    cy.clearAndType(commonSelectors.valueInputField, constValue);
+    cy.get(workspaceConstantsSelectors.addConstantButton).click();
+    cy.get(commonSelectors.toastMessage)
+        .as("toast")
+        .should(
+            "contain.text",
+            workspaceConstantsText.constantsExisitToast("Global")
+        );
+};

cypress-tests/package.json

@@ -10,7 +10,7 @@
     "@cypress/code-coverage": "^3.12.12",
     "@cypress/webpack-preprocessor": "^5.12.0",
     "@faker-js/faker": "^7.3.0",
-    "cypress": "^12.5.1"
+    "cypress": "^13.16.0"
   },
   "dependencies": {
     "cypress-real-events": "^1.7.6",

docs/docs/widgets/bounded-box.md

@@ -13,7 +13,7 @@ A **Bounded Box** is an infinitely customizable image annotation component that
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
@@ -27,10 +27,10 @@ A **Bounded Box** is an infinitely customizable image annotation component that
 
 | <div style={{ width:"100px"}}> **Property** </div> | <div style={{ width:"100px"}}> **Description** </div> | <div style={{ width:"150px"}}> **Expected Value** </div> |
 | :----------- | :----------- | :----------------- |
-| Image URL | The URL or image data to show it on the component. | Get the image URL dynamically from database: `{{queries.queryname.data[0].url}}` or use [image's base64 data](/docs/how-to/loading-image-pdf-from-db/) |
-| Default value | The data that will load the default bounded boxes over the image when the app is loaded. | Array of objects. Check the [Default value](#default-value) data properties |
-| Selector | The bounded box support selection using rectangle or point. | Click **Fx** to set the value `RECTANGLE` or `POINT` |
-| List of labels | The list of label that will be displayed in the dropdown while selection in the bounded-box. | Labels in array format: `{{['Tree', 'Car', 'Stree light']}}` |
+| Image URL | The URL or image data to show it on the component. | Get the image URL dynamically from database: `{{queries.queryname.data[0].url}}` or use [image's base64 data](/docs/how-to/loading-image-pdf-from-db/).|
+| Default value | The data that will load the default bounded boxes over the image when the app is loaded. | Array of objects. Check the [Default value](#default-value) data properties. |
+| Selector | The bounded box support selection using rectangle or point. | Click **fx** to set the value `RECTANGLE` or `POINT`. |
+| List of labels | The list of label that will be displayed in the dropdown while selection in the bounded-box. | Labels in array format: `{{['Tree', 'Car', 'Stree light']}}`. |
 
 #### Default value
 
@@ -38,12 +38,12 @@ Provide the data that will load the default bounding boxes over the image when t
 
 | <div style={{ width:"100px"}}> **Property** </div> | <div style={{ width:"100px"}}> **Description** </div> | <div style={{ width:"150px"}}> **Expected Value** </div> |
 | :-------- | :------ | :-------- |
-| type | Sets the type of the Bounded Box. | `RECTANGLE` or `POINT` |
-| width | Sets the width of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
-| height | Sets the height of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
-| x | Sets the x-coordinate(horizontal) position of the Bounded Box in the image. | Numerical value ex: `41` |
-| y | Sets the y-coordinate(vertical) position of the Bounded Box in the image. | Numerical value ex: `22` |
-| text | Sets the text value of the Bounded Box. | It should be one of the labels provided in the **[List of labels](#properties)** property |
+| type | Sets the type of the Bounded Box. | `RECTANGLE` or `POINT`. |
+| width | Sets the width of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0`. |
+| height | Sets the height of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0`. |
+| x | Sets the x-coordinate(horizontal) position of the Bounded Box in the image. | Numerical value ex: `41`. |
+| y | Sets the y-coordinate(vertical) position of the Bounded Box in the image. | Numerical value ex: `22`. |
+| text | Sets the text value of the Bounded Box. | It should be one of the labels provided in the **[List of labels](#properties)** property. |
 
 **Example of default values:**
 
@@ -70,7 +70,7 @@ Provide the data that will load the default bounding boxes over the image when t
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
@@ -88,7 +88,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -96,7 +96,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
@@ -111,11 +111,11 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 | annotations.`text` | label selected for the annotation. |
 | annotations.`id` | unique ID of the annotation (system generated). |
 
-The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`
+The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 
@@ -131,25 +131,27 @@ A Tooltip is often used to specify the extra information when the user hovers th
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | 
-| :----------- | :----------- | 
-| Desktop | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the  values can be set to **`{{true}}`** or **`{{false}}`**. |  
-| Mobile | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the  values can be set to **`{{true}}`** or **`{{false}}`**. | 
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"150px"}}> Expected Value </div> |
+| :----------- | :----------- | :----------------- |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+---
+
+<div style={{paddingTop:'24px'}}>
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Style  </div>  | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Expected Value </div> |
 | :----------- | :----------- | :----------- |
-| Visibility | Toggle on or off to control the visibility of the component when the app is loaded. |  **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{true}}` |
-| Disable | Toggle on to disable the component. | **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{false}}` |
-| Box shadow | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent x,y, blur, spread and color. Ex: `9px 11px 5px 5px #00000040` |
+| Visibility | Toggle on or off to control the visibility of the component when the app is loaded. |  `{{true}}` or `{{false}}`, By default, it's set to `{{true}}`. |
+| Disable | Toggle on to disable the component. | `{{true}}` or `{{false}}`, By default, it's set to `{{false}}`. |
+| Box shadow | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets (through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent x, y, blur, spread and color. Ex: `9px 11px 5px 5px #00000040`. |
 
 </div>

docs/docs/widgets/button.md

@@ -2,11 +2,10 @@
 id: button
 title: Button
 ---
-# Button
 
 **Button** component can be used to trigger an action. It can be used to submit a form, navigate to another page, or trigger a query.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
@@ -18,8 +17,8 @@ title: Button
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 | :----------- | :----------- |
-| On click | The On click event is triggered when the button is clicked. |
-| On hover | The On hover event is triggered when the mouse cursor is moved over the button. |
+| On click | Triggers whenever the user clicks the button. |
+| On hover | Triggers whenever the user moves the mouse cursor over the button. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get detailed information about all the **Actions**.
@@ -27,12 +26,12 @@ Check [Action Reference](/docs/category/actions-reference) docs to get detailed
 
 | <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 | :----------- | :----------- | :----------- |
-| Button text | Used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| Loading state | The loading state is used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Toggle the switch **On** or click on **fx** to programmatically set the value to `{{true}}` or `{{false}}`  |
+| Button text | Used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}`. |
+| Loading state | The loading state is used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Toggle the switch **On** or click on **fx** to programmatically set the value to `{{true}}` or `{{false}}`.  |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -48,13 +47,13 @@ Following actions of Button component can be controlled using the component spec
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 | :----------- | :----------- | :---------- |
-| buttonText | This variable stores the text displayed on the button. | Access the value dynamically through JavaScript using the following syntax: `{{components.button1.buttonText}}` |
+| buttonText | This variable stores the text displayed on the button. | Access the value dynamically through JavaScript using the following syntax: `{{components.button1.buttonText}}`. |
 | <div style={{ width:"100px"}}> isValid </div> | Indicates if the input meets validation criteria. | Accessible dynamically with JS (for e.g., `{{components.button1.isValid}}`).|
 | <div style={{ width:"100px"}}> isLoading </div> | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.button1.isLoading}}`).|
 | <div style={{ width:"100px"}}> isVisible </div> | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.button1.isVisible}}`).|
@@ -65,20 +64,20 @@ Following actions of Button component can be controlled using the component spec
 
 | <div style={{ width:"100px"}}> Action </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div>|
 |:------------------|:------------|:------------------------------|
-| Loading state      | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically.   | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Visibility         | Controls component visibility. Toggle or set dynamically.                                                 | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Disable            | Enables or disables the component. Toggle or set dynamically.                                             | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
+| Loading state      | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically.   | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Visibility         | Controls component visibility. Toggle or set dynamically.                                                 | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Disable            | Enables or disables the component. Toggle or set dynamically.                                             | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 | Tooltip            | Provides additional information on hover. Set a string value for display.                                 | String (e.g., `Button to Submit Form` ).                       |
 
 ## Devices
 
 **Show on desktop**
 
-Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.
+Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression.
 
 **Show on mobile**
 
-Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.
+Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression.
 
 
 ---
@@ -90,13 +89,13 @@ Makes the component visible in mobile view. You can set it with the toggle butto
 | <div style={{ width:"100px"}}> Button Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div>|
 |:------------------|:------------|:------------------------------|
 | Type        | Sets the fill value of the Button component.                                                   | Select `Solid` for a button with a solid background and `Outline` for a transparent button with an outline.          |
-| Background        | Sets the background color of the component.                                                   | Select the color or click on `fx` and input code that programmatically returns a Hex color code.          |
-| Text color    | Sets the text color of the text entered in the component.                                     | Select the color or click on `fx` and input code that programmatically returns a Hex color code.          |
-| Border color    | Sets the border color of the component.                                                       | Select the color or click on `fx` and input code that programmatically returns a Hex color code.          |
-| Loader color    | Sets the loader color of the component.                                                       | Select the color or click on `fx` and input code that programmatically returns a Hex color code.          |
-| Icon            | Allows you to select an icon for the component.                                               | Enable the icon visibility, select icon and icon color. Alternatively, you can programmatically set it using `fx`.                                     |
-| Border radius   | Modifies the border radius of the component.                                                  | Enter a number or click on `fx` and enter a code that programmatically returns a numeric value.           |
-| Box shadow      | Sets the box shadow properties of the component.                                              | Select the box shadow color and adjust the related properties or set it programmatically using `fx`.                                            |
+| Background        | Sets the background color of the component.                                                   | Select the color or click on **fx** and input code that programmatically returns a Hex color code.          |
+| Text color    | Sets the text color of the text entered in the component.                                     | Select the color or click on **fx** and input code that programmatically returns a Hex color code.          |
+| Border color    | Sets the border color of the component.                                                       | Select the color or click on **fx** and input code that programmatically returns a Hex color code.          |
+| Loader color    | Sets the loader color of the component.                                                       | Select the color or click on **fx** and input code that programmatically returns a Hex color code.          |
+| Icon            | Allows you to select an icon for the component.                                               | Enable the icon visibility, select icon and icon color. Alternatively, you can programmatically set it using **fx**.                                     |
+| Border radius   | Modifies the border radius of the component.                                                  | Enter a number or click on **fx** and enter a code that programmatically returns a numeric value.           |
+| Box shadow      | Sets the box shadow properties of the component.                                              | Select the box shadow color and adjust the related properties or set it programmatically using **fx**.                                            |
 
 ## Container
 

docs/docs/widgets/circular-progressbar.md

@@ -6,22 +6,22 @@ title: Circular Progressbar
 
 The Circular Progressbar component can be used to show progress in a progress circle.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
 | <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 | ----------- | ----------- | --------------- |
 | Text | Sets a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
-| Progress | Sets the progress of the widget. | Progress should be an integer between 0 and 100.|
+| Progress | Sets the progress of the component. | Progress should be an integer between 0 and 100.|
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -29,7 +29,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
@@ -37,29 +37,31 @@ There are currently no exposed variables for the component.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 ### Tooltip
 
 A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
-Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> |
-| ----------- | ----------- |
-| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Expected Value </div> |
+| ----------- | ----------- | ----------- |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+
+---
 
 ## Styles
 
@@ -71,10 +73,10 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 | Stroke width | Defines the width of stroke | Value must between 0-100|
 | Counter clockwise | Whether to rotate progress bar in counterclockwise direction. | Accepts `{{true}}` and `{{false}}`, Default value is `false`|
 | Circle ratio | Defines ratio of the full circle diameter the progressbar should use. | Accepts numerical value and the default is `1` |
-| Visibility | Toggle on or off to control the visibility of the widget. | Programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}` |
+| Visibility | Toggle on or off to control the visibility of the component. | Programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. By default, it's set to `{{true}}` |
 
 :::info
-Circular progress bar widget uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for further more details about properties and styles.
+Circular progress bar component uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for further more details about properties and styles.
 :::
 
-</div>
+</div>

docs/docs/widgets/code-editor.md

@@ -2,22 +2,21 @@
 id: code-editor
 title: Code Editor
 ---
-# Code Editor
 
-**Code Editor** widget is a versatile text editor for editing code and supports several languages. 
+**Code Editor** component is a versatile text editor for editing code and supports several languages. 
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/widgets/code-editor/editor.png" alt="ToolJet - Widget Reference - Code editor" />
+<img className="screenshot-full" src="/img/widgets/code-editor/editor.png" alt="ToolJet - Component Reference - Code editor" />
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
 | <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
@@ -166,7 +165,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -174,46 +173,48 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:---------- |
-| value | This variable holds the value whenever the user inputs anything on the code-editor . | Access the value dynamically using JS: `{{components.codeeditor1.value}}`| 
+| value | Holds the value of the user inputs in the code editor. | Access the value dynamically using JS (for e.g., `{{components.codeeditor1.value}}`). |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
-Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Layout
 
 | <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Toggle on or off to display the component in desktop view. You can programmatically determine the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on mobile | Toggle on or off to display the component in mobile view. You can programmatically determine the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+
+---
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Styles </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
 |:----------- |:----------- |:----------- |
-| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. | By default, it's set to `{{true}}` |
-| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
+| Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}` |
+| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
 | Border radius | Modifies the border radius of the editor. The field expects only numerical value from `1` to `100`. | Default is `0`. |
 
-</div>
+</div>

docs/docs/widgets/color-picker.md

@@ -3,19 +3,17 @@ id: color-picker
 title: Color Picker
 ---
 
-# Color Picker
+**Color Picker** component is used to select the desired color from the color picker.
 
-**Color Picker** widget is used to select the desired color from the color picker
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 ### Default color
 
-The data needs to be an valid hex color
+The data needs to be a valid hex color.
 
-- One can change default color either from color picker or using `fx` (need to provide only respective hex value)
+- One can change default color either from color picker or using **fx** (need to provide only respective hex value).
 
 **Example:**
 
@@ -26,19 +24,17 @@ Invalid Color : #0000, "black" , rgb(0,0,0) ,
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
-To add an event to a color-picker component, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **+ Add handler**.
-
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| On change | On change event is triggered when the color is changed on the color-picker|
+| On change | Triggers whenever the color is changed on the color-picker.|
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -46,44 +42,46 @@ The following actions of the component can be controlled using component specifi
 
 | <div style={{ width:"100px"}}> Actions  </div>   | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:----------- |
-| setColor | Set a color on the color component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.colorpicker1.setColor('#64A07A')` |
+| setColor() | Sets a color on the color component. | Employ a RunJS query (for e.g., `await components.colorpicker1.setColor('#64A07A')`) or trigger it using an event. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:---------- |
-| selectedColorHex | Gets updated with HEX color code whenever a user selects a color from the color picker.| Access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
-| selectedColorRGB | Gets updated with RGB color code whenever a user selects a color from the color picker. | Access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGB}}`|
-| selectedColorRGBA | Gets updated with RGBA color code whenever a user selects a color from the color picker.| Access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGBA}}`|
+| selectedColorHex | Gets updated with HEX color code whenever a user selects a color from the color picker.| Accessible dynamically with JS (for e.g., `{{components.colorpicker1.selectedColorHex}}`).|
+| selectedColorRGB | Gets updated with RGB color code whenever a user selects a color from the color picker. | Accessible dynamically with JS (for e.g., `{{components.colorpicker1.selectedColorRGB}}`).|
+| selectedColorRGBA | Gets updated with RGBA color code whenever a user selects a color from the color picker.| Accessible dynamically with JS (for e.g., `{{components.colorpicker1.selectedColorRGBA}}`).|
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value  </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value  </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | Programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | Programmatically determinine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+----
+
+<div style={{paddingTop:'24px'}}>
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description    </div>                                                                                                                                                                                                                                          | <div style={{ width:"135px"}}> Expected Value </div> |
 |:---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:---------- |
-| Visibility | Toggle on or off to control the visibility of the widget.| Programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}` |
+| Visibility | Toggle on or off to control the visibility of the component.| Programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Actions
 
@@ -92,19 +90,19 @@ The following actions of the component can be controlled using component specifi
 | setColor | Set the  color. | `color` eg - `#ffffff` |
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
 **Example: Selecting/changing color from the color picker and getting respective hex, rgb and rgba value of selected color**
-- Let's start by creating a new app and then dragging the Color Picker  widget onto the canvas.
-- Click on the Color Picker widget, a picker pop-up will appear, one can select desired color from the picker.
+- Let's start by creating a new app and then dragging the Color Picker component onto the canvas.
+- Click on the Color Picker component, a picker pop-up will appear, one can select desired color from the picker.
 - In order to close the appeared picker pop-up, one need's to move away mouse from the picker pop-up and picker pop-up will fade away.
-- In the Inspector, inside component, look for colorpicker, where one can get respective hex, rgb and rgba color
+- In the Inspector, inside component, look for colorpicker, where one can get respective hex, rgb and rgba color.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/widgets/color-picker/colorpickerinspector-v2.png" alt="ToolJet - Widget Reference - Color Picker" />
+<img className="screenshot-full" src="/img/widgets/color-picker/colorpickerinspector-v2.png" alt="ToolJet - Component Reference - Color Picker" />
 
 </div>
 
-</div>
+</div>

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

@@ -2,31 +2,28 @@
 id: date-range-picker
 title: Date-range Picker
 ---
-# Date-Range Picker
 
-The **Date-Range Picker** widget allows users to select a range of dates.
+The **Date-Range Picker** component allows users to select a range of dates.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 | <div style={{ width:"135px"}}> Property  </div>    | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| Default start date | Set the start date to be selected by default in the widget |
-| Default end date | Set the start date to be selected by default in the widget |
+| Default start date | Set the start date to be selected by default in the component. |
+| Default end date | Set the start date to be selected by default in the component. |
 | Format | The format of the date selected by the date picker. Default date format is **DD/MM/YYYY**. Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/). |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
-Date range picker supports the following events:
-
 | <div style={{ width:"100px"}}> Event  </div>    | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| On select | The On select event is triggered when the a start date and end date is selected on the picker. Just like any other event on ToolJet, you can set multiple handlers for on select event. |
+| On select | Triggered when a start date and end date are selected. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -34,7 +31,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -42,51 +39,53 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:--------- |
-| endDate | This variable holds the date of the endDate selected in the component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
-| startDate | This variable holds the value assigned inside the `code` for custom component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+| endDate | This variable holds the date of the endDate selected in the component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`. |
+| startDate | This variable holds the value assigned inside the `code` for the custom component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
-Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Layout
 
 | <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+---
+
+<div style={{paddingTop:'24px'}}>
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Default Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Border radius | This is to modify the border radius of the date range picker. The field expects only numerical value from `1` to `100`| By default, it's set to `0`|
-| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}`|
-| Disable | This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
+| Border radius | This is to modify the border radius of the date range picker. The field expects only numerical value from `1` to `100`. | By default, it's set to `0`. |
+| Visibility | This is to control the visibility of the component. If `{{false}}` the component will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}`. |
+| Disable | This property only accepts boolean values. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
-</div>
+</div>

docs/docs/widgets/file-picker.md

@@ -63,7 +63,7 @@ Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how t
 
 | Actions | Description | How To Access |
 |:--------|:-----------|:------------|
-| <div style={{ width:"100px"}}> clearFiles() </div> | You can clear the selected files on the filepicker component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()`. |
+| <div style={{ width:"100px"}}> clearFiles() </div> | Clears the selected files from the file picker component. | Employ a RunJS query (for e.g., `await components.filepicker1.clearFiles()`) or trigger it using an event. |
 
 </div>
 
@@ -73,7 +73,7 @@ Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how t
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"200px"}}> How To Access </div> |
 |:----------- |:----------- |:-------- |
-| file | This variable holds the array of objects where each object represents the file loaded on the file picker component. Each object has the following keys: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. | The values can be accesed using `{{components.filepicker1.file[0].base64Data}}`. |
+| file | Holds an array of file objects loaded in the file picker, each with properties: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. | Accessible dynamically with JS (for e.g., `{{components.filepicker1.file[0].base64Data}}`). |
 
 </div>
 
@@ -106,12 +106,12 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 

docs/docs/widgets/image.md

@@ -63,12 +63,12 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** to set the value and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** to set the value and entering a logical expression. |
 
 </div>
 

docs/docs/widgets/kanban-board.md

@@ -3,17 +3,16 @@ id: kanban
 title: Kanban
 ---
 
-# Kanban
-
 The **Kanban** component allows you to visually organize and prioritize your tasks with a transparent workflow. You can set the number of columns to display, enable/disable the add cards button, and bind data to the cards.
 
 :::info Restricted components
 Certain components are restricted from being placed within the **Card** and **Popout** of the **Kanban** component.
+
 - **Card**: Calendar, Kanban, Form, Tabs, Modal, ListView, Container
 - **Popout**: Calendar, Kanban
-:::
+  :::
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Setting Card Data
 
@@ -28,40 +27,41 @@ For instance, you can set the `Data` property of a Text component on a card usin
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 :::info
+
 - It is mandatory to provide an `id` for each column in the `column data` field. The `id` can be of type `string` or `number`.
 - It is mandatory to provide an `id` and a `columnId` for each card in the `Card data` field. Both `id` and `columnId` can be of type `string` or `number`.
-:::
+  :::
 
 | <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:----------- |:----------- |:----------- |
-| Column data | Enter the columns data - `id` and `title` in the form of array of objects or from a query that returns an array of objects. | `{{[{ "id": "c1", "title": "to do" },{ "id": "c2", "title": "in progress" },{ "id": "c3", "title": "Completed" }]}}` or `{{queries.xyz.data}}` |
-| Card data | Enter the cards data - `id`, `title` and `columnId` in the form of array of objects or from a query that returns an array of objects. | `{{[{ id: "r1", title: "Title 1", description: "Description 1", columnId: "c1" },{ id: "r2", title: "Title 2", description: "Description 2", columnId: "c2" },{ id: "r3", title: "Title 3", description: "Description 3",columnId: "c3" }]}}` or `{{queries.abc.data}}` |
-| Card width | Set the width of the card | This property expects a numerical value. By default, the value is set to `{{302}}` |
-| Card height | Set the width of the card | This property expects a numerical value. By default, the value is set to `{{100}}` |
-| Enable add card | This property allows you to show or hide the **+Add Cards** button on the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the `Fx` next to it |
-| Show delete button | This property allows you to show or hide the **Drop here to delete cards** section at the bottom of the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the `Fx` next to it |
+| :---------------- | :------------------------ | :---------------------------- |
+| Column data  | Enter the columns data - `id` and `title` in the form of array of objects or from a query that returns an array of objects. | `{{[{ "id": "c1", "title": "to do" },{ "id": "c2", "title": "in progress" },{ "id": "c3", "title": "Completed" }]}}` or `{{queries.xyz.data}}`.  |
+| Card data   | Enter the cards data - `id`, `title` and `columnId` in the form of array of objects or from a query that returns an array of objects. | `{{[{ id: "r1", title: "Title 1", description: "Description 1", columnId: "c1" },{ id: "r2", title: "Title 2", description: "Description 2", columnId: "c2" },{ id: "r3", title: "Title 3", description: "Description 3",columnId: "c3" }]}}` or `{{queries.abc.data}}`. |
+| Card width  | Set the width of the card. | This property expects a numerical value. By default, the value is set to `{{302}}`. |
+| Card height | Set the width of the card. | This property expects a numerical value. By default, the value is set to `{{100}}`. |
+| Enable add card | This property allows you to show or hide the **+Add Cards** button on the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the **fx** next to it. |
+| Show delete button | This property allows you to show or hide the **Drop here to delete cards** section at the bottom of the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the **fx** next to it. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
 To add an event, click on the component handle to open the component properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
 
-|  <div style={{ width:"100px"}}> Event </div> |  <div style={{ width:"100px"}}> Description </div> |
-|:----------- |:----------- |
-| On Update | On update event is triggered whenever the card data (id, title, description, or columnID) is updated using the component specific actions. |
-| On add card click | This event is triggered whenever the **Add card** button on the Kanban is clicked. |
-| Card removed | This event is triggered whenever the card is **deleted** from the Kanban by dragging it into the bottom delete box or using component specific action. |
-| Card added | This event is triggered whenever a card is **added** on the Kanban using the component specific action. |
-| Card moved | This event is triggered whenever the card's position is changed on the Kanban or using the component specific action. |
-| Card selected | This event is triggered whenever a card is clicked to open the modal. |
+| <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div>  |
+| :-------------------| :----------------|
+| On Update  | On update event is triggered whenever the card data (id, title, description, or columnID) is updated using the component specific actions.  |
+| On add card click  | This event is triggered whenever the **Add card** button on the Kanban is clicked.  |
+| Card removed  | This event is triggered whenever the card is **deleted** from the Kanban by dragging it into the bottom delete box or using component specific action. |
+| Card added  | This event is triggered whenever a card is **added** on the Kanban using the component specific action. |
+| Card moved  | This event is triggered whenever the card's position is changed on the Kanban or using the component specific action. |
+| Card selected  | This event is triggered whenever a card is clicked to open the modal.  |
 
 Just like any other event on ToolJet, you can set multiple handlers for any of the above mentioned events.
 
@@ -73,40 +73,41 @@ Check the **[Component Specific Action](#component-specific-actions-csa)** avail
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
-| <div style={{ width:"100px"}}> Variable </div>| <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
-|:-------- |:----------- |:---------- |
-| updatedCardData | The `updatedCardData` variable will hold the latest values of all the cards in the Kanban. This variable won't have any values. | It will have values only when any action on any of the card is performed like when the card is moved, added, deleted, or updated. |
-| lastAddedCard | The variable `lastAddedCard` holds the values of the last added card. It holds the following data - `id`, `title`, `description` and `columnId` of the last added card. | Get the values using `{{components.kanban1.lastAddedCard.title}}` |
-| lastRemovedCard | The variable `lastRemovedCard` holds the properties of the card that has been recently deleted from the Kanban. It holds the following data - `id`, `title`, `description` and `columnId` of the recently deleted card. | Get the values using `{{components.kanbanboard1.lastRemovedCard.title}}` |
-| lastCardMovement | The variable `lastCardMovement` holds the properties of the card that has been recently moved from its original position. It holds the following data - `originColumnId`, `destinationColumnId`, `originCardIndex`, `destinationCardIndex` and an object `cardDetails` which includes `id`, `title`, `description` and `columnId` of the moved card. | Get the values using `{{components.kanbanboard1.lastCardMovement.cardDetails.title}}` or `{{components.kanbanboard1.lastCardMovement.destinationCardIndex}}` |
-| lastSelectedCard | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the Kanban. | Get the values using `{{components.kanban1.lastSelectedCard.columnId}}` |
-| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using component specific action). | Get the values using `{{components.kanban1.lastUpdatedCard.columnId}}` |
-| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using component specific action). | Get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
+| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"135px"}}> Description </div>   | <div style={{ width:"135px"}}> How To Access </div>   |
+| :------------- | :----------------- | :---------------- |
+| updatedCardData | The `updatedCardData` variable will hold the latest values of all the cards in the Kanban. This variable won't have any values.  | It will have values only when any action on any of the card is performed like when the card is moved, added, deleted, or updated.  |
+| lastAddedCard | The variable `lastAddedCard` holds the values of the last added card. It holds the following data - `id`, `title`, `description` and `columnId` of the last added card.  | Get the values using `{{components.kanban1.lastAddedCard.title}}`.     |
+| lastRemovedCard  | The variable `lastRemovedCard` holds the properties of the card that has been recently deleted from the Kanban. It holds the following data - `id`, `title`, `description` and `columnId` of the recently deleted card.   | Get the values using `{{components.kanbanboard1.lastRemovedCard.title}}`.    |
+| lastCardMovement | The variable `lastCardMovement` holds the properties of the card that has been recently moved from its original position. It holds the following data - `originColumnId`, `destinationColumnId`, `originCardIndex`, `destinationCardIndex` and an object `cardDetails` which includes `id`, `title`, `description` and `columnId` of the moved card. | Get the values using `{{components.kanbanboard1.lastCardMovement.cardDetails.title}}` or `{{components.kanbanboard1.lastCardMovement.destinationCardIndex}}`. |
+| lastSelectedCard  | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the Kanban. | Get the values using `{{components.kanban1.lastSelectedCard.columnId}}`.   |
+| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using component specific action).  | Get the values using `{{components.kanban1.lastUpdatedCard.columnId}}`.  |
+| lastCardUpdate  | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using component specific action).   | Get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}`.    |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
 Following actions of Kanban component can be controlled using the component specific actions(CSA):
 
-| <div style={{ width:"100px"}}> Actions  </div>   | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
-|:----------- |:----------- |:----------- |
-| updateCardData | Update the card data of Kanban component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})` |
-| moveCard | Move a card from one column to other column on the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.moveCard('card id,'column id')` ex: `await components.kanban1.moveCard('c1','r2')` |
-| addCard | Add a card onto the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.addCard('c1', {title: 'New Title'})` |
-| deleteCard | Delete a card from the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')` |
+| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div>  | <div style={{ width:"135px"}}> How To Access </div>    |
+| :-------------- | :----------------- | :--------------- |
+| updateCardData | Update the card data of Kanban component via a component-specific action within any event handler.  | Employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})`.        |
+| moveCard  | Move a card from one column to other column on the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.moveCard('card id,'column id')` ex: `await components.kanban1.moveCard('c1','r2')`. |
+| addCard   | Add a card onto the kanban via a component-specific action within any event handler.  | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.addCard('c1', {title: 'New Title'})`.  |
+| deleteCard   | Delete a card from the kanban via a component-specific action within any event handler.   | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')`.  |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
+
 ### Tooltip
 
 A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
@@ -115,25 +116,27 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div>   |
+| :------------ | :------------ | :-------------- |
+| Show on desktop  | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+----
+
+<div style={{paddingTop:'24px'}}>
 
 ## Styles
 
-| <div style={{ width:"100px"}}> Style  </div>      | <div style={{ width:"100px"}}> Description  </div>                                                                                                                                                                 |
-|:------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Disable      | If disabled or set to `{{false}}` the component will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}` .                        |
-| Visibility   | This is to control the visibility of the component. If `{{false}}`/disabled the component will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
-| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker.                                  |
+| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div>  |
+| :------------- | :------------------ |
+| Disable   | If disabled or set to `{{false}}` the component will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}`.  |
+| Visibility  | This is to control the visibility of the component. If `{{false}}`/disabled the component will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
+| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker.  |
 
 </div>

docs/docs/widgets/link.md

@@ -11,9 +11,9 @@ The **Link** component allows you to add a hyperlink and navigate to the externa
 
 | <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:----------- |:----------- |:-------------- |
-| Link target | This property sets the URL where the user needs to be taken on clicking the link. | example: `https://dev.to/tooljet` or `{{queries.xyz.data.url}}` | 
-| Link text | This property sets the text for the Link component.  | example: **Click here** or **Open webpage** | 
-| Target type | This property specifies the link to be opened in the same tab or new tab on clicking the link. | Options: **New Tab** & **Same Tab** |
+| Link target | This property sets the URL where the user needs to be taken on clicking the link. | example: `https://dev.to/tooljet` or `{{queries.xyz.data.url}}`. | 
+| Link text | This property sets the text for the Link component.  | example: **Click here** or **Open webpage**. | 
+| Target type | This property specifies the link to be opened in the same tab or new tab on clicking the link. | Options: **New Tab** & **Same Tab**. |
 
 </div>
 
@@ -23,8 +23,8 @@ The **Link** component allows you to add a hyperlink and navigate to the externa
 
 |  <div style={{ width:"100px"}}> Event </div> |  <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| On click | **On Click** event is triggered when the link is clicked. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
-| On hover | **On Hover** event is triggered when the link is hovered. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
+| On click | Triggered when the link is clicked. |
+| On hover | Triggered when the cursor hovers over the link. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -40,7 +40,7 @@ The following actions of the link component can be controlled using the componen
 
 | <div style={{ width:"100px"}}> Actions  </div>   | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:------------ |
-| click | You can trigger the click action of the Link component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.link1.click()`. |
+| click | Triggers click action of the link component. | Employ a RunJS query to execute component-specific actions such as `await components.link1.click()` or trigger it using an event. |
 
 </div>
 
@@ -65,12 +65,12 @@ Under the **General** accordion, you can set the value in the string format. Now
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
@@ -84,7 +84,7 @@ Under the **General** accordion, you can set the value in the string format. Now
 |:----------- |:----------- | 
 | Text color |  You can change the background color of the text by entering the Hex color code or choosing a color of your choice from the color picker. |
 | Text size | By default, the text size is set to 14. You can enter any value from 1-100 to set a custom text size. |
-| Underline | You can change the underline of the text in the following ways: **on-hover (default), never, always** |
+| Underline | You can change the underline of the text in the following ways: **on-hover (default), never, always**. |
 | Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
 
 :::info

docs/docs/widgets/map.md

@@ -15,21 +15,21 @@ If you are utilizing the self-hosted version of ToolJet, it is necessary to conf
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 | <div style={{ width:"100px"}}> Properties   </div>   | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:----------- |:----------- |:------------------ |
-| Initial location | default location when the app is loaded initially. | An object containing the **latitude** and **longitude** as key value pairs. ex: `{{ {"lat": 40.7128, "lng": -73.935242} }}` |
-| Default markers | Number of markers that should be shown on the map | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}` |
-| Polygon points | Create a polygon on the map using the given coordinates. | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}` |
-| Add new markers | On clicking the map, a new marker will be added to the map. | By default, it's set to `On`. Toggle `off` to disable adding new markers on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
-| Search for places | Enable to show the search box on the map. | By default, it's set to `On`. Toggle `off` to disable the search box on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
+| Initial location | default location when the app is loaded initially. | An object containing the **latitude** and **longitude** as key value pairs. ex: `{{ {"lat": 40.7128, "lng": -73.935242} }}`. |
+| Default markers | Number of markers that should be shown on the map. | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}`. |
+| Polygon points | Create a polygon on the map using the given coordinates. | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}`. |
+| Add new markers | On clicking the map, a new marker will be added to the map. | By default, it's set to `On`. Toggle `off` to disable adding new markers on the map. Click **fx** to set `{{true}}` or `{{false}}` programmatically. |
+| Search for places | Enable to show the search box on the map. | By default, it's set to `On`. Toggle `off` to disable the search box on the map. Click **fx** to set `{{true}}` or `{{false}}` programmatically. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
@@ -46,7 +46,7 @@ For detailed information about all the available **Actions**, please refer to th
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -54,11 +54,11 @@ Following actions of Map component can be controlled using the component specifi
 
 | <div style={{ width:"100px"}}> Actions  </div>   | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:---------- |:---------- |:------- |
-| setLocation | Set the marker's location on map using latitude and longitude values as parameters via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)`  |
+| setLocation | Set the marker's location on map using latitude and longitude values as parameters via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)`.  |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
@@ -67,18 +67,18 @@ Exposed variables can be used to get data from the component.
 | <div style={{ width:"100px"}}> Variables </div>   | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:--------- |
 | center | This variable will hold the latitude, longitude and the google map url value. |
-| center.`lat` | This variable holds the latitude value of the marker on the Map component. | Access the value dynamically using JS: `{{components.map1.center.lat}}`|
-| center.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. | Access the value dynamically using JS: `{{components.map1.center.lng}}`|
-| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the Map component. | Access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
-| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. | Access the values dynamically using `{{components.map1.markers[1].lat}}` |
-| selectedMarker | Object with the marker selected by the user |
-| bounds | It constructs a rectangle from the points at its south-west and north-east corners |
-| bounds.northEast | It holds the latitude and longitude of the north-east corner of the rectangle.| Access the value dynamically using JS: `{{components.map1.bounds.northEast.lat}}` or `{{components.map1.bounds.northEast.lng}}` |
-| bounds.southWest | It holds the latitude and longitude of the south-west corner of the rectangle. | Access the value dynamically using JS: `{{components.map1.bounds.southWest.lat}}` or `{{components.map1.bounds.southWest.lng}}` |
+| center.`lat` | This variable holds the latitude value of the marker on the Map component. | Access the value dynamically using JS: `{{components.map1.center.lat}}`. |
+| center.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. | Access the value dynamically using JS: `{{components.map1.center.lng}}`. |
+| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the Map component. | Access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`. |
+| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. | Access the values dynamically using `{{components.map1.markers[1].lat}}`. |
+| selectedMarker | Object with the marker selected by the user. |
+| bounds | It constructs a rectangle from the points at its south-west and north-east corners. |
+| bounds.northEast | It holds the latitude and longitude of the north-east corner of the rectangle.| Access the value dynamically using JS: `{{components.map1.bounds.northEast.lat}}` or `{{components.map1.bounds.northEast.lng}}`. |
+| bounds.southWest | It holds the latitude and longitude of the south-west corner of the rectangle. | Access the value dynamically using JS: `{{components.map1.bounds.southWest.lat}}` or `{{components.map1.bounds.southWest.lng}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 ### Tooltip
@@ -87,25 +87,27 @@ A Tooltip is often used to specify the extra information when the user hovers th
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+  
+----
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Properties </div>     | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:----------- |:----------- |:------------------ |
-| Visibility | Toggle on or off to control the visibility of the component. | You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the component will not be visible after the app is release. By default, it's set to `{{true}}`. |
-| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. | You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
-| Box shadow | Add a shadow effect to the component by providing values to X, Y, Blur, Spread and Color. | You can also programmatically set the value by clicking on the `Fx` button next to it. Ex: `{{"x": 0, "y": 0, "blur": 0, "spread": 0, "color": "#000000"}}` | 
+| Visibility | Toggle on or off to control the visibility of the component. | You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is release. By default, it's set to `{{true}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. | You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+| Box shadow | Add a shadow effect to the component by providing values to X, Y, Blur, Spread and Color. | You can also programmatically set the value by clicking on the **fx** button next to it. Ex: `{{"x": 0, "y": 0, "blur": 0, "spread": 0, "color": "#000000"}}`. | 
 
-</div>
+</div>

docs/docs/widgets/pagination.md

@@ -2,7 +2,6 @@
 id: pagination
 title: Pagination
 ---
-# Pagination
 
 **Pagination** enables the user to select a specific page from a range of pages. It is used to separate the content into discrete pages.
 
@@ -23,7 +22,7 @@ You can club the Pagination component with the List View component.
 
 <div style={{paddingTop:'24px'}}>
 
-## Event 
+## Event
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 |:------------------|:---------------------|
@@ -43,10 +42,10 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 ## Exposed Variables
 
-| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div>|
+| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:--------- |
-| totalPages | This variable holds the value of the `Number of Pages` set from the Pagination component properties. | Access the value dynamically using JS: `{{components.pagination1.totalPages}}`. |
-| currentPageIndex | This variable will hold the index of the currently selected option on the Pagination component. | Access the value dynamically using JS: `{{components.pagination1.currentPageIndex}}`. |
+| totalPages | Holds the value of the `Number of Pages` set from the Pagination component properties.| Accessible dynamically with JS(for e.g., `{{components.pagination1.totalPages}}`).|
+| currentPageIndex | Holds the index of the currently selected option on the Pagination component. | Accessible dynamically with JS(for e.g., `{{components.pagination1.currentPageIndex}}`). |
 
 </div>
 
@@ -63,12 +62,12 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+|:------------ |:-------------|:--------- |
+| Show on desktop  | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
@@ -78,10 +77,10 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 ## Styles
 
-| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}>  Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
+| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
 |:------------ |:-------------|:--------- |
 | Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}`. |
-| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
+| Disable  | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
 
 :::info
 Any property having **fx** button next to its field can be **programmatically configured**.

docs/docs/widgets/qr-scanner.md

@@ -15,7 +15,7 @@ You might have to stick to the Safari browser in IOS as camera access is restric
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 |:------------------|:---------------------|
-| On Detect | Triggers whenever the component successfully scans a QR code. |
+| On detect | Triggers whenever the component successfully scans a QR code. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -44,7 +44,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div>|
 |:----------- |:----------- |:--------- |
-| lastDetectedValue | This variable holds the data contained in the last QR code scanned by the component. | To fetch the data use `{{components.qrscanner1.lastDetectedValue}}`. |
+| lastDetectedValue | Holds the data from the last QR code scanned by the component. | Accessible dynamically with JS (for e.g., `{{components.qrscanner1.lastDetectedValue}}`). |
 
 </div>
 
@@ -63,12 +63,12 @@ Now hovering over the component will display the string as the tooltip.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
@@ -83,4 +83,4 @@ Now hovering over the component will display the string as the tooltip.
 | Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}`. |
 | Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
 
-</div>
+</div>

docs/docs/widgets/radio-button.md

@@ -2,32 +2,33 @@
 id: radio-button
 title: Radio Button
 ---
+
 # Radio Button
 
-The **Radio Button** widget can be used to select one option from a group of options.
+The **Radio Button** component can be used to select one option from a group of options.
 
 :::tip
 Radio Buttons are preferred when the list of options is less than six, and all the options can be displayed at once.
 :::
 
 :::info
-For more than six options, consider using **[Dropdown](/docs/widgets/dropdown)** widget.
+For more than six options, consider using **[Dropdown](/docs/widgets/dropdown)** component.
 :::
 
 ## Properties
 
-| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | 
-|:------------ |:-------------|
-| Label | The text is to be used as the label for the radio button. This field expects a `String` value. |
-| Default value | The value of the default option. |
-| Option values | List of values for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.value)}}` or populate it with sample values `{{[true, false]}}`. |
-| Option labels | List of labels for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.label)}}` or populate it with sample values `{{["yes", "no"]}}`. |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div>                                                                                                                                                     |
+| :--------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Label                                          | The text is to be used as the label for the radio button. This field expects a `String` value.                                                                                                        |
+| Default value                                  | The value of the default option.                                                                                                                                                                      |
+| Option values                                  | List of values for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.value)}}` or populate it with sample values `{{[true, false]}}`. |
+| Option labels                                  | List of labels for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.label)}}` or populate it with sample values `{{["yes", "no"]}}`. |
 
 ## Event
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
-|:------------------|:---------------------|
-| On select | This event is triggered when an option is clicked. |
+| :------------------------------------------ | :------------------------------------------------ |
+| On select                                   | Triggers whenever the user clicks an option.      |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -37,33 +38,36 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
 
 The following actions of the component can be controlled using component specific actions(CSA):
 
-| <div style={{ width:"100px"}}> Actions  </div> |<div style={{ width:"135px"}}>  Description </div> | <div style={{ width:"135px"}}> How To Access </div>
-|:----------- |:----------- |:------- |
-| selectOption | Select an option from the radio buttons via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
+| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div>                                                 | <div style={{ width:"135px"}}> How To Access </div>                                                                     |
+| :-------------------------------------------- | :------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------- |
+| selectOption                                  | Select an option from the radio buttons via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
 
 ## Exposed Variables
 
 There are currently no exposed variables for the component.
 
 ## General
+
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
-Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
 
 ## Layout
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div>                                                            |
+| :------------------------------------------- | :------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
+| Show on desktop                              | Toggle on or off to display desktop view.         | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
+| Show on mobile                               | Toggle on or off to display mobile view.          | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
+
+---
 
 ## Styles
 
-| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}>  Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
-|:------------ |:-------------|:--------- |
-| Text color | Change the color of the text in the widget by providing the `Hex color code` or by choosing the color of your choice from the color picker. |  |
-| Active color | Change the color of active radio button by providing the `Hex color code` or by choosing the color of your choice from the color picker. |  |
-| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. | By default, it's set to `{{true}}` |
-| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
+| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div>                                                                                                                                                                                                                          | <div style={{ width:"100px"}}> Default Value </div> |
+| :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------- |
+| Text color                                  | Change the color of the text in the component by providing the `Hex color code` or by choosing the color of your choice from the color picker.                                                                                                                             |                                                     |
+| Active color                                | Change the color of active radio button by providing the `Hex color code` or by choosing the color of your choice from the color picker.                                                                                                                                   |                                                     |
+| Visibility                                  | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed.                                            | By default, it's set to `{{true}}`                  |
+| Disable                                     | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`         |

docs/docs/widgets/star-rating.md

@@ -26,7 +26,7 @@ The **Star Rating** component can be used to display as well as input ratings. T
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| On Change | This event is triggered when a star is clicked. |
+| On change | Triggers whenever the user clicks a star. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -48,7 +48,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 | <div style={{ width:"100px"}}> Variables  </div>  | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:--------- |
-| value | This variable holds the value whenever a rating is added on the component. The variable holds a numerical value. | Access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`.|
+| value |Holds the value entered by the user whenever a rating is added on the component. | Accessible dynamically with JS (for e.g., `{{components.starrating1.value}}`).|
 
 </div>
 
@@ -65,12 +65,12 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
@@ -87,4 +87,4 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 | Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}`. |
 | Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
 
-</div>
+</div>

docs/docs/widgets/steps.md

@@ -78,15 +78,17 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
+---
+
 <div style={{paddingTop:'24px'}}>
 
 ## Styles

docs/docs/widgets/svg-image.md

@@ -56,21 +56,23 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
 <div style={{paddingTop:'24px'}}>
 
+---
+
 ## Styles
 
-| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | Configuration Options |
 |:------------ |:-------------|:--------- |
-| Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}`. |
-
+| Visibility | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Box-Shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or programmatically set it using **fx**. |
 </div>

docs/docs/widgets/tabs.md

@@ -5,7 +5,7 @@ title: Tabs
 
 # Tabs
 
-A **Tabs** widget contains a number of defined containers that can be navigated through the tabs. Each tab acts as a [container](/docs/widgets/container/) that can have different widgets placed inside it.
+A **Tabs** component contains a number of defined containers that can be navigated through the tabs. Each tab acts as a [container](/docs/widgets/container/) that can have different component placed inside it.
 
 :::caution Restricted components
 In order to avoid excessively complex situations, certain components, namely **Calendar** and **Kanban**, are restricted from being placed within the Tabs component using drag-and-drop functionality.
@@ -15,13 +15,13 @@ If the builder attempts to add any of the aforementioned components inside the T
 `<Restricted component> cannot be used as a child component within the Tabs.`
 :::
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 ### Tabs
 
-This property lets you add and remove containers from the Tabs widget. Each container in the tab has its unique `id` , `title` and `disabled` for disabling individual tabs . This field expects an array of objects.
+This property lets you add and remove containers from the Tabs component. Each container in the tab has its unique `id` , `title` and `disabled` for disabling individual tabs . This field expects an array of objects.
 
 ```js
 {{[
@@ -49,7 +49,7 @@ This property selects the container in the tab which matches the corresponding `
 
 ### Hide tab
 
-It allows you to hide all the tab titles defined in the Tabs property above. It accepts boolean values which can also be set using the toggle option or programmatically by clicking on the FX button.
+It allows you to hide all the tab titles defined in the Tabs property above. It accepts boolean values which can also be set using the toggle option or programmatically by clicking on the **fx** button.
 
 ### Render only active tab
 
@@ -57,7 +57,7 @@ This property is enabled by default. When enabled, only the active tab will be r
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
@@ -71,7 +71,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -83,7 +83,7 @@ Following actions of Tabs component can be controlled using the component specif
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
@@ -93,7 +93,7 @@ Following actions of Tabs component can be controlled using the component specif
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Actions
 
@@ -103,18 +103,20 @@ Following actions of Tabs component can be controlled using the component specif
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+
+----
 
 ## Styles
 
@@ -122,11 +124,11 @@ Following actions of Tabs component can be controlled using the component specif
 |:----------- |:----------- |
 | Highlight color | You can change the highlight color of the selected tab by entering the Hex color code or choosing a color of your choice from the color picker. |
 | Tab width | Tab width can be set as **auto** or **equally split**. |
-| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
-| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+| Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the  component will not be visible after the app is deployed. By default, it's set to `{{true}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
-</div>
+</div>

docs/docs/widgets/textarea.md

@@ -2,22 +2,23 @@
 id: textarea
 title: Textarea
 ---
+
 # Textarea
 
-The **Textarea** component allows users to enter text in an input field similar to the [Text Input](/docs/widgets/text-input) component. Textarea is generally preferred when we are expecting an input of multiple sentences. In this document, we'll go through all the configuration options for the **Textarea** component.  
+The **Textarea** component allows users to enter text in an input field similar to the [Text Input](/docs/widgets/text-input) component. Textarea is generally preferred when we are expecting an input of multiple sentences. In this document, we'll go through all the configuration options for the **Textarea** component.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
-| <div style={{ width:"100px"}}> Property </div>    | <div style={{ width:"100px"}}> Description                   </div>                              | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div>    | <div style={{ width:"100px"}}> Description  </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:-------------|:------------------------------------------------------------|:------------|
-| Default value| Used to set initial value in textarea on load. It is a pre-established value that can be retrieved from the Text area component if no modifications are made to it. | Enter some text as the value (example: "John Doe")|
-| Placeholder  | Provides a hint for the expected value. It disappears once the user interacts with the component. | Enter some instructional text as the value (example: "Type name here")   |
+| Default value| Used to set initial value in textarea on load. It is a pre-established value that can be retrieved from the Text area component if no modifications are made to it. | Enter some text as the value (example: "John Doe"). |
+| Placeholder  | Provides a hint for the expected value. It disappears once the user interacts with the component. | Enter some instructional text as the value (example: "Type name here"). |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -30,17 +31,17 @@ Following actions of the **Textarea** component can be controlled using Componen
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | Variables | Description | How To Access |
-|:---------:|:-----------:|:-------------:|
+|:---------|:-----------|:-------------|
 | <div style={{ width:"100px"}}> value </div> | This variable holds the value entered in the text area component. | Access the value dynamically using JS. For example, `{{components.textarea1.value}}` |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 
@@ -52,32 +53,32 @@ In the input field under **Tooltip**, you can enter some text and the component
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| <div style={{ width:"100px"}}> Devices </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| :----------- | :----------- | :------------ |
+| Show on desktop  | Makes the component visible in desktop view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
---- 
+---
 
 ## Styles
 
-| <div style={{ width:"100px"}}> Style  </div>    |  <div style={{ width:"100px"}}> Description </div> |  <div style={{ width:"135px"}}> Expected Value </div> |
-|:---------------|:-----------|:---------------|
-| Visibility | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed.| Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
-| Disable | Makes the component non-functional when set to true. | Use the toggle button OR click on `Fx` to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`|
-| Border radius | Adjusts the roundness of the component's corners.  | Numeric value|
+| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div>  | <div style={{ width:"135px"}}> Expected Value </div>  |
+| :------------- | :-------------- | :-------------- |
+| Visibility  | Controls the visibility of the component. If set to `{{false}}`, the component will not be visible after the app is deployed. | Use the toggle button OR click on **fx** to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`. |
+| Disable  | Makes the component non-functional when set to true.  | Use the toggle button OR click on **fx** to pass a boolean value or a logical expression that returns a boolean value i.e. either `{{true}}` or `{{false}}`. |
+| Border radius  | Adjusts the roundness of the component's corners.  | Numeric value  |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 
@@ -85,4 +86,4 @@ In the input field under **Tooltip**, you can enter some text and the component
 
 The **Box Shadow** property is used to add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow.
 
-</div>
+</div>

docs/docs/widgets/tree-select.md

@@ -5,9 +5,9 @@ title: Tree Select
 
 # Tree Select
 
-The **Tree Select** widget is a group checkboxes in a TreeView which can be expanded or collapsed.
+The **Tree Select** component is a group checkboxes in a TreeView which can be expanded or collapsed.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
@@ -86,7 +86,7 @@ Similar to checked values, expanded values is an array of values passed to expan
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
@@ -102,7 +102,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -110,7 +110,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
@@ -123,30 +123,32 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Layout
 
 |  <div style={{ width:"100px"}}> Layout </div> |  <div style={{ width:"100px"}}> Description </div> |  <div style={{ width:"135px"}}> Expected Value </div>|
 |:----- |:---------  |:------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop  | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
+| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+
+---
 
 ## Styles
 
 |  <div style={{ width:"100px"}}> Style </div> |  <div style={{ width:"100px"}}> Description </div> |  <div style={{ width:"100px"}}> Default Value </div>|
 |:----- |:---------  |:------------- |
-| Text color | Change the color of the text in the widget by providig the `Hex color code` or choosing a color from the picker. |  |
-| Checkbox color | Change the color of the toggle switch in the widget by providig the `Hex color code` or choosing a color from the picker. |  |
-| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}`. |
-| Disable | This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
+| Text color  | Change the color of the text in the component by providig the `Hex color code` or choosing a color from the picker. |     |
+| Checkbox color | Change the color of the toggle switch in the component by providig the `Hex color code` or choosing a color from the picker. |   |
+| Visibility  | This is to control the visibility of the component. If `{{false}}` the component will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}`.  |
+| Disable   | This property only accepts boolean values. If set to `{{true}}`, the component will be locked and becomes non-functional.  | By default, its value is set to `{{false}}`.|
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
-</div>
+</div>

docs/versioned_docs/version-2.50.0-LTS/widgets/bounded-box.md

@@ -13,7 +13,7 @@ A **Bounded Box** is an infinitely customizable image annotation component that
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
@@ -27,10 +27,10 @@ A **Bounded Box** is an infinitely customizable image annotation component that
 
 | <div style={{ width:"100px"}}> **Property** </div> | <div style={{ width:"100px"}}> **Description** </div> | <div style={{ width:"150px"}}> **Expected Value** </div> |
 | :----------- | :----------- | :----------------- |
-| Image URL | The URL or image data to show it on the component. | Get the image URL dynamically from database: `{{queries.queryname.data[0].url}}` or use [image's base64 data](/docs/how-to/loading-image-pdf-from-db/) |
-| Default value | The data that will load the default bounded boxes over the image when the app is loaded. | Array of objects. Check the [Default value](#default-value) data properties |
-| Selector | The bounded box support selection using rectangle or point. | Click **Fx** to set the value `RECTANGLE` or `POINT` |
-| List of labels | The list of label that will be displayed in the dropdown while selection in the bounded-box. | Labels in array format: `{{['Tree', 'Car', 'Stree light']}}` |
+| Image URL | The URL or image data to show it on the component. | Get the image URL dynamically from database: `{{queries.queryname.data[0].url}}` or use [image's base64 data](/docs/how-to/loading-image-pdf-from-db/).|
+| Default value | The data that will load the default bounded boxes over the image when the app is loaded. | Array of objects. Check the [Default value](#default-value) data properties. |
+| Selector | The bounded box support selection using rectangle or point. | Click **fx** to set the value `RECTANGLE` or `POINT`. |
+| List of labels | The list of label that will be displayed in the dropdown while selection in the bounded-box. | Labels in array format: `{{['Tree', 'Car', 'Stree light']}}`. |
 
 #### Default value
 
@@ -38,12 +38,12 @@ Provide the data that will load the default bounding boxes over the image when t
 
 | <div style={{ width:"100px"}}> **Property** </div> | <div style={{ width:"100px"}}> **Description** </div> | <div style={{ width:"150px"}}> **Expected Value** </div> |
 | :-------- | :------ | :-------- |
-| type | Sets the type of the Bounded Box. | `RECTANGLE` or `POINT` |
-| width | Sets the width of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
-| height | Sets the height of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0` |
-| x | Sets the x-coordinate(horizontal) position of the Bounded Box in the image. | Numerical value ex: `41` |
-| y | Sets the y-coordinate(vertical) position of the Bounded Box in the image. | Numerical value ex: `22` |
-| text | Sets the text value of the Bounded Box. | It should be one of the labels provided in the **[List of labels](#properties)** property |
+| type | Sets the type of the Bounded Box. | `RECTANGLE` or `POINT`. |
+| width | Sets the width of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0`. |
+| height | Sets the height of the Bounded Box in pixels. | Numeric value. If the `type` value is `POINT`, set it to `0`. |
+| x | Sets the x-coordinate(horizontal) position of the Bounded Box in the image. | Numerical value ex: `41`. |
+| y | Sets the y-coordinate(vertical) position of the Bounded Box in the image. | Numerical value ex: `22`. |
+| text | Sets the text value of the Bounded Box. | It should be one of the labels provided in the **[List of labels](#properties)** property. |
 
 **Example of default values:**
 
@@ -70,7 +70,7 @@ Provide the data that will load the default bounding boxes over the image when t
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
@@ -88,7 +88,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -96,7 +96,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
@@ -111,11 +111,11 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 | annotations.`text` | label selected for the annotation. |
 | annotations.`id` | unique ID of the annotation (system generated). |
 
-The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`
+The values can be accessed dynamically using `{{components.boundedbox1.annotations[0].text}}` or `{{components.boundedbox1.annotations[1].width}}`.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 
@@ -131,25 +131,27 @@ A Tooltip is often used to specify the extra information when the user hovers th
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | 
-| :----------- | :----------- | 
-| Desktop | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the  values can be set to **`{{true}}`** or **`{{false}}`**. |  
-| Mobile | Toggle to show or hide the component in the desktop view. Dynamically configure the value by clicking on `Fx` and entering a logical expression that results in either true or false. Alternatively, the  values can be set to **`{{true}}`** or **`{{false}}`**. | 
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"150px"}}> Expected Value </div> |
+| :----------- | :----------- | :----------------- |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+---
+
+<div style={{paddingTop:'24px'}}>
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Style  </div>  | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Expected Value </div> |
 | :----------- | :----------- | :----------- |
-| Visibility | Toggle on or off to control the visibility of the component when the app is loaded. |  **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{true}}` |
-| Disable | Toggle on to disable the component. | **`{{true}}`** or **`{{false}}`**, By default, it's set to `{{false}}` |
-| Box shadow | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets(through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent x,y, blur, spread and color. Ex: `9px 11px 5px 5px #00000040` |
+| Visibility | Toggle on or off to control the visibility of the component when the app is loaded. |  `{{true}}` or `{{false}}`, By default, it's set to `{{true}}`. |
+| Disable | Toggle on to disable the component. | `{{true}}` or `{{false}}`, By default, it's set to `{{false}}`. |
+| Box shadow | Sets the add shadow effects around a component's frame. You can specify the horizontal and vertical offsets (through X and Y sliders), blur and spread radius, and color of the shadow. | Values that represent x, y, blur, spread and color. Ex: `9px 11px 5px 5px #00000040`. |
 
 </div>

docs/versioned_docs/version-2.50.0-LTS/widgets/button.md

@@ -2,11 +2,10 @@
 id: button
 title: Button
 ---
-# Button
 
 **Button** component can be used to trigger an action. It can be used to submit a form, navigate to another page, or trigger a query.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
@@ -18,8 +17,8 @@ title: Button
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 | :----------- | :----------- |
-| On click | The On click event is triggered when the button is clicked. |
-| On hover | The On hover event is triggered when the mouse cursor is moved over the button. |
+| On click | Triggers whenever the user clicks the button. |
+| On hover | Triggers whenever the user moves the mouse cursor over the button. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get detailed information about all the **Actions**.
@@ -27,12 +26,12 @@ Check [Action Reference](/docs/category/actions-reference) docs to get detailed
 
 | <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 | :----------- | :----------- | :----------- |
-| Button text | Used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}` |
-| Loading state | The loading state is used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Toggle the switch **On** or click on **fx** to programmatically set the value to `{{true}}` or `{{false}}`  |
+| Button text | Used to set the label of the button. | Any **String** value: `Send Message`, `Delete`, or `{{queries.xyz.data.action}}`. |
+| Loading state | The loading state is used to show a spinner as the button content. Loading state is commonly used with isLoading property of the queries to show a loading status while a query is being run. | Toggle the switch **On** or click on **fx** to programmatically set the value to `{{true}}` or `{{false}}`.  |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -48,13 +47,13 @@ Following actions of Button component can be controlled using the component spec
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 | :----------- | :----------- | :---------- |
-| buttonText | This variable stores the text displayed on the button. | Access the value dynamically through JavaScript using the following syntax: `{{components.button1.buttonText}}` |
+| buttonText | This variable stores the text displayed on the button. | Access the value dynamically through JavaScript using the following syntax: `{{components.button1.buttonText}}`. |
 | <div style={{ width:"100px"}}> isValid </div> | Indicates if the input meets validation criteria. | Accessible dynamically with JS (for e.g., `{{components.button1.isValid}}`).|
 | <div style={{ width:"100px"}}> isLoading </div> | Indicates if the component is loading. | Accessible dynamically with JS (for e.g., `{{components.button1.isLoading}}`).|
 | <div style={{ width:"100px"}}> isVisible </div> | Indicates if the component is visible. | Accessible dynamically with JS (for e.g., `{{components.button1.isVisible}}`).|
@@ -65,20 +64,20 @@ Following actions of Button component can be controlled using the component spec
 
 | <div style={{ width:"100px"}}> Action </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div>|
 |:------------------|:------------|:------------------------------|
-| Loading state      | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically.   | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Visibility         | Controls component visibility. Toggle or set dynamically.                                                 | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
-| Disable            | Enables or disables the component. Toggle or set dynamically.                                             | Enable/disable the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression. |
+| Loading state      | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically.   | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Visibility         | Controls component visibility. Toggle or set dynamically.                                                 | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Disable            | Enables or disables the component. Toggle or set dynamically.                                             | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 | Tooltip            | Provides additional information on hover. Set a string value for display.                                 | String (e.g., `Button to Submit Form` ).                       |
 
 ## Devices
 
 **Show on desktop**
 
-Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.
+Makes the component visible in desktop view. You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression.
 
 **Show on mobile**
 
-Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on `fx` and entering a logical expression.
+Makes the component visible in mobile view. You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression.
 
 
 ---
@@ -90,13 +89,13 @@ Makes the component visible in mobile view. You can set it with the toggle butto
 | <div style={{ width:"100px"}}> Button Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div>|
 |:------------------|:------------|:------------------------------|
 | Type        | Sets the fill value of the Button component.                                                   | Select `Solid` for a button with a solid background and `Outline` for a transparent button with an outline.          |
-| Background        | Sets the background color of the component.                                                   | Select the color or click on `fx` and input code that programmatically returns a Hex color code.          |
-| Text color    | Sets the text color of the text entered in the component.                                     | Select the color or click on `fx` and input code that programmatically returns a Hex color code.          |
-| Border color    | Sets the border color of the component.                                                       | Select the color or click on `fx` and input code that programmatically returns a Hex color code.          |
-| Loader color    | Sets the loader color of the component.                                                       | Select the color or click on `fx` and input code that programmatically returns a Hex color code.          |
-| Icon            | Allows you to select an icon for the component.                                               | Enable the icon visibility, select icon and icon color. Alternatively, you can programmatically set it using `fx`.                                     |
-| Border radius   | Modifies the border radius of the component.                                                  | Enter a number or click on `fx` and enter a code that programmatically returns a numeric value.           |
-| Box shadow      | Sets the box shadow properties of the component.                                              | Select the box shadow color and adjust the related properties or set it programmatically using `fx`.                                            |
+| Background        | Sets the background color of the component.                                                   | Select the color or click on **fx** and input code that programmatically returns a Hex color code.          |
+| Text color    | Sets the text color of the text entered in the component.                                     | Select the color or click on **fx** and input code that programmatically returns a Hex color code.          |
+| Border color    | Sets the border color of the component.                                                       | Select the color or click on **fx** and input code that programmatically returns a Hex color code.          |
+| Loader color    | Sets the loader color of the component.                                                       | Select the color or click on **fx** and input code that programmatically returns a Hex color code.          |
+| Icon            | Allows you to select an icon for the component.                                               | Enable the icon visibility, select icon and icon color. Alternatively, you can programmatically set it using **fx**.                                     |
+| Border radius   | Modifies the border radius of the component.                                                  | Enter a number or click on **fx** and enter a code that programmatically returns a numeric value.           |
+| Box shadow      | Sets the box shadow properties of the component.                                              | Select the box shadow color and adjust the related properties or set it programmatically using **fx**.                                            |
 
 ## Container
 

docs/versioned_docs/version-2.50.0-LTS/widgets/circular-progressbar.md

@@ -6,22 +6,22 @@ title: Circular Progressbar
 
 The Circular Progressbar component can be used to show progress in a progress circle.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
 | <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 | ----------- | ----------- | --------------- |
 | Text | Sets a text inside the progress circle.| It expects a `String`, you can also use js to dynamically update the text as the progress changes. |
-| Progress | Sets the progress of the widget. | Progress should be an integer between 0 and 100.|
+| Progress | Sets the progress of the component. | Progress should be an integer between 0 and 100.|
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -29,7 +29,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
@@ -37,29 +37,31 @@ There are currently no exposed variables for the component.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 ### Tooltip
 
 A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
-Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> |
-| ----------- | ----------- |
-| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{width:"100px"}}> Expected Value </div> |
+| ----------- | ----------- | ----------- |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+
+---
 
 ## Styles
 
@@ -71,10 +73,10 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 | Stroke width | Defines the width of stroke | Value must between 0-100|
 | Counter clockwise | Whether to rotate progress bar in counterclockwise direction. | Accepts `{{true}}` and `{{false}}`, Default value is `false`|
 | Circle ratio | Defines ratio of the full circle diameter the progressbar should use. | Accepts numerical value and the default is `1` |
-| Visibility | Toggle on or off to control the visibility of the widget. | Programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}` |
+| Visibility | Toggle on or off to control the visibility of the component. | Programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. By default, it's set to `{{true}}` |
 
 :::info
-Circular progress bar widget uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for further more details about properties and styles.
+Circular progress bar component uses [react-circular-progress](https://github.com/kevinsqi/react-circular-progressbar) package. Check the repo for further more details about properties and styles.
 :::
 
-</div>
+</div>

docs/versioned_docs/version-2.50.0-LTS/widgets/code-editor.md

@@ -2,22 +2,21 @@
 id: code-editor
 title: Code Editor
 ---
-# Code Editor
 
-**Code Editor** widget is a versatile text editor for editing code and supports several languages. 
+**Code Editor** component is a versatile text editor for editing code and supports several languages. 
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/widgets/code-editor/editor.png" alt="ToolJet - Widget Reference - Code editor" />
+<img className="screenshot-full" src="/img/widgets/code-editor/editor.png" alt="ToolJet - Component Reference - Code editor" />
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
 | <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
@@ -166,7 +165,7 @@ Any property having `Fx` button next to its field can be **programmatically conf
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -174,46 +173,48 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:---------- |
-| value | This variable holds the value whenever the user inputs anything on the code-editor . | Access the value dynamically using JS: `{{components.codeeditor1.value}}`| 
+| value | Holds the value of the user inputs in the code editor. | Access the value dynamically using JS (for e.g., `{{components.codeeditor1.value}}`). |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
-Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Layout
 
 | <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| Show on desktop | Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile | Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Toggle on or off to display the component in desktop view. You can programmatically determine the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on mobile | Toggle on or off to display the component in mobile view. You can programmatically determine the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+
+---
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Styles </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
 |:----------- |:----------- |:----------- |
-| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. | By default, it's set to `{{true}}` |
-| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
+| Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}` |
+| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
 | Border radius | Modifies the border radius of the editor. The field expects only numerical value from `1` to `100`. | Default is `0`. |
 
-</div>
+</div>

docs/versioned_docs/version-2.50.0-LTS/widgets/color-picker.md

@@ -3,19 +3,17 @@ id: color-picker
 title: Color Picker
 ---
 
-# Color Picker
+**Color Picker** component is used to select the desired color from the color picker.
 
-**Color Picker** widget is used to select the desired color from the color picker
-
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 ### Default color
 
-The data needs to be an valid hex color
+The data needs to be a valid hex color.
 
-- One can change default color either from color picker or using `fx` (need to provide only respective hex value)
+- One can change default color either from color picker or using **fx** (need to provide only respective hex value).
 
 **Example:**
 
@@ -26,19 +24,17 @@ Invalid Color : #0000, "black" , rgb(0,0,0) ,
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
-To add an event to a color-picker component, click on the widget handle to open the widget properties on the right sidebar. Go to the **Events** section and click on **+ Add handler**.
-
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| On change | On change event is triggered when the color is changed on the color-picker|
+| On change | Triggers whenever the color is changed on the color-picker.|
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -46,44 +42,46 @@ The following actions of the component can be controlled using component specifi
 
 | <div style={{ width:"100px"}}> Actions  </div>   | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:----------- |
-| setColor | Set a color on the color component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.colorpicker1.setColor('#64A07A')` |
+| setColor() | Sets a color on the color component. | Employ a RunJS query (for e.g., `await components.colorpicker1.setColor('#64A07A')`) or trigger it using an event. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:---------- |
-| selectedColorHex | Gets updated with HEX color code whenever a user selects a color from the color picker.| Access the value dynamically using JS: `{{components.colorpicker1.selectedColorHex}}`|
-| selectedColorRGB | Gets updated with RGB color code whenever a user selects a color from the color picker. | Access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGB}}`|
-| selectedColorRGBA | Gets updated with RGBA color code whenever a user selects a color from the color picker.| Access the value dynamically using JS: `{{components.colorpicker1.selectedColorRGBA}}`|
+| selectedColorHex | Gets updated with HEX color code whenever a user selects a color from the color picker.| Accessible dynamically with JS (for e.g., `{{components.colorpicker1.selectedColorHex}}`).|
+| selectedColorRGB | Gets updated with RGB color code whenever a user selects a color from the color picker. | Accessible dynamically with JS (for e.g., `{{components.colorpicker1.selectedColorRGB}}`).|
+| selectedColorRGBA | Gets updated with RGBA color code whenever a user selects a color from the color picker.| Accessible dynamically with JS (for e.g., `{{components.colorpicker1.selectedColorRGBA}}`).|
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value  </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value  </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | Programmatically determine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | Programmatically determinine the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+----
+
+<div style={{paddingTop:'24px'}}>
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description    </div>                                                                                                                                                                                                                                          | <div style={{ width:"135px"}}> Expected Value </div> |
 |:---------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:---------- |
-| Visibility | Toggle on or off to control the visibility of the widget.| Programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}` |
+| Visibility | Toggle on or off to control the visibility of the component.| Programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Actions
 
@@ -92,19 +90,19 @@ The following actions of the component can be controlled using component specifi
 | setColor | Set the  color. | `color` eg - `#ffffff` |
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
 **Example: Selecting/changing color from the color picker and getting respective hex, rgb and rgba value of selected color**
-- Let's start by creating a new app and then dragging the Color Picker  widget onto the canvas.
-- Click on the Color Picker widget, a picker pop-up will appear, one can select desired color from the picker.
+- Let's start by creating a new app and then dragging the Color Picker component onto the canvas.
+- Click on the Color Picker component, a picker pop-up will appear, one can select desired color from the picker.
 - In order to close the appeared picker pop-up, one need's to move away mouse from the picker pop-up and picker pop-up will fade away.
-- In the Inspector, inside component, look for colorpicker, where one can get respective hex, rgb and rgba color
+- In the Inspector, inside component, look for colorpicker, where one can get respective hex, rgb and rgba color.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/widgets/color-picker/colorpickerinspector-v2.png" alt="ToolJet - Widget Reference - Color Picker" />
+<img className="screenshot-full" src="/img/widgets/color-picker/colorpickerinspector-v2.png" alt="ToolJet - Component Reference - Color Picker" />
 
 </div>
 
-</div>
+</div>

docs/versioned_docs/version-2.50.0-LTS/widgets/date-range-picker.md

@@ -2,31 +2,28 @@
 id: date-range-picker
 title: Date-range Picker
 ---
-# Date-Range Picker
 
-The **Date-Range Picker** widget allows users to select a range of dates.
+The **Date-Range Picker** component allows users to select a range of dates.
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 | <div style={{ width:"135px"}}> Property  </div>    | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| Default start date | Set the start date to be selected by default in the widget |
-| Default end date | Set the start date to be selected by default in the widget |
+| Default start date | Set the start date to be selected by default in the component. |
+| Default end date | Set the start date to be selected by default in the component. |
 | Format | The format of the date selected by the date picker. Default date format is **DD/MM/YYYY**. Date format should be followed as ISO 8601 as mentioned in the [moment documentation](https://momentjs.com/docs/). |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
-Date range picker supports the following events:
-
 | <div style={{ width:"100px"}}> Event  </div>    | <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| On select | The On select event is triggered when the a start date and end date is selected on the picker. Just like any other event on ToolJet, you can set multiple handlers for on select event. |
+| On select | Triggered when a start date and end date are selected. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -34,7 +31,7 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -42,51 +39,53 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:--------- |
-| endDate | This variable holds the date of the endDate selected in the component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
-| startDate | This variable holds the value assigned inside the `code` for custom component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`|
+| endDate | This variable holds the date of the endDate selected in the component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`. |
+| startDate | This variable holds the value assigned inside the `code` for the custom component. | Access the value dynamically using JS: `{{components.customcomponent1.data.title}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
-Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Layout
 
 | <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+---
+
+<div style={{paddingTop:'24px'}}>
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Default Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Border radius | This is to modify the border radius of the date range picker. The field expects only numerical value from `1` to `100`| By default, it's set to `0`|
-| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}`|
-| Disable | This property only accepts boolean values. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
+| Border radius | This is to modify the border radius of the date range picker. The field expects only numerical value from `1` to `100`. | By default, it's set to `0`. |
+| Visibility | This is to control the visibility of the component. If `{{false}}` the component will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}`. |
+| Disable | This property only accepts boolean values. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
 
 :::info
-Any property having `Fx` button next to its field can be **programmatically configured**.
+Any property having **fx** button next to its field can be **programmatically configured**.
 :::
 
-</div>
+</div>

docs/versioned_docs/version-2.50.0-LTS/widgets/file-picker.md

@@ -63,7 +63,7 @@ Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how t
 
 | Actions | Description | How To Access |
 |:--------|:-----------|:------------|
-| <div style={{ width:"100px"}}> clearFiles() </div> | You can clear the selected files on the filepicker component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()`. |
+| <div style={{ width:"100px"}}> clearFiles() </div> | Clears the selected files from the file picker component. | Employ a RunJS query (for e.g., `await components.filepicker1.clearFiles()`) or trigger it using an event. |
 
 </div>
 
@@ -73,7 +73,7 @@ Checkout **[this](/docs/how-to/loading-image-pdf-from-db)** guide to learn how t
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"200px"}}> How To Access </div> |
 |:----------- |:----------- |:-------- |
-| file | This variable holds the array of objects where each object represents the file loaded on the file picker component. Each object has the following keys: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. | The values can be accesed using `{{components.filepicker1.file[0].base64Data}}`. |
+| file | Holds an array of file objects loaded in the file picker, each with properties: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. | Accessible dynamically with JS (for e.g., `{{components.filepicker1.file[0].base64Data}}`). |
 
 </div>
 
@@ -106,12 +106,12 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 

docs/versioned_docs/version-2.50.0-LTS/widgets/image.md

@@ -63,12 +63,12 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 

docs/versioned_docs/version-2.50.0-LTS/widgets/kanban-board.md

@@ -3,17 +3,16 @@ id: kanban
 title: Kanban
 ---
 
-# Kanban
-
 The **Kanban** component allows you to visually organize and prioritize your tasks with a transparent workflow. You can set the number of columns to display, enable/disable the add cards button, and bind data to the cards.
 
 :::info Restricted components
 Certain components are restricted from being placed within the **Card** and **Popout** of the **Kanban** component.
+
 - **Card**: Calendar, Kanban, Form, Tabs, Modal, ListView, Container
 - **Popout**: Calendar, Kanban
-:::
+  :::
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Setting Card Data
 
@@ -28,40 +27,41 @@ For instance, you can set the `Data` property of a Text component on a card usin
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 :::info
+
 - It is mandatory to provide an `id` for each column in the `column data` field. The `id` can be of type `string` or `number`.
 - It is mandatory to provide an `id` and a `columnId` for each card in the `Card data` field. Both `id` and `columnId` can be of type `string` or `number`.
-:::
+  :::
 
 | <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:----------- |:----------- |:----------- |
-| Column data | Enter the columns data - `id` and `title` in the form of array of objects or from a query that returns an array of objects. | `{{[{ "id": "c1", "title": "to do" },{ "id": "c2", "title": "in progress" },{ "id": "c3", "title": "Completed" }]}}` or `{{queries.xyz.data}}` |
-| Card data | Enter the cards data - `id`, `title` and `columnId` in the form of array of objects or from a query that returns an array of objects. | `{{[{ id: "r1", title: "Title 1", description: "Description 1", columnId: "c1" },{ id: "r2", title: "Title 2", description: "Description 2", columnId: "c2" },{ id: "r3", title: "Title 3", description: "Description 3",columnId: "c3" }]}}` or `{{queries.abc.data}}` |
-| Card width | Set the width of the card | This property expects a numerical value. By default, the value is set to `{{302}}` |
-| Card height | Set the width of the card | This property expects a numerical value. By default, the value is set to `{{100}}` |
-| Enable add card | This property allows you to show or hide the **+Add Cards** button on the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the `Fx` next to it |
-| Show delete button | This property allows you to show or hide the **Drop here to delete cards** section at the bottom of the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the `Fx` next to it |
+| :---------------- | :------------------------ | :---------------------------- |
+| Column data  | Enter the columns data - `id` and `title` in the form of array of objects or from a query that returns an array of objects. | `{{[{ "id": "c1", "title": "to do" },{ "id": "c2", "title": "in progress" },{ "id": "c3", "title": "Completed" }]}}` or `{{queries.xyz.data}}`.  |
+| Card data   | Enter the cards data - `id`, `title` and `columnId` in the form of array of objects or from a query that returns an array of objects. | `{{[{ id: "r1", title: "Title 1", description: "Description 1", columnId: "c1" },{ id: "r2", title: "Title 2", description: "Description 2", columnId: "c2" },{ id: "r3", title: "Title 3", description: "Description 3",columnId: "c3" }]}}` or `{{queries.abc.data}}`. |
+| Card width  | Set the width of the card. | This property expects a numerical value. By default, the value is set to `{{302}}`. |
+| Card height | Set the width of the card. | This property expects a numerical value. By default, the value is set to `{{100}}`. |
+| Enable add card | This property allows you to show or hide the **+Add Cards** button on the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the **fx** next to it. |
+| Show delete button | This property allows you to show or hide the **Drop here to delete cards** section at the bottom of the Kanban. | By default its enabled, you can programmatically set value to `{{true}}` or `{{false}}` to enable/disable button by clicking on the **fx** next to it. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
 To add an event, click on the component handle to open the component properties on the right sidebar. Go to the **Events** section and click on **Add handler**.
 
-|  <div style={{ width:"100px"}}> Event </div> |  <div style={{ width:"100px"}}> Description </div> |
-|:----------- |:----------- |
-| On Update | On update event is triggered whenever the card data (id, title, description, or columnID) is updated using the component specific actions. |
-| On add card click | This event is triggered whenever the **Add card** button on the Kanban is clicked. |
-| Card removed | This event is triggered whenever the card is **deleted** from the Kanban by dragging it into the bottom delete box or using component specific action. |
-| Card added | This event is triggered whenever a card is **added** on the Kanban using the component specific action. |
-| Card moved | This event is triggered whenever the card's position is changed on the Kanban or using the component specific action. |
-| Card selected | This event is triggered whenever a card is clicked to open the modal. |
+| <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div>  |
+| :-------------------| :----------------|
+| On Update  | On update event is triggered whenever the card data (id, title, description, or columnID) is updated using the component specific actions.  |
+| On add card click  | This event is triggered whenever the **Add card** button on the Kanban is clicked.  |
+| Card removed  | This event is triggered whenever the card is **deleted** from the Kanban by dragging it into the bottom delete box or using component specific action. |
+| Card added  | This event is triggered whenever a card is **added** on the Kanban using the component specific action. |
+| Card moved  | This event is triggered whenever the card's position is changed on the Kanban or using the component specific action. |
+| Card selected  | This event is triggered whenever a card is clicked to open the modal.  |
 
 Just like any other event on ToolJet, you can set multiple handlers for any of the above mentioned events.
 
@@ -73,40 +73,41 @@ Check the **[Component Specific Action](#component-specific-actions-csa)** avail
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
-| <div style={{ width:"100px"}}> Variable </div>| <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
-|:-------- |:----------- |:---------- |
-| updatedCardData | The `updatedCardData` variable will hold the latest values of all the cards in the Kanban. This variable won't have any values. | It will have values only when any action on any of the card is performed like when the card is moved, added, deleted, or updated. |
-| lastAddedCard | The variable `lastAddedCard` holds the values of the last added card. It holds the following data - `id`, `title`, `description` and `columnId` of the last added card. | Get the values using `{{components.kanban1.lastAddedCard.title}}` |
-| lastRemovedCard | The variable `lastRemovedCard` holds the properties of the card that has been recently deleted from the Kanban. It holds the following data - `id`, `title`, `description` and `columnId` of the recently deleted card. | Get the values using `{{components.kanbanboard1.lastRemovedCard.title}}` |
-| lastCardMovement | The variable `lastCardMovement` holds the properties of the card that has been recently moved from its original position. It holds the following data - `originColumnId`, `destinationColumnId`, `originCardIndex`, `destinationCardIndex` and an object `cardDetails` which includes `id`, `title`, `description` and `columnId` of the moved card. | Get the values using `{{components.kanbanboard1.lastCardMovement.cardDetails.title}}` or `{{components.kanbanboard1.lastCardMovement.destinationCardIndex}}` |
-| lastSelectedCard | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the Kanban. | Get the values using `{{components.kanban1.lastSelectedCard.columnId}}` |
-| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using component specific action). | Get the values using `{{components.kanban1.lastUpdatedCard.columnId}}` |
-| lastCardUpdate | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using component specific action). | Get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}` |
+| <div style={{ width:"100px"}}> Variable </div> | <div style={{ width:"135px"}}> Description </div>   | <div style={{ width:"135px"}}> How To Access </div>   |
+| :------------- | :----------------- | :---------------- |
+| updatedCardData | The `updatedCardData` variable will hold the latest values of all the cards in the Kanban. This variable won't have any values.  | It will have values only when any action on any of the card is performed like when the card is moved, added, deleted, or updated.  |
+| lastAddedCard | The variable `lastAddedCard` holds the values of the last added card. It holds the following data - `id`, `title`, `description` and `columnId` of the last added card.  | Get the values using `{{components.kanban1.lastAddedCard.title}}`.     |
+| lastRemovedCard  | The variable `lastRemovedCard` holds the properties of the card that has been recently deleted from the Kanban. It holds the following data - `id`, `title`, `description` and `columnId` of the recently deleted card.   | Get the values using `{{components.kanbanboard1.lastRemovedCard.title}}`.    |
+| lastCardMovement | The variable `lastCardMovement` holds the properties of the card that has been recently moved from its original position. It holds the following data - `originColumnId`, `destinationColumnId`, `originCardIndex`, `destinationCardIndex` and an object `cardDetails` which includes `id`, `title`, `description` and `columnId` of the moved card. | Get the values using `{{components.kanbanboard1.lastCardMovement.cardDetails.title}}` or `{{components.kanbanboard1.lastCardMovement.destinationCardIndex}}`. |
+| lastSelectedCard  | The variable `lastSelectedCard` holds the `id`, `title`, `columnId`, and `description` of the last selected(clicked to view) card on the Kanban. | Get the values using `{{components.kanban1.lastSelectedCard.columnId}}`.   |
+| lastUpdatedCard | The variable `lastUpdatedCard` holds the `id`, `title`, `description`, and `columnId` of the last updated card(using component specific action).  | Get the values using `{{components.kanban1.lastUpdatedCard.columnId}}`.  |
+| lastCardUpdate  | The variable `lastCardUpdate` holds the old an new values of the property that has been changed in the card(using component specific action).   | Get the values using `{{components.kanban1.lastCardUpdate[0].title.oldValue}}`.    |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
 Following actions of Kanban component can be controlled using the component specific actions(CSA):
 
-| <div style={{ width:"100px"}}> Actions  </div>   | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
-|:----------- |:----------- |:----------- |
-| updateCardData | Update the card data of Kanban component via a component-specific action within any event handler.| Employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})` |
-| moveCard | Move a card from one column to other column on the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.moveCard('card id,'column id')` ex: `await components.kanban1.moveCard('c1','r2')` |
-| addCard | Add a card onto the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.addCard('c1', {title: 'New Title'})` |
-| deleteCard | Delete a card from the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')` |
+| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div>  | <div style={{ width:"135px"}}> How To Access </div>    |
+| :-------------- | :----------------- | :--------------- |
+| updateCardData | Update the card data of Kanban component via a component-specific action within any event handler.  | Employ a RunJS query to execute component-specific actions such as `components.kanban1.updateCardData('c1', {title: 'New Title'})`.        |
+| moveCard  | Move a card from one column to other column on the kanban via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.moveCard('card id,'column id')` ex: `await components.kanban1.moveCard('c1','r2')`. |
+| addCard   | Add a card onto the kanban via a component-specific action within any event handler.  | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.addCard('c1', {title: 'New Title'})`.  |
+| deleteCard   | Delete a card from the kanban via a component-specific action within any event handler.   | Employ a RunJS query to execute component-specific actions such as `await components.kanban1.deleteCard('card id')` ex: `await components.kanban1.deleteCard('c2')`.  |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
+
 ### Tooltip
 
 A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
@@ -115,25 +116,27 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div>   |
+| :------------ | :------------ | :-------------- |
+| Show on desktop  | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+----
+
+<div style={{paddingTop:'24px'}}>
 
 ## Styles
 
-| <div style={{ width:"100px"}}> Style  </div>      | <div style={{ width:"100px"}}> Description  </div>                                                                                                                                                                 |
-|:------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Disable      | If disabled or set to `{{false}}` the component will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}` .                        |
-| Visibility   | This is to control the visibility of the component. If `{{false}}`/disabled the component will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
-| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker.                                  |
+| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div>  |
+| :------------- | :------------------ |
+| Disable   | If disabled or set to `{{false}}` the component will be locked and becomes non-functional. By default, its disabled i.e. its value is set to `{{true}}`.  |
+| Visibility  | This is to control the visibility of the component. If `{{false}}`/disabled the component will not visible after the app is deployed. By default, it's enabled (set to `{{true}}`). |
+| Accent color | You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker.  |
 
 </div>

docs/versioned_docs/version-2.50.0-LTS/widgets/link.md

@@ -11,9 +11,9 @@ The **Link** component allows you to add a hyperlink and navigate to the externa
 
 | <div style={{ width:"100px"}}> Properties </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:----------- |:----------- |:-------------- |
-| Link target | This property sets the URL where the user needs to be taken on clicking the link. | example: `https://dev.to/tooljet` or `{{queries.xyz.data.url}}` | 
-| Link text | This property sets the text for the Link component.  | example: **Click here** or **Open webpage** | 
-| Target type | This property specifies the link to be opened in the same tab or new tab on clicking the link. | Options: **New Tab** & **Same Tab** |
+| Link target | This property sets the URL where the user needs to be taken on clicking the link. | example: `https://dev.to/tooljet` or `{{queries.xyz.data.url}}`. | 
+| Link text | This property sets the text for the Link component.  | example: **Click here** or **Open webpage**. | 
+| Target type | This property specifies the link to be opened in the same tab or new tab on clicking the link. | Options: **New Tab** & **Same Tab**. |
 
 </div>
 
@@ -23,8 +23,8 @@ The **Link** component allows you to add a hyperlink and navigate to the externa
 
 |  <div style={{ width:"100px"}}> Event </div> |  <div style={{ width:"100px"}}> Description </div> |
 |:----------- |:----------- |
-| On click | **On Click** event is triggered when the link is clicked. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
-| On hover | **On Hover** event is triggered when the link is hovered. Just like any other event on ToolJet, you can set multiple handlers for on click event. |
+| On click | Triggered when the link is clicked. |
+| On hover | Triggered when the cursor hovers over the link. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -40,7 +40,7 @@ The following actions of the link component can be controlled using the componen
 
 | <div style={{ width:"100px"}}> Actions  </div>   | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:------------ |
-| click | You can trigger the click action of the Link component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.link1.click()`. |
+| click | Triggers click action of the link component. | Employ a RunJS query to execute component-specific actions such as `await components.link1.click()` or trigger it using an event. |
 
 </div>
 
@@ -65,12 +65,12 @@ Under the **General** accordion, you can set the value in the string format. Now
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
@@ -84,7 +84,7 @@ Under the **General** accordion, you can set the value in the string format. Now
 |:----------- |:----------- | 
 | Text color |  You can change the background color of the text by entering the Hex color code or choosing a color of your choice from the color picker. |
 | Text size | By default, the text size is set to 14. You can enter any value from 1-100 to set a custom text size. |
-| Underline | You can change the underline of the text in the following ways: **on-hover (default), never, always** |
+| Underline | You can change the underline of the text in the following ways: **on-hover (default), never, always**. |
 | Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not visible after the app is deployed. By default, it's set to `{{true}}`. |
 
 :::info

docs/versioned_docs/version-2.50.0-LTS/widgets/map.md

@@ -15,21 +15,21 @@ If you are utilizing the self-hosted version of ToolJet, it is necessary to conf
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Properties
 
 | <div style={{ width:"100px"}}> Properties   </div>   | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:----------- |:----------- |:------------------ |
-| Initial location | default location when the app is loaded initially. | An object containing the **latitude** and **longitude** as key value pairs. ex: `{{ {"lat": 40.7128, "lng": -73.935242} }}` |
-| Default markers | Number of markers that should be shown on the map | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}` |
-| Polygon points | Create a polygon on the map using the given coordinates. | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}` |
-| Add new markers | On clicking the map, a new marker will be added to the map. | By default, it's set to `On`. Toggle `off` to disable adding new markers on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
-| Search for places | Enable to show the search box on the map. | By default, it's set to `On`. Toggle `off` to disable the search box on the map. Click `Fx` to set `{{true}}` or `{{false}}` programmatically. |
+| Initial location | default location when the app is loaded initially. | An object containing the **latitude** and **longitude** as key value pairs. ex: `{{ {"lat": 40.7128, "lng": -73.935242} }}`. |
+| Default markers | Number of markers that should be shown on the map. | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}`. |
+| Polygon points | Create a polygon on the map using the given coordinates. | An array of objects containing the coordinates. ex: `{{ [{"lat": 40.7128, "lng": -73.935242}, {"lat": 40.7128, "lng": -73.935242}] }}`. |
+| Add new markers | On clicking the map, a new marker will be added to the map. | By default, it's set to `On`. Toggle `off` to disable adding new markers on the map. Click **fx** to set `{{true}}` or `{{false}}` programmatically. |
+| Search for places | Enable to show the search box on the map. | By default, it's set to `On`. Toggle `off` to disable the search box on the map. Click **fx** to set `{{true}}` or `{{false}}` programmatically. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Events
 
@@ -46,7 +46,7 @@ For detailed information about all the available **Actions**, please refer to th
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Component Specific Actions (CSA)
 
@@ -54,11 +54,11 @@ Following actions of Map component can be controlled using the component specifi
 
 | <div style={{ width:"100px"}}> Actions  </div>   | <div style={{ width:"135px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:---------- |:---------- |:------- |
-| setLocation | Set the marker's location on map using latitude and longitude values as parameters via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)`  |
+| setLocation | Set the marker's location on map using latitude and longitude values as parameters via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `component.map1.setLocation(40.7128, -73.935242)`.  |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## Exposed Variables
 
@@ -67,18 +67,18 @@ Exposed variables can be used to get data from the component.
 | <div style={{ width:"100px"}}> Variables </div>   | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:--------- |
 | center | This variable will hold the latitude, longitude and the google map url value. |
-| center.`lat` | This variable holds the latitude value of the marker on the Map component. | Access the value dynamically using JS: `{{components.map1.center.lat}}`|
-| center.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. | Access the value dynamically using JS: `{{components.map1.center.lng}}`|
-| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the Map component. | Access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`|
-| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. | Access the values dynamically using `{{components.map1.markers[1].lat}}` |
-| selectedMarker | Object with the marker selected by the user |
-| bounds | It constructs a rectangle from the points at its south-west and north-east corners |
-| bounds.northEast | It holds the latitude and longitude of the north-east corner of the rectangle.| Access the value dynamically using JS: `{{components.map1.bounds.northEast.lat}}` or `{{components.map1.bounds.northEast.lng}}` |
-| bounds.southWest | It holds the latitude and longitude of the south-west corner of the rectangle. | Access the value dynamically using JS: `{{components.map1.bounds.southWest.lat}}` or `{{components.map1.bounds.southWest.lng}}` |
+| center.`lat` | This variable holds the latitude value of the marker on the Map component. | Access the value dynamically using JS: `{{components.map1.center.lat}}`. |
+| center.`lng` | This variable gets updated with RGB color code whenever a user selects a color from the color picker. | Access the value dynamically using JS: `{{components.map1.center.lng}}`. |
+| center.`googleMapUrl` | This variable holds the URL of the location where the center marker is placed on the Map component. | Access the value dynamically using JS: `{{components.map1.center.googleMapUrl}}`. |
+| markers | The markers variable will hold the value only if `add new markers` is enabled from the map properties. Each marker is an object and will have `lat` and `lng` keys. | Access the values dynamically using `{{components.map1.markers[1].lat}}`. |
+| selectedMarker | Object with the marker selected by the user. |
+| bounds | It constructs a rectangle from the points at its south-west and north-east corners. |
+| bounds.northEast | It holds the latitude and longitude of the north-east corner of the rectangle.| Access the value dynamically using JS: `{{components.map1.bounds.northEast.lat}}` or `{{components.map1.bounds.northEast.lng}}`. |
+| bounds.southWest | It holds the latitude and longitude of the south-west corner of the rectangle. | Access the value dynamically using JS: `{{components.map1.bounds.southWest.lat}}` or `{{components.map1.bounds.southWest.lng}}`. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
 ## General
 ### Tooltip
@@ -87,25 +87,27 @@ A Tooltip is often used to specify the extra information when the user hovers th
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
-<div style={{paddingTop:'24px', paddingBottom:'24px'}}>
+<div style={{paddingTop:'24px'}}>
+
+----
 
 ## Styles
 
 | <div style={{ width:"100px"}}> Properties </div>     | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:----------- |:----------- |:------------------ |
-| Visibility | Toggle on or off to control the visibility of the component. | You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the component will not be visible after the app is release. By default, it's set to `{{true}}`. |
-| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. | You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
-| Box shadow | Add a shadow effect to the component by providing values to X, Y, Blur, Spread and Color. | You can also programmatically set the value by clicking on the `Fx` button next to it. Ex: `{{"x": 0, "y": 0, "blur": 0, "spread": 0, "color": "#000000"}}` | 
+| Visibility | Toggle on or off to control the visibility of the component. | You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is release. By default, it's set to `{{true}}`. |
+| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. | You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. By default, its value is set to `{{false}}`. |
+| Box shadow | Add a shadow effect to the component by providing values to X, Y, Blur, Spread and Color. | You can also programmatically set the value by clicking on the **fx** button next to it. Ex: `{{"x": 0, "y": 0, "blur": 0, "spread": 0, "color": "#000000"}}`. | 
 
-</div>
+</div>

docs/versioned_docs/version-2.50.0-LTS/widgets/pagination.md

@@ -2,7 +2,6 @@
 id: pagination
 title: Pagination
 ---
-# Pagination
 
 **Pagination** enables the user to select a specific page from a range of pages. It is used to separate the content into discrete pages.
 
@@ -23,7 +22,7 @@ You can club the Pagination component with the List View component.
 
 <div style={{paddingTop:'24px'}}>
 
-## Event 
+## Event
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 |:------------------|:---------------------|
@@ -43,10 +42,10 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 ## Exposed Variables
 
-| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div>|
+| <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div> |
 |:----------- |:----------- |:--------- |
-| totalPages | This variable holds the value of the `Number of Pages` set from the Pagination component properties. | Access the value dynamically using JS: `{{components.pagination1.totalPages}}`. |
-| currentPageIndex | This variable will hold the index of the currently selected option on the Pagination component. | Access the value dynamically using JS: `{{components.pagination1.currentPageIndex}}`. |
+| totalPages | Holds the value of the `Number of Pages` set from the Pagination component properties.| Accessible dynamically with JS(for e.g., `{{components.pagination1.totalPages}}`).|
+| currentPageIndex | Holds the index of the currently selected option on the Pagination component. | Accessible dynamically with JS(for e.g., `{{components.pagination1.currentPageIndex}}`). |
 
 </div>
 
@@ -63,12 +62,12 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+|:------------ |:-------------|:--------- |
+| Show on desktop  | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
@@ -78,10 +77,10 @@ Under the <b>General</b> accordion, you can set the value in the string format.
 
 ## Styles
 
-| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}>  Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
+| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
 |:------------ |:-------------|:--------- |
 | Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}`. |
-| Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
+| Disable  | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
 
 :::info
 Any property having **fx** button next to its field can be **programmatically configured**.

docs/versioned_docs/version-2.50.0-LTS/widgets/qr-scanner.md

@@ -15,7 +15,7 @@ You might have to stick to the Safari browser in IOS as camera access is restric
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
 |:------------------|:---------------------|
-| On Detect | Triggers whenever the component successfully scans a QR code. |
+| On detect | Triggers whenever the component successfully scans a QR code. |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -44,7 +44,7 @@ There are currently no CSA (Component-Specific Actions) implemented to regulate
 
 | <div style={{ width:"100px"}}> Variables </div> | <div style={{ width:"200px"}}> Description </div> | <div style={{ width:"135px"}}> How To Access </div>|
 |:----------- |:----------- |:--------- |
-| lastDetectedValue | This variable holds the data contained in the last QR code scanned by the component. | To fetch the data use `{{components.qrscanner1.lastDetectedValue}}`. |
+| lastDetectedValue | Holds the data from the last QR code scanned by the component.  | Accessible dynamically with JS (for e.g., `{{components.qrscanner1.lastDetectedValue}}`). |
 
 </div>
 
@@ -63,12 +63,12 @@ Now hovering over the component will display the string as the tooltip.
 
 <div style={{paddingTop:'24px'}}>
 
-## Layout
+## Devices
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
 |:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}`. |
+| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
+| Show on mobile  | Makes the component visible in mobile view.  | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
 
 </div>
 
@@ -83,4 +83,4 @@ Now hovering over the component will display the string as the tooltip.
 | Visibility | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed. | By default, it's set to `{{true}}`. |
 | Disable | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
 
-</div>
+</div>

docs/versioned_docs/version-2.50.0-LTS/widgets/radio-button.md

@@ -2,32 +2,33 @@
 id: radio-button
 title: Radio Button
 ---
+
 # Radio Button
 
-The **Radio Button** widget can be used to select one option from a group of options.
+The **Radio Button** component can be used to select one option from a group of options.
 
 :::tip
 Radio Buttons are preferred when the list of options is less than six, and all the options can be displayed at once.
 :::
 
 :::info
-For more than six options, consider using **[Dropdown](/docs/widgets/dropdown)** widget.
+For more than six options, consider using **[Dropdown](/docs/widgets/dropdown)** component.
 :::
 
 ## Properties
 
-| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | 
-|:------------ |:-------------|
-| Label | The text is to be used as the label for the radio button. This field expects a `String` value. |
-| Default value | The value of the default option. |
-| Option values | List of values for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.value)}}` or populate it with sample values `{{[true, false]}}`. |
-| Option labels | List of labels for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.label)}}` or populate it with sample values `{{["yes", "no"]}}`. |
+| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div>                                                                                                                                                     |
+| :--------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Label                                          | The text is to be used as the label for the radio button. This field expects a `String` value.                                                                                                        |
+| Default value                                  | The value of the default option.                                                                                                                                                                      |
+| Option values                                  | List of values for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.value)}}` or populate it with sample values `{{[true, false]}}`. |
+| Option labels                                  | List of labels for different items/options. Refer your query data with dynamic variables `{{queries.datasource.data.map(item => item.label)}}` or populate it with sample values `{{["yes", "no"]}}`. |
 
 ## Event
 
 | <div style={{ width:"100px"}}> Event </div> | <div style={{ width:"100px"}}> Description </div> |
-|:------------------|:---------------------|
-| On select | This event is triggered when an option is clicked. |
+| :------------------------------------------ | :------------------------------------------------ |
+| On select                                   | Triggers whenever the user clicks an option.      |
 
 :::info
 Check [Action Reference](/docs/category/actions-reference) docs to get the detailed information about all the **Actions**.
@@ -37,33 +38,36 @@ Check [Action Reference](/docs/category/actions-reference) docs to get the detai
 
 The following actions of the component can be controlled using component specific actions(CSA):
 
-| <div style={{ width:"100px"}}> Actions  </div> |<div style={{ width:"135px"}}>  Description </div> | <div style={{ width:"135px"}}> How To Access </div>
-|:----------- |:----------- |:------- |
-| selectOption | Select an option from the radio buttons via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
+| <div style={{ width:"100px"}}> Actions </div> | <div style={{ width:"135px"}}> Description </div>                                                 | <div style={{ width:"135px"}}> How To Access </div>                                                                     |
+| :-------------------------------------------- | :------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------- |
+| selectOption                                  | Select an option from the radio buttons via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as: `await components.radiobutton1.selectOption('one')` |
 
 ## Exposed Variables
 
 There are currently no exposed variables for the component.
 
 ## General
+
 ### Tooltip
 
-A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
+A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.
 
-Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.
+Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
 
 ## Layout
 
-| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div> |
-|:--------------- |:----------------------------------------- | :------------------------------------------------------------------------------------------------------------- |
-| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
-| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
+| <div style={{ width:"100px"}}> Layout </div> | <div style={{ width:"100px"}}> Description </div> | <div style={{ width:"135px"}}> Expected Value </div>                                                            |
+| :------------------------------------------- | :------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------- |
+| Show on desktop                              | Toggle on or off to display desktop view.         | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
+| Show on mobile                               | Toggle on or off to display mobile view.          | You can programmatically determining the value by clicking on **fx** to set the value `{{true}}` or `{{false}}` |
+
+---
 
 ## Styles
 
-| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}>  Description </div> | <div style={{ width:"100px"}}> Default Value </div> |
-|:------------ |:-------------|:--------- |
-| Text color | Change the color of the text in the widget by providing the `Hex color code` or by choosing the color of your choice from the color picker. |  |
-| Active color | Change the color of active radio button by providing the `Hex color code` or by choosing the color of your choice from the color picker. |  |
-| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. | By default, it's set to `{{true}}` |
-| Disable | This is `off` by default, toggle `on` the switch to lock the widget and make it non-functional. You can also programmatically set the value by clicking on the `Fx` button next to it. If set to `{{true}}`, the widget will be locked and becomes non-functional. | By default, its value is set to `{{false}}` |
+| <div style={{ width:"100px"}}> Style </div> | <div style={{ width:"100px"}}> Description </div>                                                                                                                                                                                                                          | <div style={{ width:"100px"}}> Default Value </div> |
+| :------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------- |
+| Text color                                  | Change the color of the text in the component by providing the `Hex color code` or by choosing the color of your choice from the color picker.                                                                                                                             |                                                     |
+| Active color                                | Change the color of active radio button by providing the `Hex color code` or by choosing the color of your choice from the color picker.                                                                                                                                   |                                                     |
+| Visibility                                  | Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the **fx** button next to it. If `{{false}}` the component will not be visible after the app is deployed.                                            | By default, it's set to `{{true}}`                  |
+| Disable                                     | This is `off` by default, toggle `on` the switch to lock the component and make it non-functional. You can also programmatically set the value by clicking on the **fx** button next to it. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`         |