1 files changed, 101 insertions, 21 deletions

diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_new.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_new.vue
index c7353ed6785..dcefa66c403 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_new.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer_new.vue
@@ -1,10 +1,15 @@
 <script>
+import { debounce } from 'lodash';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import Tracking from '~/tracking';
 import addBlobLinksTracking from '~/blob/blob_links_tracking';
 import LineHighlighter from '~/blob/line_highlighter';
 import { EVENT_ACTION, EVENT_LABEL_VIEWER } from './constants';
 import Chunk from './components/chunk_new.vue';
+import Blame from './components/blame_info.vue';
+import { calculateBlameOffset, shouldRender, toggleBlameClasses } from './utils';
+import blameDataQuery from './queries/blame_data.query.graphql';
 
 /*
  * Note, this is a new experimental version of the SourceViewer, it is not ready for production use.
@@ -15,6 +20,7 @@ export default {
   name: 'SourceViewerNew',
   components: {
     Chunk,
+    Blame,
   },
   directives: {
     SafeHtml,
@@ -30,13 +36,55 @@ export default {
       required: false,
       default: () => [],
     },
+    showBlame: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
       lineHighlighter: new LineHighlighter(),
+      blameData: [],
+      renderedChunks: [],
     };
   },
+  computed: {
+    blameInfo() {
+      return this.blameData.reduce((result, blame, index) => {
+        if (shouldRender(this.blameData, index)) {
+          result.push({
+            ...blame,
+            blameOffset: calculateBlameOffset(blame.lineno, index),
+          });
+        }
+
+        return result;
+      }, []);
+    },
+  },
+  watch: {
+    showBlame: {
+      handler(shouldShow) {
+        toggleBlameClasses(this.blameData, shouldShow);
+        this.requestBlameInfo(this.renderedChunks[0]);
+      },
+      immediate: true,
+    },
+    blameData: {
+      handler(blameData) {
+        if (!this.showBlame) return;
+        toggleBlameClasses(blameData, true);
+      },
+      immediate: true,
+    },
+  },
   created() {
+    this.handleAppear = debounce(this.handleChunkAppear, DEFAULT_DEBOUNCE_AND_THROTTLE_MS);
     this.track(EVENT_ACTION, { label: EVENT_LABEL_VIEWER, property: this.blob.language });
     addBlobLinksTracking();
   },
@@ -44,10 +92,39 @@ export default {
     this.selectLine();
   },
   methods: {
+    async handleChunkAppear(chunkIndex, handleOverlappingChunk = true) {
+      if (!this.renderedChunks.includes(chunkIndex)) {
+        this.renderedChunks.push(chunkIndex);
+        await this.requestBlameInfo(chunkIndex);
+
+        if (chunkIndex > 0 && handleOverlappingChunk) {
+          // request the blame information for overlapping chunk incase it is visible in the DOM
+          this.handleChunkAppear(chunkIndex - 1, false);
+        }
+      }
+    },
+    async requestBlameInfo(chunkIndex) {
+      const chunk = this.chunks[chunkIndex];
+      if (!this.showBlame || !chunk) return;
+
+      const { data } = await this.$apollo.query({
+        query: blameDataQuery,
+        variables: {
+          fullPath: this.projectPath,
+          filePath: this.blob.path,
+          fromLine: chunk.startingFrom + 1,
+          toLine: chunk.startingFrom + chunk.totalLines,
+        },
+      });
+
+      const blob = data?.project?.repository?.blobs?.nodes[0];
+      const blameGroups = blob?.blame?.groups;
+      const isDuplicate = this.blameData.includes(blameGroups[0]);
+      if (blameGroups && !isDuplicate) this.blameData.push(...blameGroups);
+    },
     async selectLine() {
       await this.$nextTick();
-      const scrollEnabled = false;
-      this.lineHighlighter.highlightHash(this.$route.hash, scrollEnabled);
+      this.lineHighlighter.highlightHash(this.$route.hash);
     },
   },
   userColorScheme: window.gon.user_color_scheme,
@@ -55,24 +132,27 @@ export default {
 </script>
 
 <template>
-  <div
-    class="file-content code js-syntax-highlight blob-content gl-display-flex gl-flex-direction-column gl-overflow-auto"
-    :class="$options.userColorScheme"
-    data-type="simple"
-    :data-path="blob.path"
-    data-qa-selector="blob_viewer_file_content"
-  >
-    <chunk
-      v-for="(chunk, _, index) in chunks"
-      :key="index"
-      :chunk-index="index"
-      :is-highlighted="Boolean(chunk.isHighlighted)"
-      :raw-content="chunk.rawContent"
-      :highlighted-content="chunk.highlightedContent"
-      :total-lines="chunk.totalLines"
-      :starting-from="chunk.startingFrom"
-      :blame-path="blob.blamePath"
-      @appear="selectLine"
-    />
+  <div class="gl-display-flex">
+    <blame v-if="showBlame && blameInfo.length" :blame-info="blameInfo" />
+
+    <div
+      class="file-content code js-syntax-highlight blob-content gl-display-flex gl-flex-direction-column gl-overflow-auto gl-w-full"
+      :class="$options.userColorScheme"
+      data-type="simple"
+      :data-path="blob.path"
+    >
+      <chunk
+        v-for="(chunk, index) in chunks"
+        :key="index"
+        :chunk-index="index"
+        :is-highlighted="Boolean(chunk.isHighlighted)"
+        :raw-content="chunk.rawContent"
+        :highlighted-content="chunk.highlightedContent"
+        :total-lines="chunk.totalLines"
+        :starting-from="chunk.startingFrom"
+        :blame-path="blob.blamePath"
+        @appear="() => handleAppear(index)"
+      />
+    </div>
   </div>
 </template>