Add latest changes from gitlab-org/gitlab@master

3 files changed, 32 insertions, 6 deletions

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
index 6babbca58c3..9683288f937 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
@@ -51,6 +51,10 @@ export default {
       required: false,
       default: null,
     },
+    blamePath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     lines() {
@@ -76,6 +80,7 @@ export default {
           :number="startingFrom + index + 1"
           :content="line"
           :language="language"
+          :blame-path="blamePath"
         />
       </div>
       <div v-else class="gl-display-flex">
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 7b62f0cdb7d..b6854ee0375 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlLink, GlSafeHtmlDirective, GlTooltipDirective } from '@gitlab/ui';
 import { setAttributes } from '~/lib/utils/dom_utils';
 import { BIDI_CHARS, BIDI_CHARS_CLASS_LIST, BIDI_CHAR_TOOLTIP } from '../constants';
 
@@ -9,6 +9,7 @@ export default {
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
+    GlTooltip: GlTooltipDirective,
   },
   props: {
     number: {
@@ -23,6 +24,10 @@ export default {
       type: String,
       required: true,
     },
+    blamePath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     formattedContent() {
@@ -58,21 +63,35 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-display-flex">
-    <div class="gl-p-0! gl-absolute gl-z-index-3 gl-border-r diff-line-num line-numbers">
+  <div class="gl-display-flex line-links-wrapper">
+    <div
+      class="gl-p-0! gl-absolute gl-z-index-3 diff-line-num gl-border-r gl-display-flex line-links line-numbers"
+      :class="firstLineClass"
+    >
+      <gl-link
+        v-gl-tooltip="__('View blame')"
+        class="gl-user-select-none gl-ml-3 gl-shadow-none! file-line-blame"
+        :href="`${blamePath}#L${number}`"
+        data-track-action="click_link"
+        data-track-label="file_line_action"
+        data-track-property="blame"
+      />
+
       <gl-link
         :id="`L${number}`"
-        class="gl-user-select-none gl-ml-5 gl-pr-3 gl-shadow-none! file-line-num diff-line-num"
-        :class="firstLineClass"
+        class="gl-user-select-none gl-flex-grow-1 gl-justify-content-end gl-pr-3 gl-shadow-none! file-line-num"
         :to="`#L${number}`"
         :data-line-number="number"
+        data-track-action="click_link"
+        data-track-label="file_line_action"
+        data-track-property="link"
       >
         {{ number }}
       </gl-link>
     </div>
 
     <pre
-      class="gl-p-0! gl-w-full gl-overflow-visible! gl-ml-11! gl-border-none! code highlight gl-line-height-normal"
+      class="gl-p-0! gl-w-full gl-overflow-visible! gl-border-none! code highlight gl-line-height-normal"
       :class="firstLineClass"
     ><code><span :id="`LC${number}`" v-safe-html="formattedContent" :lang="language" class="line" data-testid="content"></span></code></pre>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
index b5c66365836..4ef37b1d059 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
@@ -199,6 +199,7 @@ export default {
       :starting-from="firstChunk.startingFrom"
       :is-highlighted="firstChunk.isHighlighted"
       :language="firstChunk.language"
+      :blame-path="blob.blamePath"
     />
 
     <gl-loading-icon v-if="isLoading" size="sm" class="gl-my-5" />
@@ -213,6 +214,7 @@ export default {
       :is-highlighted="chunk.isHighlighted"
       :chunk-index="index"
       :language="chunk.language"
+      :blame-path="blob.blamePath"
       @appear="highlightChunk"
     />
   </div>