1 files changed, 54 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/dismissible_container.vue b/app/assets/javascripts/vue_shared/components/dismissible_container.vue
new file mode 100644
index 00000000000..b4227bae09e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/dismissible_container.vue
@@ -0,0 +1,54 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
+
+export default {
+  components: {
+    GlIcon,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+    featureId: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    dismiss() {
+      axios
+        .post(this.path, {
+          feature_name: this.featureId,
+        })
+        .catch(e => {
+          // eslint-disable-next-line @gitlab/require-i18n-strings, no-console
+          console.error('Failed to dismiss message.', e);
+        });
+
+      this.$emit('dismiss');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="gl-display-flex gl-align-items-center">
+      <slot name="title"></slot>
+      <div class="ml-auto">
+        <button
+          :aria-label="__('Close')"
+          class="btn-blank"
+          type="button"
+          data-testid="close"
+          @click="dismiss"
+        >
+          <gl-icon name="close" aria-hidden="true" class="gl-text-gray-500" />
+        </button>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>