Add latest changes from gitlab-org/gitlab@master

5 files changed, 20 insertions, 3 deletions

diff --git a/app/assets/javascripts/environments/components/deployment.vue b/app/assets/javascripts/environments/components/deployment.vue
index f98edb6bb7d..19284b26d51 100644
--- a/app/assets/javascripts/environments/components/deployment.vue
+++ b/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"></slot></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"
diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue
index c039a663a68..80d9b300d3f 100644
--- a/app/assets/javascripts/environments/components/new_environment_item.vue
+++ b/app/assets/javascripts/environments/components/new_environment_item.vue
@@ -41,6 +41,8 @@ export default {
     TimeAgoTooltip,
     Delete,
     EnvironmentAlert: () => import('ee_component/environments/components/environment_alert.vue'),
+    EnvironmentApproval: () =>
+      import('ee_component/environments/components/environment_approval.vue'),
   },
   directives: {
     GlTooltip,
@@ -305,7 +307,11 @@ export default {
             :deployment="upcomingDeployment"
             :class="{ 'gl-ml-7': inFolder }"
             class="gl-pl-4"
-          />
+          >
+            <template #approval>
+              <environment-approval :environment="environment" @change="$emit('change')" />
+            </template>
+          </deployment>
         </div>
       </template>
       <div v-else :class="$options.deploymentClasses">
diff --git a/app/assets/javascripts/environments/components/new_environments_app.vue b/app/assets/javascripts/environments/components/new_environments_app.vue
index 3699f39b611..67fd6ffd975 100644
--- a/app/assets/javascripts/environments/components/new_environments_app.vue
+++ b/app/assets/javascripts/environments/components/new_environments_app.vue
@@ -175,11 +175,10 @@ export default {
     },
     resetPolling() {
       this.$apollo.queries.environmentApp.stopPolling();
+      this.$apollo.queries.environmentApp.refetch();
       this.$nextTick(() => {
         if (this.interval) {
           this.$apollo.queries.environmentApp.startPolling(this.interval);
-        } else {
-          this.$apollo.queries.environmentApp.refetch({ scope: this.scope, page: this.page });
         }
       });
     },
@@ -233,6 +232,7 @@ export default {
       :key="environment.name"
       class="gl-mb-3 gl-border-gray-100 gl-border-1 gl-border-b-solid"
       :environment="environment.latest"
+      @change="resetPolling"
     />
     <gl-pagination
       align="center"
diff --git a/app/assets/javascripts/environments/index.js b/app/assets/javascripts/environments/index.js
index 3b1d35c1f22..5805fe6b1c0 100644
--- a/app/assets/javascripts/environments/index.js
+++ b/app/assets/javascripts/environments/index.js
@@ -22,6 +22,7 @@ export default (el) => {
       apolloProvider,
       provide: {
         projectPath: el.dataset.projectPath,
+        projectId: el.dataset.projectId,
         defaultBranchName: el.dataset.defaultBranchName,
       },
       data() {
diff --git a/app/assets/javascripts/environments/new_index.js b/app/assets/javascripts/environments/new_index.js
index dd5c709c75a..d30ceb80f21 100644
--- a/app/assets/javascripts/environments/new_index.js
+++ b/app/assets/javascripts/environments/new_index.js
@@ -15,6 +15,7 @@ export default (el) => {
       helpPagePath,
       projectPath,
       defaultBranchName,
+      projectId,
     } = el.dataset;
 
     return new Vue({
@@ -26,6 +27,7 @@ export default (el) => {
         endpoint,
         newEnvironmentPath,
         helpPagePath,
+        projectId,
         canCreateEnvironment: parseBoolean(canCreateEnvironment),
       },
       render(h) {