Add deployment approval UI MVC

What does this MR do and why?

Sets up the ability for users to approve and reject deployments from within the environments page.

Current information shown is how many approvals are needed and how many are done, as well as who has approved and when.

A rejection short cuts to killing the deployment.

This is currently only in the phased out environment UI, but built in a way that it should be easy to drop into the new one.

Screenshots or screen recordings

Screencast_2022-03-07_14_53_04

Screencast_2022-03-07_14_53_55

How to set up and validate locally

1. Enable runners in your GDK/Gitpod -- see instructions
2. Enable the new environment table

Feature.enable(:new_environments_table)

1. Then add the following .gitlab-ci.yml to a project for some deployments:

stages:
    - deploy
    - stop
image: alpine:latest

deploy-prod:
    stage: deploy
    script:
        - sleep 6000
        - echo "deploying prod"
    environment:
        name: production

deploy-staging:
    stage: deploy
    script:
        - echo "deploying staging"
    environment:
        name: staging
        url: https://example.com
    when: manual

deploy-review:
    stage: deploy
    script:
        - echo "Deploying review/$CI_COMMIT_REF_NAME"
    environment:
        name: review/$CI_COMMIT_REF_NAME
        auto_stop_in: 1 week
    only:
        - branches
    except:
        - main


stop_review_app:
  script: stop-review-app
  stage: stop
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    action: stop
  rules:
    - if: $CI_MERGE_REQUEST_ID
      when: manual

Run a pipeline to create the initial environments, then protect the staging environment in Settings > CI/CD.

Run another pipeline, and check the environments page.

MR acceptance checklist

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

• I have evaluated the MR acceptance checklist for this MR.

For #342180 (closed)

app/assets/javascripts/environments/components/deployment.vue

@@ -102,6 +102,9 @@ export default {
     refPath() {
       return this.ref?.refPath;
     },
+    needsApproval() {
+      return this.deployment.pendingApprovalCount > 0;
+    },
   },
   methods: {
     toggleCollapse() {
@@ -116,6 +119,7 @@ export default {
     showDetails: __('Show details'),
     hideDetails: __('Hide details'),
     triggerer: s__('Deployment|Triggerer'),
+    needsApproval: s__('Deployment|Needs Approval'),
     job: __('Job'),
     api: __('API'),
     branch: __('Branch'),
@@ -153,6 +157,9 @@ export default {
       <div :class="$options.headerDetailsClasses">
         <div :class="$options.deploymentStatusClasses">
           <deployment-status-badge v-if="status" :status="status" />
+          <gl-badge v-if="needsApproval" variant="warning">
+            {{ $options.i18n.needsApproval }}
+          </gl-badge>
           <gl-badge v-if="latest" variant="info">{{ $options.i18n.latestBadge }}</gl-badge>
         </div>
         <div class="gl-display-flex gl-align-items-center gl-gap-x-5">
@@ -199,6 +206,7 @@ export default {
       </gl-button>
     </div>
     <commit v-if="commit" :commit="commit" class="gl-mt-3" />
+    <div class="gl-mt-3"><slot name="approval" /></div>
     <gl-collapse :visible="visible">
       <div
         class="gl-display-flex gl-md-align-items-center gl-mt-5 gl-flex-direction-column gl-md-flex-direction-row gl-pr-4 gl-md-pr-0"