1 files changed, 32 insertions, 2 deletions
diff --git a/app/assets/javascripts/repository/components/blob_controls.vue b/app/assets/javascripts/repository/components/blob_controls.vue
index fb1227f0df9..29c2c3762fc 100644
--- a/app/assets/javascripts/repository/components/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/blob_controls.vue
@@ -1,9 +1,11 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
-import createFlash from '~/flash';
+import { createAlert } from '~/flash';
 import getRefMixin from '~/repository/mixins/get_ref';
 import initSourcegraph from '~/sourcegraph';
+import ShortcutsBlob from '~/behaviors/shortcuts/shortcuts_blob';
+import BlobLinePermalinkUpdater from '~/blob/blob_line_permalink_updater';
 import { updateElementsVisibility } from '../utils/dom';
 import blobControlsQuery from '../queries/blob_controls.query.graphql';
 
@@ -34,7 +36,7 @@ export default {
         return !this.filePath;
       },
       error() {
-        createFlash({ message: this.$options.i18n.errorMessage });
+        createAlert({ message: this.$options.i18n.errorMessage });
       },
     },
   },
@@ -84,6 +86,33 @@ export default {
     },
     blobInfo() {
       initSourcegraph();
+      this.$nextTick(() => {
+        this.initShortcuts();
+        this.initLinksUpdate();
+      });
+    },
+  },
+  methods: {
+    initShortcuts() {
+      const fileBlobPermalinkUrlElement = document.querySelector(
+        '.js-data-file-blob-permalink-url',
+      );
+      const fileBlobPermalinkUrl =
+        fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
+      // eslint-disable-next-line no-new
+      new ShortcutsBlob({
+        skipResetBindings: true,
+        fileBlobPermalinkUrl,
+        fileBlobPermalinkUrlElement,
+      });
+    },
+    initLinksUpdate() {
+      // eslint-disable-next-line no-new
+      new BlobLinePermalinkUpdater(
+        document.querySelector('.tree-holder'),
+        '.file-line-num[data-line-number], .file-line-num[data-line-number] *',
+        document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
+      );
     },
   },
 };
@@ -99,6 +128,7 @@ export default {
       data-testid="blame"
       :href="blobInfo.blamePath"
       :class="$options.buttonClassList"
+      class="js-blob-blame-link"
     >
       {{ $options.i18n.blame }}
     </gl-button>