DEV: Switch to new API to render into plugin outlet

.discourse-compatibility

@@ -1,2 +1,3 @@
-3.1.999: bd0594108a1cfd6c11cb8af218dba9b211b44015
+< 3.2.0.beta2-dev: 061adfe5ae20abbb82be711d373894c30987ec75
 < 3.2.0.beta1-dev: c344d0f519bbb3660e306c50c0d1aa1a776c5e13
+3.1.999: bd0594108a1cfd6c11cb8af218dba9b211b44015

javascripts/discourse/components/custom-header-links.hbs

@@ -1,7 +1,7 @@
 {{#if this.shouldShow}}
   <ul
     class="custom-header-links
-      {{if @scrolledTopic 'custom-header-links--hide-links'}}"
+      {{if @outletArgs.attrs.topic 'custom-header-links--hide-links'}}"
   >
     {{#each this.links as |link|}}
       <li

javascripts/discourse/initializers/discourse-custom-header-links.js

@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import CustomHeaderLinks from "../components/custom-header-links";
+
+export default apiInitializer("1.14.0", (api) => {
+  api.renderInOutlet("before-header-panel", CustomHeaderLinks);
+});

spec/system/page_objects/components/custom_header_link.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class CustomHeaderLink < PageObjects::Components::Base
+      CUSTOM_HEADER_LINKS_SELECTOR = ".before-header-panel-outlet .custom-header-links"
+
+      def visible?
+        has_css?(CUSTOM_HEADER_LINKS_SELECTOR)
+      end
+
+      def has_custom_header_link?(link_name, title:, href:)
+        expect(find(CUSTOM_HEADER_LINKS_SELECTOR)).to have_link(link_name, href:, title:)
+      end
+    end
+  end
+end

spec/system/viewing_custom_header_links_spec.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require_relative "page_objects/components/custom_header_link"
+
+RSpec.describe "Viewing Custom Header Links", system: true do
+  fab!(:theme) { upload_theme_component }
+  let!(:custom_header_link) { PageObjects::Components::CustomHeaderLink.new }
+
+  it "should display the custom header links" do
+    visit("/")
+
+    expect(custom_header_link).to be_visible
+
+    expect(custom_header_link).to have_custom_header_link(
+      "External link",
+      href: "https://meta.discourse.org",
+      title: "this link will open in a new tab",
+    )
+
+    expect(custom_header_link).to have_custom_header_link(
+      "Most Liked",
+      href: "/latest/?order=op_likes",
+      title: "Posts with the most amount of likes",
+    )
+
+    expect(custom_header_link).to have_custom_header_link(
+      "Privacy",
+      href: "/privacy",
+      title: "Our Privacy Policy",
+    )
+  end
+end