feat: create delete user groups modal #1703

CodyWMitchell · 2024-11-13T06:56:37Z

Description

RHCLOUD-32237

Create the modal that handled deletion of User Groups fitting the criteria below:

I can delete an existing user group.
I am prompted to verify the deletion and informed of the potential impacts (e.g. all associated role bindings for my organization with the group will be broken and any existing permissions associated with the bindings will be lost.)
I can confirm or cancel my request.
Upon cancellation, I am redirected to the previous page/task.
Upon confirming, I am presented with a success message and redirected to the User Group list.
I am presented with an error message if the user group is not deleted successfully.

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

karelhala

Looking good! Just a few tweaks here and there.

karelhala · 2024-11-14T12:34:02Z

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

+          title={
+            <FormattedMessage
+              {...messages.deleteUserGroupModalTitle}
+              values={{
+                count: currentGroups.length,
+                plural: currentGroups.length > 1 ? intl.formatMessage(messages.groups) : intl.formatMessage(messages.group),
+              }}
+            />
+          }


Looks like title props can only be string. You already have a message preconfigured to work with plural values

Suggested change

title={

<FormattedMessage

{...messages.deleteUserGroupModalTitle}

values={{

count: currentGroups.length,

plural: currentGroups.length > 1 ? intl.formatMessage(messages.groups) : intl.formatMessage(messages.group),

}}

/>

}

title={intl.formatMessage(messages.deleteUserGroupModalTitle, { count: currentGroups.length })}

karelhala · 2024-11-14T12:35:42Z

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

+                    onClick: () => {
+                      handleDeleteModalToggle(groups.filter((group) => selected.some((selectedGroup) => selectedGroup.id === group.uuid)));
+                    },


selectedGroup has implicit any type

Suggested change

onClick: () => {

handleDeleteModalToggle(groups.filter((group) => selected.some((selectedGroup) => selectedGroup.id === group.uuid)));

},

onClick: () => {

handleDeleteModalToggle(

groups.filter((group) => selected.some((selectedGroup: { id: string }) => selectedGroup.id === group.uuid))

);

},

karelhala · 2024-11-14T12:43:07Z

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

+          cell: (
+            <ActionsColumn
+              items={[
+                {
+                  title: intl.formatMessage(messages['usersAndUserGroupsEditUserGroup']),
+                  onClick: () => console.log('EDIT USER GROUP'),
+                },
+                {
+                  title: intl.formatMessage(messages['usersAndUserGroupsDeleteUserGroup']),
+                  onClick: () => handleDeleteModalToggle([group]),
+                },
+              ]}
+              rowData={group}
+            />
+          ),


If the group has either system=true or platform_default=true flag enabled we can't show the kebab menu at all. These groups can't be changed or removed.

Actions are now disabled for system and platform_default rows, both individually and when one is included within a bulk selection.

karelhala · 2024-11-14T12:44:49Z

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

