Add sync meta property update function (#3293)

app/client/cypress/integration/Smoke_TestSuite/Binding/Bind_InputWidget_Table_Sorting_spec.js

@@ -1,53 +0,0 @@
-const commonlocators = require("../../../locators/commonlocators.json");
-const dsl = require("../../../fixtures/formInputTableDsl.json");
-const widgetsPage = require("../../../locators/Widgets.json");
-const publish = require("../../../locators/publishWidgetspage.json");
-const testdata = require("../../../fixtures/testdata.json");
-
-describe("Binding the Table and input Widget", function() {
-  before(() => {
-    cy.addDsl(dsl);
-  });
-
-  // it("Input widget test with default value from table widget", function() {
-  //   cy.SearchEntityandOpen("Input1");
-  //   cy.get(widgetsPage.defaultInput).type(testdata.defaultInputWidget);
-  //   cy.get(commonlocators.editPropCrossButton).click();
-  //   cy.wait("@updateLayout").should(
-  //     "have.nested.property",
-  //     "response.body.responseMeta.status",
-  //     200,
-  //   );
-  // });
-
-  // it("validation of data displayed in input widgets based on sorting", function() {
-  //   cy.SearchEntityandOpen("Table1");
-  //   cy.get(commonlocators.deflautSelectedRow)
-  //     .last()
-  //     .type("0", { force: true });
-  //   cy.get(".draggable-header ")
-  //     .first()
-  //     .click();
-  //   cy.readTabledataPublish("0", "0").then(tabData => {
-  //     const tabValue = tabData;
-  //     expect(tabValue).to.be.equal("6788734");
-  //     cy.log("the value is" + tabValue);
-  //     cy.get(publish.inputWidget + " " + "input")
-  //       .first()
-  //       .invoke("attr", "value")
-  //       .should("contain", tabValue);
-  //   });
-  //   cy.get(".draggable-header ")
-  //     .first()
-  //     .click();
-  //   cy.readTabledataPublish("0", "0").then(tabData => {
-  //     const tabValue = tabData;
-  //     expect(tabValue).to.be.equal("2381224");
-  //     cy.log("the value is" + tabValue);
-  //     cy.get(publish.inputWidget + " " + "input")
-  //       .first()
-  //       .invoke("attr", "value")
-  //       .should("contain", tabValue);
-  //   });
-  // });
-});

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_InputWidget_Table_Sorting_spec.js

@@ -0,0 +1,54 @@
+const commonlocators = require("../../../../locators/commonlocators.json");
+const dsl = require("../../../../fixtures/formInputTableDsl.json");
+const widgetsPage = require("../../../../locators/Widgets.json");
+const publish = require("../../../../locators/publishWidgetspage.json");
+const testdata = require("../../../../fixtures/testdata.json");
+
+describe("Binding the Table and input Widget", function() {
+  before(() => {
+    cy.addDsl(dsl);
+  });
+
+  it("Input widget test with default value from table widget", function() {
+    cy.SearchEntityandOpen("Input1");
+    cy.get(widgetsPage.defaultInput).type(testdata.defaultInputWidget);
+    cy.get(commonlocators.editPropCrossButton).click();
+    cy.wait("@updateLayout").should(
+      "have.nested.property",
+      "response.body.responseMeta.status",
+      200,
+    );
+  });
+
+  it("validation of data displayed in input widgets based on sorting", function() {
+    cy.SearchEntityandOpen("Table1");
+    cy.get(commonlocators.deflautSelectedRow)
+      .last()
+      .type("0", { force: true });
+    cy.get(".draggable-header ")
+      .first()
+      .click();
+    cy.readTabledataPublish("0", "0").then((tabData) => {
+      const tabValue = tabData;
+      expect(tabValue).to.be.equal("6788734");
+      cy.log("the value is" + tabValue);
+      cy.get(publish.inputWidget + " " + "input")
+        .first()
+        .invoke("attr", "value")
+        .should("contain", tabValue);
+    });
+    cy.get(".draggable-header ")
+      .first()
+      .click();
+    cy.readTabledataPublish("0", "0").then((tabData) => {
+      const tabValue = tabData;
+      expect(tabValue).to.be.equal("2381224");
+      cy.log("the value is" + tabValue);
+      cy.get(publish.inputWidget + " " + "input")
+        .first()
+        .invoke("attr", "value")
+        .should("contain", tabValue);
+    });
+  });
+});
+

app/client/src/widgets/MetaHOC.tsx

@@ -18,6 +18,10 @@ export interface WithMeta {
     propertyValue: any,
     actionExecution?: DebouncedExecuteActionPayload,
   ) => void;
+  syncUpdateWidgetMetaProperty: (
+    propertyName: string,
+    propertyValue: any,
+  ) => void;
 }
 
 const withMeta = (WrappedWidget: typeof BaseWidget) => {
@@ -88,6 +92,21 @@ const withMeta = (WrappedWidget: typeof BaseWidget) => {
       );
     };
 
+    // To be used when there is a race condition noticed on updating different
+    // properties from a widget in quick succession
+    syncUpdateWidgetMetaProperty = (
+      propertyName: string,
+      propertyValue: any,
+    ): void => {
+      const { updateWidgetMetaProperty } = this.context;
+      const { widgetId, widgetName } = this.props;
+      this.setState({
+        [propertyName]: propertyValue,
+      });
+      clearEvalPropertyCache(`${widgetName}.${propertyName}`);
+      updateWidgetMetaProperty(widgetId, propertyName, propertyValue);
+    };
+
     handleUpdateWidgetMetaProperty() {
       const { updateWidgetMetaProperty, executeAction } = this.context;
       const { widgetId, widgetName } = this.props;
@@ -122,6 +141,7 @@ const withMeta = (WrappedWidget: typeof BaseWidget) => {
         ...this.props,
         ...this.state,
         updateWidgetMetaProperty: this.updateWidgetMetaProperty,
+        syncUpdateWidgetMetaProperty: this.syncUpdateWidgetMetaProperty,
       };
     };
 

app/client/src/widgets/TableWidget/index.tsx

@@ -695,7 +695,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
         JSON.stringify(this.props.filteredTableData)
       ) {
         // Update filteredTableData meta property
-        this.props.updateWidgetMetaProperty(
+        this.props.syncUpdateWidgetMetaProperty(
           "filteredTableData",
           filteredTableData,
         );