Resolve "Merge request widget - CI information has different margins"

4 files changed, 109 insertions, 92 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
deleted file mode 100644
index 029832bdd27..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import PipelineStage from '../../pipelines/components/stage.vue';
-import ciIcon from '../../vue_shared/components/ci_icon.vue';
-import icon from '../../vue_shared/components/icon.vue';
-
-export default {
-  name: 'MRWidgetPipeline',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  components: {
-    'pipeline-stage': PipelineStage,
-    ciIcon,
-    icon,
-  },
-  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 || {};
-    },
-  },
-  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">
-                <div
-                  v-if="mr.pipeline.details.stages.length > 0"
-                  v-for="stage in mr.pipeline.details.stages"
-                  class="stage-container dropdown js-mini-pipeline-graph">
-                  <pipeline-stage :stage="stage" />
-                </div>
-              </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>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
new file mode 100644
index 00000000000..dbc65462377
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue
@@ -0,0 +1,104 @@
+<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';
+
+  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,
+    },
+    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;
+      },
+    },
+  };
+</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">
+              <div
+                v-if="hasStages"
+                v-for="(stage, i) in pipeline.details.stages"
+                :key="i"
+                class="stage-container dropdown js-mini-pipeline-graph">
+                <pipeline-stage :stage="stage" />
+              </div>
+            </span>
+          </span>
+
+          <template v-if="pipeline.coverage">
+            Coverage {{pipeline.coverage}}%
+          </template>
+
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 49340c232c8..5bd8b99420a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/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';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index aaff9ee6518..f82938aa8a9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -236,7 +236,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"