From 6d3ed966cdf23c55df1874304a6f031e3acc7452 Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Thu, 9 Nov 2017 12:33:36 -0800 Subject: [PATCH] FEATURE: replace admin flags modal by a select-box --- .../admin/components/flagged-post.js.es6 | 4 + .../templates/components/flagged-post.hbs | 8 +- .../admin-agree-flag-dropdown.js.es6 | 86 +++++++++++++++++++ .../select-box-kit/select-box-kit-row.js.es6 | 5 +- .../admin-agree-flag-dropdown.scss | 10 +++ .../acceptance/admin-flags-test.js.es6 | 36 +++++--- .../components/select-box-kit-test.js.es6 | 2 +- 7 files changed, 129 insertions(+), 22 deletions(-) create mode 100644 app/assets/javascripts/select-box-kit/components/admin-agree-flag-dropdown.js.es6 create mode 100644 app/assets/stylesheets/common/select-box-kit/admin-agree-flag-dropdown.scss diff --git a/app/assets/javascripts/admin/components/flagged-post.js.es6 b/app/assets/javascripts/admin/components/flagged-post.js.es6 index 5bf1f9ab22e..aa7c9ea8aec 100644 --- a/app/assets/javascripts/admin/components/flagged-post.js.es6 +++ b/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'); }, diff --git a/app/assets/javascripts/admin/templates/components/flagged-post.hbs b/app/assets/javascripts/admin/templates/components/flagged-post.hbs index 9bba9abfcd6..81b3195de4a 100644 --- a/app/assets/javascripts/admin/templates/components/flagged-post.hbs +++ b/app/assets/javascripts/admin/templates/components/flagged-post.hbs @@ -111,13 +111,7 @@ {{#if canAct}}
- {{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 diff --git a/app/assets/javascripts/select-box-kit/components/admin-agree-flag-dropdown.js.es6 b/app/assets/javascripts/select-box-kit/components/admin-agree-flag-dropdown.js.es6 new file mode 100644 index 00000000000..0645196dab0 --- /dev/null +++ b/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)); + }, + } +}); diff --git a/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-row.js.es6 b/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-row.js.es6 index 0ef116bba9a..c1bf0f2d5ed 100644 --- a/app/assets/javascripts/select-box-kit/components/select-box-kit/select-box-kit-row.js.es6 +++ b/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); }, diff --git a/app/assets/stylesheets/common/select-box-kit/admin-agree-flag-dropdown.scss b/app/assets/stylesheets/common/select-box-kit/admin-agree-flag-dropdown.scss new file mode 100644 index 00000000000..271e4b1ad56 --- /dev/null +++ b/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; + } + } + } +} diff --git a/test/javascripts/acceptance/admin-flags-test.js.es6 b/test/javascripts/acceptance/admin-flags-test.js.es6 index 0be7e93b0a8..80eacf70495 100644 --- a/test/javascripts/acceptance/admin-flags-test.js.es6 +++ b/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'); }); }); diff --git a/test/javascripts/components/select-box-kit-test.js.es6 b/test/javascripts/components/select-box-kit-test.js.es6 index 6e0f37a0485..904684cd8b7 100644 --- a/test/javascripts/components/select-box-kit-test.js.es6 +++ b/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) {