feat: [APPSMTH-29] make step up/down arrows in input Number and Currency widgets optional

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/CurrencyInput/CurrencyInput_ShowStepArrows_spec.js

@@ -0,0 +1,38 @@
+const widgetsPage = require("../../../../../locators/Widgets.json");
+
+const widgetName = "currencyinputwidget";
+
+describe("Currency Widget showStepArrows Functionality - ", function() {
+  it("1. Validate that For new currency input widgets being dragged, the value for showStepArrows should be set to false", () => {
+    cy.dragAndDropToCanvas(widgetName, { x: 300, y: 400 });
+    cy.openPropertyPane(widgetName);
+
+    cy.get(widgetsPage.showStepArrowsToggleCheckBox).should("not.be.checked");
+
+    cy.get(widgetsPage.inputStepArrows).should("not.exist"); // This is the step arrows
+  });
+
+  it("2. Validate that currency input widget, stepArrows should be visible when showStepArrows is set to true", () => {
+    // Enable showStepArrows to true
+    cy.togglebar(widgetsPage.showStepArrowsToggleCheckBox);
+
+    cy.get(widgetsPage.inputStepArrows).should("exist"); // step arrows should be visible
+  });
+
+  it("3. Toggle test case to validate that currency input widget, stepArrows should be hidden when toggle value is false", () => {
+    // click on the Js
+    cy.get(widgetsPage.toggleShowStepArrows).click({ force: true });
+
+    // Add showStepArrows action and value as false
+    cy.testJsontext("showsteparrows", `{{false}}`);
+
+    cy.get(widgetsPage.inputStepArrows).should("not.exist"); // step arrows should not be visible
+  });
+
+  it("4. Toggle test case to validate that currency input widget, stepArrows should be visible when toggle value is true", () => {
+    // Add showStepArrows action and value as true
+    cy.testJsontext("showsteparrows", `{{true}}`);
+
+    cy.get(widgetsPage.inputStepArrows).should("exist"); // step arrows should be visible
+  });
+});

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Inputv2_ShowStepArrows_spec.js

@@ -0,0 +1,40 @@
+const widgetsPage = require("../../../../../locators/Widgets.json");
+
+const widgetName = "inputwidgetv2";
+
+describe("Input Widget V2 showStepArrows Functionality - ", function() {
+  it("1. Validate that dataType - NUMBER, For new widgets being dragged, the value for showStepArrows should be set to false", () => {
+    cy.dragAndDropToCanvas(widgetName, { x: 300, y: 400 });
+    cy.openPropertyPane(widgetName);
+
+    cy.selectDropdownValue(widgetsPage.inputPropsDataType, "Number");
+
+    cy.get(widgetsPage.showStepArrowsToggleCheckBox).should("not.be.checked");
+
+    cy.get(widgetsPage.inputStepArrows).should("not.exist"); // This is the step arrows
+  });
+
+  it("2. Validate that dataType - NUMBER, stepArrows should be visible when showStepArrows is set to true", () => {
+    // Enable showStepArrows to true
+    cy.togglebar(widgetsPage.showStepArrowsToggleCheckBox);
+
+    cy.get(widgetsPage.inputStepArrows).should("exist"); // step arrows should be visible
+  });
+
+  it("3. Toggle test case to validate that dataType - NUMBER, stepArrows should be hidden when toggle value is false", () => {
+    // click on the Js
+    cy.get(widgetsPage.toggleShowStepArrows).click({ force: true });
+
+    // Add showStepArrows action and value as false
+    cy.testJsontext("showsteparrows", `{{false}}`);
+
+    cy.get(widgetsPage.inputStepArrows).should("not.exist"); // step arrows should not be visible
+  });
+
+  it("4. Toggle test case to validate that dataType - NUMBER, stepArrows should be visible when toggle value is true", () => {
+    // Add showStepArrows action and add value as true
+    cy.testJsontext("showsteparrows", `{{true}}`);
+
+    cy.get(widgetsPage.inputStepArrows).should("exist"); // step arrows should be visible
+  });
+});

