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.

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;
+  }),
+});

app/assets/javascripts/discourse/app/components/group-member-dropdown.js

@@ -11,56 +11,7 @@ export default DropdownSelectBoxComponent.extend({
     showFullTitle: false,
   },
 
-  contentBulk() {
+  content: computed("member.owner", "member.primary", 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;
-  },
-
-  contentSingle() {
     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();
-    }
-  ),
 });

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,

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();
+        }
       });
   },
 

app/assets/javascripts/discourse/app/templates/group-index.hbs

@@ -29,15 +29,14 @@
               <th class="bulk-select-buttons">
                 <span class="bulk-select-buttons-wrap">
                   {{#if this.bulkSelection}}
-                    <GroupMemberDropdown @bulkSelection={{this.bulkSelection}} @canAdminGroup={{this.model.can_admin_group}} @onChange={{action "actOnSelection" this.bulkSelection}} />
+                    <BulkGroupMemberDropdown @bulkSelection={{this.bulkSelection}} @canAdminGroup={{this.model.can_admin_group}} @onChange={{action "actOnSelection" this.bulkSelection}} />
                   {{/if}}
                   <DButton @action={{action "bulkSelectAll"}} @label="topics.bulk.select_all" />
                   <DButton @action={{action "bulkClearAll"}} @label="topics.bulk.clear_all" />
                 </span>
               </th>
             {{/if}}
-            <TableHeaderToggle @order={{this.order}} @asc={{this.asc}} @field="username_lower" @labelKey="username" @class="username" @automatic={{true}} />
+            <TableHeaderToggle @order={{this.order}} @asc={{this.asc}} @field="username_lower" @labelKey="username" @class="username" @automatic={{true}} @colspan="2" />
-            <th class="group-owner"></th>
             <TableHeaderToggle @order={{this.order}} @asc={{this.asc}} @field="added_at" @labelKey="groups.member_added" @automatic={{true}} />
             <TableHeaderToggle @order={{this.order}} @asc={{this.asc}} @field="last_posted_at" @labelKey="last_post" @automatic={{true}} />
             <TableHeaderToggle @order={{this.order}} @asc={{this.asc}} @field="last_seen_at" @labelKey="last_seen" @automatic={{true}} />

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"
+    );
+  });
 });

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;
+        display: flex;
-        .btn {
-          margin-right: 0.5em;
       }
+
+      .btn {
+        margin-right: 0.25em;
       }
     }
 
     &.username {
       text-align: left;
-      width: 30%;
-    }
-
-    &.bulk-select-buttons + .username {
-      width: 10%;
-    }
-
-    &.group-members-actions {
-      width: 5%;
     }
   }