Replaces delete flag modal by a dropdown

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

@@ -36,10 +36,6 @@ export default Ember.Component.extend({
       this.removeAfter(promise);
     },
 
-    showDeleteFlagModal() {
-      this._spawnModal('admin-delete-flag', this.get('flaggedPost'), 'delete-flag-modal');
-    },
-
     disagree() {
       this.removeAfter(this.get('flaggedPost').disagreeFlags());
     },

app/assets/javascripts/admin/controllers/modals/admin-delete-flag.js.es6

@@ -1,22 +0,0 @@
-import ModalFunctionality from 'discourse/mixins/modal-functionality';
-import DeleteSpammerModal from 'admin/mixins/delete-spammer-modal';
-
-export default Ember.Controller.extend(ModalFunctionality, DeleteSpammerModal, {
-  removeAfter: null,
-
-  actions: {
-    deletePostDeferFlag() {
-      let flaggedPost = this.get('model');
-      this.removeAfter(flaggedPost.deferFlags(true)).then(() => {
-        this.send('closeModal');
-      });
-    },
-
-    deletePostAgreeFlag() {
-      let flaggedPost = this.get('model');
-      this.removeAfter(flaggedPost.agreeFlags('delete')).then(() => {
-        this.send('closeModal');
-      });
-    }
-  }
-});

app/assets/javascripts/admin/mixins/delete-spammer-modal.js.es6

@@ -1,23 +0,0 @@
-export default Ember.Mixin.create({
-  adminTools: Ember.inject.service(),
-  spammerDetails: null,
-
-  onShow() {
-    let adminTools = this.get('adminTools');
-    let spammerDetails = adminTools.spammerDetails(this.get('model.user'));
-
-    this.setProperties({
-      spammerDetails,
-      canDeleteSpammer: spammerDetails.canDelete && this.get('model.flaggedForSpam')
-    });
-  },
-
-  actions: {
-    deleteSpammer() {
-      let spammerDetails = this.get('spammerDetails');
-      this.removeAfter(spammerDetails.deleteUser()).then(() => {
-        this.send('closeModal');
-      });
-    }
-  }
-});

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

@@ -138,12 +138,7 @@
           icon="external-link"
           label="admin.flags.defer_flag"}}
 
-        {{d-button
-          class="btn-danger delete-flag"
-          title="admin.flags.delete_title"
-          action="showDeleteFlagModal"
-          icon="trash-o"
-          label="admin.flags.delete"}}
+        {{admin-delete-flag-dropdown post=flaggedPost removeAfter=(action "removeAfter")}}
 
         {{#unless suspended}}
           {{d-button

app/assets/javascripts/admin/templates/modal/admin-delete-flag.hbs

@@ -1,24 +0,0 @@
-{{#d-modal-body title="admin.flags.delete_flag_modal_title"}}
-  {{d-button
-    class="delete-defer"
-    title="admin.flags.delete_post_defer_flag_title"
-    action="deletePostDeferFlag"
-    icon="external-link"
-    label="admin.flags.delete_post_defer_flag"}}
-
-  {{d-button
-    class="delete-agree"
-    title="admin.flags.delete_post_agree_flag_title"
-    action="deletePostAgreeFlag"
-    icon="thumbs-o-up"
-    label="admin.flags.delete_post_agree_flag"}}
-
-  {{#if canDeleteSpammer}}
-    {{d-button
-      class="btn-danger delete-spammer"
-      title="admin.flags.delete_spammer_title"
-      action="deleteSpammer"
-      icon="exclamation-triangle"
-      label="admin.flags.delete_spammer"}}
-  {{/if}}
-{{/d-modal-body}}

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

@@ -0,0 +1,78 @@
+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.delete",
+  classNames: ["delete-flag", "admin-delete-flag-dropdown"],
+  adminTools: Ember.inject.service(),
+  nameProperty: "label",
+
+  @on("didReceiveAttrs")
+  _setAdminDeleteDropdownOptions() {
+    this.set("headerComponentOptions.selectedName", I18n.t(this.get("headerText")));
+    this.set("headerComponentOptions.icon", iconHTML("trash-o"));
+  },
+
+  @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 = [];
+
+    content.push({
+      title:  I18n.t("admin.flags.delete_post_defer_flag_title"),
+      icon: "external-link",
+      id: "delete-defer",
+      action: () => this.send("deletePostDeferFlag"),
+      label: I18n.t("admin.flags.delete_post_defer_flag")
+    });
+
+    content.push({
+      title:  I18n.t("admin.flags.delete_post_agree_flag_title"),
+      icon: "thumbs-o-up",
+      id: "delete-agree",
+      action: () => this.send("deletePostAgreeFlag"),
+      label: I18n.t("admin.flags.delete_post_agree_flag")
+    });
+
+    if (canDeleteSpammer) {
+      content.push({
+        title:  I18n.t("admin.flags.delete_post_agree_flag_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.attrs.removeAfter(spammerDetails.deleteUser());
+    },
+
+    deletePostDeferFlag() {
+      let flaggedPost = this.get('post');
+      this.attrs.removeAfter(flaggedPost.deferFlags(true));
+    },
+
+    deletePostAgreeFlag() {
+      let flaggedPost = this.get('post');
+      this.attrs.removeAfter(flaggedPost.agreeFlags('delete'));
+    }
+  }
+});

app/assets/stylesheets/common/admin/admin_base.scss

@@ -218,6 +218,9 @@ $mobile-breakpoint: 700px;
   .select-box-kit.multi-combo-box {
     width: 500px;
   }
+  .select-box-kit.dropdown-select-box {
+    width: auto;
+  }
 }
 
 .admin-container .controls {

app/assets/stylesheets/common/admin/flagging.scss

@@ -151,10 +151,12 @@
   .flagged-post-controls {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
 
-    button {
-      margin-right: 0.5em;
+    button, .select-box-kit {
       margin-bottom: 0.5em;
+      margin-right: 0.5em;
     }
   }
 }
@@ -188,13 +190,6 @@
   margin-bottom: 2em;
 }
 
-.delete-flag-modal {
-  button {
-    margin: 10px 0 10px 10px;
-    padding: 10px 15px;
-  }
-}
-
 .mobile-view {
   .flagged-posts {
     .flagged-post {
@@ -210,4 +205,3 @@
     padding-right: 0.25em;
   }
 }
-

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

@@ -0,0 +1,16 @@
+.select-box-kit {
+  &.dropdown-select-box {
+    width: auto;
+    &.admin-delete-flag-dropdown {
+      .dropdown-select-box-header .btn {
+        background: $danger;
+        color: white;
+      }
+
+      .select-box-kit-row[data-value="delete-spammer"] .texts .name,
+      .select-box-kit-row[data-value="delete-spammer"] .icons .d-icon {
+        color: $danger;
+      }
+    }
+  }
+}

app/assets/stylesheets/desktop/modal.scss

@@ -220,12 +220,6 @@
   margin-bottom: 10px;
 }
 
-.delete-flag-modal {
-  .modal-inner-container {
-    width: 400px;
-  }
-}
-
 .change-timestamp {
   min-height: 300px;
 

app/assets/stylesheets/mobile/modal.scss

@@ -169,15 +169,6 @@
   }
 }
 
-.delete-flag-modal {
-  .modal-inner-container {
-    width: 300px;
-  }
-  .btn {
-    float: none !important;
-  }
-}
-
 #search-help {
   max-width: 98%;
 }

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

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