1 files changed, 26 insertions, 10 deletions
diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue
index 91e296f8572..21fdb19287d 100644
--- a/app/assets/javascripts/diffs/components/edit_button.vue
+++ b/app/assets/javascripts/diffs/components/edit_button.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
+import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
@@ -13,7 +14,8 @@ export default {
   props: {
     editPath: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     canCurrentUserFork: {
       type: Boolean,
@@ -25,6 +27,18 @@ export default {
       default: false,
     },
   },
+  computed: {
+    tooltipTitle() {
+      if (this.isDisabled) {
+        return __("Can't edit as source branch was deleted");
+      }
+
+      return __('Edit file');
+    },
+    isDisabled() {
+      return !this.editPath;
+    },
+  },
   methods: {
     handleEditClick(evt) {
       if (this.canCurrentUserFork && !this.canModifyBlob) {
@@ -37,13 +51,15 @@ export default {
 </script>
 
 <template>
-  <gl-deprecated-button
-    v-gl-tooltip.top
-    :href="editPath"
-    :title="__('Edit file')"
-    class="js-edit-blob"
-    @click.native="handleEditClick"
-  >
-    <icon name="pencil" />
-  </gl-deprecated-button>
+  <span v-gl-tooltip.top :title="tooltipTitle">
+    <gl-deprecated-button
+      :href="editPath"
+      :disabled="isDisabled"
+      :class="{ 'cursor-not-allowed': isDisabled }"
+      class="rounded-0 js-edit-blob"
+      @click.native="handleEditClick"
+    >
+      <icon name="pencil" />
+    </gl-deprecated-button>
+  </span>
 </template>