Improve error messages of Protected Environments Setting UI/UX (Project-level)
Problem
When a user encountered an error, they see a flash message Failed to protect the environment
in the setting UI, however, they have no idea what parameters were exactly problematic. We should show a detailed message to give a user hint about how to fix the error.
For example,
Duplicate environment name/tiers
Update to an empty allowlist
I think what's missing here is that backend properly sends the error reason to the frontend, and the frontend shows it.
Proposal
- For MVC we just adjust the content of the error message to be more specific for the problem.
- In addition to this, we'll want to hide already protected environments (but we keep the error for the edge case where the environment you're about to protect is protected between you selecting it and protecting it).
Already Protected | Empty-Allow List |
---|---|
Technical proposal
The error handling logic related to creating a project-level protected environment is located in ee/app/assets/javascripts/protected_environments/create_protected_environment.vue
in submitForm()
function.
According to this thread we can assume that if a non-network error is received from the API, is the case when the environment is already protected. We should add this check and a new error message to the error handling block of this function