diff --git a/app/assets/javascripts/discourse/app/components/sidebar/messages-section.js b/app/assets/javascripts/discourse/app/components/sidebar/messages-section.js index a71dc9dd4b9..9c964bf4ab6 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/messages-section.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/messages-section.js @@ -1,10 +1,96 @@ import { action } from "@ember/object"; +import { cached } from "@glimmer/tracking"; import GlimmerComponent from "discourse/components/glimmer"; import Composer from "discourse/models/composer"; import { getOwner } from "discourse-common/lib/get-owner"; +import GroupMessageSectionLink from "discourse/lib/sidebar/messages-section/group-message-section-link"; +import PersonalMessageSectionLink from "discourse/lib/sidebar/messages-section/personal-message-section-link"; + +export const INBOX = "inbox"; +const UNREAD = "unread"; +const SENT = "sent"; +const NEW = "new"; +const ARCHIVE = "archive"; + +export const PERSONAL_MESSAGES_INBOXES = [INBOX, UNREAD, NEW, SENT, ARCHIVE]; +export const GROUP_MESSAGES_INBOXES = [INBOX, UNREAD, NEW, ARCHIVE]; export default class SidebarMessagesSection extends GlimmerComponent { + constructor() { + super(...arguments); + + this.appEvents.on( + "page:changed", + this, + this._refreshSectionLinksDisplayState + ); + } + + willDestroy() { + this.appEvents.off( + "page:changed", + this, + this._refreshSectionLinksDisplayState + ); + } + + _refreshSectionLinksDisplayState({ + currentRouteName, + currentRouteParentName, + currentRouteParams, + }) { + const sectionLinks = [ + ...this.personalMessagesSectionLinks, + ...this.groupMessagesSectionLinks, + ]; + + if (currentRouteParentName !== "userPrivateMessages") { + sectionLinks.forEach((sectionLink) => { + sectionLink.collapse(); + }); + } else { + sectionLinks.forEach((sectionLink) => { + sectionLink.pageChanged(currentRouteName, currentRouteParams); + }); + } + } + + @cached + get personalMessagesSectionLinks() { + const links = []; + + PERSONAL_MESSAGES_INBOXES.forEach((type) => { + links.push( + new PersonalMessageSectionLink({ + currentUser: this.currentUser, + type, + }) + ); + }); + + return links; + } + + @cached + get groupMessagesSectionLinks() { + const links = []; + + this.currentUser.groupsWithMessages.forEach((group) => { + GROUP_MESSAGES_INBOXES.forEach((groupMessageLink) => { + links.push( + new GroupMessageSectionLink({ + group, + type: groupMessageLink, + currentUser: this.currentUser, + }) + ); + }); + }); + + return links; + } + @action composePersonalMessage() { const composerArgs = { diff --git a/app/assets/javascripts/discourse/app/lib/page-tracker.js b/app/assets/javascripts/discourse/app/lib/page-tracker.js index 3cb60f36ff5..66316654cf2 100644 --- a/app/assets/javascripts/discourse/app/lib/page-tracker.js +++ b/app/assets/javascripts/discourse/app/lib/page-tracker.js @@ -42,6 +42,8 @@ export function startPageTracking(router, appEvents, documentTitle) { url, title: documentTitle.getTitle(), currentRouteName: router.currentRouteName, + currentRouteParams: router.currentRoute.params, + currentRouteParentName: router.currentRoute.parent?.name, replacedOnlyQueryParams, }); }); diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/messages-section/group-message-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/messages-section/group-message-section-link.js new file mode 100644 index 00000000000..9de4993327b --- /dev/null +++ b/app/assets/javascripts/discourse/app/lib/sidebar/messages-section/group-message-section-link.js @@ -0,0 +1,80 @@ +import I18n from "I18n"; + +import { tracked } from "@glimmer/tracking"; +import { capitalize } from "@ember/string"; + +import { INBOX } from "discourse/components/sidebar/messages-section"; + +export default class GroupMessageSectionLink { + @tracked shouldDisplay = this._isInbox; + + routeNames = new Set([ + "userPrivateMessages.group", + "userPrivateMessages.groupUnread", + "userPrivateMessages.groupNew", + "userPrivateMessages.groupArchive", + ]); + + constructor({ group, type, currentUser, router }) { + this.group = group; + this.type = type; + this.currentUser = currentUser; + this.router = router; + } + + get name() { + return `group-messages-${this.type}`; + } + + get class() { + return this.group.name; + } + + get route() { + if (this._isInbox) { + return "userPrivateMessages.group"; + } else { + return `userPrivateMessages.group${capitalize(this.type)}`; + } + } + + get currentWhen() { + if (this._isInbox) { + return [...this.routeNames].join(" "); + } + } + + get models() { + return [this.currentUser, this.group.name]; + } + + get text() { + if (this._isInbox) { + return this.group.name; + } else { + return I18n.t(`sidebar.sections.messages.links.${this.type}`); + } + } + + collapse() { + if (this._isInbox) { + return; + } + + this.shouldDisplay = false; + } + + pageChanged(currentRouteName, currentRouteParams) { + if (this._isInbox) { + return; + } + + this.shouldDisplay = + this.routeNames.has(currentRouteName) && + currentRouteParams.name.toLowerCase() === this.group.name.toLowerCase(); + } + + get _isInbox() { + return this.type === INBOX; + } +} diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/messages-section/personal-message-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/messages-section/personal-message-section-link.js new file mode 100644 index 00000000000..66bc38e8564 --- /dev/null +++ b/app/assets/javascripts/discourse/app/lib/sidebar/messages-section/personal-message-section-link.js @@ -0,0 +1,68 @@ +import I18n from "I18n"; + +import { tracked } from "@glimmer/tracking"; +import { INBOX } from "discourse/components/sidebar/messages-section"; + +export default class PersonalMessageSectionLink { + @tracked shouldDisplay = this._isInbox; + + routeNames = new Set([ + "userPrivateMessages.index", + "userPrivateMessages.unread", + "userPrivateMessages.sent", + "userPrivateMessages.new", + "userPrivateMessages.archive", + ]); + + constructor({ currentUser, type, router }) { + this.currentUser = currentUser; + this.type = type; + this.router = router; + } + + get name() { + return `personal-messages-${this.type}`; + } + + get route() { + if (this._isInbox) { + return "userPrivateMessages.index"; + } else { + return `userPrivateMessages.${this.type}`; + } + } + + get currentWhen() { + if (this._isInbox) { + return [...this.routeNames].join(" "); + } + } + + get model() { + return this.currentUser; + } + + get text() { + return I18n.t(`sidebar.sections.messages.links.${this.type}`); + } + + collapse() { + if (this._isInbox) { + return; + } + + this.shouldDisplay = false; + } + + pageChanged(currentRouteName) { + if (this._isInbox) { + return; + } + + this.shouldDisplay = this.routeNames.has(currentRouteName); + } + + get _isInbox() { + return this.type === INBOX; + } +} diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs index 7469358ed58..ee690e68081 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs @@ -8,7 +8,9 @@ {{/if}} - + {{#if this.siteSettings.enable_personal_messages}} + + {{/if}} {{/if}} diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs index 735f04344cc..bed39761eff 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/messages-section.hbs @@ -7,4 +7,31 @@ @headerLinkText={{i18n "sidebar.sections.messages.header_link_text"}} @headerLinkTitle={{i18n "sidebar.sections.messages.header_link_title"}} > + {{#each this.personalMessagesSectionLinks as |personalMessageSectionLink|}} + {{#if personalMessageSectionLink.shouldDisplay}} + + {{/if}} + {{/each}} + + {{#if (gt this.groupMessagesSectionLinks.length 0)}} +
+ + {{#each this.groupMessagesSectionLinks as |groupMessageSectionLink|}} + {{#if groupMessageSectionLink.shouldDisplay}} + + {{/if}} + {{/each}} + {{/if}} + diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs index 049cf540b19..3faa0becac1 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs @@ -1,6 +1,6 @@
{ + [ + "/topics/private-messages-new/:username.json", + "/topics/private-messages-unread/:username.json", + "/topics/private-messages-archive/:username.json", + "/topics/private-messages-sent/:username.json", + "/topics/private-messages-group/:username/:group_name/new.json", + "/topics/private-messages-group/:username/:group_name.json", + "/topics/private-messages-group/:username/:group_name/unread.json", + "/topics/private-messages-group/:username/:group_name/archive.json", + ].forEach((url) => { + server.get(url, () => { + const topics = [ + { id: 1, posters: [] }, + { id: 2, posters: [] }, + { id: 3, posters: [] }, + ]; + + return helper.response({ + topic_list: { + topics, + }, + }); + }); + }); + }); + + conditionalTest( + "clicking on section header button", + !isLegacyEmber(), + async function (assert) { + await visit("/"); + + await click(".sidebar-section-messages .sidebar-section-header-button"); + + assert.ok( + exists("#reply-control.private-message"), + "it opens the composer" + ); + } + ); + + conditionalTest( + "clicking on section header link", + !isLegacyEmber(), + async function (assert) { + await visit("/"); + await click(".sidebar-section-messages .sidebar-section-header-link"); + + assert.strictEqual( + currentURL(), + `/u/eviltrout/messages`, + "it should transistion to the user's messages" + ); + } + ); + + conditionalTest( + "personal messages section links", + !isLegacyEmber(), + async function (assert) { + await visit("/"); + + assert.ok( + exists( + ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox" + ), + "displays the personal message inbox link" + ); + + assert.strictEqual( + queryAll(".sidebar-section-messages .sidebar-section-link").length, + 1, + "only displays the personal message inbox link" + ); + + await click( + ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox" + ); + + assert.ok( + exists( + ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox.active" + ), + "personal message inbox link is marked as active" + ); + + assert.strictEqual( + queryAll(".sidebar-section-messages .sidebar-section-link").length, + 5, + "expands and displays the links for personal messages" + ); + } + ); + + ["new", "archive", "sent", "unread"].forEach((type) => { + conditionalTest( + `${type} personal messages section link`, + !isLegacyEmber(), + async function (assert) { + await visit("/"); + + await click( + ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox" + ); + + await click( + `.sidebar-section-messages .sidebar-section-link-personal-messages-${type}` + ); + + assert.strictEqual( + currentURL(), + `/u/eviltrout/messages/${type}`, + `it should transition to user's ${type} personal messages` + ); + + assert.strictEqual( + queryAll(".sidebar-section-messages .sidebar-section-link.active") + .length, + 2, + "only two links are marked as active in the sidebar" + ); + + assert.ok( + exists( + ".sidebar-section-messages .sidebar-section-link-personal-messages-inbox.active" + ), + "personal message inbox link is marked as active" + ); + + assert.ok( + exists( + `.sidebar-section-messages .sidebar-section-link-personal-messages-${type}.active` + ), + `personal message ${type} link is marked as active` + ); + } ); - } - ); + }); - conditionalTest( - "clicking on section header link", - !isLegacyEmber(), - async function (assert) { - await visit("/"); - await click(".sidebar-section-messages .sidebar-section-header-link"); + conditionalTest( + "group messages section links", + !isLegacyEmber(), + async function (assert) { + updateCurrentUser({ + groups: [ + { + name: "group1", + has_messages: true, + }, + { + name: "group2", + has_messages: false, + }, + { + name: "group3", + has_messages: true, + }, + ], + }); - assert.strictEqual( - currentURL(), - `/u/eviltrout/messages`, - "it should transistion to the user's messages" + await visit("/"); + + assert.ok( + exists( + ".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1" + ), + "displays group1 inbox link" + ); + + assert.ok( + exists( + ".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group3" + ), + "displays group3 inbox link" + ); + + await visit("/u/eviltrout/messages/group/GrOuP1"); + + assert.strictEqual( + queryAll(".sidebar-section-messages .sidebar-section-link").length, + 6, + "expands and displays the links for group1 group messages" + ); + + assert.strictEqual( + queryAll(".sidebar-section-messages .sidebar-section-link.group1") + .length, + 4, + "expands the links for group1 group messages" + ); + + await click( + ".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group3" + ); + + assert.strictEqual( + queryAll(".sidebar-section-messages .sidebar-section-link.group1") + .length, + 1, + "collapses the links for group1 group messages" + ); + + assert.strictEqual( + queryAll(".sidebar-section-messages .sidebar-section-link.group3") + .length, + 4, + "expands the links for group3 group messages" + ); + } + ); + + ["new", "archive", "unread"].forEach((type) => { + conditionalTest( + `${type} group messages section link`, + !isLegacyEmber(), + async function (assert) { + updateCurrentUser({ + groups: [ + { + name: "group1", + has_messages: true, + }, + { + name: "group2", + has_messages: false, + }, + { + name: "group3", + has_messages: true, + }, + ], + }); + + await visit("/"); + + await click( + `.sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1` + ); + + await click( + `.sidebar-section-messages .sidebar-section-link-group-messages-${type}.group1` + ); + + assert.strictEqual( + currentURL(), + `/u/eviltrout/messages/group/group1/${type}`, + `it should transition to user's ${type} personal messages` + ); + + assert.strictEqual( + queryAll(".sidebar-section-messages .sidebar-section-link.active") + .length, + 2, + "only two links are marked as active in the sidebar" + ); + + assert.ok( + exists( + ".sidebar-section-messages .sidebar-section-link-group-messages-inbox.group1.active" + ), + "group1 group message inbox link is marked as active" + ); + + assert.ok( + exists( + `.sidebar-section-messages .sidebar-section-link-group-messages-${type}.group1.active` + ), + `group1 group message ${type} link is marked as active` + ); + } ); - } - ); -}); + }); + } +); diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index cde1de56422..27b0ceb84e4 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -145,4 +145,20 @@ color: var(--primary-medium); } } + + .sidebar-section-content { + hr { + margin: 0em 1.5em; + } + } + + .sidebar-section-link-personal-messages-sent, + .sidebar-section-link-personal-messages-new, + .sidebar-section-link-personal-messages-archive, + .sidebar-section-link-personal-messages-unread, + .sidebar-section-link-group-messages-new, + .sidebar-section-link-group-messages-unread, + .sidebar-section-link-group-messages-archive { + margin-left: 0.5em; + } } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 4be6914c16d..67688a4e859 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -4045,6 +4045,12 @@ en: header_link_title: "personal messages" header_link_text: "Messages" header_action_title: "create a personal message" + links: + inbox: "Inbox" + sent: "Sent" + new: "New" + unread: "Unread" + archive: "Archive" tags: no_tracked_tags: "You are not tracking any tags." header_link_title: "all tags"