Add user group modal #1673

CodyWMitchell · 2024-10-17T13:59:31Z

Description

Creates Add to user group modal that can be triggered by selecting rows and clicking "Add to user group" button or by selecting "Add to user group" in the action menu for a row. Inactive users cannot be added to user groups.

Modal reuses the existing UserGroupsTable component.

RHCLOUD-34262

Screenshots

Checklist ☑️

PR only fixes one issue or story
Change reviewed for extraneous code
UI best practices adhered to
Commits squashed and meaningfully named
All PR checks pass locally (build, lint, test, E2E)

(Optional) QE: Needs QE attention (OUIA changed, perceived impact to tests, no test coverage)
(Optional) QE: Has been mentioned
(Optional) UX: Needs UX attention (end user UX modified, missing designs)
(Optional) UX: Has been mentioned

fhlavac · 2024-10-18T11:54:11Z

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

@@ -86,7 +122,7 @@ const UserGroupsTable: React.FunctionComponent = () => {
    group.roleCount,
    group.workspaces || '?', // not currently in API
    formatDistanceToNow(new Date(group.modified), { addSuffix: true }),
-    {
+    enableActions && {
      cell: <ActionsColumn items={ROW_ACTIONS} />,
      props: { isActionCell: true },
    },


@CodyWMitchell you can also pass ID to the rows like so

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">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 }), enableActions && { cell: <ActionsColumn items={ROW_ACTIONS} />, props: { isActionCell: true }, }, ], }));

this way you can get rid of the useEffect, you can use the ID in matchOption, and the add modal can receive just a list of IDs that will be sent to the API

fhlavac · 2024-10-18T12:12:11Z

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

+    const selectedUsernames = selectedUsers.map((user) => ({username: user[0]})); // TODO: fix - this seems gross
+    selectedGroups.forEach((group) => {
+      console.log(`Adding ${JSON.stringify(selectedUsernames)} to group ${group.name} - ${group.uuid}`);
+      //dispatch(addMembersToGroup(group.uuid, selectedUsernames)); // TODO: fix 'user' not found 404 error


I couldn't get 404 locally, but I got 400 - we should not try to update system roles, these have to be excluded from the list. Please, let me know if you still have issues figuring that out

fhlavac · 2024-10-23T15:29:32Z

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

+      title={'Add to user group'}
+      isOpen={isOpen}
+      onClose={handleCloseModal}
+      actions={[
+        <Button key="add" variant="primary" onClick={handleAddUsers} isDisabled={selectedGroups.length === 0}>
+          Add
+        </Button>,
+        <Button key="cancel" variant="link" onClick={handleCloseModal}>
+          Cancel
+        </Button>,
+      ]}
+      ouiaId={'add-user-group-modal'}
+    >
+      Select a user group to add{' '}
+      <span className="pf-v5-u-font-weight-bold">
+        {selectedUsers.length} user{selectedUsers.length > 1 && 's'}{' '}
+      </span>
+      to. These are all the user groups in your account. To manage user groups, go to user groups.
+      <UserGroupsTable
+        defaultPerPage={10}
+        useUrlParams={false}
+        ouiaId="iam-add-users-modal-table"
+        onChange={handleUserGroupsChange}
+        enableActions={false}
+      />
+    </Modal>


the strings should be localized

Because this is dynamic, I'm not sure the best way to localize it:

Select a user group to add{' '} <span className="pf-v5-u-font-weight-bold"> {selectedUsers.length} user{selectedUsers.length > 1 && 's'}{' '} </span> to. These are all the user groups in your account. To manage user groups, go to user groups.

Here is a similar use case present in remove-group-service-accounts.tsx

<FormattedMessage {...messages.removeServiceAccountsText} values={{ b: (text) => <b>{text}</b>, count: accountsCount, name: selectedServiceAccounts[0]?.name, group: group.name, }} />

Let me know if you have more questions 🙂

fhlavac · 2024-10-23T15:30:07Z

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

+    if (onChange) {
+      onChange(selected);
+    }


Suggested change

if (onChange) {

onChange(selected);

}

onChange?.(selected);

fhlavac · 2024-10-23T15:30:25Z

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

+          <span>{group.description.length > 23 ? group.description.slice(0, 20) + '...' : group.description}</span>
+        </Tooltip>
+      ) : (
+        <div className="pf-v5-u-color-400">No description</div>


should be localized

fhlavac · 2024-10-23T15:30:46Z

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

+      user.is_active ? 'Active' : 'Inactive',
+      user.is_org_admin ? 'Yes' : 'No',


fhlavac · 2024-10-23T15:30:56Z

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

+              isDisabled={selected.length === 0}
+              ouiaId={`${OUIA_ID}-add-user-button`}
+            >
+              Add to user group


fhlavac · 2024-10-23T15:32:10Z

@CodyWMitchell looks great, can you please add a simple cypress tests checking that the new modal works?

fhlavac · 2024-10-24T06:37:07Z

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

+          {intl.formatMessage(messages['usersAndUserGroupsCancel'])}
+        </Button>,
+      ]}
+      ouiaId={'add-user-group-modal'}


Suggested change

ouiaId={'add-user-group-modal'}

ouiaId="add-user-group-modal"

fhlavac · 2024-10-24T06:37:44Z

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

+      Select a user group to add{' '}
+      <span className="pf-v5-u-font-weight-bold">
+        {selectedUsers.length} user{selectedUsers.length > 1 && 's'}{' '}
+      </span>
+      to. These are all the user groups in your account. To manage user groups, go to user groups.


This one can be localized using FormattedMessage

fhlavac · 2024-10-24T06:38:33Z

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

+      { title: 'Add to user group', onClick: () => onAddUserClick([user]) },
+      { title: 'Remove from user group', onClick: () => console.log('REMOVE FROM USER GROUP') },


Needs to be localized

fhlavac · 2024-10-24T06:40:02Z

Just found two more strings, it looks great!

fhlavac

LGTM!

CodyWMitchell force-pushed the add-user-group-modal branch 2 times, most recently from bd704cf to c1ac030 Compare October 17, 2024 14:57

fhlavac reviewed Oct 18, 2024

View reviewed changes

CodyWMitchell force-pushed the add-user-group-modal branch 2 times, most recently from affc69f to 8ed12b1 Compare October 23, 2024 14:15

CodyWMitchell marked this pull request as ready for review October 23, 2024 14:36

fhlavac reviewed Oct 23, 2024

View reviewed changes

fhlavac reviewed Oct 24, 2024

View reviewed changes

CodyWMitchell force-pushed the add-user-group-modal branch 2 times, most recently from 95cc2bf to de85942 Compare October 24, 2024 22:08

feat: create add to user group modal

0112379

CodyWMitchell force-pushed the add-user-group-modal branch from de85942 to 0112379 Compare October 24, 2024 22:08

CodyWMitchell added 2 commits October 24, 2024 18:09

Merge branch 'master' into add-user-group-modal

ba97b60

fix: issues with merge commit

84917d3

fhlavac merged commit 49f96b8 into RedHatInsights:master Oct 25, 2024
9 of 10 checks passed

fhlavac reviewed Oct 25, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add user group modal #1673

Add user group modal #1673

CodyWMitchell commented Oct 17, 2024 •

edited

Loading

fhlavac Oct 18, 2024

fhlavac Oct 18, 2024 •

edited

Loading

fhlavac Oct 23, 2024

CodyWMitchell Oct 24, 2024 •

edited

Loading

fhlavac Oct 24, 2024

fhlavac Oct 23, 2024

fhlavac Oct 23, 2024

fhlavac Oct 23, 2024

fhlavac Oct 23, 2024

fhlavac commented Oct 23, 2024

fhlavac Oct 24, 2024

fhlavac Oct 24, 2024

fhlavac Oct 24, 2024 •

edited

Loading

fhlavac commented Oct 24, 2024

fhlavac left a comment

		user.is_active ? 'Active' : 'Inactive',
		user.is_org_admin ? 'Yes' : 'No',

	ouiaId={'add-user-group-modal'}
	ouiaId="add-user-group-modal"

		{ title: 'Add to user group', onClick: () => onAddUserClick([user]) },
		{ title: 'Remove from user group', onClick: () => console.log('REMOVE FROM USER GROUP') },

Add user group modal #1673

Add user group modal #1673

Conversation

CodyWMitchell commented Oct 17, 2024 • edited Loading

Description

Screenshots

Checklist ☑️

Choose a reason for hiding this comment

fhlavac Oct 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CodyWMitchell Oct 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fhlavac commented Oct 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fhlavac Oct 24, 2024 • edited Loading

Choose a reason for hiding this comment

fhlavac commented Oct 24, 2024

fhlavac left a comment

Choose a reason for hiding this comment

CodyWMitchell commented Oct 17, 2024 •

edited

Loading

fhlavac Oct 18, 2024 •

edited

Loading

CodyWMitchell Oct 24, 2024 •

edited

Loading

fhlavac Oct 24, 2024 •

edited

Loading