UX: Hide tags section from anonymous user when site has no tags (#18538)

If there are no top tags that an anonymous user can see and the site do
not have default sidebar tags configured for anonymous users, hide the
tag section entirely.

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

@@ -1,4 +1,5 @@
-<Sidebar::Section
+{{#if this.displaySection}}
+  <Sidebar::Section
     @sectionName="tags"
     @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}}
     @collapsable={{@collapsable}} >
@@ -15,4 +16,5 @@
     {{/each}}
 
     <Sidebar::Common::AllTagsSectionLink />
-</Sidebar::Section>
+  </Sidebar::Section>
+{{/if}}

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

@@ -8,6 +8,13 @@ export default class SidebarAnonymousTagsSection extends Component {
   @service topicTrackingState;
   @service site;
 
+  get displaySection() {
+    return (
+      this.site.anonymous_default_sidebar_tags?.length > 0 ||
+      this.site.top_tags?.length > 0
+    );
+  }
+
   @cached
   get sectionLinks() {
     let tags;

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

@@ -5,6 +5,7 @@ import {
   exists,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
+import Site from "discourse/models/site";
 
 acceptance("Sidebar - Anonymous Tags Section", function (needs) {
   needs.settings({
@@ -18,12 +19,13 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
     top_tags: ["design", "development", "fun"],
   });
 
-  test("tag section links", async function (assert) {
+  test("tag section links when site has top tags", async function (assert) {
     await visit("/");
 
     const categories = queryAll(
       ".sidebar-section-tags .sidebar-section-link-wrapper"
     );
+
     assert.strictEqual(categories.length, 4);
     assert.strictEqual(categories[0].textContent.trim(), "design");
     assert.strictEqual(categories[1].textContent.trim(), "development");
@@ -34,22 +36,11 @@ acceptance("Sidebar - Anonymous Tags Section", function (needs) {
       "all tags link is visible"
     );
   });
-});
 
-acceptance("Sidebar - Anonymous Tags Section - default tags", function (needs) {
+  test("tag section links when site has default sidebar tags configured", async function (assert) {
-  needs.settings({
+    const site = Site.current();
-    enable_experimental_sidebar_hamburger: true,
+    site.set("anonymous_default_sidebar_tags", ["random", "meta"]);
-    enable_sidebar: true,
-    suppress_uncategorized_badge: false,
-    tagging_enabled: true,
-  });
 
-  needs.site({
-    top_tags: ["design", "development", "fun"],
-    anonymous_default_sidebar_tags: ["random", "meta"],
-  });
-
-  test("tag section links", async function (assert) {
     await visit("/");
 
     const categories = queryAll(
@@ -64,26 +55,25 @@ acceptance("Sidebar - Anonymous Tags Section - default tags", function (needs) {
       "all tags link is visible"
     );
   });
-});
 
-acceptance(
+  test("tag section is hidden when tagging is disabled", async function (assert) {
-  "Sidebar - Anonymous Tags Section - Tagging disabled",
+    this.siteSettings.tagging_enabled = false;
-  function (needs) {
-    needs.settings({
-      enable_experimental_sidebar_hamburger: true,
-      enable_sidebar: true,
-      suppress_uncategorized_badge: false,
-      tagging_enabled: false,
-    });
 
-    needs.site({
-      top_tags: ["design", "development", "fun"],
-    });
-
-    test("tag section links", async function (assert) {
     await visit("/");
 
     assert.ok(!exists(".sidebar-section-tags"), "section is not visible");
   });
-  }
+
-);
+  test("tag section is hidden when anonymous has no visible top tags and site has not default sidebar tags configured", async function (assert) {
+    const site = Site.current();
+
+    site.setProperties({
+      top_tags: [],
+      anonymous_default_sidebar_tags: [],
+    });
+
+    await visit("/");
+
+    assert.ok(!exists(".sidebar-section-tags"), "section is not visible");
+  });
+});