Remove deprecations from edit-category and add skeleton acceptance test

app/assets/javascripts/discourse/components/color-picker.js.es6

@@ -17,7 +17,7 @@ export default DiscourseContainerView.extend({
         tagName: 'button',
         attributeBindings: ['style', 'title'],
         classNames: ['colorpicker'].concat( isUsed ? ['used-color'] : ['unused-color'] ),
-        style: 'background-color: #' + color + ';',
+        style: ('background-color: #' + color + ';').htmlSafe(),
         title: isUsed ? I18n.t("category.already_used") : null,
         click: function() {
           self.set("value", color);

app/assets/javascripts/discourse/controllers/edit-category.js.es6

@@ -6,6 +6,10 @@ import { categoryBadgeHTML } from 'discourse/helpers/category-link';
 export default ObjectController.extend(ModalFunctionality, {
   foregroundColors: ['FFFFFF', '000000'],
   categoryUploadUrl: '/category/uploads',
+  editingPermissions: false,
+  selectedTab: null,
+  saving: false,
+  deleting: false,
 
   parentCategories: function() {
     return Discourse.Category.list().filter(function (c) {
@@ -15,31 +19,31 @@ export default ObjectController.extend(ModalFunctionality, {
 
   // We can change the parent if there are no children
   subCategories: function() {
-    if (Em.isEmpty(this.get('id'))) { return null; }
-    return Discourse.Category.list().filterBy('parent_category_id', this.get('id'));
+    if (Em.isEmpty(this.get('model.id'))) { return null; }
+    return Discourse.Category.list().filterBy('parent_category_id', this.get('model.id'));
   }.property('model.id'),
 
-  canSelectParentCategory: Em.computed.not('isUncategorizedCategory'),
+  canSelectParentCategory: Em.computed.not('model.isUncategorizedCategory'),
 
-  onShow: function() {
+  onShow() {
     this.changeSize();
     this.titleChanged();
   },
 
   changeSize: function() {
-    if (this.present('description')) {
+    if (this.present('model.description')) {
       this.set('controllers.modal.modalClass', 'edit-category-modal full');
     } else {
       this.set('controllers.modal.modalClass', 'edit-category-modal small');
     }
-  }.observes('description'),
+  }.observes('model.description'),
 
   title: function() {
-    if (this.get('id')) {
+    if (this.get('model.id')) {
       return I18n.t("category.edit_long") + " : " + this.get('model.name');
     }
     return I18n.t("category.create") + (this.get('model.name') ? (" : " + this.get('model.name')) : '');
-  }.property('id', 'model.name'),
+  }.property('model.id', 'model.name'),
 
   titleChanged: function() {
     this.set('controllers.modal.title', this.get('title'));
@@ -47,10 +51,10 @@ export default ObjectController.extend(ModalFunctionality, {
 
   disabled: function() {
     if (this.get('saving') || this.get('deleting')) return true;
-    if (!this.get('name')) return true;
-    if (!this.get('color')) return true;
+    if (!this.get('model.name')) return true;
+    if (!this.get('model.color')) return true;
     return false;
-  }.property('saving', 'name', 'color', 'deleting'),
+  }.property('saving', 'model.name', 'model.color', 'deleting'),
 
   emailInEnabled: Discourse.computed.setting('email_in'),
 
@@ -59,80 +63,82 @@ export default ObjectController.extend(ModalFunctionality, {
   }.property('disabled', 'saving', 'deleting'),
 
   colorStyle: function() {
-    return "background-color: #" + (this.get('color')) + "; color: #" + (this.get('text_color')) + ";";
-  }.property('color', 'text_color'),
+    return "background-color: #" + this.get('model.color') + "; color: #" + this.get('model.text_color') + ";";
+  }.property('model.color', 'model.text_color'),
 
   categoryBadgePreview: function() {
-    var c = Discourse.Category.create({
-      name: this.get('categoryName'),
-      color: this.get('color'),
-      text_color: this.get('text_color'),
-      parent_category_id: parseInt(this.get('parent_category_id'),10),
-      read_restricted: this.get('model.read_restricted')
+    const model = this.get('model');
+    const c = Discourse.Category.create({
+      name: model.get('categoryName'),
+      color: model.get('color'),
+      text_color: model.get('text_color'),
+      parent_category_id: parseInt(model.get('parent_category_id'),10),
+      read_restricted: model.get('read_restricted')
     });
     return categoryBadgeHTML(c, {link: false});
-  }.property('parent_category_id', 'categoryName', 'color', 'text_color'),
+  }.property('model.parent_category_id', 'model.categoryName', 'model.color', 'model.text_color'),
 
   // background colors are available as a pipe-separated string
   backgroundColors: function() {
-    var categories = Discourse.Category.list();
+    const categories = Discourse.Category.list();
     return Discourse.SiteSettings.category_colors.split("|").map(function(i) { return i.toUpperCase(); }).concat(
                 categories.map(function(c) { return c.color.toUpperCase(); }) ).uniq();
   }.property('Discourse.SiteSettings.category_colors'),
 
   usedBackgroundColors: function() {
-    var categories = Discourse.Category.list();
+    const categories = Discourse.Category.list();
 
-    var currentCat = this.get('model');
+    const currentCat = this.get('model');
 
     return categories.map(function(c) {
       // If editing a category, don't include its color:
       return (currentCat.get('id') && currentCat.get('color').toUpperCase() === c.color.toUpperCase()) ? null : c.color.toUpperCase();
     }, this).compact();
-  }.property('id', 'color'),
+  }.property('model.id', 'model.color'),
 
   categoryName: function() {
-    var name = this.get('name') || "";
+    const name = this.get('name') || "";
     return name.trim().length > 0 ? name : I18n.t("preview");
   }.property('name'),
 
   buttonTitle: function() {
     if (this.get('saving')) return I18n.t("saving");
-    if (this.get('isUncategorizedCategory')) return I18n.t("save");
-    return (this.get('id') ? I18n.t("category.save") : I18n.t("category.create"));
-  }.property('saving', 'id'),
+    if (this.get('model.isUncategorizedCategory')) return I18n.t("save");
+    return (this.get('model.id') ? I18n.t("category.save") : I18n.t("category.create"));
+  }.property('saving', 'model.id'),
 
   deleteButtonTitle: function() {
     return I18n.t('category.delete');
   }.property(),
 
   showDescription: function() {
-    return !this.get('isUncategorizedCategory') && this.get('id');
-  }.property('isUncategorizedCategory', 'id'),
+    return !this.get('model.isUncategorizedCategory') && this.get('model.id');
+  }.property('model.isUncategorizedCategory', 'model.id'),
 
   showPositionInput: Discourse.computed.setting('fixed_category_positions'),
 
   actions: {
-    showCategoryTopic: function() {
+    showCategoryTopic() {
       this.send('closeModal');
-      Discourse.URL.routeTo(this.get('topic_url'));
+      Discourse.URL.routeTo(this.get('model.topic_url'));
       return false;
     },
 
-    editPermissions: function(){
+    editPermissions() {
       this.set('editingPermissions', true);
     },
 
-    addPermission: function(group, permission_id){
-      this.get('model').addPermission({group_name: group + "", permission: Discourse.PermissionType.create({id: permission_id})});
+    addPermission(group, id) {
+      this.get('model').addPermission({group_name: group + "",
+                                       permission: Discourse.PermissionType.create({id})});
     },
 
-    removePermission: function(permission){
+    removePermission(permission) {
       this.get('model').removePermission(permission);
     },
 
-    saveCategory: function() {
-      var self = this,
+    saveCategory() {
+      const self = this,
           model = this.get('model'),
           parentCategory = Discourse.Category.list().findBy('id', parseInt(model.get('parent_category_id'), 10));
 
@@ -155,8 +161,8 @@ export default ObjectController.extend(ModalFunctionality, {
       });
     },
 
-    deleteCategory: function() {
-      var self = this;
+    deleteCategory() {
+      const self = this;
       this.set('deleting', true);
 
       this.send('hideModal');

app/assets/javascripts/discourse/templates/modal/edit-category-general.hbs

@@ -2,11 +2,11 @@
   <section class='field'>
     <section class="field-item">
       <label>{{i18n 'category.name'}}</label>
-      {{text-field value=name placeholderKey="category.name_placeholder" maxlength="50"}}
+      {{text-field value=model.name placeholderKey="category.name_placeholder" maxlength="50"}}
     </section>
     <section class="field-item">
       <label>{{i18n 'category.slug'}}</label>
-      {{text-field value=slug placeholderKey="category.slug_placeholder" maxlength="255"}}
+      {{text-field value=model.slug placeholderKey="category.slug_placeholder" maxlength="255"}}
     </section>
   </section>
 
@@ -19,7 +19,7 @@
         {{/each}}
       {{else}}
         <label>{{i18n 'category.parent'}}</label>
-        {{category-chooser valueAttribute="id" value=parent_category_id categories=parentCategories rootNone=true}}
+        {{category-chooser valueAttribute="id" value=model.parent_category_id categories=parentCategories rootNone=true}}
       {{/if}}
     </section>
   {{/if}}
@@ -27,12 +27,12 @@
   {{#if showDescription}}
     <section class='field'>
       <label>{{i18n 'category.description'}}</label>
-      {{#if description}}
-        {{{description}}}
+      {{#if model.description}}
+        {{{model.description}}}
       {{else}}
         {{i18n 'category.no_description'}}
       {{/if}}
-      {{#if topic_url}}
+      {{#if model.topic_url}}
         <br/>
         {{d-button class="btn-small" action="showCategoryTopic" icon="pencil" label="category.change_in_category_topic"}}
       {{/if}}
@@ -46,14 +46,14 @@
 
       <div class='input-prepend input-append' style="margin-top: 10px;">
         <span class='color-title'>{{i18n 'category.background_color'}}:</span>
-        <span class='add-on'>#</span>{{text-field value=color placeholderKey="category.color_placeholder" maxlength="6"}}
-        {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=color}}
+        <span class='add-on'>#</span>{{text-field value=model.color placeholderKey="category.color_placeholder" maxlength="6"}}
+        {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=model.color}}
       </div>
 
       <div class='input-prepend input-append'>
         <span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
-        <span class='add-on'>#</span>{{text-field value=text_color placeholderKey="category.color_placeholder" maxlength="6"}}
-        {{color-picker colors=foregroundColors value=text_color}}
+        <span class='add-on'>#</span>{{text-field value=model.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
+        {{color-picker colors=foregroundColors value=model.text_color}}
       </div>
     </div>
   </section>

app/assets/javascripts/discourse/templates/modal/edit-category-images.hbs

@@ -1,9 +1,9 @@
 <section class='field'>
   <label>{{i18n 'category.logo'}}</label>
-  {{image-uploader uploadUrl=categoryUploadUrl imageUrl=logo_url type="logo"}}
+  {{image-uploader uploadUrl=categoryUploadUrl imageUrl=model.logo_url type="logo"}}
 </section>
 
 <section class='field'>
   <label>{{i18n 'category.background_image'}}</label>
-  {{image-uploader uploadUrl=categoryUploadUrl imageUrl=background_url type="background"}}
+  {{image-uploader uploadUrl=categoryUploadUrl imageUrl=model.background_url type="background"}}
 </section>

app/assets/javascripts/discourse/templates/modal/edit-category-security.hbs

@@ -1,6 +1,6 @@
 <section class='field'>
   <ul class='permission-list'>
-    {{#each p in permissions}}
+    {{#each model.permissions as |p|}}
       <li>
         <span class="name"><span class="badge-group">{{p.group_name}}</span></span>
         {{{i18n "category.can"}}}

app/assets/javascripts/discourse/templates/modal/edit-category-settings.hbs

@@ -1,13 +1,13 @@
 <section class='field'>
-  {{auto-close-form autoCloseTime=auto_close_hours
-                    autoCloseBasedOnLastPost=auto_close_based_on_last_post
+  {{auto-close-form autoCloseTime=model.auto_close_hours
+                    autoCloseBasedOnLastPost=model.auto_close_based_on_last_post
                     limited="true" }}
 </section>
 
 <section class='field'>
   <div class="allow-badges">
     <div>
-      {{input type="checkbox" checked=allow_badges}}
+      {{input type="checkbox" checked=model.allow_badges}}
       {{i18n 'category.allow_badges_label'}}
     </div>
   </div>

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

@@ -1,7 +1,7 @@
-<div {{bind-attr class="loading:invisible"}}>
+<div>
   <ul class="nav nav-pills">
     {{edit-category-tab selectedTab=selectedTab tab="general"}}
-    {{#unless isUncategorizedCategory}}
+    {{#unless model.isUncategorizedCategory}}
       {{edit-category-tab selectedTab=selectedTab tab="security"}}
     {{/unless}}
     {{edit-category-tab selectedTab=selectedTab tab="settings"}}
@@ -16,11 +16,11 @@
 
   <div class="modal-footer">
     <button class='btn btn-primary' {{bind-attr disabled="disabled"}} {{action "saveCategory"}}>{{buttonTitle}}</button>
-    {{#if can_delete}}
+    {{#if model.can_delete}}
       <button class='btn btn-danger pull-right' {{bind-attr disabled="deleteDisabled"}} {{action "deleteCategory"}}><i class="fa fa-trash-o"></i>{{deleteButtonTitle}}</button>
     {{else}}
       <div class="cannot_delete_reason">
-        {{{cannot_delete_reason}}}
+        {{{model.cannot_delete_reason}}}
       </div>
     {{/if}}
   </div>

app/assets/javascripts/discourse/templates/navigation/category.hbs

@@ -19,7 +19,7 @@
 {{/if}}
 
 {{#if canEditCategory}}
-  {{d-button class="btn-default" action="editCategory" actionParam=category icon="wrench" label="category.edit_long"}}
+  {{d-button class="btn-default edit-category" action="editCategory" actionParam=category icon="wrench" label="category.edit_long"}}
 {{/if}}
 
 <section class='category-heading'>

test/javascripts/acceptance/category-edit-test.js.es6

@@ -0,0 +1,17 @@
+import { acceptance } from "helpers/qunit-helpers";
+
+acceptance("Category Edit", { loggedIn: true });
+
+test("Can edit a category", (assert) => {
+  visit("/c/bug");
+
+  click('.edit-category');
+  andThen(() => {
+    assert.ok(visible('#discourse-modal'), 'it pops up a modal');
+  });
+
+  click('a.close');
+  andThen(() => {
+    assert.ok(!visible('#discourse-modal'), 'it closes the modal');
+  });
+});

test/javascripts/fixtures/category-fixtures.js.es6

@@ -0,0 +1,3 @@
+export default {
+  "/c/1/show.json": {"category":{"id":1,"name":"bug","color":"e9dd00","text_color":"000000","slug":"bug","topic_count":2030,"post_count":13418,"description":"A bug report means something is broken, preventing normal/typical use of Discourse. Do be sure to search prior to submitting bugs. Include repro steps, and only describe one bug per topic please.","description_text":"A bug report means something is broken, preventing normal/typical use of Discourse. Do be sure to search prior to submitting bugs. Include repro steps, and only describe one bug per topic please.","topic_url":"/t/category-definition-for-bug/2","read_restricted":false,"permission":null,"notification_level":null,"logo_url":null,"background_url":null,"available_groups":["admins","discourse","everyone","moderators","staff","translators","trust_level_0","trust_level_1","trust_level_2","trust_level_3","trust_level_4"],"auto_close_hours":null,"auto_close_based_on_last_post":false,"group_permissions":[{"permission_type":1,"group_name":"everyone"}],"position":25,"cannot_delete_reason":"Can't delete this category because it has 2030 topics. Oldest topic is <a href=\"https://localhost:3000/t/when-a-new-post-appears-in-a-topic-the-bookmark-isn-t-updated/39\">When a new post appears in a topic, the bookmark isn't updated</a>.","allow_badges":true}}
+};