UX: Standardising Deletion Experience

Problem

Several foundational UX improvements have been identified that need to be addressed to reduce inconsistency in our deletion flow. These improvements, while independent of the upcoming Bin concept, will establish a solid foundation for its implementation.

Key identified user problem:

  • Inconsistent deletion experiences in all areas (lists, details, admin)
  • Confusing variation in confirmation dialogs
  • Unclear distinction between initial deletion and permanent removal
  • Fragmented restore options
  • Poor deletion feedback after actions

Actions menu (List view)

List views including the following pages:

  • Your works/ Projects
  • Your works/ Groups
  • Explore/ Projects
  • Explore/ Groups
  • Admin area/ Projects
  • Admin area/ Groups
Before - Admin areas Before - List view After - 1st deletion After - 2nd deletion
Project Screenshot_2025-06-02_at_15.15.49_1 Screenshot_2025-06-02_at_15.14.52 list_view_-_project 2nd_deletion_-_list_view
Group Screenshot_2025-06-02_at_15.16.32_1 Screenshot_2025-06-02_at_15.16.42 list_view_-_project 2nd_deletion_-_list_view

Design changes:

  • Replace admin area action buttons with dropdown menu interface
  • Update "Delete" button text to "Delete permanently" for second-stage deletion
  • Update admin area deletion behavior: first deletion moves items to trash instead of permanently deleting them

Deletion confirmation modal

Screenshot 2025-11-24 at 15.07.12.png

There are multiple 'before' instances from quick actions, settings pages, and admin areas. The screenshot in the 'before' column shows an early reference point before we implemented service deletion as a quick action.

Following #397039, we agreed to add a checkpoint in the second deletion modal as a final warning to prevent data loss incidents like https://gitlab.com/gitlab-org/gitlab/-/issues/561680. To help users avoid accidental permanent deletion, we will include a 'View data export options' link at the end of the warning message that directs users to a help document explaining how to export their data.

Before After - 1st deletion After - 2nd deletion
Project Screenshot 2025-04-24 at 11.12.33.png Delete project 1.png Delete project 3.png
Group Screenshot 2025-05-01 at 16.31.57 1.png Delete group.png Delete group 3.png

Checkpoint message consideration:

  1. This action permanently deletes this group and all its data. GitLab support cannot restore it. View data export options.
  2. This action permanently deletes this project and all its data. Your administrator cannot restore it. View data export options.

I recommend option 2 because it works across .com, dedicated, and self-managed environments, while option (1) only works for .com and dedicated.

Design changes:

  • Update the icon from "Error" to "Warning" to better reflect that it's a warning message
  • Modal width should be consistence across all instances
  • Standardise the format of warning messages
  • Standardise IA to Title → Warning → Description → Copy and paste item path → Additional checkpoint (2nd deletion only) → Action (Button)
  • Question: Hide 0 count items under warning message. If all items are 0, we could consider removing the warning message altogether

Actions menu (Detail view)

Before After - 1st deletion After - 2nd deletion
Project Screenshot_2025-06-02_at_15.15.04 project_view 2nd_deletion_-_project_view
Group Screenshot_2025-06-02_at_15.16.59 group_view 2nd_deletion_-_group_view

Design changes:

  • Add "Archive", "Delete", and "Restore" actions to the dropdown menu for consistency with other action menus throughout the interface
  • Update "[Group/Project] settings" button text to "Edit" for consistency reason

Settings card

1st deletion

Before After
Screenshot_2025-05-01_at_17.10.43 Setting_card-3
Screenshot_2025-05-01_at_17.04.20_1 Setting_card-1

Design changes:

  • Update the title colour from "text-colour-danger" to "text-colour-default"
  • Update action button text from "Delete [Group/Project]" to "Delete" for consistency across action menus and setting cards
  • Remove "pending deletion .. 7 days" text to reduce cognitive load, as this information is already implied by the deletion date
  • Recommend updating date format from current "2025-05-08" to a clearer format (current format is ambiguous - could be interpreted as May 8th or August 5th).

2nd deletion

Before After
Screenshot_2025-05-01_at_17.06.42 Setting_card-3
Screenshot_2025-05-01_at_17.09.37 Setting_card-1

Design changes:

  • Update the title colour from "text-colour-danger" to "text-colour-default"
  • Update title from "Delete [group/project] immediately" to "Delete [group/project]"
  • Update action button text from "Delete [group/project] immediately" to "Delete permanently" for two reasons:(1) shorter action text & (2) items may not be deleted immediately but instead remain in "Deletion in progress" status for an extended period
  • Remove duplicated information such as "This action... immediately" from the card and move it to the delete confirmation modal for more concise copy

Restore item in pending deletion state

Before After
Screenshot_2025-05-01_at_17.06.46 Group_101
Screenshot_2025-05-01_at_17.09.42_1 Group_100

Design changes:

  • Update card title and background color from warning (yellow) to default styling
  • Update action button text from "Restore [group/project]" to "Restore" to be consistent with the action naming in live view
  • Update button style from "primary" to "default"

Toast feedback

1st deletion

Before After
Project Screenshot_2025-05-06_at_14.01.04_1 Toast
Group N/A Toast-1

2nd deletion

Before After
Project Screenshot_2025-05-06_at_14.03.01_1 Frame_12
Group Frame_10 Frame_11

Design changes:

  • Introduce an "undo" action that appears when a user deletes something for the first time, allowing them to reverse the deletion immediately
  • Update the deletion confirmation text to be more descriptive and less alarming. Change generic phrases like "Project [name] is being deleted" to more informative language such as "Project [name] moved to pending deletion" that better explains the actual state and process

Deletion notification

Pending deletion

Before After
Group Screenshot_2025-05-01_at_17.11.41 Alert
Group/project Screenshot_2025-05-01_at_17.11.59 Alert-3
Project Screenshot_2025-05-01_at_17.31.58 Alert-4

Deletion in progress (New state)

New
Group Alert-1
Project Alert-2

Design changes

  • Remove redundant language like "is pending deletion, so this project will also be..." and emphasize the key consequence with clear messaging such as "The items will be permanently deleted on [Date]" to provide users with essential deletion timeline information
  • Recommend updating date format from current "2025-05-08" to a clearer format (current format is ambiguous - could be interpreted as May 8th or August 5th).

To-Do

  • Design a uniform confirmation modals with clear titles and button labels
  • Design unified deletion and restoration controls throughout the entire interface (list views, detail pages, and admin panels) i.e. actions should be services on project/ group level
  • Ensure three-step flow everywhere: trigger → confirm → feedback
  • Ensure clear visual distinguish between "Schedule for deletion" and "Delete permanently" across action, confirmation and feedback
  • Create an impact level framework to communicate consequences at each stage i.e. 1st time deletion: light warning, 2nd time deletion: high warning
  • Design toast notifications with undo buttons for all deletion flows
  • Design a "Pending Deletion" view to manage scheduled deletions
Edited by Jason Hung