Skip to content

Async Delete Modal - Shared Component

Zack Cuddy requested to merge zcuddy-refactor-async-delete-modal into master

Why?

Component to prepare for #421473 (closed)
Important: This change is behind a feature flag ui_for_organizations

We are actively implementing the UI for deleting projects and groups from the Organization list views. These delete requests are fired off asynchronously and the modal is expected to set a loading flag on the button and hide itself once the request is completed. This can get a bit complicated as the request can be far removed from the modal component.

This loading state was solved in a recent MR !144095 (merged) in which we used a delete modal designed for projects and asynchronous deletions.

When attempting to create the same experience for groups, it was discovered we were using a different delete modal that is more widely used in the code base and does not currently support the asynchronous loading state implemented in the delete project modal.

What?

Rather than risk breaking existing functionality on the more widely used modal, I thought it made sense to align the Project and Group list used for Organization under the same modal. This modal supports the async functionality out of the box. Additionally it can help provide a more succinct experience between the two lists.

This involved refactoring the modal to remove all project specific data and rather use props and slots when necessary to create a generalized modal that has all the needed functionality included.

UX Alignment

As part of combining the two modals, I also added an alert section to the Group delete modal similar to the Project modal. This will need to be approved and if we do not want it we can remove the show-modal-alert prop.

Screenshots or screen recordings

Before After
Groups List Screenshot_2024-02-22_at_12.46.25_PM Groups_-_After
Projects List (no change) Projects_-_Before Projects_-_After

How to set up and validate locally

Setup Organizations

  1. Access rails c
  2. Enable Feature Flag Feature.enable(:ui_for_organizations)
  3. Create the default organization and add root to it
you = User.find_by_username('root')
default_organization = Organizations::Organization.default_organization
Organizations::OrganizationUser.create!(organization_id: default_organization.id, user_id: you.id)

Testing

Projects

  1. Create a test project (or you can use an existing one)
  2. Navigate to the GDK home page ex: 127.0.0.1:3000/
  3. Click Organizations in the sidebar
  4. Click the Default Organization
  5. Click the Manage > Groups and projects in the sidebar
  6. Switch list to Projects in the dropdown
  7. Click the ... on the project you want to delete
  8. Ensure modal appears and button is disabled
  9. Enter project full name and ensure button is enabled
  10. Click delete button
  11. Ensure button switches to loading state (may be very quick)
  12. Ensure list reloads and project is now deleted

Groups

  1. Create a test group (or you can use an existing one)
  2. Navigate to the GDK home page ex: 127.0.0.1:3000/
  3. Click Organizations in the sidebar
  4. Click the Default Organization
  5. Click the Manage > Groups and projects in the sidebar
  6. Switch list to Groups in the dropdown
  7. Click the ... on the group you want to delete
  8. Ensure modal appears and button is disabled
  9. Enter group full name and ensure button is enabled
  10. Click delete button
  11. Modal should do nothing (this is by design and will be implemented in #421473 (closed))

Merge request reports