1 files changed, 77 insertions, 20 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 5d9f7cebcf2..33064f82ef7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -1,4 +1,6 @@
 <script>
+import _ from 'underscore';
+import { __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
 import createFlash from '../flash';
@@ -80,6 +82,7 @@ export default {
     const service = this.createService(store);
     return {
       mr: store,
+      state: store.state,
       service,
     };
   },
@@ -103,6 +106,17 @@ export default {
         (!this.mr.isNothingToMergeState && !this.mr.isMergedState)
       );
     },
+    shouldRenderMergedPipeline() {
+      return this.mr.state === 'merged' && !_.isEmpty(this.mr.mergePipeline);
+    },
+  },
+  watch: {
+    state(newVal, oldVal) {
+      if (newVal !== oldVal && this.shouldRenderMergedPipeline) {
+        // init polling
+        this.initPostMergeDeploymentsPolling();
+      }
+    }
   },
   created() {
     this.initPolling();
@@ -112,11 +126,19 @@ export default {
   mounted() {
     this.setFaviconHelper();
     this.initDeploymentsPolling();
+
+    if (this.shouldRenderMergedPipeline) {
+      this.initPostMergeDeploymentsPolling();
+    }
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);
     this.pollingInterval.destroy();
     this.deploymentsInterval.destroy();
+
+    if (this.postMergeDeploymentsInterval) {
+      this.postMergeDeploymentsInterval.destroy();
+    }
   },
   methods: {
     createService(store) {
@@ -146,7 +168,13 @@ export default {
             cb.call(null, data);
           }
         })
-        .catch(() => createFlash('Something went wrong. Please try again.'));
+        .catch(() => createFlash(__('Something went wrong. Please try again.')));
+    },
+    setFaviconHelper() {
+      if (this.mr.ciStatusFaviconPath) {
+        return setFaviconOverlay(this.mr.ciStatusFaviconPath);
+      }
+      return Promise.resolve();
     },
     initPolling() {
       this.pollingInterval = new SmartInterval({
@@ -158,8 +186,14 @@ export default {
       });
     },
     initDeploymentsPolling() {
-      this.deploymentsInterval = new SmartInterval({
-        callback: this.fetchDeployments,
+      this.deploymentsInterval = this.deploymentsPoll(this.fetchPreMergeDeployments);
+    },
+    initPostMergeDeploymentsPolling() {
+      this.postMergeDeploymentsInterval = this.deploymentsPoll(this.fetchPostMergeDeployments);
+    },
+    deploymentsPoll(callback) {
+      return new SmartInterval({
+        callback,
         startingInterval: 30000,
         maxInterval: 120000,
         hiddenInterval: 240000,
@@ -167,26 +201,29 @@ export default {
         immediateExecution: true,
       });
     },
-    setFaviconHelper() {
-      if (this.mr.ciStatusFaviconPath) {
-        return setFaviconOverlay(this.mr.ciStatusFaviconPath);
-      }
-      return Promise.resolve();
+    fetchDeployments(target) {
+      return this.service.fetchDeployments(target);
     },
-    fetchDeployments() {
-      return this.service
-        .fetchDeployments()
-        .then(res => res.data)
-        .then(data => {
+    fetchPreMergeDeployments() {
+      return this.fetchDeployments()
+        .then(({ data }) => {
           if (data.length) {
             this.mr.deployments = data;
           }
         })
-        .catch(() => {
-          createFlash(
-            'Something went wrong while fetching the environments for this merge request. Please try again.',
-          );
-        });
+        .catch(() => this.throwDeploymentsError());
+    },
+    fetchPostMergeDeployments(){
+      return this.fetchDeployments('merge_commit')
+        .then(({ data }) => {
+          if (data.length) {
+            this.mr.postMergeDeployments = data;
+          }
+        })
+      .catch(() => this.throwDeploymentsError());
+    },
+    throwDeploymentsError() {
+      createFlash(__('Something went wrong while fetching the environments for this merge request. Please try again.'));
     },
     fetchActionsContent() {
       this.service
@@ -199,7 +236,7 @@ export default {
             Project.initRefSwitcher();
           }
         })
-        .catch(() => createFlash('Something went wrong. Please try again.'));
+        .catch(() => createFlash(__('Something went wrong. Please try again.')));
     },
     handleNotification(data) {
       if (data.ci_status === this.mr.ciStatus) return;
@@ -264,10 +301,12 @@ export default {
       :has-ci="mr.hasCI"
       :source-branch="mr.sourceBranch"
       :source-branch-link="mr.sourceBranchLink"
+      :troubleshooting-docs-path="mr.troubleshootingDocsPath"
     />
     <deployment
       v-for="deployment in mr.deployments"
-      :key="deployment.id"
+      :key="`pre-merge-deploy-${deployment.id}`"
+      class="js-pre-merge-deploy"
       :deployment="deployment"
     />
     <div class="mr-section-container">
@@ -308,5 +347,23 @@ export default {
         <mr-widget-merge-help />
       </div>
     </div>
+
+    <template v-if="shouldRenderMergedPipeline">
+      <mr-widget-pipeline
+        class="js-post-merge-pipeline prepend-top-default"
+        :pipeline="mr.mergePipeline"
+        :ci-status="mr.ciStatus"
+        :has-ci="mr.hasCI"
+        :source-branch="mr.targetBranch"
+        :source-branch-link="mr.targetBranch"
+        :troubleshooting-docs-path="mr.troubleshootingDocsPath"
+      />
+      <deployment
+        v-for="postMergeDeployment in mr.postMergeDeployments"
+        :key="`post-merge-deploy-${postMergeDeployment.id}`"
+        :deployment="postMergeDeployment"
+        class="js-post-deployment"
+      />
+    </template>
   </div>
 </template>