1 files changed, 58 insertions, 49 deletions
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
index 54a98abf860..48dff8c4916 100644
--- 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
@@ -1,56 +1,61 @@
 <script>
-  /* eslint-disable vue/require-default-prop */
-  import pipelineStage from '~/pipelines/components/stage.vue';
-  import ciIcon from '~/vue_shared/components/ci_icon.vue';
-  import icon from '~/vue_shared/components/icon.vue';
+/* eslint-disable vue/require-default-prop */
+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',
-    components: {
-      pipelineStage,
-      ciIcon,
-      icon,
+export default {
+  name: 'MRWidgetPipeline',
+  components: {
+    PipelineStage,
+    CiIcon,
+    Icon,
+  },
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
     },
-    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,
-      },
+    // 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,
     },
-    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;
-      },
+    ciStatus: {
+      type: String,
+      required: false,
     },
-  };
+  },
+  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
+      );
+    },
+    hasCommitInfo() {
+      return this.pipeline.commit && Object.keys(this.pipeline.commit).length > 0;
+    },
+  },
+};
 </script>
 
 <template>
   <div
     v-if="hasPipeline || hasCIError"
-    class="mr-widget-heading">
+    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">
@@ -77,13 +82,17 @@
             #{{ pipeline.id }}
           </a>
 
-          {{ pipeline.details.status.label }} for
+          {{ pipeline.details.status.label }}
 
-          <a
-            :href="pipeline.commit.commit_path"
-            class="commit-sha js-commit-link"
-          >
-          {{ pipeline.commit.short_id }}</a>.
+          <template v-if="hasCommitInfo">
+            for
+
+            <a
+              :href="pipeline.commit.commit_path"
+              class="commit-sha js-commit-link"
+            >
+            {{ pipeline.commit.short_id }}</a>.
+          </template>
 
           <span class="mr-widget-pipeline-graph">
             <span