Render CSV parsing errors

We need to handle translation of errors returned by the papaparse
csv parsing library and package up a reusable component for
displaying them. This can be resued in the  upcoming diff viewer.

Changelog: added

app/assets/javascripts/blob/csv/csv_viewer.vue

 <script>
-import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
 import Papa from 'papaparse';
+import PapaParseAlert from '~/vue_shared/components/papa_parse_alert.vue';
 
 export default {
   components: {
+    PapaParseAlert,
     GlTable,
-    GlAlert,
     GlLoadingIcon,
   },
   props: {
@@ -17,7 +18,7 @@ export default {
   data() {
     return {
       items: [],
-      errorMessage: null,
+      papaParseErrors: [],
       loading: true,
     };
   },
@@ -26,7 +27,7 @@ export default {
     this.items = parsed.data;
 
     if (parsed.errors.length) {
-      this.errorMessage = parsed.errors.map((e) => e.message).join('. ');
+      this.papaParseErrors = parsed.errors;
     }
 
     this.loading = false;
@@ -40,9 +41,7 @@ export default {
       <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>
+      <papa-parse-alert v-if="papaParseErrors.length" :papa-parse-errors="papaParseErrors" />
       <gl-table
         :empty-text="__('No CSV data to display.')"
         :items="items"

app/assets/javascripts/vue_shared/components/papa_parse_alert.vue

+<script>
+import { GlAlert } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlAlert,
+  },
+  i18n: {
+    genericErrorMessage: s__('CsvParser|Failed to render the CSV file for the following reasons:'),
+    MissingQuotes: s__('CsvParser|Quoted field unterminated'),
+    InvalidQuotes: s__('CsvParser|Trailing quote on quoted field is malformed'),
+    UndetectableDelimiter: s__('CsvParser|Unable to auto-detect delimiter; defaulted to ","'),
+    TooManyFields: s__('CsvParser|Too many fields'),
+    TooFewFields: s__('CsvParser|Too few fields'),
+  },
+  props: {
+    papaParseErrors: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  computed: {
+    errorMessages() {
+      const errorMessages = this.papaParseErrors.map(
+        (error) => this.$options.i18n[error.code] ?? error.message,
+      );
+      return new Set(errorMessages);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert variant="danger" :dismissible="false">
+    {{ $options.i18n.genericErrorMessage }}
+    <ul class="gl-mb-0!">
+      <li v-for="error in errorMessages" :key="error">
+        {{ error }}
+      </li>
+    </ul>
+  </gl-alert>
+</template>

locale/gitlab.pot

@@ -9642,6 +9642,24 @@ msgstr ""
 msgid "Crowd"
 msgstr ""
 
+msgid "CsvParser|Failed to render the CSV file for the following reasons:"
+msgstr ""
+
+msgid "CsvParser|Quoted field unterminated"
+msgstr ""
+
+msgid "CsvParser|Too few fields"
+msgstr ""
+
+msgid "CsvParser|Too many fields"
+msgstr ""
+
+msgid "CsvParser|Trailing quote on quoted field is malformed"
+msgstr ""
+
+msgid "CsvParser|Unable to auto-detect delimiter; defaulted to \",\""
+msgstr ""
+
 msgid "Current"
 msgstr ""
 

spec/frontend/blob/csv/csv_viewer_spec.js

-import { GlAlert, GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { GlLoadingIcon, GlTable } from '@gitlab/ui';
 import { getAllByRole } from '@testing-library/dom';
 import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import CSVViewer from '~/blob/csv/csv_viewer.vue';
+import CsvViewer from '~/blob/csv/csv_viewer.vue';
+import PapaParseAlert from '~/vue_shared/components/papa_parse_alert.vue';
 
 const validCsv = 'one,two,three';
 const brokenCsv = '{\n "json": 1,\n "key": [1, 2, 3]\n}';
@@ -11,7 +12,7 @@ describe('app/assets/javascripts/blob/csv/csv_viewer.vue', () => {
   let wrapper;
 
   const createComponent = ({ csv = validCsv, mountFunction = shallowMount } = {}) => {
-    wrapper = mountFunction(CSVViewer, {
+    wrapper = mountFunction(CsvViewer, {
       propsData: {
         csv,
       },
@@ -20,7 +21,7 @@ describe('app/assets/javascripts/blob/csv/csv_viewer.vue', () => {
 
   const findCsvTable = () => wrapper.findComponent(GlTable);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findAlert = () => wrapper.findComponent(PapaParseAlert);
 
   afterEach(() => {
     wrapper.destroy();
@@ -35,12 +36,12 @@ describe('app/assets/javascripts/blob/csv/csv_viewer.vue', () => {
   });
 
   describe('when the CSV contains errors', () => {
-    it('should render alert', async () => {
+    it('should render alert with correct props', async () => {
       createComponent({ csv: brokenCsv });
       await nextTick;
 
       expect(findAlert().props()).toMatchObject({
-        variant: 'danger',
+        papaParseErrors: [{ code: 'UndetectableDelimiter' }],
       });
     });
   });

spec/frontend/vue_shared/components/papa_parse_alert_spec.js

+import { GlAlert } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import PapaParseAlert from '~/vue_shared/components/papa_parse_alert.vue';
+
+describe('app/assets/javascripts/vue_shared/components/papa_parse_alert.vue', () => {
+  let wrapper;
+
+  const createComponent = ({ errorMessages } = {}) => {
+    wrapper = shallowMount(PapaParseAlert, {
+      propsData: {
+        papaParseErrors: errorMessages,
+      },
+    });
+  };
+
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render alert with correct props', async () => {
+    createComponent({ errorMessages: [{ code: 'MissingQuotes' }] });
+    await nextTick;
+
+    expect(findAlert().props()).toMatchObject({
+      variant: 'danger',
+    });
+    expect(findAlert().text()).toContain(
+      'Failed to render the CSV file for the following reasons:',
+    );
+    expect(findAlert().text()).toContain('Quoted field unterminated');
+  });
+
+  it('should render original message if no translation available', async () => {
+    createComponent({
+      errorMessages: [{ code: 'NotDefined', message: 'Error code is undefined' }],
+    });
+    await nextTick;
+
+    expect(findAlert().text()).toContain('Error code is undefined');
+  });
+});