From 4b561277a95adcbd99e89718fd5af29be05692af Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Wed, 28 Sep 2022 09:58:07 +0800 Subject: [PATCH] FEATURE: Add review link to community section for logged in user (#18374) When there are pending reviewables, the review section link is displayed in the main section. When there are no pending reviewables, the review section link is displayed under the more links drawer. Internal ref: /t/74210 --- .../app/components/reviewable-item.js | 4 +- .../sidebar/common/community-section.js | 40 ++++++---- .../components/sidebar/more-section-links.hbs | 2 +- .../sidebar/user/community-section.js | 35 +++++++- .../subscribe-user-notifications.js | 4 +- .../community-section/review-section-link.js | 33 ++++++++ .../javascripts/discourse/app/models/user.js | 5 ++ .../discourse/app/routes/review-index.js | 5 +- .../sidebar-user-community-section-test.js | 80 +++++++++++++++++++ .../base/sidebar-more-section-links.scss | 2 +- .../common/base/sidebar-section-link.scss | 6 ++ config/locales/client.en.yml | 4 + 12 files changed, 192 insertions(+), 28 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/review-section-link.js diff --git a/app/assets/javascripts/discourse/app/components/reviewable-item.js b/app/assets/javascripts/discourse/app/components/reviewable-item.js index 9843038de4e..ff67e672a81 100644 --- a/app/assets/javascripts/discourse/app/components/reviewable-item.js +++ b/app/assets/javascripts/discourse/app/components/reviewable-item.js @@ -151,11 +151,11 @@ export default Component.extend({ // "fast track" to update the current user's reviewable count before the message bus finds out. if (performResult.reviewable_count !== undefined) { - this.currentUser.set( - "reviewable_count", + this.currentUser.updateReviewableCount( performResult.reviewable_count ); } + if (performResult.unseen_reviewable_count !== undefined) { this.currentUser.set( "unseen_reviewable_count", diff --git a/app/assets/javascripts/discourse/app/components/sidebar/common/community-section.js b/app/assets/javascripts/discourse/app/components/sidebar/common/community-section.js index 2ef6f167147..9a2e5174d85 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/common/community-section.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/common/community-section.js @@ -1,5 +1,6 @@ import Component from "@glimmer/component"; import { inject as service } from "@ember/service"; +import { tracked } from "@glimmer/tracking"; import { customSectionLinks, @@ -13,29 +14,18 @@ export default class SidebarCommunitySection extends Component { @service appEvents; @service siteSettings; + @tracked sectionLinks; + @tracked moreSectionLinks; + @tracked moreSecondarySectionLinks; + + callbackId; headerActionsIcon; headerActions; - sectionLinks; - moreSectionLinks; - moreSecondarySectionLinks; - callbackId; constructor() { super(...arguments); - this.moreSectionLinks = this.#initializeSectionLinks([ - ...this.defaultMoreSectionLinks, - ...customSectionLinks, - ]); - - this.moreSecondarySectionLinks = this.#initializeSectionLinks([ - ...this.defaultMoreSecondarySectionLinks, - ...secondaryCustomSectionLinks, - ]); - - this.sectionLinks = this.#initializeSectionLinks( - this.defaultMainSectionLinks - ); + this.refreshSectionLinks(); this.callbackId = this.topicTrackingState.onStateChange(() => { this.sectionLinks.forEach((sectionLink) => { @@ -64,6 +54,22 @@ export default class SidebarCommunitySection extends Component { return []; } + refreshSectionLinks() { + this.moreSectionLinks = this.#initializeSectionLinks([ + ...this.defaultMoreSectionLinks, + ...customSectionLinks, + ]); + + this.moreSecondarySectionLinks = this.#initializeSectionLinks([ + ...this.defaultMoreSecondarySectionLinks, + ...secondaryCustomSectionLinks, + ]); + + this.sectionLinks = this.#initializeSectionLinks( + this.defaultMainSectionLinks + ); + } + #initializeSectionLinks(sectionLinkClasses) { return sectionLinkClasses.reduce((links, sectionLinkClass) => { const sectionLink = this.#initializeSectionLink(sectionLinkClass); diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs index 0eb84ca6323..432b7701ee5 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs @@ -12,7 +12,7 @@ {{did-insert this.registerClickListener}} {{will-destroy this.unregisterClickListener}} > -
+
{{#each this.sectionLinks as |sectionLink|}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/community-section.js b/app/assets/javascripts/discourse/app/components/sidebar/user/community-section.js index 13f74a48383..c3b0fe911ab 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/user/community-section.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/user/community-section.js @@ -1,5 +1,6 @@ import I18n from "I18n"; +import { bind } from "discourse-common/utils/decorators"; import Composer from "discourse/models/composer"; import { getOwner } from "discourse-common/lib/get-owner"; import PermissionType from "discourse/models/permission-type"; @@ -12,6 +13,7 @@ import AboutSectionLink from "discourse/lib/sidebar/common/community-section/abo import FAQSectionLink from "discourse/lib/sidebar/common/community-section/faq-section-link"; import AdminSectionLink from "discourse/lib/sidebar/user/community-section/admin-section-link"; import BadgesSectionLink from "discourse/lib/sidebar/common/community-section/badges-section-link"; +import ReviewSectionLink from "discourse/lib/sidebar/user/community-section/review-section-link"; import SidebarCommonCommunitySection from "discourse/components/sidebar/common/community-section"; import { action } from "@ember/object"; @@ -29,19 +31,48 @@ export default class SidebarUserCommunitySection extends SidebarCommonCommunityS title: I18n.t("sidebar.sections.community.header_action_title"), }, ]; + + this.appEvents.on( + "user-reviewable-count:changed", + this._refreshSectionLinks + ); + } + + willDestroy() { + this.appEvents.off( + "user-reviewable-count:changed", + this._refreshSectionLinks + ); + } + + @bind + _refreshSectionLinks() { + return this.refreshSectionLinks(); } get defaultMainSectionLinks() { - return [ + const links = [ EverythingSectionLink, TrackedSectionLink, MyPostsSectionLink, AdminSectionLink, ]; + + if (this.currentUser.reviewable_count > 0) { + links.push(ReviewSectionLink); + } + + return links; } get defaultMoreSectionLinks() { - return [GroupsSectionLink, UsersSectionLink, BadgesSectionLink]; + const links = [GroupsSectionLink, UsersSectionLink, BadgesSectionLink]; + + if (this.currentUser.reviewable_count === 0) { + links.push(ReviewSectionLink); + } + + return links; } get defaultMoreSecondarySectionLinks() { diff --git a/app/assets/javascripts/discourse/app/initializers/subscribe-user-notifications.js b/app/assets/javascripts/discourse/app/initializers/subscribe-user-notifications.js index 6b4d15997e0..0828a00214b 100644 --- a/app/assets/javascripts/discourse/app/initializers/subscribe-user-notifications.js +++ b/app/assets/javascripts/discourse/app/initializers/subscribe-user-notifications.js @@ -28,10 +28,12 @@ export default { const channel = user.enable_redesigned_user_menu ? `/reviewable_counts/${user.id}` : "/reviewable_counts"; + bus.subscribe(channel, (data) => { if (data.reviewable_count >= 0) { - user.set("reviewable_count", data.reviewable_count); + user.updateReviewableCount(data.reviewable_count); } + if (user.redesigned_user_menu_enabled) { user.set("unseen_reviewable_count", data.unseen_reviewable_count); } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/review-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/review-section-link.js new file mode 100644 index 00000000000..c5f4539be34 --- /dev/null +++ b/app/assets/javascripts/discourse/app/lib/sidebar/user/community-section/review-section-link.js @@ -0,0 +1,33 @@ +import I18n from "I18n"; + +import BaseSectionLink from "discourse/lib/sidebar/base-community-section-link"; + +export default class ReviewSectionLink extends BaseSectionLink { + get name() { + return "review"; + } + + get route() { + return "review"; + } + + get title() { + return I18n.t("sidebar.sections.community.links.review.title"); + } + + get text() { + return I18n.t("sidebar.sections.community.links.review.content"); + } + + get shouldDisplay() { + return this.currentUser.can_review; + } + + get badgeText() { + if (this.currentUser.reviewable_count > 0) { + return I18n.t("sidebar.sections.community.links.review.pending_count", { + count: this.currentUser.reviewable_count, + }); + } + } +} diff --git a/app/assets/javascripts/discourse/app/models/user.js b/app/assets/javascripts/discourse/app/models/user.js index 5b833911933..9476296dfcc 100644 --- a/app/assets/javascripts/discourse/app/models/user.js +++ b/app/assets/javascripts/discourse/app/models/user.js @@ -1059,6 +1059,11 @@ const User = RestModel.extend({ this.appEvents.trigger("user-drafts:changed"); }, + updateReviewableCount(count) { + this.set("reviewable_count", count); + this.appEvents.trigger("user-reviewable-count:changed", count); + }, + isInDoNotDisturb() { return ( this.do_not_disturb_until && diff --git a/app/assets/javascripts/discourse/app/routes/review-index.js b/app/assets/javascripts/discourse/app/routes/review-index.js index fbe993f864e..c0b2fb92ac6 100644 --- a/app/assets/javascripts/discourse/app/routes/review-index.js +++ b/app/assets/javascripts/discourse/app/routes/review-index.js @@ -68,6 +68,7 @@ export default DiscourseRoute.extend({ const channel = this.currentUser.enable_redesigned_user_menu ? `/reviewable_counts/${this.currentUser.id}` : "/reviewable_counts"; + this.messageBus.subscribe(channel, (data) => { if (data.updates) { this.controller.reviewables.forEach((reviewable) => { @@ -82,10 +83,6 @@ export default DiscourseRoute.extend({ deactivate() { this.messageBus.unsubscribe("/reviewable_claimed"); - const channel = this.currentUser.enable_redesigned_user_menu - ? `/reviewable_counts/${this.currentUser.id}` - : "/reviewable_counts"; - this.messageBus.unsubscribe(channel); }, @action diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js index b424702c1db..f034d089f40 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-community-section-test.js @@ -710,6 +710,86 @@ acceptance("Sidebar - Logged on user - Community Section", function (needs) { ); }); + test("review link is not shown when user cannot review", async function (assert) { + updateCurrentUser({ can_review: false }); + + await visit("/"); + + assert.notOk( + exists(".sidebar-section-community .sidebar-section-link-review"), + "review link is not shown" + ); + + await click( + ".sidebar-section-community .sidebar-more-section-links-details-summary" + ); + + assert.notOk( + exists(".sidebar-section-community .sidebar-section-link-review"), + "review link is not shown" + ); + }); + + test("review link when user can review", async function (assert) { + updateCurrentUser({ + can_review: true, + reviewable_count: 0, + }); + + await visit("/reivew"); + + assert.notOk( + exists(".sidebar-section-community .sidebar-section-link-review.active"), + "review link is shown as active when visiting the review route even if there are no pending reviewables" + ); + + await visit("/"); + + assert.notOk( + exists(".sidebar-section-community .sidebar-section-link-review"), + "review link is not shown as part of the main section links" + ); + + await click( + ".sidebar-section-community .sidebar-more-section-links-details-summary" + ); + + assert.ok( + exists( + ".sidebar-section-community .sidebar-more-section-links-details-content .sidebar-section-link-review" + ), + "review link is displayed in the more drawer" + ); + + await publishToMessageBus("/reviewable_counts", { + reviewable_count: 34, + }); + + assert.ok( + exists(".sidebar-section-community .sidebar-section-link-review"), + "review link is shown as part of the main section links" + ); + + assert.strictEqual( + query( + ".sidebar-section-community .sidebar-section-link-review .sidebar-section-link-content-badge" + ).textContent.trim(), + "34 pending", + "displays the pending reviewable count" + ); + + await click( + ".sidebar-section-community .sidebar-more-section-links-details-summary" + ); + + assert.notOk( + exists( + ".sidebar-section-community .sidebar-more-section-links-details-content .sidebar-section-link-review" + ), + "review link is not displayed in the more drawer" + ); + }); + test("new and unread count for tracked link", async function (assert) { const categories = Site.current().categories; diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss index 804a18b5396..2415121fda1 100644 --- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss +++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss @@ -29,7 +29,7 @@ background: transparent; } - .sidebar-more-section-link-details-content { + .sidebar-more-section-links-details-content { background-color: var(--secondary); box-shadow: shadow("dropdown"); margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3); diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss index afed96d8c43..0dc58c56c8f 100644 --- a/app/assets/stylesheets/common/base/sidebar-section-link.scss +++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss @@ -71,6 +71,12 @@ } } + .sidebar-section-link-review { + .sidebar-section-link-content-badge { + color: var(--danger); + } + } + .sidebar-section-link-prefix { flex-shrink: 0; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 9159b3cbc78..aabda302ece 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -4196,6 +4196,10 @@ en: draft_count: one: "%{count} draft" other: "%{count} drafts" + review: + content: "Review" + title: "review" + pending_count: "%{count} pending" welcome_topic_banner: title: "Create your Welcome Topic"