feat(xo-web/groups): bulk deletion (#5264)

CHANGELOG.unreleased.md

@@ -10,6 +10,7 @@
 - [VM Import] Make the `Description` field optional (PR [#5258](https://github.com/vatesfr/xen-orchestra/pull/5258))
 - [New VM] Hide missing ISOs in selector [#5222](https://github.com/vatesfr/xen-orchestra/issues/5222)
 - [Dashboard/Health] Show VMs that have too many snapshots [#5238](https://github.com/vatesfr/xen-orchestra/pull/5238)
+- [Groups] Ability to delete multiple groups at once (PR [#5264](https://github.com/vatesfr/xen-orchestra/pull/5264))
 
 ### Bug fixes
 

packages/xo-web/src/common/intl/messages.js

@@ -656,6 +656,10 @@ const messages = {
   createGroupButton: 'Create',
   deleteGroup: 'Delete group',
   deleteGroupConfirm: 'Are you sure you want to delete this group?',
+  deleteSelectedGroups: 'Delete selected groups',
+  deleteGroupsModalTitle: 'Delete group{nGroups, plural, one {} other {s}}',
+  deleteGroupsModalMessage:
+    'Are you sure you want to delete {nGroups, number} group{nGroups, plural, one {} other {s}}?',
   removeUserFromGroup: 'Remove user from group',
   deleteUserConfirm: 'Are you sure you want to delete this user?',
   deleteUser: 'Delete user',

packages/xo-web/src/common/xo/index.js

@@ -2732,6 +2732,20 @@ export const deleteGroup = group =>
     noop
   )
 
+export const deleteGroups = groups =>
+  confirm({
+    title: _('deleteGroupsModalTitle', { nGroups: groups.length }),
+    body: <p>{_('deleteGroupsModalMessage', { nGroups: groups.length })}</p>,
+  }).then(
+    () =>
+      Promise.all(
+        groups.map(({ id }) => _call('group.delete', { id }))
+      )::tap(subscribeGroups.forceRefresh, err =>
+        error(_('deleteGroup'), err.message || String(err))
+      ),
+    noop
+  )
+
 export const removeUserFromGroup = (user, group) =>
   _call(
     'group.removeUser',

packages/xo-web/src/xo-app/settings/groups/index.js

@@ -18,6 +18,7 @@ import {
   addUserToGroup,
   createGroup,
   deleteGroup,
+  deleteGroups,
   removeUserFromGroup,
   setGroupName,
   subscribeGroups,
@@ -125,16 +126,16 @@ const GROUP_COLUMNS = [
       />
     ),
   },
+]
+
+const ACTIONS = [
   {
-    name: '',
+    handler: deleteGroups,
-    itemRenderer: group => (
+    icon: 'delete',
-      <ActionButton
+    individualHandler: deleteGroup,
-        icon='delete'
+    individualLabel: _('deleteGroup'),
-        handler={deleteGroup}
+    label: _('deleteSelectedGroups'),
-        handlerParam={group}
+    level: 'danger',
-        btnStyle='danger'
-      />
-    ),
   },
 ]
 
@@ -185,6 +186,7 @@ export default class Groups extends Component {
           </p>
         ) : (
           <SortedTable
+            actions={ACTIONS}
             collection={groups}
             columns={GROUP_COLUMNS}
             stateUrlParam='s'