UX: Add short site description for anonymous user in sidebar (#18084)

Displays the `short_site_description` site setting in the community
section when the site setting is set

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

@@ -1,6 +1,7 @@
 <Sidebar::Section
   @sectionName="categories"
-  @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}} >
+  @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}}
+  @collapsable={{@collapsable}} >
 
   {{#each this.sectionLinks as |sectionLink|}}
     <Sidebar::SectionLink

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

@@ -8,12 +8,26 @@ import BadgesSectionLink from "discourse/lib/sidebar/common/community-section/ba
 
 export default class SidebarAnonymousCommunitySection extends SidebarCommonCommunitySection {
   get defaultMainSectionLinks() {
-    return [
+    const defaultLinks = [
       EverythingSectionLink,
       UsersSectionLink,
-      AboutSectionLink,
       FAQSectionLink,
     ];
+
+    defaultLinks.splice(
+      this.displayShortSiteDescription ? 0 : 2,
+      0,
+      AboutSectionLink
+    );
+
+    return defaultLinks;
+  }
+
+  get displayShortSiteDescription() {
+    return (
+      !this.currentUser &&
+      (this.siteSettings.short_site_description || "").length > 0
+    );
   }
 
   get defaultMoreSectionLinks() {

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

@@ -1,6 +1,7 @@
 <Sidebar::Section
   @sectionName="tags"
-  @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}} >
+  @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}}
+  @collapsable={{@collapsable}} >
 
   {{#each this.sectionLinks as |sectionLink|}}
     <Sidebar::SectionLink

app/assets/javascripts/discourse/app/components/sidebar/common/community-section.hbs

@@ -5,6 +5,12 @@
   @headerActions={{this.headerActions}}
   @collapsable={{@collapsable}} >
 
+  {{#if this.displayShortSiteDescription}}
+    <Sidebar::SectionMessage>
+      {{this.siteSettings.short_site_description}}
+    </Sidebar::SectionMessage>
+  {{/if}}
+
   {{#each this.sectionLinks as |sectionLink|}}
     <Sidebar::SectionLink
       @linkName={{sectionLink.name}}

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

@@ -2,7 +2,11 @@ import I18n from "I18n";
 
 import { test } from "qunit";
 
-import { acceptance, queryAll } from "discourse/tests/helpers/qunit-helpers";
+import {
+  acceptance,
+  query,
+  queryAll,
+} from "discourse/tests/helpers/qunit-helpers";
 import { click, visit } from "@ember/test-helpers";
 
 acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
@@ -11,6 +15,31 @@ acceptance("Sidebar - Anonymous user - Community Section", function (needs) {
     enable_sidebar: true,
   });
 
+  test("display short site description site setting when it is set", async function (assert) {
+    this.siteSettings.short_site_description =
+      "This is a short description about the site";
+
+    await visit("/");
+
+    assert.strictEqual(
+      query(
+        ".sidebar-section-community .sidebar-section-message"
+      ).textContent.trim(),
+      this.siteSettings.short_site_description,
+      "displays the short site description under the community section"
+    );
+
+    const sectionLinks = queryAll(
+      ".sidebar-section-community .sidebar-section-link"
+    );
+
+    assert.strictEqual(
+      sectionLinks[0].textContent.trim(),
+      I18n.t("sidebar.sections.community.links.about.content"),
+      "displays the about section link first"
+    );
+  });
+
   test("everything, users, about and FAQ section links are shown by default ", async function (assert) {
     await visit("/");
 

config/locales/client.en.yml

@@ -4136,6 +4136,8 @@ en:
       all_categories: "All categories"
       all_tags: "All tags"
       sections:
+        about:
+          header_link_text: "About"
         messages:
           header_link_text: "Messages"
           header_action_title: "create a personal message"