DEV: Switch to new API to render into plugin outlet (#36)

Why this change?

The `renderInOutlet` plugin API was introduced in Discourse core which
we will prefer to use going forward.

.discourse-compatibility

@@ -1,3 +1,4 @@
+< 3.2.0.beta2-dev: 2951c995fe669d87f157e5a1072fe548a98ae30e
 3.1.999: eeeb391c88bc2226070bf479b8c58e1275e46cd2
 3.1.0.beta2: a950a7fec2dafc77a54420034d6615400dd3fb7a
 2.9.0.beta3: c3a26b198d64050dfc1553bb364a5e1769145101

javascripts/discourse/api-initializers/init-search-banner.js

@@ -3,8 +3,16 @@ import { logSearchLinkClick } from "discourse/lib/search";
 import { iconNode } from "discourse-common/lib/icon-library";
 import { h } from "virtual-dom";
 import I18n from "I18n";
+import SearchBanner from "../components/search-banner";
+
+export default apiInitializer("1.14.0", (api) => {
+  api.renderInOutlet(
+    settings.plugin_outlet === "above-main-container"
+      ? "above-main-container"
+      : "below-site-header",
+    SearchBanner
+  );
 
-export default apiInitializer("0.8", (api) => {
   // Simplified version of header search theme component
   const searchMenuWidget = api.container.factoryFor("widget:search-menu");
   const corePanelContents = searchMenuWidget.class.prototype["panelContents"];

javascripts/search-banner/templates/connectors/above-main-container/search-banner.hbs

@@ -1,3 +0,0 @@
-{{#if (eq (theme-setting "plugin_outlet") "above-main-container")}}
-  <SearchBanner />
-{{/if}}

javascripts/search-banner/templates/connectors/below-site-header/search-banner.hbs

@@ -1,3 +0,0 @@
-{{#if (eq (theme-setting "plugin_outlet") "below-site-header")}}
-  <SearchBanner />
-{{/if}}

spec/system/viewing_search_banner_spec.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+RSpec.describe "Viewing the search banner", type: :system do
+  fab!(:theme) { upload_theme_component }
+
+  it "should display the search banner below the site header when `plugin_outlet` theme setting is set to `below-site-header`" do
+    theme.update_setting(:plugin_outlet, "below-site-header")
+    theme.save!
+
+    visit("/")
+
+    expect(page).to have_css(".custom-search-banner")
+    expect(page).to_not have_css("#main-outlet .custom-search-banner")
+  end
+
+  it "should display the search banner above the main container when `plugin_outlet` theme setting is set to `above-main-container`" do
+    theme.update_setting(:plugin_outlet, "above-main-container")
+    theme.save!
+
+    visit("/")
+
+    expect(page).to have_css("#main-outlet .custom-search-banner")
+  end
+end