Allow users to select which group to approve as

Related backend support: #448548 (closed)

Why

See discussion in #425759 (closed)

In brief, users need to be able to say what group they are approving as when approving deployments on protected environments.

What

We need something similar to what was proposed in this Design Thread (copying over for convenience, thanks @emilybauman for the design input)

But for the first iteration we only want to select on group at a time.

Note

The backend support issue is underway with a graphQL update that will support this.

for visual of the graphQL shape see this MR screenshot section: !148033 (merged)

Technical Proposal

We add a column to the table in ee/app/assets/javascripts/environments/components/multiple_approval_rules_table.vue showing a checkbox for rules the user is allowed to approve, all checked on load. We modify queries requesting approval summaries (ee/app/assets/javascripts/deployments/graphql/fragments/approval_summary.fragment.graphql, ee/app/assets/javascripts/environments/graphql/queries/deployment.query.graphql) to request the new GraphQL property added in !148033 (merged). We emit an event, including on load, when boxes are checked/unchecked, so the parent component (ee/app/assets/javascripts/deployments/components/deployment_approvals.vue, ee/app/assets/javascripts/environments/components/environment_approval.vue) can track which rules we are approving.

Once the form is submitted, we map over all rules the user is approving, transforming them into the approval call. Each rule needs its own approval call, so we can pass in the rule ID for the representedAs property. IF A COMMENT IS PROVIDED, IT MUST BE INCLUDED ON THE FIRST APPROVAL AND MUST NOT BE INCLUDED ON SUBSEQUENT RULES.

Rejection behaviour does not change here, but the button text must be updated.