feat(RolesTable): add bulk Delete Roles button

src/Messages.js

@@ -2384,13 +2384,19 @@ export default defineMessages({
   deleteCustomRoleModalBody: {
     id: 'deleteCustomRoleModalBody',
     description: 'Modal body text for deleting custom role',
-    defaultMessage: 'Deleting the <strong>{name}</strong> may remove acess to certain user groups in your organization',
+    defaultMessage:
+      'Deleting the {count, plural, one {the <b>{name}</b> role} other {{count} roles}} may remove acess to certain user groups in your organization',
   },
   deleteRoleConfirm: {
     id: 'deleteRoleConfirm',
     description: 'confirm button for deleting role',
     defaultMessage: 'Delete role',
   },
+  deleteRolesAction: {
+    id: 'deleteRolesAction',
+    description: 'delete roles',
+    defaultMessage: 'Delete Roles',
+  },
   createUserGroup: {
     id: 'createUserGroup',
     description: 'create user group button label',

src/smart-components/role/RolesTable.tsx

@@ -17,7 +17,8 @@ import { Role } from '../../redux/reducers/role-reducer';
 import { RBACStore } from '../../redux/store';
 import { useSearchParams } from 'react-router-dom';
 import RolesDetails from './RolesTableDetails';
-import { WarningModal } from '@patternfly/react-component-groups';
+import { ResponsiveAction, ResponsiveActions, WarningModal } from '@patternfly/react-component-groups';
+import { DataViewTrObject } from '@patternfly/react-data-view';
 
 const PER_PAGE = [
   { title: '5', value: 5 },
@@ -35,7 +36,7 @@ interface RolesTableProps {
 
 const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole }) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [currentRole, setCurrentRole] = useState<Role | undefined>();
+  const [currentRoles, setCurrentRoles] = useState<Role[]>([]);
   const { roles, totalCount } = useSelector((state: RBACStore) => ({
     roles: state.roleReducer.roles.data || [],
     totalCount: state.roleReducer.roles.meta.count,
@@ -45,8 +46,8 @@ const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole })
 
   const intl = useIntl();
 
-  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent, role: Role) => {
-    setCurrentRole(role);
+  const handleModalToggle = (roles: Role[]) => {
+    setCurrentRoles(roles);
     setIsDeleteModalOpen(!isDeleteModalOpen);
   };
 
@@ -65,7 +66,7 @@ const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole })
   const pagination = useDataViewPagination({ perPage: 20, searchParams, setSearchParams });
   const { page, perPage, onSetPage, onPerPageSelect } = pagination;
 
-  const selection = useDataViewSelection({ matchOption: (a, b) => a[0] === b[0] });
+  const selection = useDataViewSelection({ matchOption: (a, b) => a.id === b.id });
   const { selected, onSelect, isSelected } = selection;
 
   const fetchData = useCallback(
@@ -91,6 +92,7 @@ const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole })
     };
 
     return roles.map((role: Role) => ({
+      id: role.uuid,
       row: Object.values({
         display_name: role.display_name,
         description: role.description,
@@ -106,7 +108,7 @@ const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole })
                 {
                   title: 'Delete role',
                   isDisabled: role.system,
-                  onClick: (event: KeyboardEvent | React.MouseEvent) => handleModalToggle(event, role),
+                  onClick: () => handleModalToggle([role]),
                 },
               ]}
             />
@@ -116,7 +118,7 @@ const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole })
       }),
       props: {
         isClickable: true,
-        onRowClick: (event: any) => handleRowClick(event, selectedRole?.display_name === role.display_name ? undefined : role),
+        onRowClick: (event: any) => handleRowClick(event, selectedRole?.uuid === role.uuid ? undefined : role),
         isRowSelected: selectedRole?.name === role.name,
       },
     }));
@@ -132,6 +134,11 @@ const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole })
   const pageSelected = rows.length > 0 && rows.every(isSelected);
   const pagePartiallySelected = !pageSelected && rows.some(isSelected);
 
+  const isRowSystemOrPlatformDefault = (selectedRow: any) => {
+    const role = roles.find((role) => role.uuid === selectedRow.id);
+    return role?.platform_default || role?.system;
+  };
+
   return (
     <React.Fragment>
       <ContentHeader title="Roles" subtitle={''} />
@@ -147,15 +154,19 @@ const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole })
             checkboxLabel={intl.formatMessage(messages.understandActionIrreversible)}
             onClose={() => setIsDeleteModalOpen(false)}
             onConfirm={() => {
-              dispatch(removeRole(currentRole?.uuid));
+              currentRoles.forEach((role) => {
+                dispatch(removeRole(role.uuid));
+              });
               setIsDeleteModalOpen(false);
             }}
           >
             <FormattedMessage
               {...messages.deleteCustomRoleModalBody}
               values={{
-                strong: (text) => <strong>{text}</strong>,
-                name: currentRole?.display_name,
+                b: (text) => <b>{text}</b>,
+                count: currentRoles.length,
+                plural: currentRoles.length > 1 ? intl.formatMessage(messages.roles) : intl.formatMessage(messages.role),
+                name: currentRoles[0]?.display_name,
               }}
             />
           </WarningModal>
@@ -174,6 +185,18 @@ const RolesTable: React.FunctionComponent<RolesTableProps> = ({ selectedRole })
                 onSelect={handleBulkSelect}
               />
             }
+            actions={
+              <ResponsiveActions breakpoint="lg" ouiaId={`${ouiaId}-actions-dropdown`}>
+                <ResponsiveAction
+                  isDisabled={selected.length === 0 || selected.some(isRowSystemOrPlatformDefault)}
+                  onClick={() => {
+                    handleModalToggle(roles.filter((role) => selected.some((selectedRow: DataViewTrObject) => selectedRow.id === role.uuid)));
+                  }}
+                >
+                  {intl.formatMessage(messages.deleteRolesAction)}
+                </ResponsiveAction>
+              </ResponsiveActions>
+            }
             pagination={
               <Pagination
                 perPageOptions={PER_PAGE}