Resolve "Cannot read property 'commit_path' of null"

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';
-  import linkedPipelinesMiniList from 'ee/vue_shared/components/linked_pipelines_mini_list.vue';
+  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 'ee/vue_shared/components/linked_pipelines_mini_list.vue';
 
   export default {
     name: 'MRWidgetPipeline',
     components: {
-      pipelineStage,
-      ciIcon,
-      icon,
-      linkedPipelinesMiniList,
+      PipelineStage,
+      CiIcon,
+      Icon,
+      LinkedPipelinesMiniList,
     },
     props: {
       pipeline: {
@@ -37,15 +37,20 @@
         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 &&
+        return (
+          this.pipeline.details &&
           this.pipeline.details.stages &&
-          this.pipeline.details.stages.length;
+          this.pipeline.details.stages.length
+        );
+      },
+      hasCommitInfo() {
+        return this.pipeline.commit && Object.keys(this.pipeline.commit).length > 0;
       },
-
       /* 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
@@ -63,7 +68,8 @@
 <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">
@@ -90,13 +96,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 class="stage-cell">

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

@@ -114,6 +114,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);