DEV: Simplify TopicNotificationsButton (#29465)

app/assets/javascripts/discourse/app/components/topic-footer-buttons.hbs

@@ -92,6 +92,7 @@
 {{#if this.showNotificationsButton}}
   <TopicNotificationsButton
     @topic={{this.topic}}
+    @expanded={{true}}
     class="notifications-button-footer"
   />
 

app/assets/javascripts/discourse/app/components/topic-timeline.hbs

@@ -12,7 +12,6 @@
       @jumpToIndex={{@jumpToIndex}}
       @jumpToPostPrompt={{@jumpToPostPrompt}}
       @fullscreen={{@fullscreen}}
-      @mobileView={{@mobileView}}
       @toggleMultiSelect={{@toggleMultiSelect}}
       @showTopicSlowModeUpdate={{@showTopicSlowModeUpdate}}
       @showTopReplies={{@showTopReplies}}

app/assets/javascripts/discourse/app/components/topic-timeline/container.hbs

@@ -173,12 +173,7 @@
     {{/if}}
 
     {{#if this.currentUser}}
-      <TopicNotificationsButton
+      <TopicNotificationsButton @topic={{@model}} @expanded={{false}} />
-        @topic={{@model}}
-        @showFullTitle={{false}}
-        @appendReason={{false}}
-        @showCaret={{false}}
-      />
     {{/if}}
 
     <PluginOutlet

app/assets/javascripts/discourse/app/components/topic-timeline/container.js

@@ -29,6 +29,7 @@ export function setDesktopScrollAreaHeight(
 
 export default class TopicTimelineScrollArea extends Component {
   @service appEvents;
+  @service site;
   @service siteSettings;
   @service currentUser;
 
@@ -57,7 +58,7 @@ export default class TopicTimelineScrollArea extends Component {
   constructor() {
     super(...arguments);
 
-    if (!this.args.mobileView) {
+    if (this.site.desktopView) {
       // listen for scrolling event to update timeline
       this.appEvents.on("topic:current-post-scrolled", this.postScrolled);
       // listen for composer sizing changes to update timeline
@@ -102,7 +103,7 @@ export default class TopicTimelineScrollArea extends Component {
   }
 
   get displayTimeLineScrollArea() {
-    if (this.args.mobileView) {
+    if (this.site.mobileView) {
       return true;
     }
 
@@ -121,7 +122,7 @@ export default class TopicTimelineScrollArea extends Component {
   }
 
   get topicTitle() {
-    return htmlSafe(this.args.mobileView ? this.args.model.fancyTitle : "");
+    return htmlSafe(this.site.mobileView ? this.args.model.fancyTitle : "");
   }
 
   get showTags() {
@@ -143,7 +144,7 @@ export default class TopicTimelineScrollArea extends Component {
   }
 
   get showDockedButton() {
-    return !this.args.mobileView && this.hasBackPosition && !this.showButton;
+    return this.site.desktopView && this.hasBackPosition && !this.showButton;
   }
 
   get hasBackPosition() {
@@ -177,10 +178,10 @@ export default class TopicTimelineScrollArea extends Component {
     const availableHeight =
       (window.innerHeight - composerHeight - headerHeight) / 2;
 
-    const minHeight = this.args.mobileView
+    const minHeight = this.site.mobileView
       ? DEFAULT_MIN_SCROLLAREA_HEIGHT
       : desktopMinScrollAreaHeight;
-    const maxHeight = this.args.mobileView
+    const maxHeight = this.site.mobileView
       ? DEFAULT_MAX_SCROLLAREA_HEIGHT
       : desktopMaxScrollAreaHeight;
 
@@ -426,7 +427,7 @@ export default class TopicTimelineScrollArea extends Component {
   willDestroy() {
     super.willDestroy(...arguments);
 
-    if (!this.args.mobileView) {
+    if (this.site.desktopView) {
       this.intersectionObserver?.disconnect();
       this.intersectionObserver = null;
 

app/assets/javascripts/discourse/app/templates/topic.hbs

@@ -276,7 +276,6 @@
             @convertToPublicTopic={{action "convertToPublicTopic"}}
             @convertToPrivateMessage={{action "convertToPrivateMessage"}}
             @fullscreen={{info.topicProgressExpanded}}
-            @mobileView={{this.site.mobileView}}
           />
         {{else}}
           <TopicProgress

app/assets/javascripts/discourse/tests/integration/components/select-kit/topic-notifications-button-test.gjs

@@ -47,7 +47,7 @@ module(
       state.topic = buildTopic.call(this, { level: 1 });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{state.topic}} />
+        <TopicNotificationsButton @topic={{state.topic}} @expanded={{true}} />
       </template>);
 
       assert.strictEqual(
@@ -74,7 +74,7 @@ module(
       });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{topic}} />
+        <TopicNotificationsButton @topic={{topic}} @expanded={{true}} />
       </template>);
 
       assert.strictEqual(
@@ -89,7 +89,7 @@ module(
       const topic = buildTopic.call(this, { level: 2 });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{topic}} />
+        <TopicNotificationsButton @topic={{topic}} @expanded={{true}} />
       </template>);
 
       assert
@@ -105,7 +105,7 @@ module(
       state.topic = buildTopic.call(this, { level: 2 });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{state.topic}} />
+        <TopicNotificationsButton @topic={{state.topic}} @expanded={{true}} />
       </template>);
 
       state.topic = buildTopic.call(this, { level: 3, reason: 999 });
@@ -128,7 +128,7 @@ module(
       });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{topic}} />
+        <TopicNotificationsButton @topic={{topic}} @expanded={{true}} />
       </template>);
 
       assert
@@ -148,7 +148,7 @@ module(
       });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{topic}} />
+        <TopicNotificationsButton @topic={{topic}} @expanded={{true}} />
       </template>);
 
       assert
@@ -168,7 +168,7 @@ module(
       });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{topic}} />
+        <TopicNotificationsButton @topic={{topic}} @expanded={{true}} />
       </template>);
 
       assert
@@ -188,7 +188,7 @@ module(
       });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{topic}} />
+        <TopicNotificationsButton @topic={{topic}} @expanded={{true}} />
       </template>);
 
       assert
@@ -208,7 +208,7 @@ module(
       });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{topic}} />
+        <TopicNotificationsButton @topic={{topic}} @expanded={{true}} />
       </template>);
 
       assert
@@ -228,7 +228,7 @@ module(
       });
 
       await render(<template>
-        <TopicNotificationsButton @topic={{topic}} />
+        <TopicNotificationsButton @topic={{topic}} @expanded={{true}} />
       </template>);
 
       assert

