Port of 38395-mr-widget-ci to EE

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js

-import PipelineStage from '../../pipelines/components/stage.vue';
-import ciIcon from '../../vue_shared/components/ci_icon.vue';
-import icon from '../../vue_shared/components/icon.vue';
-import linkedPipelinesMiniList from '../../vue_shared/components/linked_pipelines_mini_list.vue';
-
-export default {
-  name: 'MRWidgetPipeline',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  components: {
-    'pipeline-stage': PipelineStage,
-    ciIcon,
-    icon,
-    linkedPipelinesMiniList,
-  },
-  computed: {
-    hasPipeline() {
-      return this.mr.pipeline && Object.keys(this.mr.pipeline).length > 0;
-    },
-    hasCIError() {
-      const { hasCI, ciStatus } = this.mr;
-
-      return hasCI && !ciStatus;
-    },
-    stageText() {
-      return this.mr.pipeline.details.stages.length > 1 ? 'stages' : 'stage';
-    },
-    status() {
-      return this.mr.pipeline.details.status || {};
-    },
-
-    /* We typically set defaults ([]) in the store or prop declarations, but because triggered
-     * and triggeredBy are appended to `pipeline`, we can't set defaults in the store, and we
-     * need to check their length here to prevent initializing linked-pipeline-mini-lists
-     * unneccessarily. */
-
-    triggered() {
-      return this.mr.pipeline.triggered || [];
-    },
-    triggeredBy() {
-      const response = this.mr.pipeline.triggered_by;
-      return response ? [response] : [];
-    },
-  },
-  template: `
-    <div
-      v-if="hasPipeline || hasCIError"
-      class="mr-widget-heading">
-      <div class="ci-widget media">
-        <template v-if="hasCIError">
-          <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
-            <span
-              aria-hidden="true">
-              <icon
-                name="status_failed"/>
-            </span>
-          </div>
-          <div class="media-body">
-            Could not connect to the CI server. Please check your settings and try again
-          </div>
-        </template>
-        <template v-else-if="hasPipeline">
-          <div class="ci-status-icon append-right-10">
-            <a
-              class="icon-link"
-              :href="this.status.details_path">
-              <ci-icon :status="status" />
-            </a>
-          </div>
-          <div class="media-body">
-            <span>
-              Pipeline
-              <a
-                :href="mr.pipeline.path"
-                class="pipeline-id">#{{mr.pipeline.id}}</a>
-            </span>
-            <span class="mr-widget-pipeline-graph">
-              <span class="stage-cell">
-                <linked-pipelines-mini-list
-                  v-if="triggeredBy.length"
-                  :triggered-by="triggeredBy"
-                  />
-
-                <div
-                  v-if="mr.pipeline.details.stages.length > 0"
-                  v-for="(stage, index) in mr.pipeline.details.stages"
-                  class="stage-container dropdown js-mini-pipeline-graph"
-                  :class="{
-                    'has-downstream': index === mr.pipeline.details.stages.length - 1 && triggered.length
-                  }">
-                  <pipeline-stage :stage="stage" />
-                </div>
-
-                <linked-pipelines-mini-list
-                  v-if="triggered.length"
-                  :triggered="triggered"
-                  />
-              </span>
-            </span>
-            <span>
-              {{mr.pipeline.details.status.label}} for
-              <a
-                :href="mr.pipeline.commit.commit_path"
-                class="commit-sha js-commit-link">
-                {{mr.pipeline.commit.short_id}}</a>.
-            </span>
-            <span
-              v-if="mr.pipeline.coverage"
-              class="js-mr-coverage">
-              Coverage {{mr.pipeline.coverage}}%
-            </span>
-          </div>
-        </template>
-      </div>
-    </div>
-  `,
-};

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

