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.

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">

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",

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", {

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"));
+  });
 });

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"));
+  });
 });