From 1cbc65ba7949b0763c13347339b3064826023c07 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Wed, 7 Jun 2023 07:22:50 +0900 Subject: [PATCH] DEV: Refactor `GroupNotificationsButton` into `userPrivateMessages.group` route (#21930) Why this change? Before this change, the `GroupNotificationsButton` is rendered in the template of `userPrivateMessages` route based on a conditional that checks if the `isGroup` property is true. However, the `isGroup` property is determined based on the child route that is rendered. However, this leads to "jankiness" in the UI because the `GroupNotificationsButton` will be rendered once the route is entered even if the model for the child route has not been resolved yet. What is the solution? In order to avoid this, we move the rendering of the `GroupNotificationsButton` into the template of the `userPrivateMessages.group` route and rely on the `in-element` helper to render it into the right spot in the template of the `userPrivateMessages` route. --- .../controllers/user-private-messages-group.js | 13 +++++++++++-- .../app/controllers/user-private-messages.js | 5 ----- .../routes/build-private-messages-group-route.js | 6 ++---- .../app/routes/user-private-messages-group.js | 6 ++++-- .../app/templates/user-private-messages-group.hbs | 15 +++++++++++---- .../discourse/app/templates/user/messages.hbs | 7 +------ app/assets/stylesheets/common/base/new-user.scss | 4 ++++ 7 files changed, 33 insertions(+), 23 deletions(-) diff --git a/app/assets/javascripts/discourse/app/controllers/user-private-messages-group.js b/app/assets/javascripts/discourse/app/controllers/user-private-messages-group.js index b648b3a7e87..2a6aa3f5ae4 100644 --- a/app/assets/javascripts/discourse/app/controllers/user-private-messages-group.js +++ b/app/assets/javascripts/discourse/app/controllers/user-private-messages-group.js @@ -1,6 +1,6 @@ import I18n from "I18n"; import Controller, { inject as controller } from "@ember/controller"; -import { computed } from "@ember/object"; +import { action, computed } from "@ember/object"; export default class extends Controller { @controller user; @@ -25,10 +25,14 @@ export default class extends Controller { return this.#linkText("unread"); } + get navigationControlsButton() { + return document.getElementById("navigation-controls__button"); + } + #linkText(type) { const count = this.pmTopicTrackingState?.lookupCount(type, { inboxFilter: "group", - groupName: this.groupName, + groupName: this.group.name, }); if (count === 0) { @@ -37,4 +41,9 @@ export default class extends Controller { return I18n.t(`user.messages.${type}_with_count`, { count }); } } + + @action + changeGroupNotificationLevel(notificationLevel) { + this.group.setNotification(notificationLevel, this.get("user.model.id")); + } } diff --git a/app/assets/javascripts/discourse/app/controllers/user-private-messages.js b/app/assets/javascripts/discourse/app/controllers/user-private-messages.js index 09c75fab652..2ec1886842d 100644 --- a/app/assets/javascripts/discourse/app/controllers/user-private-messages.js +++ b/app/assets/javascripts/discourse/app/controllers/user-private-messages.js @@ -97,11 +97,6 @@ export default class extends Controller { return content; } - @action - changeGroupNotificationLevel(notificationLevel) { - this.group.setNotification(notificationLevel, this.get("user.model.id")); - } - @action onMessagesDropdownChange(item) { return DiscourseURL.routeTo(item); diff --git a/app/assets/javascripts/discourse/app/routes/build-private-messages-group-route.js b/app/assets/javascripts/discourse/app/routes/build-private-messages-group-route.js index 555dcb29fd1..98d19ac1fd8 100644 --- a/app/assets/javascripts/discourse/app/routes/build-private-messages-group-route.js +++ b/app/assets/javascripts/discourse/app/routes/build-private-messages-group-route.js @@ -23,7 +23,7 @@ export default (inboxType, filter) => { model() { const username = this.modelFor("user").get("username_lower"); - const groupName = this.modelFor("userPrivateMessages.group"); + const groupName = this.modelFor("userPrivateMessages.group").name; let topicListFilter = `topics/private-messages-group/${username}/${groupName}`; @@ -60,9 +60,7 @@ export default (inboxType, filter) => { groupName = filters.pop(); } - const group = this.modelFor("user") - .get("groups") - .filterBy("name", groupName)[0]; + const group = this.modelFor("userPrivateMessages.group"); this.setProperties({ groupName, group }); }, diff --git a/app/assets/javascripts/discourse/app/routes/user-private-messages-group.js b/app/assets/javascripts/discourse/app/routes/user-private-messages-group.js index 600b58bfaca..4d70ea3b65f 100644 --- a/app/assets/javascripts/discourse/app/routes/user-private-messages-group.js +++ b/app/assets/javascripts/discourse/app/routes/user-private-messages-group.js @@ -2,10 +2,12 @@ import DiscourseRoute from "discourse/routes/discourse"; export default class extends DiscourseRoute { model(params) { - return params.name; + return this.modelFor("user") + .get("groups") + .filterBy("name", params.name.toLowerCase())[0]; } setupController(controller, model) { - controller.set("groupName", model); + controller.set("group", model); } } diff --git a/app/assets/javascripts/discourse/app/templates/user-private-messages-group.hbs b/app/assets/javascripts/discourse/app/templates/user-private-messages-group.hbs index 2a7ca00fc3c..7fb7c2864b1 100644 --- a/app/assets/javascripts/discourse/app/templates/user-private-messages-group.hbs +++ b/app/assets/javascripts/discourse/app/templates/user-private-messages-group.hbs @@ -3,7 +3,7 @@ {{d-icon "envelope"}} @@ -13,7 +13,7 @@ {{#if this.viewingSelf}} @@ -23,7 +23,7 @@ @@ -34,7 +34,7 @@ {{d-icon "archive"}} @@ -43,4 +43,11 @@ {{/if}} +{{#in-element this.navigationControlsButton}} + +{{/in-element}} + {{outlet}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/templates/user/messages.hbs b/app/assets/javascripts/discourse/app/templates/user/messages.hbs index ef2c7f38cd2..2657b304511 100644 --- a/app/assets/javascripts/discourse/app/templates/user/messages.hbs +++ b/app/assets/javascripts/discourse/app/templates/user/messages.hbs @@ -27,12 +27,7 @@ {{/if}} {{/if}} - {{#if this.isGroup}} - - {{/if}} + {{#if this.showNewPM}}