UX: Conditionally hide sidebar categories section for user (#18557)

If a site has no default sidebar categories configured:
  * Show categories section if user has categories configured
  * Hide categories section if user does not have categories configured

If a site has default sidebar categories configured:
  * Always show categories section

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

@@ -1,33 +1,35 @@
-<Sidebar::Section
-  @sectionName="categories"
-  @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}}
-  @headerActions={{array (hash action=this.editTracked title=(i18n "sidebar.sections.categories.header_action_title"))}}
-  @headerActionsIcon="pencil-alt"
-  @collapsable={{@collapsable}} >
+{{#if this.shouldDisplay}}
+  <Sidebar::Section
+    @sectionName="categories"
+    @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}}
+    @headerActions={{array (hash action=this.editTracked title=(i18n "sidebar.sections.categories.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}}
-        @query={{sectionLink.query}}
-        @title={{sectionLink.title}}
-        @content={{sectionLink.text}}
-        @currentWhen={{sectionLink.currentWhen}}
-        @model={{sectionLink.model}}
-        @badgeText={{sectionLink.badgeText}}
-        @prefixBadge={{sectionLink.prefixBadge}}
-        @prefixType={{sectionLink.prefixType}}
-        @prefixValue={{sectionLink.prefixValue}}
-        @prefixColor={{sectionLink.prefixColor}}
-        @prefixElementColors={{sectionLink.prefixElementColors}} >
-      </Sidebar::SectionLink>
-    {{/each}}
-  {{else}}
-    <Sidebar::SectionMessage>
-      {{html-safe this.noCategoriesText}}
-    </Sidebar::SectionMessage>
-  {{/if}}
+    {{#if (gt this.sectionLinks.length 0)}}
+      {{#each this.sectionLinks as |sectionLink|}}
+        <Sidebar::SectionLink
+          @linkName={{sectionLink.name}}
+          @route={{sectionLink.route}}
+          @query={{sectionLink.query}}
+          @title={{sectionLink.title}}
+          @content={{sectionLink.text}}
+          @currentWhen={{sectionLink.currentWhen}}
+          @model={{sectionLink.model}}
+          @badgeText={{sectionLink.badgeText}}
+          @prefixBadge={{sectionLink.prefixBadge}}
+          @prefixType={{sectionLink.prefixType}}
+          @prefixValue={{sectionLink.prefixValue}}
+          @prefixColor={{sectionLink.prefixColor}}
+          @prefixElementColors={{sectionLink.prefixElementColors}} >
+        </Sidebar::SectionLink>
+      {{/each}}
+    {{else}}
+      <Sidebar::SectionMessage>
+        {{html-safe this.noCategoriesText}}
+      </Sidebar::SectionMessage>
+    {{/if}}
 
-  <Sidebar::Common::AllCategoriesSectionLink />
-</Sidebar::Section>
+    <Sidebar::Common::AllCategoriesSectionLink />
+  </Sidebar::Section>
+{{/if}}

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

@@ -42,6 +42,20 @@ export default class SidebarUserCategoriesSection extends SidebarCommonCategorie
     )}</a>`;
   }
 
+  /**
+   * If a site has no default sidebar categories configured, show categories section if the user has categories configured.
+   * Otherwise, hide the categories section from the sidebar for the user.
+   *
+   * If a site has default sidebar categories configured, always show categories section for the user.
+   */
+  get shouldDisplay() {
+    if (this.siteSettings.default_sidebar_categories.length > 0) {
+      return true;
+    } else {
+      return this.categories.length > 0;
+    }
+  }
+
   @action
   editTracked() {
     this.router.transitionTo("preferences.sidebar", this.currentUser);

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

@@ -103,6 +103,8 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
   };
 
   test("clicking on section header link", async function (assert) {
+    setupUserSidebarCategories();
+
     await visit("/t/280");
     await click(".sidebar-section-categories .sidebar-section-header");
 
@@ -113,6 +115,8 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
   });
 
   test("clicking on section header button", async function (assert) {
+    setupUserSidebarCategories();
+
     await visit("/");
     await click(".sidebar-section-categories .sidebar-section-header-button");
 
@@ -123,9 +127,29 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
   });
 
-  test("category section links when user has not added any categories", async function (assert) {
+  test("categories section is hidden when user has not added any categories and there are no default categories configured", async function (assert) {
+    updateCurrentUser({ sidebar_category_ids: [] });
+
     await visit("/");
 
+    assert.notOk(
+      exists(".sidebar-section-categories"),
+      "categories section is not shown"
+    );
+  });
+
+  test("categories section is shown when user has not added any categories but default categories have been configured", async function (assert) {
+    updateCurrentUser({ sidebar_category_ids: [] });
+    const categories = Site.current().categories;
+    this.siteSettings.default_sidebar_categories = `${categories[0].id}|${categories[1].id}`;
+
+    await visit("/");
+
+    assert.ok(
+      exists(".sidebar-section-categories"),
+      "categories section is shown"
+    );
+
     assert.ok(
       exists(".sidebar-section-message"),
       "the no categories message is displayed"

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

@@ -100,7 +100,32 @@ acceptance("User Preferences - Sidebar", function (needs) {
     );
   });
 
-  test("user adding categories to sidebar", async function (assert) {
+  test("user adding categories to sidebar when default sidebar categories have not been configured", async function (assert) {
+    await visit("/u/eviltrout/preferences/sidebar");
+
+    assert.notOk(exists(".sidebar-section-categories"));
+
+    const categorySelector = selectKit(".category-selector");
+    await categorySelector.expand();
+    await categorySelector.selectKitSelectRowByName("support");
+    await categorySelector.selectKitSelectRowByName("bug");
+
+    await click(".save-changes");
+
+    assert.ok(
+      exists(".sidebar-section-categories .sidebar-section-link-support"),
+      "support category has been added to sidebar"
+    );
+
+    assert.ok(
+      exists(".sidebar-section-categories .sidebar-section-link-bug"),
+      "bug category has been added to sidebar"
+    );
+  });
+
+  test("user adding categories to sidebar when default sidebar categories have been configured", async function (assert) {
+    this.siteSettings.default_sidebar_categories = "5";
+
     await visit("/");
     await click(".sidebar-section-categories .sidebar-section-header-button");
 

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

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