Modal for adding new deployment rules does not warn users if rule already exists

Summary

When adding a new deployment rule, the modal form does not restrict adding rules that conflict with existing rules, even though that does not do anything (recording)

Steps to reproduce

1. View Settings -> CI/CD -> Protected Environments
2. Add a rule.
3. In the table below, add the same rule again.
4. Notice that the rule is not added, but users are not informed why.

Example Project

What is the current bug behavior?

Users can add a rule multiple times with nothing happening on the UI.

What is the expected correct behavior?

Users should not be allowed to add the same rule again, or should be warned that they are adding a duplicate rule.

Relevant logs and/or screenshots

CleanShot_20240115151729__1_

Output of checks

Results of GitLab environment info

Expand for output related to GitLab environment info

(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

Expand for output related to the GitLab application check

(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)
(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)
(we will only investigate if the tests are passing)

Possible fixes

Design:

Add an invalid-feedback text for the form input to warn the users that the rule already exists.

Implementation guide

Note: Deployment approval is a GitLab Premium feature. You'll need an Enterprise edition license to contribute.

1. Update edit_protected_environments_list component to provide existing approvalRules to the add_approvers component. Create a competed to access the rules via this.addingEnvironment[APPROVER_RULE_KEY].
2. Update add_approvers component:
   • add a method to check if the approval exists in the approvalRules array
   • utilize the method for the gl-form-input's state property
   • update the invalid-feedback template to show different text for the existing approval rule. The text is: s__('ProtectedEnvironments|This rule already exists.')
3. Update the corresponding tests (1, 2).