Show find file and permalink shortcut in tooltip

Changelog: changed

app/assets/javascripts/repository/components/blob_controls.vue

 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { createAlert } from '~/alert';
 import getRefMixin from '~/repository/mixins/get_ref';
 import initSourcegraph from '~/sourcegraph';
 import { addShortcutsExtension } from '~/behaviors/shortcuts';
+import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
 import ShortcutsBlob from '~/behaviors/shortcuts/shortcuts_blob';
 import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
+import {
+  keysFor,
+  GO_TO_PROJECT_FIND_FILE,
+  PROJECT_FILES_GO_TO_PERMALINK,
+} from '~/behaviors/shortcuts/keybindings';
+import { sanitize } from '~/lib/dompurify';
 import { updateElementsVisibility } from '../utils/dom';
 import blobControlsQuery from '../queries/blob_controls.query.graphql';
 
@@ -16,12 +23,16 @@ export default {
     blame: __('Blame'),
     history: __('History'),
     permalink: __('Permalink'),
+    permalinkTooltip: __('Go to permalink'),
     errorMessage: __('An error occurred while loading the blob controls.'),
   },
   buttonClassList: 'gl-sm-w-auto gl-w-full gl-sm-mt-0 gl-mt-3',
   components: {
     GlButton,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [getRefMixin],
   apollo: {
     project: {
@@ -86,6 +97,26 @@ export default {
     showBlameButton() {
       return !this.blobInfo.storedExternally && this.blobInfo.externalStorage !== 'lfs';
     },
+    findFileShortcutKey() {
+      return keysFor(GO_TO_PROJECT_FIND_FILE)[0];
+    },
+    findFileTooltip() {
+      const { description } = GO_TO_PROJECT_FIND_FILE;
+      const key = this.findFileShortcutKey;
+      return shouldDisableShortcuts()
+        ? null
+        : sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`);
+    },
+    permalinkShortcutKey() {
+      return keysFor(PROJECT_FILES_GO_TO_PERMALINK)[0];
+    },
+    permalinkTooltip() {
+      const description = this.$options.i18n.permalinkTooltip;
+      const key = this.permalinkShortcutKey;
+      return shouldDisableShortcuts()
+        ? null
+        : sanitize(`${description} <kbd class="flat gl-ml-1" aria-hidden=true>${key}</kbd>`);
+    },
   },
   watch: {
     showBlobControls(shouldShow) {
@@ -125,7 +156,13 @@ export default {
 
 <template>
   <div v-if="showBlobControls" class="gl-display-flex gl-gap-3 gl-align-items-baseline">
-    <gl-button data-testid="find" :href="blobInfo.findFilePath" :class="$options.buttonClassList">
+    <gl-button
+      v-gl-tooltip.html="findFileTooltip"
+      :aria-keyshortcuts="findFileShortcutKey"
+      data-testid="find"
+      :href="blobInfo.findFilePath"
+      :class="$options.buttonClassList"
+    >
       {{ $options.i18n.findFile }}
     </gl-button>
     <gl-button
@@ -143,6 +180,8 @@ export default {
     </gl-button>
 
     <gl-button
+      v-gl-tooltip.html="permalinkTooltip"
+      :aria-keyshortcuts="permalinkShortcutKey"
       data-testid="permalink"
       :href="blobInfo.permalinkPath"
       :class="$options.buttonClassList"

app/views/projects/_find_file_link.html.haml

-= link_button_to project_find_file_path(@project, @ref, ref_type: @ref_type), class: 'shortcuts-find-file', rel: 'nofollow' do
-  = _('Find file')
+- find_file_description = _('Go to find file')
+- find_file_shortcut = 't'
+- find_file_title = "#{find_file_description} <kbd class='flat ml-1' aria-hidden=true>#{find_file_shortcut}</kbd>"
+= link_button_to _('Find file'), project_find_file_path(@project, @ref, ref_type: @ref_type),
+  'aria-keyshortcuts': find_file_shortcut,
+  class: 'has-tooltip shortcuts-find-file',
+  'data-html': true,
+  title: find_file_title,
+  rel: 'nofollow'

app/views/projects/blob/_breadcrumb.html.haml

@@ -28,5 +28,11 @@
 
     = link_button_to _('History'), project_commits_path(@project, @id, ref_type: @ref_type)
 
+    - permalink_description = _('Go to permalink')
+    - permalink_shortcut = 'y'
+    - permalink_title = "#{permalink_description} <kbd class='flat ml-1' aria-hidden=true>#{permalink_shortcut}</kbd>"
     = link_button_to _('Permalink'), project_blob_path(@project, tree_join(@commit.sha, @path)),
-        class: 'js-data-file-blob-permalink-url'
+        'aria-keyshortcuts': permalink_shortcut,
+        class: 'has-tooltip js-data-file-blob-permalink-url',
+        'data-html': true,
+        title: permalink_title

locale/gitlab.pot

@@ -23046,6 +23046,9 @@ msgstr ""
 msgid "Go to parent directory"
 msgstr ""
+msgid "Go to permalink"
+msgstr ""
+
 msgid "Go to pipelines"
 msgstr ""

spec/features/projects/files/user_browses_files_spec.rb

@@ -311,12 +311,6 @@
 
       expect(page).not_to have_selector(".tree-commit .animation-container")
     end
-
-    it "does not show the permalink link" do
-      click_link(".gitignore")
-
-      expect(page).not_to have_link("permalink")
-    end
   end
 
   context "when browsing a file content", :js do