Make custom role delete modal reusable
What does this MR do and why?
On the Admin Area -> Settings -> Roles and Permissions page, there is a table that shows created custom roles. When Delete role is selected using the triple dot menu for a row, a confirmation modal is shown:
This MR does the following:
-
Previously, the delete modal was just the modal itself, and the actual deletion was handled by the parent component. However, we now need to re-use the delete functionality in two places. This MR changes the modal to a reusable component that shows the modal as well as handle the deletion itself, so that the component can be shared in two places.
-
Previously, the modal would immediately hide when the
Delete rolebutton is clicked, and the entire page is shown as loading while it does the deletion and refreshes the table:
This has been changed so that the modal shows the loading state while the delete is happening, and then the table shows as loading while it's refreshing. The initial load still shows the full-page loading spinner because we don't know at that point whether to show the empty state (no roles created) or the table (at least 1 role created):
- Previously, when there is an error with the query, an error alert is shown, but the empty state component is also shown. To avoid confusion, this MR changes it so that only the error is shown:
| Before | After |
|---|---|
 |
 |
- On deletion errors, an error message is shown in the modal:
 |
How to set up and validate locally
See this video (with audio commentary) for validation steps:
Related to #468386 (closed)