Checks if commit information exists before trying to render it

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

 <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 {
+export default {
   name: 'MRWidgetPipeline',
   components: {
-      pipelineStage,
-      ciIcon,
-      icon,
+    PipelineStage,
+    CiIcon,
+    Icon,
   },
   props: {
     pipeline: {
@@ -35,22 +35,27 @@
       return this.hasCi && !this.ciStatus;
     },
     status() {
-        return this.pipeline.details &&
-          this.pipeline.details.status ? this.pipeline.details.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;
+      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 }}
+
+          <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

changelogs/unreleased/44296-commit-path.yml

+---
+title: Verifiy if pipeline has commit idetails and render information in MR widget
+  when branch is deleted
+merge_request:
+author:
+type: fixed

spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js

@@ -113,6 +113,46 @@ describe('MRWidgetPipeline', () => {
       });
     });
 
+    describe('without commit path', () => {
+      beforeEach(() => {
+        const mockCopy = Object.assign({}, mockData);
+        delete mockCopy.pipeline.commit;
+
+        vm = mountComponent(Component, {
+          pipeline: mockCopy.pipeline,
+          hasCi: true,
+          ciStatus: 'success',
+        });
+      });
+
+      it('should render pipeline ID', () => {
+        expect(
+          vm.$el.querySelector('.pipeline-id').textContent.trim(),
+        ).toEqual(`#${mockData.pipeline.id}`);
+      });
+
+      it('should render pipeline status', () => {
+        expect(
+          vm.$el.querySelector('.media-body').textContent.trim(),
+        ).toContain(mockData.pipeline.details.status.label);
+
+        expect(
+          vm.$el.querySelector('.js-commit-link'),
+        ).toBeNull();
+      });
+
+      it('should render pipeline graph', () => {
+        expect(vm.$el.querySelector('.mr-widget-pipeline-graph')).toBeDefined();
+        expect(vm.$el.querySelectorAll('.stage-container').length).toEqual(mockData.pipeline.details.stages.length);
+      });
+
+      it('should render coverage information', () => {
+        expect(
+          vm.$el.querySelector('.media-body').textContent,
+        ).toContain(`Coverage ${mockData.pipeline.coverage}`);
+      });
+    });
+
     describe('without coverage', () => {
       it('should not render a coverage', () => {
         const mockCopy = Object.assign({}, mockData);