From cfefdf0832fc9fc95624dbc34fef52e325dd189d Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Mon, 31 Oct 2022 06:42:55 +0800
Subject: [PATCH] UX: Switch no categories/tags configured text in sidebar to a
 link (#18787)

Internal Ref: /t/73500
---
 .../sidebar/user/categories-section.hbs         | 11 ++++++++---
 .../sidebar/user/categories-section.js          | 12 ------------
 .../components/sidebar/user/tags-section.hbs    | 11 ++++++++---
 .../app/components/sidebar/user/tags-section.js | 10 ----------
 .../sidebar-user-categories-section-test.js     | 10 +++++++---
 .../sidebar-user-tags-section-test.js           | 17 ++++++++++-------
 config/locales/client.en.yml                    |  8 ++++++++
 7 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs
index 72708bf5f4d..e44793bc4aa 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs
+++ b/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 />
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js b/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js
index f20fc093b19..0877cfa82fb 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js
+++ b/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.
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs
index 0086cdd58ed..c097fe86c02 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs
+++ b/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 />
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js b/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js
index 0bd41501230..950d9fea914 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js
+++ b/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.
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
index c5e11bf95d7..1c4fe5086f3 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-categories-section-test.js
+++ b/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(),
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js
index fd962631485..2e6da6ed49d 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-tags-section-test.js
+++ b/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"
     );
   });
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 37f70e1cfb7..c1ce4395884 100644
--- a/config/locales/client.en.yml
+++ b/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"