Restore (deletion) action differs between groups and projects

Problem

When deleting a group or project, it is necessary to delete the group or project in question twice to ensure it is completely deleted. This is because deletion protection is enabled by default for all groups and projects.

After the first deletion step, a section appears under Settings > General > Advanced to restore the group or project in question. The styling of this section differs quite a lot between groups and projects. Also the positioning of the section is different between groups and projects.

Project restore via project settings

Screenshot_2024-02-23_at_11.40.22

Group restore via group settings

Screenshot_2024-02-23_at_11.41.15

Proposal

  • Align the styling of the Restore section between groups and projects. See the design below.
  • Align the positioning of the Restore section between group and project settings. Place the Restore option above the Delete option for both groups and projects.
  • Check whether the restore action differs in the Admin Area and Organization

image

Implementation Plan

Group Restore Action

  • Placement is already right above delete option ✅
  • Styling is already in a Card Component but needs some color and text changes
  1. Update title color to .gl-text-orange-500
  2. Update body text 
    %p 
      = (s_("GroupSettings|This group has been scheduled for deletion on %{strongStart}%{date}%{strongEnd}. To cancel the scheduled deletion, you can restore this group, including all its resources.") % { strongStart: "<strong>", strongEnd: "</strong>", date: date }).html_safe
  1. Remove button out of <p> tag to remove unneeded bottom margin
  2. Update body color to gl-bg-orange-50 in body_options:
  3. Add variant: :confirm to button

Project Restore Action

  • Placement is not correct and needs to be moved
  • Styling is not in a card component so it will need a full migration
  1. Relocate the _restore partial from its current location to right above the deletion partial.
  2. Copy over the changes you made on the group restore card into the projects restore partial
    • Be sure to leave the first few lines as is, regarding the conditions and date variable
    • The rest of the changes will assume you have copied the changes over
  3. Update the delete action on the button to the project one
    • href: namespace_project_restore_path(project.namespace, project), method: :post, variant: :confirm
  4. Update button text to = _('Restore project')
  5. Update body text to:
    %p
      = (s_("ProjectSettings|This project has been scheduled for deletion on %{strongStart}%{date}%{strongEnd}. To cancel the scheduled deletion, you can restore this group, including all its resources.") % { strongStart: '<strong>', strongEnd: '</strong>', date: date }).html_safe
  1. Update card title to _('Restore project')

Follow up or Bonus Points

We likely could create a shared restore component to use for both Project and Group settings, this would need the following variables:

  1. Type, Group or Project for the text
  2. Delete action for the button
  3. Date derived in parent component
  4. All render logic could be handled in the parent
Edited by Zack Cuddy