Add latest changes from gitlab-org/gitlab@master

1 files changed, 25 insertions, 32 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 9683288f937..9a44df43c4d 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
@@ -67,42 +67,35 @@ export default {
         this.$emit('appear', this.chunkIndex);
       }
     },
+    calculateLineNumber(index) {
+      return this.startingFrom + index + 1;
+    },
   },
 };
 </script>
 <template>
-  <div>
-    <gl-intersection-observer @appear="handleChunkAppear">
-      <div v-if="isHighlighted">
-        <chunk-line
-          v-for="(line, index) in lines"
+  <gl-intersection-observer @appear="handleChunkAppear">
+    <div v-if="isHighlighted">
+      <chunk-line
+        v-for="(line, index) in lines"
+        :key="index"
+        :number="calculateLineNumber(index)"
+        :content="line"
+        :language="language"
+        :blame-path="blamePath"
+      />
+    </div>
+    <div v-else class="gl-display-flex gl-text-transparent">
+      <div class="gl-display-flex gl-flex-direction-column content-visibility-auto">
+        <span
+          v-for="(n, index) in totalLines"
+          :id="`L${calculateLineNumber(index)}`"
           :key="index"
-          :number="startingFrom + index + 1"
-          :content="line"
-          :language="language"
-          :blame-path="blamePath"
-        />
-      </div>
-      <div v-else class="gl-display-flex">
-        <div class="gl-display-flex gl-flex-direction-column">
-          <a
-            v-for="(n, index) in totalLines"
-            :id="`L${startingFrom + index + 1}`"
-            :key="index"
-            class="gl-ml-5 gl-text-transparent"
-            :href="`#L${startingFrom + index + 1}`"
-            :data-line-number="startingFrom + index + 1"
-            data-testid="line-number"
-          >
-            {{ startingFrom + index + 1 }}
-          </a>
-        </div>
-        <div
-          class="gl-white-space-pre-wrap! gl-text-transparent"
-          data-testid="content"
-          v-text="content"
-        ></div>
+          data-testid="line-number"
+          v-text="calculateLineNumber(index)"
+        ></span>
       </div>
-    </gl-intersection-observer>
-  </div>
+      <div class="gl-white-space-pre-wrap!" data-testid="content" v-text="content"></div>
+    </div>
+  </gl-intersection-observer>
 </template>