Add tooltip for diffs edit file dropdown

- Also renames the "Edit file" to
"Edit in single-file editor"

app/assets/javascripts/diffs/components/edit_button.vue

 <script>
+import { uniqueId } from 'lodash';
 import {
   GlTooltipDirective,
   GlIcon,
@@ -37,13 +38,16 @@ export default {
       default: false,
     },
   },
+  data() {
+    return { tooltipId: uniqueId('edit_button_tooltip_') };
+  },
   computed: {
     tooltipTitle() {
       if (this.isDisabled) {
         return __("Can't edit as source branch was deleted");
       }
 
-      return '';
+      return __('Edit file in...');
     },
     isDisabled() {
       return !this.editPath;
@@ -51,6 +55,10 @@ export default {
   },
   methods: {
     handleShow(evt) {
+      // We must hide the tooltip because it is redundant and doesn't close itself
+      // when dropdown opens because we are still "focused".
+      this.$root.$emit('bv::hide::tooltip', this.tooltipId);
+
       if (this.canCurrentUserFork && !this.canModifyBlob) {
         evt.preventDefault();
         this.$emit('showForkMessage');
@@ -66,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <div v-gl-tooltip.top="tooltipTitle" class="gl-display-flex">
+  <div v-gl-tooltip.top="{ title: tooltipTitle, id: tooltipId }" class="gl-display-flex">
     <gl-dropdown
       toggle-class="rounded-0"
       :disabled="isDisabled"
@@ -80,7 +88,9 @@ export default {
         <span class="gl-dropdown-toggle-text"><gl-icon name="pencil"/></span>
         <gl-icon class="gl-dropdown-caret" name="chevron-down" aria-hidden="true" />
       </template>
-      <gl-dropdown-item v-if="editPath" :href="editPath">{{ __('Edit file') }}</gl-dropdown-item>
+      <gl-dropdown-item v-if="editPath" :href="editPath">{{
+        __('Edit in single-file editor')
+      }}</gl-dropdown-item>
       <gl-dropdown-item v-if="ideEditPath" :href="ideEditPath">{{
         __('Edit in Web IDE')
       }}</gl-dropdown-item>

locale/gitlab.pot

@@ -9243,7 +9243,7 @@ msgstr ""
 msgid "Edit environment"
 msgstr ""
 
-msgid "Edit file"
+msgid "Edit file in..."
 msgstr ""
 
 msgid "Edit files in the editor and commit changes here"
@@ -9258,6 +9258,9 @@ msgstr ""
 msgid "Edit in Web IDE"
 msgstr ""
 
+msgid "Edit in single-file editor"
+msgstr ""
+
 msgid "Edit issues"
 msgstr ""
 

spec/features/merge_request/maintainer_edits_fork_spec.rb

@@ -28,7 +28,7 @@ RSpec.describe 'a maintainer edits files on a source-branch of an MR from a fork
     wait_for_requests
     within first('.js-file-title') do
       find('[data-testid="edit_file"]').click
-      click_link 'Edit file'
+      click_link 'Edit in single-file editor'
     end
     wait_for_requests
   end

spec/features/projects/blobs/edit_spec.rb

@@ -30,7 +30,7 @@ RSpec.describe 'Editing file blob', :js do
     def mr_edit_and_commit(commit_changes: true)
       wait_for_requests
       find('[data-testid="edit_file"]').click
-      click_link 'Edit file'
+      click_link 'Edit in single-file editor'
 
       fill_and_commit(commit_changes)
     end

spec/frontend/diffs/components/edit_button_spec.js

@@ -3,9 +3,12 @@ import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import EditButton from '~/diffs/components/edit_button.vue';
 
+jest.mock('lodash/uniqueId', () => (str = '') => `${str}fake`);
+
+const TOOLTIP_ID = 'edit_button_tooltip_fake';
 const EDIT_ITEM = {
   href: 'test-path',
-  text: 'Edit file',
+  text: 'Edit in single-file editor',
 };
 const IDE_EDIT_ITEM = {
   href: 'ide-test-path',
@@ -66,7 +69,7 @@ describe('EditButton', () => {
     });
 
     it('does not have tooltip', () => {
-      expect(getTooltip()).toBe('');
+      expect(getTooltip()).toEqual({ id: TOOLTIP_ID, title: 'Edit file in...' });
     });
 
     it('shows pencil dropdown', () => {
@@ -74,16 +77,26 @@ describe('EditButton', () => {
       expect(wrapper.find('.gl-dropdown-caret').exists()).toBe(true);
     });
 
-    it.each`
-      event     | expectedEmit
-      ${'show'} | ${'open'}
-      ${'hide'} | ${'close'}
-    `('when dropdown emits $event, emits $expectedEmit', ({ event, expectedEmit }) => {
-      expect(wrapper.emitted(expectedEmit)).toBeUndefined();
+    describe.each`
+      event     | expectedEmit | expectedRootEmit
+      ${'show'} | ${'open'}    | ${[['bv::hide::tooltip', TOOLTIP_ID]]}
+      ${'hide'} | ${'close'}   | ${[]}
+    `('when dropdown emits $event', ({ event, expectedEmit, expectedRootEmit }) => {
+      let rootEmitSpy;
+
+      beforeEach(() => {
+        rootEmitSpy = jest.spyOn(wrapper.vm.$root, '$emit');
 
-      findDropdown().vm.$emit(event);
+        findDropdown().vm.$emit(event);
+      });
 
-      expect(wrapper.emitted(expectedEmit)).toEqual([[]]);
+      it(`emits ${expectedEmit}`, () => {
+        expect(wrapper.emitted(expectedEmit)).toEqual([[]]);
+      });
+
+      it(`emits root = ${JSON.stringify(expectedRootEmit)}`, () => {
+        expect(rootEmitSpy.mock.calls).toEqual(expectedRootEmit);
+      });
     });
   });
 
@@ -118,7 +131,10 @@ describe('EditButton', () => {
     });
 
     it('should have tooltip', () => {
-      expect(getTooltip()).toBe("Can't edit as source branch was deleted");
+      expect(getTooltip()).toEqual({
+        id: TOOLTIP_ID,
+        title: "Can't edit as source branch was deleted",
+      });
     });
   });
 });