From 8805a34001b2808ab30ca4a049df95435055a54c Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:56:21 -0700
Subject: [PATCH] DEV: Add before / after header-buttons plugin outlets
 (#25887)

---
 .../app/components/glimmer-header.gjs         | 23 +++++++++++++------
 .../glimmer-header/auth-buttons.gjs           |  2 +-
 .../discourse/app/widgets/header.js           | 19 +++++++++++++--
 .../stylesheets/common/base/header.scss       |  4 ++++
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/glimmer-header.gjs b/app/assets/javascripts/discourse/app/components/glimmer-header.gjs
index 9573233f960..344c8b4aa1d 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-header.gjs
+++ b/app/assets/javascripts/discourse/app/components/glimmer-header.gjs
@@ -17,6 +17,7 @@ import HamburgerDropdownWrapper from "./glimmer-header/hamburger-dropdown-wrappe
 import Icons from "./glimmer-header/icons";
 import SearchMenuWrapper from "./glimmer-header/search-menu-wrapper";
 import UserMenuWrapper from "./glimmer-header/user-menu-wrapper";
+import PluginOutlet from "./plugin-outlet";
 
 const SEARCH_BUTTON_ID = "search-button";
 
@@ -177,13 +178,21 @@ export default class GlimmerHeader extends Component {
           @toggleHamburger={{this.toggleHamburger}}
           @showSidebar={{@showSidebar}}
         >
-          {{#unless this.currentUser}}
-            <AuthButtons
-              @showCreateAccount={{@showCreateAccount}}
-              @showLogin={{@showLogin}}
-              @canSignUp={{@canSignUp}}
-            />
-          {{/unless}}
+
+          <span class="header-buttons">
+            <PluginOutlet @name="before-header-buttons" />
+
+            {{#unless this.currentUser}}
+              <AuthButtons
+                @showCreateAccount={{@showCreateAccount}}
+                @showLogin={{@showLogin}}
+                @canSignUp={{@canSignUp}}
+              />
+            {{/unless}}
+
+            <PluginOutlet @name="after-header-buttons" />
+          </span>
+
           {{#if
             (not (and this.siteSettings.login_required (not this.currentUser)))
           }}
diff --git a/app/assets/javascripts/discourse/app/components/glimmer-header/auth-buttons.gjs b/app/assets/javascripts/discourse/app/components/glimmer-header/auth-buttons.gjs
index 2de9f1130e6..35fde3a9312 100644
--- a/app/assets/javascripts/discourse/app/components/glimmer-header/auth-buttons.gjs
+++ b/app/assets/javascripts/discourse/app/components/glimmer-header/auth-buttons.gjs
@@ -8,7 +8,7 @@ export default class AuthButtons extends Component {
   @service header;
 
   <template>
-    <span class="header-buttons">
+    <span class="auth-buttons">
       {{#if (and @canSignUp (not this.header.topic))}}
         <DButton
           class="btn-primary btn-small sign-up-button"
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index 22c90ebdc7b..85700c9becf 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -300,7 +300,7 @@ createWidget("header-icons", {
 });
 
 createWidget("header-buttons", {
-  tagName: "span.header-buttons",
+  tagName: "span.auth-buttons",
 
   html(attrs) {
     if (this.currentUser) {
@@ -535,7 +535,22 @@ export default createWidget("header", {
         return headerIcons;
       }
 
-      const panels = [this.attach("header-buttons", attrs), headerIcons];
+      const panels = [
+        h("span.header-buttons", [
+          new RenderGlimmer(
+            this,
+            "span.before-header-buttons",
+            hbs`<PluginOutlet @name="before-header-buttons"/>`
+          ),
+          this.attach("header-buttons", attrs),
+          new RenderGlimmer(
+            this,
+            "span.after-header-buttons",
+            hbs`<PluginOutlet @name="after-header-buttons"/>`
+          ),
+        ]),
+        headerIcons,
+      ];
 
       if (this.search.visible) {
         this.search.inTopicContext = this.search.inTopicContext && inTopicRoute;
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 34b27ec6679..f831dfe0e67 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -106,6 +106,10 @@
     align-items: center;
     margin-top: 0.2em;
     white-space: nowrap;
+
+    .auth-buttons {
+      display: flex;
+    }
   }
 
   .login-button,