app/assets/javascripts/select-kit/addon/components/topic-notifications-button.gjs

@@ -20,18 +20,6 @@ export default class TopicNotificationsButton extends Component {
     return this.args.topic.get("details.notification_level");
   }
 
-  get appendReason() {
-    return this.args.appendReason ?? true;
-  }
-
-  get showFullTitle() {
-    return this.args.showFullTitle ?? true;
-  }
-
-  get showCaret() {
-    return this.args.showCaret ?? true;
-  }
-
   get reasonText() {
     const topic = this.args.topic;
     const level = topic.get("details.notification_level") ?? 1;
@@ -97,6 +85,16 @@ export default class TopicNotificationsButton extends Component {
     return false;
   }
 
+  get conditionalWrapper() {
+    if (this.args.expanded) {
+      return <template><p class="reason">{{yield}}</p></template>;
+    } else {
+      return <template>
+        {{! template-lint-disable no-yield-only}}{{yield}}
+      </template>;
+    }
+  }
+
   @action
   async changeTopicNotificationLevel(levelId) {
     if (levelId === this.notificationLevel) {
@@ -114,34 +112,22 @@ export default class TopicNotificationsButton extends Component {
 
   <template>
     <div class="topic-notifications-button" ...attributes>
-      {{#if this.appendReason}}
+      <this.conditionalWrapper>
-        <p class="reason">
-          <TopicNotificationsOptions
-            @value={{this.notificationLevel}}
-            @topic={{@topic}}
-            @onChange={{this.changeTopicNotificationLevel}}
-            @options={{hash
-              icon=(if this.isLoading "spinner")
-              showFullTitle=this.showFullTitle
-              showCaret=this.showCaret
-              headerAriaLabel=(i18n "topic.notifications.title")
-            }}
-          />
-          <span class="text">{{htmlSafe this.reasonText}}</span>
-        </p>
-      {{else}}
         <TopicNotificationsOptions
           @value={{this.notificationLevel}}
           @topic={{@topic}}
           @onChange={{this.changeTopicNotificationLevel}}
           @options={{hash
             icon=(if this.isLoading "spinner")
-            showFullTitle=this.showFullTitle
+            showFullTitle=@expanded
-            showCaret=this.showCaret
+            showCaret=@expanded
             headerAriaLabel=(i18n "topic.notifications.title")
           }}
         />
-      {{/if}}
+        {{#if @expanded}}
+          <span class="text">{{htmlSafe this.reasonText}}</span>
+        {{/if}}
+      </this.conditionalWrapper>
     </div>
   </template>
 }

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-notifications.hbs

@@ -1,3 +1,7 @@
+<StyleguideExample @title="<TopicNotificationsButton> expanded">
+  <TopicNotificationsButton @topic={{@dummy.topic}} @expanded={{true}} />
+</StyleguideExample>
+
 <StyleguideExample @title="<TopicNotificationsButton>">
-  <TopicNotificationsButton @topic={{@dummy.topic}} />
+  <TopicNotificationsButton @topic={{@dummy.topic}} @expanded={{false}} />
 </StyleguideExample>