feat: Enable new toolbar for cypress (appsmithorg#37148)

## Description

This PR enabled IDE toolbar for cypress.

Fixes appsmithorg#37217

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12115693818>
> Commit: f2af870
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12115693818&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Mon, 02 Dec 2024 12:19:38 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new feature flag `release_actions_redesign_enabled` to
enhance user experience.
- **Bug Fixes**
- Updated method calls in various test cases to improve consistency and
reliability in interactions, specifically renaming methods related to
data sources and queries.
- Improved error handling and validation in tests for MongoDB query
functionalities.
- **Documentation**
- Enhanced test coverage and assertions for various functionalities,
including API actions, Google Sheets queries, and JavaScript function
execution.
- **Style**
- Updated CSS selectors for improved consistency and maintainability
across components and test cases.
- **Tests**
- Refactored multiple test cases to utilize new helper methods,
improving code clarity and reducing direct DOM manipulation.
- Enhanced visual tests for JSEditor and improved interaction with the
run button.
- Added new assertions and enhanced the structure of tests for various
components, including API response handling and widget interactions.
- Streamlined interaction with the settings toolbar in various test
cases by encapsulating functionality within the `PluginActionForm`
class.
- Introduced new `data-testid` attributes across various components to
enhance testability.
- **Chores**
- Removed unused imports and streamlined method calls for better
performance and readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

cypress/e2e/GSheet/AllAccess_Spec.ts

@@ -46,7 +46,7 @@ describe.skip(
 
     it("1. Add and verify fetch details query", () => {
       entityExplorer.CreateNewDsQuery(dataSourceName);
-      agHelper.RenameWithInPane("Fetch_Details");
+      agHelper.RenameQuery("Fetch_Details");
       dataSources.ValidateNSelectDropdown(
         "Operation",
         "Fetch Many",

cypress/e2e/GSheet/GsheetMisc_Spec.ts

@@ -66,7 +66,7 @@ describe.skip(
     it("1. Add query from active ds tab and verify", () => {
       dataSources.CreateQueryForDS(dataSourceName);
       // entityExplorer.CreateNewDsQuery(dataSourceName);
-      agHelper.RenameWithInPane("Fetch_Details");
+      agHelper.RenameQuery("Fetch_Details");
       dataSources.ValidateNSelectDropdown(
         "Operation",
         "Fetch Many",

cypress/e2e/GSheet/ReadNWrite_Access_Spec.ts

@@ -50,7 +50,7 @@ describe.skip(
 
     it("1. Add and verify fetch details query", () => {
       entityExplorer.CreateNewDsQuery(dataSourceName.readNWrite);
-      agHelper.RenameWithInPane("Fetch_Details");
+      agHelper.RenameQuery("Fetch_Details");
       dataSources.ValidateNSelectDropdown(
         "Operation",
         "Fetch Many",

cypress/e2e/GSheet/ReadOnly_Access_Spec.ts

@@ -50,7 +50,7 @@ describe.skip(
 
     it("1. Add and verify fetch details query", () => {
       entityExplorer.CreateNewDsQuery(dataSourceName.readOnly);
-      agHelper.RenameWithInPane("Fetch_Details");
+      agHelper.RenameQuery("Fetch_Details");
       dataSources.ValidateNSelectDropdown(
         "Operation",
         "Fetch Many",

cypress/e2e/GSheet/SelectedSheet_Access_Spec.ts

@@ -34,7 +34,7 @@ describe(
 
     it("1. Add and verify fetch details query", () => {
       entityExplorer.CreateNewDsQuery(dataSourceName);
-      agHelper.RenameWithInPane("Fetch_Details");
+      agHelper.RenameQuery("Fetch_Details");
       dataSources.ValidateNSelectDropdown(
         "Operation",
         "Fetch Many",

cypress/e2e/Regression/ClientSide/BugTests/Bug14987_spec.js

@@ -1,9 +1,9 @@
-const queryLocators = require("../../../../locators/QueryEditor.json");
 import {
   dataSources,
   agHelper,
   entityItems,
 } from "../../../../support/Objects/ObjectsCore";
+import { PluginActionForm } from "../../../../support/Pages/PluginActionForm";
 
 describe(
   "Verify setting tab form controls not to have tooltip and tooltip (underline) styles",
@@ -17,6 +17,7 @@ describe(
   },
   function () {
     let guid, datasourceName;
+    let pluginActionForm = new PluginActionForm();
 
     before("Creates a new Mongo datasource", () => {
       dataSources.CreateDataSource("Mongo");
@@ -28,7 +29,7 @@ describe(
     it("1. We make sure the label in the settings tab does not have any underline styles", function () {
       dataSources.CreateQueryForDS(datasourceName);
 
-      cy.xpath(queryLocators.querySettingsTab).click();
+      pluginActionForm.toolbar.toggleSettings();
 
       cy.get(".label-icon-wrapper")
         .contains("Run the query on page load")

cypress/e2e/Regression/ClientSide/BugTests/DSDiscardBugs_spec.ts

@@ -20,7 +20,7 @@ describe(
         // because I do not need to fill the datasource form and use the same default data
         _.dataSources.CreatePlugIn("PostgreSQL");
         dsName = "Postgres" + uid;
-        _.agHelper.RenameWithInPane(dsName, false);
+        _.agHelper.RenameDatasource(dsName);
         _.dataSources.SaveDatasource();
         _.agHelper.Sleep();
         _.dataSources.EditDatasource();
@@ -39,7 +39,7 @@ describe(
         // because I do not need to fill the datasource form and use the same default data
         _.dataSources.CreatePlugIn("Authenticated API");
         dsName = "AuthDS" + uid;
-        _.agHelper.RenameWithInPane(dsName, false);
+        _.agHelper.RenameDatasource(dsName);
         _.dataSources.FillAuthAPIUrl();
         _.dataSources.SaveDatasource();
         _.agHelper.Sleep();
@@ -62,7 +62,7 @@ describe(
         // because I do not need to fill the datasource form and use the same default data
         _.dataSources.CreatePlugIn("MongoDB");
         dsName = "Mongo" + uid;
-        _.agHelper.RenameWithInPane(dsName, false);
+        _.agHelper.RenameDatasource(dsName);
         _.dataSources.FillMongoDSForm();
         _.dataSources.SaveDatasource();
         _.agHelper.Sleep();
@@ -86,7 +86,7 @@ describe(
         // because I do not need to fill the datasource form and use the same default data
         _.dataSources.CreatePlugIn("MongoDB");
         dsName = "Mongo" + uid;
-        _.agHelper.RenameWithInPane(dsName, false);
+        _.agHelper.RenameDatasource(dsName);
         _.dataSources.FillMongoDSForm();
         _.dataSources.SaveDatasource();
         _.agHelper.Sleep();
@@ -110,7 +110,7 @@ describe(
         // because I do not need to fill the datasource form and use the same default data
         _.dataSources.CreatePlugIn("MongoDB");
         dsName = "Mongo" + uid;
-        _.agHelper.RenameWithInPane(dsName, false);
+        _.agHelper.RenameDatasource(dsName);
         _.dataSources.FillMongoDSForm();
         _.dataSources.SaveDatasource();
         _.agHelper.Sleep();
@@ -133,7 +133,7 @@ describe(
         // because I do not need to fill the datasource form and use the same default data
         _.dataSources.CreatePlugIn("MongoDB");
         dsName = "Mongo" + uid;
-        _.agHelper.RenameWithInPane(dsName, false);
+        _.agHelper.RenameDatasource(dsName);
         _.dataSources.FillMongoDSForm();
         _.dataSources.SaveDatasource();
         _.agHelper.Sleep();

cypress/e2e/Regression/ClientSide/BugTests/DS_Bug19893_spec.ts

@@ -12,7 +12,7 @@ describe(
       cy.get("@guid").then((uid) => {
         dsName = "AuthAPI " + uid;
         _.dataSources.CreatePlugIn("Authenticated API");
-        _.agHelper.RenameWithInPane(dsName, false);
+        _.agHelper.RenameDatasource(dsName);
         _.dataSources.FillAuthAPIUrl();
         _.dataSources.AssertCursorPositionForTextInput(
           _.dataSources._urlInputControl,

cypress/e2e/Regression/ClientSide/BugTests/DS_Bug25148_Spec.ts

@@ -13,7 +13,7 @@ describe(
       cy.get("@guid").then((uid) => {
         dsName = "AuthAPI " + uid;
         dataSources.CreatePlugIn("Authenticated API");
-        agHelper.RenameWithInPane(dsName, false);
+        agHelper.RenameDatasource(dsName);
         dataSources.FillAuthAPIUrl();
         dataSources.SaveDatasource();
         apiPage.CreateApi("API" + uid, "GET", true);

cypress/e2e/Regression/ClientSide/BugTests/DatasourceSchema_spec.ts

@@ -29,7 +29,7 @@ describe(
         dataSourceName = "Postgres " + guid;
         dataSources.NavigateToDSCreateNew();
         dataSources.CreatePlugIn("PostgreSQL");
-        agHelper.RenameWithInPane(dataSourceName, false);
+        agHelper.RenameDatasource(dataSourceName);
         dataSources.FillPostgresDSForm(
           "Production",
           false,

cypress/e2e/Regression/ClientSide/ExplorerTests/CopyQuery_RenameDatasource_spec.js

@@ -41,7 +41,7 @@ describe(
       dataSources.EnterQuery("select * from users");
 
       cy.EvaluateCurrentValue("select * from users");
-      cy.get(".t--action-name-edit-field").click({ force: true });
+
       cy.get("@saveDatasource").then((httpResponse) => {
         datasourceName = httpResponse.response.body.data.name;
         PageLeftPane.switchSegment(PagePaneSegment.Queries);

cypress/e2e/Regression/ClientSide/ExplorerTests/Entity_Naming_conflict_spec.js

@@ -3,8 +3,6 @@ import {
   PagePaneSegment,
 } from "../../../../support/Pages/EditorNavigation";
 
-const apiwidget = require("../../../../locators/apiWidgetslocator.json");
-
 import * as _ from "../../../../support/Objects/ObjectsCore";
 
 describe(
@@ -20,10 +18,6 @@ describe(
     it("1. Rename API with table widget name validation test", function () {
       cy.log("Login Successful");
       cy.CreateApiAndValidateUniqueEntityName(apiName);
-      cy.get(apiwidget.apiTxt)
-        .clear()
-        .type(tableName, { force: true })
-        .should("have.value", tableName);
       //Rename Table widget with api name validation test
       PageLeftPane.switchSegment(PagePaneSegment.UI);
       PageLeftPane.assertPresence("Table1");

cypress/e2e/Regression/ClientSide/ExplorerTests/Query_Datasource_spec.js

@@ -63,11 +63,11 @@ describe(
         datasourceName,
         EntityType.Datasource,
       );
-      agHelper.RenameWithInPane(`${datasourceName}new`, false);
+      agHelper.RenameDatasource(`${datasourceName}new`);
       cy.contains(dataSources._datasourceCard, `${datasourceName}new`);
 
       // reverting the name
-      agHelper.RenameWithInPane(datasourceName, false);
+      agHelper.RenameDatasource(datasourceName);
 
       // going  to the query create page
       EditorNavigation.SelectEntityByName("Query1", EntityType.Query);
@@ -81,7 +81,7 @@ describe(
       dataSources.EnterQuery("select * from users");
 
       cy.EvaluateCurrentValue("select * from users");
-      cy.get(".t--action-name-edit-field").click({ force: true });
+
       entityExplorer.ActionContextMenuByEntityName({
         entityNameinLeftSidebar: "Query1",
         action: "Show bindings",

cypress/e2e/Regression/ClientSide/Git/GitSync/GitSyncedApps_spec.js

@@ -154,12 +154,10 @@ describe(
         apiPage.ResponseStatusCheck("200 OK");
         cy.get("@curlImport").then((response) => {
           cy.expect(response.response.body.responseMeta.success).to.eq(true);
-          cy.get(apiwidget.ApiName)
-            .invoke("text")
-            .then((text) => {
-              const someText = text;
-              expect(someText).to.equal(response.response.body.data.name);
-            });
+          agHelper.GetObjectName().then((text) => {
+            const someText = text;
+            expect(someText).to.equal(response.response.body.data.name);
+          });
         });
         EditorNavigation.ShowCanvas();
         // bind input widgets to the api calls responses

cypress/e2e/Regression/ClientSide/IDE/Command_Click_Navigation_spec.js

@@ -1,3 +1,4 @@
+import ApiEditor from "../../../../locators/ApiEditor";
 import reconnectDatasourceModal from "../../../../locators/ReconnectLocators";
 import {
   agHelper,
@@ -86,7 +87,7 @@ describe(
 
       //Assert working on url field
       cy.updateCodeInput(
-        ".t--dataSourceField",
+        ApiEditor.dataSourceField,
         "http://host.docker.internal:5001/{{ SQL_Query.data }}",
       );
       agHelper.Sleep();

cypress/e2e/Regression/ClientSide/IDE/Focus_retentions_inputs_spec.js

@@ -10,11 +10,14 @@ import EditorNavigation, {
   EntityType,
   PagePaneSegment,
 } from "../../../../support/Pages/EditorNavigation";
+import { PluginActionForm } from "../../../../support/Pages/PluginActionForm";
 
 const apiwidget = require("../../../../locators/apiWidgetslocator.json");
 const queryLocators = require("../../../../locators/QueryEditor.json");
 
 describe("Focus Retention of Inputs", { tags: ["@tag.IDE"] }, function () {
+  let pluginActionForm = new PluginActionForm();
+
   before("Import the test application", () => {
     homePage.NavigateToHome();
     homePage.ImportApp("ContextSwitching.json");
@@ -181,16 +184,15 @@ describe("Focus Retention of Inputs", { tags: ["@tag.IDE"] }, function () {
     dataSources.ToggleUsePreparedStatement(false);
     EditorNavigation.SelectEntityByName("S3_Query", EntityType.Query);
 
-    cy.xpath(queryLocators.querySettingsTab).click();
     cy.setQueryTimeout(10000);
 
     EditorNavigation.SelectEntityByName("SQL_Query", EntityType.Query);
-    cy.get(".bp3-editable-text-content").should("contain.text", "SQL_Query");
-    cy.xpath(queryLocators.querySettingsTab).click();
+    cy.get(locators._queryName).should("contain.text", "SQL_Query");
+    pluginActionForm.toolbar.toggleSettings();
     agHelper.GetElement(dataSources._usePreparedStatement).should("be.focused");
     EditorNavigation.SelectEntityByName("S3_Query", EntityType.Query);
     agHelper.Sleep();
-    cy.xpath(queryLocators.querySettingsTab).click();
+    pluginActionForm.toolbar.toggleSettings();
     cy.xpath(queryLocators.queryTimeout).should("be.focused");
   });
 

cypress/e2e/Regression/ClientSide/JSObject/JSObjectMutation_spec.ts

@@ -130,7 +130,7 @@ describe("JSObject testing", { tags: ["@tag.JS", "@tag.Binding"] }, () => {
       toRun: false,
       shouldCreateNewJSObj: true,
     });
-    _.agHelper.GetNAssertContains(locators._selectionItem, "getData");
+    _.agHelper.GetNAssertContains(_.jsEditor._funcDropdownValue, "getData");
     _.jsEditor.SelectFunctionDropdown("myFun1");
     _.jsEditor.RunJSObj();
     EditorNavigation.SelectEntityByName("Text2", EntityType.Widget);

cypress/e2e/Regression/ClientSide/Linting/BasicLint_spec.ts

@@ -115,12 +115,12 @@ describe("Linting", { tags: ["@tag.JS", "@tag.Binding"] }, () => {
 
   it("2. TC 1927 Cont'd - Doesn't show lint errors when Api is renamed", () => {
     EditorNavigation.SelectEntityByName("Api1", EntityType.Api);
-    agHelper.RenameWithInPane("Api2");
+    agHelper.RenameQuery("Api2");
 
     clickButtonAndAssertLintError(false);
 
     EditorNavigation.SelectEntityByName("Api2", EntityType.Api);
-    agHelper.RenameWithInPane("Api1");
+    agHelper.RenameQuery("Api1");
 
     clickButtonAndAssertLintError(false);
   });
@@ -237,13 +237,13 @@ describe("Linting", { tags: ["@tag.JS", "@tag.Binding"] }, () => {
 
   it("6. TC 1928 Cont'd - Shows correct lint error when Query is renamed", () => {
     EditorNavigation.SelectEntityByName("Query1", EntityType.Query);
-    agHelper.RenameWithInPane("Query2");
+    agHelper.RenameQuery("Query2");
 
     // Assert Absence of lint error
     clickButtonAndAssertLintError(false);
 
     EditorNavigation.SelectEntityByName("Query2", EntityType.Query);
-    agHelper.RenameWithInPane("Query1");
+    agHelper.RenameQuery("Query1");
 
     // Assert Absence of lint error
     clickButtonAndAssertLintError(false);

cypress/e2e/Regression/ClientSide/OneClickBinding/PropertyControl_spec.ts

@@ -109,7 +109,7 @@ describe(
       });
       dataSources.NavigateToDSCreateNew();
       dataSources.CreatePlugIn("Mongo");
-      agHelper.RenameWithInPane("myinvalidds", false);
+      agHelper.RenameDatasource("myinvalidds");
 
       agHelper.ClearNType(dataSources._host(), "127.0.0.1");
       agHelper.ClearNType(dataSources._port, "8000");
@@ -136,7 +136,7 @@ describe(
       [1, 2].forEach((I) => {
         dataSources.NavigateToDSCreateNew();
         dataSources.CreatePlugIn("Mongo");
-        agHelper.RenameWithInPane(`dummy${I}`, false);
+        agHelper.RenameDatasource(`dummy${I}`);
 
         agHelper.ClearNType(dataSources._host(), "127.0.0.1");
         agHelper.ClearNType(dataSources._port, "8000");

cypress/e2e/Regression/ClientSide/OtherUIFeatures/GlobalSearch_spec.js

@@ -161,9 +161,7 @@ describe("GlobalSearch", { tags: ["@tag.Sanity"] }, function () {
       .first()
       .click();
     cy.wait("@createNewApi");
-    cy.get(datasourceHomeLocators.apiTxt)
-      .invoke("val")
-      .then((title) => expect(title).includes("Api"));
+    _.agHelper.GetObjectName().then((title) => expect(title).includes("Api"));
   });
 
   // since now datasource will only be saved once user clicks on save button explicitly,

cypress/e2e/Regression/ClientSide/OtherUIFeatures/Logs2_spec.js

@@ -98,7 +98,7 @@ describe(
       _.debuggerHelper.DoesConsoleLogExist(logString, false);
 
       // Run function and verify logs are visible
-      _.agHelper.GetNClick(_.jsEditor._runButton);
+      _.jsEditor.toolbar.clickRunButton();
       _.agHelper.GetNClick(_.jsEditor._logsTab);
       _.debuggerHelper.DoesConsoleLogExist(logString);
     });
@@ -292,8 +292,6 @@ describe(
       _.debuggerHelper.OpenDebugger();
 
       _.debuggerHelper.ClicklogEntityLink();
-
-      cy.get(".t--js-action-name-edit-field").should("exist");
     });
 
     it("10. Bug #24039 - Logs errors from setInterval callback into debugger", () => {

cypress/e2e/Regression/ClientSide/OtherUIFeatures/Omnibar_spec.js

@@ -6,6 +6,7 @@ const omnibar = require("../../../../locators/Omnibar.json");
 import {
   agHelper,
   assertHelper,
+  jsEditor,
 } from "../../../../support/Objects/ObjectsCore";
 
 describe("Omnibar functionality test cases", () => {
@@ -51,7 +52,7 @@ describe("Omnibar functionality test cases", () => {
     cy.wait(1000);
     cy.wait("@createNewJSCollection");
     cy.wait(1000);
-    cy.get(".t--js-action-name-edit-field").type(jsObjectName).wait(1000);
+    jsEditor.RenameJSObjFromPane(jsObjectName);
 
     agHelper.GetNClick(omnibar.globalSearch, 0, true, 2000);
     agHelper.GetNClickByContains(
@@ -66,7 +67,7 @@ describe("Omnibar functionality test cases", () => {
     assertHelper.AssertNetworkStatus("@createNewApi", 201);
     EditorNavigation.SelectEntityByName("Api1", EntityType.Api);
     agHelper.AssertURL("/api");
-    agHelper.RenameWithInPane(apiName);
+    agHelper.RenameQuery(apiName);
 
     agHelper.GetNClick(omnibar.globalSearch, 0, true);
     agHelper.GetNClickByContains(omnibar.categoryTitle, "Create new");