Merge branch develop into test-copy-appdef-2.0

.gitignore

@@ -36,3 +36,4 @@
 /frontend/cypress/videos
 
 .idea/*
+ti-*

.version

@@ -1 +1 @@
-2.13.1
+2.17.0

README.md

@@ -1,4 +1,6 @@
-ToolJet is an **open-source low-code framework** to build and deploy internal tools quickly with minimal engineering effort. ToolJet's drag and drop frontend builder allows you to build complicated responsive frontends within minutes. You can also connect to your data sources, such as databases ( PostgreSQL, MongoDB, Elasticsearch & more), API endpoints (ToolJet supports importing OpenAPI spec & OAuth2 authorization), SaaS tools (Stripe, Slack, Google Sheets, Airtable, Notion & more) and object storage services ( S3, GCS, Minio, etc ) to fetch and write data.
+ToolJet is an **open-source low-code framework** to build and deploy internal tools with minimal engineering effort. ToolJet's drag and drop frontend builder allows you to create complex, responsive frontends within minutes. Additionally, you can integrate various data sources, including databases like PostgreSQL, MongoDB, and Elasticsearch; API endpoints with OpenAPI spec and OAuth2 support; SaaS tools such as Stripe, Slack, Google Sheets, Airtable, and Notion; as well as object storage services like S3, GCS, and Minio, to fetch and write data.
+
+⭐ If you find ToolJet useful, please consider giving us a star on GitHub! Your support helps us continue to innovate and deliver exciting features.
 
 ![Docker Cloud Build Status](https://img.shields.io/docker/cloud/build/tooljet/tooljet-ce)
 ![GitHub contributors](https://img.shields.io/github/contributors/tooljet/tooljet)
@@ -13,10 +15,8 @@ ToolJet is an **open-source low-code framework** to build and deploy internal to
 
 <p align="center">
     <img src="https://user-images.githubusercontent.com/7828962/211444352-4d6d2e4a-13c9-4980-9e16-4aed4af9811b.png"/>
-
 </p>
 
-
 <p align="center">
   <kbd>
     <img src="https://user-images.githubusercontent.com/7828962/202402863-2851a072-9dca-4b8b-9473-0d044373928b.png"/>
@@ -45,31 +45,33 @@ ToolJet is an **open-source low-code framework** to build and deploy internal to
 
 ## All features
 
-- **Visual app builder:** 40+ built-in responsive widgets such as Tables, Charts, Lists, Forms, Progressbars, and more.
-- **ToolJet Database:** In-built no-code database.
-- **Multi-Page:** Build an application with as many pages as you want.
-- **Multiplayer editing:** multiple users can use the app builder at the same time.
-- **40+ data sources:** connect to external databases, cloud storages and APIs.
-- **Desktop & mobile:** layout widths can be customised to support different screens.
-- **Self-host:** (supports Docker, Kubernetes, Heroku, AWS EC2, Google Cloud Run, and more).
-- **Collaborate:** add comments anywhere on the canvas and tag your team members.
-- **Extend with plugins:** use our [commandline tool](https://www.npmjs.com/package/@tooljet/cli) to easily bootstrap new connectors.
-- **Version control:** every application have different versions with proper release cycle.
-- **Run JS & Python code:** ability custom JavaScript & Python snippets
-- **Granular access control** on group-level and app-level.
-- **Low-code:** write JS code almost anywhere in the builder. For example, the color property of text can be set to `status === 'success' ? 'green' : 'red'`
-- **No-code query editors:** for all supported data sources.
-- **Join and transform data:** transform query results using just JavaScript/Python code.
+- **Visual App Builder:** 40+ built-in responsive components, including Tables, Charts, Lists, Forms, and Progress Bars.
+- **ToolJet Database:** Built-in no-code database.
+- **Multi-Page:** Build an application with multiple pages.
+- **Multiplayer editing:** Allows simultaneous app building by multiple developers.
+- **40+ data sources:** Integrate with external databases, cloud storage, and APIs.
+- **Desktop & mobile:** Customize layout widths to fit various screen sizes.
+- **Self-host:** Supports Docker, Kubernetes, Heroku, AWS EC2, Google Cloud Run, and more.
+- **Collaborate:** Add comments anywhere on the canvas and tag your team members.
+- **Extend with plugins:** Use our [command-line tool](https://www.npmjs.com/package/@tooljet/cli) to easily bootstrap new connectors.
+- **Version control:** Manage multiple application versions with a structured release cycle.
+- **Run JS & Python code:** Execute custom JavaScript and Python snippets.
+- **Granular access control:** Set permissions at both group and app levels.
+- **Low-code:** Use JS code almost anywhere within the builder, such as setting text color based on status with 
+`status === 'success' ? 'green' : 'red`.
+- **No-code query editors:** Query Editors available for all supported data sources.
+- **Join and transform data:** Transform query results using JavaScript or Python code.
 - **Secure:** All the credentials are securely encrypted using `aes-256-gcm`.
-- **Doesn't store data:** ToolJet acts only as a proxy and doesn't store any data.
-- **SSO:** Supports multiple SSO providers
+- **Data Privacy:** ToolJet serves solely as a proxy and does not store data.
+- **SSO:** Supports multiple Single Sign-On providers.
 
 <hr>
 
 ## Quickstart
 The easiest way to get started with ToolJet is by creating a [ToolJet Cloud](https://tooljet.com) account. ToolJet Cloud offers a hosted solution of ToolJet. If you want to self-host ToolJet, kindly proceed to [deployment documentation](https://docs.tooljet.com/docs/setup/).
 
-You can deploy ToolJet on Heroku for free using the one-click-deployment button only until **28th November 2022**.
+You can deploy ToolJet on Heroku using one-click-deployment.
+
 <p align="center">
   <a href="https://heroku.com/deploy?template=https://github.com/tooljet/tooljet/tree/main"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku" height=32></a>
   <a href="https://cloud.digitalocean.com/apps/new?repo=https://github.com/ToolJet/ToolJet/tree/main"><img src="https://www.deploytodo.com/do-btn-blue.svg" alt="Deploy to DigitalOcean" height=32></a>
@@ -89,32 +91,41 @@ docker run \
 
 ## Tutorials and examples
 
-[GitHub contributor leaderboard using ToolJet](https://blog.tooljet.io/building-a-github-contributor-leaderboard-using-tooljet/)<br>
-[Cryptocurrency dashboard using ToolJet](https://blog.tooljet.com/how-to-build-a-cryptocurrency-dashboard-in-10-minutes/)<br>
-[WhatsApp CRM using ToolJet](https://blog.tooljet.com/build-a-whatsapp-crm-using-tooljet-within-10-mins/)<br>
-[AWS S3 file explorer](https://blog.tooljet.com/building-an-app-to-view-and-upload-files-in-aws-s3-bucket/)<br>
+[Time Tracker Application](https://docs.tooljet.com/docs/#quickstart-guide)<br>
+[Build your own CMS using low-code](https://blog.tooljet.com/build-cms-using-lowcode-and-mongodb/)<br>
+[AWS S3 Browser](https://blog.tooljet.com/build-an-aws-s3-broswer-with-tooljet/)<br>
 
 ## Documentation
 Documentation is available at https://docs.tooljet.com.
 
 - [Getting Started](https://docs.tooljet.com)<br>
-- [Datasource Reference](https://docs.tooljet.com/docs/data-sources/airtable/)<br>
-- [Widget Reference](https://docs.tooljet.com/docs/widgets/button)
+- [Data source Reference](https://docs.tooljet.com/docs/data-sources/airtable/)<br>
+- [Component Reference](https://docs.tooljet.com/docs/widgets/button)
 
 ## Self-hosted
-You can use ToolJet cloud for a fully managed solution. If you want to self-host ToolJet, we have guides on deploying ToolJet on Kubernetes, AWS EC2, Docker, Heroku and more.
+You can use ToolJet Cloud for a fully managed solution. If you want to self-host ToolJet, we have guides on deploying ToolJet on Kubernetes, AWS EC2, Docker, Heroku and more.
 
 | Provider  | Documentation |
-| ------------- | ------------- |
+| :------------- | :------------- |
+| Digital Ocean | [Link](https://docs.tooljet.com/docs/setup/digitalocean)  |
+| Docker  | [Link](https://docs.tooljet.com/docs/setup/docker)   |
+| Heroku  | [Link](https://docs.tooljet.com/docs/setup/heroku)  |
 | AWS EC2 | [Link](https://docs.tooljet.com/docs/setup/ec2)  |
-| AWS EKS (Kubernetes) | [Link](https://docs.tooljet.com/docs/setup/kubernetes)   |
 | AWS ECS | [Link](https://docs.tooljet.com/docs/setup/ecs)   |
+| OpenShift | [Link](https://docs.tooljet.com/docs/setup/openshift)   |
+| Helm | [Link](https://docs.tooljet.com/docs/setup/helm)   |
+| AWS EKS (Kubernetes) | [Link](https://docs.tooljet.com/docs/setup/kubernetes)   |
 | GCP GKE (Kubernetes) | [Link](https://docs.tooljet.com/docs/setup/kubernetes-gke)   |
 | Azure AKS (Kubernetes) | [Link](https://docs.tooljet.com/docs/setup/kubernetes-aks)   |
-| Heroku  | [Link](https://docs.tooljet.com/docs/setup/heroku)  |
-| Docker  | [Link](https://docs.tooljet.com/docs/setup/docker)   |
+| Azure Container | [Link](https://docs.tooljet.com/docs/setup/azure-container)   |
 | Google Cloud Run  | [Link](https://docs.tooljet.com/docs/setup/google-cloud-run)   |
+| Deploying ToolJet client  | [Link](https://docs.tooljet.com/docs/setup/client)   |
+| Deploying ToolJet on a Subpath  | [Link](https://docs.tooljet.com/docs/setup/tooljet-subpath/)   |
 
+## Marketplace 
+ToolJet can now be found on both AWS and Azure Marketplaces, making it simpler than ever to access and deploy our app-building platform.
+
+Find ToolJet on AWS Marketplace [here](https://aws.amazon.com/marketplace/pp/prodview-fxjto27jkpqfg?sr=0-1&ref_=beagle&applicationId=AWSMPContessa) and explore seamless integration on Azure Marketplace [here](https://azuremarketplace.microsoft.com/en-us/marketplace/apps/tooljetsolutioninc1679496832216.tooljet?tab=Overview).
 
 ## Community support
 For general help using ToolJet, please refer to the official [documentation](https://docs.tooljet.com/docs/). For additional help, you can use one of these channels to ask a question:
@@ -124,13 +135,13 @@ For general help using ToolJet, please refer to the official [documentation](htt
 - [Twitter](https://twitter.com/ToolJet) - Get the product updates easily.
 
 ## Roadmap
-Check out our [roadmap](https://github.com/ToolJet/ToolJet/projects/2) to get informed of the latest features released and the upcoming ones.
+Check out our [roadmap](https://github.com/ToolJet/ToolJet/projects/2) to stay updated on recently released features and to learn about what's coming next.
 
 ## Branching model
 We use the git-flow branching model. The base branch is `develop`. If you are looking for a stable version, please use the main branch or tags labeled as v1.x.x.
 
 ## Contributing
-Kindly read our [Contributing Guide](CONTRIBUTING.md) to learn and understand about our development process, how to propose bug fixes and improvements, and how to build and test your changes to ToolJet. <br>
+Kindly read our [Contributing Guide](CONTRIBUTING.md) to familiarize yourself with ToolJet's development process, how to suggest bug fixes and improvements, and the steps for building and testing your changes. <br>
 
 ## Contributors
 <a href="https://github.com/tooljet/tooljet/graphs/contributors">

cypress-tests/cypress.config.js

@@ -19,9 +19,9 @@ module.exports = defineConfig({
   trashAssetsBeforeRuns: true,
 
   e2e: {
-    setupNodeEvents (on, config) {
+    setupNodeEvents(on, config) {
       on("task", {
-        readPdf (pathToPdf) {
+        readPdf(pathToPdf) {
           return new Promise((resolve) => {
             const pdfPath = path.resolve(pathToPdf);
             let dataBuffer = fs.readFileSync(pdfPath);
@@ -33,7 +33,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        readXlsx (filePath) {
+        readXlsx(filePath) {
           return new Promise((resolve, reject) => {
             try {
               let dataBuffer = fs.readFileSync(filePath);
@@ -48,7 +48,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        deleteFolder (folderName) {
+        deleteFolder(folderName) {
           return new Promise((resolve, reject) => {
             if (fs.existsSync(folderName)) {
               rmdir(folderName, { maxRetries: 10, recursive: true }, (err) => {
@@ -66,7 +66,7 @@ module.exports = defineConfig({
       });
 
       on("task", {
-        updateId ({ dbconfig, sql }) {
+        updateId({ dbconfig, sql }) {
           const client = new pg.Pool(dbconfig);
           return client.query(sql);
         },
@@ -79,8 +79,8 @@ module.exports = defineConfig({
     baseUrl: "http://localhost:8082",
     specPattern: "cypress/e2e/**/*.cy.js",
     downloadsFolder: "cypress/downloads",
-    numTestsKeptInMemory: 25,
-    redirectionLimit: 10,
+    numTestsKeptInMemory: 10,
+    redirectionLimit: 5,
     experimentalRunAllSpecs: true,
     trashAssetsBeforeRuns: true,
     experimentalMemoryManagement: true,

cypress-tests/cypress/commands/apiCommands.js

@@ -0,0 +1,141 @@
+Cypress.Commands.add(
+  "apiLogin",
+  (userEmail = "dev@tooljet.io", userPassword = "password", workspaceId = '') => {
+    cy.request({
+      url: `http://localhost:3000/api/authenticate/${workspaceId}`,
+      method: "POST",
+      body: {
+        email: userEmail,
+        password: userPassword,
+      },
+    })
+      .its("body")
+      .then((res) => {
+        Cypress.env("workspaceId", res.current_organization_id);
+        Cypress.log({
+          name: "Api login",
+          displayName: "LOGIN: ",
+          message: `: Success`,
+        });
+      });
+  }
+);
+
+Cypress.Commands.add("apiCreateGDS", (url, name, kind, options) => {
+  cy.getCookie("tj_auth_token").then((cookie) => {
+    cy.request(
+      {
+        method: "POST",
+        url: url,
+        headers: {
+          "Tj-Workspace-Id": Cypress.env("workspaceId"),
+          Cookie: `tj_auth_token=${cookie.value}`,
+        },
+        body: {
+          name: name,
+          kind: kind,
+          options: options,
+          scope: "global",
+        },
+      },
+      { log: false }
+    ).then((response) => {
+      expect(response.status).to.equal(201);
+
+      Cypress.log({
+        name: "Create Data Source",
+        displayName: "Data source created",
+        message: `:\nDatasource: '${kind}',\nName: '${name}'`,
+      });
+    });
+  });
+});
+
+Cypress.Commands.add("apiCreateApp", (appName = "testApp") => {
+  cy.window({ log: false }).then((win) => {
+    win.localStorage.setItem("walkthroughCompleted", "true");
+  });
+  cy.getCookie("tj_auth_token", { log: false }).then((cookie) => {
+    Cypress.env("authToken", `tj_auth_token=${cookie.value}`);
+    cy.request({
+      method: "POST",
+      url: "http://localhost:3000/api/apps",
+      headers: {
+        "Tj-Workspace-Id": Cypress.env("workspaceId"),
+        Cookie: `tj_auth_token=${cookie.value}`,
+      },
+      body: {
+        created_at: "",
+        id: "",
+        is_maintenance_on: false,
+        is_public: null,
+        name: appName,
+        organization_id: "",
+        updated_at: "",
+        user_id: "",
+      },
+    }).then((response) => {
+      expect(response.status).to.equal(201);
+      Cypress.env("appId", response.allRequestResponses[0]["Response Body"].id);
+      Cypress.log({
+        name: "App create",
+        displayName: "APP CREATED",
+        message: `: ${response.body.name}`,
+      });
+    });
+  });
+});
+
+Cypress.Commands.add("apiDeleteApp", (appId = Cypress.env("appId")) => {
+  cy.request(
+    {
+      method: "DELETE",
+      url: `http://localhost:3000/api/apps/${Cypress.env("appId")}`,
+      headers: {
+        "Tj-Workspace-Id": Cypress.env("workspaceId"),
+        Cookie: Cypress.env("authToken"),
+      },
+    },
+    { log: false }
+  ).then((response) => {
+    expect(response.status).to.equal(200);
+    Cypress.log({
+      name: "App Delete",
+      displayName: "APP DELETED",
+      message: `: ${Cypress.env("appId")}`,
+    });
+  });
+});
+
+Cypress.Commands.add(
+  "openApp",
+  (
+    appId = Cypress.env("appId"),
+    componentSelector = "[data-cy='empty-editor-text']"
+  ) => {
+    cy.window({ log: false }).then((win) => {
+      win.localStorage.setItem("walkthroughCompleted", "true");
+    });
+    cy.visit(`/${Cypress.env("workspaceId")}/apps/${Cypress.env("appId")}`);
+    cy.get(componentSelector, { timeout: 10000 });
+  }
+);
+
+// cy.apiLogin();
+// cy.apiCreateApp();
+// cy.apiCreateGDS(
+//   "http://localhost:3000/api/v2/data_sources",
+//   "aaaaaadish",
+//   "postgresql",
+//   [
+//     { key: "host", value: "localhost" },
+//     { key: "port", value: 5432 },
+//     { key: "database", value: "" },
+//     { key: "username", value: "dev@tooljet.io" },
+//     { key: "password", value: "password", encrypted: true },
+//     { key: "ssl_enabled", value: true, encrypted: false },
+//     { key: "ssl_certificate", value: "none", encrypted: false },
+//   ]
+// );
+
+

cypress-tests/cypress/commands/commands.js

@@ -11,9 +11,7 @@ Cypress.Commands.add(
     cy.clearAndType(commonSelectors.workEmailInputField, email);
     cy.clearAndType(commonSelectors.passwordInputField, password);
     cy.get(commonSelectors.signInButton).click();
-    cy.intercept("GET", "api/library_apps").as("apps");
-    cy.wait("@apps");
-    cy.wait(4000);
+    cy.wait(2000);
     cy.get(commonSelectors.homePageLogo).should("be.visible");
   }
 );
@@ -93,9 +91,7 @@ Cypress.Commands.add("appUILogin", () => {
   cy.clearAndType(commonSelectors.workEmailInputField, "dev@tooljet.io");
   cy.clearAndType(commonSelectors.passwordInputField, "password");
   cy.get(commonSelectors.signInButton).click();
-  cy.intercept("GET", "api/library_apps").as("apps");
-  cy.wait("@apps");
-  cy.wait(3000);
+  cy.wait(2000);
   cy.get(commonSelectors.homePageLogo).should("be.visible");
 });
 
