UX: Conditionally display sidebar tags section for user (#18558)

If a site has no default sidebar tags configured, show tags section if the user has personal sidebar tags configured.
Otherwise, hide the tags section from the sidebar for the user.

If a site has default sidebar tags configured, always display the tags section.

app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs

@@ -1,29 +1,31 @@
-<Sidebar::Section
-  @sectionName="tags"
-  @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}}
-  @headerActions={{array (hash action=this.editTracked title=(i18n "sidebar.sections.tags.header_action_title"))}}
-  @headerActionsIcon="pencil-alt"
-  @collapsable={{@collapsable}}>
+{{#if this.shouldDisplay}}
+  <Sidebar::Section
+    @sectionName="tags"
+    @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}}
+    @headerActions={{array (hash action=this.editTracked title=(i18n "sidebar.sections.tags.header_action_title"))}}
+    @headerActionsIcon="pencil-alt"
+    @collapsable={{@collapsable}}>
 
-  {{#if (gt this.sectionLinks.length 0)}}
-    {{#each this.sectionLinks as |sectionLink|}}
-      <Sidebar::SectionLink
-        @linkName={{sectionLink.name}}
-        @route={{sectionLink.route}}
-        @title={{sectionLink.title}}
-        @content={{sectionLink.text}}
-        @currentWhen={{sectionLink.currentWhen}}
-        @prefixType={{sectionLink.prefixType}}
-        @prefixValue={{sectionLink.prefixValue}}
-        @badgeText={{sectionLink.badgeText}}
-        @models={{sectionLink.models}} >
-      </Sidebar::SectionLink>
-    {{/each}}
-  {{else}}
-    <Sidebar::SectionMessage>
-      {{html-safe this.noTagsText}}
-    </Sidebar::SectionMessage>
-  {{/if}}
+    {{#if (gt this.sectionLinks.length 0)}}
+      {{#each this.sectionLinks as |sectionLink|}}
+        <Sidebar::SectionLink
+          @linkName={{sectionLink.name}}
+          @route={{sectionLink.route}}
+          @title={{sectionLink.title}}
+          @content={{sectionLink.text}}
+          @currentWhen={{sectionLink.currentWhen}}
+          @prefixType={{sectionLink.prefixType}}
+          @prefixValue={{sectionLink.prefixValue}}
+          @badgeText={{sectionLink.badgeText}}
+          @models={{sectionLink.models}} >
+        </Sidebar::SectionLink>
+      {{/each}}
+    {{else}}
+      <Sidebar::SectionMessage>
+        {{html-safe this.noTagsText}}
+      </Sidebar::SectionMessage>
+    {{/if}}
 
-  <Sidebar::Common::AllTagsSectionLink />
-</Sidebar::Section>
+    <Sidebar::Common::AllTagsSectionLink />
+  </Sidebar::Section>
+{{/if}}

app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js

@@ -13,6 +13,7 @@ export default class SidebarUserTagsSection extends Component {
   @service topicTrackingState;
   @service pmTopicTrackingState;
   @service currentUser;
+  @service siteSettings;
 
   constructor() {
     super(...arguments);
@@ -63,6 +64,20 @@ export default class SidebarUserTagsSection extends Component {
     )}</a>`;
   }
 
+  /**
+   * If a site has no default sidebar tags configured, show tags section if the user has personal sidebar tags configured.
+   * Otherwise, hide the tags section from the sidebar for the user.
+   *
+   * If a site has default sidebar tags configured, always display the tags section.
+   */
+  get shouldDisplay() {
+    if (this.siteSettings.default_sidebar_tags.length > 0) {
+      return true;
+    } else {
+      return this.currentUser.sidebarTags.length > 0;
+    }
+  }
+
   @action
   editTracked() {
     this.router.transitionTo("preferences.sidebar", this.currentUser);

app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js

@@ -113,13 +113,30 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
     );
   });
 
-  test("section content when user has not added any tags", async function (assert) {
+  test("tags section is hidden when user has not added any tags and there are no default tags configured", async function (assert) {
     updateCurrentUser({
       sidebar_tags: [],
     });
 
     await visit("/");
 
+    assert.notOk(
+      exists(".sidebar-section-tags"),
+      "tags section is not displayed"
+    );
+  });
+
+  test("tags section is shown when user has not added any tags but default tags have been configured", async function (assert) {
+    updateCurrentUser({
+      sidebar_tags: [],
+    });
+
+    this.siteSettings.default_sidebar_tags = "tag1|tag2";
+
+    await visit("/");
+
+    assert.ok(exists(".sidebar-section-tags"), "tags section is shown");
+
     assert.strictEqual(
       query(
         ".sidebar-section-tags .sidebar-section-message"

app/assets/javascripts/discourse/tests/acceptance/user-preferences-sidebar-test.js

@@ -52,14 +52,6 @@ acceptance("User Preferences - Sidebar", function (needs) {
     });
   });
 
-  test("user should not see tag chooser when display_sidebar_tags property is false", async function (assert) {
-    updateCurrentUser({ display_sidebar_tags: false });
-
-    await visit("/u/eviltrout/preferences/sidebar");
-
-    assert.ok(!exists(".tag-chooser"), "tag chooser is not displayed");
-  });
-
   test("user encountering error when adding categories to sidebar", async function (assert) {
     updateCurrentUser({ sidebar_category_ids: [6] });
 
@@ -193,7 +185,32 @@ acceptance("User Preferences - Sidebar", function (needs) {
     );
   });
 
-  test("user adding tags to sidebar", async function (assert) {
+  test("user should not see tag chooser when display_sidebar_tags property is false", async function (assert) {
+    updateCurrentUser({ display_sidebar_tags: false });
+
+    await visit("/u/eviltrout/preferences/sidebar");
+
+    assert.ok(!exists(".tag-chooser"), "tag chooser is not displayed");
+  });
+
+  test("user adding tags to sidebar when default tags have not been configured", async function (assert) {
+    await visit("/u/eviltrout/preferences/sidebar");
+
+    const tagChooser = selectKit(".tag-chooser");
+    await tagChooser.expand();
+    await tagChooser.selectKitSelectRowByName("monkey");
+
+    await click(".save-changes");
+
+    assert.ok(
+      exists(".sidebar-section-tags .sidebar-section-link-monkey"),
+      "monkey tag has been added to sidebar"
+    );
+  });
+
+  test("user adding tags to sidebar when default tags have been configured", async function (assert) {
+    this.siteSettings.default_sidebar_tags = "tag1|tag2";
+
     await visit("/");
     await click(".sidebar-section-tags .sidebar-section-header-button");
 

app/assets/javascripts/discourse/tests/helpers/site-settings.js

@@ -102,6 +102,7 @@ const ORIGINAL_SETTINGS = {
   remove_muted_tags_from_latest: "always",
   enable_group_directory: true,
   default_sidebar_categories: "",
+  default_sidebar_tags: "",
 };
 
 let siteSettings = Object.assign({}, ORIGINAL_SETTINGS);