1 files changed, 42 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/form/errors_alert.vue b/app/assets/javascripts/vue_shared/components/form/errors_alert.vue
new file mode 100644
index 00000000000..3e33168781b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/form/errors_alert.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlAlert } from '@gitlab/ui';
+import { n__ } from '~/locale';
+
+export default {
+  components: { GlAlert },
+  model: {
+    prop: 'errors',
+  },
+  props: {
+    errors: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return n__(
+        'The form contains the following error:',
+        'The form contains the following errors:',
+        this.errors.length,
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    v-if="errors.length"
+    class="gl-mb-5"
+    :title="title"
+    variant="danger"
+    @dismiss="$emit('input', [])"
+  >
+    <ul class="gl-pl-5 gl-mb-0">
+      <li v-for="error in errors" :key="error">
+        {{ error }}
+      </li>
+    </ul>
+  </gl-alert>
+</template>