fix: clearInterval action creator adds argument in the wrong slot (ap…

…psmithorg#9029)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ActionExecution/setInterval_spec.js

@@ -0,0 +1,108 @@
+const commonlocators = require("../../../../locators/commonlocators.json");
+const dsl = require("../../../../fixtures/buttonApiDsl.json");
+const widgetsPage = require("../../../../locators/Widgets.json");
+const publishPage = require("../../../../locators/publishWidgetspage.json");
+
+describe("Test Create Api and Bind to Table widget", function() {
+ before(() => {
+ cy.addDsl(dsl);
+ });
+
+ it("Test_Add users api and execute api", function() {
+ cy.createAndFillApi(this.data.userApi, "/users");
+ cy.RunAPI();
+ });
+
+ it("selects set interval function", () => {
+ cy.SearchEntityandOpen("Button1");
+ cy.get(widgetsPage.buttonOnClick)
+ .last()
+ .click({ force: true });
+ cy.get(commonlocators.chooseAction)
+ .children()
+ .contains("Set interval")
+ .click();
+ });
+
+ it("Fill setInterval action creator and test code generated", () => {
+ cy.get(widgetsPage.toggleOnClick)
+ .invoke("attr", "class")
+ .then((classes) => {
+ if (classes.includes("is-active")) {
+ cy.get(widgetsPage.toggleOnClick).click();
+ }
+ });
+
+ cy.get("label")
+ .contains("Callback function")
+ .parent()
+ .then(($el) => {
+ cy.updateCodeInput($el, "{{() => { Api1.run() }}}");
+ });
+
+ cy.get("label")
+ .contains("Id")
+ .parent()
+ .then(($el) => {
+ cy.updateCodeInput($el, "myInterval");
+ });
+
+ cy.get(widgetsPage.toggleOnClick).click();
+
+ cy.get(".t--property-control-onclick")
+ .find(".CodeMirror-code")
+ .invoke("text")
+ .should(
+ "equal",
+ "{{setInterval(() => { Api1.run() }, 5000,'myInterval')}}",
+ );
+
+ cy.get(widgetsPage.toggleOnClick).click();
+ });
+
+ it("works in the published version", () => {
+ cy.PublishtheApp();
+
+ cy.get(publishPage.buttonWidget).click();
+
+ cy.wait("@postExecute").should(
+ "have.nested.property",
+ "response.body.responseMeta.status",
+ 200,
+ );
+ cy.wait(5000);
+ cy.wait("@postExecute").should(
+ "have.nested.property",
+ "response.body.responseMeta.status",
+ 200,
+ );
+ cy.get(publishPage.backToEditor).click({ force: true });
+ });
+
+ it("selects clear interval function", () => {
+ cy.SearchEntityandOpen("Button1");
+ cy.get(widgetsPage.buttonOnClick)
+ .last()
+ .click({ force: true });
+ cy.get(commonlocators.chooseAction)
+ .children()
+ .contains("Clear interval")
+ .click();
+ });
+
+ it("Fill clearInterval action creator and test code generated", () => {
+ cy.get("label")
+ .contains("Id")
+ .parent()
+ .then(($el) => {
+ cy.updateCodeInput($el, "myInterval");
+ });
+
+ cy.get(widgetsPage.toggleOnClick).click();
+
+ cy.get(".t--property-control-onclick")
+ .find(".CodeMirror-code")
+ .invoke("text")
+ .should("equal", "{{clearInterval('myInterval')}}");
+ });
+});

app/client/cypress/support/commands.js

@@ -996,7 +996,9 @@ Cypress.Commands.add("CreationOfUniqueAPIcheck", (apiname) => {
  .type(apiname, { force: true, delay: 500 })
  .should("have.value", apiname);
  cy.get(".error-message").should(($x) => {
- expect($x).contain(apiname.concat(" is already being used or is a restricted keyword."));
+ expect($x).contain(
+ apiname.concat(" is already being used or is a restricted keyword."),
+ );
  });
  cy.get(apiwidget.apiTxt).blur();
 });
@@ -1081,7 +1083,9 @@ Cypress.Commands.add("CreateApiAndValidateUniqueEntityName", (apiname) => {
  .type(apiname, { force: true })
  .should("have.value", apiname);
  cy.get(".t--nameOfApi .error-message").should(($x) => {
- expect($x).contain(apiname.concat(" is already being used or is a restricted keyword."));
+ expect($x).contain(
+ apiname.concat(" is already being used or is a restricted keyword."),
+ );
  });
 });
 
@@ -1406,7 +1410,7 @@ Cypress.Commands.add("testJsontext", (endp, value, paste = true) => {
  .type("{ctrl}{shift}{downarrow}", { force: true });
  cy.focused().then(($cm) => {
  if ($cm.contents != "") {
- cy.log("The field is empty");
+ cy.log("The field is not empty");
  cy.get(".t--property-control-" + endp + " .CodeMirror textarea")
  .first()
  .click({ force: true })
@@ -1435,6 +1439,25 @@ Cypress.Commands.add("testJsontext", (endp, value, paste = true) => {
  cy.wait(1000);
 });
 
+/**
+ * Usage:
+ * Find the element which has a code editor input and then pass it in the function
+ *
+ * cy.get(...).then(el => cy.updateCodeInput(el, "test"));
+ *
+ */
+Cypress.Commands.add("updateCodeInput", ($selector, value) => {
+ cy.get($selector)
+ .find(".CodeMirror")
+ .first()
+ .then((ins) => {
+ const input = ins[0].CodeMirror;
+ input.focus();
+ cy.wait(100);
+ input.setValue(value);
+ });
+});
+
 Cypress.Commands.add("selectColor", (GivenProperty) => {
  // Property pane of the widget is opened, and click given property.
  cy.get(

app/client/src/components/editorComponents/ActionCreator/Fields.tsx

@@ -325,42 +325,42 @@ const views = {
  },
 };
 
-export const FieldType = {
- ACTION_SELECTOR_FIELD: "ACTION_SELECTOR_FIELD",
- JS_ACTION_SELECTOR_FIELD: "JS_ACTION_SELECTOR_FIELD",
- ON_SUCCESS_FIELD: "ON_SUCCESS_FIELD",
- ON_ERROR_FIELD: "ON_ERROR_FIELD",
- SHOW_MODAL_FIELD: "SHOW_MODAL_FIELD",
- CLOSE_MODAL_FIELD: "CLOSE_MODAL_FIELD",
- PAGE_SELECTOR_FIELD: "PAGE_SELECTOR_FIELD",
- KEY_VALUE_FIELD: "KEY_VALUE_FIELD",
- URL_FIELD: "URL_FIELD",
- ALERT_TEXT_FIELD: "ALERT_TEXT_FIELD",
- ALERT_TYPE_SELECTOR_FIELD: "ALERT_TYPE_SELECTOR_FIELD",
- KEY_TEXT_FIELD: "KEY_TEXT_FIELD",
- VALUE_TEXT_FIELD: "VALUE_TEXT_FIELD",
- QUERY_PARAMS_FIELD: "QUERY_PARAMS_FIELD",
- DOWNLOAD_DATA_FIELD: "DOWNLOAD_DATA_FIELD",
- DOWNLOAD_FILE_NAME_FIELD: "DOWNLOAD_FILE_NAME_FIELD",
- DOWNLOAD_FILE_TYPE_FIELD: "DOWNLOAD_FILE_TYPE_FIELD",
- COPY_TEXT_FIELD: "COPY_TEXT_FIELD",
- NAVIGATION_TARGET_FIELD: "NAVIGATION_TARGET_FIELD",
- WIDGET_NAME_FIELD: "WIDGET_NAME_FIELD",
- RESET_CHILDREN_FIELD: "RESET_CHILDREN_FIELD",
- ARGUMENT_KEY_VALUE_FIELD: "ARGUMENT_KEY_VALUE_FIELD",
- CALLBACK_FUNCTION_FIELD: "CALLBACK_FUNCTION_FIELD",
- DELAY_FIELD: "DELAY_FIELD",
- ID_FIELD: "ID_FIELD",
-};
-type FieldType = typeof FieldType[keyof typeof FieldType];
+export enum FieldType {
+ ACTION_SELECTOR_FIELD = "ACTION_SELECTOR_FIELD",
+ JS_ACTION_SELECTOR_FIELD = "JS_ACTION_SELECTOR_FIELD",
+ ON_SUCCESS_FIELD = "ON_SUCCESS_FIELD",
+ ON_ERROR_FIELD = "ON_ERROR_FIELD",
+ SHOW_MODAL_FIELD = "SHOW_MODAL_FIELD",
+ CLOSE_MODAL_FIELD = "CLOSE_MODAL_FIELD",
+ PAGE_SELECTOR_FIELD = "PAGE_SELECTOR_FIELD",
+ KEY_VALUE_FIELD = "KEY_VALUE_FIELD",
+ URL_FIELD = "URL_FIELD",
+ ALERT_TEXT_FIELD = "ALERT_TEXT_FIELD",
+ ALERT_TYPE_SELECTOR_FIELD = "ALERT_TYPE_SELECTOR_FIELD",
+ KEY_TEXT_FIELD = "KEY_TEXT_FIELD",
+ VALUE_TEXT_FIELD = "VALUE_TEXT_FIELD",
+ QUERY_PARAMS_FIELD = "QUERY_PARAMS_FIELD",
+ DOWNLOAD_DATA_FIELD = "DOWNLOAD_DATA_FIELD",
+ DOWNLOAD_FILE_NAME_FIELD = "DOWNLOAD_FILE_NAME_FIELD",
+ DOWNLOAD_FILE_TYPE_FIELD = "DOWNLOAD_FILE_TYPE_FIELD",
+ COPY_TEXT_FIELD = "COPY_TEXT_FIELD",
+ NAVIGATION_TARGET_FIELD = "NAVIGATION_TARGET_FIELD",
+ WIDGET_NAME_FIELD = "WIDGET_NAME_FIELD",
+ RESET_CHILDREN_FIELD = "RESET_CHILDREN_FIELD",
+ ARGUMENT_KEY_VALUE_FIELD = "ARGUMENT_KEY_VALUE_FIELD",
+ CALLBACK_FUNCTION_FIELD = "CALLBACK_FUNCTION_FIELD",
+ DELAY_FIELD = "DELAY_FIELD",
+ ID_FIELD = "ID_FIELD",
+ CLEAR_INTERVAL_ID_FIELD = "CLEAR_INTERVAL_ID_FIELD",
+}
 
 type FieldConfig = {
  getter: Function;
  setter: Function;
  view: ViewTypes;
 };
 
-type FieldConfigs = Record<FieldType, FieldConfig>;
+type FieldConfigs = Partial<Record<FieldType, FieldConfig>>;
 
 const fieldConfigs: FieldConfigs = {
  [FieldType.ACTION_SELECTOR_FIELD]: {
@@ -604,12 +604,21 @@ const fieldConfigs: FieldConfigs = {
  },
  view: ViewTypes.TEXT_VIEW,
  },
+ [FieldType.CLEAR_INTERVAL_ID_FIELD]: {
+ getter: (value: string) => {
+ return textGetter(value, 0);
+ },
+ setter: (value: string, currentValue: string) => {
+ return textSetter(value, currentValue, 0);
+ },
+ view: ViewTypes.TEXT_VIEW,
+ },
 };
 
 function renderField(props: {
  onValueChange: Function;
  value: string;
- field: any;
+ field: { field: FieldType; value: string; label: string; index: number };
  label?: string;
  widgetOptionTree: TreeDropdownOption[];
  modalDropdownList: TreeDropdownOption[];
@@ -622,6 +631,7 @@ function renderField(props: {
  const { field } = props;
  const fieldType = field.field;
  const fieldConfig = fieldConfigs[fieldType];
+ if (!fieldConfig) return;
  const view = views[fieldConfig.view];
  let viewElement: JSX.Element | null = null;
 
@@ -773,6 +783,7 @@ function renderField(props: {
  case FieldType.CALLBACK_FUNCTION_FIELD:
  case FieldType.DELAY_FIELD:
  case FieldType.ID_FIELD:
+ case FieldType.CLEAR_INTERVAL_ID_FIELD:
  let fieldLabel = "";
  if (fieldType === FieldType.ALERT_TEXT_FIELD) {
  fieldLabel = "Message";
@@ -796,6 +807,8 @@ function renderField(props: {
  fieldLabel = "Delay (ms)";
  } else if (fieldType === FieldType.ID_FIELD) {
  fieldLabel = "Id";
+ } else if (fieldType === FieldType.CLEAR_INTERVAL_ID_FIELD) {
+ fieldLabel = "Id";
  }
  viewElement = (view as (props: TextViewProps) => JSX.Element)({
  label: fieldLabel,