1 files changed, 43 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/import/history/components/import_error_details.vue b/app/assets/javascripts/pages/import/history/components/import_error_details.vue
new file mode 100644
index 00000000000..33ba73317f8
--- /dev/null
+++ b/app/assets/javascripts/pages/import/history/components/import_error_details.vue
@@ -0,0 +1,43 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+import API from '~/api';
+import { createAlert } from '~/flash';
+import { DEFAULT_ERROR } from '../utils/error_messages';
+
+export default {
+  components: {
+    GlLoadingIcon,
+  },
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      error: null,
+    };
+  },
+  async mounted() {
+    try {
+      const {
+        data: { import_error: importError },
+      } = await API.project(this.id);
+      this.error = importError;
+    } catch (e) {
+      createAlert({ message: DEFAULT_ERROR });
+      this.error = null;
+    } finally {
+      this.loading = false;
+    }
+  },
+};
+</script>
+<template>
+  <gl-loading-icon v-if="loading" size="md" />
+  <pre
+    v-else
+  ><code>{{ error || s__('BulkImport|No additional information provided.') }}</code></pre>
+</template>