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,3 +1,4 @@
+{{#if this.shouldDisplay}}
   <Sidebar::Section
     @sectionName="tags"
     @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}}
@@ -27,3 +28,4 @@
 
     <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);