Skip to content

Project Admin - Fix delete project after email message

What does this MR do and why?

Closes #454772 (closed)

Inactive project deletion is located in the Admin Settings and involves a Vue application nested inside of a HAML form and the form submission is handled via HTML/Rails. Due to this we have Vue level form validation and then HTML validation through a method on the inputs called setCustomValidity.

In Inactive project deletion we have two related fields Delete Project Field and Email After Field. These fields to be valid must be:

  1. Greater than (>) 0
  2. Delete Project Field > Email After Field

Currently, Vue handles its validation through computed properties and the HTML validation (setCustomValidity) on a field is only updated when the field is updated through a @change event. This causes an issue since the two fields are related based on condition 2 above when both fields are invalid, and then, when one field is updated there is no logic to mark the other field valid again.

Explanation of bug:

  1. Delete Project Field is 3 and Email After Field is 2 to start.
  2. Delete Project Field is updated from 3 => 2
    • HAML marks Delete Project Field invalid as Delete Project Field isn't greater than Email After Field
  3. Email After Field is updated form 2 => 1
    • HAML marks Email After Field valid as Email After Field is less than Delete Project Field
  4. Issue: Nothing ever goes back and marks Delete Project Field as valid since it wasn't updated again.

The Fix

Switching from @change events to utilizing a watcher on the computed properties that drive the Vue validity will ensure that the Vue validity and HTML validity stay in sync and we no longer miss scenarios where the form should be submitted.

Screenshots or screen recordings

Before - Bug After - Fix
Before_-_Bug After_-_Fix

How to set up and validate locally

  1. Navigate to Admin
  2. Navigate in sidebar to Admin > Settings > Repository
  3. Expand section Repository maintenance
  4. Scroll down and enable Inactive project deletion
  5. Set Delete Project Field to 3 and Email After Field to 2 and save.
  6. Update Delete Project Field to 2
  7. Ensure Vue error appears (red text under field)
  8. Click save
  9. Ensure HTML error appears (popup on field)
  10. Update Email After Field to 1
  11. Ensure all errors go away
  12. Click save
  13. Ensure save is successful and field updates are preserved after reload

Related to #454772 (closed)

Edited by Zack Cuddy

Merge request reports

Loading