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"