Add latest changes from gitlab-org/gitlab@master

4 files changed, 77 insertions, 0 deletions

diff --git a/app/assets/javascripts/blob/csv/csv_viewer.vue b/app/assets/javascripts/blob/csv/csv_viewer.vue
new file mode 100644
index 00000000000..050f2785d9a
--- /dev/null
+++ b/app/assets/javascripts/blob/csv/csv_viewer.vue
@@ -0,0 +1,55 @@
+<script>
+import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import Papa from 'papaparse';
+
+export default {
+  components: {
+    GlTable,
+    GlAlert,
+    GlLoadingIcon,
+  },
+  props: {
+    csv: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      items: [],
+      errorMessage: null,
+      loading: true,
+    };
+  },
+  mounted() {
+    const parsed = Papa.parse(this.csv, { skipEmptyLines: true });
+    this.items = parsed.data;
+
+    if (parsed.errors.length) {
+      this.errorMessage = parsed.errors.map((e) => e.message).join('. ');
+    }
+
+    this.loading = false;
+  },
+};
+</script>
+
+<template>
+  <div class="container-fluid md gl-mt-3 gl-mb-3">
+    <div v-if="loading" class="gl-text-center loading">
+      <gl-loading-icon class="gl-mt-5" size="lg" />
+    </div>
+    <div v-else>
+      <gl-alert v-if="errorMessage" variant="danger" :dismissible="false">
+        {{ errorMessage }}
+      </gl-alert>
+      <gl-table
+        :empty-text="__('No CSV data to display.')"
+        :items="items"
+        :fields="$options.fields"
+        show-empty
+        thead-class="gl-display-none"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/blob/csv/index.js b/app/assets/javascripts/blob/csv/index.js
new file mode 100644
index 00000000000..4cf6c169c68
--- /dev/null
+++ b/app/assets/javascripts/blob/csv/index.js
@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import CsvViewer from './csv_viewer.vue';
+
+export default () => {
+  const el = document.getElementById('js-csv-viewer');
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(CsvViewer, {
+        props: {
+          csv: el.dataset.data,
+        },
+      });
+    },
+  });
+};
diff --git a/app/assets/javascripts/blob/csv_viewer.js b/app/assets/javascripts/blob/csv_viewer.js
new file mode 100644
index 00000000000..64d3ba0b390
--- /dev/null
+++ b/app/assets/javascripts/blob/csv_viewer.js
@@ -0,0 +1,3 @@
+import renderCSV from './csv';
+
+export default renderCSV;
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
index 47b82296128..db91d478b39 100644
--- a/app/assets/javascripts/blob/viewer/index.js
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -21,6 +21,8 @@ const loadRichBlobViewer = (type) => {
       return import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer');
     case 'openapi':
       return import(/* webpackChunkName: 'openapi_viewer' */ '../openapi_viewer');
+    case 'csv':
+      return import(/* webpackChunkName: 'csv_viewer' */ '../csv_viewer');
     case 'pdf':
       return import(/* webpackChunkName: 'pdf_viewer' */ '../pdf_viewer');
     case 'sketch':