port EE

2 files changed, 35 insertions, 22 deletions

diff --git a/app/assets/javascripts/clusters/components/gcp_signup_offer.js b/app/assets/javascripts/clusters/components/gcp_signup_offer.js
index 8bc20a1c09f..38663bd4898 100644
--- a/app/assets/javascripts/clusters/components/gcp_signup_offer.js
+++ b/app/assets/javascripts/clusters/components/gcp_signup_offer.js
@@ -1,27 +1,8 @@
-import $ from 'jquery';
-import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
-import Flash from '~/flash';
+import PersistentUserCallout from '../../persistent_user_callout';
 
 export default function gcpSignupOffer() {
   const alertEl = document.querySelector('.gcp-signup-offer');
-  if (!alertEl) {
-    return;
-  }
+  if (!alertEl) return;
 
-  const closeButtonEl = alertEl.getElementsByClassName('close')[0];
-  const { dismissEndpoint, featureId } = closeButtonEl.dataset;
-
-  closeButtonEl.addEventListener('click', () => {
-    axios
-      .post(dismissEndpoint, {
-        feature_name: featureId,
-      })
-      .then(() => {
-        $(alertEl).alert('close');
-      })
-      .catch(() => {
-        Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.'));
-      });
-  });
+  new PersistentUserCallout(alertEl).init();
 }
diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js
new file mode 100644
index 00000000000..d136b3bfee9
--- /dev/null
+++ b/app/assets/javascripts/persistent_user_callout.js
@@ -0,0 +1,32 @@
+import axios from './lib/utils/axios_utils';
+import { __ } from './locale';
+import Flash from './flash';
+
+export default class PersistentUserCallout {
+  constructor(container) {
+    const { dismissEndpoint, featureId } = container.dataset;
+    this.container = container;
+    this.dismissEndpoint = dismissEndpoint;
+    this.featureId = featureId;
+  }
+
+  init() {
+    const closeButton = this.container.querySelector('.js-close');
+    closeButton.addEventListener('click', event => this.dismiss(event));
+  }
+
+  dismiss(event) {
+    event.preventDefault();
+
+    axios
+      .post(this.dismissEndpoint, {
+        feature_name: this.featureId,
+      })
+      .then(() => {
+        this.container.remove();
+      })
+      .catch(() => {
+        Flash(__('An error occurred while dismissing the alert. Refresh the page and try again.'));
+      });
+  }
+}