Port GitLab.com gold trial callout changes to CE

https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/8731

app/assets/javascripts/clusters/clusters_bundle.js

 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';
@@ -67,7 +67,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);
@@ -108,6 +108,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);

app/assets/javascripts/dismissable_callout.js

-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.'));
-      });
-  });
-}

app/assets/javascripts/pages/groups/clusters/index/index.js

-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
 });

app/assets/javascripts/pages/groups/index.js

-import initDismissableCallout from '~/dismissable_callout';
+import PersistentUserCallout from '~/persistent_user_callout';
 import initGkeDropdowns from '~/projects/gke_cluster_dropdowns';
+function initGcpSignupCallout() {
+  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');
+    initGcpSignupCallout();
     initGkeDropdowns();
   }
 });

app/assets/javascripts/pages/projects/clusters/index/index.js

-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
 });

app/assets/javascripts/pages/projects/index.js

-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();
   }

app/assets/javascripts/persistent_user_callout.js

+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.'));
+      });
+  }
+}

app/views/clusters/clusters/_gcp_signup_offer_banner.html.haml

 - link = link_to(s_('ClusterIntegration|sign up'), 'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral', target: '_blank', rel: 'noopener noreferrer')
-.bs-callout.gcp-signup-offer.alert.alert-block.alert-dismissable.prepend-top-default.append-bottom-default{ role: 'alert' }
-  %button.close{ type: "button", data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }  ×
+.bs-callout.gcp-signup-offer.alert.alert-block.alert-dismissable.prepend-top-default.append-bottom-default{ role: 'alert', data: { feature_id: UserCalloutsHelper::GCP_SIGNUP_OFFER, dismiss_endpoint: user_callouts_path } }
+  %button.close.js-close{ type: "button" }  ×
   .gcp-signup-offer--content
     .gcp-signup-offer--icon.append-right-8
       = sprite_icon("information", size: 16)

app/views/dashboard/activity.html.haml

@@ -4,6 +4,9 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
+
+= render_if_exists "shared/gold_trial_callout"
+
 - page_title    "Activity"
 - header_title  "Activity", activity_dashboard_path

app/views/dashboard/groups/index.html.haml

 - @hide_top_links = true
 - page_title "Groups"
 - header_title  "Groups", dashboard_groups_path
+
+= render_if_exists "shared/gold_trial_callout"
 = render 'dashboard/groups_head'
 - if params[:filter].blank? && @groups.empty?

app/views/dashboard/issues.html.haml

@@ -4,6 +4,8 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{current_user.name} issues")
+= render_if_exists "shared/gold_trial_callout"
+
 .page-title-holder
   %h1.page-title= _('Issues')

app/views/dashboard/merge_requests.html.haml

@@ -2,6 +2,8 @@
 - page_title _("Merge Requests")
 - @breadcrumb_link = merge_requests_dashboard_path(assignee_username: current_user.username)
+= render_if_exists "shared/gold_trial_callout"
+
 .page-title-holder
   %h1.page-title= _('Merge Requests')

app/views/dashboard/projects/index.html.haml

@@ -4,6 +4,8 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
+= render_if_exists "shared/gold_trial_callout"
+
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path

app/views/dashboard/projects/starred.html.haml

@@ -4,6 +4,8 @@
 - page_title "Starred Projects"
 - header_title "Projects", dashboard_projects_path
+= render_if_exists "shared/gold_trial_callout"
+
 %div{ class: container_class }
   = render "projects/last_push"
   = render 'dashboard/projects_head'

app/views/dashboard/todos/index.html.haml

@@ -2,6 +2,8 @@
 - page_title "Todos"
 - header_title "Todos", dashboard_todos_path
+= render_if_exists "shared/gold_trial_callout"
+
 .page-title-holder
   %h1.page-title= _('Todos')

app/views/explore/groups/index.html.haml

@@ -2,6 +2,8 @@
 - page_title    _("Groups")
 - header_title  _("Groups"), dashboard_groups_path
+= render_if_exists "shared/gold_trial_callout"
+
 - if current_user
   = render 'dashboard/groups_head'
 - else

app/views/explore/projects/index.html.haml

@@ -2,6 +2,8 @@
 - page_title    _("Projects")
 - header_title  _("Projects"), dashboard_projects_path
+= render_if_exists "shared/gold_trial_callout"
+
 - if current_user
   = render 'dashboard/projects_head'
 - else

app/views/explore/projects/starred.html.haml

@@ -2,6 +2,8 @@
 - page_title    _("Projects")
 - header_title  _("Projects"), dashboard_projects_path
+= render_if_exists "shared/gold_trial_callout"
+
 - if current_user
   = render 'dashboard/projects_head'
 - else

app/views/explore/projects/trending.html.haml

@@ -2,6 +2,8 @@
 - page_title    _("Projects")
 - header_title  _("Projects"), dashboard_projects_path
+= render_if_exists "shared/gold_trial_callout"
+
 - if current_user
   = render 'dashboard/projects_head'
 - else

spec/features/dashboard/merge_requests_spec.rb

@@ -6,6 +6,7 @@ describe 'Dashboard Merge Requests' do
   include ProjectForksHelper
   let(:current_user) { create :user }
+  let(:user) { current_user }
   let(:project) { create(:project) }
   let(:public_project) { create(:project, :public, :repository) }