Skip to content

Refactor delete project button: rename adjourned to delayed in code

What does this MR do and why?

Related to #339478

During the implementation of delayed group and project deletion, we used various terminology in the documentation and in the codebase. We converged on a single set of terms. We use:

This MR is focusing on frontend "project deletion button".

it changes:

  • in ee/app/views/projects/_remove.html.haml renames local vars adjourned_deletion to delayed_deletion and adjourned_date to delayed_date
  • rename id #js-project-adjourned-delete-button to #js-project-delayed-delete-button
  • rename ee/projects/project_adjourned_delete_button.js to ee/projects/project_delayed_delete_button.js
  • rename ee/app/assets/javascripts/projects/components/project_adjourned_delete_button.vue to ee/app/assets/javascripts/projects/components/project_delayed_delete_button.vue
  • rename prop adjournedRemovalDate to delayedDeletionDate in components/project_delayed_delete_button.vue
  • update ee/spec/frontend/projects/components/project_delayed_delete_button_spec.js

"Visible" changes:

HTML rendered by ee/app/views/projects/_remove.html.haml

  • data-adjourned-removal-date to data-delayed-removal-date
  • id="js-project-adjourned-delete-button" to id="js-project-delayed-delete-button"

Before

<!-- END ee/app/views/projects/settings/_marked_for_removal.html.haml -->

<div data-adjourned-removal-date="2022-11-28" data-confirm-phrase="gitlab-org/gitlab-shell" data-forks-count="0" data-form-path="/gitlab-org/gitlab-shell" data-is-fork="" data-issues-count="29" data-merge-requests-count="16" data-restore-help-path="/help/user/project/settings/index#restore-a-project" data-stars-count="0" id="js-project-adjourned-delete-button"></div>
</div>
<!-- END ee/app/views/projects/_remove.html.haml -->

After

<!-- END ee/app/views/projects/settings/_marked_for_removal.html.haml -->

<div data-confirm-phrase="gitlab-org/gitlab-shell" data-delayed-deletion-date="2022-11-28" data-forks-count="0" data-form-path="/gitlab-org/gitlab-shell" data-is-fork="" data-issues-count="29" data-merge-requests-count="16" data-restore-help-path="/help/user/project/settings/index#restore-a-project" data-stars-count="0" id="js-project-delayed-delete-button"></div>
</div>
<!-- END ee/app/views/projects/_remove.html.haml -->

ProjectDelayedDeleteButton Vue component

  • component rename
  • rename prop adjournedRemovalDate to delayedRemovalDate

Before

image

After

image

How to set up and validate locally

First of all, "delayed project deletion" has to be enabled:

To enable delayed deletion of projects in a group:

  1. On the top bar, select Main menu > Groups and find your group.
  2. On the left sidebar, select Settings > General.
  3. Expand the Permissions and group features section.
  4. Scroll to:
    • (GitLab 15.1 and later) Deletion protection and select Keep deleted projects.
    • (GitLab 15.0 and earlier) Enable delayed project deletion and tick the checkbox.
  5. Optional. To prevent subgroups from changing this setting, select:
    • (GitLab 15.1 and later), Enforce deletion protection for all subgroups
    • (GitLab 15.0 and earlier), Enforce for all subgroups.
  6. Select Save changes.

Then got to Delete a project, in project settings:

  1. On the top bar, select Main menu > Projects and find your project.
  2. On the left sidebar, select Settings > General.
  3. Expand Advanced.
  4. In the “Delete project” section, select Delete project.

Then, inspect "Delete Project" button with Browser inspector and Vue plugin to see changes.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #339478

Edited by Laurent Deketelaere

Merge request reports