UX: add welcome banner page visibility setting (#34119)

yuriyaran · martin-brennan · web-flow · commit b0b7e836f204 · 2025-08-08T14:19:00.000+08:00
Enhances customizability of the core welcome banner by adding an Interface setting: *page visibility* to the core welcome banner. This allows us to replace [advanced search banner](https://meta.discourse.org/t/advanced-search-banner/122939). --------- Co-authored-by: Martin Brennan <martin@discourse.org>
diff --git a/app/assets/javascripts/discourse/app/components/welcome-banner.gjs b/app/assets/javascripts/discourse/app/components/welcome-banner.gjs
@@ -9,6 +9,7 @@ import SearchMenu from "discourse/components/search-menu";
 import bodyClass from "discourse/helpers/body-class";
 import concatClass from "discourse/helpers/concat-class";
 import { prioritizeNameFallback } from "discourse/lib/settings";
+import { defaultHomepage } from "discourse/lib/utilities";
 import I18n, { i18n } from "discourse-i18n";
 
 export default class WelcomeBanner extends Component {
@@ -49,11 +50,25 @@ export default class WelcomeBanner extends Component {
   });
 
   get displayForRoute() {
-    return this.siteSettings.top_menu
-      .split("|")
-      .any(
-        (menuItem) => `discovery.${menuItem}` === this.router.currentRouteName
-      );
+    switch (this.siteSettings.welcome_banner_page_visibility) {
+      case "top_menu_pages":
+        return this.siteSettings.top_menu
+          .split("|")
+          .any(
+            (menuItem) =>
+              `discovery.${menuItem}` === this.router.currentRouteName
+          );
+      case "homepage":
+        return (
+          this.router.currentRouteName === `discovery.${defaultHomepage()}`
+        );
+      case "discovery":
+        return this.router.currentRouteName.startsWith("discovery.");
+      case "all_pages":
+        return true;
+      default:
+        return false;
+    }
   }
 
   get headerText() {
@@ -91,7 +106,7 @@ export default class WelcomeBanner extends Component {
   }
 
   get locationClass() {
-    return `--${dasherize(this.siteSettings.welcome_banner_location)}`;
+    return `--location-${dasherize(this.siteSettings.welcome_banner_location)}`;
   }
 
   <template>
diff --git a/app/assets/javascripts/discourse/tests/integration/components/welcome-banner-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/welcome-banner-test.gjs
@@ -18,11 +18,11 @@ module(
     test("applies the welcome_banner_location CSS class", async function (assert) {
       this.siteSettings.welcome_banner_location = "above_topic_content";
       await render(<template><WelcomeBanner /></template>);
-      assert.dom(".welcome-banner.--above-topic-content").exists();
+      assert.dom(".welcome-banner.--location-above-topic-content").exists();
 
       this.siteSettings.welcome_banner_location = "below_site_header";
       await render(<template><WelcomeBanner /></template>);
-      assert.dom(".welcome-banner.--below-site-header").exists();
+      assert.dom(".welcome-banner.--location-below-site-header").exists();
     });
 
     test("shows the logged in user message with the user's username", async function (assert) {
diff --git a/app/models/welcome_banner_page_visibility.rb b/app/models/welcome_banner_page_visibility.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+require "enum_site_setting"
+
+class WelcomeBannerPageVisibility < EnumSiteSetting
+  def self.valid_value?(val)
+    values.any? { |v| v[:value].to_s == val.to_s }
+  end
+
+  def self.values
+    @values ||= [
+      { name: "welcome_banner_page_visibility.top_menu_pages", value: "top_menu_pages" },
+      { name: "welcome_banner_page_visibility.homepage", value: "homepage" },
+      { name: "welcome_banner_page_visibility.discovery", value: "discovery" },
+      { name: "welcome_banner_page_visibility.all_pages", value: "all_pages" },
+    ]
+  end
+
+  def self.translate_names?
+    true
+  end
+end
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
@@ -2785,6 +2785,11 @@ en:
     welcome_banner_location:
       above_topic_content: "Above topic content"
       below_site_header: "Below site header"
+    welcome_banner_page_visibility:
+      top_menu_pages: "Top menu pages"
+      homepage: "Homepage"
+      discovery: "Discovery"
+      all_pages: "All pages"
     composition_mode:
       markdown: "Markdown"
       rich: "Rich text"
diff --git a/config/locales/server.en.yml b/config/locales/server.en.yml
@@ -2718,6 +2718,7 @@ en:
     show_topic_map_in_topics_without_replies: "Shows the topic map even if the topic has no replies."
     enable_welcome_banner: "Display a banner on your main topic list pages to welcome members and allow them to search site content"
     welcome_banner_location: "Determines where on the page the welcome banner will appear."
+    welcome_banner_page_visibility: "Determines on which pages the welcome banner will appear."
 
     splash_screen: "Displays a temporary loading screen while site assets load"
     navigation_menu: "Specify sidebar or header dropdown as the main navigation menu for your site. Sidebar is recommended."
diff --git a/config/site_settings.yml b/config/site_settings.yml
@@ -3678,6 +3678,12 @@ uncategorized:
     default: "above_topic_content"
     area: "interface"
 
+  welcome_banner_page_visibility:
+    client: true
+    enum: "WelcomeBannerPageVisibility"
+    default: "top_menu_pages"
+    area: "interface"
+
 user_preferences:
   default_email_digest_frequency:
     enum: "DigestEmailSiteSetting"
diff --git a/spec/system/page_objects/components/welcome_banner.rb b/spec/system/page_objects/components/welcome_banner.rb
@@ -49,11 +49,11 @@ def has_logged_in_subheader?
       end
 
       def above_topic_content?
-        has_css?("#main-outlet > .--above-topic-content", visible: :visible)
+        has_css?("#main-outlet > .--location-above-topic-content", visible: :visible)
       end
 
       def below_site_header?
-        has_css?(".discourse-root > .--below-site-header", visible: :visible)
+        has_css?(".discourse-root > .--location-below-site-header", visible: :visible)
       end
     end
   end
diff --git a/spec/system/welcome_banner_spec.rb b/spec/system/welcome_banner_spec.rb
@@ -159,6 +159,59 @@
         expect(banner).to be_below_site_header
       end
     end
+
+    context "with interface page visibility setting" do
+      before { current_user.update!(admin: true) }
+
+      it "should show on all pages" do
+        SiteSetting.welcome_banner_page_visibility = "all_pages"
+
+        visit "/"
+        expect(banner).to be_visible
+        sign_in(current_user)
+        %W[/ /u/#{current_user.username}/preferences/emails /my/messages].each do |path|
+          visit path
+          expect(banner).to be_visible
+        end
+      end
+
+      it "should show on discovery routes only" do
+        sign_in(current_user)
+        SiteSetting.welcome_banner_page_visibility = "discovery"
+
+        visit "/filter?q=tag%3Ain-progress"
+        expect(banner).to be_visible
+
+        visit "/upcoming-events?view=month"
+        expect(banner).to be_hidden
+      end
+
+      it "should show on top menu pages only" do
+        sign_in(current_user)
+        SiteSetting.welcome_banner_page_visibility = "top_menu_pages"
+        SiteSetting
+          .top_menu
+          .split("|")
+          .each do |route|
+            visit "/#{route}"
+            expect(banner).to be_visible
+          end
+
+        visit "/my/posts"
+        expect(banner).to be_hidden
+      end
+
+      it "should show on homepage only" do
+        SiteSetting.welcome_banner_page_visibility = "homepage"
+
+        visit "/"
+        expect(banner).to be_visible
+
+        sign_in(current_user)
+        visit "/new"
+        expect(banner).to be_hidden
+      end
+    end
   end
 
   context "when disabled" do
diff --git a/themes/horizon/scss/welcome-banner.scss b/themes/horizon/scss/welcome-banner.scss
@@ -1,7 +1,7 @@
 @use "lib/viewport";
 
 .welcome-banner {
-  &.--below-site-header {
+  &.--location-below-site-header {
     background-color: var(--background-color);
     border-radius: 0;
 
@@ -37,7 +37,7 @@
       margin-top: 0;
     }
 
-    .--below-site-header & {
+    .--location-below-site-header & {
       border-bottom: 0;
       padding: var(--space-4) var(--space-4) var(--space-8);
 
@@ -50,7 +50,7 @@
       }
     }
 
-    .--above-topic-content & {
+    .--location-above-topic-content & {
       @container (width <= 800px) {
         flex-direction: column;
         gap: var(--space-4);
@@ -65,7 +65,7 @@
       width: 100%;
       align-self: center;
 
-      .--above-topic-content & {
+      .--location-above-topic-content & {
         @container (width >= 800px) {
           width: 50cqw;
         }
@@ -113,7 +113,7 @@
     margin: 0;
     color: var(--search-color);
 
-    .--above-topic-content & {
+    .--location-above-topic-content & {
       @container (width >= 800px) {
         flex-grow: 1;
       }
