Allow deletion of projects from group overview

Problem

The group overview page lists both groups and projects in the tab Subgroups and projects. From there, groups have a quick action menu, including a deletion option in case the user has Owner permissions, and therewith the right to remove the group they are looking at.

Screenshot_2024-02-23_at_11.38.03

Projects are listed right underneath groups in the combined list, but do not contain a quick action to delete them. This means when a user wants to delete a project, they have to access the project, navigate to the settings, and start the deletion process. For groups, the action links directly to the group deletion action in the settings.

Screenshot_2024-02-23_at_11.37.49

Proposal

  • Introduce an ellipse menu for row items that are projects.
    • The ellipse menu should appear when the user has the ability to perform at least one of the actions captured in the menu.
  • Clicking Delete should trigger the deletion modal used in typical project deletion flow.
  • Delete should only be listed for projects that the user has delete permissions for, either due to their default role or custom role for that project.
  • Projects that the user doesn't have permission to delete should not display the elliptical menu. Ensure that instead of the elliptical menu a whitespace is shown in such a way that the right hand side of the row is aligned regardless of whether the menu is available or not (see mockup).
Group overview list Project ellipse menu
image image.png

Note: Mockup is also showing Edit functionality from #443523 (closed)

Implementation guide

  1. Add countsAreLoading prop to app/assets/javascripts/projects/components/shared/delete_modal.vue
  2. Update app/serializers/group_child_entity.rb#L60 to:
if project?
  can?(request.current_user, :admin_group, instance)
else 
  can?(request.current_user, :remove_project, instance)
  1. Remove this.isGroup from app/assets/javascripts/groups/components/group_item.vue#L99
  2. Check item type and render app/assets/javascripts/projects/components/shared/delete_modal.vue in app/assets/javascripts/groups/components/item_actions.vue if it is a project
  3. Again check item type in app/assets/javascripts/groups/components/item_actions.vue#L67. If it is a project open delete_modal.vue and make a GraphQL query to get the resource counts.
  4. After confirmation use app/assets/javascripts/api/projects_api.js#L53 to delete the project
Edited by Peter Hegman