chore: Add data property in entity explorer as part of "show bindings" (#12590)

* include JSAction data in show-bindings

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

@@ -1,7 +1,6 @@
-import { ObjectsRegistry } from "../Objects/Registry"
+import { ObjectsRegistry } from "../Objects/Registry";
 export class JSEditor {
-
-  public agHelper = ObjectsRegistry.AggregateHelper
+  public agHelper = ObjectsRegistry.AggregateHelper;
   public locator = ObjectsRegistry.CommonLocators;
   public ee = ObjectsRegistry.EntityExplorer;
 
@@ -16,6 +15,7 @@ export class JSEditor {
   _dialog = (dialogHeader: string) => "//div[contains(@class, 'bp3-dialog')]//h4[contains(text(), '" + dialogHeader + "')]"
   private _closeSettings = "span[icon='small-cross']"
 
+
   public NavigateToJSEditor() {
     cy.get(this.locator._createNew)
       .last()
@@ -24,24 +24,33 @@ export class JSEditor {
 
     //cy.waitUntil(() => cy.get(this.locator._toastMsg).should('not.be.visible')) // fails sometimes
     //this.agHelper.WaitUntilEleDisappear(this.locator._toastMsg, 'created successfully')
-    this.agHelper.Sleep()
+    this.agHelper.Sleep();
   }
 
-  public CreateJSObject(JSCode: string, paste = true, completeReplace = false, toRun = true) {
+  public CreateJSObject(
+    JSCode: string,
+    paste = true,
+    completeReplace = false,
+    toRun = true,
+  ) {
     this.NavigateToJSEditor();
 
     if (!completeReplace) {
       cy.get(this.locator._codeMirrorTextArea)
         .first()
         .focus()
-        .type("{downarrow}{downarrow}{downarrow}{downarrow}  ")
-    }
-    else {
+        .type("{downarrow}{downarrow}{downarrow}{downarrow}  ");
+    } else {
       cy.get(this.locator._codeMirrorTextArea)
         .first()
         .focus()
-        .type("{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}")
-        .type("{shift}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}", { force: true })
+        .type(
+          "{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}",
+        )
+        .type(
+          "{shift}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}{uparrow}",
+          { force: true },
+        )
         .type("{backspace}", { force: true });
 
       // .type("{uparrow}", { force: true })
@@ -53,7 +62,6 @@ export class JSEditor {
       //   .type("{ctrl}{shift}{downarrow}", { force: true })
       //   .type("{backspace}",{ force: true });
       //.type("{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow}{downarrow} ")
-
     }
 
     cy.get(this.locator._codeMirrorTextArea)
@@ -62,15 +70,16 @@ export class JSEditor {
         const input = cy.get(el);
         if (paste) {
           //input.invoke("val", value);
-          this.agHelper.Paste(el, JSCode)
+          this.agHelper.Paste(el, JSCode);
         } else {
           input.type(JSCode, {
-            parseSpecialCharSequences: false, delay: 150
+            parseSpecialCharSequences: false,
+            delay: 150,
           });
         }
       });
 
-    this.agHelper.AssertAutoSave()//Ample wait due to open bug # 10284
+    this.agHelper.AssertAutoSave(); //Ample wait due to open bug # 10284
     //this.agHelper.Sleep(5000)//Ample wait due to open bug # 10284
 
     if (toRun) {
@@ -79,22 +88,31 @@ export class JSEditor {
         cy.xpath(this._runButton)
           .first()
           .click()
-          .wait(3000)
-      })
-      cy.get(this.locator._empty).should('not.exist')
-      cy.get(this.locator._toastMsg).should("have.length", 0)
+          .wait(3000);
+      });
+      cy.get(this.locator._empty).should("not.exist");
+      cy.get(this.locator._toastMsg).should("have.length", 0);
     }
-    this.GetJSObjectName()
+    this.GetJSObjectName();
   }
 
   //Not working - To improve!
   public EditJSObj(existingTxt: string, newTxt: string) {
-    cy.get(this.locator._codeEditorTarget).contains(existingTxt).dblclick()//.type("{backspace}").type(newTxt)
-    cy.get('body').type("{backspace}").type(newTxt)
-    this.agHelper.AssertAutoSave()//Ample wait due to open bug # 10284
+    cy.get(this.locator._codeEditorTarget)
+      .contains(existingTxt)
+      .dblclick(); //.type("{backspace}").type(newTxt)
+    cy.get("body")
+      .type("{backspace}")
+      .type(newTxt);
+    this.agHelper.AssertAutoSave(); //Ample wait due to open bug # 10284
   }
 
-  public EnterJSContext(endp: string, value: string, paste = true, toToggleOnJS = false) {
+  public EnterJSContext(
+    endp: string,
+    value: string,
+    paste = true,
+    toToggleOnJS = false,
+  ) {
     if (toToggleOnJS) {
       cy.get(this.locator._jsToggle(endp.replace(/ +/g, "").toLowerCase()))
         .invoke("attr", "class")
@@ -106,7 +124,6 @@ export class JSEditor {
           }
         });
     }
-
     // cy.get(this.locator._propertyControl + endp + " " + this.locator._codeMirrorTextArea)
     //   .first()
     //   .focus()
@@ -162,6 +179,7 @@ export class JSEditor {
     // });
 
     this.agHelper.AssertAutoSave()//Allowing time for Evaluate value to capture value
+
   }
 
   public RenameJSObjFromForm(renameVal: string) {
@@ -184,14 +202,16 @@ export class JSEditor {
   }
 
   public GetJSObjectName() {
-    cy.get(this._jsObjName).invoke("text").then((text) => cy.wrap(text).as("jsObjName")
-    );
+    cy.get(this._jsObjName)
+      .invoke("text")
+      .then((text) => cy.wrap(text).as("jsObjName"));
   }
 
   public validateDefaultJSObjProperties(jsObjName: string) {
     this.ee.ActionContextMenuByEntityName(jsObjName, "Show Bindings");
-    cy.get(this._propertyList).then(function ($lis) {
-      expect($lis).to.have.length(4);
+    cy.get(this._propertyList).then(function($lis) {
+      const bindingsLength = $lis.length;
+      expect(bindingsLength).to.be.at.least(4);
       expect($lis.eq(0).text()).to.be.oneOf([
         "{{" + jsObjName + ".myFun2()}}",
         "{{" + jsObjName + ".myFun1()}}",
@@ -199,13 +219,20 @@ export class JSEditor {
       expect($lis.eq(1).text()).to.be.oneOf([
         "{{" + jsObjName + ".myFun2()}}",
         "{{" + jsObjName + ".myFun1()}}",
+        "{{" + jsObjName + ".myFun2.data}}",
+        "{{" + jsObjName + ".myFun1.data}}",
       ]);
-      expect($lis.eq(2).text()).to.contain("{{" + jsObjName + ".myVar1}}");
-      expect($lis.eq(3).text()).to.contain("{{" + jsObjName + ".myVar2}}");
+      expect($lis.eq(bindingsLength - 2).text()).to.contain(
+        "{{" + jsObjName + ".myVar1}}",
+      );
+      expect($lis.eq(bindingsLength - 1).text()).to.contain(
+        "{{" + jsObjName + ".myVar2}}",
+      );
     });
     cy.get(this._bindingsClose).click({ force: true });
   }
 
+
   public EnableOnPageLoad(funName: string, onLoad = true, bfrCalling = true) {
 
     this.agHelper.XpathNClick(this._responseTabAction(funName))
@@ -217,4 +244,5 @@ export class JSEditor {
 
     this.agHelper.GetNClick(this._closeSettings)
   }
+
 }

app/client/src/pages/Editor/Explorer/Entity/EntityProperties.tsx

@@ -14,10 +14,10 @@ import { getPropsForJSActionEntity } from "utils/autocomplete/EntityDefinitions"
 import { isEmpty } from "lodash";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import classNames from "classnames";
-import { JSCollection } from "entities/JSCollection";
 import styled from "styled-components";
 import { ControlIcons } from "icons/ControlIcons";
 import { ReduxActionTypes } from "constants/ReduxActionConstants";
+import { JSCollectionData } from "reducers/entityReducers/jsActionsReducer";
 
 const CloseIcon = ControlIcons.CLOSE_CONTROL;
 
@@ -122,15 +122,15 @@ export function EntityProperties() {
   if (!entity) return null;
   switch (entityType) {
     case ENTITY_TYPE.JSACTION:
-      const jsAction = entity.config as JSCollection;
-      const properties = getPropsForJSActionEntity(jsAction);
+      const jsCollection = entity as JSCollectionData;
+      const properties = getPropsForJSActionEntity(jsCollection);
       if (properties) {
         entityProperties = Object.keys(properties).map(
           (actionProperty: string) => {
             const value = properties[actionProperty];
             return {
               propertyName: actionProperty,
-              entityName: jsAction.name,
+              entityName: jsCollection.config.name,
               value: value,
             };
           },

app/client/src/utils/autocomplete/EntityDefinitions.ts

@@ -4,8 +4,8 @@ import {
   DataTreeAppsmith,
 } from "entities/DataTree/dataTreeFactory";
 import _ from "lodash";
-import { JSCollection } from "entities/JSCollection";
 import { EVALUATION_PATH } from "utils/DynamicBindingUtils";
+import { JSCollectionData } from "reducers/entityReducers/jsActionsReducer";
 
 const isVisible = {
   "!type": "bool",
@@ -669,17 +669,21 @@ export const GLOBAL_FUNCTIONS = {
   },
 };
 
-export const getPropsForJSActionEntity = (
-  entity: JSCollection,
-): Record<string, string> => {
-  const properties: Record<string, string> = {};
-  const actions = entity.actions;
+export const getPropsForJSActionEntity = ({
+  config,
+  data,
+}: JSCollectionData): Record<string, string> => {
+  const properties: Record<string, any> = {};
+  const actions = config.actions;
   if (actions && actions.length > 0)
-    for (let i = 0; i < entity.actions.length; i++) {
-      const action = entity.actions[i];
+    for (let i = 0; i < config.actions.length; i++) {
+      const action = config.actions[i];
       properties[action.name + "()"] = "Function";
+      if (data && action.id in data) {
+        properties[action.name + ".data"] = data[action.id];
+      }
     }
-  const variablesProps = entity.variables;
+  const variablesProps = config.variables;
   if (variablesProps && variablesProps.length > 0) {
     for (let i = 0; i < variablesProps.length; i++) {
       const variableProp = variablesProps[i];