1 files changed, 74 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
new file mode 100644
index 00000000000..5f5fe67b3c1
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -0,0 +1,74 @@
+<script>
+import Deployment from './deployment.vue';
+import MrWidgetContainer from './mr_widget_container.vue';
+import MrWidgetPipeline from './mr_widget_pipeline.vue';
+
+/**
+ * Renders the pipeline and related deployments from the store.
+ *
+ * | Props         | Description
+ * |---------------|-------------
+ * | `mr`          | This is the mr_widget store
+ * | `isPostMerge` | If true, show the "post merge" pipeline and deployments
+ */
+export default {
+  name: 'MrWidgetPipelineContainer',
+  components: {
+    Deployment,
+    MrWidgetContainer,
+    MrWidgetPipeline,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
+    isPostMerge: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    pipeline() {
+      return this.isPostMerge ? this.mr.mergePipeline : this.mr.pipeline;
+    },
+    branch() {
+      return this.isPostMerge ? this.mr.targetBranch : this.mr.sourceBranch;
+    },
+    branchLink() {
+      return this.isPostMerge ? this.mr.targetBranch : this.mr.sourceBranchLink;
+    },
+    deployments() {
+      return this.isPostMerge ? this.mr.postMergeDeployments : this.mr.deployments;
+    },
+    deploymentClass() {
+      return this.isPostMerge ? 'js-post-deployment' : 'js-pre-deployment';
+    },
+    hasDeploymentMetrics() {
+      return this.isPostMerge;
+    },
+  },
+};
+</script>
+<template>
+  <mr-widget-container>
+    <mr-widget-pipeline
+      :pipeline="pipeline"
+      :ci-status="mr.ciStatus"
+      :has-ci="mr.hasCI"
+      :source-branch="branch"
+      :source-branch-link="branchLink"
+      :troubleshooting-docs-path="mr.troubleshootingDocsPath"
+    />
+    <div v-if="deployments.length" slot="footer" class="mr-widget-extension">
+      <deployment
+        v-for="deployment in deployments"
+        :key="deployment.id"
+        :class="deploymentClass"
+        :deployment="deployment"
+        :show-metrics="hasDeploymentMetrics"
+      />
+    </div>
+  </mr-widget-container>
+</template>