DEV: Update how we determine the presence of a topic in the header (#27138)

# Context

We currently have a tracked value of `topic` in the header service that we utilize across the app for determining the presence of a topic.

A simple example is: If you are in a topic, and scroll down the page, we need to communicate to the header that a topic is present and we change the styling of the header. 

The issue with this logic is that when entering a topic (and you are at the top of the page), we **haven't** set the topic on the header service yet. We only set the topic when you have scrolled down on the page (set by `app/components/discourse-topic.js`) 

This is unhelpful behavior when you are utilizing a plugin outlet that is receiving the `topic` from the header: 

17add599e3/app/assets/javascripts/discourse/app/components/header/topic/info.gjs (L85)

As the `topic` won't be present until you scroll down the page. 

# Changes

This PR adds a tracked `inTopic` value to the header service that is a boolean value. This is to let the app know

> Yes, we are scrolled within a topic

And instead sets the tracked `topic` value immediately, if you are loading a topic, to allow the necessary data to be populated to the plugin outlets on page load.
This commit is contained in:
Isaac Janzen 2024-05-28 07:16:18 -06:00 committed by GitHub
parent 531fc1d754
commit caa29ec973
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 10 additions and 6 deletions

View File

@ -56,7 +56,7 @@ export default Component.extend(Scrolling, MobileScrollDirection, {
_hideTopicInHeader() { _hideTopicInHeader() {
this.appEvents.trigger("header:hide-topic"); this.appEvents.trigger("header:hide-topic");
this.header.topic = null; this.header.inTopic = false;
this._lastShowTopic = false; this._lastShowTopic = false;
}, },
@ -65,7 +65,7 @@ export default Component.extend(Scrolling, MobileScrollDirection, {
return; return;
} }
this.appEvents.trigger("header:show-topic", topic); this.appEvents.trigger("header:show-topic", topic);
this.header.topic = topic; this.header.inTopic = true;
this._lastShowTopic = true; this._lastShowTopic = true;
}, },

View File

@ -242,7 +242,7 @@ export default class GlimmerHeader extends Component {
</div> </div>
<PluginOutlet <PluginOutlet
@name="after-header" @name="after-header"
@outletArgs={{hash minimized=(globalThis.Boolean this.header.topic)}} @outletArgs={{hash minimized=this.header.inTopic}}
/> />
</header> </header>
</template> </template>

View File

@ -8,7 +8,7 @@ export default class AuthButtons extends Component {
<template> <template>
<span class="auth-buttons"> <span class="auth-buttons">
{{#if (and @canSignUp (not this.header.topic))}} {{#if (and @canSignUp (not this.header.inTopic))}}
<DButton <DButton
class="btn-primary btn-small sign-up-button" class="btn-primary btn-small sign-up-button"
@action={{@showCreateAccount}} @action={{@showCreateAccount}}

View File

@ -16,7 +16,7 @@ export default class Contents extends Component {
@service sidebarState; @service sidebarState;
get topicPresent() { get topicPresent() {
return !!this.header.topic; return this.header.inTopic;
} }
get sidebarIcon() { get sidebarIcon() {
@ -45,7 +45,7 @@ export default class Contents extends Component {
</PluginOutlet> </PluginOutlet>
</div> </div>
{{#if this.header.topic}} {{#if this.header.inTopic}}
<TopicInfo @topic={{this.header.topic}} /> <TopicInfo @topic={{this.header.topic}} />
{{else if {{else if
(and (and

View File

@ -10,6 +10,7 @@ import { isTesting } from "discourse-common/config/environment";
// This route is used for retrieving a topic based on params // This route is used for retrieving a topic based on params
export default DiscourseRoute.extend({ export default DiscourseRoute.extend({
composer: service(), composer: service(),
header: service(),
// Avoid default model hook // Avoid default model hook
model(params) { model(params) {
@ -44,6 +45,8 @@ export default DiscourseRoute.extend({
if (topic.isPrivateMessage && topic.suggested_topics) { if (topic.isPrivateMessage && topic.suggested_topics) {
this.pmTopicTrackingState.startTracking(); this.pmTopicTrackingState.startTracking();
} }
this.header.topic = topic;
}, },
deactivate() { deactivate() {

View File

@ -7,6 +7,7 @@ export default class Header extends Service {
@service siteSettings; @service siteSettings;
@tracked topic = null; @tracked topic = null;
@tracked inTopic = false;
@tracked hamburgerVisible = false; @tracked hamburgerVisible = false;
@tracked userVisible = false; @tracked userVisible = false;
@tracked anyWidgetHeaderOverrides = false; @tracked anyWidgetHeaderOverrides = false;