UX: Welcome CTA edits (#18582)

app/assets/javascripts/discourse/app/controllers/discovery/topics.js

@@ -24,10 +24,17 @@ const controllerOpts = {
   showTopicPostBadges: not("new"),
   redirectedReason: alias("currentUser.redirected_to_top.reason"),
 
-  @discourseComputed("model.filter", "site.show_welcome_topic_banner")
-  showEditWelcomeTopicBanner(filter, showWelcomeTopicBanner) {
+  @discourseComputed(
+    "model.filter",
+    "site.show_welcome_topic_banner",
+    "model.listParams.f"
+  )
+  showEditWelcomeTopicBanner(filter, showWelcomeTopicBanner, hasListParams) {
     return (
-      this.currentUser?.staff && filter === "latest" && showWelcomeTopicBanner
+      this.currentUser?.staff &&
+      filter === "latest" &&
+      showWelcomeTopicBanner &&
+      !hasListParams
     );
   },
 

app/assets/javascripts/discourse/app/templates/components/welcome-topic-banner.hbs

@@ -3,5 +3,5 @@
     <h1 class="welcome-cta__title">{{i18n "welcome_topic_banner.title"}}</h1>
     <p class="welcome-cta__description">{{i18n "welcome_topic_banner.description"}}</p>
   </div>
-  <DButton @class="btn-primary welcome-cta__button" @action={{action "editWelcomeTopic"}} @label="welcome_topic_banner.button_title" />
+  <DButton @class="btn-primary welcome-cta__button" @action={{action "editWelcomeTopic"}} @label="welcome_topic_banner.button_title" @icon="pencil-alt" />
 </div>

app/assets/javascripts/discourse/tests/acceptance/welcome-topic-banner-test.js

@@ -1,17 +1,66 @@
 import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
 import { visit } from "@ember/test-helpers";
+import Site from "discourse/models/site";
 
 acceptance("Welcome Topic Banner", function (needs) {
-  needs.user();
+  needs.user({ admin: true });
   needs.site({ show_welcome_topic_banner: true });
 
-  test("Navigation", async function (assert) {
-    await visit("/");
+  test("Is shown on latest", async function (assert) {
+    await visit("/latest");
     assert.ok(exists(".welcome-cta"), "has the welcome topic banner");
     assert.ok(
       exists("button.welcome-cta__button"),
       "has the welcome topic edit button"
     );
   });
+
+  test("Does not show if edited", async function (assert) {
+    const site = Site.current();
+    site.set("show_welcome_topic_banner", false);
+
+    await visit("/latest");
+    assert.ok(!exists(".welcome-cta"), "has the welcome topic banner");
+  });
+
+  test("Does not show on latest with query param tracked present", async function (assert) {
+    await visit("/latest?f=tracked");
+    assert.ok(
+      !exists(".welcome-cta"),
+      "does not have the welcome topic banner"
+    );
+  });
+
+  test("Does not show on latest with query param watched present", async function (assert) {
+    await visit("/latest?f=watched");
+    assert.ok(
+      !exists(".welcome-cta"),
+      "does not have the welcome topic banner"
+    );
+  });
+
+  test("Does not show on /categories page", async function (assert) {
+    await visit("/categories");
+    assert.ok(
+      !exists(".welcome-cta"),
+      "does not have the welcome topic banner"
+    );
+  });
+
+  test("Does not show on /top page", async function (assert) {
+    await visit("/top");
+    assert.ok(
+      !exists(".welcome-cta"),
+      "does not have the welcome topic banner"
+    );
+  });
+
+  test("Does not show on /unseen page", async function (assert) {
+    await visit("/unseen");
+    assert.ok(
+      !exists(".welcome-cta"),
+      "does not have the welcome topic banner"
+    );
+  });
 });

app/assets/stylesheets/desktop/topic-list.scss

@@ -262,14 +262,15 @@
 
 .welcome-cta {
   background-color: var(--secondary);
-  border: 1px solid var(--primary-low-mid);
-  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
+  border: 1px solid var(--primary-low);
+  box-shadow: shadow("menu-panel");
+  border-radius: 4px;
   padding: 12px 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   position: absolute;
-  top: 44px;
+  top: 48px;
   width: calc(100% - 40px);
   z-index: z("usercard");
   &__content {