+<script>
+  import pipelineStage from '../../pipelines/components/stage.vue';
+  import ciIcon from '../../vue_shared/components/ci_icon.vue';
+  import icon from '../../vue_shared/components/icon.vue';
+  import linkedPipelinesMiniList from '../../vue_shared/components/linked_pipelines_mini_list.vue';
+
+  export default {
+    name: 'MRWidgetPipeline',
+    props: {
+      pipeline: {
+        type: Object,
+        required: true,
+      },
+      // This prop needs to be camelCase, html attributes are case insensive
+      // https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case
+      hasCi: {
+        type: Boolean,
+        required: false,
+      },
+      ciStatus: {
+        type: String,
+        required: false,
+      },
+    },
+    components: {
+      pipelineStage,
+      ciIcon,
+      icon,
+      linkedPipelinesMiniList,
+    },
+    computed: {
+      hasPipeline() {
+        return this.pipeline && Object.keys(this.pipeline).length > 0;
+      },
+      hasCIError() {
+        return this.hasCi && !this.ciStatus;
+      },
+      status() {
+        return this.pipeline.details &&
+          this.pipeline.details.status ? this.pipeline.details.status : {};
+      },
+      hasStages() {
+        return this.pipeline.details &&
+          this.pipeline.details.stages &&
+          this.pipeline.details.stages.length;
+      },
+
+      /* We typically set defaults ([]) in the store or prop declarations, but because triggered
+      * and triggeredBy are appended to `pipeline`, we can't set defaults in the store, and we
+      * need to check their length here to prevent initializing linked-pipeline-mini-lists
+      * unneccessarily. */
+      triggered() {
+        return this.pipeline.triggered || [];
+      },
+      triggeredBy() {
+        const response = this.pipeline.triggered_by;
+        return response ? [response] : [];
+      },
+    },
+  };
+</script>
+<template>
+  <div
+    v-if="hasPipeline || hasCIError"
+    class="mr-widget-heading">
+    <div class="ci-widget media">
+      <template v-if="hasCIError">
+        <div class="ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-10">
+          <icon
+            name="status_failed"/>
+        </div>
+        <div class="media-body">
+          Could not connect to the CI server. Please check your settings and try again
+        </div>
+      </template>
+      <template v-else-if="hasPipeline">
+        <a
+          class="append-right-10"
+          :href="this.status.details_path">
+          <ci-icon :status="status" />
+        </a>
+        <div class="media-body">
+          Pipeline
+          <a
+            :href="pipeline.path"
+            class="pipeline-id">
+            #{{pipeline.id}}
+          </a>
+          {{pipeline.details.status.label}} for
+          <a
+            :href="pipeline.commit.commit_path"
+            class="commit-sha js-commit-link">
+            {{pipeline.commit.short_id}}</a>.
+
+          <span class="mr-widget-pipeline-graph">
+            <span class="stage-cell">
+              <linked-pipelines-mini-list
+                v-if="triggeredBy.length"
+                :triggered-by="triggeredBy"
+                />
+
+              <div
+                v-if="hasStages"
+                v-for="(stage, i) in pipeline.details.stages"
+                :key="i"
+                class="stage-container dropdown js-mini-pipeline-graph"
+                :class="{
+                  'has-downstream': i === pipeline.details.stages.length - 1 && triggered.length
+                }">
+                <pipeline-stage :stage="stage" />
+              </div>
+
+              <linked-pipelines-mini-list
+                v-if="triggered.length"
+                :triggered="triggered"
+                />
+            </span>
+          </span>
+
+          <template v-if="pipeline.coverage">
+            Coverage {{pipeline.coverage}}%
+          </template>
+
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/dependencies.js

@@ -13,7 +13,7 @@ export { default as Vue } from 'vue';
 export { default as SmartInterval } from '~/smart_interval';
 export { default as WidgetHeader } from './components/mr_widget_header';
 export { default as WidgetMergeHelp } from './components/mr_widget_merge_help';
-export { default as WidgetPipeline } from './components/mr_widget_pipeline';
+export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
 export { default as WidgetDeployment } from './components/mr_widget_deployment';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links';
 export { default as MergedState } from './components/states/mr_widget_merged';

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -233,7 +233,10 @@ export default {
       <mr-widget-header :mr="mr" />
       <mr-widget-pipeline
         v-if="shouldRenderPipelines"
-        :mr="mr" />
+        :pipeline="mr.pipeline"
+        :ci-status="mr.ciStatus"
+        :has-ci="mr.hasCI"
+        />
       <mr-widget-deployment
         v-if="shouldRenderDeployments"
         :mr="mr"

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js

@@ -26,7 +26,10 @@ export default {
       <mr-widget-header :mr="mr" />
       <mr-widget-pipeline
         v-if="shouldRenderPipelines"
-        :mr="mr" />
+        :pipeline="mr.pipeline"
+        :ci-status="mr.ciStatus"
+        :has-ci="mr.hasCI"
+        />
       <mr-widget-deployment
         v-if="shouldRenderDeployments"
         :mr="mr"