FEATURE: add welcome topic cta banner (#17821)

app/assets/javascripts/discourse/app/components/welcome-topic-banner.js

@@ -0,0 +1,25 @@
+import GlimmerComponent from "discourse/components/glimmer";
+import { action } from "@ember/object";
+import { getOwner } from "discourse-common/lib/get-owner";
+import Topic from "discourse/models/topic";
+import Composer from "discourse/models/composer";
+
+export default class WelcomeTopicBanner extends GlimmerComponent {
+  @action
+  editWelcomeTopic() {
+    const topicController = getOwner(this).lookup("controller:topic");
+
+    Topic.find(this.siteSettings.welcome_topic_id, {}).then((topic) => {
+      this.store
+        .createRecord("topic", {
+          id: topic.id,
+          slug: topic.slug,
+        })
+        .postStream.loadPostByPostNumber(1)
+        .then((post) => {
+          post.topic.set("draft_key", Composer.EDIT);
+          topicController.send("editPost", post);
+        });
+    });
+  }
+}

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

@@ -24,6 +24,13 @@ const controllerOpts = {
   showTopicPostBadges: not("new"),
   redirectedReason: alias("currentUser.redirected_to_top.reason"),
 
+  @discourseComputed("model.filter", "site.show_welcome_topic_banner")
+  showEditWelcomeTopicBanner(filter, showWelcomeTopicBanner) {
+    return (
+      this.currentUser?.staff && filter === "latest" && showWelcomeTopicBanner
+    );
+  },
+
   expandGloballyPinned: false,
   expandAllPinned: false,
 

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

@@ -0,0 +1,9 @@
+<div class="welcome-topic-banner">
+  <div class="col-text">
+    <h1 class="title">{{i18n "welcome_topic_banner.title"}}</h1>
+    <p class="description">{{i18n "welcome_topic_banner.description"}}</p>
+  </div>
+  <div class="col-button">
+    <DButton @class="btn-primary welcome-topic-cta" @action={{action "editWelcomeTopic"}} @label="welcome_topic_banner.button_title" />
+  </div>
+</div>

app/assets/javascripts/discourse/app/templates/discovery/topics.hbs

@@ -2,6 +2,10 @@
   <div class="alert alert-info">{{this.redirectedReason}}</div>
 {{/if}}
 
+{{#if this.showEditWelcomeTopicBanner}}
+  <WelcomeTopicBanner />
+{{/if}}
+
 <TopicDismissButtons @position="top" @selectedTopics={{this.selected}} @model={{this.model}} @showResetNew={{this.showResetNew}} @showDismissRead={{this.showDismissRead}} @resetNew={{action "resetNew"}} />
 
 {{#if this.model.sharedDrafts}}

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

@@ -0,0 +1,17 @@
+import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+import { visit } from "@ember/test-helpers";
+
+acceptance("Welcome Topic Banner", function (needs) {
+  needs.user();
+  needs.site({ show_welcome_topic_banner: true });
+
+  test("Navigation", async function (assert) {
+    await visit("/");
+    assert.ok(exists(".welcome-topic-banner"), "has the welcome topic banner");
+    assert.ok(
+      exists("button.welcome-topic-cta"),
+      "has the welcome topic edit button"
+    );
+  });
+});