From dd1a14ac6cdb3e11f20068a27f07cf1d250d1e29 Mon Sep 17 00:00:00 2001
From: David Taylor <david@taylorhq.com>
Date: Wed, 20 Mar 2024 17:00:55 +0000
Subject: [PATCH] DEV: Support new header button/icon ordering APIs on widget
 header (#26264)

---
 .../discourse/app/widgets/header.js           | 89 ++++++++++---------
 1 file changed, 45 insertions(+), 44 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index 1fb79609c9e..ae82abe6a5a 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -240,7 +240,7 @@ createWidget("header-icons", {
   init() {
     registerWidgetShim(
       "extra-icon",
-      "div.wrapper",
+      "span.wrapper",
       hbs`<LegacyHeaderIconShim @component={{@data.component}} />`
     );
   },
@@ -253,49 +253,48 @@ createWidget("header-icons", {
     const icons = [];
 
     const resolvedIcons = _extraHeaderIcons.resolve();
+
     resolvedIcons.forEach((icon) => {
-      if (["search", "user-menu", "hamburger"].includes(icon.key)) {
-        return;
+      if (icon.key === "search") {
+        icons.push(
+          this.attach("header-dropdown", {
+            title: "search.title",
+            icon: "search",
+            iconId: SEARCH_BUTTON_ID,
+            action: "toggleSearchMenu",
+            active: this.search.visible,
+            href: getURL("/search"),
+            classNames: ["search-dropdown"],
+          })
+        );
+      } else if (icon.key === "user-menu" && attrs.user) {
+        icons.push(
+          this.attach("user-dropdown", {
+            active: attrs.userVisible,
+            action: "toggleUserMenu",
+            user: attrs.user,
+          })
+        );
+      } else if (
+        icon.key === "hamburger" &&
+        (!attrs.sidebarEnabled || this.site.mobileView)
+      ) {
+        icons.push(
+          this.attach("header-dropdown", {
+            title: "hamburger_menu",
+            icon: "bars",
+            iconId: "toggle-hamburger-menu",
+            active: attrs.hamburgerVisible,
+            action: "toggleHamburger",
+            href: "",
+            classNames: ["hamburger-dropdown"],
+          })
+        );
+      } else {
+        icons.push(this.attach("extra-icon", { component: icon.value }));
       }
-      icons.push(this.attach("extra-icon", { component: icon.value }));
     });
 
-    const search = this.attach("header-dropdown", {
-      title: "search.title",
-      icon: "search",
-      iconId: SEARCH_BUTTON_ID,
-      action: "toggleSearchMenu",
-      active: this.search.visible,
-      href: getURL("/search"),
-      classNames: ["search-dropdown"],
-    });
-
-    icons.push(search);
-
-    const hamburger = this.attach("header-dropdown", {
-      title: "hamburger_menu",
-      icon: "bars",
-      iconId: "toggle-hamburger-menu",
-      active: attrs.hamburgerVisible,
-      action: "toggleHamburger",
-      href: "",
-      classNames: ["hamburger-dropdown"],
-    });
-
-    if (!attrs.sidebarEnabled || this.site.mobileView) {
-      icons.push(hamburger);
-    }
-
-    if (attrs.user) {
-      icons.push(
-        this.attach("user-dropdown", {
-          active: attrs.userVisible,
-          action: "toggleUserMenu",
-          user: attrs.user,
-        })
-      );
-    }
-
     return icons;
   },
 });
@@ -496,7 +495,11 @@ export default createWidget("header", {
   services: ["router", "search"],
 
   init() {
-    registerWidgetShim("extra-button", "div.wrapper", hbs`<@data.component />`);
+    registerWidgetShim(
+      "extra-button",
+      "span.wrapper",
+      hbs`<@data.component />`
+    );
   },
 
   defaultState() {
@@ -538,13 +541,11 @@ export default createWidget("header", {
       const resolvedButtons = _extraHeaderButtons.resolve();
       resolvedButtons.forEach((button) => {
         if (button.key === "auth") {
-          return;
+          buttons.push(this.attach("header-buttons", attrs));
         }
         buttons.push(this.attach("extra-button", { component: button.value }));
       });
 
-      buttons.push(this.attach("header-buttons", attrs));
-
       const panels = [];
       panels.push(h("span.header-buttons", buttons), headerIcons);