Resolve "Inform users of up to $500 offer for GCP account"

app/assets/javascripts/clusters/clusters_index.js

-import Flash from '../flash';
-import { s__ } from '../locale';
-import setupToggleButtons from '../toggle_buttons';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import setupToggleButtons from '~/toggle_buttons';
+import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
+
 import ClustersService from './services/clusters_service';
 export default () => {
   const clusterList = document.querySelector('.js-clusters-list');
+
+  gcpSignupOffer();
+
   // The empty state won't have a clusterList
   if (clusterList) {
-    setupToggleButtons(
-      document.querySelector('.js-clusters-list'),
-      (value, toggle) =>
-        ClustersService.updateCluster(toggle.dataset.endpoint, { cluster: { enabled: value } })
-          .catch((err) => {
-            Flash(s__('ClusterIntegration|Something went wrong on our end.'));
-            throw err;
-          }),
+    setupToggleButtons(document.querySelector('.js-clusters-list'), (value, toggle) =>
+      ClustersService.updateCluster(toggle.dataset.endpoint, { cluster: { enabled: value } }).catch(
+        err => {
+          createFlash(__('Something went wrong on our end.'));
+          throw err;
+        },
+      ),
     );
   }
 };

app/assets/javascripts/clusters/components/gcp_signup_offer.js

+import $ from 'jquery';
+import axios from '~/lib/utils/axios_utils';
+import { __ } from '~/locale';
+import Flash from '~/flash';
+
+export default function gcpSignupOffer() {
+  const alertEl = document.querySelector('.gcp-signup-offer');
+  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/projects/clusters/gcp/login/index.js

+import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
+
+gcpSignupOffer();

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

+import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
+
+gcpSignupOffer();

app/assets/stylesheets/framework/variables.scss

@@ -265,6 +265,7 @@ $performance-bar-height: 35px;
 $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
+$gcp-signup-offer-icon-max-width: 125px;
 /*
 * Common component specific colors
@@ -334,11 +335,10 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 /*
  * Fonts
  */
-$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
-  'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
-$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-  Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
+  'Courier New', 'andale mono', 'lucida console', monospace;
+$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+  'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 /*
 * Dropdowns
@@ -466,11 +466,9 @@ $issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
 */
 $issue-boards-filter-height: 68px;
 $issue-boards-breadcrumbs-height-xs: 63px;
-$issue-board-list-difference-xs: $header-height +
-  $issue-boards-breadcrumbs-height-xs;
+$issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs;
 $issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
-$issue-board-list-difference-md: $issue-board-list-difference-sm +
-  $issue-boards-filter-height;
+$issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height;
 /*
 * Avatar

app/assets/stylesheets/pages/clusters.scss

@@ -26,3 +26,51 @@
     margin-right: 0;
   }
 }
+
+.gcp-signup-offer {
+  background-color: $blue-50;
+  border: 1px solid $blue-300;
+  border-radius: $border-radius-default;
+
+  // TODO: To be superceded by cssLab
+  &.alert {
+    padding: 24px 16px;
+
+    &-dismissable {
+      padding-right: 32px;
+
+      .close {
+        top: -8px;
+        right: -16px;
+        color: $blue-500;
+        opacity: 1;
+      }
+    }
+  }
+
+  .gcp-logo {
+    margin-bottom: $gl-padding;
+    text-align: center;
+  }
+
+  img {
+    max-width: $gcp-signup-offer-icon-max-width;
+  }
+
+  a:not(.btn) {
+    color: $gl-link-color;
+    font-weight: normal;
+    text-decoration: none;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    > div {
+      display: flex;
+      align-items: center;
+    }
+
+    .gcp-logo {
+      margin: 0;
+    }
+  }
+}

app/helpers/clusters_helper.rb

@@ -2,4 +2,12 @@ module ClustersHelper
   def has_multiple_clusters?(project)
     false
   end
+
+  def render_gcp_signup_offer
+    return unless show_gcp_signup_offer?
+
+    content_tag :section, class: 'no-animate expanded' do
+      render 'projects/clusters/gcp_signup_offer_banner'
+    end
+  end
 end

app/helpers/user_callouts_helper.rb

 module UserCalloutsHelper
   GKE_CLUSTER_INTEGRATION = 'gke_cluster_integration'.freeze
+  GCP_SIGNUP_OFFER = 'gcp_signup_offer'.freeze
   def show_gke_cluster_integration_callout?(project)
     can?(current_user, :create_cluster, project) &&
       !user_dismissed?(GKE_CLUSTER_INTEGRATION)
   end
+  def show_gcp_signup_offer?
+    !user_dismissed?(GCP_SIGNUP_OFFER)
+  end
+
   private
   def user_dismissed?(feature_name)

app/models/user_callout.rb

@@ -2,7 +2,8 @@ class UserCallout < ActiveRecord::Base
   belongs_to :user
   enum feature_name: {
-    gke_cluster_integration: 1
+    gke_cluster_integration: 1,
+    gcp_signup_offer: 2
   }
   validates :user, presence: true

app/views/projects/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')
+.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 } }  ×
+  %div
+    .col-sm-2.gcp-logo
+      = image_tag 'illustrations/logos/google-cloud-platform_logo.svg'
+    .col-sm-10
+      %h4= s_('ClusterIntegration|Redeem up to $500 in free credit for Google Cloud Platform')
+      %p= s_('ClusterIntegration|Every new Google Cloud Platform (GCP) account receives $300 in credit upon %{sign_up_link}. In partnership with Google, GitLab is able to offer an additional $200 for new GCP accounts to get started with GitLab\'s Google Kubernetes Engine Integration.').html_safe % { sign_up_link: link }
+      %a.btn.btn-info{ href: 'https://goo.gl/AaJzRW', target: '_blank', rel: 'noopener noreferrer' }
+        Apply for credit
+

app/views/projects/clusters/gcp/login.html.haml

 - breadcrumb_title 'Kubernetes'
 - page_title _("Login")
+= render_gcp_signup_offer
+
 .row.prepend-top-default
   .col-sm-4
     = render 'projects/clusters/sidebar'

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

 - breadcrumb_title 'Kubernetes'
 - page_title "Kubernetes Clusters"
+= render_gcp_signup_offer
+
 .clusters-container
   - if @clusters.empty?
     = render "empty_state"

app/views/projects/clusters/new.html.haml

 - breadcrumb_title 'Kubernetes'
 - page_title _("Kubernetes Cluster")
+= render_gcp_signup_offer
+
 .row.prepend-top-default
   .col-sm-4
     = render 'sidebar'

changelogs/unreleased/43469-gcp-account-offer.yml

+---
+title: Add GCP signup offer to cluster index / create pages
+merge_request: 18684
+author:
+type: added

package.json

@@ -16,7 +16,7 @@
     "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
   },
   "dependencies": {
-    "@gitlab-org/gitlab-svgs": "^1.18.0",
+    "@gitlab-org/gitlab-svgs": "^1.20.0",
     "autosize": "^4.0.0",
     "axios": "^0.17.1",
     "babel-core": "^6.26.0",

spec/features/projects/clusters/gcp_spec.rb

@@ -184,4 +184,44 @@ feature 'Gcp Cluster', :js do
       expect(page).to have_css('.signin-with-google')
     end
   end
+
+  context 'when user has not dismissed GCP signup offer' do
+    before do
+      visit project_clusters_path(project)
+    end
+
+    it 'user sees offer on cluster index page' do
+      expect(page).to have_css('.gcp-signup-offer')
+    end
+
+    it 'user sees offer on cluster create page' do
+      click_link 'Add Kubernetes cluster'
+
+      expect(page).to have_css('.gcp-signup-offer')
+    end
+
+    it 'user sees offer on cluster GCP login page' do
+      click_link 'Add Kubernetes cluster'
+      click_link 'Create on Google Kubernetes Engine'
+
+      expect(page).to have_css('.gcp-signup-offer')
+    end
+  end
+
+  context 'when user has dismissed GCP signup offer' do
+    before do
+      visit project_clusters_path(project)
+    end
+
+    it 'user does not see offer after dismissing' do
+      expect(page).to have_css('.gcp-signup-offer')
+
+      find('.gcp-signup-offer .close').click
+      wait_for_requests
+
+      click_link 'Add Kubernetes cluster'
+
+      expect(page).not_to have_css('.gcp-signup-offer')
+    end
+  end
 end

yarn.lock

@@ -54,9 +54,9 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
-"@gitlab-org/gitlab-svgs@^1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.18.0.tgz#7829f0e6de0647dace54c1fcd597ee3424afb233"
+"@gitlab-org/gitlab-svgs@^1.20.0":
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.20.0.tgz#4c3fa3a91e0693114654b0066fb1ef04c0602047"
 "@sindresorhus/is@^0.7.0":
   version "0.7.0"