1 files changed, 20 insertions, 7 deletions
diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue
index 5d38d545ce8..dcb79cd5e16 100644
--- a/app/assets/javascripts/diffs/components/edit_button.vue
+++ b/app/assets/javascripts/diffs/components/edit_button.vue
@@ -1,5 +1,15 @@
 <script>
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+
 export default {
+  components: {
+    GlButton,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     editPath: {
       type: String,
@@ -17,12 +27,7 @@ export default {
   },
   methods: {
     handleEditClick(evt) {
-      if (!this.canCurrentUserFork || this.canModifyBlob) {
-        // if we can Edit, do default Edit button behavior
-        return;
-      }
-
-      if (this.canCurrentUserFork) {
+      if (this.canCurrentUserFork && !this.canModifyBlob) {
         evt.preventDefault();
         this.$emit('showForkMessage');
       }
@@ -32,5 +37,13 @@ export default {
 </script>
 
 <template>
-  <a :href="editPath" class="btn btn-default js-edit-blob" @click="handleEditClick"> Edit </a>
+  <gl-button
+    v-gl-tooltip.top
+    :href="editPath"
+    :title="__('Edit file')"
+    class="js-edit-blob"
+    @click.native="handleEditClick"
+  >
+    <icon name="pencil" />
+  </gl-button>
 </template>