Add user group modal

cypress/e2e/roles.cy.ts

@@ -50,7 +50,7 @@ describe('Roles page', () => {
     }).as('getRoles');
 
     cy.visit('/iam/user-access/roles');
-    cy.wait('@getRoles', { timeout: 10000 });
+    cy.wait('@getRoles', { timeout: 15000 });
   });
 
   it('should display the Roles table and correct data', () => {

cypress/e2e/users-and-user-groups.cy.ts

@@ -114,4 +114,10 @@ describe('Users and User Groups page', () => {
       });
     });
   });
+
+  it('should be able to open Add User Modal once an active user is selected', () => {
+    cy.get('[aria-label="Select row 0"]').click();
+    cy.get('[data-ouia-component-id="iam-users-table-add-user-button"]').click();
+    cy.get('[data-ouia-component-id="add-user-group-modal"]').should('be.visible');
+  });
 });

src/Messages.js

@@ -2112,6 +2112,67 @@ export default defineMessages({
     description: 'Users and user groups description',
     defaultMessage: 'These are all of the users in your Red Hat organization. Create User Groups to define access across your workspaces.',
   },
+  usersAndUserGroupsAdd: {
+    id: 'usersAndUserGroupsAdd',
+    description: 'Add label',
+    defaultMessage: 'Add',
+  },
+  usersAndUserGroupsAddToGroup: {
+    id: 'usersAndUserGroupsAddToGroup',
+    description: 'Add to user group label',
+    defaultMessage: 'Add to user group',
+  },
+  usersAndUserGroupsEditUserGroup: {
+    id: 'usersAndUserGroupsEditUserGroup',
+    description: 'Edit user group label',
+    defaultMessage: 'Edit user group',
+  },
+  usersAndUserGroupsDeleteUserGroup: {
+    id: 'usersAndUserGroupsDeleteUserGroup',
+    description: 'Delete user group label',
+    defaultMessage: 'Delete user group',
+  },
+  usersAndUserGroupsRemoveFromGroup: {
+    id: 'usersAndUserGroupsAddToGroup',
+    description: 'Remove from user group label',
+    defaultMessage: 'Remove from user group',
+  },
+  usersAndUserGroupsCancel: {
+    id: 'usersAndUserGroupsCancel',
+    description: 'Cancel add user label',
+    defaultMessage: 'Cancel',
+  },
+  usersAndUserGroupsNoDescription: {
+    id: 'usersAndUserGroupsNoDescription',
+    description: 'No description label',
+    defaultMessage: 'No description',
+  },
+  usersAndUserGroupsActive: {
+    id: 'usersAndUserGroupsActive',
+    description: 'User is active label',
+    defaultMessage: 'Active',
+  },
+  usersAndUserGroupsInactive: {
+    id: 'usersAndUserGroupsInactive',
+    description: 'User is inactive label',
+    defaultMessage: 'Inactive',
+  },
+  usersAndUserGroupsYes: {
+    id: 'usersAndUserGroupsYes',
+    description: 'Yes is Org Admin label',
+    defaultMessage: 'Yes',
+  },
+  usersAndUserGroupsNo: {
+    id: 'usersAndUserGroupsNo',
+    description: 'No isnt Org Admin label',
+    defaultMessage: 'No',
+  },
+  usersAndUserGroupsAddUserDescription: {
+    id: 'usersAndUserGroupsAddUserDescription',
+    description: 'Description within add user to user group modal',
+    defaultMessage:
+      'Select a user group to add <b>{numUsers} {plural}</b> to. These are all the user groups in your account. To manage user groups, go to user groups.',
+  },
   assignedUserGroupsTooltipHeader: {
     id: 'assignedUserGroupsTooltipHeader',
     description: 'header for assigned user groups tooltip',

src/redux/reducers/user-reducer.ts

@@ -1,5 +1,6 @@
 import { FETCH_USERS, UPDATE_USERS_FILTERS } from '../action-types';
 import { defaultSettings, PaginationDefaultI } from '../../helpers/shared/pagination';
+import { UserProps } from '../../smart-components/user/user-table-helpers';
 
 export interface User {
   email: string;
@@ -24,7 +25,7 @@ export interface UserStore {
     meta: PaginationDefaultI;
     filters: UserFilters;
     pagination: PaginationDefaultI & { redirected?: boolean };
-    data?: User[];
+    data?: UserProps[];
   };
 }
 

src/smart-components/access-management/AddUserGroupModal.tsx

@@ -0,0 +1,65 @@
+import { Button, Modal } from '@patternfly/react-core';
+import React from 'react';
+import UserGroupsTable from './UserGroupsTable';
+import { useDispatch } from 'react-redux';
+import { addMembersToGroup } from '../../redux/actions/group-actions';
+import { FormattedMessage, useIntl } from 'react-intl';
+import messages from '../../Messages';
+
+interface AddUserGroupModalProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  selectedUsers: any[];
+}
+
+export const AddUserGroupModal: React.FunctionComponent<AddUserGroupModalProps> = ({ isOpen, setIsOpen, selectedUsers }) => {
+  const [selectedGroups, setSelectedGroups] = React.useState<any[]>([]);
+  const handleUserGroupsChange = (groups: any[]) => setSelectedGroups(groups);
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const handleCloseModal = () => setIsOpen(false);
+
+  const handleAddUsers = () => {
+    const selectedUsernames = selectedUsers.map((user) => ({ username: user.id }));
+    selectedGroups.forEach((group) => {
+      dispatch(addMembersToGroup(group.id, selectedUsernames));
+    });
+    setIsOpen(false);
+  };
+
+  return (
+    <Modal
+      title={intl.formatMessage(messages['usersAndUserGroupsAddToGroup'])}
+      isOpen={isOpen}
+      onClose={handleCloseModal}
+      actions={[
+        <Button key="add" variant="primary" onClick={handleAddUsers} isDisabled={selectedGroups.length === 0}>
+          {intl.formatMessage(messages['usersAndUserGroupsAdd'])}
+        </Button>,
+        <Button key="cancel" variant="link" onClick={handleCloseModal}>
+          {intl.formatMessage(messages['usersAndUserGroupsCancel'])}
+        </Button>,
+      ]}
+      ouiaId="add-user-group-modal"
+    >
+      <FormattedMessage
+        {...messages['usersAndUserGroupsAddUserDescription']}
+        values={{
+          b: (text) => <b>{text}</b>,
+          numUsers: selectedUsers.length,
+          plural: selectedUsers.length > 1 ? 'users' : 'user',
+        }}
+      />
+      <UserGroupsTable
+        defaultPerPage={10}
+        useUrlParams={false}
+        ouiaId="iam-add-users-modal-table"
+        onChange={handleUserGroupsChange}
+        enableActions={false}
+      />
+    </Modal>
+  );
+};
+
+export default AddUserGroupModal;

src/smart-components/access-management/UserGroupsTable.tsx

@@ -12,14 +12,11 @@ import { RBACStore } from '../../redux/store';
 import { useSearchParams } from 'react-router-dom';
 import { fetchGroups } from '../../redux/actions/group-actions';
 import { formatDistanceToNow } from 'date-fns';
+import { useIntl } from 'react-intl';
+import messages from '../../Messages';
 
 const COLUMNS: string[] = ['User group name', 'Description', 'Users', 'Service accounts', 'Roles', 'Workspaces', 'Last modified'];
 
-const ROW_ACTIONS = [
-  { title: 'Edit user group', onClick: () => console.log('EDIT USER GROUP') },
-  { title: 'Delete user group', onClick: () => console.log('DELETE USER GROUP') },
-];
-
 const PER_PAGE_OPTIONS = [
   { title: '5', value: 5 },
   { title: '10', value: 10 },
@@ -28,27 +25,62 @@ const PER_PAGE_OPTIONS = [
   { title: '100', value: 100 },
 ];
 
-const OUIA_ID = 'iam-user-groups-table';
-
-const UserGroupsTable: React.FunctionComponent = () => {
+interface UserGroupsTableProps {
+  defaultPerPage?: number;
+  useUrlParams?: boolean;
+  enableActions?: boolean;
+  ouiaId?: string;
+  onChange?: (selectedGroups: any[]) => void;
+}
+
+const UserGroupsTable: React.FunctionComponent<UserGroupsTableProps> = ({
+  defaultPerPage = 20,
+  useUrlParams = true,
+  enableActions = true,
+  ouiaId = 'iam-user-groups-table',
+  onChange,
+}) => {
   const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const rowActions = [
+    { title: intl.formatMessage(messages['usersAndUserGroupsEditUserGroup']), onClick: () => console.log('EDIT USER GROUP') },
+    { title: intl.formatMessage(messages['usersAndUserGroupsDeleteUserGroup']), onClick: () => console.log('DELETE USER GROUP') },
+  ];
 
   const { groups, totalCount } = useSelector((state: RBACStore) => ({
     groups: state.groupReducer?.groups?.data || [],
     totalCount: state.groupReducer?.groups?.meta.count || 0,
   }));
 
-  const [searchParams, setSearchParams] = useSearchParams();
-  const pagination = useDataViewPagination({ perPage: 20, searchParams, setSearchParams });
+  let pagination;
+
+  if (useUrlParams) {
+    const [searchParams, setSearchParams] = useSearchParams();
+    pagination = useDataViewPagination({
+      perPage: defaultPerPage,
+      searchParams: searchParams,
+      setSearchParams: setSearchParams,
+    });
+  } else {
+    const [perPage, setPerPage] = React.useState(defaultPerPage);
+    const [page, setPage] = React.useState(1);
+    pagination = {
+      page,
+      perPage,
+      onSetPage: (_e: any, page: number) => setPage(page),
+      onPerPageSelect: (_e: any, perPage: number) => setPerPage(perPage),
+    };
+  }
   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(
     (apiProps: { count: number; limit: number; offset: number; orderBy: string }) => {
       const { count, limit, offset, orderBy } = apiProps;
-      dispatch(fetchGroups({ ...mappedProps({ count, limit, offset, orderBy }), usesMetaInURL: true }));
+      dispatch(fetchGroups({ ...mappedProps({ count, limit, offset, orderBy }), usesMetaInURL: true, system: false }));
     },
     [dispatch]
   );
@@ -62,6 +94,10 @@ const UserGroupsTable: React.FunctionComponent = () => {
     });
   }, [fetchData, page, perPage]);
 
+  useEffect(() => {
+    onChange?.(selected);
+  }, [selected]);
+
   const handleBulkSelect = (value: BulkSelectValue) => {
     if (value === BulkSelectValue.none) {
       onSelect(false);
@@ -72,25 +108,28 @@ const UserGroupsTable: React.FunctionComponent = () => {
     }
   };
 
-  const rows = groups.map((group: any) => [
-    group.name,
-    group.description ? (
-      <Tooltip isContentLeftAligned content={group.description}>
-        <span>{group.description.length > 23 ? group.description.slice(0, 20) + '...' : group.description}</span>
-      </Tooltip>
-    ) : (
-      <div className="pf-v5-u-color-400">No description</div>
-    ),
-    group.principalCount,
-    group.serviceAccounts || '?', // not currently in API
-    group.roleCount,
-    group.workspaces || '?', // not currently in API
-    formatDistanceToNow(new Date(group.modified), { addSuffix: true }),
-    {
-      cell: <ActionsColumn items={ROW_ACTIONS} />,
-      props: { isActionCell: true },
-    },
-  ]);
+  const rows = groups.map((group: any) => ({
+    id: group.uuid,
+    row: [
+      group.name,
+      group.description ? (
+        <Tooltip isContentLeftAligned content={group.description}>
+          <span>{group.description.length > 23 ? group.description.slice(0, 20) + '...' : group.description}</span>
+        </Tooltip>
+      ) : (
+        <div className="pf-v5-u-color-400">{intl.formatMessage(messages['usersAndUserGroupsNoDescription'])}</div>
+      ),
+      group.principalCount,
+      group.serviceAccounts || '?', // not currently in API
+      group.roleCount,
+      group.workspaces || '?', // not currently in API
+      formatDistanceToNow(new Date(group.modified), { addSuffix: true }),
+      enableActions && {
+        cell: <ActionsColumn items={rowActions} />,
+        props: { isActionCell: true },
+      },
+    ],
+  }));
 
   const pageSelected = rows.length > 0 && rows.every(isSelected);
   const pagePartiallySelected = !pageSelected && rows.some(isSelected);
@@ -107,9 +146,9 @@ const UserGroupsTable: React.FunctionComponent = () => {
   );
 
   return (
-    <DataView ouiaId={OUIA_ID} selection={selection}>
+    <DataView ouiaId={ouiaId} selection={selection}>
       <DataViewToolbar
-        ouiaId={`${OUIA_ID}-header-toolbar`}
+        ouiaId={`${ouiaId}-header-toolbar`}
         bulkSelect={
           <BulkSelect
             isDataPaginated
@@ -123,8 +162,8 @@ const UserGroupsTable: React.FunctionComponent = () => {
         }
         pagination={React.cloneElement(paginationComponent, { isCompact: true })}
       />
-      <DataViewTable variant="compact" aria-label="Users Table" ouiaId={`${OUIA_ID}-table`} columns={COLUMNS} rows={rows} />
-      <DataViewToolbar ouiaId={`${OUIA_ID}-footer-toolbar`} pagination={paginationComponent} />
+      <DataViewTable variant="compact" aria-label="Users Table" ouiaId={`${ouiaId}-table`} columns={COLUMNS} rows={rows} />
+      <DataViewToolbar ouiaId={`${ouiaId}-footer-toolbar`} pagination={paginationComponent} />
     </DataView>
   );
 };