FEATURE: Add welcome banner to core (#31516)

This is a stripped-back version of the Search Banner
component https://meta.discourse.org/t/search-banner/122939,
which will be renamed to Advanced Search Banner,
see discourse/discourse-search-banner#84.

This welcome banner interacts with the header search.
When `search_experience` is set to `search_field`, we only
show the header search after the welcome banner scrolls
out of view, and vice-versa.

Only new sites will get this feature turned on by default,
existing sites have a migration to disable it.

---------

Co-authored-by: Joffrey JAFFEUX <[email protected]>
Co-authored-by: Jordan Vidrine <[email protected]>

Author: 3 people

app/assets/javascripts/discourse/app/components/header/header-search.gjs

@@ -29,7 +29,7 @@ export default class HeaderSearch extends Component {
 
   <template>
     {{#if this.shouldDisplay}}
-      {{bodyClass "header-search--visible"}}
+      {{bodyClass "header-search--enabled"}}
       <div
         class="floating-search-input-wrapper"
         {{this.handleKeyboardShortcut}}
@@ -46,7 +46,7 @@ export default class HeaderSearch extends Component {
                   @href={{this.advancedSearchButtonHref}}
                 />
 
-                <SearchMenu />
+                <SearchMenu @location="header" />
               </div>
             </div>
           </div>

app/assets/javascripts/discourse/app/components/search-menu-panel.gjs

@@ -21,6 +21,7 @@ export default class SearchMenuPanel extends Component {
         @onClose={{@closeSearchMenu}}
         @inlineResults={{true}}
         @autofocusInput={{true}}
+        @location="header"
       />
     </MenuPanel>
   </template>

app/assets/javascripts/discourse/app/components/search-menu.gjs

@@ -1,6 +1,6 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { hash } from "@ember/helper";
+import { concat, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
@@ -14,6 +14,7 @@ import AdvancedButton from "discourse/components/search-menu/advanced-button";
 import ClearButton from "discourse/components/search-menu/clear-button";
 import Results from "discourse/components/search-menu/results";
 import SearchTerm from "discourse/components/search-menu/search-term";
+import concatClass from "discourse/helpers/concat-class";
 import loadingSpinner from "discourse/helpers/loading-spinner";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { CANCELLED_STATUS } from "discourse/lib/autocomplete";
@@ -392,7 +393,9 @@ export default class SearchMenu extends Component {
       {{! template-lint-disable no-invalid-interactive }}
       {{on "keydown" this.onKeydown}}
     >
-      <div class="search-input">
+      <div
+        class={{concatClass "search-input" (concat "search-input--" @location)}}
+      >
         {{#if this.search.inTopicContext}}
           <DButton
             @icon="xmark"

app/assets/javascripts/discourse/app/components/welcome-banner.gjs

@@ -0,0 +1,90 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import { modifier } from "ember-modifier";
+import DButton from "discourse/components/d-button";
+import PluginOutlet from "discourse/components/plugin-outlet";
+import SearchMenu from "discourse/components/search-menu";
+import bodyClass from "discourse/helpers/body-class";
+import { prioritizeNameFallback } from "discourse/lib/settings";
+import { i18n } from "discourse-i18n";
+
+export default class WelcomeBanner extends Component {
+  @service router;
+  @service siteSettings;
+  @service currentUser;
+
+  @tracked inViewport = true;
+
+  checkViewport = modifier((element) => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        this.inViewport = entry.isIntersecting;
+      },
+      { threshold: 1.0 }
+    );
+
+    observer.observe(element);
+
+    return () => observer.disconnect();
+  });
+
+  get displayForRoute() {
+    return this.siteSettings.top_menu
+      .split("|")
+      .any(
+        (menuItem) => `discovery.${menuItem}` === this.router.currentRouteName
+      );
+  }
+
+  get headerText() {
+    if (!this.currentUser) {
+      return i18n("welcome_banner.header.anonymous_members", {
+        site_name: this.siteSettings.title,
+      });
+    }
+
+    return i18n("welcome_banner.header.logged_in_members", {
+      preferred_display_name: prioritizeNameFallback(
+        this.currentUser.name,
+        this.currentUser.username
+      ),
+    });
+  }
+
+  get shouldDisplay() {
+    if (!this.siteSettings.enable_welcome_banner) {
+      return false;
+    }
+
+    return this.displayForRoute;
+  }
+
+  <template>
+    {{#if this.shouldDisplay}}
+      {{#if this.inViewport}}
+        {{bodyClass "welcome-banner--visible"}}
+      {{/if}}
+
+      <div class="welcome-banner" {{this.checkViewport}}>
+        <div class="custom-search-banner welcome-banner__inner-wrapper">
+          <div class="custom-search-banner-wrap welcome-banner__wrap">
+            <h1 class="welcome-banner__title">{{htmlSafe this.headerText}}</h1>
+            <PluginOutlet @name="welcome-banner-below-headline" />
+            <div class="search-menu welcome-banner__search-menu">
+              <DButton
+                @icon="magnifying-glass"
+                @title="search.open_advanced"
+                @href="/search?expanded=true"
+                class="search-icon"
+              />
+              <SearchMenu @location="welcome-banner" />
+            </div>
+            <PluginOutlet @name="welcome-banner-below-input" />
+          </div>
+        </div>
+      </div>
+    {{/if}}
+  </template>
+}

app/assets/javascripts/discourse/app/templates/application.gjs

@@ -25,6 +25,7 @@ import RenderGlimmerContainer from "discourse/components/render-glimmer-containe
 import Sidebar from "discourse/components/sidebar";
 import SoftwareUpdatePrompt from "discourse/components/software-update-prompt";
 import TopicEntrance from "discourse/components/topic-entrance";
+import WelcomeBanner from "discourse/components/welcome-banner";
 import routeAction from "discourse/helpers/route-action";
 import { i18n } from "discourse-i18n";
 import DMenus from "float-kit/components/d-menus";
@@ -90,6 +91,9 @@ export default RouteTemplate(
 
         <div id="main-outlet">
           <PluginOutlet @name="above-main-container" @connectorTagName="div" />
+
+          <WelcomeBanner />
+
           <div class="container" id="main-container">
             {{#if @controller.showTop}}
               <CustomHtml @name="top" />

app/assets/javascripts/discourse/tests/acceptance/search-test.js

@@ -98,16 +98,16 @@ acceptance("Search - Anonymous", function (needs) {
     await visit("/");
 
     await click("#search-button");
-    assert.dom(".search-menu").exists();
+    assert.dom(".search-menu-panel").exists();
 
     await clickOutside();
-    assert.dom(".search-menu").doesNotExist();
+    assert.dom(".search-menu-panel").doesNotExist();
 
     await click("#search-button");
-    assert.dom(".search-menu").exists();
+    assert.dom(".search-menu-panel").exists();
 
     await click("#search-button"); // toggle same button
-    assert.dom(".search-menu").doesNotExist();
+    assert.dom(".search-menu-panel").doesNotExist();
   });
 
   test("initial options", async function (assert) {
@@ -572,7 +572,9 @@ acceptance("Search - Authenticated", function (needs) {
     assert
       .dom("#search-button")
       .isFocused("Escaping search returns focus to search button");
-    assert.dom(".search-menu").doesNotExist("Esc removes search dropdown");
+    assert
+      .dom(".search-menu-panel")
+      .doesNotExist("Esc removes search dropdown");
 
     await click("#search-button");
     await triggerKeyEvent(document.activeElement, "keyup", "ArrowDown");

app/assets/javascripts/discourse/tests/integration/components/search-menu-test.gjs

@@ -29,7 +29,7 @@ module("Integration | Component | search-menu", function (hooks) {
       return response(searchFixtures["search/query"]);
     });
 
-    await render(<template><SearchMenu /></template>);
+    await render(<template><SearchMenu @location="test" /></template>);
 
     assert
       .dom(".show-advanced-search")
@@ -73,7 +73,7 @@ module("Integration | Component | search-menu", function (hooks) {
   test("clicking outside results hides and blurs input", async function (assert) {
     await render(
       <template>
-        <div id="click-me"><SearchMenu /></div>
+        <div id="click-me"><SearchMenu @location="test" /></div>
       </template>
     );
     await click("#search-term");

app/assets/stylesheets/common/components/_index.scss

@@ -62,3 +62,4 @@
 @import "emoji-picker";
 @import "filter-input";
 @import "dropdown-menu";
+@import "welcome-banner";

app/assets/stylesheets/common/components/welcome-banner.scss

@@ -0,0 +1,160 @@
+@import "common/foundation/mixins";
+
+.display-welcome-banner {
+  #main-outlet {
+    padding-top: 0;
+  }
+}
+
+.welcome-banner--visible.header-search--enabled {
+  .floating-search-input-wrapper {
+    display: none;
+  }
+}
+
+.welcome-banner {
+  margin-bottom: 1em;
+  border-radius: var(--d-border-radius-large);
+
+  &__search-menu {
+    .menu-panel-results .menu-panel.search-menu-panel {
+      position: unset;
+      padding: 0;
+    }
+  }
+
+  &__wrap {
+    box-sizing: border-box;
+    position: relative;
+    padding: 1.5em 0 3em;
+
+    @include breakpoint(tablet) {
+      padding: 1em 8px 1.25em;
+      margin-top: 0.5em;
+    }
+
+    > div {
+      margin: 0 auto;
+      max-width: 600px;
+    }
+
+    .search-menu {
+      display: flex;
+      position: relative;
+
+      .search-menu-container {
+        width: 100%;
+        min-width: 0;
+      }
+    }
+
+    .d-icon-search {
+      margin: 0;
+    }
+
+    .browser-search-tip {
+      display: none;
+    }
+
+    .search-input {
+      #search-term {
+        min-width: 0;
+        flex: 1 1;
+      }
+    }
+
+    h1 {
+      font-size: var(--font-up-6);
+      line-height: $line-height-medium;
+
+      @include breakpoint(tablet) {
+        font-size: var(--font-up-4);
+      }
+    }
+
+    h1,
+    p {
+      text-align: center;
+    }
+
+    .btn.search-icon {
+      z-index: 2;
+      background: transparent;
+      line-height: 1;
+      color: var(--primary-medium);
+      height: 100%;
+      position: absolute;
+      left: 0;
+
+      .rtl & {
+        right: 0;
+        left: unset;
+      }
+
+      .discourse-no-touch & {
+        &:hover {
+          background: transparent;
+          color: var(--primary);
+
+          .d-icon {
+            color: currentcolor;
+          }
+        }
+      }
+
+      + .search-menu-container .search-input {
+        padding-left: 1.75em;
+
+        .rtl & {
+          padding-left: unset;
+          padding-right: 1.75em;
+        }
+      }
+
+      + .search-menu-container .search-input .search-context {
+        margin-left: 4px;
+      }
+    }
+
+    .results {
+      box-sizing: border-box;
+      background: var(--secondary);
+      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+      position: absolute;
+      z-index: 9;
+      margin-left: auto;
+      margin-right: auto;
+      left: 0;
+      top: 2.75em;
+      right: 0;
+      padding: 0.5em;
+
+      @include breakpoint(mobile-extra-large) {
+        width: 100%;
+      }
+
+      ul,
+      ol {
+        list-style-type: none;
+        margin: 0;
+      }
+
+      .d-icon-search {
+        display: none;
+      }
+    }
+
+    .search-link .d-icon {
+      color: var(--primary-medium);
+    }
+
+    span.keyword {
+      color: var(--primary);
+    }
+  }
+}
+
+// hide search icon from default search menu
+.search-menu.glimmer-search-menu .search-icon {
+  display: none;
+}

app/assets/stylesheets/desktop/components/header-search.scss

@@ -1,4 +1,4 @@
-.header-search--visible,
+.header-search--enabled,
 .search-header--visible {
   .panel .header-dropdown-toggle.search-dropdown,
   .panel .search-menu {