From 7a668460e015a95f15c5b630b5cb53be780c8044 Mon Sep 17 00:00:00 2001 From: Bianca Nenciu Date: Wed, 20 Jul 2022 16:54:21 +0300 Subject: [PATCH] FIX: Make group members bulk operations consistent (#17561) This commit improves several parts of the group members bulk operation. It fixes the bug that did not show the menu button when the Select all button was clicked. The other changes make the behavior more consistent with topic list bulk operations. --- .../components/bulk-group-member-dropdown.js | 62 ++++++++++++++++++ .../app/components/group-member-dropdown.js | 64 +------------------ .../app/components/table-header-toggle.js | 2 +- .../discourse/app/controllers/group-index.js | 8 ++- .../discourse/app/templates/group-index.hbs | 5 +- .../tests/acceptance/group-index-test.js | 19 +++++- app/assets/stylesheets/common/base/group.scss | 23 +++---- 7 files changed, 99 insertions(+), 84 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js diff --git a/app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js b/app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js new file mode 100644 index 00000000000..baeddb07466 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/bulk-group-member-dropdown.js @@ -0,0 +1,62 @@ +import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box"; +import I18n from "I18n"; +import { computed } from "@ember/object"; + +export default DropdownSelectBoxComponent.extend({ + pluginApiIdentifiers: ["bulk-group-member-dropdown"], + classNames: ["bulk-group-member-dropdown"], + + selectKitOptions: { + icon: "cog", + showFullTitle: false, + }, + + content: computed("bulkSelection.[]", function () { + const items = []; + + items.push({ + id: "removeMembers", + name: I18n.t("groups.members.remove_members"), + description: I18n.t("groups.members.remove_members_description"), + icon: "user-times", + }); + + if (this.bulkSelection.some((m) => !m.owner)) { + items.push({ + id: "makeOwners", + name: I18n.t("groups.members.make_owners"), + description: I18n.t("groups.members.make_owners_description"), + icon: "shield-alt", + }); + } + + if (this.bulkSelection.some((m) => m.owner)) { + items.push({ + id: "removeOwners", + name: I18n.t("groups.members.remove_owners"), + description: I18n.t("groups.members.remove_owners_description"), + icon: "shield-alt", + }); + } + + if (this.bulkSelection.some((m) => !m.primary)) { + items.push({ + id: "setPrimary", + name: I18n.t("groups.members.make_all_primary"), + description: I18n.t("groups.members.make_all_primary_description"), + icon: "id-card", + }); + } + + if (this.bulkSelection.some((m) => m.primary)) { + items.push({ + id: "unsetPrimary", + name: I18n.t("groups.members.remove_all_primary"), + description: I18n.t("groups.members.remove_all_primary_description"), + icon: "id-card", + }); + } + + return items; + }), +}); diff --git a/app/assets/javascripts/discourse/app/components/group-member-dropdown.js b/app/assets/javascripts/discourse/app/components/group-member-dropdown.js index 8b74a485bc2..bd6fa1006a3 100644 --- a/app/assets/javascripts/discourse/app/components/group-member-dropdown.js +++ b/app/assets/javascripts/discourse/app/components/group-member-dropdown.js @@ -11,56 +11,7 @@ export default DropdownSelectBoxComponent.extend({ showFullTitle: false, }, - contentBulk() { - const items = []; - - items.push({ - id: "removeMembers", - name: I18n.t("groups.members.remove_members"), - description: I18n.t("groups.members.remove_members_description"), - icon: "user-times", - }); - - if (this.bulkSelection.some((m) => !m.owner)) { - items.push({ - id: "makeOwners", - name: I18n.t("groups.members.make_owners"), - description: I18n.t("groups.members.make_owners_description"), - icon: "shield-alt", - }); - } - - if (this.bulkSelection.some((m) => m.owner)) { - items.push({ - id: "removeOwners", - name: I18n.t("groups.members.remove_owners"), - description: I18n.t("groups.members.remove_owners_description"), - icon: "shield-alt", - }); - } - - if (this.bulkSelection.some((m) => !m.primary)) { - items.push({ - id: "setPrimary", - name: I18n.t("groups.members.make_all_primary"), - description: I18n.t("groups.members.make_all_primary_description"), - icon: "id-card", - }); - } - - if (this.bulkSelection.some((m) => m.primary)) { - items.push({ - id: "unsetPrimary", - name: I18n.t("groups.members.remove_all_primary"), - description: I18n.t("groups.members.remove_all_primary_description"), - icon: "id-card", - }); - } - - return items; - }, - - contentSingle() { + content: computed("member.owner", "member.primary", function () { const items = [ { id: "removeMember", @@ -117,16 +68,5 @@ export default DropdownSelectBoxComponent.extend({ } return items; - }, - - content: computed( - "bulkSelection.[]", - "member.owner", - "member.primary", - function () { - return this.bulkSelection !== undefined - ? this.contentBulk() - : this.contentSingle(); - } - ), + }), }); diff --git a/app/assets/javascripts/discourse/app/components/table-header-toggle.js b/app/assets/javascripts/discourse/app/components/table-header-toggle.js index 514a14d452b..259bb0ca4ed 100644 --- a/app/assets/javascripts/discourse/app/components/table-header-toggle.js +++ b/app/assets/javascripts/discourse/app/components/table-header-toggle.js @@ -5,7 +5,7 @@ import { htmlSafe } from "@ember/template"; export default Component.extend({ tagName: "th", classNames: ["sortable"], - attributeBindings: ["title"], + attributeBindings: ["title", "colspan"], labelKey: null, chevronIcon: null, columnIcon: null, diff --git a/app/assets/javascripts/discourse/app/controllers/group-index.js b/app/assets/javascripts/discourse/app/controllers/group-index.js index 7e495191d28..6bcbf5dd1b8 100644 --- a/app/assets/javascripts/discourse/app/controllers/group-index.js +++ b/app/assets/javascripts/discourse/app/controllers/group-index.js @@ -219,7 +219,9 @@ export default Controller.extend({ document .querySelectorAll("input.bulk-select:not(:checked)") .forEach((checkbox) => { - checkbox.checked = true; + if (!checkbox.checked) { + checkbox.click(); + } }); }, @@ -228,7 +230,9 @@ export default Controller.extend({ document .querySelectorAll("input.bulk-select:checked") .forEach((checkbox) => { - checkbox.checked = false; + if (checkbox.checked) { + checkbox.click(); + } }); }, diff --git a/app/assets/javascripts/discourse/app/templates/group-index.hbs b/app/assets/javascripts/discourse/app/templates/group-index.hbs index 1df656a1ce9..0408dd2e1a1 100644 --- a/app/assets/javascripts/discourse/app/templates/group-index.hbs +++ b/app/assets/javascripts/discourse/app/templates/group-index.hbs @@ -29,15 +29,14 @@ {{#if this.bulkSelection}} - + {{/if}} {{/if}} - - + diff --git a/app/assets/javascripts/discourse/tests/acceptance/group-index-test.js b/app/assets/javascripts/discourse/tests/acceptance/group-index-test.js index 2c5538aede1..020a5a4463f 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/group-index-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/group-index-test.js @@ -81,8 +81,25 @@ acceptance("Group Members", function (needs) { await click(queryAll("input.bulk-select")[0]); await click(queryAll("input.bulk-select")[1]); - const memberDropdown = selectKit(".group-member-dropdown"); + const memberDropdown = selectKit(".bulk-group-member-dropdown"); await memberDropdown.expand(); await memberDropdown.selectRowByValue("makeOwners"); }); + + test("Bulk actions - Menu, Select all and Clear all buttons", async function (assert) { + await visit("/g/discourse"); + + assert.ok( + !exists(".bulk-select-buttons-wrap details"), + "it does not show menu button if nothing is selected" + ); + + await click("button.bulk-select"); + await click(".bulk-select-buttons button:nth-child(1)"); + + assert.ok( + exists(".bulk-select-buttons-wrap details"), + "it shows menu button if something is selected" + ); + }); }); diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss index 5f1087ecd99..4d9fc177bbd 100644 --- a/app/assets/stylesheets/common/base/group.scss +++ b/app/assets/stylesheets/common/base/group.scss @@ -122,7 +122,6 @@ table.group-manage-logs { table.group-members { width: 100%; - table-layout: fixed; th { text-align: center; @@ -134,26 +133,20 @@ table.group-members { &.bulk-select-buttons { text-align: left; - width: 20%; + white-space: nowrap; + width: 1%; + .bulk-select-buttons-wrap { - display: inline-flex; - .btn { - margin-right: 0.5em; - } + display: flex; + } + + .btn { + margin-right: 0.25em; } } &.username { text-align: left; - width: 30%; - } - - &.bulk-select-buttons + .username { - width: 10%; - } - - &.group-members-actions { - width: 5%; } }