Add latest changes from gitlab-org/gitlab@master

5 files changed, 93 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/constants.js b/app/assets/javascripts/vue_shared/components/blob_viewers/constants.js
new file mode 100644
index 00000000000..d4c1808eec2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/constants.js
@@ -0,0 +1,3 @@
+export const HIGHLIGHT_CLASS_NAME = 'hll';
+
+export default {};
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/index.js b/app/assets/javascripts/vue_shared/components/blob_viewers/index.js
new file mode 100644
index 00000000000..72fba9392f9
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/index.js
@@ -0,0 +1,4 @@
+import RichViewer from './rich_viewer.vue';
+import SimpleViewer from './simple_viewer.vue';
+
+export { RichViewer, SimpleViewer };
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js b/app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js
new file mode 100644
index 00000000000..582213ee8d3
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/mixins.js
@@ -0,0 +1,8 @@
+export default {
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+};
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue
new file mode 100644
index 00000000000..b3a1df8f303
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/rich_viewer.vue
@@ -0,0 +1,10 @@
+<script>
+import ViewerMixin from './mixins';
+
+export default {
+  mixins: [ViewerMixin],
+};
+</script>
+<template>
+  <div v-html="content"></div>
+</template>
diff --git a/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
new file mode 100644
index 00000000000..e64c7132117
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/blob_viewers/simple_viewer.vue
@@ -0,0 +1,68 @@
+<script>
+import ViewerMixin from './mixins';
+import { GlIcon } from '@gitlab/ui';
+import { HIGHLIGHT_CLASS_NAME } from './constants';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  mixins: [ViewerMixin],
+  data() {
+    return {
+      highlightedLine: null,
+    };
+  },
+  computed: {
+    lineNumbers() {
+      return this.content.split('\n').length;
+    },
+  },
+  mounted() {
+    const { hash } = window.location;
+    if (hash) this.scrollToLine(hash, true);
+  },
+  methods: {
+    scrollToLine(hash, scroll = false) {
+      const lineToHighlight = hash && this.$el.querySelector(hash);
+      const currentlyHighlighted = this.highlightedLine;
+      if (lineToHighlight) {
+        if (currentlyHighlighted) {
+          currentlyHighlighted.classList.remove(HIGHLIGHT_CLASS_NAME);
+        }
+
+        lineToHighlight.classList.add(HIGHLIGHT_CLASS_NAME);
+        this.highlightedLine = lineToHighlight;
+        if (scroll) {
+          lineToHighlight.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+      }
+    },
+  },
+  userColorScheme: window.gon.user_color_scheme,
+};
+</script>
+<template>
+  <div
+    class="file-content code js-syntax-highlight qa-file-content"
+    :class="$options.userColorScheme"
+  >
+    <div class="line-numbers">
+      <a
+        v-for="line in lineNumbers"
+        :id="`L${line}`"
+        :key="line"
+        class="diff-line-num js-line-number"
+        :href="`#LC${line}`"
+        :data-line-number="line"
+        @click="scrollToLine(`#LC${line}`)"
+      >
+        <gl-icon :size="12" name="link" />
+        {{ line }}
+      </a>
+    </div>
+    <div class="blob-content">
+      <pre class="code highlight"><code id="blob-code-content" v-html="content"></code></pre>
+    </div>
+  </div>
+</template>