UX: Switch no categories/tags configured text in sidebar to a link (#18787)

Internal Ref: /t/73500

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

@@ -25,9 +25,14 @@
         </Sidebar::SectionLink>
       {{/each}}
     {{else}}
-      <Sidebar::SectionMessage>
-        {{html-safe this.noCategoriesText}}
-      </Sidebar::SectionMessage>
+      <Sidebar::SectionLink
+        @linkName="configure-categories"
+        @route="preferences.sidebar"
+        @prefixType="icon"
+        @prefixValue="pencil-alt"
+        @model={{this.currentUser}}
+        @content={{i18n "sidebar.sections.categories.links.add_categories.content"}}
+        @title={{i18n "sidebar.sections.categories.links.add_categories.title"}} />
     {{/if}}
 
     <Sidebar::Common::AllCategoriesSectionLink />

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

@@ -1,5 +1,3 @@
-import I18n from "I18n";
-
 import { inject as service } from "@ember/service";
 import { action } from "@ember/object";
 
@@ -32,16 +30,6 @@ export default class SidebarUserCategoriesSection extends SidebarCommonCategorie
     });
   }
 
-  get noCategoriesText() {
-    const url = `/u/${this.currentUser.username}/preferences/sidebar`;
-
-    return `${I18n.t(
-      "sidebar.sections.categories.none"
-    )} <a href="${url}">${I18n.t(
-      "sidebar.sections.categories.click_to_get_started"
-    )}</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.

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

@@ -21,9 +21,14 @@
         </Sidebar::SectionLink>
       {{/each}}
     {{else}}
-      <Sidebar::SectionMessage>
-        {{html-safe this.noTagsText}}
-      </Sidebar::SectionMessage>
+      <Sidebar::SectionLink
+        @linkName="configure-tags"
+        @route="preferences.sidebar"
+        @prefixType="icon"
+        @prefixValue="pencil-alt"
+        @model={{this.currentUser}}
+        @content={{i18n "sidebar.sections.tags.links.add_tags.content"}}
+        @title={{i18n "sidebar.sections.tags.links.add_tags.title"}} />
     {{/if}}
 
     <Sidebar::Common::AllTagsSectionLink />

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

@@ -1,5 +1,3 @@
-import I18n from "I18n";
-
 import { cached } from "@glimmer/tracking";
 import Component from "@glimmer/component";
 import { inject as service } from "@ember/service";
@@ -57,14 +55,6 @@ export default class SidebarUserTagsSection extends Component {
     return links;
   }
 
-  get noTagsText() {
-    const url = `/u/${this.currentUser.username}/preferences/sidebar`;
-
-    return `${I18n.t("sidebar.sections.tags.none")} <a href="${url}">${I18n.t(
-      "sidebar.sections.tags.click_to_get_started"
-    )}</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.

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

@@ -159,11 +159,15 @@ acceptance("Sidebar - Logged on user - Categories Section", function (needs) {
     );
 
     assert.ok(
-      exists(".sidebar-section-message"),
-      "the no categories message is displayed"
+      exists(
+        ".sidebar-section-categories .sidebar-section-link-configure-categories"
+      ),
+      "section link to add categories to sidebar is displayed"
     );
 
-    await click(".sidebar-section-message a");
+    await click(
+      ".sidebar-section-categories .sidebar-section-link-configure-categories"
+    );
 
     assert.strictEqual(
       currentURL(),

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

@@ -139,14 +139,17 @@ acceptance("Sidebar - Logged on user - Tags section", function (needs) {
 
     assert.ok(exists(".sidebar-section-tags"), "tags section is shown");
 
+    assert.ok(
+      exists(".sidebar-section-tags .sidebar-section-link-configure-tags"),
+      "section link to add tags to sidebar is displayed"
+    );
+
+    await click(".sidebar-section-tags .sidebar-section-link-configure-tags");
+
     assert.strictEqual(
-      query(
-        ".sidebar-section-tags .sidebar-section-message"
-      ).textContent.trim(),
-      `${I18n.t("sidebar.sections.tags.none")} ${I18n.t(
-        "sidebar.sections.tags.click_to_get_started"
-      )}`,
-      "the no tags message is displayed"
+      currentURL(),
+      "/u/eviltrout/preferences/sidebar",
+      "it should transition to user preferences sidebar page"
     );
   });
 

config/locales/client.en.yml

@@ -4196,12 +4196,20 @@ en:
             unread_with_count: "Unread (%{count})"
             archive: "Archive"
         tags:
+          links:
+            add_tags:
+              content: "Add tags"
+              title: "You have not added any tags. Click to get started."
           none: "You have not added any tags."
           click_to_get_started: "Click here to get started."
           header_link_text: "Tags"
           header_action_title: "edit your sidebar tags"
           configure_defaults: "Configure defaults"
         categories:
+          links:
+            add_categories:
+              content: "Add categories"
+              title: "You have not added any categories. Click to get started."
           none: "You have not added any categories."
           click_to_get_started: "Click here to get started."
           header_link_text: "Categories"