From b4c33fe050e30686e8a3cece9cc3514b03cc77ce Mon Sep 17 00:00:00 2001
From: Paul Li <82799722+wmdev0808@users.noreply.github.com>
Date: Wed, 9 Mar 2022 18:29:50 +0800
Subject: [PATCH] fix: Icon alignment changes automatically every time the icon
 is changed in Menu button widget (#11570)

* fix: Icon Alignment changes automatically every time when icon is changed in Menu Widget

-- Add iconAlign property as a dependency for iconName property

* fix: Icon Alignment changes automatically every time when icon is changed in Menu Widget

-- Add a Cypress test case to ensure the fix

* fix: Icon alignment changes automatically every time the icon is changed in Menu button widget

-- Fix on a broken Cypress test, setting force to true
---
 .../cypress/fixtures/menuButtonDsl.json       | 77 +++++++++++++++++++
 .../DisplayWidgets/MenuButton_spec.js         | 53 +++++++++++++
 .../widgets/MenuButtonWidget/widget/index.tsx |  1 +
 3 files changed, 131 insertions(+)
 create mode 100644 app/client/cypress/fixtures/menuButtonDsl.json
 create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/MenuButton_spec.js

diff --git a/app/client/cypress/fixtures/menuButtonDsl.json b/app/client/cypress/fixtures/menuButtonDsl.json
new file mode 100644
index 0000000000..1117387f6c
--- /dev/null
+++ b/app/client/cypress/fixtures/menuButtonDsl.json
@@ -0,0 +1,77 @@
+{
+  "dsl": {
+    "widgetName": "MainContainer",
+    "backgroundColor": "none",
+    "rightColumn": 909,
+    "snapColumns": 64,
+    "detachFromLayout": true,
+    "widgetId": "0",
+    "topRow": 0,
+    "bottomRow": 710,
+    "containerStyle": "none",
+    "snapRows": 125,
+    "parentRowSpace": 1,
+    "type": "CANVAS_WIDGET",
+    "canExtend": true,
+    "version": 53,
+    "minHeight": 690,
+    "parentColumnSpace": 1,
+    "dynamicBindingPathList": [],
+    "leftColumn": 0,
+    "children": [
+      {
+        "isCompact": false,
+        "widgetName": "MenuButton1",
+        "displayName": "Menu Button",
+        "iconSVG": "/static/media/icon.0341d17d.svg",
+        "topRow": 5,
+        "bottomRow": 9,
+        "parentRowSpace": 10,
+        "type": "MENU_BUTTON_WIDGET",
+        "hideCard": false,
+        "animateLoading": true,
+        "parentColumnSpace": 14.015625,
+        "leftColumn": 3,
+        "isDisabled": false,
+        "key": "ngk48zgyuy",
+        "rightColumn": 19,
+        "menuVariant": "PRIMARY",
+        "widgetId": "z2o5n9g9yw",
+        "menuItems": {
+          "menuItem1": {
+            "label": "First Menu Item",
+            "id": "menuItem1",
+            "widgetId": "",
+            "isVisible": true,
+            "isDisabled": false,
+            "index": 0
+          },
+          "menuItem2": {
+            "label": "Second Menu Item",
+            "id": "menuItem2",
+            "widgetId": "",
+            "isVisible": true,
+            "isDisabled": false,
+            "index": 1
+          },
+          "menuItem3": {
+            "label": "Third Menu Item",
+            "id": "menuItem3",
+            "widgetId": "",
+            "isVisible": true,
+            "isDisabled": false,
+            "index": 2
+          }
+        },
+        "isVisible": true,
+        "label": "Open Menu",
+        "version": 1,
+        "parentId": "0",
+        "renderMode": "CANVAS",
+        "isLoading": false,
+        "menuColor": "#03B365",
+        "placement": "CENTER"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/MenuButton_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/MenuButton_spec.js
new file mode 100644
index 0000000000..358908d666
--- /dev/null
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/MenuButton_spec.js
@@ -0,0 +1,53 @@
+const dsl = require("../../../../fixtures/menuButtonDsl.json");
+
+const widgetName = ".t--widget-menubuttonwidget";
+const iconAlignmentProperty = ".t--property-control-iconalignment";
+
+describe("Menu Button Widget Functionality", () => {
+  before(() => {
+    cy.addDsl(dsl);
+  });
+
+  it("Icon alignment should not change when changing the icon", () => {
+    cy.openPropertyPane("menubuttonwidget");
+    // Add an icon
+    cy.get(".t--property-control-icon .bp3-icon-caret-down").click({
+      force: true,
+    });
+    cy.get(".bp3-icon-add")
+      .first()
+      .click({
+        force: true,
+      });
+    // Assert if the icon exists
+    cy.get(`${widgetName} .bp3-icon-add`).should("exist");
+    // Change its icon alignment to right
+    cy.get(`${iconAlignmentProperty} .t--button-tab-right`)
+      .last()
+      .click({ force: true });
+    cy.wait(200);
+    // Assert if the icon appears on the right side of the button text
+    cy.get(`${widgetName}`)
+      .contains("Open Menu")
+      .children("span")
+      .should("have.length", 2);
+    cy.get(`${widgetName} span.bp3-button-text`)
+      .next()
+      .should("have.class", "bp3-icon-add");
+    // Change the existing icon
+    cy.get(".t--property-control-icon .bp3-icon-caret-down").click({
+      force: true,
+    });
+    cy.get(".bp3-icon-airplane")
+      .first()
+      .click({
+        force: true,
+      });
+    // Assert if the icon changes
+    // Assert if the icon still exists on the right side of the text
+    cy.get(`${widgetName} .bp3-icon-airplane`)
+      .should("exist")
+      .prev()
+      .should("have.text", "Open Menu");
+  });
+});
diff --git a/app/client/src/widgets/MenuButtonWidget/widget/index.tsx b/app/client/src/widgets/MenuButtonWidget/widget/index.tsx
index 5648cea856..197c9b8518 100644
--- a/app/client/src/widgets/MenuButtonWidget/widget/index.tsx
+++ b/app/client/src/widgets/MenuButtonWidget/widget/index.tsx
@@ -357,6 +357,7 @@ class MenuButtonWidget extends BaseWidget<MenuButtonWidgetProps, WidgetState> {
               }
               return propertiesToUpdate;
             },
+            dependencies: ["iconAlign"],
             validation: {
               type: ValidationTypes.TEXT,
             },