app/client/cypress/locators/Widgets.json

@@ -4,6 +4,7 @@
     "inputWidget": ".t--draggable-inputwidgetv2",
     "multiSelectWidget": ".t--draggable-multiselectwidgetv2",
     "togglebutton": "input[type='checkbox']",
+    "showStepArrowsToggleCheckBox": ".t--property-control-showsteparrows input[type='checkbox']",
     "inputPropsDataType": ".t--property-control-datatype",
     "inputdatatypeplaceholder": ".t--property-control-placeholder",
     "buttonWidget": ".t--draggable-buttonwidget",
@@ -98,6 +99,7 @@
     "boadercolorPicker": ".t--property-control-bordercolour input",
     "boxShadowColorPicker": ".t--property-control-shadowcolor input",
     "boxShadow": ".t--property-control-boxshadow .bp3-button-group",
+    "inputStepArrows": ".bp3-button-group",
     "backgroundcolorPicker": ".t--property-control-backgroundcolour input",
     "backgroundcolorPickerNew": ".t--property-control-backgroundcolor input",
     "greenColorHex": "#03b365",
@@ -154,6 +156,7 @@
     "listWidgetName":".t--property-pane-title",
     "toggleBackground": ".t--property-control-background .t--js-toggle",
     "toggleItemBackground": ".t--property-control-itembackground .t--js-toggle",
+    "toggleShowStepArrows": ".t--property-control-showsteparrows .t--js-toggle",
     "chartPlotGroup": "g.raphael-group-63-plot-group",
     "toggleEnableMultirowselection": ".t--property-control-enablemulti-rowselection .bp3-control-indicator",
     "toggleEnableMultirowselection_tablev1": ".t--property-control-enablemultirowselection .bp3-control-indicator",

app/client/src/constants/WidgetConstants.tsx

@@ -70,7 +70,7 @@ export const layoutConfigurations: LayoutConfigurations = {
   FLUID: { minWidth: -1, maxWidth: -1 },
 };
 
-export const LATEST_PAGE_VERSION = 71;
+export const LATEST_PAGE_VERSION = 72;
 
 export const GridDefaults = {
   DEFAULT_CELL_SIZE: 1,

app/client/src/utils/DSLMigration.test.ts

@@ -691,6 +691,15 @@ const migrations: Migration[] = [
     ],
     version: 70,
   },
+  {
+    functionLookup: [
+      {
+        moduleObj: inputCurrencyMigration,
+        functionName: "migrateInputWidgetShowStepArrows",
+      },
+    ],
+    version: 71,
+  },
 ];
 
 const mockFnObj: Record<number, any> = {};

app/client/src/utils/DSLMigrations.ts

@@ -61,7 +61,10 @@ import {
   migratePhoneInputWidgetAllowFormatting,
   migratePhoneInputWidgetDefaultDialCode,
 } from "./migrations/PhoneInputWidgetMigrations";
-import { migrateCurrencyInputWidgetDefaultCurrencyCode } from "./migrations/CurrencyInputWidgetMigrations";
+import {
+  migrateCurrencyInputWidgetDefaultCurrencyCode,
+  migrateInputWidgetShowStepArrows,
+} from "./migrations/CurrencyInputWidgetMigrations";
 import { migrateRadioGroupAlignmentProperty } from "./migrations/RadioGroupWidget";
 import { migrateCheckboxSwitchProperty } from "./migrations/PropertyPaneMigrations";
 import { migrateChartWidgetReskinningData } from "./migrations/ChartWidgetReskinningMigrations";
@@ -1133,6 +1136,11 @@ export const transformDSL = (currentDSL: DSLWidget, newPage = false) => {
 
   if (currentDSL.version === 70) {
     currentDSL = migrateChildStylesheetFromDynamicBindingPathList(currentDSL);
+    currentDSL.version = 71;
+  }
+
+  if (currentDSL.version === 71) {
+    currentDSL = migrateInputWidgetShowStepArrows(currentDSL);
     currentDSL.version = LATEST_PAGE_VERSION;
   }