From deeca3d42a2812cd806d6c7cd24f9486d748e6a1 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Wed, 30 Aug 2023 12:28:52 +0200
Subject: [PATCH] Render blame info in the blob viewer

Renders blame info in the blob viewer
---
 .../components/blob_button_group.vue          |   4 +
 .../components/blob_content_viewer.vue        |   6 +
 .../source_viewer/components/blame_info.vue   | 125 ++++++++++++++++++
 .../queries/blame_data.query.graphql          |  35 +++++
 .../source_viewer/source_viewer_new.vue       | 109 ++++++++++++---
 app/assets/stylesheets/framework/files.scss   |   1 +
 6 files changed, 260 insertions(+), 20 deletions(-)
 create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/queries/blame_data.query.graphql

diff --git a/app/assets/javascripts/repository/components/blob_button_group.vue b/app/assets/javascripts/repository/components/blob_button_group.vue
index 99b861ca104091..0a14544e11406e 100644
--- a/app/assets/javascripts/repository/components/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/blob_button_group.vue
@@ -14,6 +14,7 @@ export default {
     replace: __('Replace'),
     replacePrimaryBtnText: __('Replace file'),
     delete: __('Delete'),
+    blame: __('Blame'),
   },
   components: {
     GlButtonGroup,
@@ -129,6 +130,9 @@ export default {
       <gl-button data-testid="delete" @click="showModal(deleteModalId)">
         {{ $options.i18n.delete }}
       </gl-button>
+      <gl-button data-testid="delete" @click="() => $emit('blame')">
+        {{ $options.i18n.blame }}
+      </gl-button>
     </gl-button-group>
     <upload-blob-modal
       :ref="$options.replaceBlobModalId"
diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index 6565c84fa1155d..c07c96f5ee67d9 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -122,6 +122,7 @@ export default {
       blobInfo: {},
       isEmptyRepository: false,
       projectId: null,
+      showBlame: this.$route?.query?.blame === '1',
     };
   },
   computed: {
@@ -289,6 +290,9 @@ export default {
     onCopy() {
       navigator.clipboard.writeText(this.blobInfo.rawTextBlob);
     },
+    handleToggleBlame() {
+      this.showBlame = !this.showBlame;
+    },
   },
 };
 </script>
@@ -329,6 +333,7 @@ export default {
             :show-fork-suggestion="showForkSuggestion"
             :is-using-lfs="isUsingLfs"
             @fork="setForkTarget('view')"
+            @blame="handleToggleBlame"
           />
         </template>
       </blob-header>
@@ -354,6 +359,7 @@ export default {
         v-else
         :blob="blobInfo"
         :chunks="chunks"
+        :show-blame="showBlame"
         :project-path="projectPath"
         :current-ref="currentRef"
         class="blob-viewer"
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue
new file mode 100644
index 00000000000000..11046f9e8c640c
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue
@@ -0,0 +1,125 @@
+<script>
+import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+
+const BORDER_TOP_CLASS = 'gl-border-t';
+const BORDER_COLOR_CLASS = 'gl-border-gray-500';
+const PADDING_TOP_CLASS = 'gl-pt-3!';
+const MARGIN_TOP_CLASS = 'gl-mt-3!';
+
+export default {
+  name: 'BlameInfo',
+  components: {
+    UserAvatarLink,
+    TimeagoTooltip,
+    GlLink,
+    UserAvatarImage,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+    SafeHtml,
+  },
+  props: {
+    blameData: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoading: true,
+    };
+  },
+  computed: {
+    blameInfo() {
+      return this.blameData.map((blame, index) => {
+        // TODO - see if we can simplify this
+        const selector = `#L${blame.lineno}`;
+        const lineOffset = document.querySelector(selector).offsetTop;
+        const containerOffset = document.querySelector('.file-content').offsetTop;
+        const prevElementOffset = index * 42; // TODO - 42 represents the previous element height, find a better way to determine this number
+        const blameOffset = `${lineOffset - containerOffset - prevElementOffset}px`;
+
+        return { ...blame, blameOffset };
+      });
+    },
+  },
+  mounted() {
+    this.toggleClasses(true);
+    this.isLoading = false;
+  },
+  destroyed() {
+    this.toggleClasses();
+  },
+  methods: {
+    toggleClasses(isVisible) {
+      /**
+       * Adds/removes classes to line number/content elements to match the line with the blame info
+       * */
+      const action = isVisible ? 'add' : 'remove';
+      this.blameData.forEach(({ lineno, span }) => {
+        if (lineno === 1) return;
+        const lineNumberEl = document.querySelector(`#L${lineno}`)?.parentElement;
+        const lineContentEl = document.querySelector(`#LC${lineno}`);
+        const classes = [BORDER_TOP_CLASS, BORDER_COLOR_CLASS, PADDING_TOP_CLASS, MARGIN_TOP_CLASS];
+
+        lineNumberEl.classList[action](...classes);
+        lineContentEl?.classList[action](...classes);
+      });
+    },
+  },
+};
+</script>
+<template>
+  <div class="blame" v-if="!isLoading">
+    <div
+      v-for="(blame, index) in blameInfo"
+      :id="`blame_${index}`"
+      :key="index"
+      class="blame-commit gl-display-flex gl-relative gl-px-3"
+      :style="{ top: blame.blameOffset }"
+    >
+      <user-avatar-link
+        v-if="blame.commit.author"
+        :link-href="blame.commit.author.webPath"
+        :img-src="blame.commit.author.avatarUrl"
+        :img-size="32"
+        class="gl-my-2 gl-mr-4"
+      />
+      <user-avatar-image
+        v-else
+        class="gl-my-2 gl-mr-4"
+        :img-src="blame.commit.authorGravatar || $options.defaultAvatarUrl"
+        :size="32"
+      />
+      <div
+        class="commit-detail flex-list gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-grow-1 gl-min-w-0"
+      >
+        <div class="commit-content commit">
+          <gl-link
+            :href="blame.commit.webPath"
+            :class="{ 'font-italic': !blame.commit.message }"
+            class="commit-row-message item-title"
+            ><strong>{{ blame.commit.message }}</strong></gl-link
+          >
+
+          <div class="committer">
+            <gl-link
+              v-if="blame.commit.author"
+              :href="blame.commit.author.webPath"
+              class="commit-author-link js-user-link"
+            >
+              {{ blame.commit.author.name }}</gl-link
+            >
+            {{ s__('LastCommit|authored') }}
+
+            <timeago-tooltip :time="blame.commit.authoredDate" tooltip-placement="bottom" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/queries/blame_data.query.graphql b/app/assets/javascripts/vue_shared/components/source_viewer/queries/blame_data.query.graphql
new file mode 100644
index 00000000000000..18a5009030a2dc
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/queries/blame_data.query.graphql
@@ -0,0 +1,35 @@
+query getBlameData($fullPath: ID!, $filePath: String!, $fromLine: Int, $toLine: Int) {
+  project(fullPath: $fullPath) {
+    repository {
+      blobs(paths: [$filePath]) {
+        nodes {
+          blame(fromLine: $fromLine, toLine: $toLine) {
+            firstLine
+            groups {
+              lineno
+              span
+              commit {
+                message
+                authoredDate
+                author {
+                  name
+                  webPath
+                  avatarUrl
+                }
+                sha
+              }
+              commitData {
+                authorAvatar
+                ageMapClass
+                commitLink
+                commitAuthorLink
+                projectBlameLink
+                timeAgoTooltip
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
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 c7353ed6785e49..bbdf1e55631544 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,13 @@
 <script>
+import { GlButton } from '@gitlab/ui';
 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 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,11 +18,36 @@ export default {
   name: 'SourceViewerNew',
   components: {
     Chunk,
+    Blame,
+    GlButton,
   },
   directives: {
     SafeHtml,
   },
   mixins: [Tracking.mixin()],
+  apollo: {
+    blameData: {
+      query: blameDataQuery,
+      skip() {
+        return !this.showBlame;
+      },
+      variables() {
+        return {
+          fullPath: this.projectPath,
+          filePath: this.blob.path,
+          fromLine: 1,
+          toLine: this.totalLines,
+        };
+      },
+      update(data) {
+        const blob = data?.project?.repository?.blobs?.nodes[0];
+        return blob?.blame?.groups || [];
+      },
+      error() {
+        this.$emit('error');
+      },
+    },
+  },
   props: {
     blob: {
       type: Object,
@@ -30,49 +58,90 @@ 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: {
+    visibleBlameInfo() {
+      const blameData = [];
+      this.renderedChunks.forEach((chunkIndex) => {
+        blameData.push(...this.findBlameDataForChunk(chunkIndex));
+      });
+      return blameData;
+    },
+    totalLines() {
+      return this.blob.rawTextBlob.split('\n').length;
+    },
+  },
   created() {
     this.track(EVENT_ACTION, { label: EVENT_LABEL_VIEWER, property: this.blob.language });
     addBlobLinksTracking();
   },
-  mounted() {
+  async mounted() {
     this.selectLine();
   },
   methods: {
+    async handleChunkAppear(chunkIndex) {
+      await this.selectLine();
+
+      if (!this.renderedChunks.includes(chunkIndex)) {
+        this.renderedChunks.push(chunkIndex);
+      }
+    },
     async selectLine() {
       await this.$nextTick();
       const scrollEnabled = false;
       this.lineHighlighter.highlightHash(this.$route.hash, scrollEnabled);
     },
+    findBlameDataForChunk(chunkIndex) {
+      const { startingFrom, totalLines } = this.chunks[chunkIndex];
+      return this.blameData.filter(
+        (blame) => blame.lineno >= startingFrom && blame.lineno <= startingFrom + totalLines,
+      );
+    },
   },
   userColorScheme: window.gon.user_color_scheme,
 };
 </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 && visibleBlameInfo.length" :blame-data="visibleBlameInfo" />
+
+    <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"
+      data-qa-selector="blob_viewer_file_content"
+    >
+      <chunk
+        v-for="(chunk, index) in chunks"
+        :key="index"
+        :blame-data="blameData"
+        :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="() => handleChunkAppear(index)"
+      />
+    </div>
   </div>
 </template>
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 613e504c771e1a..aa6f38f1a3a6f8 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -507,6 +507,7 @@ span.idiff {
 }
 
 .blame {
+  background: #fbfafd;
   position: relative;
 
   .tr {
-- 
GitLab