FEATURE: replace admin flags modal by a select-box

app/assets/javascripts/admin/components/flagged-post.js.es6

@@ -32,6 +32,10 @@ export default Ember.Component.extend({
   },
 
   actions: {
+    onRemoveAfterPromise(promise) {
+      this.removeAfter(promise);
+    },
+
     showAgreeFlagModal() {
       this._spawnModal('admin-agree-flag', this.get('flaggedPost'), 'agree-flag-modal');
     },

app/assets/javascripts/admin/templates/components/flagged-post.hbs

@@ -111,13 +111,7 @@
 
     {{#if canAct}}
       <div class='flagged-post-controls'>
-        {{d-button
-          title="admin.flags.agree_title"
-          class="agree-flag"
-          label="admin.flags.agree"
-          icon="thumbs-o-up"
-          action="showAgreeFlagModal"
-          ellipsis=true}}
+        {{admin-agree-flag-dropdown post=flaggedPost onRemoveAfterPromise=(action "onRemoveAfterPromise")}}
 
         {{#if flaggedPost.postHidden}}
           {{d-button

app/assets/javascripts/select-box-kit/components/admin-agree-flag-dropdown.js.es6

@@ -0,0 +1,86 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
+import DropdownSelectBox from "select-box-kit/components/dropdown-select-box";
+import computed from "ember-addons/ember-computed-decorators";
+import { on } from "ember-addons/ember-computed-decorators";
+
+export default DropdownSelectBox.extend({
+  headerText: "admin.flags.agree",
+  headerIcon: "thumbs-o-up",
+  classNames: ["agree-flag", "admin-agree-flag-dropdown"],
+  adminTools: Ember.inject.service(),
+  nameProperty: "label",
+
+  @on("didReceiveAttrs")
+  _setAdminAgreeDropdownOptions() {
+    this.set("headerComponentOptions.selectedName", `${I18n.t(this.get("headerText"))}...`);
+    this.set("headerComponentOptions.icon", iconHTML("thumbs-o-up"));
+  },
+
+  @computed("adminTools", "post.user")
+  spammerDetails(adminTools, user) {
+    return adminTools.spammerDetails(user);
+  },
+
+  canDeleteSpammer: Ember.computed.and("spammerDetails.canDelete", "post.flaggedForSpam"),
+
+  @computed("post", "canDeleteSpammer")
+  content(post, canDeleteSpammer) {
+    const content = [];
+
+    if (post.user_deleted === true) {
+      content.push({
+        title:  I18n.t("admin.flags.agree_flag_restore_post_title"),
+        icon: "eye",
+        id: "confirm-agree-restore",
+        action: () => this.send("perform", "restore"),
+        label:  I18n.t("admin.flags.agree_flag_restore_post"),
+      });
+    } else {
+      if (post.get("postHidden") !== true) {
+        content.push({
+          title:  I18n.t("admin.flags.agree_flag_hide_post_title"),
+          icon: "eye-slash",
+          action: () => this.send("perform", "hide"),
+          id: "confirm-agree-hide",
+          label:  I18n.t("admin.flags.agree_flag_hide_post"),
+        });
+      }
+    }
+
+    content.push({
+      title:  I18n.t("admin.flags.agree_flag_title"),
+      icon: "thumbs-o-up",
+      id: "confirm-agree-keep",
+      action: () => this.send("perform", "keep"),
+      label:  I18n.t("admin.flags.agree_flag"),
+    });
+
+    if (canDeleteSpammer) {
+      content.push({
+        title:  I18n.t("admin.flags.delete_spammer_title"),
+        icon: "exclamation-triangle",
+        id: "delete-spammer",
+        action: () => this.send("deleteSpammer"),
+        label:  I18n.t("admin.flags.delete_spammer"),
+      });
+    }
+
+    return content;
+  },
+
+  selectValueFunction(value) {
+    Ember.get(this._contentForValue(value), "action")();
+  },
+
+  actions: {
+    deleteSpammer() {
+      let spammerDetails = this.get("spammerDetails");
+      this.sendAction("onRemoveAfterPromise", spammerDetails.deleteUser());
+    },
+
+    perform(action) {
+      let flaggedPost = this.get("post");
+      this.sendAction("onRemoveAfterPromise", flaggedPost.agreeFlags(action));
+    },
+  }
+});

app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-row.js.es6

@@ -18,7 +18,10 @@ export default Ember.Component.extend(UtilsMixin, {
   classNameBindings: ["isHighlighted", "isSelected"],
   clicked: false,
 
-  title: Ember.computed.alias("content.name"),
+  @computed("content.originalContent.title", "content.name")
+  title(title, name) {
+    return title || name;
+  },
 
   @computed("templateForRow")
   template(templateForRow) { return templateForRow(this); },

app/assets/stylesheets/common/select-box-kit/admin-agree-flag-dropdown.scss

@@ -0,0 +1,10 @@
+.select-box-kit {
+  &.dropdown-select-box {
+    &.admin-agree-flag-dropdown {
+      .select-box-kit-row[data-value="delete-spammer"] .texts .name,
+      .select-box-kit-row[data-value="delete-spammer"] .icons .d-icon {
+        color: $danger;
+      }
+    }
+  }
+}

test/javascripts/acceptance/admin-flags-test.js.es6

@@ -14,40 +14,50 @@ QUnit.test("flagged posts", assert => {
 
 QUnit.test("flagged posts - agree", assert => {
   visit("/admin/flags/active");
-  click('.agree-flag');
+
   andThen(() => {
-    assert.equal(find('.agree-flag-modal:visible').length, 1);
+    expandSelectBoxKit('.agree-flag');
   });
-  click('.confirm-agree-keep');
+
+  andThen(() => {
+    selectBoxKitSelectRow('confirm-agree-keep', { selector: '.agree-flag'});
+  });
+
   andThen(() => {
-    assert.equal(find('.agree-flag-modal:visible').length, 0, 'modal is closed');
     assert.equal(find('.admin-flags .flagged-post').length, 0, 'post was removed');
   });
 });
 
 QUnit.test("flagged posts - agree + hide", assert => {
   visit("/admin/flags/active");
-  click('.agree-flag');
+
   andThen(() => {
-    assert.equal(find('.agree-flag-modal:visible').length, 1);
+    expandSelectBoxKit('.agree-flag');
   });
-  click('.confirm-agree-hide');
+
+  andThen(() => {
+    selectBoxKitSelectRow('confirm-agree-hide', { selector: '.agree-flag'});
+  });
+
   andThen(() => {
-    assert.equal(find('.agree-flag-modal:visible').length, 0, 'modal is closed');
     assert.equal(find('.admin-flags .flagged-post').length, 0, 'post was removed');
   });
 });
 
 QUnit.test("flagged posts - agree + deleteSpammer", assert => {
   visit("/admin/flags/active");
-  click('.agree-flag');
+
   andThen(() => {
-    assert.equal(find('.agree-flag-modal:visible').length, 1);
+    expandSelectBoxKit('.agree-flag');
   });
-  click('.delete-spammer');
-  click('.confirm-delete');
+
+  andThen(() => {
+    selectBoxKitSelectRow('delete-spammer', { selector: '.agree-flag'});
+  });
+
+  click('.confirm-delete');
+
   andThen(() => {
-    assert.equal(find('.agree-flag-modal:visible').length, 0, 'modal is closed');
     assert.equal(find('.admin-flags .flagged-post').length, 0, 'post was removed');
   });
 });

test/javascripts/components/select-box-kit-test.js.es6

@@ -142,7 +142,7 @@ componentTest('supports options to limit size', {
   template: '{{select-box-kit collectionHeight=20 content=content}}',
 
   beforeEach() {
-    this.set("content", [{ id: 1, name: "robin" }]);
+    this.set("content", ["robin", "régis"]);
   },
 
   test(assert) {