From b4fd555213a73b6835e40a50edf326c190767b01 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Tue, 7 Feb 2023 10:06:31 +0100
Subject: [PATCH 1/3] Add new source viewer component

Adds a new source viewer component that can handle highlighted chunks
---
 .../source_viewer/components/chunk.vue        | 133 ++++++++++++++++++
 .../source_viewer/source_viewer.vue           |  58 ++++++++
 .../__snapshots__/chunk_spec.js.snap          |  24 ++++
 .../source_viewer/components/chunk_spec.js    |  87 ++++++++++++
 .../components/source_viewer/mock_data.js     |  26 ++++
 .../source_viewer/source_viewer_spec.js       |  47 +++++++
 6 files changed, 375 insertions(+)
 create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
 create mode 100644 app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
 create mode 100644 spec/frontend/vue_shared/components/source_viewer/components/__snapshots__/chunk_spec.js.snap
 create mode 100644 spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
 create mode 100644 spec/frontend/vue_shared/components/source_viewer/mock_data.js
 create mode 100644 spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js

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
new file mode 100644
index 00000000000000..092e8ba6c1578f
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
@@ -0,0 +1,133 @@
+<script>
+import { GlIntersectionObserver } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { getPageParamValue, getPageSearchString } from '~/blob/utils';
+
+/*
+ * We only highlight the chunk that is currently visible to the user.
+ * By making use of the Intersection Observer API we can determine when a chunk becomes visible and highlight it accordingly.
+ *
+ * Content that is not visible to the user (i.e. not highlighted) does not need to look nice,
+ * so by rendering raw (non-highlighted) text, the browser spends less resources on painting
+ * content that is not immediately relevant.
+ * Why use plaintext as opposed to hiding content entirely?
+ * If content is hidden entirely, native find text (⌘ + F) won't work.
+ */
+export default {
+  components: {
+    GlIntersectionObserver,
+  },
+  directives: {
+    SafeHtml,
+  },
+  mixins: [glFeatureFlagMixin()],
+  props: {
+    isHighlighted: {
+      type: Boolean,
+      required: true,
+    },
+    chunkIndex: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    rawContent: {
+      type: String,
+      required: true,
+    },
+    highlightedContent: {
+      type: String,
+      required: true,
+    },
+    totalLines: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    startingFrom: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    blamePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      hasAppeared: false,
+      isLoading: true,
+    };
+  },
+  computed: {
+    shouldHighlight() {
+      return Boolean(this.highlightedContent) && (this.hasAppeared || this.isHighlighted);
+    },
+    lines() {
+      return this.content.split('\n');
+    },
+    pageSearchString() {
+      if (!this.glFeatures.fileLineBlame) return '';
+      const page = getPageParamValue(this.number);
+      return getPageSearchString(this.blamePath, page);
+    },
+  },
+  created() {
+    if (this.chunkIndex === 0) {
+      // Display first chunk ASAP in order to improve perceived performance
+      this.isLoading = false;
+      return;
+    }
+
+    window.requestIdleCallback(() => {
+      this.isLoading = false;
+    });
+  },
+  methods: {
+    handleChunkAppear() {
+      this.hasAppeared = true;
+    },
+    calculateLineNumber(index) {
+      return this.startingFrom + index + 1;
+    },
+  },
+};
+</script>
+<template>
+  <gl-intersection-observer @appear="handleChunkAppear">
+    <div class="gl-display-flex">
+      <div v-if="shouldHighlight" class="gl-display-flex gl-flex-direction-column">
+        <div
+          v-for="(n, index) in totalLines"
+          :key="index"
+          data-testid="line-numbers"
+          class="gl-p-0! gl-z-index-3 diff-line-num gl-border-r gl-display-flex line-links line-numbers"
+        >
+          <a
+            v-if="glFeatures.fileLineBlame"
+            class="gl-user-select-none gl-shadow-none! file-line-blame"
+            :href="`${blamePath}${pageSearchString}#L${calculateLineNumber(index)}`"
+          ></a>
+          <a
+            :id="`L${calculateLineNumber(index)}`"
+            class="gl-user-select-none gl-shadow-none! file-line-num"
+            :href="`#L${calculateLineNumber(index)}`"
+            :data-line-number="calculateLineNumber(index)"
+          >
+            {{ calculateLineNumber(index) }}
+          </a>
+        </div>
+      </div>
+
+      <div v-else-if="!isLoading" class="line-numbers gl-p-0! gl-mr-3 gl-text-transparent">
+        <!-- Placeholder for line numbers while content is not highlighted -->
+      </div>
+
+      <pre
+        class="gl-m-0 gl-p-0! gl-w-full gl-overflow-visible! gl-border-none! code highlight gl-line-height-0"
+      ><code v-if="shouldHighlight" v-once v-safe-html="highlightedContent" data-testid="content"></code><code v-else-if="!isLoading" v-once class="line gl-white-space-pre-wrap! gl-ml-1" data-testid="content" v-text="rawContent"></code></pre>
+    </div>
+  </gl-intersection-observer>
+</template>
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
new file mode 100644
index 00000000000000..50d286ce9e616e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
@@ -0,0 +1,58 @@
+<script>
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import Tracking from '~/tracking';
+import addBlobLinksTracking from '~/blob/blob_links_tracking';
+import { EVENT_ACTION, EVENT_LABEL_VIEWER } from './constants';
+import Chunk from './components/chunk.vue';
+
+export default {
+  components: {
+    Chunk,
+  },
+  directives: {
+    SafeHtml,
+  },
+  mixins: [Tracking.mixin()],
+  inject: {
+    highlightWorker: { default: null },
+  },
+  props: {
+    blob: {
+      type: Object,
+      required: true,
+    },
+    chunks: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  created() {
+    this.track(EVENT_ACTION, { label: EVENT_LABEL_VIEWER, property: this.blob.language });
+    addBlobLinksTracking();
+  },
+  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="chunk.chunkIndex"
+      :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"
+    />
+  </div>
+</template>
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/__snapshots__/chunk_spec.js.snap b/spec/frontend/vue_shared/components/source_viewer/components/__snapshots__/chunk_spec.js.snap
new file mode 100644
index 00000000000000..26c9a6f8d5a837
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/components/__snapshots__/chunk_spec.js.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chunk component rendering isHighlighted is true renders line numbers 1`] = `
+<div
+  class="gl-p-0! gl-z-index-3 diff-line-num gl-border-r gl-display-flex line-links line-numbers"
+  data-testid="line-numbers"
+>
+  <a
+    class="gl-user-select-none gl-shadow-none! file-line-blame"
+    href="some/blame/path.js#L71"
+  />
+   
+  <a
+    class="gl-user-select-none gl-shadow-none! file-line-num"
+    data-line-number="71"
+    href="#L71"
+    id="L71"
+  >
+    
+          71
+        
+  </a>
+</div>
+`;
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
new file mode 100644
index 00000000000000..b0f114fa2df336
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
@@ -0,0 +1,87 @@
+import { nextTick } from 'vue';
+import { GlIntersectionObserver } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import Chunk from '~/vue_shared/components/source_viewer/components/chunk.vue';
+import { CHUNK_1, CHUNK_2 } from '../mock_data';
+
+describe('Chunk component', () => {
+  let wrapper;
+  let idleCallbackSpy;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMountExtended(Chunk, {
+      propsData: { ...CHUNK_1, ...props },
+      provide: { glFeatures: { fileLineBlame: true } },
+    });
+  };
+
+  const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const findLineNumbers = () => wrapper.findAllByTestId('line-numbers');
+  const findContent = () => wrapper.findByTestId('content');
+
+  beforeEach(() => {
+    idleCallbackSpy = jest.spyOn(window, 'requestIdleCallback').mockImplementation((fn) => fn());
+    createComponent();
+  });
+
+  afterEach(() => wrapper.destroy());
+
+  describe('Intersection observer', () => {
+    it('renders an Intersection observer component', () => {
+      expect(findIntersectionObserver().exists()).toBe(true);
+    });
+
+    it('renders highlighted content if appear event is emitted', async () => {
+      createComponent({ chunkIndex: 1, isHighlighted: false });
+      findIntersectionObserver().vm.$emit('appear');
+
+      await nextTick();
+
+      expect(findContent().exists()).toBe(true);
+    });
+  });
+
+  describe('rendering', () => {
+    it('does not register window.requestIdleCallback for the first chunk, renders content immediately', () => {
+      jest.clearAllMocks();
+
+      expect(window.requestIdleCallback).not.toHaveBeenCalled();
+      expect(findContent().text()).toBe(CHUNK_1.highlightedContent);
+    });
+
+    it('does not render content if browser is not in idle state', () => {
+      idleCallbackSpy.mockRestore();
+      createComponent(CHUNK_2);
+
+      expect(findLineNumbers()).toHaveLength(0);
+      expect(findContent().exists()).toBe(false);
+    });
+
+    describe('isHighlighted is false', () => {
+      beforeEach(() => createComponent(CHUNK_2));
+
+      it('does not render line numbers', () => {
+        expect(findLineNumbers().length).toBe(0);
+      });
+
+      it('renders raw content', () => {
+        expect(findContent().text()).toBe(CHUNK_2.rawContent);
+      });
+    });
+
+    describe('isHighlighted is true', () => {
+      beforeEach(() => createComponent({ ...CHUNK_2, isHighlighted: true }));
+
+      it('renders line numbers', () => {
+        expect(findLineNumbers().length).toBe(CHUNK_2.totalLines);
+
+        // Opted for a snapshot test here since the output is simple and verifies native HTML elements
+        expect(findLineNumbers().at(0).element).toMatchSnapshot();
+      });
+
+      it('renders highlighted content', () => {
+        expect(findContent().text()).toBe(CHUNK_2.highlightedContent);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/source_viewer/mock_data.js b/spec/frontend/vue_shared/components/source_viewer/mock_data.js
new file mode 100644
index 00000000000000..133adf3b4fa481
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/mock_data.js
@@ -0,0 +1,26 @@
+const path = 'some/path.js';
+const blamePath = 'some/blame/path.js';
+
+export const LANGUAGE_MOCK = 'docker';
+
+export const BLOB_DATA_MOCK = { language: LANGUAGE_MOCK, path, blamePath };
+
+export const CHUNK_1 = {
+  chunkIndex: 0,
+  isHighlighted: true,
+  rawContent: 'chunk 1 raw',
+  highlightedContent: 'chunk 1 highlighted',
+  totalLines: 70,
+  startingFrom: 0,
+  blamePath,
+};
+
+export const CHUNK_2 = {
+  chunkIndex: 1,
+  isHighlighted: false,
+  rawContent: 'chunk 2 raw',
+  highlightedContent: 'chunk 2 highlighted',
+  totalLines: 40,
+  startingFrom: 70,
+  blamePath,
+};
diff --git a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
new file mode 100644
index 00000000000000..1c75442b4a8087
--- /dev/null
+++ b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
@@ -0,0 +1,47 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import SourceViewer from '~/vue_shared/components/source_viewer/source_viewer.vue';
+import Chunk from '~/vue_shared/components/source_viewer/components/chunk.vue';
+import { EVENT_ACTION, EVENT_LABEL_VIEWER } from '~/vue_shared/components/source_viewer/constants';
+import Tracking from '~/tracking';
+import addBlobLinksTracking from '~/blob/blob_links_tracking';
+import { BLOB_DATA_MOCK, CHUNK_1, CHUNK_2, LANGUAGE_MOCK } from './mock_data';
+
+jest.mock('~/blob/blob_links_tracking');
+
+describe('Source Viewer component', () => {
+  let wrapper;
+  const CHUNKS_MOCK = [CHUNK_1, CHUNK_2];
+
+  const createComponent = () => {
+    wrapper = shallowMountExtended(SourceViewer, {
+      propsData: { blob: BLOB_DATA_MOCK, chunks: CHUNKS_MOCK },
+    });
+  };
+
+  const findChunks = () => wrapper.findAllComponents(Chunk);
+
+  beforeEach(() => {
+    jest.spyOn(Tracking, 'event');
+    return createComponent();
+  });
+
+  afterEach(() => wrapper.destroy());
+
+  describe('event tracking', () => {
+    it('fires a tracking event when the component is created', () => {
+      const eventData = { label: EVENT_LABEL_VIEWER, property: LANGUAGE_MOCK };
+      expect(Tracking.event).toHaveBeenCalledWith(undefined, EVENT_ACTION, eventData);
+    });
+
+    it('adds blob links tracking', () => {
+      expect(addBlobLinksTracking).toHaveBeenCalled();
+    });
+  });
+
+  describe('rendering', () => {
+    it('renders a Chunk component for each chunk', () => {
+      expect(findChunks().at(0).props()).toMatchObject(CHUNK_1);
+      expect(findChunks().at(1).props()).toMatchObject(CHUNK_2);
+    });
+  });
+});
-- 
GitLab


From fbf8c3a6c2bb30e48ada207bebb6a4b3fc3c8695 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Mon, 13 Feb 2023 02:36:33 +0100
Subject: [PATCH 2/3] Update chunk index

Update chunk index to the correct one
---
 .../vue_shared/components/source_viewer/source_viewer.vue       | 2 +-
 .../components/source_viewer/components/chunk_spec.js           | 2 +-
 spec/frontend/vue_shared/components/source_viewer/mock_data.js  | 2 --
 3 files changed, 2 insertions(+), 4 deletions(-)

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 50d286ce9e616e..11708b6f1f61b9 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
@@ -46,7 +46,7 @@ export default {
     <chunk
       v-for="(chunk, _, index) in chunks"
       :key="index"
-      :chunk-index="chunk.chunkIndex"
+      :chunk-index="index"
       :is-highlighted="Boolean(chunk.isHighlighted)"
       :raw-content="chunk.rawContent"
       :highlighted-content="chunk.highlightedContent"
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
index b0f114fa2df336..52db732b2c6d4b 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
@@ -51,7 +51,7 @@ describe('Chunk component', () => {
 
     it('does not render content if browser is not in idle state', () => {
       idleCallbackSpy.mockRestore();
-      createComponent(CHUNK_2);
+      createComponent({ chunkIndex: 1, ...CHUNK_2 });
 
       expect(findLineNumbers()).toHaveLength(0);
       expect(findContent().exists()).toBe(false);
diff --git a/spec/frontend/vue_shared/components/source_viewer/mock_data.js b/spec/frontend/vue_shared/components/source_viewer/mock_data.js
index 133adf3b4fa481..f35e9607d5c535 100644
--- a/spec/frontend/vue_shared/components/source_viewer/mock_data.js
+++ b/spec/frontend/vue_shared/components/source_viewer/mock_data.js
@@ -6,7 +6,6 @@ export const LANGUAGE_MOCK = 'docker';
 export const BLOB_DATA_MOCK = { language: LANGUAGE_MOCK, path, blamePath };
 
 export const CHUNK_1 = {
-  chunkIndex: 0,
   isHighlighted: true,
   rawContent: 'chunk 1 raw',
   highlightedContent: 'chunk 1 highlighted',
@@ -16,7 +15,6 @@ export const CHUNK_1 = {
 };
 
 export const CHUNK_2 = {
-  chunkIndex: 1,
   isHighlighted: false,
   rawContent: 'chunk 2 raw',
   highlightedContent: 'chunk 2 highlighted',
-- 
GitLab


From e7fde70bbd4fbfa529e814293de6553f9be574ab Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Tue, 14 Feb 2023 11:52:16 +0100
Subject: [PATCH 3/3] Update spec to use Jest matchers

Updated the spec to use toHaveLength instead
---
 .../components/source_viewer/components/chunk_spec.js         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
index 52db732b2c6d4b..95ef11d776ae78 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_spec.js
@@ -61,7 +61,7 @@ describe('Chunk component', () => {
       beforeEach(() => createComponent(CHUNK_2));
 
       it('does not render line numbers', () => {
-        expect(findLineNumbers().length).toBe(0);
+        expect(findLineNumbers()).toHaveLength(0);
       });
 
       it('renders raw content', () => {
@@ -73,7 +73,7 @@ describe('Chunk component', () => {
       beforeEach(() => createComponent({ ...CHUNK_2, isHighlighted: true }));
 
       it('renders line numbers', () => {
-        expect(findLineNumbers().length).toBe(CHUNK_2.totalLines);
+        expect(findLineNumbers()).toHaveLength(CHUNK_2.totalLines);
 
         // Opted for a snapshot test here since the output is simple and verifies native HTML elements
         expect(findLineNumbers().at(0).element).toMatchSnapshot();
-- 
GitLab