1 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue b/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue
new file mode 100644
index 00000000000..1308ca53e74
--- /dev/null
+++ b/app/assets/javascripts/blob/suggest_web_ide_ci/components/web_ide_alert.vue
@@ -0,0 +1,50 @@
+<script>
+import { GlAlert, GlButton } from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
+
+export default {
+  components: {
+    GlAlert,
+    GlButton,
+  },
+  props: {
+    dismissEndpoint: {
+      type: String,
+      required: true,
+    },
+    featureId: {
+      type: String,
+      required: true,
+    },
+    editPath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showAlert: true,
+    };
+  },
+  methods: {
+    dismissAlert() {
+      this.showAlert = false;
+
+      return axios.post(this.dismissEndpoint, {
+        feature_name: this.featureId,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert v-if="showAlert" class="gl-mt-5" @dismiss="dismissAlert">
+    {{ __('The Web IDE offers advanced syntax highlighting capabilities and more.') }}
+    <div class="gl-mt-5">
+      <gl-button :href="editPath" category="primary" variant="info">{{
+        __('Open Web IDE')
+      }}</gl-button>
+    </div>
+  </gl-alert>
+</template>