1 files changed, 69 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue
new file mode 100644
index 00000000000..acbc98b7a7b
--- /dev/null
+++ b/app/assets/javascripts/ide/components/error_message.vue
@@ -0,0 +1,69 @@
+<script>
+import { mapActions } from 'vuex';
+import LoadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+export default {
+  components: {
+    LoadingIcon,
+  },
+  props: {
+    message: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    ...mapActions(['setErrorMessage']),
+    clickAction() {
+      if (this.isLoading) return;
+
+      this.isLoading = true;
+
+      this.message
+        .action(this.message.actionPayload)
+        .then(() => {
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.isLoading = false;
+        });
+    },
+    clickFlash() {
+      if (!this.message.action) {
+        this.setErrorMessage(null);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="flash-container flash-container-page"
+    @click="clickFlash"
+  >
+    <div class="flash-alert">
+      <span
+        v-html="message.text"
+      >
+      </span>
+      <button
+        v-if="message.action"
+        type="button"
+        class="flash-action text-white p-0 border-top-0 border-right-0 border-left-0 bg-transparent"
+        @click.stop.prevent="clickAction"
+      >
+        {{ message.actionText }}
+        <loading-icon
+          v-show="isLoading"
+          inline
+        />
+      </button>
+    </div>
+  </div>
+</template>