fix: prevent temporary update of sub-path value in store object (#14847)

* support paths as keys in storevalue

* add cypresstests

* StoreValue added deploy mode verification

* Adding array input [boolean, string, number]

* store number too

* Added bug id to title

* Added dot object array & SelectJSFunctionToExecute

* propPane.UpdateFieldValue() update

* updated UpdatePropertyFieldValue

* JS toasts handling

* JSOnload spec fix

* JsOnload toast appearances fix

* support paths as keys in storevalue

* add cypresstests

* StoreValue added deploy mode verification

* Adding array input [boolean, string, number]

* store number too

* Added bug id to title

* Added dot object array & SelectJSFunctionToExecute

* propPane.UpdateFieldValue() update

* updated UpdatePropertyFieldValue

* JS toasts handling

* JSOnload spec fix

* JsOnload toast appearances fix

* prevent modification of storeValue path in temporary store

* Add cypress tests for case where storeValue key is a path

* remove redundant import of lodash

* Modify cypress tests

* update cypress tests

* Store fix revert

* revert

* Actions revert

* revert redundant change

* removed additional button- from script

* JsOnPage load script fix

* validate toast fixes

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>

app/client/cypress/integration/Smoke_TestSuite/Application/CommunityIssues_Spec.ts

@@ -119,7 +119,7 @@ describe("AForce - Community Issues page validations", function() {
   });
 
   it("4. Change Default selected row in table and verify", () => {
-    jsEditor.EnterJSContext("Default Selected Row", "1");
+    propPane.UpdatePropertyFieldValue("Default Selected Row", "1");
     deployMode.DeployApp();
     table.WaitUntilTableLoad();
     table.AssertPageNumber(1);

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ActionExecution/StoreValue_spec.ts

@@ -1,15 +1,23 @@
 import { ObjectsRegistry } from "../../../../support/Objects/Registry";
 
-const { AggregateHelper: agHelper, JSEditor: jsEditor } = ObjectsRegistry;
+const {
+  AggregateHelper: agHelper,
+  EntityExplorer: ee,
+  JSEditor: jsEditor,
+  CommonLocators: locator,
+  DeployMode: deployMode,
+  PropertyPane: propPane,
+} = ObjectsRegistry;
 
 describe("storeValue Action test", () => {
   before(() => {
-    //
+    ee.DragDropWidgetNVerify("buttonwidget", 100, 100);
+    ee.NavigateToSwitcher("explorer");
   });
 
   it("1. Bug 14653: Running consecutive storeValue actions and await", function() {
     const jsObjectBody = `export default {
-      myFun1: () => {
+      storeTest: () => {
         let values =
           [
             storeValue('val1', 'number 1'),
@@ -33,15 +41,162 @@ describe("storeValue Action test", () => {
       toRun: false,
       shouldCreateNewJSObj: true,
     });
-    agHelper.WaitUntilToastDisappear('created successfully')
+
-    agHelper.GetNClick(jsEditor._runButton);
+    ee.SelectEntityByName("Button1", "WIDGETS");
-    agHelper.ValidateToastMessage(
+    propPane.UpdatePropertyFieldValue("Label", "StoreTest");
+    cy.get("@jsObjName").then((jsObj: any) => {
+      propPane.SelectJSFunctionToExecute(
+        "onClick",
+        jsObj as string,
+        "storeTest",
+      );
+    });
+
+    deployMode.DeployApp();
+    agHelper.ClickButton("StoreTest");
+    agHelper.WaitUntilToastDisappear(
       JSON.stringify({
         val1: "number 1",
         val2: "number 2",
         val3: "number 3",
         val4: "number 4",
-      }), 2
+      }),
     );
+    deployMode.NavigateBacktoEditor();
+  });
+
+  it("2. Bug 14827 : Accepts paths as keys and doesn't update paths in store but creates a new field with path as key", function() {
+    const DEFAULT_STUDENT_OBJECT = {
+      details: { isTopper: true, name: "Abhah", grade: 1 },
+    };
+    const MODIFIED_STUDENT_OBJECT = {
+      details: { isTopper: false, name: "Alia", grade: 3 },
+    };
+    const JS_OBJECT_BODY = `export default {
+        storePathTest: async ()=> {
+        await storeValue("student", ${JSON.stringify(
+          DEFAULT_STUDENT_OBJECT,
+        )}, false)
+        await showAlert(JSON.stringify(appsmith.store.student));
+        await storeValue("student.details.name", "Annah", false);
+        await showAlert(appsmith.store.student.details.name);
+        await showAlert(appsmith.store["student.details.name"]);
+       },
+       modifyStorePathTest: async ()=>{
+        await storeValue("student",${JSON.stringify(
+          MODIFIED_STUDENT_OBJECT,
+        )} , false)
+        await showAlert(JSON.stringify(appsmith.store.student));
+        await storeValue("student.details.isTopper", true, false);
+        await showAlert(appsmith.store.student.details.isTopper.toString());
+        await showAlert(appsmith.store["student.details.isTopper"].toString());
+       }
+       }
+   `;
+
+    // Create js object
+    jsEditor.CreateJSObject(JS_OBJECT_BODY, {
+      paste: true,
+      completeReplace: true,
+      toRun: false,
+      shouldCreateNewJSObj: true,
+    });
+
+    // Button1
+    ee.SelectEntityByName("Button1", "WIDGETS");
+    propPane.UpdatePropertyFieldValue("Label", "StorePathTest");
+    cy.get("@jsObjName").then((jsObj: any) => {
+      propPane.SelectJSFunctionToExecute(
+        "onClick",
+        jsObj as string,
+        "storePathTest",
+      );
+    });
+
+    // Button 2
+    ee.DragDropWidgetNVerify("buttonwidget", 100, 200);
+    ee.SelectEntityByName("Button2", "WIDGETS");
+    propPane.UpdatePropertyFieldValue("Label", "modifyStorePathTest");
+    cy.get("@jsObjName").then((jsObj: any) => {
+      propPane.SelectJSFunctionToExecute(
+        "onClick",
+        jsObj as string,
+        "modifyStorePathTest",
+      );
+    });
+
+    deployMode.DeployApp();
+    agHelper.ClickButton("StorePathTest");
+    agHelper.ValidateToastMessage(JSON.stringify(DEFAULT_STUDENT_OBJECT), 0, 1);
+    agHelper.ValidateToastMessage(DEFAULT_STUDENT_OBJECT.details.name, 1, 2);
+    agHelper.WaitUntilToastDisappear("Annah", 2, 3);
+
+    agHelper.ClickButton("modifyStorePathTest");
+    agHelper.ValidateToastMessage(
+      JSON.stringify(MODIFIED_STUDENT_OBJECT.details),
+      0,
+      1,
+    );
+    agHelper.ValidateToastMessage(
+      `${MODIFIED_STUDENT_OBJECT.details.isTopper}`,
+      1,
+      2,
+    );
+    agHelper.WaitUntilToastDisappear(`true`, 2, 3);
+    deployMode.NavigateBacktoEditor();
+  });
+
+  it("3. Bug 14827 : Accepts paths as keys and doesn't update paths in store but creates a new field with path as key - object keys", function() {
+    const TEST_OBJECT = { a: 1, two: {} };
+
+    const JS_OBJECT_BODY = `export default {
+      setStore: async () => {
+        await storeValue("test", ${JSON.stringify(TEST_OBJECT)}, false);
+        await showAlert(JSON.stringify(appsmith.store.test));
+        await storeValue("test.two",{"b":2}, false);
+        await showAlert(JSON.stringify(appsmith.store.test.two));
+        await showAlert(JSON.stringify(appsmith.store["test.two"]));
+      },
+      showStore: () =>  {
+        showAlert(JSON.stringify(appsmith.store.test));}
+    }`;
+
+    // create js object
+    jsEditor.CreateJSObject(JS_OBJECT_BODY, {
+      paste: true,
+      completeReplace: true,
+      toRun: false,
+      shouldCreateNewJSObj: true,
+    });
+
+    ee.SelectEntityByName("Button1", "WIDGETS");
+    propPane.UpdatePropertyFieldValue("Label", "SetStore");
+    cy.get("@jsObjName").then((jsObj: any) => {
+      propPane.SelectJSFunctionToExecute(
+        "onClick",
+        jsObj as string,
+        "setStore",
+      );
+    });
+
+    ee.SelectEntityByName("Button2", "WIDGETS");
+    propPane.UpdatePropertyFieldValue("Label", "ShowStore");
+    cy.get("@jsObjName").then((jsObj: any) => {
+      propPane.SelectJSFunctionToExecute(
+        "onClick",
+        jsObj as string,
+        "showStore",
+      );
+    });
+
+    deployMode.DeployApp();
+    agHelper.ClickButton("SetStore");
+    agHelper.ValidateToastMessage(JSON.stringify(TEST_OBJECT), 0, 1);
+    agHelper.ValidateToastMessage(JSON.stringify(TEST_OBJECT.two), 1, 2);
+    agHelper.WaitUntilToastDisappear(`{"b":2}`, 2, 3);
+
+    agHelper.ClickButton("ShowStore");
+    agHelper.ValidateToastMessage(JSON.stringify(TEST_OBJECT), 0);
+    deployMode.NavigateBacktoEditor();
   });
 });

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/JSObjectToInput_Spec.ts

@@ -4,7 +4,8 @@ let agHelper = ObjectsRegistry.AggregateHelper,
   ee = ObjectsRegistry.EntityExplorer,
   jsEditor = ObjectsRegistry.JSEditor,
   locator = ObjectsRegistry.CommonLocators,
-  deployMode = ObjectsRegistry.DeployMode;
+  deployMode = ObjectsRegistry.DeployMode,
+  propPane = ObjectsRegistry.PropertyPane;
 
 describe("Validate JSObjects binding to Input widget", () => {
   before(() => {
@@ -40,7 +41,7 @@ describe("Validate JSObjects binding to Input widget", () => {
       .should("equal", "Hello"); //Before mapping JSObject value of input
     cy.get("@jsObjName").then((jsObjName) => {
       jsOjbNameReceived = jsObjName;
-      jsEditor.EnterJSContext("Default Text", "{{" + jsObjName + ".myFun1()}}");
+      propPane.UpdatePropertyFieldValue("Default Text",  "{{" + jsObjName + ".myFun1()}}");
     });
     cy.get(locator._inputWidget)
       .last()

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/JSObjectToListWidget_Spec.ts

@@ -7,7 +7,8 @@ let agHelper = ObjectsRegistry.AggregateHelper,
   locator = ObjectsRegistry.CommonLocators,
   apiPage = ObjectsRegistry.ApiPage,
   table = ObjectsRegistry.Table,
-  deployMode = ObjectsRegistry.DeployMode;
+  deployMode = ObjectsRegistry.DeployMode,
+  propPane = ObjectsRegistry.PropertyPane;
 
 describe("Validate JSObj binding to Table widget", () => {
   before(() => {
@@ -43,7 +44,7 @@ describe("Validate JSObj binding to Table widget", () => {
 
   it("2. Validate the Api data is updated on List widget + Bug 12438", function() {
     ee.SelectEntityByName("List1", "WIDGETS");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Items",
       (("{{" + jsName) as string) + ".myFun1()}}",
     );
@@ -75,7 +76,7 @@ describe("Validate JSObj binding to Table widget", () => {
 
   it("3. Validate the List widget + Bug 12438 ", function() {
     ee.SelectEntityByName("List1", "WIDGETS");
-    jsEditor.EnterJSContext("Item Spacing (px)", "50");
+    propPane.UpdatePropertyFieldValue("Item Spacing (px)", "50");
     cy.get(locator._textWidget).should("have.length", 6);
     deployMode.DeployApp(locator._textWidgetInDeployed);
     agHelper.AssertElementLength(locator._textWidgetInDeployed, 6);

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/LoadashBasic_Spec.ts

@@ -3,7 +3,7 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry"
 let dataSet: any;
 let agHelper = ObjectsRegistry.AggregateHelper,
     ee = ObjectsRegistry.EntityExplorer,
-    jsEditor = ObjectsRegistry.JSEditor,
+    propPane = ObjectsRegistry.PropertyPane,
     locator = ObjectsRegistry.CommonLocators,
     deployMode = ObjectsRegistry.DeployMode;
 
@@ -21,13 +21,13 @@ describe("Loadash basic test with input Widget", () => {
 
     it("1. Input widget test with default value for atob method", () => {
         ee.SelectEntityByName("Input1", 'WIDGETS')
-        jsEditor.EnterJSContext("Default Text", dataSet.defaultInputBinding + "}}");
+        propPane.UpdatePropertyFieldValue("Default Text", dataSet.defaultInputBinding + "}}");
         agHelper.ValidateNetworkStatus('@updateLayout')
     });
 
     it("2. Input widget test with default value for btoa method", function () {
         ee.SelectEntityByName("Input2")
-        jsEditor.EnterJSContext("Default Text", dataSet.loadashInput + "}}");
+        propPane.UpdatePropertyFieldValue("Default Text", dataSet.loadashInput + "}}");
         agHelper.ValidateNetworkStatus('@updateLayout')
     });
 

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/MomentBasic_Spec.ts

@@ -3,7 +3,7 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry"
 let dataSet: any;
 let agHelper = ObjectsRegistry.AggregateHelper,
     ee = ObjectsRegistry.EntityExplorer,
-    jsEditor = ObjectsRegistry.JSEditor,
+    propPane = ObjectsRegistry.PropertyPane,
     locator = ObjectsRegistry.CommonLocators,
     deployMode = ObjectsRegistry.DeployMode;
 
@@ -21,13 +21,13 @@ describe("Validate basic binding of Input widget to Input widget", () => {
 
     it("1. Input widget test with default value from another Input widget", () => {
         ee.SelectEntityByName("Input1", 'WIDGETS')
-        jsEditor.EnterJSContext("Default Text", dataSet.defaultInputBinding + "}}");
+        propPane.UpdatePropertyFieldValue("Default Text", dataSet.defaultInputBinding + "}}");
         agHelper.ValidateNetworkStatus('@updateLayout')
     });
 
     it("2. Binding second input widget with first input widget and validating", function () {
         ee.SelectEntityByName("Input2")
-        jsEditor.EnterJSContext("Default Text", dataSet.momentInput + "}}");
+        propPane.UpdatePropertyFieldValue("Default Text", dataSet.momentInput + "}}");
         agHelper.ValidateNetworkStatus('@updateLayout')
     });
 

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Promises_Spec.ts

@@ -5,7 +5,8 @@ let agHelper = ObjectsRegistry.AggregateHelper,
   jsEditor = ObjectsRegistry.JSEditor,
   locator = ObjectsRegistry.CommonLocators,
   apiPage = ObjectsRegistry.ApiPage,
-  deployMode = ObjectsRegistry.DeployMode;
+  deployMode = ObjectsRegistry.DeployMode,
+  propPane = ObjectsRegistry.PropertyPane;
 
 describe("Validate basic Promises", () => {
   it("1. Verify storeValue via .then via direct Promises", () => {
@@ -111,7 +112,7 @@ describe("Validate basic Promises", () => {
       true,
     );
     ee.SelectEntityByName("Image1");
-    jsEditor.EnterJSContext("Image", `{{Christmas.data}}`, true);
+    propPane.UpdatePropertyFieldValue("Image", `{{Christmas.data}}`);
     agHelper.ValidateToastMessage(
       "will be executed automatically on page load",
     );
@@ -184,7 +185,7 @@ return InspiringQuotes.run().then((res) => { showAlert("Today's quote for " + us
       "GetAnime",
     );
     ee.SelectEntityByName("List1", "WIDGETS");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Items",
       `[{
   "name": {{ GetAnime.data.results[0].title }},
@@ -200,9 +201,7 @@ return InspiringQuotes.run().then((res) => { showAlert("Today's quote for " + us
   "name": {{ GetAnime.data.results[2].title }},
   "img": {{ GetAnime.data.results[2].image_url }},
   "synopsis": {{ GetAnime.data.results[2].synopsis }}
-}]`,
+}]`);
-      true,
-    );
     agHelper.ValidateToastMessage(
       "will be executed automatically on page load",
     ); //Validating 'Run API on Page Load' is set once api response is mapped

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/aTobAndbToaBasic_Spec.ts

@@ -3,7 +3,7 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry"
 let dataSet: any;
 let agHelper = ObjectsRegistry.AggregateHelper,
     ee = ObjectsRegistry.EntityExplorer,
-    jsEditor = ObjectsRegistry.JSEditor,
+    propPane = ObjectsRegistry.PropertyPane,
     locator = ObjectsRegistry.CommonLocators,
     deployMode = ObjectsRegistry.DeployMode;
 
@@ -21,14 +21,14 @@ describe("Validate basic binding of Input widget to Input widget", () => {
 
     it("1. Input widget test with default value for atob method", () => {
         ee.SelectEntityByName("Input1", 'WIDGETS')
-        jsEditor.EnterJSContext("Default Text", dataSet.atobInput + "}}");
+        propPane.UpdatePropertyFieldValue("Default Text", dataSet.atobInput + "}}");
         agHelper.ValidateNetworkStatus('@updateLayout')
         cy.get(locator._inputWidget).first().invoke("attr", "value").should("equal", 'A');//Before mapping JSObject value of input
     });
 
     it("2. Input widget test with default value for btoa method", function () {
         ee.SelectEntityByName("Input2")
-        jsEditor.EnterJSContext("Default Text", dataSet.btoaInput + "}}");
+        propPane.UpdatePropertyFieldValue("Default Text", dataSet.btoaInput + "}}");
         agHelper.ValidateNetworkStatus('@updateLayout')
         cy.get(locator._inputWidget).last().invoke("attr", "value").should("equal", 'QQ==');//Before mapping JSObject value of input
     });

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Bug14299_Spec.ts

@@ -56,16 +56,16 @@ describe("[Bug]: The data from the query does not show up on the widget #14299",
     );
 
     ee.SelectEntityByName("Table1");
-    jsEditor.EnterJSContext("Table Data", `{{JSObject1.runAstros.data}}`);
+    propPane.UpdatePropertyFieldValue("Table Data", `{{JSObject1.runAstros.data}}`);
 
     ee.SelectEntityByName("DatePicker1");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Default Date",
       `{{moment(Table1.selectedRow.date_of_death)}}`,
     );
 
     ee.SelectEntityByName("Text1");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Text",
       `Date: {{moment(Table1.selectedRow.date_of_death).toString()}}`,
     );

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/ChartDataPoint_Spec.ts

@@ -3,7 +3,7 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry"
 let dataSet: any, dsl: any;
 let agHelper = ObjectsRegistry.AggregateHelper,
     ee = ObjectsRegistry.EntityExplorer,
-    jsEditor = ObjectsRegistry.JSEditor,
+    propPane = ObjectsRegistry.PropertyPane,
     locator = ObjectsRegistry.CommonLocators,
     deployMode = ObjectsRegistry.DeployMode;
 
@@ -22,13 +22,13 @@ describe("Input widget test with default value from chart datapoint", () => {
 
     it("1. Chart widget - Input widget test with default value from another Input widget", () => {
         ee.SelectEntityByName("Input1", 'WIDGETS')
-        jsEditor.EnterJSContext("Default Text", dataSet.bindChartData + "}}");
+        propPane.UpdatePropertyFieldValue("Default Text", dataSet.bindChartData + "}}");
         agHelper.ValidateNetworkStatus('@updateLayout')
         ee.SelectEntityByName("Chart1")
         agHelper.SelectPropertiesDropDown("ondatapointclick", "Show message")
         agHelper.EnterActionValue("Message", dataSet.bindingDataPoint)
         ee.SelectEntityByName("Input2")
-        jsEditor.EnterJSContext("Default Text", dataSet.bindingSeriesTitle + "}}");
+        propPane.UpdatePropertyFieldValue("Default Text", dataSet.bindingSeriesTitle + "}}");
         deployMode.DeployApp()
         agHelper.Sleep(1500)//waiting for chart to load!
         agHelper.GetNClick("//*[local-name()='rect']", 13)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableBugs_Spec.ts

@@ -3,7 +3,7 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry";
 let dataSet: any;
 const agHelper = ObjectsRegistry.AggregateHelper,
   ee = ObjectsRegistry.EntityExplorer,
-  jsEditor = ObjectsRegistry.JSEditor,
+  propPane = ObjectsRegistry.PropertyPane,
   table = ObjectsRegistry.Table,
   deployMode = ObjectsRegistry.DeployMode;
 
@@ -16,16 +16,15 @@ describe("Verify various Table property bugs", function () {
 
   it("1. Adding Data to Table Widget", function () {
     ee.DragDropWidgetNVerify("tablewidget", 250, 250);
-    jsEditor.EnterJSContext("Table Data", JSON.stringify(dataSet.TableURLColumnType));
+    propPane.UpdatePropertyFieldValue("Table Data", JSON.stringify(dataSet.TableURLColumnType));
     agHelper.ValidateNetworkStatus("@updateLayout", 200);
     cy.get('body').type("{esc}");
   });
 
   it("2. Bug 13299 - Verify Display Text does not contain garbage value for URL column type when empty", function () {
     table.ChangeColumnType('image', 'URL')
-    jsEditor.EnterJSContext("Display Text",
+    propPane.UpdatePropertyFieldValue("Display Text",
-      `{{currentRow.image.toString().includes('7') ? currentRow.image.toString().split('full/')[1] : "" }}`,
+      `{{currentRow.image.toString().includes('7') ? currentRow.image.toString().split('full/')[1] : "" }}`)
-      true)
 
     deployMode.DeployApp()
 
@@ -58,9 +57,8 @@ describe("Verify various Table property bugs", function () {
     ee.SelectEntityByName("Table1", 'WIDGETS')
     agHelper.GetNClick(table._columnSettings('image'))
 
-    jsEditor.EnterJSContext("Display Text",
+    propPane.UpdatePropertyFieldValue("Display Text",
-      `{{currentRow.image.toString().includes('7') ? currentRow.image.toString().split('full/')[1] : null }}`,
+      `{{currentRow.image.toString().includes('7') ? currentRow.image.toString().split('full/')[1] : null }}`)
-      true)
 
     deployMode.DeployApp()
 
@@ -91,9 +89,8 @@ describe("Verify various Table property bugs", function () {
     ee.SelectEntityByName("Table1", 'WIDGETS')
     agHelper.GetNClick(table._columnSettings('image'))
 
-    jsEditor.EnterJSContext("Display Text",
+    propPane.UpdatePropertyFieldValue("Display Text",
-      `{{currentRow.image.toString().includes('7') ? currentRow.image.toString().split('full/')[1] : undefined }}`,
+      `{{currentRow.image.toString().includes('7') ? currentRow.image.toString().split('full/')[1] : undefined }}`)
-      true)
 
     deployMode.DeployApp()
 

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableFilter_Spec.ts

@@ -3,7 +3,7 @@ import { ObjectsRegistry } from "../../../../support/Objects/Registry";
 let dataSet: any;
 const agHelper = ObjectsRegistry.AggregateHelper,
   ee = ObjectsRegistry.EntityExplorer,
-  jsEditor = ObjectsRegistry.JSEditor,
+  propPane = ObjectsRegistry.PropertyPane,
   table = ObjectsRegistry.Table,
   homePage = ObjectsRegistry.HomePage,
   deployMode = ObjectsRegistry.DeployMode;
@@ -17,7 +17,7 @@ describe("Verify various Table_Filter combinations", function () {
 
   it("1. Adding Data to Table Widget", function () {
     ee.DragDropWidgetNVerify("tablewidget", 250, 250);
-    jsEditor.EnterJSContext("Table Data", JSON.stringify(dataSet.TableInput));
+    propPane.UpdatePropertyFieldValue("Table Data", JSON.stringify(dataSet.TableInput));
     agHelper.ValidateNetworkStatus("@updateLayout", 200);
     cy.get('body').type("{esc}");
     deployMode.DeployApp()

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_MultiPart_Spec.ts

@@ -5,7 +5,8 @@ let agHelper = ObjectsRegistry.AggregateHelper,
   jsEditor = ObjectsRegistry.JSEditor,
   apiPage = ObjectsRegistry.ApiPage,
   locator = ObjectsRegistry.CommonLocators,
-  deployMode = ObjectsRegistry.DeployMode;
+  deployMode = ObjectsRegistry.DeployMode,
+  propPane = ObjectsRegistry.PropertyPane;
 
 describe("Validate API request body panel", () => {
   it("1. Check whether input and type dropdown selector exist when multi-part is selected", () => {
@@ -127,7 +128,7 @@ describe("Validate API request body panel", () => {
     );
 
     ee.SelectEntityByName("Image1");
-    jsEditor.EnterJSContext("Image", "{{CloudinaryUploadApi.data.url}}");
+    propPane.UpdatePropertyFieldValue("Image", "{{CloudinaryUploadApi.data.url}}");
 
     ee.SelectEntityByName("CloudinaryUploadApi", "QUERIES/JS");
 

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/MySQL_Spec.ts

@@ -9,8 +9,7 @@ let agHelper = ObjectsRegistry.AggregateHelper,
   homePage = ObjectsRegistry.HomePage,
   dataSources = ObjectsRegistry.DataSources,
   propPane = ObjectsRegistry.PropertyPane,
-  deployMode = ObjectsRegistry.DeployMode,
+  deployMode = ObjectsRegistry.DeployMode;
-  jsEditor = ObjectsRegistry.JSEditor;
 
 describe("Validate MySQL Generate CRUD with JSON Form", () => {
   before(() => {
@@ -693,7 +692,7 @@ describe("Validate MySQL Generate CRUD with JSON Form", () => {
 
   function updatingStoreJSONPropertyFileds() {
     propPane.ChangeJsonFormFieldType("Store Status", "Radio Group");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Options",
       `[{
         "label": "Active",

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres_Spec.ts

@@ -9,8 +9,7 @@ let agHelper = ObjectsRegistry.AggregateHelper,
   homePage = ObjectsRegistry.HomePage,
   dataSources = ObjectsRegistry.DataSources,
   propPane = ObjectsRegistry.PropertyPane,
-  deployMode = ObjectsRegistry.DeployMode,
+  deployMode = ObjectsRegistry.DeployMode;
-  jsEditor = ObjectsRegistry.JSEditor;
 
 describe("Validate Postgres Generate CRUD with JSON Form", () => {
   before(() => {
@@ -803,7 +802,7 @@ describe("Validate Postgres Generate CRUD with JSON Form", () => {
     propPane.NavigateBackToPropertyPane();
 
     propPane.ChangeJsonFormFieldType("Vessel Type", "Select");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Options",
       `{{["Cargo", "Pleasure Craft", "Passenger", "Fishing", "Special Craft"].map(item=> {return {
         label: item,
@@ -813,9 +812,9 @@ describe("Validate Postgres Generate CRUD with JSON Form", () => {
     propPane.NavigateBackToPropertyPane();
 
     propPane.OpenJsonFormFieldSettings("Timezone");
-    jsEditor.EnterJSContext("Min", "-10");
+    propPane.UpdatePropertyFieldValue("Min", "-10");
-    jsEditor.EnterJSContext("Max", "10");
+    propPane.UpdatePropertyFieldValue("Max", "10");
-    jsEditor.EnterJSContext("Error Message", "Not a valid timezone!");
+    propPane.UpdatePropertyFieldValue("Error Message", "Not a valid timezone!");
     propPane.NavigateBackToPropertyPane();
 
     propPane.ChangeJsonFormFieldType("Eta Updated", "Datepicker");

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/JsFunctionExecution/JSFunctionExecution_spec.ts

@@ -6,7 +6,8 @@ const jsEditor = ObjectsRegistry.JSEditor,
   ee = ObjectsRegistry.EntityExplorer,
   table = ObjectsRegistry.Table,
   agHelper = ObjectsRegistry.AggregateHelper,
-  deployMode = ObjectsRegistry.DeployMode;
+  deployMode = ObjectsRegistry.DeployMode,
+  propPane = ObjectsRegistry.PropertyPane;
 
 let onPageLoadAndConfirmExecuteFunctionsLength: number,
   getJSObject: any,
@@ -172,9 +173,8 @@ describe("JS Function Execution", function() {
         toRun: false,
         shouldCreateNewJSObj: true,
       });
-
       // Assert presence of toast message
-      agHelper.ValidateToastMessage(invalidJSObjectStartToastMessage);
+      agHelper.WaitUntilToastDisappear(invalidJSObjectStartToastMessage);
 
       // Assert presence of lint error at the start line
       cy.get(locator._lintErrorElement)
@@ -283,7 +283,7 @@ describe("JS Function Execution", function() {
 
     cy.get("@jsObjName").then((jsObjName) => {
       ee.SelectEntityByName("Table1", "WIDGETS");
-      jsEditor.EnterJSContext("Table Data", `{{${jsObjName}.largeData}}`);
+      propPane.UpdatePropertyFieldValue("Table Data", `{{${jsObjName}.largeData}}`);
     });
 
     // Deploy App and test that table loads properly
@@ -338,7 +338,6 @@ describe("JS Function Execution", function() {
       toRun: false,
       shouldCreateNewJSObj: true,
     });
-    agHelper.WaitUntilToastDisappear("created successfully");
 
     // change sync function name and test that cyclic dependency is not created
     jsEditor.EditJSObj(syncJSCodeWithRenamedFunction1);
@@ -352,7 +351,6 @@ describe("JS Function Execution", function() {
       toRun: false,
       shouldCreateNewJSObj: true,
     });
-    agHelper.WaitUntilToastDisappear("created successfully");
     // change async function name and test that cyclic dependency is not created
     jsEditor.EditJSObj(asyncJSCodeWithRenamedFunction1);
     agHelper.AssertElementAbsence(locator._toastMsg);

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/OnLoadTests/JSOnLoad_Spec.ts

@@ -9,7 +9,8 @@ const agHelper = ObjectsRegistry.AggregateHelper,
   locator = ObjectsRegistry.CommonLocators,
   homePage = ObjectsRegistry.HomePage,
   apiPage = ObjectsRegistry.ApiPage,
-  deployMode = ObjectsRegistry.DeployMode;
+  deployMode = ObjectsRegistry.DeployMode,
+  propPane = ObjectsRegistry.PropertyPane;
 
 describe("JSObjects OnLoad Actions tests", function() {
   before(() => {
@@ -55,7 +56,7 @@ describe("JSObjects OnLoad Actions tests", function() {
           ".getId.data}}",
       );
       ee.SelectEntityByName("Table1", "WIDGETS");
-      jsEditor.EnterJSContext("Table Data", "{{GetUser.data}}");
+      propPane.UpdatePropertyFieldValue("Table Data", "{{GetUser.data}}");
       agHelper.ValidateToastMessage(
         (("[" + jsName) as string) +
           ".getId, GetUser] will be executed automatically on page load",
@@ -275,7 +276,7 @@ describe("JSObjects OnLoad Actions tests", function() {
       // cy.get(locator._toastMsg).contains(regex)
 
       ee.SelectEntityByName("Input1", "WIDGETS");
-      jsEditor.EnterJSContext(
+      propPane.UpdatePropertyFieldValue(
         "Default Text",
         "{{" + jsObjName + ".callQuotes.data}}",
       );
@@ -285,12 +286,14 @@ describe("JSObjects OnLoad Actions tests", function() {
         .and("contain", jsName as string)
         .and("contain", "will be executed automatically on page load");
 
+      agHelper.WaitUntilToastDisappear("Quotes");
+
       ee.SelectEntityByName("Input2");
-      jsEditor.EnterJSContext(
+      propPane.UpdatePropertyFieldValue(
         "Default Text",
         "{{" + jsObjName + ".callTrump.data.message}}",
       );
-      agHelper.ValidateToastMessage(
+      agHelper.WaitUntilToastDisappear(
         (("[" + jsName) as string) +
           ".callTrump] will be executed automatically on page load",
       );
@@ -300,19 +303,19 @@ describe("JSObjects OnLoad Actions tests", function() {
       //One Quotes confirmation - for API true
       agHelper.AssertElementVisible(jsEditor._dialogBody("Quotes"));
       agHelper.ClickButton("No");
-      agHelper.ValidateToastMessage('The action "Quotes" has failed');
+      agHelper.WaitUntilToastDisappear('The action "Quotes" has failed');
 
       //Another for API called via JS callQuotes()
       agHelper.AssertElementVisible(jsEditor._dialogBody("Quotes"));
       agHelper.ClickButton("No");
-      agHelper.ValidateToastMessage('The action "Quotes" has failed');
+      //agHelper.WaitUntilToastDisappear('The action "Quotes" has failed');No toast appears!
 
       //Confirmation - first JSObj then API
       agHelper.AssertElementVisible(
         jsEditor._dialogBody((jsName as string) + ".callTrump"),
       );
       agHelper.ClickButton("No");
-      agHelper.ValidateToastMessage(
+      agHelper.WaitUntilToastDisappear(
         "Failed to execute actions during page load",
       ); //When Confirmation is NO validate error toast!
       agHelper.AssertElementAbsence(jsEditor._dialogBody("WhatTrumpThinks")); //Since JS call is NO, dependent API confirmation should not appear
@@ -468,7 +471,7 @@ describe("JSObjects OnLoad Actions tests", function() {
       //jsEditor.EnableDisableAsyncFuncSettings("callCountry", false, true); Bug # 13826
 
       ee.SelectEntityByName("Select1", "WIDGETS");
-      jsEditor.EnterJSContext(
+      propPane.UpdatePropertyFieldValue(
         "Options",
         `{{ getCitiesList.data.map((row) => {
           return { label: row.city, value: row.city }
@@ -505,7 +508,7 @@ describe("JSObjects OnLoad Actions tests", function() {
       // agHelper.GetNClick(locator._dropDownValue("callBooks"));
 
       ee.SelectEntityByName("JSONForm1");
-      jsEditor.EnterJSContext("Source Data", "{{getBooks.data}}");
+      propPane.UpdatePropertyFieldValue("Source Data", "{{getBooks.data}}");
       //this toast is not coming due to existing JSON date errors but its made true at API
       //agHelper.ValidateToastMessage("[getBooks] will be executed automatically on page load");
     });

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/OnLoadTests/OnLoadActions_Spec.ts

@@ -4,7 +4,7 @@ let dsl: any;
 const agHelper = ObjectsRegistry.AggregateHelper,
   ee = ObjectsRegistry.EntityExplorer,
   apiPage = ObjectsRegistry.ApiPage,
-  jsEditor = ObjectsRegistry.JSEditor,
+  propPane = ObjectsRegistry.PropertyPane,
   locator = ObjectsRegistry.CommonLocators,
   deployMode = ObjectsRegistry.DeployMode;
 
@@ -63,28 +63,22 @@ describe("Layout OnLoad Actions tests", function() {
     //Adding dependency in right order matters!
     ee.ExpandCollapseEntity("WIDGETS");
     ee.SelectEntityByName("Image1");
-    jsEditor.EnterJSContext("Image", `{{RandomFlora.data}}`, true);
+    propPane.UpdatePropertyFieldValue("Image", `{{RandomFlora.data}}`);
 
     ee.SelectEntityByName("Image2");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Image",
-      `{{RandomUser.data.results[0].picture.large}}`,
+      `{{RandomUser.data.results[0].picture.large}}`);
-      true,
-    );
 
     ee.SelectEntityByName("Text1");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Text",
-      `{{InspiringQuotes.data.quote.body}}\n--\n{{InspiringQuotes.data.quote.author}}\n`,
+      `{{InspiringQuotes.data.quote.body}}\n--\n{{InspiringQuotes.data.quote.author}}\n`);
-      true,
-    );
 
     ee.SelectEntityByName("Text2");
-    jsEditor.EnterJSContext(
+    propPane.UpdatePropertyFieldValue(
       "Text",
-      `Hi, here is {{RandomUser.data.results[0].name.first}} & I'm {{RandomUser.data.results[0].dob.age}}'yo\nI live in {{RandomUser.data.results[0].location.country}}\nMy Suggestion : {{Suggestions.data.activity}}\n\nI'm {{Genderize.data.gender}}`,
+      `Hi, here is {{RandomUser.data.results[0].name.first}} & I'm {{RandomUser.data.results[0].dob.age}}'yo\nI live in {{RandomUser.data.results[0].location.country}}\nMy Suggestion : {{Suggestions.data.activity}}\n\nI'm {{Genderize.data.gender}}`);
-      true,
-    );
 
     // cy.url().then((url) => {
     //   const pageid = url.split("/")[4]?.split("-").pop();

app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/Params/PassingParams_Spec.ts

@@ -8,7 +8,8 @@ let agHelper = ObjectsRegistry.AggregateHelper,
   ee = ObjectsRegistry.EntityExplorer,
   table = ObjectsRegistry.Table,
   apiPage = ObjectsRegistry.ApiPage,
-  deployMode = ObjectsRegistry.DeployMode;
+  deployMode = ObjectsRegistry.DeployMode,
+  propPane = ObjectsRegistry.PropertyPane;
 
 describe("[Bug] - 10784 - Passing params from JS to SQL query should not break", () => {
   before(() => {
@@ -54,7 +55,7 @@ describe("[Bug] - 10784 - Passing params from JS to SQL query should not break",
       );
     });
     ee.SelectEntityByName("Table1");
-    jsEditor.EnterJSContext("Table Data", "{{ParamsTest.data}}");
+    propPane.UpdatePropertyFieldValue("Table Data", "{{ParamsTest.data}}");
 
     ee.SelectEntityByName("ParamsTest", "QUERIES/JS");
     apiPage.ToggleOnPageLoadRun(false); //Bug 12476

app/client/cypress/support/Objects/CommonLocators.ts

@@ -45,7 +45,7 @@ export class CommonLocators {
     _entityNameEditing = (entityNameinLeftSidebar: string) => "//span[text()='" + entityNameinLeftSidebar + "']/parent::div[contains(@class, 't--entity-name editing')]/input"
     _jsToggle = (controlToToggle: string) => ".t--property-control-" + controlToToggle + " .t--js-toggle"
     _spanButton = (btnVisibleText: string) => "//span[text()='" + btnVisibleText + "']/parent::button"
-    _selectPropDropdown = (ddName: string) => "//div[contains(@class, 't--property-control-" + ddName + "')]//button[contains(@class, 't--open-dropdown-Select-Action')]"
+    _selectPropDropdown = (ddName: string) => "//div[contains(@class, 't--property-control-" + ddName.replace(/ +/g, "").toLowerCase() + "')]//button[contains(@class, 't--open-dropdown-Select-Action')]"
     _dropDownValue = (dropdownOption: string) => ".single-select:contains('" + dropdownOption + "')"
     _selectOptionValue = (dropdownOption: string) => ".menu-item-link:contains('" + dropdownOption + "')"
     _selectedDropdownValue = "//button[contains(@class, 'select-button')]/span[@class='bp3-button-text']"

app/client/cypress/support/Pages/AggregateHelper.ts

@@ -110,9 +110,10 @@ export class AggregateHelper {
     });
   }
 
-  public ValidateToastMessage(text: string, length = 1) {
+  public ValidateToastMessage(text: string, index = 0, length = 1) {
+    cy.get(this.locator._toastMsg).should("have.length.at.least", length);
     cy.get(this.locator._toastMsg)
-      .should("have.length", length)
+      .eq(index)
       .should("contain.text", text);
   }
 
@@ -138,7 +139,8 @@ export class AggregateHelper {
     });
   }
 
-  public WaitUntilToastDisappear(msgToCheckforDisappearance: string | "") {
+  public WaitUntilToastDisappear(msgToCheckforDisappearance: string | "", index = 0 , length = 1) {
+    this.ValidateToastMessage(msgToCheckforDisappearance, index, length);
     cy.waitUntil(() => cy.get(this.locator._toastMsg), {
       errorMsg: msgToCheckforDisappearance + " did not disappear",
       timeout: 5000,
@@ -511,6 +513,7 @@ export class AggregateHelper {
     if (action == "Delete") {
       !jsDelete && this.ValidateNetworkStatus("@deleteAction");
       jsDelete && this.ValidateNetworkStatus("@deleteJSCollection");
+      jsDelete && this.WaitUntilToastDisappear("deleted successfully");
     }
   }
 
@@ -528,14 +531,7 @@ export class AggregateHelper {
     options: IEnterValue = DEFAULT_ENTERVALUE_OPTIONS,
   ) {
     const { directInput, inputFieldName, propFieldName } = options;
-
+    if (propFieldName && directInput && !inputFieldName) {
-    if (propFieldName && !directInput && !inputFieldName) {
-      cy.xpath(this.locator._existingFieldTextByName(propFieldName)).then(
-        ($field: any) => {
-          this.UpdateCodeInput($field, valueToEnter);
-        },
-      );
-    } else if (propFieldName && directInput && !inputFieldName) {
       cy.get(propFieldName).then(($field: any) => {
         this.UpdateCodeInput($field, valueToEnter);
       });

app/client/cypress/support/Pages/EntityExplorer.ts

@@ -51,6 +51,7 @@ export class EntityExplorer {
     entityNameinLeftSidebar: string,
     section: "WIDGETS" | "QUERIES/JS" | "DATASOURCES" | "" = "",
   ) {
+    this.NavigateToSwitcher("explorer");
     if (section) this.ExpandCollapseEntity(section); //to expand respective section
     cy.xpath(this._entityNameInExplorer(entityNameinLeftSidebar))
       .last()

app/client/cypress/support/Pages/JSEditor.ts

@@ -17,6 +17,7 @@ export class JSEditor {
   public agHelper = ObjectsRegistry.AggregateHelper;
   public locator = ObjectsRegistry.CommonLocators;
   public ee = ObjectsRegistry.EntityExplorer;
+  public propPane = ObjectsRegistry.PropertyPane;
 
   //#region Element locators
   _runButton = "button.run-js-action";
@@ -109,7 +110,7 @@ export class JSEditor {
     cy.get(this._jsObjTxt).should("not.exist");
 
     //cy.waitUntil(() => cy.get(this.locator._toastMsg).should('not.be.visible')) // fails sometimes
-    //this.agHelper.WaitUntilToastDisappear('created successfully')
+    this.agHelper.WaitUntilToastDisappear("created successfully"); //to not hinder with other toast msgs!
     this.agHelper.Sleep();
   }
 
@@ -153,22 +154,19 @@ export class JSEditor {
         } else {
           input.type(JSCode, {
             parseSpecialCharSequences: false,
-            delay: 150,
+            delay: 100,
             force: true,
           });
         }
       });
 
     this.agHelper.AssertAutoSave(); //Ample wait due to open bug # 10284
-    //this.agHelper.Sleep(5000)//Ample wait due to open bug # 10284
 
     if (toRun) {
-      //clicking 1 times & waits for 3 second for result to be populated!
+      //clicking 1 times & waits for 2 second for result to be populated!
       Cypress._.times(1, () => {
-        cy.get(this._runButton)
+        this.agHelper.GetNClick(this._runButton);
-          .first()
+        this.agHelper.Sleep(2000);
-          .click()
-          .wait(3000);
       });
       cy.get(this.locator._empty).should("not.exist");
     }
@@ -191,7 +189,6 @@ export class JSEditor {
     value: string,
     paste = true,
     toToggleOnJS = false,
-    notField = false,
   ) {
     if (toToggleOnJS) {
       cy.get(this.locator._jsToggle(endp.replace(/ +/g, "").toLowerCase()))
@@ -216,11 +213,7 @@ export class JSEditor {
     //   .type("{del}", { force: true });
 
     if (paste) {
-      this.agHelper.EnterValue(value, {
+      this.propPane.UpdatePropertyFieldValue(endp, value);
-        propFieldName: endp,
-        directInput: notField,
-        inputFieldName: "",
-      });
     } else {
       cy.get(
         this.locator._propertyControl +

app/client/cypress/support/Pages/PropertyPane.ts

@@ -19,7 +19,6 @@ type filedTypeValues =
 
 export class PropertyPane {
   private agHelper = ObjectsRegistry.AggregateHelper;
-  private jsEditor = ObjectsRegistry.JSEditor;
   private locator = ObjectsRegistry.CommonLocators;
 
   _fieldConfig = (fieldName: string) =>
@@ -72,7 +71,7 @@ export class PropertyPane {
   public ChangeTheme(newTheme: string) {
     this.agHelper.GetNClick(this._changeThemeBtn, 0, true);
     this.agHelper.GetNClick(this._themeCard(newTheme));
-    this.agHelper.ValidateToastMessage("Theme " + newTheme + " Applied");
+    this.agHelper.WaitUntilToastDisappear("Theme " + newTheme + " Applied");
   }
 
   public ChangeColor(
@@ -109,9 +108,9 @@ export class PropertyPane {
         .GetText(this.locator._existingActualValueByName("Property Name"))
         .then(($propName) => {
           placeHolderText = "{{sourceData." + $propName + "}}";
-          this.jsEditor.EnterJSContext("Placeholder", placeHolderText);
+          this.UpdatePropertyFieldValue("Placeholder", placeHolderText);
         });
-      this.jsEditor.EnterJSContext("Default Value", "");
+      this.UpdatePropertyFieldValue("Default Value", "");
       this.NavigateBackToPropertyPane();
     });
   }
@@ -128,4 +127,22 @@ export class PropertyPane {
     }
     this.agHelper.AssertAutoSave();
   }
+
+  public SelectJSFunctionToExecute(
+    eventName: string,
+    jsName: string,
+    funcName: string,
+  ) {
+    this.agHelper.SelectPropertiesDropDown(eventName, "Execute a JS function");
+    this.agHelper.GetNClick(this.locator._dropDownValue(jsName), 0, true);
+    this.agHelper.GetNClick(this.locator._dropDownValue(funcName), 0, true);
+    this.agHelper.AssertAutoSave();
+  }
+
+  public UpdatePropertyFieldValue(propFieldName: string, valueToEnter: string) {
+    cy.xpath(this.locator._existingFieldTextByName(propFieldName)).then(
+      ($field: any) => {
+        this.agHelper.UpdateCodeInput($field, valueToEnter);
+      });
+  }
 }

app/client/src/workers/Actions.ts

@@ -77,7 +77,7 @@ const DATA_TREE_FUNCTIONS: Record<
   },
   storeValue: function(key: string, value: string, persist = true) {
     // momentarily store this value in local state to support loops
-    _.set(self, `appsmith.store[${key}]`, value);
+    _.set(self, ["appsmith", "store", key], value);
     return {
       type: ActionTriggerType.STORE_VALUE,
       payload: {