From c7821259851b6f55ace840e52bb7f9d29c110787 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Thu, 1 Sep 2022 12:22:41 +0100
Subject: [PATCH] UX: Close the revamped user menu when opening modals (#18148)

When opening the DnD modal and the User Status modal, user menu remained open, this fixes it.
---
 .../discourse/app/components/user-menu/menu.hbs       |  2 +-
 .../app/components/user-menu/profile-tab-content.js   |  2 ++
 .../javascripts/discourse/app/widgets/header.js       | 11 +++++++++--
 .../discourse/tests/acceptance/do-not-disturb-test.js | 11 +++++++++++
 .../discourse/tests/acceptance/user-status-test.js    | 11 +++++++++++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs b/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs
index aa5d2624a38..ac8795a3a92 100644
--- a/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-menu/menu.hbs
@@ -6,7 +6,7 @@
         class="quick-access-panel"
         tabindex="-1"
         aria-labelledby={{concat "user-menu-button-" this.currentTabId}}>
-        {{component this.currentPanelComponent}}
+        {{component this.currentPanelComponent closeUserMenu=@closeUserMenu}}
       </div>
       <div class="menu-tabs-container" role="tablist" aria-orientation="vertical" aria-label={{i18n "user_menu.sr_menu_tabs"}}>
         <div class="top-tabs tabs-list">
diff --git a/app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js b/app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js
index 661fcb891f4..92fb185c29d 100644
--- a/app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js
+++ b/app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js
@@ -48,12 +48,14 @@ export default class UserMenuProfileTabContent extends Component {
       });
     } else {
       this.saving = false;
+      this.args.closeUserMenu();
       showModal("do-not-disturb");
     }
   }
 
   @action
   setUserStatusClick() {
+    this.args.closeUserMenu();
     showModal("user-status", {
       title: "user_status.set_custom_status",
       modalClass: "user-status",
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index 5a160aab453..4d13b23df47 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -407,14 +407,21 @@ createWidget("revamped-user-menu-wrapper", {
       new RenderGlimmer(
         this,
         "div.widget-component-connector",
-        hbs`<UserMenu::Menu />`
+        hbs`<UserMenu::Menu @closeUserMenu={{@data.closeUserMenu}} />`,
+        {
+          closeUserMenu: this.closeUserMenu.bind(this),
+        }
       ),
     ];
   },
 
-  clickOutside() {
+  closeUserMenu() {
     this.sendWidgetAction("toggleUserMenu");
   },
+
+  clickOutside() {
+    this.closeUserMenu();
+  },
 });
 
 export default createWidget("header", {
diff --git a/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js b/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
index b9c6ae37121..e96f21f77de 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
@@ -209,4 +209,15 @@ acceptance("Do not disturb - new user menu", function (needs) {
       "the Do Not Disturb button has the toggle-off icon"
     );
   });
+
+  test("user menu gets closed when the DnD modal is opened", async function (assert) {
+    this.siteSettings.enable_user_status = true;
+
+    await visit("/");
+    await click(".header-dropdown-toggle.current-user");
+    await click("#user-menu-button-profile");
+    await click("#quick-access-profile .do-not-disturb .btn");
+
+    assert.notOk(exists(".user-menu"));
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-status-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-status-test.js
index 628f6a06335..ccef190ca1e 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/user-status-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/user-status-test.js
@@ -423,4 +423,15 @@ acceptance("User Status - new user menu", function (needs) {
       "shows user status emoji on the user avatar in the header"
     );
   });
+
+  test("user menu gets closed when the user status modal is opened", async function (assert) {
+    this.siteSettings.enable_user_status = true;
+
+    await visit("/");
+    await click(".header-dropdown-toggle.current-user");
+    await click("#user-menu-button-profile");
+    await click(".set-user-status button");
+
+    assert.notOk(exists(".user-menu"));
+  });
 });