Promote the GitLab.com Gold trial on a users default dashboardce-6983-promote-starting-a-gitlab-com-trial

Show a dismissable callout on a users dashboard for a free trial of
the GitLab.com Gold plan. Hide the callout from users who have
dismissed the callout, are already on a trial or are already on the
gold plan

8 files changed, 67 insertions, 37 deletions

diff --git a/app/assets/javascripts/clusters/clusters_bundle.js b/app/assets/javascripts/clusters/clusters_bundle.js
index 71fc2ac7d80..f1c34b2d947 100644
--- a/app/assets/javascripts/clusters/clusters_bundle.js
+++ b/app/assets/javascripts/clusters/clusters_bundle.js
@@ -1,6 +1,6 @@
 import Visibility from 'visibilityjs';
 import Vue from 'vue';
-import initDismissableCallout from '~/dismissable_callout';
+import PersistentUserCallout from '../persistent_user_callout';
 import { s__, sprintf } from '../locale';
 import Flash from '../flash';
 import Poll from '../lib/utils/poll';
@@ -65,7 +65,7 @@ export default class Clusters {
     this.showTokenButton = document.querySelector('.js-show-cluster-token');
     this.tokenField = document.querySelector('.js-cluster-token');
 
-    initDismissableCallout('.js-cluster-security-warning');
+    Clusters.initDismissableCallout();
     initSettingsPanels();
     setupToggleButtons(document.querySelector('.js-cluster-enable-toggle-area'));
     this.initApplications(clusterType);
@@ -106,6 +106,12 @@ export default class Clusters {
     });
   }
 
+  static initDismissableCallout() {
+    const callout = document.querySelector('.js-cluster-security-warning');
+
+    if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
+  }
+
   addListeners() {
     if (this.showTokenButton) this.showTokenButton.addEventListener('click', this.showToken);
     eventHub.$on('installApplication', this.installApplication);
diff --git a/app/assets/javascripts/dismissable_callout.js b/app/assets/javascripts/dismissable_callout.js
deleted file mode 100644
index 5185b019376..00000000000
--- a/app/assets/javascripts/dismissable_callout.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import $ from 'jquery';
-import axios from '~/lib/utils/axios_utils';
-import { __ } from '~/locale';
-import Flash from '~/flash';
-
-export default function initDismissableCallout(alertSelector) {
-  const alertEl = document.querySelector(alertSelector);
-  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.'));
-      });
-  });
-}
diff --git a/app/assets/javascripts/pages/groups/clusters/index/index.js b/app/assets/javascripts/pages/groups/clusters/index/index.js
index 845a5f7042c..21efc4f6d00 100644
--- a/app/assets/javascripts/pages/groups/clusters/index/index.js
+++ b/app/assets/javascripts/pages/groups/clusters/index/index.js
@@ -1,5 +1,7 @@
-import initDismissableCallout from '~/dismissable_callout';
+import PersistentUserCallout from '~/persistent_user_callout';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initDismissableCallout('.gcp-signup-offer');
+  const callout = document.querySelector('.gcp-signup-offer');
+
+  if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
 });
diff --git a/app/assets/javascripts/pages/groups/index.js b/app/assets/javascripts/pages/groups/index.js
index bf80d8b8193..00e2d7fc998 100644
--- a/app/assets/javascripts/pages/groups/index.js
+++ b/app/assets/javascripts/pages/groups/index.js
@@ -1,6 +1,12 @@
-import initDismissableCallout from '~/dismissable_callout';
+import PersistentUserCallout from '~/persistent_user_callout';
 import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
 
+function initCallout() {
+  const callout = document.querySelector('.gcp-signup-offer');
+
+  if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   const { page } = document.body.dataset;
   const newClusterViews = [
@@ -10,7 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
   ];
 
   if (newClusterViews.indexOf(page) > -1) {
-    initDismissableCallout('.gcp-signup-offer');
+    initCallout();
     initGkeDropdowns();
   }
 });
diff --git a/app/assets/javascripts/pages/projects/clusters/index/index.js b/app/assets/javascripts/pages/projects/clusters/index/index.js
index 845a5f7042c..21efc4f6d00 100644
--- a/app/assets/javascripts/pages/projects/clusters/index/index.js
+++ b/app/assets/javascripts/pages/projects/clusters/index/index.js
@@ -1,5 +1,7 @@
-import initDismissableCallout from '~/dismissable_callout';
+import PersistentUserCallout from '~/persistent_user_callout';
 
 document.addEventListener('DOMContentLoaded', () => {
-  initDismissableCallout('.gcp-signup-offer');
+  const callout = document.querySelector('.gcp-signup-offer');
+
+  if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
 });
diff --git a/app/assets/javascripts/pages/projects/index.js b/app/assets/javascripts/pages/projects/index.js
index 5659e13981a..b0345b4e50d 100644
--- a/app/assets/javascripts/pages/projects/index.js
+++ b/app/assets/javascripts/pages/projects/index.js
@@ -1,5 +1,5 @@
-import initDismissableCallout from '~/dismissable_callout';
 import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
+import PersistentUserCallout from '../../persistent_user_callout';
 import Project from './project';
 import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
 
@@ -12,7 +12,9 @@ document.addEventListener('DOMContentLoaded', () => {
   ];
 
   if (newClusterViews.indexOf(page) > -1) {
-    initDismissableCallout('.gcp-signup-offer');
+    const callout = document.querySelector('.gcp-signup-offer');
+    if (callout) new PersistentUserCallout(callout); // eslint-disable-line no-new
+
     initGkeDropdowns();
   }
 
diff --git a/app/assets/javascripts/pages/root/index.js b/app/assets/javascripts/pages/root/index.js
new file mode 100644
index 00000000000..09f8185d3b5
--- /dev/null
+++ b/app/assets/javascripts/pages/root/index.js
@@ -0,0 +1,5 @@
+// if the "projects dashboard" is a user's default dashboard, when they visit the
+// instance root index, the dashboard will be served by the root controller instead
+// of a dashboard controller. The root index redirects for all other default dashboards.
+
+import '../dashboard/projects/index';
diff --git a/app/assets/javascripts/persistent_user_callout.js b/app/assets/javascripts/persistent_user_callout.js
new file mode 100644
index 00000000000..1e34e74a152
--- /dev/null
+++ b/app/assets/javascripts/persistent_user_callout.js
@@ -0,0 +1,34 @@
+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;
+
+    this.init();
+  }
+
+  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.'));
+      });
+  }
+}