From 2cc9f0e7d97237b7f6f53496e2554430473b8578 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Fri, 13 May 2022 09:35:15 +0800
Subject: [PATCH] DEV: Setup categories section in sidebar for future work
 (#16733)

---
 .../components/sidebar/categories-section.js  |  3 +++
 .../app/templates/components/sidebar.hbs      |  1 +
 .../components/sidebar/categories-section.hbs |  7 +++++
 .../sidebar-categories-section-test.js        | 26 +++++++++++++++++++
 .../acceptance/sidebar-topics-section-test.js | 15 ++++++++---
 .../stylesheets/common/base/sidebar.scss      |  4 +++
 config/locales/client.en.yml                  |  3 +++
 7 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/sidebar/categories-section.js
 create mode 100644 app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs
 create mode 100644 app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/categories-section.js b/app/assets/javascripts/discourse/app/components/sidebar/categories-section.js
new file mode 100644
index 00000000000..1815b8804bc
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/sidebar/categories-section.js
@@ -0,0 +1,3 @@
+import GlimmerComponent from "discourse/components/glimmer";
+
+export default class SidebarCategoriesSection extends GlimmerComponent {}
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
index 7bd12c75b2d..9bbd1203aaf 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar.hbs
@@ -2,6 +2,7 @@
   <div class="sidebar-wrapper">
     <div class="sidebar-container">
       <Sidebar::TopicsSection />
+      <Sidebar::CategoriesSection />
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs
new file mode 100644
index 00000000000..9dc65b326c0
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs
@@ -0,0 +1,7 @@
+<Sidebar::Section
+  @sectionName="categories"
+  @headerRoute="discovery.categories"
+  @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}}
+  @headerLinkTitle={{i18n "sidebar.sections.categories.header_link_title"}} >
+
+</Sidebar::Section>
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js
new file mode 100644
index 00000000000..c08a5f5b38c
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js
@@ -0,0 +1,26 @@
+import { click, currentURL, visit } from "@ember/test-helpers";
+
+import {
+  acceptance,
+  conditionalTest,
+} from "discourse/tests/helpers/qunit-helpers";
+import { isLegacyEmber } from "discourse-common/config/environment";
+
+acceptance("Sidebar - Categories Section", function (needs) {
+  needs.user({ experimental_sidebar_enabled: true });
+
+  conditionalTest(
+    "clicking on section header link",
+    !isLegacyEmber(),
+    async function (assert) {
+      await visit("/t/280");
+      await click(".sidebar-section-categories .sidebar-section-header-link");
+
+      assert.strictEqual(
+        currentURL(),
+        "/categories",
+        "it should transition to the categories page"
+      );
+    }
+  );
+});
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js
index 9b7ed285ec6..f49f582d680 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js
@@ -64,15 +64,24 @@ acceptance("Sidebar - Topics Section", function (needs) {
     async function (assert) {
       await visit("/");
 
-      assert.ok(exists(".sidebar-section-content"), "shows content section");
+      assert.ok(
+        exists(".sidebar-section-topics .sidebar-section-content"),
+        "shows content section"
+      );
 
       await click(".sidebar-section-topics .sidebar-section-header-caret");
 
-      assert.ok(!exists(".sidebar-section-content"), "hides content section");
+      assert.ok(
+        !exists(".sidebar-section-topics .sidebar-section-content"),
+        "hides content section"
+      );
 
       await click(".sidebar-section-topics .sidebar-section-header-caret");
 
-      assert.ok(exists(".sidebar-section-content"), "shows content section");
+      assert.ok(
+        exists(".sidebar-section-topics .sidebar-section-content"),
+        "shows content section"
+      );
     }
   );
 
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index f1b87deb1b8..7ede8a5bf5e 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -40,6 +40,10 @@
     justify-content: flex-end;
   }
 
+  .sidebar-section-wrapper {
+    margin-bottom: 1em;
+  }
+
   .sidebar-section-header {
     display: flex;
     text-transform: uppercase;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index bfdca47c808..693b977677c 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4035,6 +4035,9 @@ en:
       unread_count: "%{count} unread"
       new_count: "%{count} new"
       sections:
+        categories:
+          header_link_title: "all categories"
+          header_link_text: "Categories"
         topics:
           header_link_title: "home"
           header_link_text: "Topics"