+          }
+          actions={
+            <div data-ouia-component-id={`${ouiaId}-actions-dropdown`}>
+              <ActionsColumn


Let's use newer functionality from DataView https://react-data-view-pr-data-view-131.surge.sh/extensions/data-view/components#actions-example this would allow us to keep actions button visible all the times.

@karelhala The <ResponsiveActions> component doesn't currently support disabling actions through any props like isDisabled or disabled. I'll switch to using it once that functionality is added. We need that here in the case that no rows are selected or any rows are system or platform_default (see #1703 (comment)).

All other feedback should be resolved ✅

You can disable each action by setting isDisabled on ResponsiveAction

<ResponsiveActions breakpoint="lg"> <ResponsiveAction isPersistent isDisabled> Persistent Action </ResponsiveAction> <ResponsiveAction isDisabled isPinned variant='secondary'> Pinned Action </ResponsiveAction> <ResponsiveAction> Overflow Action </ResponsiveAction> </ResponsiveActions>

@karelhala It's working when the ResponsiveAction is marked isPersistent, but for actions within the dropdown (not isPersistent or isPinned), isDisabled isn't disabling them.

For example, both actions in the screenshot are isDisabled={true}, but only the Edit button is being disabled.

CodyWMitchell · 2024-11-16T04:44:58Z

looks like some tests are failing for the roles page:

22:42:22   2 failing
22:42:22 
22:42:22   1) Roles page
22:42:22        should display the Roles table and correct data:
22:42:22      AssertionError: Timed out retrying after 4000ms: Expected to find element: `[data-ouia-component-id="RolesTable-detail-drawer"]`, but never found it.
22:42:22       at Context.eval (webpack://insights-****/./cypress/e2e/roles.cy.ts:54:0)
22:42:22 
22:42:22   2) Roles page
22:42:22        should display the details drawer:
22:42:22      AssertionError: Timed out retrying after 4000ms: Expected to find element: `[data-ouia-component-id^="RolesTable-table-tr-0"]`, but never found it.
22:42:22       at eval (webpack://insights-****/./cypress/e2e/roles.cy.ts:68:0)
22:42:22   at Array.forEach (<anonymous>)
22:42:22       at Context.eval (webpack://insights-****/./cypress/e2e/roles.cy.ts:67:0)

CodyWMitchell · 2024-11-19T04:58:24Z

/retest

feat: create delete user groups modal

3b08e37

CodyWMitchell force-pushed the create-delete-groups-modal branch from 078cfaf to 3b08e37 Compare November 13, 2024 06:59

CodyWMitchell changed the title ~~Create delete groups modal~~ feat: create delete user groups modal Nov 13, 2024

CodyWMitchell marked this pull request as ready for review November 13, 2024 07:00

CodyWMitchell requested a review from a team as a code owner November 13, 2024 07:00

CodyWMitchell mentioned this pull request Nov 13, 2024

feat: create delete user groups modal #1698

Closed

15 tasks

karelhala reviewed Nov 14, 2024

View reviewed changes

CodyWMitchell added 4 commits November 15, 2024 00:15

fix: changes from pr feedback

dc7fc11

Merge branch 'master' into create-delete-groups-modal

09c0eef

fix: use responsive actions for user group toolbar

2deac01

fix: update ouiaId for cypress test

56494a5

CodyWMitchell requested a review from karelhala November 19, 2024 07:56

karelhala approved these changes Nov 19, 2024

View reviewed changes

karelhala merged commit ed28740 into RedHatInsights:master Nov 19, 2024
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: create delete user groups modal #1703

feat: create delete user groups modal #1703

CodyWMitchell commented Nov 13, 2024 •

edited

Loading

karelhala left a comment

karelhala Nov 14, 2024

karelhala Nov 14, 2024

karelhala Nov 14, 2024

CodyWMitchell Nov 15, 2024

karelhala Nov 14, 2024

CodyWMitchell Nov 15, 2024 •

edited

Loading

CodyWMitchell Nov 15, 2024

karelhala Nov 15, 2024

CodyWMitchell Nov 16, 2024 •

edited

Loading

CodyWMitchell commented Nov 16, 2024

CodyWMitchell commented Nov 19, 2024

feat: create delete user groups modal #1703

feat: create delete user groups modal #1703

Conversation

CodyWMitchell commented Nov 13, 2024 • edited Loading

Description

Screenshots

Checklist ☑️

karelhala left a comment

Choose a reason for hiding this comment

karelhala Nov 14, 2024

Choose a reason for hiding this comment

karelhala Nov 14, 2024

Choose a reason for hiding this comment

karelhala Nov 14, 2024

Choose a reason for hiding this comment

CodyWMitchell Nov 15, 2024

Choose a reason for hiding this comment

karelhala Nov 14, 2024

Choose a reason for hiding this comment

CodyWMitchell Nov 15, 2024 • edited Loading

Choose a reason for hiding this comment

CodyWMitchell Nov 15, 2024

Choose a reason for hiding this comment

karelhala Nov 15, 2024

Choose a reason for hiding this comment

CodyWMitchell Nov 16, 2024 • edited Loading

Choose a reason for hiding this comment

CodyWMitchell commented Nov 16, 2024

CodyWMitchell commented Nov 19, 2024

CodyWMitchell commented Nov 13, 2024 •

edited

Loading

CodyWMitchell Nov 15, 2024 •

edited

Loading

CodyWMitchell Nov 16, 2024 •

edited

Loading