1 files changed, 26 insertions, 2 deletions
diff --git a/app/assets/javascripts/vue_alerts.js b/app/assets/javascripts/vue_alerts.js
index abc1dd75645..b44f787cf30 100644
--- a/app/assets/javascripts/vue_alerts.js
+++ b/app/assets/javascripts/vue_alerts.js
@@ -1,7 +1,17 @@
 import Vue from 'vue';
+import Cookies from 'js-cookie';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import DismissibleAlert from '~/vue_shared/components/dismissible_alert.vue';
 
+const getCookieExpirationPeriod = (expirationPeriod) => {
+  const defaultExpirationPeriod = 30;
+  const alertExpirationPeriod = Number(expirationPeriod);
+
+  return !expirationPeriod || Number.isNaN(alertExpirationPeriod)
+    ? defaultExpirationPeriod
+    : alertExpirationPeriod;
+};
+
 const mountVueAlert = (el) => {
   const props = {
     html: el.innerHTML,
@@ -10,11 +20,25 @@ const mountVueAlert = (el) => {
     ...el.dataset,
     dismissible: parseBoolean(el.dataset.dismissible),
   };
+  const { dismissCookieName, dismissCookieExpire } = el.dataset;
 
   return new Vue({
     el,
-    render(h) {
-      return h(DismissibleAlert, { props, attrs });
+    render(createElement) {
+      return createElement(DismissibleAlert, {
+        props,
+        attrs,
+        on: {
+          alertDismissed() {
+            if (!dismissCookieName) {
+              return;
+            }
+            Cookies.set(dismissCookieName, true, {
+              expires: getCookieExpirationPeriod(dismissCookieExpire),
+            });
+          },
+        },
+      });
     },
   });
 };