@@ -106,11 +102,11 @@ Cypress.Commands.add(
   },
   (subject, value) => {
     cy.wrap(subject)
-      .click()
+      .realClick()
       .find("pre.CodeMirror-line")
       .invoke("text")
       .then((text) => {
-        cy.wrap(subject).type(createBackspaceText(text)),
+        cy.wrap(subject).type(createBackspaceText(text), { delay: 0 }),
         {
           delay: 0,
         };
@@ -212,31 +208,35 @@ Cypress.Commands.add("notVisible", (dataCy) => {
   });
 });
 
-Cypress.Commands.add("resizeWidget", (widgetName, x, y) => {
-  cy.get(`[data-cy="draggable-widget-${widgetName}"]`).trigger("mouseover", {
-    force: true,
-  });
+Cypress.Commands.add(
+  "resizeWidget",
+  (widgetName, x, y, autosaveStatusCheck = true) => {
+    cy.get(`[data-cy="draggable-widget-${widgetName}"]`).trigger("mouseover", {
+      force: true,
+    });
 
-  cy.get('[class="bottom-right"]').trigger("mousedown", {
-    which: 1,
-    force: true,
-  });
-  cy.get(commonSelectors.canvas)
-    .trigger("mousemove", {
+    cy.get('[class="bottom-right"]').trigger("mousedown", {
       which: 1,
-      clientX: x,
-      ClientY: y,
-      clientX: x,
-      clientY: y,
-      pageX: x,
-      pageY: y,
-      screenX: x,
-      screenY: y,
-    })
-    .trigger("mouseup");
-
-  cy.waitForAutoSave();
-});
+      force: true,
+    });
+    cy.get(commonSelectors.canvas)
+      .trigger("mousemove", {
+        which: 1,
+        clientX: x,
+        ClientY: y,
+        clientX: x,
+        clientY: y,
+        pageX: x,
+        pageY: y,
+        screenX: x,
+        screenY: y,
+      })
+      .trigger("mouseup");
+    if (autosaveStatusCheck) {
+      cy.waitForAutoSave();
+    }
+  }
+);
 
 Cypress.Commands.add("reloadAppForTheElement", (elementText) => {
   cy.get("body").then(($title) => {
@@ -247,7 +247,8 @@ Cypress.Commands.add("reloadAppForTheElement", (elementText) => {
 });
 
 Cypress.Commands.add("skipEditorPopover", () => {
-  cy.wait(2000);
+  // cy.get(".text-muted");
+  cy.wait(1000);
   cy.get("body").then(($el) => {
     if ($el.text().includes("Skip", { timeout: 2000 })) {
       cy.get(commonSelectors.skipButton).realClick();
@@ -282,3 +283,11 @@ Cypress.Commands.add("visitTheWorkspace", (workspaceName) => {
   });
   cy.wait(2000);
 });
+
+Cypress.Commands.add("hideTooltip", () => {
+  cy.get("body").then(($body) => {
+    if ($body.find(".tooltip-inner").length > 0) {
+      cy.get(".tooltip-inner").invoke("css", "display", "none");
+    }
+  });
+});

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

@@ -9,7 +9,7 @@ export const commonSelectors = {
     '.drawer-container > [style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"] > .go4109123758 > .go2072408551',
   toastCloseButton: '[data-cy="toast-close-button"]',
   editButton: "[data-cy=edit-button]",
-  searchField: "[data-cy=widget-search-box]",
+  searchField: "[data-cy='widget-search-box-search-bar']",
   firstWidget: "[data-cy=widget-list]:eq(0)",
   canvas: "[data-cy=real-canvas]",
   appCardOptionsButton: "[data-cy=app-card-menu-icon]",
@@ -211,9 +211,20 @@ export const commonSelectors = {
   editFolderOption: (folderName) => {
     return `[data-cy="${cyParamName(folderName)}-edit-folder-option"]`;
   },
-  inspectorPinIcon: '[data-cy="null-option-icon"]',
+  inspectorPinIcon: '.d-flex > [data-cy="left-sidebar-inspector"]',
   groupInputFieldLabel: '[data-cy="label-group-input-field"]',
+  pageSectionHeader: '[data-cy="dashboard-section-header"]',
+  yesButton: '[data-cy="yes-button"]',
 
+  documentationLink: '[data-cy="read-documentation-option-button"]',
+  nameLabel: '[data-cy="name-label"]',
+  valueLabel: '[data-cy="value-label"]',
+  valueInputField: '[data-cy="value-input-field"]',
+  yesButton: '[data-cy="yes-button"]',
+  pagination: '[data-cy="pagination-section"]',
+  workspaceConstantsOption: '[data-cy="workspace-constants-list-item"]',
+  nameErrorText: '[data-cy="name-error-text"]',
+  valueErrorText: '[data-cy="value-error-text"]',
 };
 
 export const commonWidgetSelector = {
@@ -275,15 +286,15 @@ export const commonWidgetSelector = {
   },
 
   buttonCloseEditorSideBar: "[data-cy='inspector-close-icon']",
-  buttonStylesEditorSideBar: "[data-cy='sidebar-option-styles']",
+  buttonStylesEditorSideBar: "#inspector-tab-styles",
   WidgetNameInputField: "[data-cy=edit-widget-name]",
 
   tooltipInputField: "[data-cy='tooltip-input-field']",
   tooltipLabel: "[id=button-tooltip]",
 
-  noEventHandlerMessage: "[data-cy='no-event-handler-message']",
+  noEventHandlerMessage: "[data-cy='no-items-banner']",
   addEventHandlerLink: "[data-cy='add-event-handler']",
-  addMoreEventHandlerLink: '[data-cy="add-more-event-handler"]',
+  addMoreEventHandlerLink: '[data-cy="add-event-handler"]',
   eventHandlerCard: "[data-cy='event-handler-card']",
   alertMessageInputField: "[data-cy='alert-message-input-field']",
   eventSelection: '[data-cy="event-selection"]',

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

@@ -1,88 +1,100 @@
+import { cyParamName } from "../../constants/selectors/common";
+
 export const dataSourceSelector = {
-    leftSidebarDatasourceButton: "[data-cy='left-sidebar-database-button']",
-    labelDataSources: "[data-cy='label-datasources']",
-    addDatasourceLink: "[data-cy='add-datasource-link']",
+  leftSidebarDatasourceButton: "[data-cy='left-sidebar-database-button']",
+  labelDataSources: "[data-cy='label-datasources']",
+  addDatasourceLink: "[data-cy='add-datasource-link']",
 
-    allDatasourceLabelAndCount: '[data-rr-ui-event-key="#alldatasources"]',
-    databaseLabelAndCount: '[data-rr-ui-event-key="#databases"]',
-    apiLabelAndCount: '[data-rr-ui-event-key="#apis"]',
-    cloudStorageLabelAndCount: '[data-rr-ui-event-key="#cloudstorage"]',
-    dataSourceSearchInputField: '[data-cy="datasource-search-input"]',
+  allDatasourceLabelAndCount: '[data-cy="datasource-list-header"]',
+  databaseLabelAndCount: '[data-cy="databases-datasource-button"]',
+  apiLabelAndCount: '[data-cy="apis-datasource-button"]',
+  cloudStorageLabelAndCount: '[data-cy="cloudstorage-datasource-button"]',
+  pluginsLabelAndCount: '[data-cy="plugins-datasource-button"]',
+  dataSourceSearchInputField: '[data-cy="home-page-search-bar"]',
 
-    postgresDataSource: "[data-cy='data-source-postgresql']",
-    dataSourceNameInputField: '[data-cy="data-source-name-input-filed"]',
-    labelHost: '[data-cy="label-host"]',
-    labelPort: '[data-cy="label-port"]',
-    labelSsl: '[data-cy="label-ssl"]',
-    labelDbName: '[data-cy="label-database-name"]',
-    labelUserName: '[data-cy="label-username"]',
-    labelPassword: '[data-cy="label-password"]',
-    labelSSLCertificate: '[data-cy="ssl-certificate-dropdown-label"]',
-    labelIpWhitelist: '[data-cy="white-list-ip-text"]',
-    buttonCopyIp: '[data-cy="button-copy-ip"]',
-    linkReadDocumentation: '[data-cy="link-read-documentation"]',
-    buttonTestConnection: '[data-cy="test-connection-button"]',
-    connectionFailedText: '[data-cy="test-connection-failed-text"]',
-    buttonSave: '[data-cy="db-connection-save-button"]',
-    dangerAlertNotSupportSSL: '.go3958317564',
+  postgresDataSource: "[data-cy='data-source-postgresql']",
+  dataSourceNameInputField: '[data-cy="data-source-name-input-filed"]',
+  labelHost: '[data-cy="label-host"]',
+  labelPort: '[data-cy="label-port"]',
+  labelSsl: '[data-cy="label-ssl"]',
+  labelDbName: '[data-cy="label-database-name"]',
+  labelUserName: '[data-cy="label-username"]',
+  labelPassword: '[data-cy="label-password"]',
+  labelSSLCertificate: '[data-cy="ssl-certificate-dropdown-label"]',
+  labelIpWhitelist: '[data-cy="white-list-ip-text"]',
+  buttonCopyIp: '[data-cy="button-copy-ip"]',
+  linkReadDocumentation: '[data-cy="link-read-documentation"]',
+  buttonTestConnection: '[data-cy="test-connection-button"]',
+  connectionFailedText: '[data-cy="test-connection-failed-text"]',
+  buttonSave: '[data-cy="db-connection-save-button"] > .tj-base-btn',
+  dangerAlertNotSupportSSL: '.go3958317564',
 
-    passwordTextField: '[data-cy="password-text-field"]',
-    textConnectionVerified: '[data-cy="test-connection-verified-text"]',
-    datasourceLabelOnList: '[data-cy="datasource-Label"]',
+  passwordTextField: '[data-cy="password-text-field"]',
+  textConnectionVerified: '[data-cy="test-connection-verified-text"]',
+  datasourceLabelOnList: '[data-cy="datasource-Label"]',
 
-    buttonAddNewQueries: '[data-cy="button-add-new-queries"]',
-    addQueriesCard: '[data-cy="postgresql-add-query-card"]',
-    headerQueryManager: '[data-cy="header-queries-on-query-manager"]',
-    labelNoQuery: '[data-cy="no-query-text"]',
-    createQueryButton: '[data-cy="query-create-and-run-button"]',
-    querySearchBar: '[data-cy="home-page-search-bar"]',
-    labelSelectDataSource: '[data-cy="label-select-datasource"]',
-    queryTabGeneral: '[data-cy="query-tab-general"]',
-    queryLabelInputField: '[data-cy="query-rename-input"]',
-    queryPreviewButton: '[data-cy="query-preview-button"]',
-    queryCreateAndRunButton: '[data-cy="query-run-button"]',
-    queryCreateDropdown: '[data-cy="query-create-dropdown"]',
-    queryCreateAndRunOption: '[data-cy="query-create-and-run-option"]',
-    queryCreateOption: '[data-cy="query-create-option"]',
-    queryInputField: '[data-cy="query-input-field"]',
-    labelTransformation: '[data-cy="label-query-transformation"]',
-    toggleTransformation: '[data-cy="transformation-toggle-switch"]',
-    inputFieldTransformation: '[data-cy="transformation-input-input-field"]',
+  buttonAddNewQueries: '[data-cy="button-add-new-queries"]',
+  addQueriesCard: '[data-cy="postgresql-add-query-card"]',
+  headerQueryManager: '[data-cy="header-queries-on-query-manager"]',
+  labelNoQuery: '[data-cy="no-query-text"]',
+  createQueryButton: '[data-cy="query-create-and-run-button"]',
+  querySearchBar: '[data-cy="home-page-search-bar"]',
+  labelSelectDataSource: '[data-cy="label-select-datasource"]',
+  queryTabGeneral: '[data-cy="query-tab-general"]',
+  queryLabelInputField: '[data-cy="query-rename-input"]',
+  queryPreviewButton: '[data-cy="query-preview-button"]',
+  queryCreateAndRunButton: '[data-cy="query-run-button"]',
+  queryCreateDropdown: '[data-cy="query-create-dropdown"]',
+  queryCreateAndRunOption: '[data-cy="query-create-and-run-option"]',
+  queryCreateOption: '[data-cy="query-create-option"]',
+  queryInputField: '[data-cy="query-input-field"]',
+  labelTransformation: '[data-cy="label-query-transformation"]',
+  toggleTransformation: '[data-cy="transformation-toggle-switch"]',
+  inputFieldTransformation: '[data-cy="transformation-input-input-field"]',
 
-    headerQueryPreview: '.py-2',
-    previewTabJson: '[data-cy="preview-tab-json"]',
-    previewTabRaw: '[data-cy="preview-tab-raw"]',
+  headerQueryPreview: ".py-2",
+  previewTabJson: '[data-cy="preview-tab-json"]',
+  previewTabRaw: '[data-cy="preview-tab-raw"]',
 
-    operationsDropDownLabel: '[data-cy="operation-dropdown-label"]',
-    labelTableNameInputField: '[data-cy="label-table"]',
-    labelPrimaryKeyColoumn: '[data-cy="label-primary-key-column"]',
-    labelRecordsToUpdate: '[data-cy="label-records-to-update"]',
+  operationsDropDownLabel: '[data-cy="operation-dropdown-label"]',
+  labelTableNameInputField: '[data-cy="label-table"]',
+  labelPrimaryKeyColoumn: '[data-cy="label-primary-key-column"]',
+  labelRecordsToUpdate: '[data-cy="label-records-to-update"]',
 
-    queryTabAdvanced: '[data-cy="query-tab-advanced"]',
+  queryTabAdvanced: '[data-cy="query-tab-advanced"]',
 
-    labelRunQueryOnPageLoad: '[data-cy="run-on-app-load-toggle-label"]',
-    labelRequestConfirmationOnRun:
-        '[data-cy="confirmation-before-run-toggle-label"]',
-    labelShowNotification: '[data-cy="notification-on-success-toggle-label"]',
-    toggleNotification: '[data-cy="notification-on-success-toggle-switch"]',
-    labelSuccessMessageInput: '[data-cy="label-success-message-input"]',
-    notificationDurationInput: '[data-cy="label-notification-duration-input"]',
-    addEventHandler: '[data-cy="add-event-handler"]',
-    noEventHandlerMessage: '[data-cy="no-event-handler-message"]',
-    postgresqlQueryRunButton: '[data-cy="postgresql1-query-run-button"]',
-    psqlQueryLabel: '[data-cy="postgresql1-query-label"]',
-    psqlQueryDeleteButton: '[data-cy="postgresql1-query-delete-button"]',
-    deleteModalMessage: '[data-cy="modal-message"]',
-    deleteModalCancelButton: '[data-cy="modal-cancel-button"]',
-    deleteModalConfirmButton: '[data-cy="modal-confirm-button"]',
+  labelRunQueryOnPageLoad: '[data-cy="run-on-app-load-toggle-label"]',
+  labelRequestConfirmationOnRun:
+    '[data-cy="confirmation-before-run-toggle-label"]',
+  labelShowNotification: '[data-cy="notification-on-success-toggle-label"]',
+  toggleNotification: '[data-cy="notification-on-success-toggle-switch"]',
+  labelSuccessMessageInput: '[data-cy="label-success-message-input"]',
+  notificationDurationInput: '[data-cy="label-notification-duration-input"]',
+  addEventHandler: '[data-cy="add-event-handler"]',
+  noEventHandlerMessage: '[data-cy="no-event-handler-message"]',
+  postgresqlQueryRunButton: '[data-cy="postgresql1-query-run-button"]',
+  psqlQueryLabel: '[data-cy="postgresql1-query-label"]',
+  psqlQueryDeleteButton: '[data-cy="postgresql1-query-delete-button"]',
+  deleteModalMessage: '[data-cy="modal-message"]',
+  deleteModalCancelButton: '[data-cy="modal-cancel-button"]',
+  deleteModalConfirmButton: '[data-cy="modal-confirm-button"]',
 
-    querySelectDropdown: "[data-cy='query-select-dropdown']",
-    opetionQuerySave: "[data-cy='query-save-option']",
+  querySelectDropdown: "[data-cy='query-select-dropdown']",
+  opetionQuerySave: "[data-cy='query-save-option']",
 
-    dataExistanceQuery: '[data-cy="existance_of_table-query-label"]',
-    tableNameInputField: '[data-cy="table-input-field"]',
-    primaryKeyColoumnInputField: '[data-cy="primary_key_column-input-field"]',
-    recordsInputField: '[data-cy="records-input-field"]',
+  dataExistanceQuery: '[data-cy="existance_of_table-query-label"]',
+  tableNameInputField: '[data-cy="table-input-field"]',
+  primaryKeyColoumnInputField: '[data-cy="primary_key_column-input-field"]',
+  recordsInputField: '[data-cy="records-input-field"]',
 
-    eventQuerySelectionField: '[data-cy="query-selection-field"]',
-};
+  eventQuerySelectionField: '[data-cy="query-selection-field"]',
+  addedDsSearchIcon: '[data-cy="added-ds-search-icon"]',
+  AddedDsSearchBar: '[data-cy="added-ds-search-bar"]',
+  dsNameInputField: '[data-cy="data-source-name-input-filed"]',
+  unSavedModalTitle: '[data-cy="unsaved-changes-title"]',
+  eventQuerySelectionField: '[data-cy="query-selection-field"]',
+  connectionAlertText: '[data-cy="connection-alert-text"]',
+  deleteDSButton: (datasourceName) => {
+    return `[data-cy="${cyParamName(datasourceName)}-delete-button"]`
+  },
+};

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

@@ -10,12 +10,12 @@ export const appVersionSelectors = {
   createNewVersion: '[data-cy="create-new-version-title"]',
   versionNamelabel: '[data-cy="version-name-label"]',
   appVersionMenuField:
-    '[data-cy="app-version-selector"] .undefined__indicators',
+    '[data-cy="app-version-selector"] .react-select__indicators',
   versionNameInputField: '[data-cy="version-name-input-field"]',
   createVersionFromLabel: '[data-cy="create-version-from-label"]',
   createVersionInputField: '[data-cy="create-version-from-input-field"]',
   createNewVersionButton: '[data-cy="create-new-version-button"]',
-  appVersionContentList: ".undefined__menu-list",
+  appVersionContentList: ".react-select__menu-list",
 };
 export const exportAppModalSelectors = {
   selectVersionTitle: '[data-cy= "select-a-version-to-export-title"]',
@@ -39,4 +39,4 @@ export const importSelectors = {
   importAnApplication: '[data-cy="import-an-application"]',
   importOptionLabel: '[data-cy="import-option-label"]',
   importOptionInput: '[data-cy="import-option-input"]',
-};
+};

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

@@ -1,9 +1,9 @@
 export const multipageSelector = {
   sidebarPageButton: '[data-cy="left-sidebar-page-button"]',
   pagesLabel: '[data-cy="label-pages"]',
-  addPageIcon: '[data-cy="add-page-option-icon"]',
-  searchPageIcon: '[data-cy="search-page-option-icon"]',
-  pagesPinIcon: '[data-cy="pin-panel-option-icon"]',
+  addPageIcon: '[title="Add Page"]',
+  searchPageIcon: '[title="Search"]',
+  pagesPinIcon: '[title="Pin"]',
 
   homePageLabel: '[data-cy="pages-name-home"]',
   homePageIcon: '[data-cy="home-page-icon"]',
@@ -16,21 +16,21 @@ export const multipageSelector = {
   renameOptionButton: '[data-cy="rename-option-button"]',
   markHomePageIcon: '[data-cy="mark-home-option-icon"]',
   markHomePageOptionButton: '[data-cy="mark-home-option-button"]',
-  hidePageOptionIcon: '[data-cy="hide-page-option-icon"]',
-  hidePageOptionButton: '[data-cy="hide-page-option-button"]',
+  hidePageOptionIcon: '[data-cy="hide-page-on-app-menu-option-icon"]',
+  hidePageOptionButton: '[data-cy="hide-page-on-app-menu-option-button"]',
 
   eventHandlersOptionIcon: '[data-cy="event-handlers-option-icon"]',
   eventHandlerOptionButton: '[data-cy="event-handlers-option-button"]',
 
   disabledDeleteButton:
     ".menu-options > :nth-child(6)>.unstyled-button.disabled",
-  pagesMenuIcon: '[data-cy="menu-icon"]',
+  pagesMenuIcon: '[data-cy="page-global-settings"]',
   pageHeaderSettings: '[data-cy="page-settings-header"]',
   disableThePageMenuLabel: '[data-cy="disable-page-menu-label"]',
   disableMenuDescription: '[data-cy="disable-page-menu-description"]',
   disableMenuToggle: '[data-cy="disable-page-menu-toggle"]',
 
-  hidePageIcon: '[data-cy="hide-page-icon"]',
+  hidePageIcon: '[data-cy="icon-hidden"]',
   deletePageOptionButton: '[data-cy="delete-page-option-button"]',
   modalMessage: '[data-cy="modal-message"]',
   modalConfirmButton: '[data-cy="modal-confirm-button"]',
@@ -39,7 +39,7 @@ export const multipageSelector = {
   modalTitlePageEvents: '[data-cy="modal-title-page-events"]',
   pageEventsLabel: '[data-cy="page-events-labe"]',
   addEventHandlerLink: '[data-cy="add-event-handler"]',
-  noEventHandlerMessage: '[data-cy="no-event-handler-message"]',
+  noEventHandlerMessage: '[data-cy="no-items-banner"]',
   closeModal: '[data-cy="close-option-button"]',
   closeIconEvents: '[data-cy="modal-close-button-page-events"]',
   eventName: '[data-cy="event-name"]',

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

@@ -3,11 +3,12 @@ export const postgreSqlSelector = {
   labelDataSources: "[data-cy='label-datasources']",
   addDatasourceLink: "[data-cy='add-datasource-link']",
 
-  allDatasourceLabelAndCount: '[data-rr-ui-event-key="#alldatasources"]',
-  databaseLabelAndCount: '[data-rr-ui-event-key="#databases"]',
-  apiLabelAndCount: '[data-rr-ui-event-key="#apis"]',
-  cloudStorageLabelAndCount: '[data-rr-ui-event-key="#cloudstorage"]',
-  dataSourceSearchInputField: '[data-cy="datasource-search-input"]',
+  allDatasourceLabelAndCount: '[data-cy="datasource-list-header"]',
+  databaseLabelAndCount: '[data-cy="databases-datasource-button"]',
+  apiLabelAndCount: '[data-cy="apis-datasource-button"]',
+  cloudStorageLabelAndCount: '[data-cy="cloudstorage-datasource-button"]',
+  pluginsLabelAndCount: '[data-cy="plugins-datasource-button"]',
+  dataSourceSearchInputField: '[data-cy="home-page-search-bar"]',
 
   postgresDataSource: "[data-cy='data-source-postgresql']",
   dataSourceNameInputField: '[data-cy="data-source-name-input-filed"]',
@@ -23,8 +24,8 @@ export const postgreSqlSelector = {
   linkReadDocumentation: '[data-cy="link-read-documentation"]',
   buttonTestConnection: '[data-cy="test-connection-button"]',
   connectionFailedText: '[data-cy="test-connection-failed-text"]',
-  buttonSave: '[data-cy="db-connection-save-button"]',
-  dangerAlertNotSupportSSL: '.go3958317564',
+  buttonSave: '[data-cy="db-connection-save-button"] > .tj-base-btn',
+  dangerAlertNotSupportSSL: ".go3958317564",
 
   passwordTextField: '[data-cy="password-text-field"]',
   textConnectionVerified: '[data-cy="test-connection-verified-text"]',
@@ -49,7 +50,7 @@ export const postgreSqlSelector = {
   toggleTransformation: '[data-cy="transformation-toggle-switch"]',
   inputFieldTransformation: '[data-cy="transformation-input-input-field"]',
 
-  headerQueryPreview: '.py-2',
+  headerQueryPreview: ".py-2",
   previewTabJson: '[data-cy="preview-tab-json"]',
   previewTabRaw: '[data-cy="preview-tab-raw"]',
 
@@ -68,7 +69,7 @@ export const postgreSqlSelector = {
   labelSuccessMessageInput: '[data-cy="label-success-message-input"]',
   notificationDurationInput: '[data-cy="label-notification-duration-input"]',
   addEventHandler: '[data-cy="add-event-handler"]',
-  noEventHandlerMessage: '[data-cy="no-event-handler-message"]',
+  noEventHandlerMessage: '[data-cy="no-items-banner"]',
   postgresqlQueryRunButton: '[data-cy="postgresql1-query-run-button"]',
   psqlQueryLabel: '[data-cy="postgresql1-query-label"]',
   psqlQueryDeleteButton: '[data-cy="postgresql1-query-delete-button"]',

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

@@ -4,6 +4,7 @@ export const tableSelector = {
     return `[data-cy*="-cell-${index}"]`;
   },
   pageIndexDetails: '[data-cy="page-index-details"]',
+  currentPageIndexDetails: '[data-cy="page-index-details"] > .form-control',
 
   paginationButtonToFirst: '[data-cy="pagination-button-to-first"]',
   paginationButtonToPrevious: '[data-cy="pagination-button-to-previous"]',
@@ -48,7 +49,7 @@ export const tableSelector = {
   fxButton: (action) => {
     return `[data-cy="${String(action)
       .toLowerCase()
-      .replace(/\s+/g, "-")}-fx-button"]`;
+      .replace(/\s+/g, "-")}-fx-button"] > svg`;
   },
 
   toggleButton: (action) => {
@@ -76,4 +77,5 @@ export const tableSelector = {
   },
 
   addNewRowTooltip: '[data-tooltip-id="tooltip-for-add-new-row"]',
+  manageColumns: '[data-tooltip-id="tooltip-for-manage-columns"]',
 };

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

@@ -0,0 +1,30 @@
+export const cyParamName = (paramName = "") => {
+    return paramName.toLowerCase().replace(/\s+/g, "-");
+};
+
+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"]',
+    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"]',
+
+    constantName: (constName) => {
+        return `[data-cy="${cyParamName(constName)}-workspace-constant-name"]`;
+    },
+    constantValue: (constName) => {
+        return `[data-cy="${cyParamName(constName)}-workspace-constant-value"]`;
+    },
+    constEditButton: (constName) => {
+        return `[data-cy="${cyParamName(constName)}-edit-button"]`;
+    },
+    constDeleteButton: (constName) => {
+        return `[data-cy="${cyParamName(constName)}-delete-button"]`;
+    },
+};

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

@@ -0,0 +1,6 @@
+export const azureBlobStorageText = {
+  azureBlobStorage: "Azure Blob Storage",
+  connectionStringPlaceholder: "Enter connection string",
+  unableExtractAccountNameText:
+    "Unable to extract accountName with provided information.",
+};

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

@@ -3,7 +3,7 @@ export const buttonText = {
   defaultWidgetName: "button1",
   buttonTextLabel: "Button Text",
   loadingState: "Loading State",
-  buttonDocumentationLink: "Button documentation",
+  buttonDocumentationLink: "Read documentation for Button",
   backgroundColor: "Background Color",
   textColor: "Text color",
   loaderColor: "Loader color",

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

@@ -10,7 +10,7 @@ export const path = {
 };
 
 export const commonText = {
-  autoSave: "Saved changes",
+  autoSave: "Changes saved",
   email: "dev@tooljet.io",
   password: "password",
   loginErrorToast: "Invalid email or password",
@@ -171,6 +171,11 @@ export const commonText = {
     // ifameLinkCopyButton: "copy",
   },
   groupInputFieldLabel: "Select Group",
+  documentationLink: "Read Documentation",
+  constantsNameError:
+    "Constant name should start with a letter or underscore and can only contain letters, numbers and underscores",
+  constantsValueError:
+    "Value should be less than 10000 characters and cannot be empty",
 };
 
 export const commonWidgetText = {
@@ -179,6 +184,7 @@ export const commonWidgetText = {
   accordionGenaral: "General",
   accordionValidation: "Validation",
   accordionLayout: "Layout",
+  accordionDevices: "Devices",
 
   parameterCustomValidation: "Custom validation",
   parameterShowOnDesktop: "Show on desktop",
@@ -189,7 +195,7 @@ export const commonWidgetText = {
   borderRadiusInput: ["{{", "20}}"],
   parameterOptionLabels: "Option labels",
   parameterBoxShadow: "Box Shadow",
-  boxShadowDefaultValue: "0px 0px 0px 0px #00000040",
+  boxShadowDefaultValue: "#00000040",
   parameterOptionvalues: "Option values",
   boxShadowColor: "Box Shadow Color",
   boxShadowFxValue: "-5px 6px 5px 8px #ee121240",
@@ -199,7 +205,7 @@ export const commonWidgetText = {
   codeMirrorInputTrue: codeMirrorInputLabel(true),
   codeMirrorInputFalse: codeMirrorInputLabel("false"),
 
-  addEventHandlerLink: "Add handler",
+  addEventHandlerLink: "New event handler",
   inspectorComponentLabel: "components",
   componentValueLabel: "Value",
   labelDefaultValue: "Default Value",
@@ -221,7 +227,7 @@ export const commonWidgetText = {
     return `Maximum ${value} characters is allowed`;
   },
 
-  datepickerDocumentationLink: "Datepicker documentation",
+  datepickerDocumentationLink: "Read documentation for Datepicker",
   text1: "text1",
   textinput1: "textinput1",
   toggleswitch1: "toggleswitch1",

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

@@ -1,71 +1,74 @@
 export const dataSourceText = {
-    labelDataSources: "Datasources",
-    labelAddDataSource: "+ add data source",
+  labelDataSources: "Datasources",
+  labelAddDataSource: "+ add data source",
 
-    allDataSources: "All Datasources (41)",
-    allDatabase: "Databases (17)",
-    allApis: "APIs (20)",
-    allCloudStorage: "Cloud Storage (4)",
+  allDataSources: "All data sources (41)",
+  allDatabase: "Databases (17)",
+  allApis: "APIs (20)",
+  allCloudStorage: "Cloud Storage (4)",
+  pluginsLabelAndCount: "Plugins (0)",
 
-    postgreSQL: "PostgreSQL",
-    labelHost: "Host",
-    labelPort: "Port",
-    labelSSL: "SSL",
-    labelDbName: "Database Name",
-    labelUserName: "Username",
-    labelPassword: "Password",
-    label: "Encrypted",
-    sslCertificate: "SSL Certificate",
-    whiteListIpText:
-        "Please white-list our IP address if the data source is not publicly accessible",
-    textCopy: "Copy",
-    readDocumentation: "Read documentation",
-    couldNotConnect: "could not connect",
-    buttonTextSave: "Save",
-    serverNotSuppotSsl: "The server does not support SSL connections",
-    psqlName: "cypress-postgresql",
+  postgreSQL: "PostgreSQL",
+  labelHost: "Host",
+  labelPort: "Port",
+  labelSSL: "SSL",
+  labelDbName: "Database Name",
+  labelUserName: "Username",
+  labelPassword: "Password",
+  label: "Encrypted",
+  sslCertificate: "SSL Certificate",
+  whiteListIpText:
+    "Please white-list our IP address if the data source is not publicly accessible",
+  textCopy: "Copy",
+  readDocumentation: "Read documentation",
+  couldNotConnect: "could not connect",
+  buttonTextSave: "Save",
+  serverNotSuppotSsl: "The server does not support SSL connections",
+  psqlName: "cypress-postgresql",
 
-    labelConnectionVerified: "connection verified",
-    toastDSAdded: "Datasource Added",
-    placeholderNameOfDB: "Name of the database",
-    placeholderEnterHost: "Enter host",
-    placeholderEnterPort: "Enter port",
-    placeholderEnterUserName: "Enter username",
+  labelConnectionVerified: "connection verified",
+  toastDSAdded: "Data Source Added",
+  placeholderNameOfDB: "Name of the database",
+  placeholderEnterHost: "Enter host",
+  placeholderEnterPort: "Enter port",
+  placeholderEnterUserName: "Enter username",
 
-    headerQueries: "Queries",
-    headerSelectDatasource: "Select Datasource",
-    noQueryText: "You haven't created queries yet.",
-    buttonLabelCreateQuery: "Create query",
-    tabGeneral: "General",
-    firstQueryName: "postgresql1",
-    buttonLabelPreview: "Preview",
-    buttonLabelCreateAndRun: "Create & Run",
-    buttonLabelCreate: "Create",
-    queryModeSql: "SQL mode",
-    queryModeGui: "GUI mode",
+  headerQueries: "Queries",
+  headerSelectDatasource: "Select Data Source",
+  noQueryText: "You haven't created queries yet.",
+  buttonLabelCreateQuery: "Create query",
+  tabGeneral: "General",
+  firstQueryName: "postgresql1",
+  buttonLabelPreview: "Preview",
+  buttonLabelCreateAndRun: "Create & Run",
+  buttonLabelCreate: "Create",
+  queryModeSql: "SQL mode",
+  queryModeGui: "GUI mode",
 
-    headerTransformations: "Enable Transformations",
-    json: "JSON",
-    raw: "Raw",
+  headerTransformations: "Enable Transformations",
+  json: "JSON",
+  raw: "Raw",
 
-    labelOperation: "Operation",
-    labelTable: "Table",
-    labelPrimaryKeyColumn: "Primary key column",
-    labelRecordsToUpdate: "Records to update",
+  labelOperation: "Operation",
+  labelTable: "Table",
+  labelPrimaryKeyColumn: "Primary key column",
+  labelRecordsToUpdate: "Records to update",
 
-    toggleLabelRunOnPageLoad: "Run this query on application load?",
-    toggleLabelconfirmation: "Request confirmation before running query?",
-    toggleLabelShowNotification: "Show notification on success?",
-    labelSuccessMessage: "Success Message",
-    labelNotificatioDuration: "Notification duration (s)",
+  toggleLabelRunOnPageLoad: "Run this query on application load?",
+  toggleLabelconfirmation: "Request confirmation before running query?",
+  toggleLabelShowNotification: "Show notification on success?",
+  labelSuccessMessage: "Success Message",
+  labelNotificatioDuration: "Notification duration (s)",
 
-    dialogueTextDelete: "Do you really want to delete this query?",
-    cancel: "Cancel",
-    yes: "Yes",
+  dialogueTextDelete: "Do you really want to delete this query?",
+  cancel: "Cancel",
+  yes: "Yes",
 
-    guiOptionBulkUpdate: "Bulk update using primary key",
-    buttonTextTestConnection: "Test Connection",
+  guiOptionBulkUpdate: "Bulk update using primary key",
+  buttonTextTestConnection: "Test Connection",
 
-    tabAdvanced: "Advanced",
-    labelNoEventhandler: "This query doesn't have any event handlers",
-};
+  tabAdvanced: "Advanced",
+  labelNoEventhandler: "No event handlers",
+  toastDSSaved: "Data Source Saved",
+  unSavedModalTitle: "Unsaved Changes",
+};

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

@@ -13,6 +13,6 @@ export const datePickerText = {
   labelEnableTimeSection: "Enable time selection?",
   labelDisabledDates: "Disabled dates",
 
-  noEventMessage: "This datepicker doesn't have any event handlers",
+  noEventMessage: "No event handlers",
   defaultTime: "12:00 AM",
 };

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

@@ -5,7 +5,7 @@ export const appVersionText = {
   createVersionFromLabel: "Create version from",
   emptyToastMessage: "Version name should not be empty",
   createdToastMessage: "Version Created",
-  versionNameAlreadyExists: "Version name already exists."
+  versionNameAlreadyExists: "Version name already exists.",
 };
 
 export const exportAppModalText = {
@@ -19,6 +19,6 @@ export const exportAppModalText = {
 
 export const importText = {
   importOption: "Import",
-  couldNotImportAppToastMessage: `Could not import the app: SyntaxError: Unexpected token '<27>', "<22>PNG\r\n\u001a\n\u0000\u0000"... is not valid JSON`,
-  appImportedToastMessage: "App imported successfully.",
-};
+  couldNotImportAppToastMessage: `Could not import: SyntaxError: Unexpected token`,
+  appImportedToastMessage: "Imported successfully.",
+};

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

@@ -2,6 +2,6 @@ export const listviewText = {
   defaultWidgetName: "Listview1",
   showBottomBorder: "Show bottom border",
   rowHeight: "Row height",
-  noEventHandlerMessage: "This listview doesn't have any event handlers",
+  noEventHandlerMessage: "No event handlers",
   listData: "List data",
 };

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

@@ -1,6 +1,6 @@
 export const multipageText = {
   labelPages: "Pages",
-  pageNameHome: "Home",
+  pageNameHome: "HomeHome",
   headerPageHandle: "Page Handle",
   pageHandleModalTitle: "Edit page handle",
   editPagehandleInfo:
@@ -10,13 +10,13 @@ export const multipageText = {
 
   optionRename: "Rename",
   optionMarkHome: "Mark home",
-  optionHidePage: "Hide page",
+  optionHidePage: "Hide page on app menu",
 
   optionEventHandler: "Event Handlers",
   eventModalTitle: "Page Events",
   labelEvents: "Events",
-  addEventHandlerLink: "Add handler",
-  noEventHandlerInfo: "This page doesn't have any event handlers",
+  addEventHandlerLink: "New event handler",
+  noEventHandlerInfo: "No event handlers",
 
   optionDeletePage: "Delete Page",
   deleteModalMessage: "Do you really want to delete Home page?",

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

@@ -2,7 +2,7 @@ export const multiselectText = {
   multiselect: "Multiselect",
   defaultWidgetName: "Multiselect1",
   labelAllItemsSelected: "All items are selected.",
-  noEventsMessage: "This multiselect doesn't have any event handlers",
+  noEventsMessage: "No event handlers",
   dropdwonOptionSelectAll: "Select All",
 
   enableSelectAllOptions: "Enable select All option",

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

@@ -1,4 +1,4 @@
 export const numberInputText = {
   defaultWidgetName: "numberinput1",
-  numberInputDocumentationLink: "NumberInput documentation",
-}
+  numberInputDocumentationLink: "Read documentation for NumberInput",
+};

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

@@ -2,7 +2,7 @@ export const postgreSqlText = {
   labelDataSources: "Datasources",
   labelAddDataSource: "+ add data source",
 
-  allDataSources: "All Datasources (43)",
+  allDataSources: "All data sources (43)",
   allDatabase: "Databases (19)",
   allApis: "APIs (20)",
   allCloudStorage: "Cloud Storage (4)",
@@ -26,14 +26,14 @@ export const postgreSqlText = {
   psqlName: "cypress-postgresql",
 
   labelConnectionVerified: "connection verified",
-  toastDSAdded: "Datasource Added",
+  toastDSAdded: "Data Source Added",
   placeholderNameOfDB: "Name of the database",
   placeholderEnterHost: "Enter host",
   placeholderEnterPort: "Enter port",
   placeholderEnterUserName: "Enter username",
 
   headerQueries: "Queries",
-  headerSelectDatasource: "Select Datasource",
+  headerSelectDatasource: "Select Data Source",
   noQueryText: "You haven't created queries yet.",
   buttonLabelCreateQuery: "Create query",
   tabGeneral: "General",
@@ -67,5 +67,6 @@ export const postgreSqlText = {
   buttonTextTestConnection: "Test Connection",
 
   tabAdvanced: "Advanced",
-  labelNoEventhandler: "This query doesn't have any event handlers",
+  labelNoEventhandler: "No event handlers",
+  toastDSSaved: "Data Source Saved",
 };

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

@@ -9,7 +9,9 @@ export const tableText = {
   ],
 
   placeHolderSearch: "Search",
-  defaultPageIndexDetails: "1 of 1",
+  defaultPageIndexDetails: "of 1",
+  currentPageIndexDetails: 1,
+
   defaultNumberOfRecords: "4 Records",
 
   optionDownloadCSV: "Download as CSV",
@@ -29,6 +31,6 @@ export const tableText = {
   optionEquals: "equals",
 
   labelDynamicColumn: "Use dynamic column",
-  makeEditable: "make editable",
+  makeEditable: "Make editable",
   lableDisableActionButton: "Disable action button",
 };

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

@@ -1,4 +1,4 @@
 export const textInputText = {
   defaultWidgetName: "textinput1",
-  textInputDocumentationLink: "TextInput documentation",
-}
+  textInputDocumentationLink: "Read documentation for TextInput",
+};

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

@@ -0,0 +1,10 @@
+export const workspaceConstantsText = {
+    workspaceConstantsHelperText:
+        "To resolve a Workspace constant use {{constants.access_token}}",
+    emptyStateHeader: "No Workspace constants yet",
+    emptyStateText:
+        "Use Workspace constants seamlessly in both the app builder and global data source connections across ToolJet.",
+    addNewConstantButton: "Create new constant",
+    addConstatntText: "Add new constant in production ",
+    constantCreatedToast: "Constant has been created",
+};

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

@@ -22,7 +22,8 @@ import { randomString } from "Support/utils/textInput";
 
 describe("Database Functionality", () => {
   const data = {};
-  data.tableName = fake.tableName;
+  data.tableName1 = fake.tableName;
+  data.tableName2 = fake.tableName;
   data.newTableName = fake.tableName;
   data.editTableName = fake.tableName;
   data.maximumLength = randomNumber(8, 10);
@@ -57,11 +58,27 @@ describe("Database Functionality", () => {
     cy.appUILogin();
   });
   it("Verify that all elements of the table page", () => {
+    const data = {};
+    data.tableName1 = fake.tableName;
+    data.tableName2 = fake.tableName;
+    data.dataType = ["varchar", "int", "float", "boolean"];
+    const columnDetails = () => {
+      let column = {
+        name: fake.firstName,
+        defaultValueDoublePrecision:
+          Math.floor(Math.random() * (1000 - 100) + 100) / 100,
+        defaultValueInt: randomNumber(10, 99),
+        defaultValueVarchar: randomString(data.maximumLength),
+      };
+      return column;
+    };
+    let column1 = columnDetails();
+    let column2 = columnDetails();
     navigateToDatabase();
     verifyAllElementsOfPage();
-    createTableAndVerifyToastMessage(data.tableName, false);
+    createTableAndVerifyToastMessage(data.tableName1, false);
     createTableAndVerifyToastMessage(
-      data.newTableName,
+      data.tableName2,
       true,
       [column1.name, column2.name],
       [data.dataType[0], data.dataType[1]],
@@ -70,10 +87,43 @@ describe("Database Functionality", () => {
     );
   });
   it("Verify all operations of table", () => {
+    const data = {};
+    data.tableName = fake.tableName;
+    data.newTableName = fake.tableName;
+    data.editTableName = fake.tableName;
+    data.maximumLength = randomNumber(8, 10);
+    data.dataType = ["varchar", "int", "float", "boolean"];
+    const columnDetails = () => {
+      let column = {
+        name: fake.firstName,
+        defaultValueDoublePrecision:
+          Math.floor(Math.random() * (1000 - 100) + 100) / 100,
+        defaultValueInt: randomNumber(10, 99),
+        defaultValueVarchar: randomString(data.maximumLength),
+      };
+      return column;
+    };
+    let column1 = columnDetails();
+    let column2 = columnDetails();
+
+    const rowData = () => {
+      let row = {
+        varcharData: randomString(data.maximumLength),
+        doublePrecisionData:
+          Math.floor(Math.random() * (1000 - 100) + 100) / 100,
+        intData: randomNumber(10, 99),
+      };
+      return row;
+    };
+    let row1 = rowData();
+    let row2 = rowData();
+    let row3 = rowData();
+    let row4 = rowData();
     navigateToDatabase();
-    navigateToTable(data.tableName);
+    createTableAndVerifyToastMessage(data.newTableName, false);
     editTableNameAndVerifyToastMessage(data.newTableName, data.editTableName);
     deleteTableAndVerifyToastMessage(data.editTableName);
+    createTableAndVerifyToastMessage(data.tableName, false);
     createNewColumnAndVerify(
       data.tableName,
       column1.name,

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

@@ -0,0 +1,166 @@
+import { fake } from "Fixtures/fake";
+import { postgreSqlSelector } from "Selectors/postgreSql";
+import { postgreSqlText } from "Texts/postgreSql";
+import { azureBlobStorageText } from "Texts/azureBlobStorage";
+import { mongoDbText } from "Texts/mongoDb";
+import { commonSelectors } from "Selectors/common";
+import {
+  fillDataSourceTextField,
+  selectAndAddDataSource,
+} from "Support/utils/postgreSql";
+import { commonText } from "Texts/common";
+import { dataSourceSelector } from "Selectors/dataSource";
+import { closeDSModal, deleteDatasource } from "Support/utils/dataSource";
+
+const data = {};
+data.lastName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+data.customText = fake.randomSentence;
+
+describe("Data source Azure Blob Storage", () => {
+  beforeEach(() => {
+    cy.appUILogin();
+    cy.intercept("GET", "/api/v2/data_sources");
+  });
+
+  it("Should verify elements on Azure Blob Storage connection form", () => {
+    cy.get(commonSelectors.globalDataSourceIcon).click();
+    closeDSModal();
+    // cy.get(commonSelectors.addNewDataSourceButton)
+    //   .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
+    //   .click();
+
+    cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
+      "have.text",
+      postgreSqlText.allDataSources
+    );
+    cy.get(postgreSqlSelector.databaseLabelAndCount).should(
+      "have.text",
+      postgreSqlText.allDatabase
+    );
+    cy.get(postgreSqlSelector.apiLabelAndCount).should(
+      "have.text",
+      postgreSqlText.allApis
+    );
+    cy.get(postgreSqlSelector.cloudStorageLabelAndCount).should(
+      "have.text",
+      postgreSqlText.allCloudStorage
+    );
+    selectAndAddDataSource(
+      "cloudstorage",
+      azureBlobStorageText.azureBlobStorage,
+      data.lastName
+    );
+
+    // cy.get("[data-cy*='data-source-']")
+    //   .eq(1)
+    //   .should("contain", azureBlobStorageText.azureBlobStorage);
+    // cy.get('[data-cy="data-source-azure blob storage"]').click();
+
+    // cy.get(postgreSqlSelector.dataSourceNameInputField).should(
+    //   "have.value",
+    //   azureBlobStorageText.azureBlobStorage
+    // );
+
+    cy.get('[data-cy="label-connection-string"]').verifyVisibleElement(
+      "have.text",
+      mongoDbText.labelConnectionString
+    );
+
+    cy.get(postgreSqlSelector.labelIpWhitelist).verifyVisibleElement(
+      "have.text",
+      postgreSqlText.whiteListIpText
+    );
+    cy.get(postgreSqlSelector.buttonCopyIp).verifyVisibleElement(
+      "have.text",
+      postgreSqlText.textCopy
+    );
+
+    cy.get(postgreSqlSelector.linkReadDocumentation).verifyVisibleElement(
+      "have.text",
+      postgreSqlText.readDocumentation
+    );
+    cy.get(postgreSqlSelector.buttonTestConnection)
+      .verifyVisibleElement(
+        "have.text",
+        postgreSqlText.buttonTextTestConnection
+      )
+      .click();
+    cy.get(postgreSqlSelector.connectionFailedText).verifyVisibleElement(
+      "have.text",
+      postgreSqlText.couldNotConnect
+    );
+    cy.get(postgreSqlSelector.buttonSave).verifyVisibleElement(
+      "have.text",
+      postgreSqlText.buttonTextSave
+    );
+    cy.get(dataSourceSelector.connectionAlertText).verifyVisibleElement(
+      "have.text",
+      "Cannot read properties of undefined (reading 'startsWith')"
+    );
+    deleteDatasource(`cypress-${data.lastName}-azure-blob-storage`);
+  });
+
+  it("Should verify the functionality of Azure Blob Storage connection form.", () => {
+    cy.get(commonSelectors.globalDataSourceIcon).click();
+    closeDSModal();
+    cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
+      "have.text",
+      postgreSqlText.allDataSources
+    );
+    selectAndAddDataSource(
+      "cloudstorage",
+      azureBlobStorageText.azureBlobStorage,
+      data.lastName
+    );
+
+    fillDataSourceTextField(
+      mongoDbText.labelConnectionString,
+      azureBlobStorageText.connectionStringPlaceholder,
+      data.customText,
+      "contain",
+      { parseSpecialCharSequences: false, delay: 0 }
+    );
+    cy.get(postgreSqlSelector.buttonTestConnection)
+      .verifyVisibleElement(
+        "have.text",
+        postgreSqlText.buttonTextTestConnection
+      )
+      .click();
+    cy.get(postgreSqlSelector.connectionFailedText).verifyVisibleElement(
+      "have.text",
+      postgreSqlText.couldNotConnect
+    );
+    cy.get(dataSourceSelector.connectionAlertText).verifyVisibleElement(
+      "have.text",
+      azureBlobStorageText.unableExtractAccountNameText
+    );
+
+    fillDataSourceTextField(
+      mongoDbText.labelConnectionString,
+      azureBlobStorageText.connectionStringPlaceholder,
+      Cypress.env("azure_blob_storage_connection_string"),
+      "contain",
+      { parseSpecialCharSequences: false, delay: 0 }
+    );
+    cy.get(postgreSqlSelector.buttonTestConnection).click();
+    cy.get(postgreSqlSelector.textConnectionVerified, {
+      timeout: 10000,
+    }).should("have.text", postgreSqlText.labelConnectionVerified);
+    cy.get(postgreSqlSelector.buttonSave).click();
+
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      postgreSqlText.toastDSSaved
+    );
+
+    cy.get(commonSelectors.globalDataSourceIcon).click();
+    cy.get(
+      `[data-cy="cypress-${data.lastName}-azure-blob-storage-button"]`
+    ).verifyVisibleElement(
+      "have.text",
+      `cypress-${data.lastName}-azure-blob-storage`
+    );
+
+    deleteDatasource(`cypress-${data.lastName}-azure-blob-storage`);
+  });
+});

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

@@ -6,7 +6,7 @@ import { firestoreText } from "Texts/firestore";
 import { commonSelectors } from "Selectors/common";
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 import { commonText } from "Texts/common";
 import { closeDSModal, deleteDatasource } from "Support/utils/dataSource";
@@ -23,9 +23,9 @@ describe("Data source BigQuery", () => {
   it("Should verify elements on BigQuery connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
+    // cy.get(commonSelectors.addNewDataSourceButton)
+    //   .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
+    //   .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -44,24 +44,13 @@ describe("Data source BigQuery", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(
-      bigqueryText.bigQuery
-    );
-    cy.get("[data-cy*='data-source-']")
-      .eq(1)
-      .should("contain", bigqueryText.bigQuery);
-    cy.get('[data-cy="data-source-bigquery"]').click();
-
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      bigqueryText.bigQuery
-    );
+    selectAndAddDataSource("databases", bigqueryText.bigQuery, data.lastName);
 
     cy.get('[data-cy="label-private-key"]').verifyVisibleElement(
       "have.text",
       firestoreText.labelPrivateKey
     );
-
+    cy.get(".datasource-edit-btn").should("be.visible");
     cy.get(postgreSqlSelector.labelIpWhitelist).verifyVisibleElement(
       "have.text",
       postgreSqlText.whiteListIpText
@@ -93,15 +82,15 @@ describe("Data source BigQuery", () => {
       "have.text",
       bigqueryText.errorInvalidEmailId
     );
+    deleteDatasource(
+      `cypress-${String(data.lastName).toLowerCase()}-${String(
+        bigqueryText.bigQuery
+      ).toLowerCase()}`
+    );
   });
 
   it("Should verify the functionality of BigQuery connection form.", () => {
-    selectDataSource(bigqueryText.bigQuery);
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-bigquery`
-    );
+    selectAndAddDataSource("databases", bigqueryText.bigQuery, data.lastName);
 
     fillDataSourceTextField(
       firestoreText.privateKey,
@@ -118,7 +107,7 @@ describe("Data source BigQuery", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();

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

@@ -9,7 +9,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -27,9 +27,6 @@ describe("Data sources", () => {
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -48,15 +45,13 @@ describe("Data sources", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("ClickHouse");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "ClickHouse");
-    cy.get('[data-cy="data-source-clickhouse"]').click();
+    selectAndAddDataSource("databases", "ClickHouse", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      //username,password,host,port,protocol,dbname,usepost, trimquery,gzip,debug,raw
-      "have.value",
-      "ClickHouse"
-    );
+    // cy.get(postgreSqlSelector.dataSourceNameInputField).should(
+    //   //username,password,host,port,protocol,dbname,usepost, trimquery,gzip,debug,raw
+    //   "have.value",
+    //   "ClickHouse"
+    // );
     cy.get(postgreSqlSelector.labelUserName).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelUserName
@@ -65,6 +60,7 @@ describe("Data sources", () => {
       "have.text",
       "Password"
     );
+    cy.get(".datasource-edit-btn").should("be.visible");
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -126,15 +122,11 @@ describe("Data sources", () => {
     cy.get('[data-cy="connection-alert-text"]', { timeout: 60000 })
       .scrollIntoView()
       .verifyVisibleElement("have.text", "getaddrinfo ENOTFOUND undefined");
+    deleteDatasource(`cypress-${data.lastName}-clickhouse`);
   });
 
   it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource("ClickHouse");
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-clickhouse`
-    );
+    selectAndAddDataSource("databases", "ClickHouse", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
@@ -152,7 +144,7 @@ describe("Data sources", () => {
       postgreSqlText.placeholderEnterUserName,
       Cypress.env("clickhouse_user")
     );
-
+    cy.get(".datasource-edit-btn").should("be.visible").click();
     cy.get(postgreSqlSelector.passwordTextField).type(
       Cypress.env("clickhouse_password")
     );
@@ -166,7 +158,7 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(

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

@@ -9,7 +9,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -27,9 +27,7 @@ describe("Data sources", () => {
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
+
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
       postgreSqlText.allDataSources
@@ -46,15 +44,8 @@ describe("Data sources", () => {
       "have.text",
       postgreSqlText.allCloudStorage
     );
+    selectAndAddDataSource("databases", "CosmosDB", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("CosmosDB");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "CosmosDB");
-    cy.get('[data-cy="data-source-cosmosdb"]').click();
-
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "CosmosDB"
-    );
     cy.get('[data-cy="label-end-point"]').verifyVisibleElement(
       "have.text",
       "End point"
@@ -92,14 +83,11 @@ describe("Data sources", () => {
       "have.text",
       "Invalid URL"
     );
+    deleteDatasource(`cypress-${data.lastName}-cosmosdb`);
   });
 
-  it("Should verify the functionality of CosmosDB connection form.", () => {
-    selectDataSource("CosmosDB");
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-cosmosdb`
-    );
+  it.only("Should verify the functionality of CosmosDB connection form.", () => {
+    selectAndAddDataSource("databases", "CosmosDB", data.lastName);
 
     fillDataSourceTextField(
       "End point",
@@ -120,7 +108,7 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(

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

@@ -10,7 +10,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -25,12 +25,9 @@ describe("Data sources", () => {
     cy.appUILogin();
   });
 
-  it("Should verify elements on connection form", () => {
+  it("Should verify elements on CouchDB connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -49,14 +46,8 @@ describe("Data sources", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("CouchDB");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "CouchDB");
-    cy.get('[data-cy="data-source-couchdb"]').click();
+    selectAndAddDataSource("databases", "CouchDB", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "CouchDB"
-    );
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -113,15 +104,11 @@ describe("Data sources", () => {
       "have.text",
       "Invalid URL"
     );
+    deleteDatasource(`cypress-${data.lastName}-couchdb`);
   });
 
-  it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource("CouchDB");
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-couchdb`
-    );
+  it("Should verify the functionality of CouchDB connection form.", () => {
+    selectAndAddDataSource("databases", "CouchDB", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
@@ -140,7 +127,7 @@ describe("Data sources", () => {
       Cypress.env("couchdb_user")
     );
     cy.get(".react-select__input-container").type("HTTP{enter}");
-
+    cy.get(".datasource-edit-btn").should("be.visible").click();
     cy.get(postgreSqlSelector.passwordTextField).type(
       Cypress.env("couchdb_password"),
       { log: false }
@@ -154,7 +141,7 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(

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

@@ -7,7 +7,7 @@ import { commonText } from "Texts/common";
 
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 import {
   closeDSModal,
@@ -26,9 +26,6 @@ describe("Data source DynamoDB", () => {
   it("Should verify elements on DynamoDB connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -47,18 +44,8 @@ describe("Data source DynamoDB", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(
-      dynamoDbText.dynamoDb
-    );
-    cy.get("[data-cy*='data-source-']")
-      .eq(1)
-      .should("contain", dynamoDbText.dynamoDb);
-    cy.get('[data-cy="data-source-dynamodb"]').click();
+    selectAndAddDataSource("databases", dynamoDbText.dynamoDb, data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      dynamoDbText.dynamoDb
-    );
     cy.get('[data-cy="label-region"]').verifyVisibleElement(
       "have.text",
       dynamoDbText.region
@@ -103,15 +90,11 @@ describe("Data source DynamoDB", () => {
       "have.text",
       dynamoDbText.errorMissingRegion
     );
+    deleteDatasource(`cypress-${data.lastName}-dynamodb`);
   });
 
   it("Should verify the functionality of DynamoDB connection form.", () => {
-    selectDataSource(dynamoDbText.dynamoDb);
-
-    cy.clearAndType(
-      postgreSqlSelector.dataSourceNameInputField,
-      `cypress-${data.lastName}-dynamodb`
-    );
+    selectAndAddDataSource("databases", dynamoDbText.dynamoDb, data.lastName);
 
     cy.get('[data-cy="label-region"]')
       .parent()
@@ -160,7 +143,7 @@ describe("Data source DynamoDB", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(

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

@@ -6,7 +6,7 @@ import { commonSelectors } from "Selectors/common";
 import { commonText } from "Texts/common";
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 import {
   verifyCouldnotConnectWithAlert,
@@ -25,9 +25,6 @@ describe("Data source Elasticsearch", () => {
   it("Should verify elements on Elasticsearch connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -46,18 +43,12 @@ describe("Data source Elasticsearch", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(
-      elasticsearchText.elasticSearch
+    selectAndAddDataSource(
+      "databases",
+      elasticsearchText.elasticSearch,
+      data.lastName
     );
-    cy.get("[data-cy*='data-source-']")
-      .eq(1)
-      .should("contain", elasticsearchText.elasticSearch);
-    cy.get('[data-cy="data-source-elasticsearch"]').click();
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      elasticsearchText.elasticSearch
-    );
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -113,14 +104,14 @@ describe("Data source Elasticsearch", () => {
       "have.text",
       elasticsearchText.errorConnectionRefused
     );
+    deleteDatasource(`cypress-${data.lastName}-elasticsearch`);
   });
 
   it("Should verify the functionality of Elasticsearch connection form.", () => {
-    selectDataSource(elasticsearchText.elasticSearch);
-
-    cy.clearAndType(
-      postgreSqlSelector.dataSourceNameInputField,
-      `cypress-${data.lastName}-elasticsearch`
+    selectAndAddDataSource(
+      "databases",
+      elasticsearchText.elasticSearch,
+      data.lastName
     );
 
     fillDataSourceTextField(
@@ -140,9 +131,12 @@ describe("Data source Elasticsearch", () => {
       Cypress.env("elasticsearch_user")
     );
 
-    cy.get(postgreSqlSelector.passwordTextField).type(
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
       Cypress.env("elasticsearch_password")
     );
+
     cy.get(postgreSqlSelector.buttonTestConnection).click();
     verifyCouldnotConnectWithAlert(elasticsearchText.errorGetAddrInfoNotFound);
 
@@ -166,16 +160,23 @@ describe("Data source Elasticsearch", () => {
       postgreSqlText.placeholderEnterUserName,
       Cypress.env("elasticsearch_user")
     );
-    cy.get(postgreSqlSelector.passwordTextField)
-      .clear()
-      .type("elasticsearch_password");
+
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
+      "elasticsearch_password"
+    );
+
     cy.get(postgreSqlSelector.buttonTestConnection).click();
     verifyCouldnotConnectWithAlert(
       "write EPROTO 4041EA0502000000:error:0A00010B:SSL routines:ssl3_get_record:wrong version number:../deps/openssl/openssl/ssl/record/ssl3_record.c:355:"
     );
-    cy.get(postgreSqlSelector.passwordTextField)
-      .clear()
-      .type(Cypress.env("elasticsearch_password"));
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
+      Cypress.env("elasticsearch_password")
+    );
+
     cy.get(".form-check-input").click();
 
     cy.get(postgreSqlSelector.buttonTestConnection).click();
@@ -186,7 +187,7 @@ describe("Data source Elasticsearch", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(

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

@@ -11,7 +11,7 @@ import {
 } from "Support/utils/dataSource";
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 const data = {};
 data.lastName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
@@ -24,10 +24,6 @@ describe("Data source Firestore", () => {
   it("Should verify elements on Firestore connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
-
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
       postgreSqlText.allDataSources
@@ -45,18 +41,7 @@ describe("Data source Firestore", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(
-      firestoreText.firestore
-    );
-    cy.get("[data-cy*='data-source-']")
-      .eq(1)
-      .should("contain", firestoreText.firestore);
-    cy.get('[data-cy="data-source-firestore"]').click();
-
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      firestoreText.firestore
-    );
+    selectAndAddDataSource("databases", firestoreText.firestore, data.lastName);
 
     cy.get('[data-cy="label-private-key"]').verifyVisibleElement(
       "have.text",
@@ -94,15 +79,11 @@ describe("Data source Firestore", () => {
       "have.text",
       firestoreText.errorGcpKeyCouldNotBeParsed
     );
+    deleteDatasource(`cypress-${data.lastName}-firestore`);
   });
 
   it("Should verify the functionality of Firestore connection form.", () => {
-    selectDataSource(firestoreText.firestore);
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-firestore`
-    );
+    selectAndAddDataSource("databases", firestoreText.firestore, data.lastName);
 
     fillDataSourceTextField(
       firestoreText.privateKey,
@@ -119,7 +100,7 @@ describe("Data source Firestore", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(

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

@@ -7,7 +7,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -30,9 +30,6 @@ describe("Data sources", () => {
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -51,14 +48,8 @@ describe("Data sources", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("InfluxDB");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "InfluxDB");
-    cy.get('[data-cy="data-source-influxdb"]').click();
+    selectAndAddDataSource("databases", "InfluxDB", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "InfluxDB"
-    );
     cy.get('[data-cy="label-api-token"]').verifyVisibleElement(
       "have.text",
       "API token"
@@ -106,18 +97,15 @@ describe("Data sources", () => {
       "have.text",
       "Invalid URL"
     );
+    deleteDatasource(`cypress-${data.lastName}-influxdb`);
   });
 
   it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource("InfluxDB");
+    selectAndAddDataSource("databases", "InfluxDB", data.lastName);
 
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-influxdb`
-    );
-
-    cy.clearAndType(
-      '[data-cy="api-token-text-field"]',
+    fillDataSourceTextField(
+      "API token",
+      "**************",
       Cypress.env("influxdb_token")
     );
 
@@ -137,7 +125,7 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(

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

@@ -6,14 +6,17 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
   addWidgetsToAddUser,
 } from "Support/utils/postgreSql";
+import { fake } from "Fixtures/fake";
 import { closeDSModal, deleteDatasource } from "Support/utils/dataSource";
 
+const data = {};
+data.lastName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
 
 describe("Data sources", () => {
   beforeEach(() => {
@@ -23,9 +26,6 @@ describe("Data sources", () => {
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -44,14 +44,7 @@ describe("Data sources", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("MariaDB");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "MariaDB");
-    cy.get('[data-cy="data-source-mariadb"]').click();
-
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "MariaDB"
-    );
+    selectAndAddDataSource("databases", "MariaDB", data.lastName);
 
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
@@ -113,39 +106,48 @@ describe("Data sources", () => {
       postgreSqlText.buttonTextSave
     );
     // cy.get('[data-cy="connection-alert-text"]').should("be.visible")
+    deleteDatasource(`cypress-${data.lastName}-mariadb`);
   });
 
-  it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource("MariaDB");
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      "cypress-mariadb"
-    );
+  it("Should verify the functionality of MariaDB connection form.", () => {
+    selectAndAddDataSource("databases", "MariaDB", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
       postgreSqlText.placeholderEnterHost,
       Cypress.env("mariadb_host")
     );
-    fillDataSourceTextField(
-      postgreSqlText.labelPort,
-      postgreSqlText.placeholderEnterPort,
-      "5432"
-    );
+    // fillDataSourceTextField(
+    //   postgreSqlText.labelPort,
+    //   postgreSqlText.placeholderEnterPort,
+    //   "5432"
+    // );
+
+    cy.get('[data-cy="label-port"]').verifyVisibleElement("have.text", "Port");
+    cy.get('[data-cy="port-text-field"]')
+      .should("be.visible")
+      .invoke("attr", "placeholder")
+      .should("contain", "Enter port");
 
     fillDataSourceTextField(
       postgreSqlText.labelUserName,
       postgreSqlText.placeholderEnterUserName,
       Cypress.env("mariadb_user")
     );
-
-    cy.get(postgreSqlSelector.passwordTextField).type(
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
       Cypress.env("mariadb_password")
     );
 
-    cy.get('[data-cy="label-database"]').verifyVisibleElement("have.text", "Database")
-    cy.get('[data-cy="database-text-field"]').should("be.visible").invoke('attr', 'placeholder').should('contain', 'Enter name of the database')
+    cy.get('[data-cy="label-database"]').verifyVisibleElement(
+      "have.text",
+      "Database"
+    );
+    cy.get('[data-cy="database-text-field"]')
+      .should("be.visible")
+      .invoke("attr", "placeholder")
+      .should("contain", "Enter name of the database");
 
     cy.get(postgreSqlSelector.buttonTestConnection).click();
     cy.get(postgreSqlSelector.textConnectionVerified, {
@@ -155,14 +157,13 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
-      cy.get('[data-cy="cypress-mariadb-button"]').verifyVisibleElement(
-        "have.text",
-        "cypress-mariadb"
-      );
-  
-      deleteDatasource("cypress-mariadb");
+    cy.get(
+      `[data-cy="cypress-${data.lastName}-mariadb-button"]`
+    ).verifyVisibleElement("have.text", `cypress-${data.lastName}-mariadb`);
+
+    deleteDatasource(`cypress-${data.lastName}-mariadb`);
   });
 });

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

@@ -7,7 +7,7 @@ import { commonText } from "Texts/common";
 import { closeDSModal, deleteDatasource } from "Support/utils/dataSource";
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 import {
   connectMongo,
@@ -34,10 +34,6 @@ describe("Data source MongoDB", () => {
   it("Should verify elements on MongoDB connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
-
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
       postgreSqlText.allDataSources
@@ -54,19 +50,8 @@ describe("Data source MongoDB", () => {
       "have.text",
       postgreSqlText.allCloudStorage
     );
+    selectAndAddDataSource("databases", mongoDbText.mongoDb, data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(
-      mongoDbText.mongoDb
-    );
-    cy.get("[data-cy*='data-source-']")
-      .eq(1)
-      .should("contain", mongoDbText.mongoDb);
-    cy.get('[data-cy="data-source-mongodb"]').click();
-
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      mongoDbText.mongoDb
-    );
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -155,19 +140,15 @@ describe("Data source MongoDB", () => {
       "Cannot read properties of null (reading '2')"
     );
     verifyCouldnotConnectWithAlert(mongoDbText.errorInvalisScheme);
-    cy.get(postgreSqlSelector.buttonSave).verifyVisibleElement(
-      "have.text",
-      postgreSqlText.buttonTextSave
-    );
+    cy.get(postgreSqlSelector.buttonSave)
+      .verifyVisibleElement("have.text", postgreSqlText.buttonTextSave)
+      .click();
+
+    deleteDatasource(`cypress-${data.lastName}-mongodb`);
   });
 
   it("Should verify the functionality of MongoDB connection form.", () => {
-    selectDataSource(mongoDbText.mongoDb);
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-mongodb`
-    );
+    selectAndAddDataSource("databases", mongoDbText.mongoDb, data.lastName);
 
     cy.get('[data-cy="query-select-dropdown"]').type(
       mongoDbText.optionConnectUsingConnectionString
@@ -175,7 +156,7 @@ describe("Data source MongoDB", () => {
 
     fillDataSourceTextField(
       mongoDbText.labelConnectionString,
-      mongoDbText.connectionStringPlaceholder,
+      "**************",
       Cypress.env("mongodb_connString"),
       "contain",
       { parseSpecialCharSequences: false, delay: 0 }
@@ -188,7 +169,7 @@ describe("Data source MongoDB", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();

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

@@ -6,7 +6,7 @@ import { commonSelectors } from "Selectors/common";
 import { commonWidgetText, commonText } from "Texts/common";
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
   addQuery,
   fillConnectionForm,
   openQueryEditor,
@@ -32,9 +32,6 @@ describe("Data sources MySql", () => {
   it("Should verify elements on MySQL connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -53,14 +50,8 @@ describe("Data sources MySql", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("MySQL");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "MySQL");
-    cy.get('[data-cy="data-source-mysql"]').click();
+    selectAndAddDataSource("databases", "MySQL", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "MySQL"
-    );
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -110,15 +101,11 @@ describe("Data sources MySql", () => {
       postgreSqlText.buttonTextSave
     );
     verifyCouldnotConnectWithAlert(mySqlText.errorConnectionRefused);
+    deleteDatasource(`cypress-${data.lastName}-mysql`);
   });
 
   it("Should verify the functionality of MySQL connection form.", () => {
-    selectDataSource("MySQL");
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-mysql`
-    );
+    selectAndAddDataSource("databases", "MySQL", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
@@ -140,8 +127,9 @@ describe("Data sources MySql", () => {
       postgreSqlText.placeholderEnterUserName,
       Cypress.env("mysql_user")
     );
-
-    cy.get(postgreSqlSelector.passwordTextField).type(
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
       Cypress.env("mysql_password")
     );
 
@@ -173,10 +161,24 @@ describe("Data sources MySql", () => {
     verifyCouldnotConnectWithAlert(
       "ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'103.171.99.42' (using password: YES)"
     );
-    cy.get(postgreSqlSelector.passwordTextField).type(
-      `{selectAll}{backspace}${Cypress.env("mysql_password")}`,
-      { log: false }
+    cy.get('[data-cy="-toggle-input"]').then(($el) => {
+      if ($el.is(":checked")) {
+        cy.get('[data-cy="-toggle-input"]').uncheck();
+      }
+    });
+
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
+      Cypress.env("mysql_password")
     );
+
+    // cy.get(postgreSqlSelector.passwordTextField).should("be.visible");
+    // cy.get(".datasource-edit-btn").should("be.visible").click();
+    // cy.get(postgreSqlSelector.passwordTextField).type(
+    //   `{selectAll}{backspace}${Cypress.env("mysql_password")}`,
+    //   { log: false }
+    // );
     cy.get(postgreSqlSelector.buttonTestConnection).click();
 
     cy.get(postgreSqlSelector.textConnectionVerified, {
@@ -186,7 +188,7 @@ describe("Data sources MySql", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();
@@ -199,7 +201,7 @@ describe("Data sources MySql", () => {
 
   it.skip("Should verify elements of the Query section.", () => {
     cy.viewport(1200, 1300);
-    selectDataSource("MySQL");
+    selectAndAddDataSource("databases", "MySQL", data.lastName);
     fillConnectionForm({
       Host: Cypress.env("mysql_host"),
       Port: Cypress.env("mysql_port"),
@@ -369,7 +371,7 @@ describe("Data sources MySql", () => {
 
   it.skip("Should verify CRUD operations on SQL Query.", () => {
     let dbName = "7mmplik";
-    selectDataSource("MySQL");
+    selectAndAddDataSource("databases", "MySQL", data.lastName);
 
     cy.clearAndType(
       postgreSqlSelector.dataSourceNameInputField,
@@ -448,7 +450,7 @@ describe("Data sources MySql", () => {
   });
 
   it.skip("Should verify bulk update", () => {
-    selectDataSource("MySQL");
+    selectAndAddDataSource("databases", "MySQL", data.lastName);
     cy.clearAndType(
       postgreSqlSelector.dataSourceNameInputField,
       mySqlText.cypressMySql

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

@@ -6,7 +6,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -21,12 +21,7 @@ describe("Data sources", () => {
 
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
-cy.reload();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
-
-
+    cy.reload();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -45,13 +40,11 @@ cy.reload();
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(
-      postgreSqlText.postgreSQL
+    selectAndAddDataSource(
+      "databases",
+      postgreSqlText.postgreSQL,
+      data.lastName
     );
-    cy.get("[data-cy*='data-source-']")
-      .eq(1)
-      .should("contain", postgreSqlText.postgreSQL);
-    cy.get(postgreSqlSelector.postgresDataSource).click();
 
     cy.get(postgreSqlSelector.dataSourceNameInputField).should(
       "have.value",
@@ -119,7 +112,11 @@ cy.reload();
   });
 
   it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource(postgreSqlText.postgreSQL);
+    selectAndAddDataSource(
+      "databases",
+      postgreSqlText.postgreSQL,
+      data.lastName
+    );
 
     cy.clearAndType(
       '[data-cy="data-source-name-input-filed"]',

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

@@ -7,7 +7,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -26,9 +26,6 @@ describe("Data sources", () => {
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     cy.wait(1000);
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -47,18 +44,12 @@ describe("Data sources", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(
-      postgreSqlText.postgreSQL
+    selectAndAddDataSource(
+      "databases",
+      postgreSqlText.postgreSQL,
+      data.lastName
     );
-    cy.get("[data-cy*='data-source-']")
-      .eq(1)
-      .should("contain", postgreSqlText.postgreSQL);
-    cy.get(postgreSqlSelector.postgresDataSource).click();
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      postgreSqlText.postgreSQL
-    );
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -115,14 +106,14 @@ describe("Data sources", () => {
       postgreSqlText.buttonTextSave
     );
     cy.get('[data-cy="connection-alert-text"]').should("be.visible");
+    deleteDatasource(`cypress-${data.lastName}-postgresql`);
   });
 
   it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource(postgreSqlText.postgreSQL);
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-postgresql`
+    selectAndAddDataSource(
+      "databases",
+      postgreSqlText.postgreSQL,
+      data.lastName
     );
 
     fillDataSourceTextField(
@@ -135,7 +126,11 @@ describe("Data sources", () => {
       postgreSqlText.placeholderEnterPort,
       "5432"
     );
-    cy.get('[data-cy="-toggle-input"]').uncheck();
+    cy.get('[data-cy="-toggle-input"]').then(($el) => {
+      if ($el.is(":checked")) {
+        cy.get('[data-cy="-toggle-input"]').uncheck();
+      }
+    });
     fillDataSourceTextField(
       postgreSqlText.labelDbName,
       postgreSqlText.placeholderNameOfDB,
@@ -146,8 +141,9 @@ describe("Data sources", () => {
       postgreSqlText.placeholderEnterUserName,
       "postgres"
     );
-
-    cy.get(postgreSqlSelector.passwordTextField).type(
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
       Cypress.env("pg_password")
     );
 
@@ -159,7 +155,7 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();
@@ -171,7 +167,11 @@ describe("Data sources", () => {
   });
 
   it.skip("Should verify elements of the Query section.", () => {
-    selectDataSource(postgreSqlText.postgreSQL);
+    selectAndAddDataSource(
+      "databases",
+      postgreSqlText.postgreSQL,
+      data.lastName
+    );
     fillConnectionForm(
       {
         Host: Cypress.env("pg_host"),
@@ -362,7 +362,11 @@ describe("Data sources", () => {
   });
 
   it.skip("Should verify CRUD operations on SQL Query.", () => {
-    selectDataSource(postgreSqlText.postgreSQL);
+    selectAndAddDataSource(
+      "databases",
+      postgreSqlText.postgreSQL,
+      data.lastName
+    );
 
     cy.clearAndType(
       postgreSqlSelector.dataSourceNameInputField,
@@ -449,7 +453,11 @@ describe("Data sources", () => {
   });
 
   it.skip("Should verify bulk update", () => {
-    selectDataSource(postgreSqlText.postgreSQL);
+    selectAndAddDataSource(
+      "databases",
+      postgreSqlText.postgreSQL,
+      data.lastName
+    );
     fillConnectionForm({
       Host: Cypress.env("pg_host"),
       Port: "5432",

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

@@ -6,7 +6,7 @@ import { commonSelectors } from "Selectors/common";
 import { commonText } from "Texts/common";
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 import {
   verifyCouldnotConnectWithAlert,
@@ -25,9 +25,6 @@ describe("Data source Redis", () => {
   it("Should verify elements on connecti Redison form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -46,16 +43,7 @@ describe("Data source Redis", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(redisText.redis);
-    cy.get("[data-cy*='data-source-']")
-      .eq(1)
-      .should("contain", redisText.redis);
-    cy.get('[data-cy="data-source-redis"]').click();
-
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      redisText.redis
-    );
+    selectAndAddDataSource("databases", redisText.redis, data.lastName);
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -104,14 +92,17 @@ describe("Data source Redis", () => {
       "have.text",
       redisText.errorMaxRetries
     );
+    cy.get(postgreSqlSelector.buttonSave)
+      .verifyVisibleElement("have.text", postgreSqlText.buttonTextSave)
+      .click();
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      postgreSqlText.toastDSSaved
+    );
+    deleteDatasource(`cypress-${data.lastName}-redis`);
   });
   it("Should verify the functionality of Redis connection form.", () => {
-    selectDataSource(redisText.redis);
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-redis`
-    );
+    selectAndAddDataSource("databases", redisText.redis, data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
@@ -129,7 +120,10 @@ describe("Data source Redis", () => {
       postgreSqlText.placeholderEnterUserName,
       "dev@tooljet.io"
     );
-    cy.get(postgreSqlSelector.passwordTextField).type(
+
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
       Cypress.env("redis_password")
     );
 
@@ -159,18 +153,25 @@ describe("Data source Redis", () => {
       postgreSqlText.placeholderEnterPort,
       Cypress.env("redis_port")
     );
-    cy.get(postgreSqlSelector.passwordTextField).type(
-      `{selectAll}{backspace}"redis_password"`
+
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
+      "redis_password"
     );
+
     cy.get(postgreSqlSelector.buttonTestConnection).click();
     cy.get('[data-cy="connection-alert-text"]').should(
       "have.text",
       "WRONGPASS invalid username-password pair or user is disabled."
     );
 
-    cy.get(postgreSqlSelector.passwordTextField).type(
-      `{selectAll}{backspace}${Cypress.env("redis_password")}`
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
+      Cypress.env("redis_password")
     );
+
     fillDataSourceTextField(
       postgreSqlText.labelUserName,
       postgreSqlText.placeholderEnterUserName,
@@ -195,7 +196,7 @@ describe("Data source Redis", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();

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

@@ -1,3 +1,4 @@
+import { fake } from "Fixtures/fake";
 import { postgreSqlSelector } from "Selectors/postgreSql";
 import { postgreSqlText } from "Texts/postgreSql";
 import { commonWidgetText, commonText } from "Texts/common";
@@ -6,13 +7,16 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
   addWidgetsToAddUser,
 } from "Support/utils/postgreSql";
 
+const data = {};
+data.lastName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+
 describe("Data sources", () => {
   beforeEach(() => {
     cy.appUILogin();
@@ -20,11 +24,7 @@ describe("Data sources", () => {
 
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
-cy.reload();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
-
+    cy.reload();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -43,14 +43,8 @@ cy.reload();
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("RethinkDB");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "RethinkDB");
-    cy.get('[data-cy="data-source-rethinkdb"]').click();
+    selectAndAddDataSource("databases", "RethinkDB", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "RethinkDB"
-    );
     cy.get('[data-cy="label-database"]').verifyVisibleElement(
       "have.text",
       "Database"
@@ -95,23 +89,19 @@ cy.reload();
       "have.text",
       postgreSqlText.couldNotConnect
     );
-    cy.get(postgreSqlSelector.buttonSave).verifyVisibleElement(
-      "have.text",
-      postgreSqlText.buttonTextSave
-    );
+
     cy.get(postgreSqlSelector.dangerAlertNotSupportSSL).verifyVisibleElement(
       "have.text",
       "Could not connect to localhost:28015.connect ECONNREFUSED ::1:28015"
     );
+    cy.get(postgreSqlSelector.buttonSave).verifyVisibleElement(
+      "have.text",
+      postgreSqlText.buttonTextSave
+    );
   });
 
-  it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource("RethinkDB");
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      postgreSqlText.psqlName
-    );
+  it("Should verify the functionality of RethinkDB connection form.", () => {
+    selectAndAddDataSource("databases", "RethinkDB", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
@@ -146,7 +136,7 @@ cy.reload();
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(postgreSqlSelector.datasourceLabelOnList)

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

@@ -7,7 +7,7 @@ import { commonSelectors } from "Selectors/common";
 import { commonText } from "Texts/common";
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 import {
   verifyCouldnotConnectWithAlert,
@@ -26,9 +26,6 @@ describe("Data sources AWS S3", () => {
   it("Should verify elements on AWS S3 connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -47,14 +44,7 @@ describe("Data sources AWS S3", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type(s3Text.awsS3);
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", s3Text.awsS3);
-    cy.get(s3Selector.awsDatasource).click();
-
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      s3Text.awsS3
-    );
+    selectAndAddDataSource("cloudstorage", s3Text.awsS3, data.lastName);
     cy.get(s3Selector.accessKeyLabel).verifyVisibleElement(
       "have.text",
       s3Text.accessKey
@@ -103,15 +93,18 @@ describe("Data sources AWS S3", () => {
       "have.text",
       s3Text.alertRegionIsMissing
     );
+    cy.get(postgreSqlSelector.buttonSave)
+      .verifyVisibleElement("have.text", postgreSqlText.buttonTextSave)
+      .click();
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      postgreSqlText.toastDSSaved
+    );
+    deleteDatasource(`cypress-${data.lastName}-aws-s3`);
   });
 
   it("Should verify the functionality of AWS S3 connection form.", () => {
-    selectDataSource(s3Text.awsS3);
-
-    cy.clearAndType(
-      s3Selector.dataSourceNameInput,
-      `cypress-${data.lastName}-aws-s3`
-    );
+    selectAndAddDataSource("cloudstorage", s3Text.awsS3, data.lastName);
 
     fillDataSourceTextField(
       s3Text.accessKey,
@@ -191,7 +184,7 @@ describe("Data sources AWS S3", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();

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

@@ -6,7 +6,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -21,7 +21,7 @@ describe("Data sources", () => {
 
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
-cy.reload();
+    cy.reload();
     cy.get(commonSelectors.addNewDataSourceButton)
       .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
       .click();
@@ -102,7 +102,7 @@ cy.reload();
   });
 
   it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource(postgreSqlText.postgreSQL);
+    selectAndAddDataSource(postgreSqlText.postgreSQL);
 
     cy.clearAndType(
       '[data-cy="data-source-name-input-filed"]',

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

@@ -5,7 +5,7 @@ import { commonSelectors } from "Selectors/common";
 import { commonText } from "Texts/common";
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 import { deleteDatasource, closeDSModal } from "Support/utils/dataSource";
 
@@ -20,10 +20,6 @@ describe("Data source SMTP", () => {
   it("Should verify elements on  SMTP connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
-
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
       postgreSqlText.allDataSources
@@ -41,14 +37,8 @@ describe("Data source SMTP", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("SMTP");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "SMTP");
-    cy.get('[data-cy="data-source-smtp"]').click();
+    selectAndAddDataSource("apis", "SMTP", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "SMTP"
-    );
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -94,15 +84,11 @@ describe("Data source SMTP", () => {
       "have.text",
       "Invalid credentials"
     );
+    deleteDatasource(`cypress-${data.lastName}-smtp`);
   });
 
   it("Should verify the functionality of SMTP connection form.", () => {
-    selectDataSource("SMTP");
-
-    cy.clearAndType(
-      postgreSqlSelector.dataSourceNameInputField,
-      `cypress-${data.lastName}-smtp`
-    );
+    selectAndAddDataSource("apis", "SMTP", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
@@ -121,7 +107,9 @@ describe("Data source SMTP", () => {
       Cypress.env("smtp_user")
     );
 
-    cy.get(postgreSqlSelector.passwordTextField).type(
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
       Cypress.env("smtp_password")
     );
 
@@ -135,7 +123,7 @@ describe("Data source SMTP", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();

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

@@ -9,7 +9,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -27,9 +27,6 @@ describe("Data sources", () => {
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -47,15 +44,7 @@ describe("Data sources", () => {
       "have.text",
       postgreSqlText.allCloudStorage
     );
-
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("Snowflake");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "Snowflake");
-    cy.get("[data-cy='data-source-snowflake']").click();
-
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "Snowflake"
-    );
+    selectAndAddDataSource("databases", "Snowflake", data.lastName);
 
     cy.get(postgreSqlSelector.labelUserName).verifyVisibleElement(
       "have.text",
@@ -114,17 +103,13 @@ describe("Data sources", () => {
     );
     cy.get('[data-cy="connection-alert-text"]').should(
       "have.text",
-      "A user name must be specified."
+      "Network error. Could not reach Snowflake."
     );
+    deleteDatasource(`cypress-${data.lastName}-snowflake`);
   });
 
-  it.skip("Should verify the functionality of Snowflake connection form.", () => {
-    selectDataSource("Snowflake");
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-snowflake`
-    );
+  it.skip("Should verify the functionality of PostgreSQL connection form.", () => {
+    selectAndAddDataSource("databases", "Snowflake", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelUserName,
@@ -161,7 +146,7 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();

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

@@ -9,7 +9,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -27,9 +27,6 @@ describe("Data sources", () => {
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -48,14 +45,8 @@ describe("Data sources", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("SQL Server");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "SQL Server");
-    cy.get('[data-cy="data-source-sql server"]').click();
+    selectAndAddDataSource("databases", "SQL Server", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "SQL Server"
-    );
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -116,15 +107,11 @@ describe("Data sources", () => {
       "have.text",
       "Failed to connect to localhost:1433 - Could not connect (sequence)"
     );
+    deleteDatasource(`cypress-${data.lastName}-sql-server`);
   });
 
-  it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource("SQL Server");
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-sqlserver`
-    );
+  it("Should verify the functionality of SQL Server connection form.", () => {
+    selectAndAddDataSource("databases", "SQL Server", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
@@ -152,7 +139,9 @@ describe("Data sources", () => {
       Cypress.env("sqlserver_user")
     );
 
-    cy.get(postgreSqlSelector.passwordTextField).type(
+    fillDataSourceTextField(
+      postgreSqlText.labelPassword,
+      "Enter password",
       Cypress.env("sqlserver_password")
     );
 
@@ -164,13 +153,13 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();
     cy.get(
-      `[data-cy="cypress-${data.lastName}-sqlserver-button"]`
-    ).verifyVisibleElement("have.text", `cypress-${data.lastName}-sqlserver`);
-    deleteDatasource(`cypress-${data.lastName}-sqlserver`);
+      `[data-cy="cypress-${data.lastName}-sql-server-button"]`
+    ).verifyVisibleElement("have.text", `cypress-${data.lastName}-sql-server`);
+    deleteDatasource(`cypress-${data.lastName}-sql-server`);
   });
 });

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

@@ -9,7 +9,7 @@ import {
   addQuery,
   fillDataSourceTextField,
   fillConnectionForm,
-  selectDataSource,
+  selectAndAddDataSource,
   openQueryEditor,
   selectQueryMode,
   addGuiQuery,
@@ -27,9 +27,6 @@ describe("Data sources", () => {
   it("Should verify elements on connection form", () => {
     cy.get(commonSelectors.globalDataSourceIcon).click();
     closeDSModal();
-    cy.get(commonSelectors.addNewDataSourceButton)
-      .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-      .click();
 
     cy.get(postgreSqlSelector.allDatasourceLabelAndCount).should(
       "have.text",
@@ -48,14 +45,8 @@ describe("Data sources", () => {
       postgreSqlText.allCloudStorage
     );
 
-    cy.get(postgreSqlSelector.dataSourceSearchInputField).type("TypeSense");
-    cy.get("[data-cy*='data-source-']").eq(1).should("contain", "TypeSense");
-    cy.get('[data-cy="data-source-typesense"]').click();
+    selectAndAddDataSource("databases", "TypeSense", data.lastName);
 
-    cy.get(postgreSqlSelector.dataSourceNameInputField).should(
-      "have.value",
-      "TypeSense"
-    );
     cy.get(postgreSqlSelector.labelHost).verifyVisibleElement(
       "have.text",
       postgreSqlText.labelHost
@@ -103,15 +94,11 @@ describe("Data sources", () => {
       "have.text",
       "Ensure that apiKey is set"
     );
+    deleteDatasource(`cypress-${data.lastName}-typesense`);
   });
 
-  it("Should verify the functionality of PostgreSQL connection form.", () => {
-    selectDataSource("TypeSense");
-
-    cy.clearAndType(
-      '[data-cy="data-source-name-input-filed"]',
-      `cypress-${data.lastName}-typesense`
-    );
+  it("Should verify the functionality of TypeSense connection form.", () => {
+    selectAndAddDataSource("databases", "TypeSense", data.lastName);
 
     fillDataSourceTextField(
       postgreSqlText.labelHost,
@@ -138,7 +125,7 @@ describe("Data sources", () => {
 
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      postgreSqlText.toastDSAdded
+      postgreSqlText.toastDSSaved
     );
 
     cy.get(commonSelectors.globalDataSourceIcon).click();

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

@@ -20,8 +20,9 @@ import {
 
 describe("Editor- Global Settings", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
   });
 
   it("should verify global settings", () => {
@@ -42,13 +43,14 @@ describe("Editor- Global Settings", () => {
       "have.text",
       "Maintenance mode"
     );
+    cy.hideTooltip();
     cy.get('[data-cy="label-max-canvas-width"]').verifyVisibleElement(
       "have.text",
       "Max width of canvas"
     );
     cy.get('[data-cy="label-bg-canvas"]').verifyVisibleElement(
       "have.text",
-      "Background color of canvas"
+      "Canvas background"
     );
     // cy.get('[data-cy="canvas-bg-colour-picker"]').click();
     selectColourFromColourPicker(
@@ -103,6 +105,6 @@ describe("Editor- Global Settings", () => {
       .invoke("attr", "class")
       .should("contains", "disabled-btn");
 
-    cy.wait(2000);
+    cy.apiDeleteApp();
   });
 });

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

@@ -14,13 +14,14 @@ import { multipageSelector } from "Selectors/multipage";
 
 describe("Editor- Inspector", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
   });
 
   it("should verify the values of inspector", () => {
     const countGlobal =
-      Cypress.env("environment") === "Community" ? "3 entries " : "5 entries ";
+      Cypress.env("environment") === "Community" ? "4 entries " : "5 entries ";
     const countUser =
       Cypress.env("environment") === "Community" ? "4 entries " : "5 entries ";
     cy.get(commonWidgetSelector.sidebarinspector).click();
@@ -58,13 +59,14 @@ describe("Editor- Inspector", () => {
         "have.text",
         "id"
       );
-      openNode("mode");
-      verifyValue("value", "String", `"edit"`);
     }
+    openNode("mode");
+    verifyValue("value", "String", `"edit"`);
 
     openNode("groups");
     verifyValue("0", "String", `"all_users"`);
     verifyValue("1", "String", `"admin"`);
+    verifyNodeData("constants", "Object", "0 entry ");
 
     openNode("globals");
     openNode("page");
@@ -127,7 +129,7 @@ describe("Editor- Inspector", () => {
     verifyValue("key", "String", `"value"`);
 
     cy.get(`[data-cy="inspector-node-key"] > .mx-1`).realHover();
-    cy.get(".mx-1 > img").realClick();
+    cy.get("[data-cy='copy-icon']").realClick();
     cy.realPress("Escape");
 
     cy.window().then((win) => {
@@ -152,5 +154,6 @@ describe("Editor- Inspector", () => {
     cy.get(`[data-cy="inspector-node-button1"] > .mx-1`).realHover();
     cy.get('[style="height: 13px; width: 13px;"] > img').click();
     cy.notVisible(commonWidgetSelector.draggableWidget("button1"));
+    cy.apiDeleteApp();
   });
 });

cypress-tests/cypress/e2e/editor/multipage/multipageHappypath.cy.js

@@ -40,8 +40,9 @@ import {
 
 describe("Multipage", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
   });
 
   it("should verify the elements on multipage", () => {
@@ -53,8 +54,6 @@ describe("Multipage", () => {
     data.maximumLength = randomNumber(8, 10);
     data.customText = randomString(12);
 
-    cy.renameApp(data.appName);
-
     cy.get(multipageSelector.sidebarPageButton).click();
     cy.get(multipageSelector.pagesLabel).verifyVisibleElement(
       "have.text",
@@ -112,7 +111,8 @@ describe("Multipage", () => {
 
     cy.get(multipageSelector.pagesPinIcon).click();
     cy.get(multipageSelector.sidebarPageButton).click();
-    cy.get(multipageSelector.pagesMenuIcon).click({ force: true });
+    cy.hideTooltip();
+    cy.get(multipageSelector.pagesMenuIcon).realClick();
 
     cy.get(multipageSelector.pageHeaderSettings).verifyVisibleElement(
       "have.text",
@@ -133,7 +133,7 @@ describe("Multipage", () => {
     cy.get('[data-cy="pages-name-test_page"]')
       .verifyVisibleElement("have.text", "test_page")
       .click();
-    cy.get(multipageSelector.pageMenuIcon).click();
+    cy.get(multipageSelector.pageMenuIcon).eq(1).click();
     cy.wait(500);
     cy.get(multipageSelector.pageHandleText).verifyVisibleElement(
       "have.text",
@@ -151,11 +151,14 @@ describe("Multipage", () => {
       .find(multipageSelector.hidePageIcon)
       .should("be.visible");
 
-    hideOrUnhidePage("home", "unhide");
+    hideOrUnhidePage("home", "show");
     cy.notVisible(multipageSelector.hidePageIcon);
 
-    cy.get(multipageSelector.homePageLabel).click();
-    cy.get(multipageSelector.pageMenuIcon).click();
+    cy.get(multipageSelector.homePageLabel)
+      .click()
+      .parent()
+      .find(multipageSelector.pageMenuIcon)
+      .click();
     cy.wait(500);
     cy.get(multipageSelector.deletePageOptionButton).click();
     cy.get(".modal-title").verifyVisibleElement(
@@ -173,16 +176,20 @@ describe("Multipage", () => {
     cy.get(multipageSelector.modalCancelButton)
       .verifyVisibleElement("have.text", "Cancel")
       .click();
-    cy.get('[data-cy="pages-name-test_page"]').should("be.visible");
-
-    cy.get(multipageSelector.pageMenuIcon).click();
     cy.wait(500);
+    cy.get('[data-cy="pages-name-home"]')
+      .should("be.visible")
+      .click()
+      .parent()
+      .find(multipageSelector.pageMenuIcon)
+      .click();
+
     cy.get(multipageSelector.deletePageOptionButton).click();
     cy.get(multipageSelector.modalConfirmButton).click();
     cy.notVisible(multipageSelector.homePageLabel);
-
-    cy.get(multipageSelector.pageMenuIcon).click();
     cy.wait(500);
+    cy.get(multipageSelector.pageMenuIcon).click();
+
     cy.get(multipageSelector.eventHandlerOptionButton).click();
     cy.get(multipageSelector.modalTitlePageEvents).verifyVisibleElement(
       "have.text",
@@ -220,7 +227,12 @@ describe("Multipage", () => {
     clearSearch();
 
     addNewPage("test");
-    cy.get(multipageSelector.pageMenuIcon).click();
+    cy.get('[data-cy="pages-name-test"]')
+      .should("be.visible")
+      .click()
+      .parent()
+      .find(multipageSelector.pageMenuIcon)
+      .click();
     cy.wait(500);
     cy.get(multipageSelector.pageHandleText).click();
     cy.get(multipageSelector.modalTitleEditPageHandle).verifyVisibleElement(
@@ -264,7 +276,7 @@ describe("Multipage", () => {
 
     hideOrUnhidePage("pageOne");
     hideOrUnhidePage("pageTwo");
-    hideOrUnhidePage("pageOne", "unhide");
+    hideOrUnhidePage("pageOne", "show");
     addEventHandler("pageThree");
     cy.get(multipageSelector.closeModal).click();
     setHomePage("pageThree");

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

@@ -59,11 +59,13 @@ import {
   searchPage,
 } from "Support/utils/multipage";
 import { verifyNodeData, openNode, verifyValue } from "Support/utils/inspector";
+import { deleteDownloadsFolder } from "Support/utils/common";
 
 describe("RunJS", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.viewport(1800, 1800);
     cy.dragAndDropWidget("Button");
     resizeQueryPanel("80");
@@ -84,10 +86,12 @@ describe("RunJS", () => {
     openNode("runjs1");
     verifyValue("data", "Boolean", "true");
     verifyValue("rawData", "Boolean", "true");
+    cy.apiDeleteApp();
   });
 
   it("should verify actions", () => {
     const data = {};
+    deleteDownloadsFolder();
     data.customText = randomString(12);
 
     selectQueryFromLandingPage("runjs", "JavaScript");
@@ -195,6 +199,11 @@ describe("RunJS", () => {
     addInputOnQueryField("runjs", "actions.logout()");
     query("run");
     cy.get('[data-cy="sign-in-header"]').should("be.visible");
+    cy.apiLogin();
+    cy.openApp(
+      Cypress.env("appId"),
+      '[data-cy="draggable-widget-modal1-launch-button"]'
+    );
   });
 
   it("should verify global and page data", () => {
@@ -232,10 +241,6 @@ describe("RunJS", () => {
     query("preview");
     verifypreview("raw", `["all_users","admin"]`);
     if (Cypress.env("environment") != "Community") {
-      addInputOnQueryField("runjs", "return globals.mode");
-      query("preview");
-      verifypreview("raw", `{"value":"edit"}`);
-
       addInputOnQueryField("runjs", "return globals.environment.name");
       query("preview");
       verifypreview("raw", `development`);
@@ -247,6 +252,15 @@ describe("RunJS", () => {
       query("preview");
       verifypreview("raw", `true`);
     }
+
+    addInputOnQueryField("runjs", "return globals.mode");
+    query("preview");
+    verifypreview("raw", `{"value":"edit"}`);
+
+    addInputOnQueryField("runjs", "return constants");
+    query("preview");
+    verifypreview("raw", `{}`);
+    cy.apiDeleteApp();
   });
 
   it("should verify action by button", () => {
@@ -272,6 +286,7 @@ describe("RunJS", () => {
     cy.get('[data-cy="query-selection-field"]').should("have.text", "newrunjs");
     cy.get(commonWidgetSelector.draggableWidget("button1")).click();
     cy.verifyToastMessage(commonSelectors.toastMessage, "alert from runjs");
+    cy.apiDeleteApp();
   });
 
   it("should verify runjs toggle options", () => {
@@ -288,7 +303,11 @@ describe("RunJS", () => {
     cy.wait(`@editQuery`);
     cy.waitForAutoSave();
     cy.reload();
-    cy.verifyToastMessage(commonSelectors.toastMessage, "alert from runjs");
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      "alert from runjs",
+      false
+    );
 
     changeQueryToggles("confirmation-before-run");
     cy.wait(`@editQuery`);
@@ -313,5 +332,6 @@ describe("RunJS", () => {
     cy.get('[data-cy="modal-confirm-button"]').realClick();
     cy.verifyToastMessage(commonSelectors.toastMessage, "Success alert");
     cy.verifyToastMessage(commonSelectors.toastMessage, "alert from runjs");
+    cy.apiDeleteApp();
   });
 });

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

@@ -62,8 +62,9 @@ import { verifyNodeData, openNode, verifyValue } from "Support/utils/inspector";
 
 describe("runpy", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.viewport(1800, 1800);
     cy.dragAndDropWidget("Button");
     resizeQueryPanel("80");
@@ -86,6 +87,7 @@ describe("runpy", () => {
     openNode("runpy1");
     verifyValue("data", "Boolean", "true");
     verifyValue("rawData", "Boolean", "true");
+    cy.apiDeleteApp();
   });
 
   it("should verify actions", () => {
@@ -212,7 +214,6 @@ actions.unsetPageVariable('pageVar')`
     cy.wait(200);
     cy.waitForAutoSave();
     query("run");
-    waitForQueryAction("run");
     cy.get('[data-cy="sign-in-header"]').should("be.visible");
   });
 
@@ -247,10 +248,6 @@ actions.unsetPageVariable('pageVar')`
     waitForQueryAction("preview");
     verifypreview("raw", `["all_users","admin"]`);
     if (Cypress.env("environment") != "Community") {
-      addInputOnQueryField("runpy", "tj_globals.mode.value");
-      query("preview");
-      verifypreview("raw", `edit`);
-
       addInputOnQueryField("runpy", "tj_globals.environment.name");
       query("preview");
       verifypreview("raw", `development`);
@@ -262,6 +259,15 @@ actions.unsetPageVariable('pageVar')`
       // query("preview");
       // verifypreview("raw", `true`);
     }
+
+    addInputOnQueryField("runpy", "tj_globals.mode.value");
+    query("preview");
+    verifypreview("raw", `edit`);
+    addInputOnQueryField("runpy", "constants");
+    query("preview");
+    waitForQueryAction("preview");
+    verifypreview("raw", `{}`);
+    cy.apiDeleteApp();
   });
 
   it("should verify action by button", () => {
@@ -287,6 +293,7 @@ actions.unsetPageVariable('pageVar')`
     cy.get('[data-cy="query-selection-field"]').should("have.text", "newrunpy");
     cy.get(commonWidgetSelector.draggableWidget("button1")).click();
     cy.verifyToastMessage(commonSelectors.toastMessage, "alert from runpy");
+    cy.apiDeleteApp();
   });
 
   it("should verify runpy toggle options", () => {
@@ -336,5 +343,6 @@ actions.unsetPageVariable('pageVar')`
       "alert from runpy",
       false
     );
+    cy.apiDeleteApp();
   });
 });

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

@@ -33,8 +33,9 @@ import {
 
 describe("Editor- Test Button widget", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 500);
   });
 
@@ -95,9 +96,7 @@ describe("Editor- Test Button widget", () => {
     );
 
     verifyControlComponentAction(data.widgetName, data.customMessage);
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
+    cy.apiDeleteApp(data.appName);
   });
 
   it("should verify the styles of the button widget", () => {
@@ -224,9 +223,7 @@ describe("Editor- Test Button widget", () => {
       data.boxShadowColor,
       4
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
+    cy.apiDeleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -281,7 +278,7 @@ describe("Editor- Test Button widget", () => {
         commonWidgetText.parameterBorderRadius
       )
     )
-      .last()
+      .first()
       .clear()
       .type(buttonText.borderRadiusInput);
 
@@ -340,8 +337,7 @@ describe("Editor- Test Button widget", () => {
       data.boxShadowParam
     );
 
-    cy.get(commonSelectors.viewerPageLogo).click();
-    cy.deleteApp(data.appName);
+    cy.apiDeleteApp(data.appName);
   });
 
   it("Should verify csa", () => {
@@ -400,5 +396,6 @@ describe("Editor- Test Button widget", () => {
     cy.get(
       commonWidgetSelector.draggableWidget(buttonText.defaultWidgetName)
     ).should("not.be.visible");
+    cy.apiDeleteApp();
   });
 });

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

@@ -35,18 +35,21 @@ describe("Basic components", () => {
   const data = {};
   beforeEach(() => {
     data.appName = `${fake.companyName}-${fake.companyName}-App`;
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.modifyCanvasSize(900, 900);
-    cy.renameApp(data.appName);
     cy.intercept("GET", "/api/comments/*").as("loadComments");
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("Should verify Toggle switch", () => {
-    cy.dragAndDropWidget("Toggle Switch", 50, 50);
+    cy.dragAndDropWidget("Toggle Switch", 200, 200);
     verifyComponent("toggleswitch1");
 
-    cy.resizeWidget("toggleswitch1", 650, 400);
+    cy.resizeWidget("toggleswitch1", 650, 400, false);
 
     openEditorSidebar("toggleswitch1");
     editAndVerifyWidgetName("toggleswitch2");
@@ -67,21 +70,18 @@ describe("Basic components", () => {
     cy.go("back");
     cy.waitForAppLoad();
     deleteComponentAndVerify("toggleswitch2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Checkbox", () => {
-    cy.dragAndDropWidget("Checkbox", 50, 50);
-    // cy.resizeWidget("checkbox1", 50, 200);
+    resizeQueryPanel("0");
+    cy.dragAndDropWidget("Checkbox", 200, 200);
+    // cy.resizeWidget("checkbox1", 50, 200,false);
     cy.forceClickOnCanvas();
     verifyComponent("checkbox1");
 
-    cy.resizeWidget("checkbox1", 650, 400);
-
     openEditorSidebar("checkbox1");
     editAndVerifyWidgetName("checkbox2");
+    cy.resizeWidget("checkbox2", 650, 400, false);
 
     verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
     cy.forceClickOnCanvas();
@@ -96,18 +96,15 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("checkbox2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Radio Button", () => {
-    cy.dragAndDropWidget("Radio Button", 50, 50);
-    // cy.resizeWidget("radiobutton1", 100, 200);
+    cy.dragAndDropWidget("Radio Button", 200, 200);
+    // cy.resizeWidget("radiobutton1", 100, 200,false);
     cy.forceClickOnCanvas();
     verifyComponent("radiobutton1");
 
-    cy.resizeWidget("radiobutton1", 650, 400);
+    cy.resizeWidget("radiobutton1", 650, 400, false);
 
     openEditorSidebar("radiobutton1");
     editAndVerifyWidgetName("radiobutton2");
@@ -125,20 +122,17 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("radiobutton2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
   it("Should verify Dropdown", () => {
-    cy.dragAndDropWidget("Dropdown", 50, 50);
-    // cy.resizeWidget("radiobutton1", 100, 200);
+    resizeQueryPanel("0");
+    cy.dragAndDropWidget("Dropdown", 200, 200);
+    cy.resizeWidget("dropdown1", 400, 500, false);
     cy.forceClickOnCanvas();
     verifyComponent("dropdown1");
 
-    cy.resizeWidget("dropdown1", 650, 400);
-
     openEditorSidebar("dropdown1");
     editAndVerifyWidgetName("dropdown2");
+    cy.resizeWidget("dropdown2", 650, 400, false);
 
     verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
     cy.forceClickOnCanvas();
@@ -153,22 +147,18 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("dropdown2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
   //pending
-  it.skip("Should verify Rating", () => {
+  it("Should verify Rating", () => {
     cy.dragAndDropWidget("Rating", 200, 200);
     cy.get('[data-cy="draggable-widget-starrating1"]').click({ force: true });
-    cy.resizeWidget("starrating1", 200, 500);
+    cy.resizeWidget("starrating1", 400, 500, false);
     cy.forceClickOnCanvas();
     verifyComponent("starrating1");
 
-    cy.resizeWidget("starrating1", 650, 400);
-
     openEditorSidebar("starrating1");
     editAndVerifyWidgetName("starrating2");
+    cy.resizeWidget("starrating2", 650, 400, false);
 
     verifyAndModifyParameter(commonWidgetText.parameterLabel, "label");
     cy.forceClickOnCanvas();
@@ -183,9 +173,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("starrating2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Button Group", () => {
@@ -193,7 +180,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("buttongroup1");
 
-    cy.resizeWidget("buttongroup1", 650, 400);
+    cy.resizeWidget("buttongroup1", 650, 400, false);
 
     openEditorSidebar("buttongroup1");
     editAndVerifyWidgetName("buttongroup2");
@@ -210,18 +197,15 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("buttongroup2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Calendar", () => {
-    cy.dragAndDropWidget("Calendar", 50, 50);
+    cy.dragAndDropWidget("Calendar", 200, 200);
     cy.get('[data-cy="draggable-widget-calendar1"]').click({ force: true });
     cy.forceClickOnCanvas();
     verifyComponent("calendar1");
 
-    cy.resizeWidget("calendar1", 650, 400);
+    cy.resizeWidget("calendar1", 650, 400, false);
 
     openEditorSidebar("calendar1");
     editAndVerifyWidgetName("calendar2");
@@ -232,38 +216,31 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("calendar2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Chart", () => {
-    cy.dragAndDropWidget("Chart", 50, 50);
+    cy.dragAndDropWidget("Chart", 200, 200);
     cy.get('[data-cy="draggable-widget-chart1"]').click({ force: true });
-    cy.forceClickOnCanvas();
     verifyComponent("chart1");
 
-    cy.resizeWidget("chart1", 650, 400);
-
     openEditorSidebar("chart1");
     editAndVerifyWidgetName("chart2", ["Chart data", "Properties"]);
+    // cy.resizeWidget("chart1", 650, 400, false);
 
     verifyAndModifyParameter("Title", "label");
     cy.forceClickOnCanvas();
-    cy.waitForAutoSave();
+    cy.resizeWidget("chart2", 650, 400, false);
     cy.get('[data-cy="draggable-widget-chart2"]').should(
       "contain.text",
       "label"
     );
+    cy.waitForAutoSave();
 
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
     verifyComponent("chart2");
 
     cy.go("back");
     deleteComponentAndVerify("chart2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Circular Progress Bar", () => {
@@ -271,7 +248,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("circularprogressbar1");
 
-    cy.resizeWidget("circularprogressbar1", 650, 400);
+    cy.resizeWidget("circularprogressbar1", 650, 400, false);
 
     openEditorSidebar("circularprogressbar1");
     editAndVerifyWidgetName("circularprogressbar2");
@@ -284,9 +261,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("circularprogressbar2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Code Editor", () => {
@@ -295,7 +269,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("codeeditor1");
 
-    cy.resizeWidget("codeeditor1", 650, 400);
+    cy.resizeWidget("codeeditor1", 650, 400, false);
 
     openEditorSidebar("codeeditor1");
     editAndVerifyWidgetName("codeeditor2");
@@ -307,9 +281,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("codeeditor2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Color Picker", () => {
@@ -318,7 +289,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("colorpicker1");
 
-    cy.resizeWidget("colorpicker1", 650, 400);
+    cy.resizeWidget("colorpicker1", 650, 400, false);
 
     openEditorSidebar("colorpicker1");
     editAndVerifyWidgetName("colorpicker2");
@@ -331,17 +302,13 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("colorpicker2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
-  //needed fix
-  it.skip("Should verify Custom Component", () => {
-    cy.dragAndDropWidget("Custom Component", 50, 50);
-    cy.get('[data-cy="draggable-widget-customcomponent1"]').click({
-      force: true,
-    });
-    cy.forceClickOnCanvas();
+  it("Should verify Custom Component", () => {
+    cy.dragAndDropWidget("Custom Component", 200, 200);
+    // cy.get('[data-cy="draggable-widget-customcomponent1"]').click({
+    //   force: true,
+    // });
+    // cy.forceClickOnCanvas();
     verifyComponent("customcomponent1");
     openEditorSidebar("customcomponent1");
 
@@ -352,39 +319,33 @@ describe("Basic components", () => {
       { delay: 30 }
     );
     cy.forceClickOnCanvas();
-
-    cy.get(commonWidgetSelector.draggableWidget(name)).trigger("mouseover");
-    cy.get(commonWidgetSelector.widgetConfigHandle(name))
-      .click()
-      .should("have.text", name);
-
-    cy.resizeWidget("customcomponent1", 650, 400);
-
-    openEditorSidebar("customcomponent1");
-    cy.forceClickOnCanvas();
     cy.waitForAutoSave();
+    cy.resizeWidget("customcomponent2", 650, 400, false);
+    cy.wait(2000);
+    cy.get(
+      commonWidgetSelector.draggableWidget("customcomponent2")
+    ).realHover();
+    cy.get(commonWidgetSelector.widgetConfigHandle("customcomponent2"))
+      .click()
+      .should("have.text", "customcomponent2");
 
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
     verifyComponent("customcomponent2", ["Code"]);
 
     cy.go("back");
     deleteComponentAndVerify("customcomponent2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Container", () => {
-    cy.dragAndDropWidget("Container", 50, 50);
+    cy.dragAndDropWidget("Container", 200, 200);
     cy.forceClickOnCanvas();
     verifyComponent("container1");
 
-    cy.resizeWidget("container1", 650, 400);
-
     openEditorSidebar("container1");
     editAndVerifyWidgetName("container2", ["Layout"]);
 
     cy.forceClickOnCanvas();
+    cy.resizeWidget("container2", 650, 400, false);
     cy.waitForAutoSave();
 
     cy.openInCurrentTab(commonWidgetSelector.previewButton);
@@ -392,9 +353,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("container2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Date-Range Picker", () => {
@@ -403,7 +361,7 @@ describe("Basic components", () => {
     cy.forceClickOnCanvas();
     verifyComponent("daterangepicker1");
 
-    cy.resizeWidget("daterangepicker1", 650, 400);
+    cy.resizeWidget("daterangepicker1", 650, 400, false);
 
     openEditorSidebar("daterangepicker1");
     editAndVerifyWidgetName("daterangepicker2");
@@ -416,11 +374,8 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("daterangepicker2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
-  //visible issue
+  // visible issue
   it.skip("Should verify Divider", () => {
     verifyComponentWithOutLabel(
       "Divider",
@@ -440,10 +395,10 @@ describe("Basic components", () => {
   });
 
   it("Should verify Form", () => {
-    cy.dragAndDropWidget("Form", 50, 50);
+    cy.dragAndDropWidget("Form", 200, 200);
     verifyComponent("form1");
 
-    cy.resizeWidget("form1", 650, 400);
+    cy.resizeWidget("form1", 650, 400, false);
 
     openEditorSidebar("form1");
     editAndVerifyWidgetName("form2");
@@ -455,16 +410,13 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("form2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify HTML", () => {
-    cy.dragAndDropWidget("HTML Viewe", 50, 50, "HTML Viewer"); // search logic WIP
+    cy.dragAndDropWidget("HTML Viewe", 200, 200, "HTML Viewer"); // search logic WIP
     verifyComponent("html1");
 
-    cy.resizeWidget("html1", 650, 400);
+    cy.resizeWidget("html1", 650, 400, false);
 
     openEditorSidebar("html1");
     editAndVerifyWidgetName("html2");
@@ -476,9 +428,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("html2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Icon", () => {
@@ -489,7 +438,7 @@ describe("Basic components", () => {
     verifyComponentWithOutLabel("Iframe", "iframe1", "iframe2", data.appName);
   });
 
-  it.skip("Should verify Kamban", () => {
+  it.skip("Should verify Kanban", () => {
     verifyComponentWithOutLabel("Kanban", "kanban1", "kanban2", data.appName);
   });
 
@@ -498,7 +447,7 @@ describe("Basic components", () => {
   });
 
   it("Should verify Map", () => {
-    cy.dragAndDropWidget("Map", 50, 50);
+    cy.dragAndDropWidget("Map", 200, 200);
     cy.get("body").then(($body) => {
       if ($body.find(".dismissButton").length > 0) {
         cy.get(".dismissButton").click();
@@ -507,7 +456,7 @@ describe("Basic components", () => {
 
     verifyComponent("map1");
 
-    cy.resizeWidget("map1", 650, 400);
+    cy.resizeWidget("map1", 650, 400, false);
 
     openEditorSidebar("map1");
     editAndVerifyWidgetName("map2");
@@ -519,9 +468,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("map2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Modal", () => {
@@ -529,10 +475,10 @@ describe("Basic components", () => {
   });
 
   it("Should verify PDF", () => {
-    cy.dragAndDropWidget("PDF", 50, 50);
+    cy.dragAndDropWidget("PDF", 200, 200);
     verifyComponent("pdf1");
 
-    cy.resizeWidget("pdf1", 650, 400);
+    cy.resizeWidget("pdf1", 650, 400, false);
 
     openEditorSidebar("pdf1");
     editAndVerifyWidgetName("pdf2");
@@ -544,9 +490,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("pdf2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Pagination", () => {
@@ -567,7 +510,7 @@ describe("Basic components", () => {
     );
   });
 
-  it.skip("Should verify Range Slider", () => {
+  it("Should verify Range Slider", () => {
     verifyComponentWithOutLabel(
       "Range Slider",
       "rangeslider1",
@@ -619,11 +562,11 @@ describe("Basic components", () => {
   it("Should verify Tabs", () => {
     cy.viewport(1200, 1300);
     resizeQueryPanel("0");
-    cy.dragAndDropWidget("Tabs", 100, 100);
+    cy.dragAndDropWidget("Tabs", 200, 200);
     verifyComponent("tabs1");
     deleteComponentAndVerify("image1");
 
-    cy.resizeWidget("tabs1", 650, 400);
+    cy.resizeWidget("tabs1", 650, 400, false);
 
     openEditorSidebar("tabs1");
     editAndVerifyWidgetName("tabs2");
@@ -635,9 +578,6 @@ describe("Basic components", () => {
 
     cy.go("back");
     deleteComponentAndVerify("tabs2");
-    cy.get(commonSelectors.editorPageLogo).click();
-
-    cy.deleteApp(data.appName);
   });
 
   it("Should verify Tags", () => {

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

@@ -16,8 +16,13 @@ import { commonWidgetText } from "Texts/common";
 describe("Editor- CSA", () => {
   const toolJetImage = "cypress/fixtures/Image/tooljet.png";
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
+  });
+
+  afterEach(() => {
+    cy.apiDeleteApp();
   });
 
   it("Should verify Tabs CSA", () => {
@@ -54,7 +59,7 @@ describe("Editor- CSA", () => {
     selectCSA("form1", "Reset Form");
 
     openEditorSidebar("form1");
-    cy.get('[data-cy="button-to-submit-form-fx-button"]').eq(1).click();
+    cy.get('[data-cy="button-to-submit-form-fx-button"] > svg').click();
     cy.get(
       '[data-cy="button-to-submit-form-input-field"]'
     ).clearAndTypeOnCodeMirror(`{{components.button2`);

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

@@ -32,11 +32,14 @@ import {
 
 describe("Date Picker widget", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget("Date Picker");
   });
-
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
   it("should verify the properties of the date picker widget", () => {
     const data = {};
     data.alertMessage = fake.randomSentence;
@@ -231,7 +234,7 @@ describe("Date Picker widget", () => {
     cy.get(
       `${commonWidgetSelector.parameterFxButton(
         datePickerText.labelEnableDateSection
-      )}:eq(1)`
+      )}:eq(0)`
     ).click();
     cy.get(
       commonWidgetSelector.parameterInputField(
@@ -245,7 +248,7 @@ describe("Date Picker widget", () => {
     cy.get(
       `${commonWidgetSelector.parameterFxButton(
         datePickerText.labelEnableTimeSection
-      )}:eq(1)`
+      )}:eq(0)`
     ).click();
     cy.get(
       commonWidgetSelector.parameterInputField(
@@ -278,7 +281,7 @@ describe("Date Picker widget", () => {
       commonWidgetText.borderRadiusInput
     );
 
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     cy.get(
       commonWidgetSelector.stylePicker(commonWidgetText.parameterBoxShadow)

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

@@ -34,13 +34,17 @@ import {
 
 describe("List view widget", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.viewport(1200, 1200);
     cy.dragAndDropWidget("List View", 50, 500);
     cy.modifyCanvasSize(1200, 700);
     cy.intercept("PUT", "/api/apps/**").as("apps");
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the list view widget", () => {
     const data = {};
@@ -224,7 +228,7 @@ describe("List view widget", () => {
     ).should("have.attr", "data-disabled", "true");
     cy.get("[data-cy='disable-toggle-button']").click();
 
-    cy.get("[data-cy='border-radius-fx-button']:eq(1)").click();
+    cy.get("[data-cy='border-radius-fx-button']:eq(0)").click();
     verifyAndModifyParameter(
       commonWidgetText.parameterBorderRadius,
       commonWidgetText.borderRadiusInput
@@ -236,15 +240,15 @@ describe("List view widget", () => {
 
     openEditorSidebar(listviewText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     verifyAndModifyToggleFx(
       commonWidgetText.parameterBoxShadow,
-      commonWidgetText.boxShadowDefaultValue,
+      "0px 0px 0px 0px #00000040",
       false
     );
 
-    cy.get('[data-cy="border-radius-fx-button"]').click();
+    cy.get('[data-cy="border-radius-fx-button"] > svg').click();
     cy.get(commonWidgetSelector.boxShadowColorPicker).click();
 
     fillBoxShadowParams(
@@ -369,7 +373,7 @@ describe("List view widget", () => {
       )
     ).click();
 
-    cy.get("[data-cy='border-radius-fx-button']:eq(1)").click();
+    cy.get("[data-cy='border-radius-fx-button']:eq(0)").click();
     verifyAndModifyParameter(
       commonWidgetText.parameterBorderRadius,
       commonWidgetText.borderRadiusInput
@@ -382,11 +386,11 @@ describe("List view widget", () => {
 
     openEditorSidebar(listviewText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     verifyAndModifyToggleFx(
       commonWidgetText.parameterBoxShadow,
-      commonWidgetText.boxShadowDefaultValue,
+      "0px 0px 0px 0px #00000040",
       false
     );
 

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

@@ -40,10 +40,14 @@ import {
 
 describe("Modal", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget("Modal");
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the modal component", () => {
     const data = {};
@@ -54,7 +58,6 @@ describe("Modal", () => {
     data.tooltipText = fake.randomSentence;
     data.buttonText = fake.companyName;
 
-    cy.renameApp(data.appName);
     launchModal("modal1");
     cy.get('[data-cy="modal-title"]').verifyVisibleElement(
       "have.text",
@@ -161,11 +164,8 @@ describe("Modal", () => {
 
     cy.get(commonWidgetSelector.widgetDocumentationLink).should(
       "have.text",
-      "Modal documentation"
+      "Read documentation for Modal"
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the styles of the modal widget", () => {
@@ -176,7 +176,6 @@ describe("Modal", () => {
     data.boxShadowParam = fake.boxShadowParam;
     data.backgroundColor = fake.randomRgba;
 
-    cy.renameApp(data.appName);
     launchModal("modal1");
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
@@ -246,9 +245,6 @@ describe("Modal", () => {
       "have.text",
       "This title can be changed"
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -261,19 +257,18 @@ describe("Modal", () => {
     data.buttonTextColor = fake.randomRgba;
     data.customTitle = fake.randomSentence;
 
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 50);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 100);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 150);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 200);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget(commonWidgetText.toggleSwitch, 600, 250);
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
 
-    cy.renameApp(data.appName);
     launchModal("modal1");
     verifyAndModifyParameter("Title", data.customTitle);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
@@ -329,7 +324,7 @@ describe("Modal", () => {
       commonWidgetText.parameterDisable,
       "{{components.toggleswitch2.value"
     );
-    cy.get('[data-cy="sidebar-option-properties"]').click();
+    cy.get("#inspector-tab-properties").click();
 
     typeOnFx("Loading State", "{{components.toggleswitch3.value");
     cy.get("[data-cy='modal-header']").realClick();
@@ -437,7 +432,7 @@ describe("Modal", () => {
       "This title can be changed"
     );
 
-    cy.get(".close-svg > path").click();
+    cy.forceClickOnCanvas();
     cy.dragAndDropWidget("Button", 500, 300, "Button", "[id*=canvas]:eq(2)");
     selectEvent("On click", "Control Component");
     selectCSA("modal1", "close");

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

@@ -40,10 +40,14 @@ import {
 
 describe("Multiselect widget", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget(multiselectText.multiselect);
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the widget", () => {
     const data = {};
@@ -219,12 +223,14 @@ describe("Multiselect widget", () => {
 
     openEditorSidebar(multiselectText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     verifyAndModifyStylePickerFx(
       commonWidgetText.parameterBoxShadow,
       commonWidgetText.boxShadowDefaultValue,
-      commonWidgetText.boxShadowFxValue
+      commonWidgetText.boxShadowFxValue,
+      0,
+      "0px 0px 0px 0px "
     );
     cy.get(
       commonWidgetSelector.parameterFxButton(
@@ -287,7 +293,7 @@ describe("Multiselect widget", () => {
 
     openEditorSidebar(data.widgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
 
     cy.get(
       commonWidgetSelector.stylePicker(commonWidgetText.parameterBoxShadow)

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

@@ -23,10 +23,14 @@ import {
 
 describe("Number Input", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget("Number Input");
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the number input widget", () => {
     const data = {};
@@ -37,8 +41,6 @@ describe("Number Input", () => {
     data.minimumvalue = `${randomNumber(5, 10)}`;
     data.maximumValue = `${randomNumber(90, 99)}`;
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(numberInputText.defaultWidgetName);
     editAndVerifyWidgetName(data.widgetName);
     cy.get(
@@ -78,9 +80,10 @@ describe("Number Input", () => {
       commonWidgetSelector.draggableWidget(data.widgetName),
       randomNumber(1, 4)
     );
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(data.widgetName)
-    ).verifyVisibleElement("have.value", `${data.minimumvalue}.00`);
+    ).verifyVisibleElement("have.value", `${data.minimumvalue}`);
 
     openEditorSidebar(data.widgetName);
     openAccordion(commonWidgetText.accordionProperties, [
@@ -96,9 +99,10 @@ describe("Number Input", () => {
       commonWidgetSelector.draggableWidget(data.widgetName),
       randomNumber(100, 110)
     );
+    cy.forceClickOnCanvas;
     cy.get(
       commonWidgetSelector.draggableWidget(data.widgetName)
-    ).verifyVisibleElement("have.value", `${data.maximumValue}.00`);
+    ).verifyVisibleElement("have.value", `${data.maximumValue}`);
 
     openEditorSidebar(data.widgetName);
     openAccordion(commonWidgetText.accordionProperties, [
@@ -130,9 +134,6 @@ describe("Number Input", () => {
       "have.text",
       numberInputText.numberInputDocumentationLink
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
   it("should verify the styles of the number input widget", () => {
     const data = {};
@@ -141,8 +142,6 @@ describe("Number Input", () => {
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(numberInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
@@ -192,9 +191,6 @@ describe("Number Input", () => {
       data.boxShadowColor,
       3
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -208,8 +204,6 @@ describe("Number Input", () => {
     data.minimumvalue = randomNumber(5, 10);
     data.maximumValue = randomNumber(90, 99);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(numberInputText.defaultWidgetName);
     verifyAndModifyParameter(
       commonWidgetText.labelDefaultValue,
@@ -243,7 +237,7 @@ describe("Number Input", () => {
 
     openEditorSidebar(numberInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
     cy.get(commonWidgetSelector.boxShadowColorPicker).click();
 
     fillBoxShadowParams(
@@ -268,16 +262,18 @@ describe("Number Input", () => {
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName),
       randomNumber(1, 4)
     );
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).verifyVisibleElement("have.value", `${data.minimumvalue}.00`);
+    ).verifyVisibleElement("have.value", `${data.minimumvalue}`);
     cy.clearAndType(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName),
       randomNumber(100, 110)
     );
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
-    ).verifyVisibleElement("have.value", `${data.maximumValue}.00`);
+    ).verifyVisibleElement("have.value", `${data.maximumValue}`);
     cy.get(
       commonWidgetSelector.draggableWidget(numberInputText.defaultWidgetName)
     )
@@ -300,8 +296,5 @@ describe("Number Input", () => {
       data.boxShadowColor,
       data.boxShadowParam
     );
-
-    cy.get(commonSelectors.viewerPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 });

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

@@ -25,11 +25,15 @@ import { randomString } from "Support/utils/textInput";
 
 describe("Password Input", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.modifyCanvasSize(1200, 780);
     cy.dragAndDropWidget("Password Input", 350, 300);
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("should verify the properties of the password input widget", () => {
     const data = {};
@@ -41,8 +45,6 @@ describe("Password Input", () => {
     data.maximumLength = randomNumber(8, 10);
     data.customText = randomString(12);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(passwordInputText.defaultWidgetName);
     closeAccordions(["Events", "Validation", "Properties", "Layout"]);
     editAndVerifyWidgetName(data.widgetName);
@@ -169,11 +171,8 @@ describe("Password Input", () => {
 
     cy.get(commonWidgetSelector.widgetDocumentationLink).should(
       "have.text",
-      "PasswordInput documentation"
+      "Read documentation for PasswordInput"
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
   it("should verify the styles of the password input widget", () => {
     const data = {};
@@ -182,8 +181,6 @@ describe("Password Input", () => {
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(passwordInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
@@ -233,9 +230,6 @@ describe("Password Input", () => {
       data.boxShadowColor,
       1
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -251,8 +245,6 @@ describe("Password Input", () => {
     data.customText = randomString(12);
     data.maxLengthText = randomString(data.maximumLength);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(passwordInputText.defaultWidgetName);
     verifyAndModifyParameter("Placeholder", data.customText);
 
@@ -304,7 +296,7 @@ describe("Password Input", () => {
 
     openEditorSidebar(passwordInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    openAccordion(commonWidgetText.accordionGenaral, []);
+    openAccordion(commonWidgetText.accordionGenaral, [], 1);
     cy.get(commonWidgetSelector.boxShadowColorPicker).click();
 
     fillBoxShadowParams(
@@ -327,6 +319,11 @@ describe("Password Input", () => {
       .should("contain", data.customText);
 
     cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
+    cy.get(
+      commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
+    )
+      .type(" ")
+      .type("{selectAll}{backspace}");
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(
         passwordInputText.defaultWidgetName
@@ -355,6 +352,13 @@ describe("Password Input", () => {
       data.customText.toUpperCase()
     );
     cy.get('[data-cy="real-canvas"]').click("topLeft", { force: true });
+
+    // cy.get(
+    //   commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName)
+    // )
+    //   .type("1")
+    //   .type("{selectAll}{backspace}");
+
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(
         passwordInputText.defaultWidgetName
@@ -383,8 +387,5 @@ describe("Password Input", () => {
       commonWidgetSelector.draggableWidget(passwordInputText.defaultWidgetName),
       data.tooltipText
     );
-
-    cy.get(commonSelectors.viewerPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 });

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

@@ -55,8 +55,9 @@ import { resizeQueryPanel } from "Support/utils/dataSource";
 
 describe("Table", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     deleteDownloadsFolder();
     cy.viewport(1400, 2200);
     cy.modifyCanvasSize(900, 800);
@@ -65,6 +66,9 @@ describe("Table", () => {
     resizeQueryPanel("1");
     cy.get(`[data-cy="allow-selection-toggle-button"]`).click({ force: true });
   });
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
 
   it("Should verify the table components and labels", () => {
     cy.get(
@@ -85,6 +89,9 @@ describe("Table", () => {
       "have.text",
       tableText.defaultPageIndexDetails
     );
+    cy.get(`${tableSelector.pageIndexDetails}>input`)
+      .invoke("val")
+      .should("equal", "1");
     cy.get(tableSelector.paginationButtonToFirst).should("be.visible");
     cy.get(tableSelector.paginationButtonToPrevious).should("be.visible");
     cy.get(tableSelector.paginationButtonToNext).should("be.visible");
@@ -208,24 +215,13 @@ describe("Table", () => {
     const data = {};
     data.widgetName = fake.widgetName;
     openEditorSidebar(tableText.defaultWidgetName);
-    editAndVerifyWidgetName(data.widgetName, [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
+    editAndVerifyWidgetName(data.widgetName, []);
     cy.forceClickOnCanvas();
 
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionProperties, [
-      "Options",
-      "Columns",
-      "Layout",
-    ]);
-    verifyAndModifyParameter(
-      "Table data",
+    cy.get('[data-cy="table-data-input-field"]').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(`[{id:1,name:"Mike",email:"mike@example.com" },{id:2,name:"Nina",email:"nina@example.com" },{id:3,name:"Steph",email:"steph@example.com" },{id:4,name:"Oliver",email:"oliver@example.com" },
-      ]`)
+        ]`)
     );
     // cy.get('[data-cy="inspector-close-icon"]').click();
     cy.forceClickOnCanvas();
@@ -238,21 +234,16 @@ describe("Table", () => {
     ]);
     //cy.get('[data-cy="inspector-close-icon"]').click();
     openEditorSidebar(data.widgetName);
-    openAccordion("Columns", ["Options", "Properties", "Layout"]);
+    openAccordion("Columns", []);
     deleteAndVerifyColumn("email");
     openEditorSidebar(data.widgetName);
-    openAccordion("Action buttons", [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
-    cy.get('[data-cy="message-no-action-button"]').should(
+    openAccordion("Action buttons");
+    cy.get('[data-cy="no-items-banner-action-button"]').should(
       "have.text",
-      "This table doesn't have any action buttons"
+      "There are no action buttons"
     );
     cy.get('[data-cy="button-add-new-action-button"]')
-      .should("have.text", "+ Add button")
+      .should("have.text", "New action button")
       .click();
     cy.get('[data-cy="action-button-button-0"]').verifyVisibleElement(
       "have.text",
@@ -303,12 +294,7 @@ describe("Table", () => {
     cy.get('[data-cy="leftActions-cell-0"]').eq(0).find("button").click();
     cy.verifyToastMessage(commonSelectors.toastMessage, "Hello world!");
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionEvents, [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
+    openAccordion(commonWidgetText.accordionEvents, []);
     cy.get('[data-cy="add-event-handler"]').click();
     cy.get('[data-cy="event-handler-card"]').click();
     cy.get('[data-cy="event-selection"]>')
@@ -320,11 +306,7 @@ describe("Table", () => {
     cy.get('[data-cy="inspector-close-icon"]').click();
 
     openEditorSidebar(data.widgetName);
-    openAccordion(commonWidgetText.accordionLayout, [
-      "Options",
-      "Properties",
-      "Columns",
-    ]);
+    openAccordion(commonWidgetText.accordionLayout, []);
 
     verifyAndModifyToggleFx(
       "Show on desktop",
@@ -348,28 +330,21 @@ describe("Table", () => {
     const data = {};
     data.widgetName = fake.widgetName;
     openEditorSidebar(tableText.defaultWidgetName);
-    editAndVerifyWidgetName(data.widgetName, [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
+    editAndVerifyWidgetName(data.widgetName, []);
 
     //String/default
     openEditorSidebar(data.widgetName);
+    cy.wait(500);
     deleteAndVerifyColumn("id");
     deleteAndVerifyColumn("name");
     deleteAndVerifyColumn("email");
+    cy.wait(500);
     addAndOpenColumnOption("Fake-String", `string`);
     selectDropdownOption('[data-cy="input-overflow"] >>:eq(0)', `wrap`);
     cy.get('[data-index="0"]>.select-search-option:eq(1)').realClick();
-    cy.wait(2000);
     verifyAndEnterColumnOptionInput("key", "name");
     verifyAndEnterColumnOptionInput("Text color", "red");
-    verifyAndEnterColumnOptionInput(
-      "Cell Background Color",
-      "{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}yellow"
-    );
+    verifyAndEnterColumnOptionInput("Cell Background Color", "yellow");
     cy.get(
       '[data-cy="input-and-label-cell-background-color"] > .form-label'
     ).click();
@@ -392,17 +367,22 @@ describe("Table", () => {
     verifyAndEnterColumnOptionInput("Regex", "AABb");
     verifyAndEnterColumnOptionInput("Min length", "4");
     verifyAndEnterColumnOptionInput("Max length", "5");
-    verifyAndEnterColumnOptionInput("Custom rule", "{backspace}");
+    verifyAndEnterColumnOptionInput("Custom rule", " ");
     verifyInvalidFeedback(0, 0, "The input should match pattern");
     addInputOnTable(0, 0, "AABb");
 
     // cy.notVisible('[data-cy="stringsarah-cell-0"] >>>.invalid-feedback');
     openEditorSidebar(data.widgetName);
-    deleteAndVerifyColumn("Fake-String");
+    deleteAndVerifyColumn("fake-string");
 
     openEditorSidebar(data.widgetName);
     addAndOpenColumnOption("fake-number", `number`);
+    // cy.intercept("PUT", "/api/apps/**").as("appSave");
+    // cy.wait("@appSave");
+    // cy.wait(1000);
     verifyAndEnterColumnOptionInput("key", "id");
+    // cy.wait("@appSave");
+
     // verifyAndEnterColumnOptionInput("Cell Background Color", "black");
     cy.get('[data-cy="make-editable-toggle-button"]').click();
     cy.get('[data-cy="header-validation"]').verifyVisibleElement(
@@ -430,7 +410,7 @@ describe("Table", () => {
 
     openEditorSidebar(data.widgetName);
     addAndOpenColumnOption("fake-badge", `badge`);
-    verifyAndEnterColumnOptionInput("key", "");
+    verifyAndEnterColumnOptionInput("key", " ");
     verifyAndEnterColumnOptionInput("Values", "{{[1,2,3]");
     verifyAndEnterColumnOptionInput("Labels", '{{["One","Two","Three"]');
 
@@ -445,9 +425,9 @@ describe("Table", () => {
 
     openEditorSidebar(data.widgetName);
     addAndOpenColumnOption("fake-multiple-badge", `multipleBadges`);
-
     verifyAndEnterColumnOptionInput("key", "id");
     verifyAndEnterColumnOptionInput("Values", "{{[1,2,3]");
+    cy.wait(500);
     verifyAndEnterColumnOptionInput("Labels", '{{["One","Two","Three"]');
     // verifyAndEnterColumnOptionInput("Cell Background Color", "fakeString");
     cy.get('[data-cy="make-editable-toggle-button"]').click();
@@ -469,12 +449,14 @@ describe("Table", () => {
     deleteAndVerifyColumn("fake-multiple-badge");
 
     openEditorSidebar(data.widgetName);
-    verifyAndModifyParameter(
-      "Table data",
+    cy.get('[data-cy="table-data-input-field"]').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(`[{id:1,name:"Mike",email:"mike@example.com", tags:['One','Two','Three'] },{id:2,name:"Nina",email:"nina@example.com" },{id:3,name:"Steph",email:"steph@example.com", tags:['One','Two','Three'] },{id:4,name:"Oliver",email:"oliver@example.com" },
-      ]`)
+        ]`)
     );
-    closeAccordions(["Options"]);
+
+    // closeAccordions(["Options"]);
+    cy.get('[data-cy="widget-accordion-data"]').click();
+    deleteAndVerifyColumn("tags");
     addAndOpenColumnOption("fake-tags", `tags`);
     verifyAndEnterColumnOptionInput("key", "tags");
 
@@ -483,14 +465,14 @@ describe("Table", () => {
     cy.get('[data-cy="make-editable-toggle-button"]').click();
     cy.forceClickOnCanvas();
 
-    cy.get(`${tableSelector.column(1)}:eq(0) .badge`)
+    cy.get(`${tableSelector.column(0)}:eq(0) .badge`)
       .eq(0)
       .should("have.text", "Onex")
       .next()
       .should("have.text", "Twox")
       .next()
       .should("have.text", "Threex");
-    cy.get(`${tableSelector.column(1)}:eq(0) .badge`)
+    cy.get(`${tableSelector.column(0)}:eq(0) .badge`)
       .first()
       .click({ force: true })
       .trigger("mouseover")
@@ -524,7 +506,7 @@ describe("Table", () => {
     openEditorSidebar(data.widgetName);
     addAndOpenColumnOption("fake-radio", `radio`);
 
-    verifyAndEnterColumnOptionInput("key", "");
+    verifyAndEnterColumnOptionInput("key", " ");
     verifyAndEnterColumnOptionInput("Values", "{{[1,2,3]");
     verifyAndEnterColumnOptionInput("Labels", '{{["One","Two","Three"]');
 
@@ -546,17 +528,16 @@ describe("Table", () => {
     deleteAndVerifyColumn("fake-multiselect");
 
     // openEditorSidebar(data.widgetName);
-    addAndOpenColumnOption("fake-toggleSwitch", `toggleSwitch`);
+    addAndOpenColumnOption("fake-toggleswitch", `toggleSwitch`);
 
     verifyAndEnterColumnOptionInput("key", "fakeString");
     // verifyAndEnterColumnOptionInput("Active color", "green"); //use color Picker
     // verifyAndEnterColumnOptionInput("Cell Background Color", "fakeString");
     cy.get('[data-cy="make-editable-toggle-button"]').click();
-    deleteAndVerifyColumn("fake-toggleSwitch");
+    deleteAndVerifyColumn("fake-toggleswitch");
 
-    //Toggle Switch
-    // openEditorSidebar(data.widgetName);
-    addAndOpenColumnOption("fake-datePicker", `datePicker`);
+    openEditorSidebar(data.widgetName);
+    addAndOpenColumnOption("fake-datepicker", `datePicker`);
 
     verifyAndEnterColumnOptionInput("key", "fakeString");
     // verifyAndEnterColumnOptionInput("Date Display format", "fakeString");
@@ -568,15 +549,14 @@ describe("Table", () => {
     // verifyAndEnterColumnOptionInput("Parse in timezone", "fakeString");
 
     // verifyAndEnterColumnOptionInput("Display in timezone", "fakeString");
-    deleteAndVerifyColumn("fake-datePicker");
+    deleteAndVerifyColumn("fake-datepicker");
 
     verifyAndModifyToggleFx(
       tableText.labelDynamicColumn,
       commonWidgetText.codeMirrorLabelFalse
     );
     cy.get('[data-cy*="-cell-1"]').should("have.class", "has-text");
-    verifyAndModifyParameter(
-      "Column data",
+    cy.get('[data-cy="column-data-input-field"] ').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(
         `[{name: 'User email', key: 'email'}, {name: 'Full name', key: 'name', isEditable: false}]`
       )
@@ -588,15 +568,16 @@ describe("Table", () => {
     cy.get('[data-cy*="-cell-1"]').should("not.have.class", "has-text");
 
     openEditorSidebar(data.widgetName);
-    verifyAndModifyParameter(
-      "Column data",
+    cy.get('[data-cy="column-data-input-field"] ').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(
         `[{name: 'User email', key: 'email'}, {name: 'Full name', key: 'name', isEditable: true}]`
       )
     );
     cy.forceClickOnCanvas();
+    cy.waitForAutoSave();
     cy.get('[data-cy*="-cell-1"]')
       .eq(0)
+      .find("input")
       .click()
       .type(`{selectAll}{backspace}Mike Jon`);
     cy.forceClickOnCanvas();
@@ -607,8 +588,7 @@ describe("Table", () => {
     cy.get('[data-cy="table-button-save-changes"]').should("be.visible");
 
     openEditorSidebar(data.widgetName);
-    verifyAndModifyParameter(
-      "Column data",
+    cy.get('[data-cy="column-data-input-field"] ').clearAndTypeOnCodeMirror(
       codeMirrorInputLabel(
         `[{name: 'email', key: 'email', cellBackgroundColor: '#000', textColor: '#fff'}, {name: 'Full name', key: 'name', minLength: 5, maxLength: 6, isEditable: true}]`
       )
@@ -666,15 +646,10 @@ describe("Table", () => {
 
     cy.get(commonWidgetSelector.buttonCloseEditorSideBar).click();
     openEditorSidebar(tableText.defaultWidgetName);
-    openAccordion("Columns", ["Options", "Properties", "Layout"]);
+    openAccordion("Columns");
     deleteAndVerifyColumn("email");
     openEditorSidebar(tableText.defaultWidgetName);
-    openAccordion("Action buttons", [
-      "Options",
-      "Properties",
-      "Columns",
-      "Layout",
-    ]);
+    openAccordion("Action buttons");
     cy.get('[data-cy="button-add-new-action-button"]').click();
 
     cy.get('[data-cy="rightActions-cell-2"]')
@@ -702,7 +677,8 @@ describe("Table", () => {
     verifyAndModifyToggleFx(
       commonWidgetText.parameterBoxShadow,
       commonWidgetText.boxShadowDefaultValue,
-      false
+      false,
+      "0px 0px 0px 0px "
     );
 
     cy.get(commonWidgetSelector.boxShadowColorPicker).click();
@@ -727,9 +703,7 @@ describe("Table", () => {
       "have.text",
       "Table type"
     );
-    cy.get(
-      '[data-cy="table-type-fx-button"][class*="fx-button  unselectable"]'
-    ).click();
+    cy.get('[data-cy="table-type-fx-button"] > svg').click();
     cy.get('[data-cy="table-type-input-field"]').clearAndTypeOnCodeMirror(
       `randomText`
     );
@@ -743,7 +717,7 @@ describe("Table", () => {
     ).click();
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
-    cy.get('[data-cy="table-type-fx-button"]').click();
+    cy.get('[data-cy="table-type-fx-button"]>svg').click();
     cy.get('[data-cy="dropdown-table-type"]').click();
     selectFromSidebarDropdown('[data-cy="dropdown-table-type"]', "Classic");
     cy.forceClickOnCanvas();
@@ -754,25 +728,20 @@ describe("Table", () => {
       .and("contain", "classic");
 
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-    selectFromSidebarDropdown(
-      '[data-cy="dropdown-table-type"]',
-      "Striped & bordered"
-    );
+    selectFromSidebarDropdown('[data-cy="dropdown-table-type"]', "Striped");
     cy.forceClickOnCanvas();
     cy.get(commonWidgetSelector.draggableWidget(tableText.defaultWidgetName))
       .click()
       .find("table")
       .invoke("attr", "class")
-      .and("contain", "table-striped table-bordered ");
+      .and("contain", "table-striped");
 
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
     cy.get('[data-cy="label-cell-size"]').verifyVisibleElement(
       "have.text",
       "Cell size"
     );
-    cy.get(
-      '[data-cy="cell-size-fx-button"][class*="fx-button  unselectable"]'
-    ).click();
+    cy.get('[data-cy="cell-size-fx-button"] > svg').click();
 
     cy.get('[data-cy="cell-size-input-field"]').clearAndTypeOnCodeMirror(
       `randomText`
@@ -788,8 +757,8 @@ describe("Table", () => {
 
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
-    cy.get('[data-cy="cell-size-fx-button"]').click();
-    selectFromSidebarDropdown('[data-cy="dropdown-cell-size"]', "Spacious");
+    cy.get('[data-cy="cell-size-fx-button"] >svg').click();
+    selectFromSidebarDropdown('[data-cy="dropdown-cell-size"]', "Condensed");
     cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.draggableWidget(tableText.defaultWidgetName)
@@ -798,7 +767,7 @@ describe("Table", () => {
     cy.get(tableSelector.column(0))
       .eq(0)
       .invoke("attr", "class")
-      .and("contain", "spacious");
+      .and("contain", "condensed");
 
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
     cy.get('[data-cy="label-text-color"]').verifyVisibleElement(
@@ -822,42 +791,37 @@ describe("Table", () => {
 
   it("should verify table options", () => {
     openEditorSidebar(tableText.defaultWidgetName);
-    closeAccordions(["Action buttons", "Columns", "Properties"]);
-    verifyAndModifyToggleFx("Client-side pagination", "{{true}}", true);
-    cy.get('[data-cy="server-side-pagination-toggle-button"]').click();
+    verifyAndModifyToggleFx("Enable pagination", "{{true}}", true);
+    cy.get('[data-cy="enable-pagination-toggle-button"]').click();
     cy.get(tableSelector.paginationButtonToPrevious).should("be.visible");
     cy.get(tableSelector.paginationButtonToNext).should("be.visible");
 
-    verifyAndModifyToggleFx("Enable previous page button", "{{true}}", true);
-    cy.get(tableSelector.paginationButtonToPrevious).should("be.disabled");
-    verifyAndModifyToggleFx("Enable next page button", "{{true}}", true);
-    cy.get(tableSelector.paginationButtonToNext).should("be.disabled");
+    cy.get("[data-state=off]:eq(3)").click();
     cy.get('[data-cy="label-total-records-server-side"]').verifyVisibleElement(
       "have.text",
       "Total records server side"
     );
-    cy.get('[data-cy="server-side-pagination-toggle-button"]').click();
 
-    cy.get('[data-cy="client-side-pagination-toggle-button"]').click();
+    // cy.get('[data-cy="enable-pagination-toggle-button"]').click();
+    cy.get("[data-state=off]:eq(3)").click();
 
     cy.get('[data-cy="label-number-of-rows-per-page"]').verifyVisibleElement(
       "have.text",
       "Number of rows per page"
     );
 
-    verifyAndModifyToggleFx("Enable sorting", "{{true}}", true); //inputfield
-    cy.get('[data-cy="enable-sorting-toggle-button"]').click();
-    verifyAndModifyToggleFx("Server-side sort", "{{false}}", true);
+    verifyAndModifyToggleFx("Enable column sorting", "{{true}}", true); //inputfield
+    cy.get('[data-cy="enable-column-sorting-toggle-button"]').click();
 
     verifyAndModifyToggleFx("Show download button", "{{true}}", true);
     cy.notVisible('[data-tooltip-id="tooltip-for-download"]');
 
-    verifyAndModifyToggleFx("Show filter button", "{{true}}", true);
+    verifyAndModifyToggleFx("Enable filtering", "{{true}}", true);
     cy.notVisible('[data-tooltip-id="tooltip-for-filter-data"]');
 
-    cy.get('[data-cy="show-filter-button-toggle-button"]').click();
-    verifyAndModifyToggleFx("Server-side filter", "{{false}}", true);
-    verifyAndModifyToggleFx("Show update buttons", "{{true}}", true);
+    // cy.get('[data-cy="show-filter-button-toggle-button"]').click();
+    // verifyAndModifyToggleFx("Server-side filter", "{{false}}", true);
+    // verifyAndModifyToggleFx("Show update buttons", "{{true}}", true);
 
     cy.get(`[data-cy="allow-selection-toggle-button"]`).click({ force: true });
     verifyAndModifyToggleFx("Bulk selection", "{{false}}", true);
@@ -867,12 +831,12 @@ describe("Table", () => {
     verifyAndModifyToggleFx("Hide column selector button", "{{false}}", true);
     cy.notVisible('[data-cy="select-column-icon"]');
 
-    verifyAndModifyToggleFx("Show search box", "{{true}}", true);
+    verifyAndModifyToggleFx("Show search", "{{true}}", true);
     cy.notVisible('[data-cy="search-input-field"]');
 
-    cy.get('[data-cy="show-search-box-toggle-button"]').click();
+    // cy.get('[data-cy="show-search-box-toggle-button"]').click();
 
-    verifyAndModifyToggleFx("Server-side search", "", true);
+    // verifyAndModifyToggleFx("Server-side search", " ", true);
     verifyAndModifyToggleFx("Loading State", "{{false}}", true);
   });
 
@@ -900,7 +864,7 @@ describe("Table", () => {
     cy.get(
       commonWidgetSelector.draggableWidget(tableText.defaultWidgetName)
     ).should("be.visible");
-    cy.get(tableSelector.filterButton).click();
+    // cy.get(tableSelector.filterButton).click();
     addFilter(
       [{ column: "name", operation: "contains", value: "Sarah" }],
       true
@@ -1009,6 +973,7 @@ describe("Table", () => {
   });
 
   it("should verify table CSA", () => {
+    deleteDownloadsFolder();
     cy.get('[data-cy="column-id"]').click();
     cy.get('[data-cy="make-editable-toggle-button"]').click();
     cy.get(`[data-cy="allow-selection-toggle-button"]`).click({ force: true });
@@ -1072,7 +1037,10 @@ describe("Table", () => {
 
     cy.get(commonWidgetSelector.draggableWidget("button1")).click();
     cy.get('[data-cy*="-cell-1"] ').eq(1).should("have.text", "Jon");
-    cy.get('[data-cy="page-index-details"]').should("have.text", "2 of 2");
+    cy.get('[data-cy="page-index-details"]').should("have.text", "of 2");
+    cy.get(`${tableSelector.pageIndexDetails}>input`)
+      .invoke("val")
+      .should("equal", "2");
 
     cy.get('[data-cy="3-cell-0"]')
       .click()
@@ -1093,7 +1061,7 @@ describe("Table", () => {
     cy.get(".tooltip-inner").invoke("hide");
     verifyNodeData("components", "Object", "9 entries ");
     openNode("components");
-    verifyNodeData(tableText.defaultWidgetName, "Object", "21 entries ");
+    verifyNodeData(tableText.defaultWidgetName, "Object", "23 entries ");
     openNode(tableText.defaultWidgetName);
     verifyNodeData("newRows", "Array", "0 item ");
 
@@ -1127,10 +1095,10 @@ describe("Table", () => {
     cy.get(".tooltip-inner").invoke("hide");
     verifyNodeData("components", "Object", "1 entry ");
     openNode("components");
-    verifyNodeData(tableText.defaultWidgetName, "Object", "17 entries ");
+    verifyNodeData(tableText.defaultWidgetName, "Object", "22 entries ");
     cy.wait(1000);
-    openNode(tableText.defaultWidgetName);
-    cy.wait(500);
+    openNode(tableText.defaultWidgetName, 0, 1);
+    openNode(tableText.defaultWidgetName, 0, 1);
     verifyNodeData("newRows", "Array", "1 item ");
     openNode("newRows");
     verifyNodeData("0", "Object", "3 entries ");
@@ -1142,7 +1110,7 @@ describe("Table", () => {
 
   it("should verify Disable action button", () => {
     cy.get('[data-cy="button-add-new-action-button"]')
-      .should("have.text", "+ Add button")
+      .should("have.text", "New action button")
       .click();
 
     cy.get('[data-cy="action-button-button-0"]').verifyVisibleElement(
@@ -1196,7 +1164,7 @@ describe("Table", () => {
     cy.get('[data-cy="action-button-button-0"]').click();
     cy.get(tableSelector.fxButton(tableText.lableDisableActionButton))
       .should("be.visible")
-      .eq(1)
+      .eq(0)
       .click();
     cy.get(
       commonWidgetSelector.parameterInputField(
@@ -1237,9 +1205,7 @@ describe("Table", () => {
       "Column Email"
     );
     openEditorSidebar(tableText.defaultWidgetName);
-    cy.get(tableSelector.draggableHandleColumn("email"))
-      .should("be.visible")
-      .click();
+    cy.get('[data-cy="pages-name-email"]').should("be.visible").click();
     cy.get(`[data-cy="input-and-label-column-name"]`)
       .find("label")
       .should("have.text", "Column name");
@@ -1249,7 +1215,7 @@ describe("Table", () => {
       .clearAndTypeOnCodeMirror(`{{components.text1.text`);
     cy.forceClickOnCanvas();
     openEditorSidebar(tableText.defaultWidgetName);
-    cy.get(tableSelector.draggableHandleColumn("Column Email"))
+    cy.get('[data-cy="pages-name-column email"]')
       .scrollIntoView()
       .should("be.visible");
     cy.get(tableSelector.columnHeader("column-email"))
@@ -1259,30 +1225,30 @@ describe("Table", () => {
 
     cy.dragAndDropWidget("Toggle Switch", 800, 300);
     openEditorSidebar(tableText.defaultWidgetName);
-    cy.get(tableSelector.draggableHandleColumn("name"))
-      .should("be.visible")
-      .click();
-    verifyAndModifyToggleFx(tableText.makeEditable, "{{false}}");
+    cy.get('[data-cy="column-Column Email"]').should("be.visible").click();
+    verifyAndModifyToggleFx(tableText.makeEditable, "{{false}}", 0);
     cy.get(tableSelector.toggleButton(tableText.makeEditable)).click();
     cy.get(tableSelector.fxButton(tableText.makeEditable))
       .should("be.visible")
-      .eq(1)
+      .eq(0)
       .click();
     cy.get(commonWidgetSelector.parameterInputField(tableText.makeEditable))
       .click()
       .clearAndTypeOnCodeMirror(`{{components.toggleswitch1.value`);
     cy.forceClickOnCanvas();
-    cy.get('[data-cy*="-cell-0"]').should("not.have.class", "has-text");
+    cy.waitForAutoSave();
+    cy.get('[data-cy*="-cell-1"]').eq(0).should("not.have.class", "has-text");
     cy.get(
       '[data-cy="draggable-widget-toggleswitch1"] [type="checkbox"]'
     ).click();
-    cy.get('[data-cy*="-cell-0"]')
+    cy.get('[data-cy*="-cell-1"]')
       .eq(0)
       .click()
-      .type(`{selectAll}{backspace}Jack`);
-    cy.forceClickOnCanvas();
-    cy.get('[data-cy*="-cell-0"]').should("have.class", "has-text");
-    cy.get('[data-cy*="-cell-0"] [type="text"]')
+      .find("input")
+      .type(`{selectAll}{backspace}{Enter}`)
+      .realType("Jack");
+    cy.get('[data-cy*="-cell-1"]').should("have.class", "has-text");
+    cy.get('[data-cy*="-cell-1"] [type="text"]')
       .eq(0)
       .verifyVisibleElement("have.value", "Jack");
   });

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

@@ -32,11 +32,15 @@ import {
 
 describe("Text Input", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.dragAndDropWidget("Text");
   });
 
+  afterEach(() => {
+    cy.apiDeleteApp();
+  });
   it("should verify CSA", () => {
     const data = {};
     data.customText = randomString(12);

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

@@ -32,9 +32,13 @@ import {
 
 describe("Text Input", () => {
   beforeEach(() => {
-    cy.appUILogin();
-    cy.createApp();
-    cy.dragAndDropWidget("Text Input");
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
+    cy.dragAndDropWidget("Text Input", 500, 500);
+  });
+  afterEach(() => {
+    cy.apiDeleteApp();
   });
 
   it("should verify the properties of the text input widget", () => {
@@ -46,8 +50,6 @@ describe("Text Input", () => {
     data.maximumLength = randomNumber(8, 10);
     data.customText = randomString(12);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(textInputText.defaultWidgetName);
     closeAccordions(["Validation", "General", "Properties", "Layout"]);
     editAndVerifyWidgetName(data.widgetName);
@@ -191,9 +193,6 @@ describe("Text Input", () => {
     );
     data.customText = fake.firstName;
     verifyControlComponentAction(data.widgetName, data.customText);
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
   it("should verify the styles of the text input widget", () => {
     const data = {};
@@ -202,8 +201,6 @@ describe("Text Input", () => {
     data.boxShadowColor = fake.randomRgba;
     data.boxShadowParam = fake.boxShadowParam;
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(textInputText.defaultWidgetName);
     cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
 
@@ -254,9 +251,6 @@ describe("Text Input", () => {
       data.boxShadowColor,
       4
     );
-
-    cy.get(commonSelectors.editorPageLogo).click();
-    cy.deleteApp(data.appName);
   });
 
   it("should verify the app preview", () => {
@@ -273,8 +267,6 @@ describe("Text Input", () => {
     data.customText = randomString(12);
     data.maxLengthText = randomString(data.maximumLength);
 
-    cy.renameApp(data.appName);
-
     openEditorSidebar(textInputText.defaultWidgetName);
     verifyAndModifyParameter(
       commonWidgetText.labelDefaultValue,
@@ -344,10 +336,12 @@ describe("Text Input", () => {
       .invoke("attr", "placeholder")
       .should("contain", data.customText);
 
-    cy.clearAndType(
-      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName),
-      data.customText
-    );
+    cy.get(
+      commonWidgetSelector.draggableWidget(textInputText.defaultWidgetName)
+    )
+      .type(`{selectAll}{backspace}{enter}`)
+      .type(data.customText);
+    cy.forceClickOnCanvas();
     cy.get(
       commonWidgetSelector.validationFeedbackMessage(
         textInputText.defaultWidgetName
@@ -416,29 +410,29 @@ describe("Text Input", () => {
     selectCSA("textinput1", "Visibility");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget("Text input", 500, 50);
+    cy.dragAndDropWidget("Text input", 50, 50);
     selectEvent("On change", "Control Component");
     selectCSA("textinput1", "Set text", "500");
     addSupportCSAData("text", "{{components.textinput2.value");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 275);
+    cy.dragAndDropWidget(buttonText.defaultWidgetText, 50, 200);
     selectEvent("On click", "Control Component");
     selectCSA("textinput1", "Clear", "500");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 350);
+    cy.dragAndDropWidget(buttonText.defaultWidgetText, 50, 400);
     selectEvent("On click", "Control Component");
     selectCSA("textinput1", "Disable", "500");
     cy.get('[data-cy="Value-toggle-button"]').click();
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 425);
+    cy.dragAndDropWidget(buttonText.defaultWidgetText, 300, 50);
     selectEvent("On click", "Control Component");
     selectCSA("textinput1", "Set blur", "500");
 
     cy.get('[data-cy="real-canvas"]').click("topRight", { force: true });
-    cy.dragAndDropWidget(buttonText.defaultWidgetText, 500, 500);
+    cy.dragAndDropWidget(buttonText.defaultWidgetText, 300, 200);
     selectEvent("On click", "Control Component");
     selectCSA("textinput1", "Set focus");
 

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

@@ -55,8 +55,7 @@ describe("App Import Functionality", () => {
     });
     cy.verifyToastMessage(
       commonSelectors.toastMessage,
-      importText.couldNotImportAppToastMessage,
-      false
+      importText.couldNotImportAppToastMessage
     );
 
     cy.get(importSelectors.importOptionInput).selectFile(appFile, {
@@ -120,13 +119,13 @@ describe("App Import Functionality", () => {
 
         cy.get(commonSelectors.appNameInput).verifyVisibleElement(
           "contain.value",
-          exportedAppData.appV2.name
+          exportedAppData.app[0].definition.appV2.name
         );
         cy.get(
           appVersionSelectors.currentVersionField((currentVersion = "v1"))
         ).verifyVisibleElement(
           "have.text",
-          exportedAppData.appV2.appVersions[0].name
+          exportedAppData.app[0].definition.appV2.appVersions[0].name
         );
       });
       cy.exec("cd ./cypress/downloads/ && rm -rf *");
@@ -196,7 +195,7 @@ describe("App Import Functionality", () => {
 
                 cy.get(commonSelectors.appNameInput).verifyVisibleElement(
                   "contain.value",
-                  exportedAppData.appV2.name
+                  exportedAppData.app[0].definition.appV2.name
                 );
                 cy.get(
                   appVersionSelectors.currentVersionField(
@@ -204,7 +203,7 @@ describe("App Import Functionality", () => {
                   )
                 ).verifyVisibleElement(
                   "have.text",
-                  exportedAppData.appV2.appVersions[1].name
+                  exportedAppData.app[0].definition.appV2.appVersions[1].name
                 );
               });
             });

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

@@ -1,13 +1,18 @@
 import { fake } from "Fixtures/fake";
-import { commonSelectors } from "Selectors/common";
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
 import {
     fillDataSourceTextField,
-    selectDataSource,
+    selectAndAddDataSource,
     fillConnectionForm,
-    addQuery,
 } from "Support/utils/postgreSql";
 import { commonText } from "Texts/common";
-import { closeDSModal, deleteDatasource } from "Support/utils/dataSource";
+import {
+    closeDSModal,
+    deleteDatasource,
+    addQuery,
+    addQueryN,
+    verifyValueOnInspector,
+} from "Support/utils/dataSource";
 import { dataSourceSelector } from "Selectors/dataSource";
 import { dataSourceText } from "Texts/dataSource";
 import { addNewUserMW } from "Support/utils/userPermissions";
@@ -16,139 +21,216 @@ import {
     logout,
     navigateToAppEditor,
     navigateToManageGroups,
-    pinInspector
+    pinInspector,
+    verifyModal,
 } from "Support/utils/common";
 
 const data = {};
 data.firstName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
 data.email = fake.email.toLowerCase();
-data.lastName = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+data.dsName1 = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
+data.dsName2 = fake.lastName.toLowerCase().replaceAll("[^A-Za-z]", "");
 data.appName = `${fake.companyName}-App`;
 
 describe("Global Datasource Manager", () => {
     beforeEach(() => {
-        cy.appUILogin();
+        cy.apiLogin();
         cy.viewport(1200, 1300);
+        cy.visit('/')
     });
     before(() => {
-        cy.appUILogin();
-        cy.createApp();
+        cy.apiLogin();
+        cy.apiCreateApp();
+        cy.openApp();
         cy.renameApp(data.appName);
-        cy.dragAndDropWidget("Button", 50, 50);
+        cy.dragAndDropWidget("Table", 250, 250);
         cy.get(commonSelectors.editorPageLogo).click();
-        cy.reloadAppForTheElement(data.appName);
         addNewUserMW(data.firstName, data.email);
         logout();
     });
 
     it("Should verify the global data source manager UI", () => {
         cy.get(commonSelectors.globalDataSourceIcon).click();
-        closeDSModal();
-        cy.get(commonSelectors.addNewDataSourceButton)
-            .verifyVisibleElement("have.text", commonText.addNewDataSourceButton)
-            .click();
-
-        cy.get(dataSourceSelector.allDatasourceLabelAndCount).should(
+        cy.get(commonSelectors.pageSectionHeader).verifyVisibleElement(
+            "have.text",
+            "Data Sources"
+        );
+        cy.get(dataSourceSelector.allDatasourceLabelAndCount).verifyVisibleElement(
             "have.text",
             dataSourceText.allDataSources
         );
-        cy.get(dataSourceSelector.databaseLabelAndCount).should(
+        cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
+            expect($el.contents().first().text().trim()).to.eq("Data sources");
+        });
+
+        cy.get(dataSourceSelector.databaseLabelAndCount).verifyVisibleElement(
             "have.text",
             dataSourceText.allDatabase
         );
-        cy.get(dataSourceSelector.apiLabelAndCount).should(
+        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
             "have.text",
-            dataSourceText.allApis
+            " Databases"
         );
-        cy.get(dataSourceSelector.cloudStorageLabelAndCount).should(
+        cy.get(dataSourceSelector.querySearchBar)
+            .invoke("attr", "placeholder")
+            .should("eq", "Search Databases");
+
+        cy.get(dataSourceSelector.apiLabelAndCount)
+            .verifyVisibleElement("have.text", dataSourceText.allApis)
+            .click();
+        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
             "have.text",
-            dataSourceText.allCloudStorage
+            " APIs"
         );
+        cy.get(dataSourceSelector.querySearchBar)
+            .invoke("attr", "placeholder")
+            .should("eq", "Search APIs");
+
+        cy.get(dataSourceSelector.cloudStorageLabelAndCount)
+            .verifyVisibleElement("have.text", dataSourceText.allCloudStorage)
+            .click();
+        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+            "have.text",
+            " Cloud Storage"
+        );
+        cy.get(dataSourceSelector.querySearchBar)
+            .invoke("attr", "placeholder")
+            .should("eq", "Search Cloud Storage");
+
+        cy.get(dataSourceSelector.pluginsLabelAndCount)
+            .verifyVisibleElement("have.text", dataSourceText.pluginsLabelAndCount)
+            .click();
+        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+            "have.text",
+            " Plugins"
+        );
+        cy.get(dataSourceSelector.querySearchBar)
+            .invoke("attr", "placeholder")
+            .should("eq", "Search Plugins");
+
+        cy.get('[data-cy="added-ds-label"]').should(($el) => {
+            expect($el.contents().first().text().trim()).to.eq("Data Sources Added");
+        });
+        cy.get(dataSourceSelector.addedDsSearchIcon).should("be.visible").click();
+        cy.get(dataSourceSelector.AddedDsSearchBar)
+            .invoke("attr", "placeholder")
+            .should("eq", "Search for Data Sources");
+
+        selectAndAddDataSource(
+            "databases",
+            dataSourceText.postgreSQL,
+            data.dsName1
+        );
+        cy.clearAndType(
+            dataSourceSelector.dsNameInputField,
+            `cypress-${data.dsName1}-postgresql1`
+        );
+
+        cy.get(dataSourceSelector.databaseLabelAndCount).click();
+
+        cy.get(commonSelectors.modalComponent).should("be.visible");
+        cy.get(dataSourceSelector.unSavedModalTitle).verifyVisibleElement(
+            "have.text",
+            dataSourceText.unSavedModalTitle
+        );
+        cy.get(commonWidgetSelector.modalCloseButton).should("be.visible");
+        cy.get(commonSelectors.cancelButton)
+            .should("be.visible")
+            .and("have.text", commonText.saveChangesButton);
+        cy.get(commonSelectors.yesButton).verifyVisibleElement(
+            "have.text",
+            "Discard"
+        );
+
+        cy.get(commonWidgetSelector.modalCloseButton).click();
+        cy.get(dataSourceSelector.buttonSave).should("be.enabled");
+
+        cy.get(dataSourceSelector.databaseLabelAndCount).click();
+        cy.get(commonSelectors.yesButton).click();
+        cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+            "have.text",
+            " Databases"
+        );
+        cy.get(`[data-cy="cypress-${data.dsName1}-postgresql-button"]`).click();
+        cy.clearAndType(
+            dataSourceSelector.dsNameInputField,
+            `cypress-${data.dsName1}-postgresql1`
+        );
+        cy.get(commonSelectors.dashboardIcon).click();
+        cy.get(commonSelectors.yesButton).click();
+
+        cy.get(commonSelectors.appCreateButton).should("be.visible");
+        cy.get(commonSelectors.globalDataSourceIcon).click();
+        cy.get(`[data-cy="cypress-${data.dsName1}-postgresql-button"]`).click();
+        cy.clearAndType(
+            dataSourceSelector.dsNameInputField,
+            `cypress-${data.dsName1}-postgresql1`
+        );
+        cy.get(commonSelectors.dashboardIcon).click();
+        cy.get(commonSelectors.cancelButton).click();
+        cy.verifyToastMessage(
+            commonSelectors.toastMessage,
+            dataSourceText.toastDSSaved
+        );
+
+        cy.get(
+            `[data-cy="cypress-${data.dsName1}-postgresql1-button"]`
+        ).verifyVisibleElement("have.text", `cypress-${data.dsName1}-postgresql1`);
+
+        deleteDatasource(`cypress-${data.dsName1}-postgresql1`);
     });
     it("Should verify the Datasource connection and query creation using global data source", () => {
-        selectDataSource(dataSourceText.postgreSQL);
-
-        cy.clearAndType(
-            '[data-cy="data-source-name-input-filed"]',
-            `cypress-${data.lastName}-postgresql`
+        selectAndAddDataSource(
+            "databases",
+            dataSourceText.postgreSQL,
+            data.dsName1
         );
 
         cy.intercept("GET", "api/v2/data_sources").as("datasource");
         fillConnectionForm(
             {
-                Host: Cypress.env("gds_pg_host"),
+                Host: Cypress.env("pg_host"),
                 Port: "5432",
-                "Database Name": Cypress.env("gds_pg_user"),
-                Username: Cypress.env("gds_pg_user"),
-                Password: Cypress.env("gds_pg_password"),
+                "Database Name": Cypress.env("pg_user"),
+                Username: Cypress.env("pg_user"),
+                Password: Cypress.env("pg_password"),
             },
             ".form-switch"
         );
         cy.wait("@datasource");
 
-        cy.get(dataSourceSelector.buttonTestConnection).click();
-        cy.get(dataSourceSelector.textConnectionVerified, {
-            timeout: 10000,
-        }).should("have.text", dataSourceText.labelConnectionVerified);
-        cy.get(dataSourceSelector.buttonSave).click();
-
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            dataSourceText.toastDSAdded
-        );
-
         cy.get(commonSelectors.globalDataSourceIcon).click();
-        cy.get(
-            `[data-cy="cypress-${data.lastName}-postgresql-button"]`
-        ).verifyVisibleElement("have.text", `cypress-${data.lastName}-postgresql`);
         cy.get(commonSelectors.dashboardIcon).click();
         navigateToAppEditor(data.appName);
 
-        cy.get(
-            `[data-cy="cypress-${data.lastName}-postgresql-add-query-card"]`
-        ).should("be.visible");
+        pinInspector();
+        // cy.get(".tooltip-inner").invoke("hide");
 
         addQuery(
             "table_preview",
             `SELECT * FROM persons;`,
-            `cypress-${data.lastName}-postgresql`
+            `cypress-${data.dsName1}-postgresql`
         );
 
         cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
             "have.text",
-            "table_preview"
+            "table_preview "
         );
 
-        pinInspector()
-
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        cy.get('[data-cy="inspector-node-queries"]')
-            .parent()
-            .within(() => {
-                cy.get("span").first().scrollIntoView().contains("queries").dblclick();
-            });
-        cy.get('[data-cy="inspector-node-table_preview"] > .node-key').click();
-        cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
-            "have.text",
-            "4 items "
-        );
-        cy.get(dataSourceSelector.buttonAddNewQueries).click();
+        verifyValueOnInspector("table_preview", "7 items ");
+        cy.get('[data-cy="show-ds-popover-button"]').click();
 
-        cy.get(
-            ".query-datasource-card-container > .col-auto > .query-manager-btn-name"
-        )
+        cy.get(".p-2 > .tj-base-btn")
             .should("be.visible")
-            .and("have.text", "Add new global datasource");
-        cy.get(
-            ".query-datasource-card-container > .col-auto > .query-manager-btn-name"
-        ).click();
+            .and("have.text", "+ Add new data source");
+        cy.get(".p-2 > .tj-base-btn").click();
 
-        selectDataSource(dataSourceText.postgreSQL);
-        cy.clearAndType(
-            '[data-cy="data-source-name-input-filed"]',
-            `cypress-${data.firstName}-postgresql`
+        selectAndAddDataSource(
+            "databases",
+            dataSourceText.postgreSQL,
+            data.dsName2
         );
-
         cy.intercept("GET", "api/v2/data_sources").as("datasource");
         fillConnectionForm(
             {
@@ -184,7 +266,8 @@ describe("Global Datasource Manager", () => {
     });
     it("Should validate the user's global data source permissions on apps created by admin", () => {
         logout();
-        cy.login(data.email, "password");
+        cy.apiLogin(data.email, "password");
+        cy.visit('/')
 
         cy.get(commonSelectors.globalDataSourceIcon).should("not.exist");
 
@@ -192,83 +275,53 @@ describe("Global Datasource Manager", () => {
 
         cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
             "have.text",
-            "table_preview"
+            "table_preview "
         );
 
-        pinInspector()
+        pinInspector();
+        // cy.get(".tooltip-inner").invoke("hide");
 
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        cy.get('[data-cy="inspector-node-queries"]')
-            .parent()
-            .within(() => {
-                cy.get("span").first().scrollIntoView().contains("queries").dblclick();
-            });
-        cy.get('[data-cy="inspector-node-table_preview"] > .node-key').click();
-        cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
-            "have.text",
-            "4 items "
-        );
+        verifyValueOnInspector("table_preview", "7 items ");
 
-        addQuery(
+        cy.get('[data-cy="show-ds-popover-button"]').click();
+        addQueryN(
             "student_data",
             `SELECT * FROM student_data;`,
-            `cypress-${data.firstName}-postgresql`
+            `cypress-${data.dsName2}-postgresql`
         );
 
         cy.get('[data-cy="list-query-student_data"]').verifyVisibleElement(
             "have.text",
-            "student_data"
+            "student_data "
         );
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        cy.get('[data-cy="inspector-node-queries"]')
-            .parent()
-            .within(() => {
-                cy.get("span").first().scrollIntoView().contains("queries").dblclick();
-            });
-        cy.get('[data-cy="inspector-node-student_data"] > .node-key').click();
-        cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
-            "have.text",
-            "8 items "
-        );
-        cy.get(dataSourceSelector.buttonAddNewQueries).click();
-        cy.get(
-            ".query-datasource-card-container > .col-auto > .query-manager-btn-name"
-        ).click();
-        cy.verifyToastMessage(
-            commonSelectors.toastMessage,
-            "You don't have access to GDS, contact your workspace admin to add datasources"
-        );
+        verifyValueOnInspector("student_data", "8 items ");
     });
     it("Should verify the query creation and scope changing functionality.", () => {
         logout();
-        cy.login(data.email, "password");
-        cy.createApp();
+        cy.apiLogin(data.email, "password");
+        cy.visit('/')
+        cy.apiCreateApp();
+        cy.openApp();
         cy.renameApp(data.appName);
-        cy.dragAndDropWidget("Button", 50, 50);
+        cy.dragAndDropWidget("Table", 250, 250);
 
         addQuery(
             "table_preview",
             `SELECT * FROM persons;`,
-            `cypress-${data.lastName}-postgresql`
+            `cypress-${data.dsName1}-postgresql`
         );
 
         cy.get('[data-cy="list-query-table_preview"]').verifyVisibleElement(
             "have.text",
-            "table_preview"
+            "table_preview "
         );
 
-        pinInspector()
+        pinInspector();
+        // cy.get(".tooltip-inner").invoke("hide");
 
         cy.get(dataSourceSelector.queryCreateAndRunButton).click();
-        cy.get('[data-cy="inspector-node-queries"]')
-            .parent()
-            .within(() => {
-                cy.get("span").first().scrollIntoView().contains("queries").dblclick();
-            });
-        cy.get('[data-cy="inspector-node-table_preview"] > .node-key').click();
-        cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
-            "have.text",
-            "4 items "
-        );
-    })
-});
+        verifyValueOnInspector("table_preview", "7 items ");
+    });
+});

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

@@ -0,0 +1,16 @@
+describe("Query Editor", () => {
+  beforeEach(() => {
+    cy.appUILogin();
+    cy.createApp();
+  });
+
+  it("should verify Elements on query editor", () => {});
+
+  it("should verify Functionality of query editor", () => {});
+
+  it("should verify imported app's queries", () => {});
+
+  it("should verify transformation", () => {});
+
+  it("should verify Event Handler", () => {});
+});

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

@@ -0,0 +1,16 @@
+describe("Query Manager", () => {
+  beforeEach(() => {
+    cy.appUILogin();
+    cy.createApp();
+  });
+
+  it("should verify Elements on query Manager", () => {});
+
+  it("should verify Filter", () => {});
+
+  it("should verify Sort", () => {});
+
+  it("should verify Filetr", () => {});
+
+  it("should verify Curd operation", () => {});
+});

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

@@ -33,7 +33,7 @@ describe("dashboard", () => {
 
   beforeEach(() => {
     cy.intercept("DELETE", "/api/folders/*").as("folderDeleted");
-    cy.intercept("GET", "/api/apps").as("appEditor");
+    // cy.intercept("GET", "/api/apps").as("appEditor");
     cy.intercept("GET", "/api/library_apps").as("appLibrary");
   });
 
@@ -159,7 +159,7 @@ describe("dashboard", () => {
     cy.reload();
     verifyTooltip(commonSelectors.dashboardIcon, "Dashboard");
     verifyTooltip(commonSelectors.databaseIcon, "Database");
-    verifyTooltip(commonSelectors.globalDataSourceIcon, "Global Datasources");
+    verifyTooltip(commonSelectors.globalDataSourceIcon, "Data Sources");
     verifyTooltip(commonSelectors.workspaceSettingsIcon, "Workspace settings");
     verifyTooltip(commonSelectors.notificationsIcon, "Comment notifications");
     verifyTooltip(dashboardSelector.modeToggle, "Mode");
@@ -167,15 +167,16 @@ describe("dashboard", () => {
   });
 
   it("Should verify app card elements and app card operations", () => {
-    cy.appUILogin();
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.renameApp(data.appName);
     cy.dragAndDropWidget("Table", 250, 250);
 
+
     cy.get(commonSelectors.editorPageLogo).click();
 
     cy.wait(500);
-    cy.reloadAppForTheElement(data.appName);
     cy.get(commonSelectors.appCard(data.appName))
       .parent()
       .within(() => {
@@ -283,7 +284,7 @@ describe("dashboard", () => {
       commonSelectors.toastMessage,
       dashboardText.appClonedToast
     );
-    cy.wait("@appEditor");
+    cy.waitForAppLoad();
     cy.wait(2000);
     cy.clearAndType(commonSelectors.appNameInput, data.cloneAppName);
     cy.dragAndDropWidget("button", 25, 25);

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

@@ -18,7 +18,9 @@ describe("App share functionality", () => {
   });
 
   it("Verify private and public app share funtionality", () => {
-    cy.createApp();
+    cy.apiLogin();
+    cy.apiCreateApp();
+    cy.openApp();
     cy.renameApp(data.appName);
     cy.dragAndDropWidget("Table", 250, 250);
 
@@ -79,6 +81,7 @@ describe("App share functionality", () => {
 
     cy.appUILogin();
     navigateToAppEditor(data.appName);
+    cy.skipEditorPopover()
     cy.get(commonWidgetSelector.shareAppButton).click();
     cy.get(commonWidgetSelector.makePublicAppToggle).uncheck();
     cy.get(commonWidgetSelector.modalCloseButton).click();
@@ -114,8 +117,6 @@ describe("App share functionality", () => {
     cy.appUILogin();
 
     navigateToAppEditor(data.appName);
-    cy.reloadAppForTheElement("skip");
-    cy.wait(4000);
     cy.skipEditorPopover();
     cy.get(commonWidgetSelector.shareAppButton).click();
     cy.get(commonWidgetSelector.makePublicAppToggle).check();

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

@@ -33,7 +33,7 @@ describe("User permissions", () => {
   });
   beforeEach(() => {
     cy.appUILogin();
-    cy.visitTheWorkspace('My workspace')
+    cy.visitTheWorkspace("My workspace");
   });
 
   it("Should verify the create new app permission", () => {
@@ -88,7 +88,10 @@ describe("User permissions", () => {
       .within(() => {
         cy.get("td input").eq(1).check();
       });
-    cy.verifyToastMessage(commonSelectors.toastMessage, "App permissions updated")
+    cy.verifyToastMessage(
+      commonSelectors.toastMessage,
+      "App permissions updated"
+    );
 
     common.logout();
     cy.login(data.email, usersText.password);
@@ -205,56 +208,23 @@ describe("User permissions", () => {
 
   it("Should verify Create/Update/Delete workspace variable permission", () => {
     common.navigateToWorkspaceVariable();
-    cy.get(workspaceVarSelectors.addNewVariableButton).should("exist");
-
-    common.logout();
-    cy.login(data.email, usersText.password);
-    common.navigateToWorkspaceVariable();
-    cy.get(workspaceVarSelectors.addNewVariableButton).should("not.exist");
-
-    permissions.adminLogin();
-    cy.get(groupsSelector.permissionsLink).click();
-    cy.get(groupsSelector.workspaceVarCheckbox).check();
+    cy.get('[data-cy="alert-info-text"]>>.text-muted').verifyVisibleElement(
+      "have.text",
+      "There are no Workspace variables. Workspace variables are being deprecated soon, so please use Workspace constants instead."
+    );
+    cy.get(
+      '[data-cy="go-to-workspace-constants-option-button"]'
+    ).verifyVisibleElement("have.text", "Go to workspace constants");
     common.logout();
 
     cy.login(data.email, usersText.password);
     common.navigateToWorkspaceVariable();
-    cy.get(workspaceVarSelectors.addNewVariableButton).should("exist").click();
-    cy.clearAndType(
-      workspaceVarSelectors.workspaceVarNameInput,
-      data.firstName
-    );
-    cy.clearAndType(
-      workspaceVarSelectors.workspaceVarValueInput,
-      common.randomValue()
-    );
-    cy.get(workspaceVarSelectors.addVariableButton).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      workspaceVarText.workspaceVarCreatedToast
-    );
-    cy.get(workspaceVarSelectors.workspaceVarName(data.firstName)).should(
-      "be.visible"
+    cy.get('[data-cy="alert-info-text"]>>.text-muted').verifyVisibleElement(
+      "have.text",
+      "There are no Workspace variables. Workspace variables are being deprecated soon, so please use Workspace constants instead."
     );
     cy.get(
-      workspaceVarSelectors.workspaceVarEditButton(data.firstName)
-    ).click();
-    cy.clearAndType(workspaceVarSelectors.workspaceVarNameInput, data.lastName);
-    cy.get(workspaceVarSelectors.addVariableButton).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      workspaceVarText.workspaceVarUpdatedToast
-    );
-    cy.get(workspaceVarSelectors.workspaceVarName(data.lastName)).should(
-      "be.visible"
-    );
-    cy.get(
-      workspaceVarSelectors.workspaceVarDeleteButton(data.lastName)
-    ).click();
-    cy.get(commonSelectors.buttonSelector("Yes")).click();
-    cy.verifyToastMessage(
-      commonSelectors.toastMessage,
-      workspaceVarText.workspaceVarDeletedToast
-    );
+      '[data-cy="go-to-workspace-constants-option-button"]'
+    ).verifyVisibleElement("have.text", "Go to workspace constants");
   });
 });

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

@@ -0,0 +1,359 @@
+import { commonSelectors, commonWidgetSelector } from "Selectors/common";
+import { fake } from "Fixtures/fake";
+import { workspaceConstantsSelectors } from "Selectors/workspaceConstants";
+import { workspaceConstantsText } from "Texts/workspaceConstants";
+import { commonText, commonWidgetText } from "Texts/common";
+import * as common from "Support/utils/common";
+import {
+    contantsNameValidation,
+    AddNewconstants,
+} from "Support/utils/workspaceConstants";
+import { buttonText } from "Texts/button";
+import {
+    verifyAndModifyParameter,
+    editAndVerifyWidgetName,
+} from "Support/utils/commonWidget";
+import { verifypreview } from "Support/utils/dataSource";
+
+import {
+    selectQueryFromLandingPage,
+    query,
+    addInputOnQueryField,
+} from "Support/utils/queries";
+
+const data = {};
+data.constName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
+data.newConstvalue = `New ${data.constName}`;
+data.constantsName = fake.firstName.toLowerCase().replaceAll("[^A-Za-z]", "");
+data.constantsValue = "dJ_8Q~BcaMPd";
+data.appName = `${fake.companyName}-App`;
+data.slug = data.appName.toLowerCase().replace(/\s+/g, "-");
+
+describe("Workspace constants", () => {
+    const envVar = Cypress.env("environment");
+    beforeEach(() => {
+        cy.appUILogin();
+        cy.intercept("GET", "/api/library_apps").as("homePage");
+    });
+    if (envVar === "Community") {
+        it("Verify workspace constants UI and CRUD operations", () => {
+            cy.get(commonSelectors.workspaceSettingsIcon).click();
+            cy.get(commonSelectors.workspaceConstantsOption)
+                .should(($el) => {
+                    expect($el.contents().first().text().trim()).to.eq(
+                        "Workspace constants"
+                    );
+                })
+                .click();
+
+            cy.get(commonSelectors.breadcrumbTitle).should(($el) => {
+                expect($el.contents().first().text().trim()).to.eq("Workspace settings");
+            });
+            cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+                "have.text",
+                " Workspace constants"
+            );
+
+            cy.get(
+                workspaceConstantsSelectors.workspaceConstantsHelperText
+            ).verifyVisibleElement(
+                "have.text",
+                workspaceConstantsText.workspaceConstantsHelperText
+            );
+
+            cy.get(commonSelectors.documentationLink).verifyVisibleElement(
+                "have.text",
+                commonText.documentationLink
+            );
+
+            cy.get("body").then(($body) => {
+                if ($body.find(workspaceConstantsSelectors.emptyStateImage).length > 0) {
+                    cy.get(workspaceConstantsSelectors.emptyStateImage).should(
+                        "be.visible"
+                    );
+                    cy.get(
+                        workspaceConstantsSelectors.emptyStateHeader
+                    ).verifyVisibleElement(
+                        "have.text",
+                        workspaceConstantsText.emptyStateHeader
+                    );
+                    cy.get(workspaceConstantsSelectors.emptyStateText).verifyVisibleElement(
+                        "have.text",
+                        workspaceConstantsText.emptyStateText
+                    );
+                    cy.get(
+                        workspaceConstantsSelectors.addNewConstantButton
+                    ).verifyVisibleElement(
+                        "have.text",
+                        workspaceConstantsText.addNewConstantButton
+                    );
+                }
+            });
+            cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+            cy.get(workspaceConstantsSelectors.contantFormTitle).verifyVisibleElement(
+                "have.text",
+                workspaceConstantsText.addConstatntText
+            );
+            cy.get(commonSelectors.nameLabel).verifyVisibleElement("have.text", "Name");
+            cy.get(commonSelectors.nameInputField)
+                .invoke("attr", "placeholder")
+                .should("eq", "Enter Constant Name");
+            cy.get(commonSelectors.nameInputField).should("be.visible");
+            cy.get(commonSelectors.valueLabel).verifyVisibleElement(
+                "have.text",
+                "Value"
+            );
+            cy.get(commonSelectors.valueInputField)
+                .invoke("attr", "placeholder")
+                .should("eq", "Enter Value");
+            cy.get(commonSelectors.valueInputField).should("be.visible");
+            cy.get(commonSelectors.cancelButton).verifyVisibleElement(
+                "have.text",
+                "Cancel"
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).verifyVisibleElement(
+                "have.text",
+                "Add constant"
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
+
+            contantsNameValidation(" ", commonText.constantsNameError);
+            contantsNameValidation("9", commonText.constantsNameError);
+            contantsNameValidation("%", commonText.constantsNameError);
+            contantsNameValidation(
+                "ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`a",
+                "Maximum length has been reached"
+            );
+            contantsNameValidation(
+                "ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`afgg",
+                "Constant name should be between 1 and 32 characters"
+            );
+
+            cy.clearAndType(commonSelectors.valueInputField, " ");
+            cy.get(commonSelectors.valueErrorText).verifyVisibleElement(
+                "have.text",
+                commonText.constantsValueError
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
+            cy.get(commonSelectors.cancelButton).click();
+            cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+
+            cy.clearAndType(commonSelectors.nameInputField, data.constName);
+            cy.clearAndType(commonSelectors.valueInputField, data.constName);
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
+            cy.get(commonSelectors.cancelButton).click();
+            cy.get(workspaceConstantsSelectors.constantName(data.constName)).should(
+                "not.exist"
+            );
+
+            cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+            cy.clearAndType(commonSelectors.nameInputField, data.constName);
+            cy.clearAndType(commonSelectors.valueInputField, data.constName);
+            cy.get(workspaceConstantsSelectors.addConstantButton).click();
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                workspaceConstantsText.constantCreatedToast
+            );
+
+            cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+            contantsNameValidation(
+                data.constName,
+                "Constant with this name already exists in Production environment"
+            );
+            cy.get(commonSelectors.cancelButton).click();
+
+            cy.get(workspaceConstantsSelectors.envName).verifyVisibleElement(
+                "have.text",
+                "Production"
+            );
+            cy.get(
+                workspaceConstantsSelectors.addNewConstantButton
+            ).verifyVisibleElement("have.text", "Create new constant");
+            cy.get(
+                workspaceConstantsSelectors.constantsTableNameHeader
+            ).verifyVisibleElement("have.text", "Name");
+            cy.get(
+                workspaceConstantsSelectors.constantsTableValueHeader
+            ).verifyVisibleElement("have.text", "Value");
+            cy.get(
+                workspaceConstantsSelectors.constantName(data.constName)
+            ).verifyVisibleElement("have.text", data.constName);
+            cy.get(
+                workspaceConstantsSelectors.constantValue(data.constName)
+            ).verifyVisibleElement("have.text", data.constName);
+            cy.get(
+                workspaceConstantsSelectors.constEditButton(data.constName)
+            ).verifyVisibleElement("have.text", "Edit");
+            cy.get(
+                workspaceConstantsSelectors.constDeleteButton(data.constName)
+            ).verifyVisibleElement("have.text", "Delete");
+            cy.get(commonSelectors.pagination).should("be.visible");
+
+            cy.get(workspaceConstantsSelectors.constEditButton(data.constName)).click();
+
+            cy.get(workspaceConstantsSelectors.contantFormTitle).verifyVisibleElement(
+                "have.text",
+                "Update constant in production "
+            );
+            cy.get(commonSelectors.nameLabel).verifyVisibleElement("have.text", "Name");
+            cy.get(commonSelectors.nameInputField).should("have.value", data.constName);
+            cy.get(commonSelectors.nameInputField)
+                .should("be.visible")
+                .and("be.disabled");
+            cy.get(commonSelectors.valueLabel).verifyVisibleElement(
+                "have.text",
+                "Value"
+            );
+            cy.get(commonSelectors.valueInputField)
+                .should("be.visible")
+                .and("have.value", data.constName);
+            cy.get(commonSelectors.cancelButton).verifyVisibleElement(
+                "have.text",
+                "Cancel"
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).verifyVisibleElement(
+                "have.text",
+                "Update"
+            );
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
+
+            cy.clearAndType(commonSelectors.valueInputField, data.newConstvalue);
+            cy.get(workspaceConstantsSelectors.addConstantButton).should("be.enabled");
+            cy.get(commonSelectors.cancelButton).click();
+            cy.get(
+                workspaceConstantsSelectors.constantValue(data.constName)
+            ).verifyVisibleElement("have.text", data.constName);
+
+            cy.get(workspaceConstantsSelectors.constEditButton(data.constName)).click();
+            cy.clearAndType(commonSelectors.valueInputField, data.newConstvalue);
+            cy.get(workspaceConstantsSelectors.addConstantButton).click();
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                "Constant updated successfully"
+            );
+            cy.get(
+                workspaceConstantsSelectors.constantValue(data.constName)
+            ).verifyVisibleElement("have.text", data.newConstvalue);
+
+            cy.get(
+                workspaceConstantsSelectors.constDeleteButton(data.constName)
+            ).click();
+            cy.get(commonSelectors.modalMessage).verifyVisibleElement(
+                "have.text",
+                `Are you sure you want to delete ${data.constName} from production?`
+            );
+            cy.get(commonSelectors.cancelButton).verifyVisibleElement(
+                "have.text",
+                "Cancel"
+            );
+            cy.get(commonSelectors.yesButton).verifyVisibleElement("have.text", "Yes");
+            cy.get(commonSelectors.cancelButton).click();
+            cy.get(
+                workspaceConstantsSelectors.constantValue(data.constName)
+            ).verifyVisibleElement("have.text", data.newConstvalue);
+
+            cy.get(
+                workspaceConstantsSelectors.constDeleteButton(data.constName)
+            ).click();
+            cy.get(commonSelectors.yesButton).click();
+            cy.get(workspaceConstantsSelectors.constantValue(data.constName)).should(
+                "not.exist"
+            );
+
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                "Constant deleted successfully"
+            );
+        });
+    }
+
+    it("should verify the constants resolving value on components and query", () => {
+        common.navigateToworkspaceConstants();
+        AddNewconstants(data.constantsName, data.constantsValue);
+        cy.get(
+            workspaceConstantsSelectors.constantName(data.constantsName)
+        ).verifyVisibleElement("have.text", data.constantsName);
+        cy.get(
+            workspaceConstantsSelectors.constantValue(data.constantsName)
+        ).verifyVisibleElement("have.text", data.constantsValue);
+
+        cy.get(commonSelectors.homePageLogo).click();
+        cy.wait("@homePage");
+        cy.createApp();
+        cy.renameApp(data.appName);
+
+        selectQueryFromLandingPage("runjs", "JavaScript");
+        addInputOnQueryField("runjs", `return constants.${data.constantsName}`);
+        query("preview");
+        verifypreview("raw", "dJ_8Q~BcaMPd");
+
+        cy.dragAndDropWidget("Text", 550, 350);
+        editAndVerifyWidgetName(data.constantsName);
+        cy.waitForAutoSave();
+
+        verifyAndModifyParameter("Text", `{{constants.${data.constantsName}`);
+        cy.forceClickOnCanvas();
+        cy.waitForAutoSave();
+
+        common.pinInspector();
+        cy.get(".tooltip-inner").invoke("hide");
+        cy.get(commonWidgetSelector.sidebarinspector).click();
+        cy.get(commonWidgetSelector.inspectorNodeComponents).click();
+        cy.get(commonWidgetSelector.nodeComponent(data.constantsName)).click();
+        cy.get('[data-cy="inspector-node-text"] > .mx-2').verifyVisibleElement(
+            "have.text",
+            `"dJ_8Q~BcaMPd"`
+        );
+
+        cy.get('[data-cy="inspector-node-constants"] > .node-key').click();
+        cy.get(`[data-cy="inspector-node-${data.constantsName}"] > .node-key`)
+            .eq(1)
+            .verifyVisibleElement("have.text", data.constantsName);
+        cy.get(
+            `[data-cy="inspector-node-${data.constantsName}"] > .mx-2`
+        ).verifyVisibleElement("have.text", `"dJ_8Q~BcaMPd"`);
+
+
+        if (envVar === "Community") {
+            cy.get('[data-cy="button-release"]').click();
+            cy.get('[data-cy="yes-button"]').click();
+            cy.verifyToastMessage(
+                commonSelectors.toastMessage,
+                "Version v1 released"
+            );
+
+            cy.get(commonWidgetSelector.shareAppButton).click();
+            cy.clearAndType(commonWidgetSelector.appNameSlugInput, `${data.slug}`);
+            cy.get(commonWidgetSelector.modalCloseButton).click();
+            cy.forceClickOnCanvas();
+            cy.waitForAutoSave();
+            cy.openInCurrentTab(commonWidgetSelector.previewButton);
+            cy.wait(4000);
+
+            cy.get(
+                commonWidgetSelector.draggableWidget(data.constantsName)
+            ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
+
+            cy.get('[data-cy="viewer-page-logo"]').click();
+            cy.wait("@homePage");
+            cy.visit(`/applications/${data.slug}`);
+            cy.wait(4000);
+
+            cy.get(
+                commonWidgetSelector.draggableWidget(data.constantsName)
+            ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
+        } else {
+            cy.forceClickOnCanvas();
+            cy.waitForAutoSave();
+            cy.openInCurrentTab(commonWidgetSelector.previewButton);
+            cy.wait(4000);
+
+            cy.get(
+                commonWidgetSelector.draggableWidget(data.constantsName)
+            ).verifyVisibleElement("have.text", "dJ_8Q~BcaMPd");
+
+            cy.get('[data-cy="viewer-page-logo"]').click();
+            cy.wait("@homePage");
+        }
+    });
+});

cypress-tests/cypress/support/e2e.js

@@ -14,11 +14,11 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "../commands/commands";
+import "../commands/apiCommands";
 import "cypress-real-events";
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
-Cypress.on('uncaught:exception', (err, runnable) => 
-{
-    return false;
-});
+Cypress.on("uncaught:exception", (err, runnable) => {
+  return false;
+});

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

@@ -30,11 +30,11 @@ export const verifyComponentWithOutLabel = (
   appName,
   properties = []
 ) => {
-  cy.dragAndDropWidget(component, 50, 50);
+  cy.dragAndDropWidget(component, 200, 200);
   cy.get(`[data-cy="draggable-widget-${defaultName}"]`).click({ force: true });
   verifyComponent(defaultName);
 
-  cy.resizeWidget(defaultName, 650, 400);
+  cy.resizeWidget(defaultName, 650, 400, false);
 
   openEditorSidebar(defaultName);
   editAndVerifyWidgetName(fakeName, properties);
@@ -47,7 +47,4 @@ export const verifyComponentWithOutLabel = (
 
   cy.go("back");
   deleteComponentAndVerify(fakeName);
-  cy.get(commonSelectors.editorPageLogo).click();
-
-  cy.deleteApp(appName);
 };

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

@@ -245,8 +245,6 @@ export const pinInspector = () => {
       cy.get(commonSelectors.inspectorPinIcon).click();
     }
   });
-  cy.reload();
-  cy.waitForAppLoad();
 };
 
 export const createGroup = (groupName) => {
@@ -257,4 +255,9 @@ export const createGroup = (groupName) => {
     commonSelectors.toastMessage,
     groupsText.groupCreatedToast
   );
+};
+
+export const navigateToworkspaceConstants = () => {
+  cy.get(commonSelectors.workspaceSettingsIcon).click();
+  cy.get(commonSelectors.workspaceConstantsOption).click();
 };

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

@@ -27,12 +27,14 @@ export const verifyAndModifyParameter = (paramName, value) => {
   cy.get(commonWidgetSelector.parameterLabel(paramName))
     .scrollIntoView()
     .should("have.text", paramName);
-  cy.get(
-    commonWidgetSelector.parameterInputField(paramName)
-  ).clearAndTypeOnCodeMirror(value);
+  cy.get(commonWidgetSelector.parameterInputField(paramName))
+    .clearAndTypeOnCodeMirror(" ")
+    .clearAndTypeOnCodeMirror(value);
 };
 
 export const openEditorSidebar = (widgetName = "") => {
+  cy.hideTooltip();
+
   cy.get(`${commonWidgetSelector.draggableWidget(widgetName)}:eq(0)`).trigger(
     "mouseover"
   );
@@ -48,14 +50,7 @@ export const verifyAndModifyToggleFx = (
     "have.text",
     paramName
   );
-  cy.get(
-    commonWidgetSelector.parameterFxButton(
-      paramName,
-      "[class*='fx-button  unselectable']"
-    )
-  )
-    .should("have.text", "Fx")
-    .click();
+  cy.get(commonWidgetSelector.parameterFxButton(paramName, " > svg")).click();
   if (defaultValue)
     cy.get(commonWidgetSelector.parameterInputField(paramName))
       .find("pre.CodeMirror-line")
@@ -214,7 +209,8 @@ export const verifyAndModifyStylePickerFx = (
   paramName,
   defaultValue,
   value,
-  index = 0
+  index = 0,
+  boxShadow = ""
 ) => {
   cy.get(commonWidgetSelector.parameterLabel(paramName)).should(
     "have.text",
@@ -228,19 +224,12 @@ export const verifyAndModifyStylePickerFx = (
   cy.get(commonWidgetSelector.stylePickerValue(paramName))
     .should("be.visible")
     .verifyVisibleElement("have.text", defaultValue);
-  cy.get(
-    commonWidgetSelector.parameterFxButton(
-      paramName,
-      "[class*='fx-button  unselectable']"
-    )
-  )
-    .should("have.text", "Fx")
-    .click();
+  cy.get(commonWidgetSelector.parameterFxButton(paramName, " > svg")).click();
 
   cy.get(commonWidgetSelector.stylePickerFxInput(paramName)).within(() => {
     cy.get(".CodeMirror-line")
       .should("be.visible")
-      .and("have.text", defaultValue);
+      .and("have.text", `${boxShadow}${defaultValue}`);
   });
 
   cy.get(
@@ -321,11 +310,13 @@ export const verifyStylesGeneralAccordion = (
 ) => {
   openEditorSidebar(widgetName);
   cy.get(commonWidgetSelector.buttonStylesEditorSideBar).click();
-  openAccordion(commonWidgetText.accordionGenaral, []);
+  // openAccordion(commonWidgetText.accordionGenaral, []);
   verifyAndModifyStylePickerFx(
     commonWidgetText.parameterBoxShadow,
     commonWidgetText.boxShadowDefaultValue,
-    `${boxShadowParameter[0]}px ${boxShadowParameter[1]}px ${boxShadowParameter[2]}px ${boxShadowParameter[3]}px ${hexColor}`
+    `${boxShadowParameter[0]}px ${boxShadowParameter[1]}px ${boxShadowParameter[2]}px ${boxShadowParameter[3]}px ${hexColor}`,
+    0,
+    "0px 0px 0px 0px "
   );
   cy.get(
     commonWidgetSelector.parameterFxButton(commonWidgetText.parameterBoxShadow)

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

@@ -3,6 +3,8 @@ import { postgreSqlText } from "Texts/postgreSql";
 import { cyParamName } from "../../constants/selectors/common";
 import { commonSelectors } from "Selectors/common";
 import { commonText } from "Texts/common";
+import { dataSourceSelector } from "Selectors/dataSource";
+import { dataSourceText } from "Texts/dataSource";
 
 export const verifyCouldnotConnectWithAlert = (dangerText) => {
   cy.get(postgreSqlSelector.connectionFailedText, {
@@ -37,31 +39,25 @@ export const addInput = (field, data) => {
 
 export const deleteDatasource = (datasourceName) => {
   cy.get(commonSelectors.globalDataSourceIcon).click();
-  cy.reload();
+  cy.get("body").then(($body) => {
+    if ($body.find(".tooltip-inner").length > 0) {
+      cy.get(".tooltip-inner").invoke("hide");
+    }
+  });
+  cy.get(dataSourceSelector.addedDsSearchIcon).click();
+  cy.clearAndType(dataSourceSelector.AddedDsSearchBar, datasourceName);
   cy.get(`[data-cy="${cyParamName(datasourceName)}-button"]`)
     .parent()
     .within(() => {
-      cy.get(`[data-cy="${cyParamName(datasourceName)}-delete-button"]`).invoke(
-        "click"
-      );
+      cy.get(dataSourceSelector.deleteDSButton(datasourceName)).invoke("click");
     });
   cy.get('[data-cy="yes-button"]').click();
-
-  cy.wait(1000);
-  cy.get("body").then(($body) => {
-    if (
-      $body.find(`[data-cy="${cyParamName(datasourceName)}-button"]`).length > 0
-    ) {
-      cy.get(`[data-cy="${cyParamName(datasourceName)}-button"]`)
-        .parent()
-        .within(() => {
-          cy.get(
-            `[data-cy="${cyParamName(datasourceName)}-delete-button"]`
-          ).invoke("click");
-        });
-      cy.get('[data-cy="yes-button"]').click();
-    }
-  });
+  // cy.verifyToastMessage(commonSelectors.toastMessage, "Data Source Deleted");
+  // cy.get(commonSelectors.breadcrumbTitle).click()
+  // cy.get(commonSelectors.breadcrumbPageTitle).verifyVisibleElement(
+  //   "have.text",
+  //   " Databases"
+  // );
 };
 
 export const closeDSModal = () => {
@@ -75,3 +71,52 @@ export const closeDSModal = () => {
     }
   });
 };
+
+export const addQuery = (queryName, query, dbName) => {
+  cy.get("body").then(($body) => {
+    if ($body.find('[data-cy="gds-querymanager-search-bar"]').length > 0) {
+      cy.clearAndType('[data-cy="gds-querymanager-search-bar"]', `${dbName}`);
+    }
+  });
+
+  cy.get(`[data-cy="${dbName}-add-query-card"] > .text-truncate`).click();
+  cy.get('[data-cy="query-rename-input"]').clear().type(queryName);
+
+  cy.get(dataSourceSelector.queryInputField)
+    .realMouseDown({ position: "center" })
+    .realType(" ");
+  cy.get(dataSourceSelector.queryInputField).clearAndTypeOnCodeMirror(query);
+  cy.get(dataSourceSelector.queryCreateAndRunButton).click();
+};
+
+export const addQueryN = (queryName, query, dbName) => {
+  cy.get(".css-1rrkggf-Input").type(`${dbName}`);
+  cy.contains(`[id*="react-select-"]`, dbName).click();
+  cy.get('[data-cy="query-rename-input"]').clear().type(queryName);
+
+  cy.get(dataSourceSelector.queryInputField)
+    .realMouseDown({ position: "center" })
+    .realType(" ");
+  cy.get(dataSourceSelector.queryInputField).clearAndTypeOnCodeMirror(query);
+  cy.get(dataSourceSelector.queryCreateAndRunButton).click();
+};
+
+export const verifyValueOnInspector = (queryName, value) => {
+  cy.get('[data-cy="inspector-node-queries"]')
+    .parent()
+    .within(() => {
+      cy.get("span").first().scrollIntoView().contains("queries").click();
+    });
+  cy.get("body").then(($body) => {
+    if (
+      $body.find(`[data-cy="inspector-node-${queryName}"] > .node-key`).length >
+      0
+    ) {
+      cy.get(`[data-cy="inspector-node-${queryName}"] > .node-key`).click();
+      cy.get('[data-cy="inspector-node-data"] > .fs-9').verifyVisibleElement(
+        "have.text",
+        value
+      );
+    }
+  });
+};

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

@@ -342,7 +342,7 @@ export const filterOperation = (
   cy.get(filterSelectors.selectOperationField).click();
   cy.contains(`[id*="react-select-"]`, operation[0]).click();
   cy.clearAndType(filterSelectors.valueInputField, value[0]);
-  cy.wait("@dbLoad");
+  //cy.wait("@dbLoad");
 
   for (let i = 1; i < columnName.length; i++) {
     cy.get(filterSelectors.addConditionLink).click();
@@ -402,6 +402,7 @@ export const deleteCondition = (selector, columnName = [], deleteIcon) => {
 };
 export const deleteRowAndVerify = (tableName, rowNumber = []) => {
   navigateToTable(tableName);
+  cy.wait("@dbLoad");
   cy.get("body")
     .find(".table>>tr")
     .its("length")
@@ -411,9 +412,11 @@ export const deleteRowAndVerify = (tableName, rowNumber = []) => {
       }
       cy.get(databaseSelectors.deleteRecordButton).should("be.visible").click();
 
-      // cy.on('window:confirm', (ConfirmText) => {
-      //   expect(ConfirmText).to.equal('Are you sure you want to delete the selected rows?');
-      // })
+      cy.on("window:confirm", (ConfirmText) => {
+        expect(ConfirmText).to.equal(
+          "Are you sure you want to delete the selected rows?"
+        );
+      });
       cy.verifyToastMessage(
         commonSelectors.toastMessage,
         databaseText.deleteRowToast(tableName, rowNumber.length)

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

@@ -13,11 +13,11 @@ export const verifyNodeData = (node, type, children, index = 0) => {
     .verifyVisibleElement("have.text", type);
 };
 
-export const openNode = (node, index = 0) => {
+export const openNode = (node, index = 0, time = 1000) => {
   cy.get(`[data-cy="inspector-node-${node.toLowerCase()}"] > .node-key`)
     .eq(index)
     .click();
-  cy.wait(1000);
+  cy.wait(time);
 };
 
 export const verifyValue = (node, type, children, index = 0) => {

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

@@ -134,10 +134,10 @@ export const manageUsersElements = () => {
 export const inviteUser = (firstName, email) => {
   fillUserInviteForm(firstName, email);
   cy.get(usersSelector.buttonInviteUsers).click();
-  cy.verifyToastMessage(
-    commonSelectors.toastMessage,
-    usersText.userCreatedToast
-  );
+  // cy.verifyToastMessage(
+  //   commonSelectors.toastMessage,
+  //   usersText.userCreatedToast
+  // );
   cy.wait(1000)
   fetchAndVisitInviteLink(email);
 };
@@ -318,4 +318,4 @@ export const fetchAndVisitInviteLink = (email) => {
       });
     });
   });
-};
+};

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

@@ -52,7 +52,7 @@ export const addAndVerifyColor = (
 };
 
 export const typeOnFx = (fx, data) => {
-  cy.get(commonWidgetSelector.parameterFxButton(fx)).eq(1).realClick();
+  cy.get(commonWidgetSelector.parameterFxButton(fx)).eq(0).realClick();
   cy.get(commonWidgetSelector.parameterInputField(fx)).clearAndTypeOnCodeMirror(
     data
   );

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

@@ -1,13 +1,13 @@
 import {
   fillDataSourceTextField,
-  selectDataSource,
+  selectAndAddDataSource,
 } from "Support/utils/postgreSql";
 import { mongoDbText } from "Texts/mongoDb";
 import { postgreSqlSelector } from "Selectors/postgreSql";
 import { postgreSqlText } from "Texts/postgreSql";
 
 export const connectMongo = () => {
-  selectDataSource(mongoDbText.mongoDb);
+  selectAndAddDataSource(mongoDbText.mongoDb);
 
   cy.clearAndType(
     '[data-cy="data-source-name-input-filed"]',

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

@@ -1,7 +1,7 @@
 import { multipageSelector } from "Selectors/multipage";
 
 export const searchPage = (pageName) => {
-  cy.get('[data-cy="search-page-option-icon"]').click();
+  cy.get('[title="Search"]').click();
   cy.get('[data-cy="search-input-filed"]').type(pageName);
 };
 
@@ -10,11 +10,14 @@ export const clearSearch = () => {
 };
 
 export const modifyPageHandle = (pageName, handle) => {
-  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`).click();
-  cy.get(multipageSelector.pageMenuIcon).click();
+  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`)
+    .click()
+    .parent()
+    .find(multipageSelector.pageMenuIcon)
+    .click();
   cy.get(multipageSelector.pageHandleText).click();
   cy.get(multipageSelector.pageHandleInputField).clear().type(handle);
-  cy.get(multipageSelector.pageHandleSaveButton).click()
+  cy.get(multipageSelector.pageHandleSaveButton).click();
 };
 
 export const detetePage = (pageName) => {
@@ -26,14 +29,21 @@ export const detetePage = (pageName) => {
 };
 
 export const hideOrUnhidePage = (pageName, operation = "hide") => {
-  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`).click();
-  cy.get(multipageSelector.pageMenuIcon).click();
-  cy.get(`[data-cy="${operation}-page-option-button"]`).click();
+  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`)
+    .click()
+    .parent()
+    .find(multipageSelector.pageMenuIcon)
+    .click();
+  cy.get(`[data-cy="${operation}-page-on-app-menu-option-button"]`).click();
 };
 
 export const setHomePage = (pageName) => {
-  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`).trigger('mouseover').click();
-  cy.get(multipageSelector.pageMenuIcon).click();
+  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`)
+    .trigger("mouseover")
+    .click()
+    .parent()
+    .find(multipageSelector.pageMenuIcon)
+    .click();
   cy.get(multipageSelector.markHomePageOptionButton).click();
 };
 
@@ -45,8 +55,11 @@ export const addNewPage = (pageName) => {
 };
 
 export const addEventHandler = (pageName) => {
-  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`).click();
-  cy.get(multipageSelector.pageMenuIcon).click();
+  cy.get(`[data-cy="pages-name-${pageName.toLowerCase()}"]`)
+    .click()
+    .parent()
+    .find(multipageSelector.pageMenuIcon)
+    .click();
   cy.get(multipageSelector.eventHandlerOptionButton).click();
   cy.get(multipageSelector.addEventHandlerLink).click();
   cy.get(multipageSelector.eventName).verifyVisibleElement(

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

@@ -9,27 +9,28 @@ import { postgreSqlSelector } from "Selectors/postgreSql";
 import { postgreSqlText } from "Texts/postgreSql";
 import { closeDSModal } from "Support/utils/dataSource";
 
-
 export const addQuery = (queryName, query, dbName) => {
   cy.get(postgreSqlSelector.buttonAddNewQueries).click();
   cy.get(`[data-cy="${dbName}-add-query-card"]`)
     .should("contain", dbName)
     .click();
   // selectQueryMode(postgreSqlText.queryModeSql, "3");
-  cy.get('[data-cy="query-name-label"]').realHover().then(() => {
-    cy.get('[class*="breadcrum-rename-query-icon"]').click();
-  });
+  cy.get('[data-cy="query-name-label"]')
+    .realHover()
+    .then(() => {
+      cy.get('[class*="breadcrum-rename-query-icon"]').click();
+    });
   cy.get(postgreSqlSelector.queryLabelInputField).clear().type(queryName);
-  cy.get(postgreSqlSelector.queryInputField).realMouseDown({ position: "center" }).realType(' ');
-  cy.get(postgreSqlSelector.queryInputField).clearAndTypeOnCodeMirror(query)
+  cy.get(postgreSqlSelector.queryInputField)
+    .realMouseDown({ position: "center" })
+    .realType(" ");
+  cy.get(postgreSqlSelector.queryInputField).clearAndTypeOnCodeMirror(query);
   cy.get(postgreSqlSelector.queryCreateAndRunButton).click();
 };
 
 export const addQueryOnGui = (queryName, query) => {
   cy.get(postgreSqlSelector.buttonAddNewQueries).click();
-  cy.get('[data-cy="cypress-postgresql"]')
-    .should("contain", dbName)
-    .click();
+  cy.get('[data-cy="cypress-postgresql"]').should("contain", dbName).click();
 
   cy.get(postgreSqlSelector.queryLabelInputField).clear().type(queryName);
   cy.get(postgreSqlSelector.queryInputField)
@@ -41,16 +42,57 @@ export const addQueryOnGui = (queryName, query) => {
     `Query (${queryName}) completed.`
   );
 };
-export const selectDataSource = (dataSource) => {
+export const selectAndAddDataSource = (
+  dscategory,
+  dataSource,
+  dataSourceName
+) => {
   cy.get(commonSelectors.globalDataSourceIcon).click();
-  closeDSModal()
-  cy.wait(500);
-  cy.get(commonSelectors.addNewDataSourceButton).click();
+  cy.wait(1000)
+  cy.get(`[data-cy="${cyParamName(dscategory)}-datasource-button"]`).click();
+  cy.wait(500)
   cy.get(postgreSqlSelector.dataSourceSearchInputField).type(dataSource);
-  cy.get(`[data-cy='data-source-${dataSource.toLowerCase()}']`).click();
+  cy.get(`[data-cy="data-source-${(dataSource).toLowerCase()}"]`)
+    .parent()
+    .within(() => {
+      cy.get(
+        `[data-cy="data-source-${(
+          dataSource
+        ).toLowerCase()}"]>>>.datasource-card-title`
+      ).realHover("mouse");
+      cy.get(
+        `[data-cy="${cyParamName(dataSource).toLowerCase()}-add-button"]`
+      ).click();
+    });
+
+  cy.wait(1000)
+  cy.get(postgreSqlSelector.buttonSave).should("be.disabled")
+  cy.clearAndType(
+    '[data-cy="data-source-name-input-filed"]',
+    cyParamName(`cypress-${dataSourceName}-${dataSource}`)
+  );
+  cy.get(postgreSqlSelector.buttonSave).click();
+  cy.verifyToastMessage(
+    commonSelectors.toastMessage,
+    postgreSqlText.toastDSAdded
+  );
+  cy.get(
+    `[data-cy="cypress-${cyParamName(dataSourceName)}-${cyParamName(
+      dataSource
+    )}-button"]`
+  ).verifyVisibleElement(
+    "have.text",
+    `cypress-${cyParamName(dataSourceName)}-${cyParamName(dataSource)}`
+  );
 };
 
 export const fillConnectionForm = (data, toggle = "") => {
+  cy.get("body").then(($body) => {
+    const editButton = $body.find(".tj-btn");
+    if (editButton.length > 0) {
+      editButton.click();
+    }
+  });
   for (const property in data) {
     cy.clearAndType(
       `[data-cy="${cyParamName(property)}-text-field"]`,
@@ -60,11 +102,16 @@ export const fillConnectionForm = (data, toggle = "") => {
   if (toggle != "") {
     cy.get(toggle).click();
   }
+
+  cy.get(postgreSqlSelector.buttonSave).click();
+  cy.verifyToastMessage(
+    commonSelectors.toastMessage,
+    postgreSqlText.toastDSSaved
+  );
   cy.get(postgreSqlSelector.buttonTestConnection).click();
   cy.get(postgreSqlSelector.textConnectionVerified, {
     timeout: 7000,
-  }).should("have.text", "connection verified");
-  cy.get(postgreSqlSelector.buttonSave).click();
+  }).should("have.text", postgreSqlText.labelConnectionVerified);
 };
 
 export const fillDataSourceTextField = (
@@ -78,9 +125,15 @@ export const fillDataSourceTextField = (
     `${assertionType}.text`,
     fieldName
   );
+  cy.get(`[data-cy="${cyParamName(fieldName)}-text-field"]`).then(($field) => {
+    if ($field.is(":disabled")) {
+      cy.get(".datasource-edit-btn").click();
+    }
+  });
   cy.get(`[data-cy="${cyParamName(fieldName)}-text-field"]`)
     .invoke("attr", "placeholder")
     .should("eq", placeholder.replace(/\u00a0/g, " "));
+
   cy.get(`[data-cy="${cyParamName(fieldName)}-text-field"]`)
     .clear()
     .type(input, args);
@@ -131,4 +184,4 @@ export const addWidgetsToAddUser = () => {
   addEventHandlerToRunQuery("add_data_using_widgets");
 };
 
-export const addListviewToVerifyData = () => { };
+export const addListviewToVerifyData = () => { };

cypress-tests/cypress/support/utils/queryPanel/queryEditor.js

@@ -0,0 +1,50 @@
+export const verifyElemtsNoGds = (option) => {
+  cy.get('[data-cy="label-select-datasource"]').verifyVisibleElement(
+    "have.text",
+    "Connect to a datasource"
+  );
+  cy.get('[data-cy="querymanager-description"]').verifyVisibleElement(
+    "contain.text",
+    "Select a datasource to start creating a new query. To know more about queries in ToolJet, you can read our"
+  );
+  cy.get('[data-cy="querymanager-doc-link"]').verifyVisibleElement(
+    "have.text",
+    "documentation"
+  );
+
+  cy.get('[data-cy="landing-page-label-default"]').verifyVisibleElement(
+    "have.text",
+    "Default"
+  );
+  cy.get('[data-cy="restapi-add-query-card"]').verifyVisibleElement(
+    "have.text",
+    "REST API"
+  );
+  cy.get('[data-cy="runjs-add-query-card"]').verifyVisibleElement(
+    "have.text",
+    "JavaScript"
+  );
+  cy.get('[data-cy="runpy-add-query-card"]').verifyVisibleElement(
+    "have.text",
+    "Python"
+  );
+  cy.get('[data-cy="tooljetdb-add-query-card"]').verifyVisibleElement(
+    "have.text",
+    "ToolJet DB"
+  );
+
+  cy.get('[data-cy="label-avilable-ds"]').verifyVisibleElement(
+    "have.text",
+    "Available Datasources 0"
+  );
+  cy.get('[data-cy="landing-page-add-new-ds-button"]').verifyVisibleElement(
+    "have.text",
+    "Add new"
+  );
+  cy.get('[data-cy="empty-banner-queryManager"]').verifyVisibleElement(
+    "have.text",
+    "No global datasources have been added yet. Add new datasources to connect to your app! 🚀"
+  );
+};
+
+export const verifyElemtsWithGds = (option) => {};

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

@@ -32,11 +32,12 @@ export const selectDropdownOption = (inputSelector, option) => {
     multipleBadges: 5,
     tags: 6,
     dropdown: 7,
-    radio: 8,
-    multiselect: 9,
-    toggleSwitch: 10,
-    datePicker: 11,
-    image: 12,
+    link: 8,
+    radio: 9,
+    multiselect: 10,
+    toggleSwitch: 11,
+    datePicker: 12,
+    image: 13,
     wrap: 0,
     scroll: 1,
     hide: 2,
@@ -65,13 +66,13 @@ export const verifyAndEnterColumnOptionInput = (label, value) => {
     .find("label")
     .should("have.text", label);
   cy.get(`[data-cy="input-and-label-${cyParamName(label)}"]`)
-    .realClick()
-    .realPress(["Meta", "A"])
-    .realType(`{backspace}{backspace}{backspace}{backspace}`)
-    .realPress(["Meta", "A"])
-    .realType(
-      `{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}{backspace}{rightarrow}${value}`
-    );
+    .find(`[data-cy="-input-field"]`)
+    // .click({ force: true })
+    // .realClick()
+    // .realPress(["Meta", "A"])
+    // .realType(`{backspace}{backspace}{backspace}{backspace}`)
+    // .realPress(["Meta", "A"])
+    .clearAndTypeOnCodeMirror(`${value}`);
 };
 
 export const addAndOpenColumnOption = (name, type) => {
@@ -86,7 +87,13 @@ export const addAndOpenColumnOption = (name, type) => {
 };
 
 export const deleteAndVerifyColumn = (columnName) => {
-  cy.get(`[data-cy="button-delete-${columnName}"]`).click();
+  cy.get(`[data-cy="pages-name-${columnName}"]`)
+    .parent()
+    .realHover()
+    .click()
+    .find(".tj-base-btn")
+    .click();
+  cy.get(".list-item-popover-option").click();
   cy.notVisible(`[data-cy="column-${columnName}"]`);
   cy.notVisible(tableSelector.columnHeader(columnName));
 };
@@ -128,20 +135,20 @@ export const verifySingleValueOnTable = (
 export const verifyAndModifyToggleFx = (
   paramName,
   defaultValue,
-  toggleModification = true
+  toggleModification = true,
+  helper = ""
 ) => {
   cy.get(`[data-cy="label-${cyParamName(paramName)}"]`).should(
     "have.text",
     paramName
   );
-  cy.get(commonWidgetSelector.parameterFxButton(paramName, ":eq(1)"))
+  cy.get(commonWidgetSelector.parameterFxButton(paramName, "> svg"))
     .scrollIntoView()
-    .should("have.text", "Fx")
     .click();
   if (defaultValue)
     cy.get(commonWidgetSelector.parameterInputField(paramName))
       .find("pre.CodeMirror-line")
-      .should("have.text", defaultValue);
+      .should("have.text", `${helper}${defaultValue}`);
   cy.get(commonWidgetSelector.parameterFxButton(paramName)).click();
   if (toggleModification == true)
     cy.get(commonWidgetSelector.parameterTogglebutton(paramName)).click();

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

@@ -0,0 +1,19 @@
+import { commonSelectors } from "Selectors/common";
+import { fake } from "Fixtures/fake";
+import { workspaceConstantsSelectors } from "Selectors/workspaceConstants";
+import { workspaceConstantsText } from "Texts/workspaceConstants";
+import { commonText } from "Texts/common";
+import * as common from "Support/utils/common";
+
+export const contantsNameValidation = (value, error) => {
+    cy.clearAndType(commonSelectors.nameInputField, value);
+    cy.get(commonSelectors.nameErrorText).verifyVisibleElement("have.text", error)
+    cy.get(workspaceConstantsSelectors.addConstantButton).should("be.disabled");
+}
+
+export const AddNewconstants = (name, value) => {
+    cy.get(workspaceConstantsSelectors.addNewConstantButton).click();
+    cy.clearAndType(commonSelectors.nameInputField, name);
+    cy.clearAndType(commonSelectors.valueInputField, value);
+    cy.get(workspaceConstantsSelectors.addConstantButton).click();
+}

deploy/ec2/setup_machine.sh

@@ -2,6 +2,7 @@
 
 set -e
 # Setup prerequisite dependencies
+sudo apt-get update
 sudo apt-get -y install --no-install-recommends wget gnupg ca-certificates apt-utils git curl postgresql-client
 curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
 export NVM_DIR="$HOME/.nvm"

docs/docs/app-builder/canvas.md

@@ -7,17 +7,18 @@ Canvas is the center area of the ToolJet app builder where the application is bu
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvas.png" alt="App Builder: Canvas"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvasnew.png" alt="App Builder: Canvas"/>
 
 </div>
+<br/>
 
 :::info
-- The Canvas height and width can be adjusted from the [Global Settings](/docs/app-builder/topbar#global-settings).
-- When the [Pages drawer](/docs/tutorial/pages) on the left is opened or pinned, the canvas becomes scrollable.
+- The Canvas height and width can be adjusted from the [Global Settings](/docs/app-builder/left-sidebar#global-settings).
+- When the [Pages drawer](/docs/tutorial/pages) on the left is opened or pinned, the canvas becomes horizontally scrollable.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/canvasscroll.gif" alt="App Builder: Canvas"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/scrollnew.gif" alt="App Builder: Canvas"/>
 
 </div>
 :::
@@ -28,7 +29,7 @@ All the components are fully interactive in editor mode - to prevent interaction
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/arrange.png" alt="App Builder: Canvas"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/canvas/handlenew.png" alt="App Builder: Canvas"/>
 
 </div>
 
@@ -46,7 +47,7 @@ You can precisely set the position of selected components using keyboard arrow k
 
 ### Group Components
 
-ToolJet comes with flexible components to group other components together, such as **Container** and **Form**. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way.
+ToolJet comes with flexible components to group other components together, such as **[Container](/docs/widgets/container/)** and **[Form](/docs/widgets/form/)**. When you drag and drop components in containers/forms they create a group of nested components. All components can be nested in this way.
 
 ### Hide or Disable Components
 
@@ -62,5 +63,5 @@ For example: We want to disable a button when a checkbox is checked so we can si
 
 ### Clone Components
 
-You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)**
+You can clone existing components on the canvas by **cmd/ctrl + d**. Check other **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)**.
 

docs/docs/app-builder/left-sidebar.md

@@ -8,11 +8,13 @@ Left-sidebar has the following options:
 - **[Pages](#pages)**
 - **[Inspector](#inspector)**
 - **[Debugger](#debugger)**
+- **[Global Settings](#global-settings)**
+- **[Comments](#comments)**
 - **[Theme switch](#theme-switch)**
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/newui.png" alt="App Builder: Left-sidebar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/leftnew.png" alt="App Builder: Left-sidebar"/>
 
 </div>
 
@@ -24,7 +26,7 @@ Check the detailed documentation for **[Pages](/docs/tutorial/pages)**.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/pages2.png" alt="App Builder: Left-sidebar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/pagesnew.png" alt="App Builder: Left-sidebar"/>
 
 </div>
 
@@ -36,7 +38,7 @@ Check the detailed guide on **[using Inspector](/docs/how-to/use-inspector)**.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/inspector2.png" alt="App Builder: Left-sidebar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/inspectornew.png" alt="App Builder: Left-sidebar"/>
 
 </div>
 
@@ -58,8 +60,40 @@ Debugger consists of two main sections:
 
 </div>
 
+## Global Settings
+
+To configure the app's global settings, click on the kebab menu(three vertical dots) on the left of the app name. Global settings include:
+
+- **Hide header for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched
+- **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**.
+- **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is 1292 px.
+- **Max height of canvas**: Modify the width of the canvas in **px** or **%**. The default height is 2400 px and currently it is the maximum height limit.
+- **Background color of canvas**: Enter the hex color code or choose a color from the picker to change the background color of the canvas. You can also click on the **Fx** to programmatically set the value.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/globalnew.png" alt="App Builder: Left-sidebar"/>
+
+</div>
+
+## Comments
+
+Comment anywhere on the canvas and collaborate with other users in the workspace. Click on the comments button to enable it and then drop comment anywhere on the canvas.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/commentnew.png" alt="App Builder: Left-sidebar"/>
+
+</div>
+
 ## Theme Switch
 
 Use the theme switch button to toggle ToolJet between light and dark modes.
 
-While developers can access the current theme's value through global variables using `{{globals.theme.name}}`, it is not currently feasible to change the theme programmatically.
+While developers can access the current theme's value through global variables using `{{globals.theme.name}}`, it is not currently feasible to change the theme programmatically.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/leftsidebar/theme.png" alt="App Builder: Left-sidebar"/>
+
+</div>

docs/docs/app-builder/overview.md

@@ -15,6 +15,6 @@ ToolJet's App Builder allows you to build applications. ToolJet's app builder ha
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/builder.png" alt="App Builder: Overview"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/appbuilderui2.png" alt="App Builder: Overview"/>
 
 </div>

docs/docs/app-builder/right-sidebar.md

@@ -7,23 +7,23 @@ The **Components Library** on the right sidebar contains all of the available co
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/rightsidebar.png" alt="App Builder: Component library- right sidebar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/librarynew.png" alt="App Builder: Component library- right sidebar"/>
 
 </div>
 
 :::tip
-Check the **[Components Catalog](/docs/widgets/overview)** here to know more about specific component.
+Check the **[Components Catalog](/docs/widgets/overview)** to know more about specific component.
 :::
 
 ## Component Config Inspector
 
 The Component Config Inspector is also called as component inspector. It contains all the available settings for the selected component and is where you **set values**, **update component names**, and **create event handlers**. The Component Inspector organizes settings into different sections, such as **Property** and **Styles**. 
 
-To open the Component Config Inspector, click on the component handle that is present on the top of the component including **⚙️ + Component Name** and the component inspector will open up on the right side:
+To open the Component Config Inspector, click on the **[component handle](/docs/app-builder/canvas#arrange-components)** that is present on the top of the component including **⚙️ + Component Name** and the component inspector will open up on the right side:
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/component-inspector.gif" alt="App Builder: Component library- right sidebar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/rightsidebar/configinspector.gif" alt="App Builder: Component library- right sidebar"/>
 
 </div>
 

docs/docs/app-builder/share.md

@@ -7,7 +7,7 @@ ToolJet apps offer two sharing options: they can either be shared privately with
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/share/modal.png" alt="Share modal" width='700'/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/share/sharenew.png" alt="Share modal" width='700'/>
 
 </div>
 
@@ -17,7 +17,7 @@ To share the app with external end users and make it accessible to anyone on the
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/share/shareon.png" alt="Share modal" width='700'/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/share/publicnew.png" alt="Share modal" width='700'/>
 
 </div>
 
@@ -39,7 +39,7 @@ ToolJet apps can be directly shared with end users and embedded into web apps us
 For embedding private ToolJet apps, you'll need to set an environment variable in the `.env` file.
 
 | Variable        | Description                           |
-| --------------- | ------------------------------------- |
+|:-------------- |:------------------------------------ |
 | ENABLE_PRIVATE_APP_EMBED | `true` or `false` |
 
 You can learn more [here](/docs/setup/env-vars#enabling-embedding-of-private-apps).

docs/docs/app-builder/toolbar.md

@@ -7,35 +7,19 @@ Topbar is present at the top of the app-builder, and is used to configure the ap
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/toolbar.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/topbarnew.png" alt="App Builder: Topbar"/>
 
 </div>
 
 ### App name
 
-App name can be edited from the left side of the topbar next to the ToolJet logo.
+The App name can be modified by selecting the application name located on the left side of the topbar.
 
-When a new app is created, by default its name is set to **Untitled app**
+Upon the creation of a new app, it is automatically assigned a unique app name.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/name.png" alt="App Builder: Topbar"/>
-
-</div>
-
-### Global Settings
-
-To configure the app's global settings, click on the kebab menu(three vertical dots) on the left of the app name. Global settings include:
-
-- **Hide header for launched apps**: Toggle this on to the hide the tooljet's header when the applications are launched
-- **Maintenance mode**: Toggle this on to put the application in maintenance mode. When in **maintenance mode**, on launching the app, the user will get an error message that **the app is under maintenance**.
-- **Max width of canvas**: Modify the width of the canvas in **px** or **%**. The default width is 1292 px.
-- **Max height of canvas**: Modify the width of the canvas in **px** or **%**. The default height is 2400 px and currently it is the maximum height limit.
-- **Background color of canvas**: Enter the hex color code or choose a color from the picker to change the background color of the canvas. You can also click on the **Fx** to programmatically set the value.
-
-<div style={{textAlign: 'center'}}>
-
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/newglobalset.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/appnamenew.png" alt="App Builder: Topbar"/>
 
 </div>
 
@@ -43,13 +27,13 @@ To configure the app's global settings, click on the kebab menu(three vertical d
 
 Switch the canvas mode in Mobile or Desktop layout from the topbar.
 
-#### Adding existing component to mobile layout
+#### Showing component on mobile layout
 
-Click on the component handle to open component config inspector on the right side. Scroll down to the **Layout** section and enable Mobile Layout. The width of the widget will be adjusted to fit the Mobile Layout.
+Click on the component handle to open [component config inspector](/docs/app-builder/components-library#component-config-inspector) on the right sidebar. Scroll down to the **Layout** section and toggle on the Mobile Layout option. The width of the components will be adjusted to fit the Mobile Layout.
 
 #### Adding a new component to mobile layout
 
-Switch the layout to mobile by clicking the button on the topbar. Drag and drop a component to the canvas. This widget will not be shown on desktop layout unless **Show on desktop** is enabled from the component config inspector.
+Switch the canvas to mobile layout by clicking the mobile icon on the topbar. Drag and drop a new component to the canvas. This component will not be visible on the desktop layout unless **Show on desktop** is enabled from the component config inspector.
 
 :::info
 Width of the component will be automatically adjusted to fit the screen while viewing the application in app viewer.
@@ -57,41 +41,55 @@ Width of the component will be automatically adjusted to fit the screen while vi
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/view.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/canvasmodes.gif" alt="App Builder: Topbar"/>
 
 </div>
 
-### Undo or Redo
+### Changes saved indicator
 
-Use the undo or redo buttons from the topbar to undo or redo any change on the canvas.
-
-You can also **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** to perform such actions.
+Whenever a change is made on the component or the query panel/queries, the changes are saved automatically. The changes saved indicator will be displayed on the topbar. This helps the developer to know if the changes are saved or not.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/undo.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/changessaved.png" alt="App Builder: Topbar"/>
+
+</div>
+
+### Developer Details
+
+This will show a profile picture of the developer who is currently working on the application. Hovering over the profile picture will show the name of the developer. If there is no profile picture, then the first letter of the first name and last name will be displayed.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/profile.png" alt="App Builder: Topbar"/>
 
 </div>
 
 ### Version Manager
 
-Create or Remove Versions of the applications from the Version Manager. You can also edit the version name from the edit button.
+**Add** or **remove** versions of an application from the Version Manager. Click on the `edit` icon next to version name to rename the version.
 
 When many developers are working on an app, **Versioning** allows them to save their own version of the app. This also prevents developers from overwriting the other developer's work.
 
+:::tip
+Versioning is also helpful when working with **[multiple environments](/docs/release-management/multi-environment/)** like development, staging and production.
+:::
+
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/version.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/versionsnew.png" alt="App Builder: Topbar"/>
 
 </div>
 
-### Comments
+### Undo or Redo
 
-Comment anywhere on the canvas and collaborate with other users in the workspace. Click on the comments button to enable it and then drop comment anywhere on the canvas.
+Undo or Redo any action performed on the canvas.
+
+You can also use **[Keyboard Shortcuts](/docs/tutorial/keyboard-shortcuts)** to perform such actions.
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/comments.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/undonew.png" alt="App Builder: Topbar"/>
 
 </div>
 
@@ -102,9 +100,13 @@ Share your applications with a unique URL generated automatically or edit the UR
 - When **Make the application public** is off and URL is shared then the users will have to login to ToolJet to use the application. Toggle on the option then anyone on the internet will be able to access the application without logging in to ToolJet.
 - ToolJet generates the **Embedded link** which can be used to embed application on the webpages.
 
+:::tip
+Learn more about **[Sharing](/docs/app-builder/share)** your tooljet applications.
+:::
+
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/share.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/sharenew.png" alt="App Builder: Topbar"/>
 
 </div>
 
@@ -114,7 +116,7 @@ Clicking on **Preview** button will open up the currently opened version of the
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/preview.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/previewnew.png" alt="App Builder: Topbar"/>
 
 </div>
 
@@ -128,6 +130,6 @@ ToolJet will block editing of the Released version of an app and will display a
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/release.png" alt="App Builder: Topbar"/>
+<img className="screenshot-full" src="/img/v2-beta/app-builder/toolbar/releasenew.png" alt="App Builder: Topbar"/>
 
 </div>

docs/docs/dashboard.md

@@ -0,0 +1,208 @@
+---
+id: dashboard
+title: Dashboard
+---
+
+The ToolJet Dashboard is the initial landing page that you see upon logging into your workspace. This interface serves as a central hub where you can access a variety of features. Primarily, it displays all the applications you've created within ToolJet. Moreover, you have the capability to create new workspaces and applications directly from this dashboard. Additionally, it provides an option to create folders for categorizing and managing applications for easier organization, access control, and workflow management.
+
+Furthermore, the dashboard serves as a gateway to various essential sections, such as **[Workflows](/docs/workflows/overview)**, **[ToolJet Database](/docs/tooljet-database)**, **[Data Sources](/docs/data-sources/overview)**, **[Marketplace](/docs/marketplace/marketplace-overview)**, **[Workspace Settings](/docs/tutorial/manage-users-groups)**, **[Instance Settings](/docs/enterprise/superadmin/#instance-settings)**, and **[Audit logs](/docs/enterprise/audit_logs/)**. You can effortlessly navigate to these sections directly from the dashboard.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/dashboardoptions.png" alt="App menu options"/>
+
+</div>
+
+## Workspace Manager
+
+The workspace manager is located on the top left corner of the dashboard. Clicking on the workspace manager will open a dropdown menu with a list of all the workspaces you are a part of. You can switch between workspaces by clicking on the workspace name from the dropdown menu.
+
+You can also create a new workspace by clicking on the `Add new workspace` button on the bottom of the dropdown menu. Clicking on this button will open a modal, enter the name of the workspace and click on the `Create Workspace` button to create a new workspace. Workspaces can be **renamed** by clicking on the `edit` icon on the right side of the workspace name.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/workspacemenu.png" alt="Dashboard"/>
+
+</div>
+
+## Create a new app
+
+To create a new app, click on the `Create new app` button on the top left corner of the dashboard. Clicking on this button will instantly create a new app and open the **[app builder](/docs/next/app-builder/overview)**. 
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/newapp.gif" alt="Dashboard"/>
+
+</div>
+<br/>
+
+There are three dots on the right side of the `Create new app` button. Clicking on these dots will open a dropdown menu with two options:
+
+### Choose from templates
+
+This option will open a modal with a list of pre-built templates. You can choose any template from this list to create a new app.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/choosefromtemplate.gif" alt="Dashboard"/>
+
+</div>
+
+### Import
+
+This option will open a file picker to import a JSON file. This JSON file should be the app exported from ToolJet.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/import.gif" alt="Dashboard"/>
+
+</div>
+
+### Importing app connected to marketplace plugins
+
+When importing an app with marketplace plugins, the marketplace plugin should be installed in the tooljet workspace where the app is being imported. If the marketplace plugin is not installed, the app will be imported without the queries for that plugin. 
+
+#### When marketplace plugin is installed
+
+If marketplace plugin is installed in the tooljet workspace where the app is being imported, the queries connected to the marketplace plugin will be available in the imported application. The queries will be linked to the data source with the same name if it is already present. If the data source is not present, a new data source will be created of that marketplace plugin and linked to the queries.
+
+#### When marketplace plugin is not installed
+
+If you have an app with a query linked to a marketplace plugin, and you import that app in a tooljet workspace where the marketplace plugin is not installed as the data source, the queries will be not be available in the imported application.
+
+### Importing app connected to tooljet table
+
+When the app(JSON file) that includes the table schema is imported, and the table is not present in the tooljet database of the workspace where the app is being imported, a new table will be created in the tooljet database with the same name as the table in the imported app. 
+
+If the table with the same name is already present in the workspace, the new table will be created with the name `<table name>_<unix timestamp>`. Example: `<tablename>_1627980000`.
+
+## Create a new folder
+
+Folders can be created to organize your apps. To create a new folder, click on the `+` button on the left drawer of the dashboard. Clicking on this button will open a modal, enter the name of the folder and click on the `Create Folder` button to create a new folder.
+
+### Delete or Edit Folder
+
+A folder can be **deleted** or **renamed**. To delete or rename a folder, click on the kebab menu on the right side of the folder name. Clicking on kebab menu will open a dropdown menu with two options:
+
+- **Edit folder**: This option will open a modal, enter the new name of the folder and click on the `Edit` button to rename the folder.
+- **Delete folder**: This option will open a confirmation modal to delete the folder. Click on the `Delete` button to delete the folder.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/newfolder.gif" alt="Dashboard"/>
+
+</div>
+
+### Search folders
+
+Folders can be searched by clicking on the search icon on the left drawer of the dashboard. Clicking on the search icon will open a search bar, enter the name of the folder to search.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/search.png" alt="Dashboard"/>
+
+</div>
+
+## App cards
+
+The dashboard displays all the apps created in the workspace as cards. These cards are displayed in a grid layout. The app cards display the **name of the app**, the **name of the creator**, and the **date of creation**. The app cards also display the app **icon**, which can be changed by clicking on the `Change Icon` option from the app menu.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/appcard.png" alt="Dashboard"/>
+
+</div>
+
+## App menu
+
+The app menu is located on the top right corner of the app card. Clicking on the app menu will open a dropdown menu with a list of options. These options are:
+
+- **[Change Icon](#change-icon)**
+- **[Add to folder](#add-to-folder)**
+- **[Clone app](#clone-app)**
+- **[Export app](#export-app)**
+- **[Delete app](#delete-app)**
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/appmenu.gif" alt="Dashboard"/>
+
+</div>
+
+### Change Icon
+
+This option will open a modal with a list of icons. You can choose any icon from this list to change the app icon.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/changeicon.png" alt="Dashboard"/>
+
+</div>
+
+### Add to folder
+
+This option will open a modal with a list of folders. You can choose any folder from this list to add the app to the folder.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/addtofolder.png" alt="Dashboard"/>
+
+</div>
+
+### Clone app
+
+Selecting this option will immediately open the cloned app in the app builder with the same configuration as the original app. The new app will be named as `<original app name>` followed by unix timestamp. Example: `<original app name> 1627980000`.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/cloneapp.gif" alt="Dashboard"/>
+
+</div>
+
+### Export app
+
+This option will download a JSON file of the application. This JSON file can be [imported](#import) to ToolJet to create a new app. The exported app will include all the queries connected to global data sources including the data source created from Marketplace plugins.
+
+This option allows you to select a specific version of the app to export or export all the versions of the app. To export a specific version of the app, select a version from the list of available versions in the modal and click on the `Export selected version` and to export all the versions of the app, click on the `Export All` button.
+
+#### Export ToolJet table schema
+
+Selecting this option will inclue the schema of the tooljet table connected to that application in the exported JSON file. This option is available for all the apps on ToolJet however only the apps with a tooljet table connected(includes tjdb query) will have the schema included in the exported JSON file. 
+
+This JSON file can be used to [import](#importing-app-connected-to-tooljet-table) the application to ToolJet along with the table schema that was connected to the application.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/exportapp.png" alt="Dashboard"/>
+
+</div>
+
+### Delete app
+
+This option will open a confirmation modal to delete the app. Click on the `Delete` button to delete the app.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/deleteapp.png" alt="Dashboard"/>
+
+</div>
+
+## App search
+
+Apps can be searched by clicking on the search bar on the center of the dashboard. Click on the search bar and enter the name of the app to search.
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/searchapp.png" alt="Dashboard"/>
+
+</div>
+
+## Current ToolJet Version
+
+The current version of ToolJet is displayed on the top right corner of the dashboard. 
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/dashboard/currentversion.png" alt="Dashboard"/>
+
+</div>

docs/docs/data-sources/mysql.md

@@ -3,63 +3,94 @@ id: mysql
 title: MySQL
 ---
 
-# MySQL
-
-ToolJet can connect to MySQL databases to read and write data. 
+ToolJet can connect to MySQL databases to read and write data.
 
 ## Connection
 
-ToolJet requires the following to connect to your MySQL database. Please make sure the host/ip of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please whitelist our IP.
+To establish a connection with the MySQL datasource, you can either click on the `+Add New` button located on the query panel or navigate to the **[Global Datasources](/docs/data-sources/overview)** page through the ToolJet dashboard.
 
-To add a new MySQL database, click on the `+` button on data sources panel at left sidebar in the app editor. Select MySQL from the modal that pops up.
+<div style={{textAlign: 'center'}}>
 
-ToolJet requires the following to connect to your MySQL database.
+<img className="screenshot-full" src="/img/datasource-reference/mysql/addmysql.gif" alt="MySQL datasource"/>
 
-- **Host**
-- **Port**
-- **Username**
-- **Password**
+</div>
+<br/>
+
+:::info
+Please make sure the **Host/IP** of the database is accessible from your VPC if you have self-hosted ToolJet. If you are using ToolJet cloud, please **whitelist** our IP.
+:::
+
+
+**ToolJet requires the following to connect to your MySQL database:**
+
+| Parameter | Description |
+|:--- |:--- |
+| Username | Username of the MySQL database |
+| Password | Password of the MySQL database |
+| Database name | Name of the MySQL database |
+| Connection type | Connection type of the MySQL database: either **Hostname** or **Socket**. |
+
+If you are using **Hostname** as the connection type, you will need to provide the following information:
+
+| Parameter | Description |
+|:--- |:--- |
+| Host/IP | Hostname or IP address of the MySQL database |
+| Port | Port number of the MySQL database |
+| SSL | Enable SSL connection to the MySQL database |
+
+If you are using **Socket** as the connection type, you will need to provide the following information:
+
+| Parameter | Description |
+|:--- |:--- |
+| Socket path | Path of the socket file |
 
 It is recommended to create a new MySQL database user so that you can control the access levels of ToolJet. 
 
 <div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mysql/mysql.png" alt="mysql"/>
+<img className="screenshot-full" src="/img/datasource-reference/mysql/mysqlconnect.png" alt="mysql"/>
 
 </div>
 
-Click on **Test connection** button to verify if the credentials are correct and that the database is accessible to ToolJet server. Click on **Save** button to save the data source.
+Click on **Test connection** to verify the correctness of the provided credentials and the accessibility of the database to the ToolJet server. Finally, click the **Save** button to save the data source configuration.
 
 ## Querying MySQL
 
-Once you have added a MySQL data source, click on `+` button of the query manager to create a new query. There are two modes by which you can query SQL:
+Once the MySQL data source is added, you can create queries to read and write data to the database. You can create queries from the **[Query Panel](/docs/app-builder/query-panel#add)** located at the bottom panel of the app builder.
 
-  1. **[SQL mode](/docs/data-sources/mysql#sql-mode)**
-  2. **[GUI mode](/docs/data-sources/mysql#gui-mode)**
+1. **[SQL mode](/docs/data-sources/mysql#sql-mode)**
+2. **[GUI mode](/docs/data-sources/mysql#gui-mode)**
 
-#### SQL mode
+### SQL mode
 
-SQL mode can be used to write raw SQL queries. Select SQL mode from the dropdown and enter the SQL query in the editor. Click on the `run` button to run the query.
+SQL mode can be used to query MySQL database using SQL queries. Select SQL mode from the dropdown and then enter the SQL query in the editor. 
 
-**NOTE**: Query should be saved before running.
+**Example:**
+```sql
+SELECT * FROM users
+```
 
+<div style={{textAlign: 'center'}}>
 
-<img className="screenshot-full" src="/img/datasource-reference/mysql/mysql-sqlmode.png" alt="mysql mode" />
+<img className="screenshot-full" src="/img/datasource-reference/mysql/sqlmode.png" alt="mysql"/>
 
+</div>
 
+### GUI mode
 
-#### GUI mode
+GUI mode can be used to query MySQL database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects. Each object should contain the primary key column and the columns to be updated.
 
-GUI mode can be used to query MySQL database without writing queries. Select GUI mode from the dropdown and then choose the operation **Bulk update using primary key**. Enter the **Table** name and **Primary key column** name. Now, in the editor enter the records in the form of an array of objects. 
+**Example:** 
+```json
+{{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }}
+```
 
-**Example**: `{{ [ {id: 1, channel: 33}, {id:2, channel:24} ] }}`
+<div style={{textAlign: 'center'}}>
 
+<img className="screenshot-full" src="/img/datasource-reference/mysql/guinew.png" alt="mysql"/>
 
-<img className="screenshot-full" src="/img/datasource-reference/mysql/mysql-guimode.png" alt="mysql gui mode" />
-
-
-Click on the **run** button to run the query. **NOTE**: Query should be saved before running.
+</div>
 
 :::tip
-Query results can be transformed using transformations. Read our transformations documentation to see how: **[link](/docs/tutorial/transformations)**
-:::
+Query results can be transformed using transformations. Learn more about transformations [here](/docs/tutorial/transformations).
+:::

docs/docs/data-sources/overview.md

@@ -5,10 +5,10 @@ title: Overview
 
 # Global Datasources : Overview
 
-Global datasources pull in and push data to any source including databases, external APIs, or services. Once a global datasource is connected to a workspace, the connection can be shared with any app of that workspace.
+Global data sources pull in and push data to any source including databases, external APIs, or services. Once a data source is connected to a workspace, the connection can be shared with any app of that workspace.
 
 :::caution
-Global datasources are available only on **ToolJet version 2.3.0 and above**.
+Global data sources are available only on **ToolJet version 2.3.0 and above**.
 :::
 
 <div style={{textAlign: 'center'}}>
@@ -17,123 +17,134 @@ Global datasources are available only on **ToolJet version 2.3.0 and above**.
 
 </div>
 
-## Connecting global datasources
+## Connecting global data sources
 
-1. **Create a new app** from the dashboard, and Select the **Add new global datasource** option from the query panel.
+1. **Create a new app** from the dashboard, and Click on the **+ Add new** button from the query panel.
   <div style={{textAlign: 'center'}}>
 
-  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/qpanel.png" alt="Datasources: Overview" />
+  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/newqpanel.png" alt="Datasources: Overview" />
 
   </div>
 
-  Or you can directly go to the **Global Datasources** page from the left sidebar of the dashboard
+  Or you can directly go to the **Data Sources** page from the left sidebar of the dashboard
 
-  <div style={{textAlign: 'center'}}>
+  <div style={{textAlign: 'left'}}>
 
-  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/global.png" alt="Datasources: Overview" />
+  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/newgds.png" alt="Datasources: Overview" />
 
   </div>
 
-2. Click on the **Add new datasource** button, a modal will pop-up with all the available global datasources.
+2. Within the **Data Sources** page, you'll find various categories of data sources on the left side, including Databases, APIs, Cloud Storages, and plugins. Click on each category to view the list of accessible data sources. As you hover over the desired data source, an `Add` button will appear. Upon clicking this button, the selected data source will be integrated into the workspace.
+   
   <div style={{textAlign: 'center'}}>
-
-  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/popup.png" alt="Datasources: Overview" />
-
+  
+  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/gdsadd.gif" alt="Overview of Datasources" />
+  
   </div>
 
-3. Select the datasource, enter the **Credentials** and **Save** the datasource.
+3. Once the data source is added, you'll be required to input the configuration details for establishing a connection.
+
+  ***Note: For paid plans, configuration entry and saving are necessary to enable availability across [multiple environments](/docs/release-management/multi-environment/).***
+
   <div style={{textAlign: 'center'}}>
-
-  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/connection.png" alt="Datasources: Overview" />
-
+  
+  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/connectinggds.gif" alt="Overview of Datasources" />
+  
   </div>
 
-4. Now, go back to the dashboard, create a new app, and the datasource will be available on the query panel under **Global Datasources**. Added datasources will now be available on either of the **existing** and the **new applications**.
+4. Returning to the dashboard, proceed to generate a new application. The recently added data source will be accessible within the query panel under the **Available data sources** section. Data Sources that have been added can now be utilized in both **existing applications** and **newly created applications**.
+
   <div style={{textAlign: 'center'}}>
 
-  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/newquery1.png" alt="Datasources: Overview" />
-
+  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/gdslist.png" alt="Overview of Datasources" />
+  
   </div>
 
-5. You can now create queries to the connected global datasource. From the queries, you'll be able to switch to **different connections** of the same datasource if there are more than one connections created.
+5. At this point, you can create queries to the connected data sources. Within these queries, the option exists to switch between **distinct connections** associated with the same data source, in cases where multiple connections have been established.
+
   <div style={{textAlign: 'center'}}>
 
-  <img className="screenshot-full" src="/img/datasource-reference/overview/switch.png" alt="Datasources: Overview" />
-
+  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/switch1.gif" alt="Overview of Datasources" />
+  
   </div>
 
-## Changing scope of datasources of an app created on older versions of ToolJet
+## Default data sources
 
-On ToolJet versions below 2.3.0, the datasource connection was made from within the individual apps. To make it backward compatible, we added an option to change the scope of the datasources and make it global datasource.
+By default, 4 data sources will be available on every app on ToolJet:
+- **[ToolJet Database](/docs/tooljet-database/)**
+- **[RestAPI](/docs/data-sources/restapi/)**
+- **[Run JavaScript Query](/docs/data-sources/run-js/)**
+- **[Run Python Query](/docs/data-sources/run-py/)**
 
-1. If you open an app created on previous versions of ToolJet, you'll find the datasource manager on the left sidebar of the App Builder.
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/datasource-reference/newui/overview/defds.png" alt="Datasources: Overview" />
+
+</div>
+
+## User Permissions
+
+Changing the **Permissions** for Data Sources is a privilege reserved for **Admins** and **[Super Admins](/docs/Enterprise/superadmin)** within the workspace.
+
+To configure these permissions, navigate to **Workspace Settings** -> **Groups Settings**. Admins and Super Admins have the authority to assign the following permissions to user groups:
+
+<br/>
+
+#### Creation and Deletion of data sources within the workspace
+
+| Permission | Description |
+|:---|:---|
+| **Just Create** | Add new data sources and modify existing ones. Delete button will not be visible on hovering over the connected data source. |
+| **Just Delete** | Remove connected data sources from the workspace. Delete button will show up on hovering over the connected data source. |
+| **Both Create and Delete** | Add new data sources and remove connected data sources from the workspace. |
+| **Niether Create nor Delete** | No access to the Data Sources page from the Dashboard. Error toast will popup on trying to access the Data Sources page using URL. |
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/datasource-reference/newui/overview/newpermissions.png" alt="Datasources: Overview" />
+
+</div>
+
+<br/>
+
+#### Authorization to View or Edit permitted data sources from the data source page
+
+| Permission | Description |
+|:---|:---|
+| **View** | Connect to authorized data sources for their user group. Users can't update the credentials of authorized data sources. | 
+| **Edit** | Users can update the credentials of authorized data sources. |
+
+<div style={{textAlign: 'center'}}>
+
+<img className="screenshot-full" src="/img/datasource-reference/newui/overview/viewedit.png" alt="Datasources: Overview" />
+
+</div>
+
+<br/>
+
+## Changing scope of data sources on an app created on older versions of ToolJet
+
+On ToolJet versions below 2.3.0, the data source connection was made from within the individual apps. To make it backward compatible, we added an option to change the scope of the data sources and make it global data source.
+
+1. When dealing with apps that were created using ToolJet versions prior to 2.3.0, you will notice the presence of the data source manager in the left sidebar of the App Builder.
   <div style={{textAlign: 'center'}}>
 
   <img className="screenshot-full" src="/img/datasource-reference/overview/leftsidebar.png" alt="Datasources: Overview" />
 
   </div>
 
-2. Click on the kebab menu next to the connected datasource, select the **change scope** option.
+2. To change the scope, locate the kebab menu situated next to the connected data source. From this menu, select the **change scope** option.
   <div style={{textAlign: 'center'}}>
 
   <img className="screenshot-full" src="/img/datasource-reference/overview/changescope.png" alt="Datasources: Overview" />
 
   </div>
 
-3. Once you change the scope of the datasource and make it global, you'll see that the **datasource manager** is removed from the left sidebar and now you'll find the datasource on the **query panel** under Global Datasources. You can now configure the datasource from the Global Datasource page on the **dashboard**.
+3. Once you change the scope of the data source and make it global, you'll see that the **data source manager** is removed from the left sidebar and now you'll find the data source on the **query panel** under Global Data sources. You can now configure the data source from the Data Sources page on the **dashboard**.
+3. Once you have successfully changed the scope of the data source, thereby transforming it into a global data source, you will observe that the **data source manager** from the left sidebar is removed. Subsequently, the data source will be accessible within the **query panel** under the Available data sources section. Now you can configure this data source from the Data Sources page located on the **Dashboard**.
+
   <div style={{textAlign: 'center'}}>
 
   <img className="screenshot-full" src="/img/datasource-reference/overview/queryadd.png" alt="Datasources: Overview" />
 
-  </div>
-
-
-## Default datasources
-
-By default, 4 datasources will be available on every app on ToolJet:
-- **[ToolJet Database](/docs/tooljet-database/)**
-- **[RestAPI](/docs/data-sources/restapi/)**
-- **[Run JavaScript Query](/docs/data-sources/run-js/)**
-- **[Run Python Query](/docs/data-sources/run-py/)**
-
-  <div style={{textAlign: 'center'}}>
-
-  <img className="screenshot-full" src="/img/datasource-reference/newui/overview/defaultds.png" alt="Datasources: Overview" />
-
-  </div>
-
-## Permissions
-
-Only **Admins** and **[Super Admins](/docs/Enterprise/superadmin)** of the workspace can change the **[Permissions](/docs/tutorial/manage-users-groups#group-properties)** for Global Datasource. 
-
-From **Workspace Settings** -> **Groups Settings**, Admins and Super Admins can set the permission for a user group to:
-
-- **Create** and **Delete** datasources onto that workspace. If **Create** permission is enabled then the users can add new global datasources and **edit** the datasources as well but cannot **delete** it, and if only **Delete** permission is set then the users of the group will only be able to delete the connected datasources on the workspace.
-  <div style={{textAlign: 'center'}}>
-
-  <img className="screenshot-full" src="/img/datasource-reference/overview/create.png" alt="Datasources: Overview" />
-
-  </div>
-
-  - If any of the permission(Create or Delete) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
-    <div style={{textAlign: 'center'}}>
-
-    <img className="screenshot-full" src="/img/datasource-reference/overview/error.png" alt="Datasources: Overview" />
-
-    </div>
-
-- **View** or **Edit** allowed global datasources from the **Datasources** tab. If only **View** permission is set then the users of the group will only be able to connect to the allowed datasource, and if only **Edit** permission is set then the users of the group will be able to update the credentials of the allowed datasources.
-  <div style={{textAlign: 'center'}}>
-
-  <img className="screenshot-full" src="/img/datasource-reference/overview/view.png" alt="Datasources: Overview" />
-
-  </div>
-
-  - If any of the permission(View or Edit) is not enabled for a user group then the users of the group will get an error toast when they try to Add or Delete the global datasource.
-    <div style={{textAlign: 'center'}}>
-
-    <img className="screenshot-full" src="/img/datasource-reference/overview/edit.png" alt="Datasources: Overview" />
-
-    </div>
-
-
+  </div>