Add category breadcrumbs to edit category page (#13126)

app/assets/javascripts/discourse/app/components/bread-crumbs.js

@@ -7,6 +7,8 @@ import { filter } from "@ember/object/computed";
 export default Component.extend({
   classNameBindings: ["hidden:hidden", ":category-breadcrumb"],
   tagName: "ol",
+  editingCategory: false,
+  editingCategoryTab: null,
 
   @discourseComputed("categories")
   filteredCategories(categories) {
@@ -47,6 +49,11 @@ export default Component.extend({
     });
   },
 
+  @discourseComputed("siteSettings.tagging_enabled", "editingCategory")
+  showTagsSection(taggingEnabled, editingCategory) {
+    return taggingEnabled && !editingCategory;
+  },
+
   @discourseComputed("category")
   parentCategory(category) {
     deprecated(

app/assets/javascripts/discourse/app/lib/url.js

@@ -1,5 +1,6 @@
 import getURL, { withoutPrefix } from "discourse-common/lib/get-url";
 import { next, schedule } from "@ember/runloop";
+import Category from "discourse/models/category";
 import EmberObject from "@ember/object";
 import LockOn from "discourse/lib/lock-on";
 import Session from "discourse/models/session";
@@ -515,4 +516,13 @@ export function getCategoryAndTagUrl(category, subcategories, tag) {
   return getURL(url || "/");
 }
 
+export function getEditCategoryUrl(category, subcategories, tab) {
+  let url = `/c/${Category.slugFor(category)}/edit`;
+
+  if (tab) {
+    url += `/${tab}`;
+  }
+  return getURL(url);
+}
+
 export default _urlInstance;

app/assets/javascripts/discourse/app/templates/components/bread-crumbs.hbs

@@ -4,6 +4,8 @@
       category=breadcrumb.category
       categories=breadcrumb.options
       tagId=tag.id
+      editingCategory=editingCategory
+      editingCategoryTab=editingCategoryTab
       options=(hash
         parentCategory=breadcrumb.parentCategory
         subCategory=breadcrumb.isSubcategory
@@ -14,7 +16,7 @@
   {{/if}}
 {{/each}}
 
-{{#if siteSettings.tagging_enabled}}
+{{#if showTagsSection}}
   {{#if additionalTags}}
     {{tags-intersection-chooser
       currentCategory=category

app/assets/javascripts/discourse/app/templates/edit-category-tabs.hbs

@@ -1,6 +1,17 @@
 <div class="edit-category {{if expandedMenu "expanded-menu"}}">
+  <div class="edit-category-title-bar">
     <div class="edit-category-title">
       <h2>{{title}}</h2>
+      {{#if model.id}}
+        {{bread-crumbs
+          categories=site.categoriesList
+          category=model
+          noSubcategories=model.noSubcategories
+          editingCategory=true
+          editingCategoryTab=selectedTab
+        }}
+      {{/if}}
+    </div>
     {{#unless mobileView}}
       {{#if model.id}}
         {{d-button

app/assets/javascripts/discourse/tests/acceptance/category-edit-test.js

@@ -23,9 +23,19 @@ acceptance("Category Edit", function (needs) {
       "it jumps to the correct screen"
     );
 
-    assert.equal(queryAll(".badge-category").text(), "bug");
+    assert.equal(
+      queryAll(".category-breadcrumb .badge-category").text(),
+      "bug"
+    );
+    assert.equal(
+      queryAll(".category-color-editor .badge-category").text(),
+      "bug"
+    );
     await fillIn("input.category-name", "testing");
-    assert.equal(queryAll(".badge-category").text(), "testing");
+    assert.equal(
+      queryAll(".category-color-editor .badge-category").text(),
+      "testing"
+    );
 
     await fillIn(".edit-text-color input", "ff0000");
 

app/assets/javascripts/discourse/tests/acceptance/category-new-test.js

@@ -1,4 +1,8 @@
-import { acceptance, queryAll } from "discourse/tests/helpers/qunit-helpers";
+import {
+  acceptance,
+  exists,
+  queryAll,
+} from "discourse/tests/helpers/qunit-helpers";
 import { click, currentURL, fillIn, visit } from "@ember/test-helpers";
 import DiscourseURL from "discourse/lib/url";
 import I18n from "I18n";
@@ -10,7 +14,9 @@ acceptance("Category New", function (needs) {
 
   test("Creating a new category", async function (assert) {
     await visit("/new-category");
+
     assert.ok(queryAll(".badge-category"));
+    assert.notOk(exists(".category-breadcrumb"));
 
     await fillIn("input.category-name", "testing");
     assert.equal(queryAll(".badge-category").text(), "testing");

app/assets/javascripts/select-kit/addon/components/category-drop.js

@@ -1,6 +1,9 @@
 import Category from "discourse/models/category";
 import ComboBoxComponent from "select-kit/components/combo-box";
-import DiscourseURL, { getCategoryAndTagUrl } from "discourse/lib/url";
+import DiscourseURL, {
+  getCategoryAndTagUrl,
+  getEditCategoryUrl,
+} from "discourse/lib/url";
 import I18n from "I18n";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
 import { computed } from "@ember/object";
@@ -18,6 +21,9 @@ export default ComboBoxComponent.extend({
   tagName: "li",
   categoryStyle: readOnly("siteSettings.category_style"),
   noCategoriesLabel: I18n.t("categories.no_subcategory"),
+  navigateToEdit: false,
+  editingCategory: false,
+  editingCategoryTab: null,
 
   selectKitOptions: {
     filterable: true,
@@ -57,7 +63,7 @@ export default ComboBoxComponent.extend({
       const shortcuts = [];
 
       if (
-        this.value ||
+        (this.value && !this.editingCategory) ||
         (this.selectKit.options.noSubcategories &&
           this.selectKit.options.subCategory)
       ) {
@@ -110,6 +116,9 @@ export default ComboBoxComponent.extend({
     "parentCategoryName",
     "selectKit.options.subCategory",
     function () {
+      if (this.editingCategory) {
+        return this.noCategoriesLabel;
+      }
       if (this.selectKit.options.subCategory) {
         return I18n.t("categories.all_subcategories", {
           categoryName: this.parentCategoryName,
@@ -145,13 +154,19 @@ export default ComboBoxComponent.extend({
           ? this.selectKit.options.parentCategory
           : Category.findById(parseInt(categoryId, 10));
 
-      DiscourseURL.routeToUrl(
+      const route = this.editingCategory
-        getCategoryAndTagUrl(
+        ? getEditCategoryUrl(
+            category,
+            categoryId !== NO_CATEGORIES_ID,
+            this.editingCategoryTab
+          )
+        : getCategoryAndTagUrl(
             category,
             categoryId !== NO_CATEGORIES_ID,
             this.tagId
-        )
           );
+
+      DiscourseURL.routeToUrl(route);
     },
   },
 

app/assets/stylesheets/common/base/edit-category.scss

@@ -9,7 +9,7 @@ div.edit-category {
   grid-column-gap: 1.5em;
   grid-template-areas: "header header" "sidebar content" "sidebar warning" "sidebar footer";
 
-  .edit-category-title {
+  .edit-category-title-bar {
     grid-area: header;
     grid-column: 1 / span 2;
     display: flex;
@@ -17,6 +17,11 @@ div.edit-category {
     align-self: start;
     background-color: var(--primary-very-low);
     padding: 20px;
+
+    .category-back {
+      height: 2em;
+      align-self: flex-end;
+    }
   }
 
   .edit-category-nav {

app/assets/stylesheets/mobile/edit-category.scss

@@ -39,7 +39,7 @@ div.edit-category {
     }
   }
 
-  .edit-category-title {
+  .edit-category-title-bar {
     justify-content: start;
     align-items: center;
     padding-bottom: 1em;