Commit 924ea97a authored by Clement Ho's avatar Clement Ho

Merge branch '43469-gcp-account-offer' into 'master'

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

Closes #43469

See merge request gitlab-org/gitlab-ce!18684
parents 14e16915 a9496c27
import Flash from '../flash'; import createFlash from '~/flash';
import { s__ } from '../locale'; import { __ } from '~/locale';
import setupToggleButtons from '../toggle_buttons'; import setupToggleButtons from '~/toggle_buttons';
import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
import ClustersService from './services/clusters_service'; import ClustersService from './services/clusters_service';
export default () => { export default () => {
const clusterList = document.querySelector('.js-clusters-list'); const clusterList = document.querySelector('.js-clusters-list');
gcpSignupOffer();
// The empty state won't have a clusterList // The empty state won't have a clusterList
if (clusterList) { if (clusterList) {
setupToggleButtons( setupToggleButtons(document.querySelector('.js-clusters-list'), (value, toggle) =>
document.querySelector('.js-clusters-list'), ClustersService.updateCluster(toggle.dataset.endpoint, { cluster: { enabled: value } }).catch(
(value, toggle) => err => {
ClustersService.updateCluster(toggle.dataset.endpoint, { cluster: { enabled: value } }) createFlash(__('Something went wrong on our end.'));
.catch((err) => { throw err;
Flash(s__('ClusterIntegration|Something went wrong on our end.')); },
throw err; ),
}),
); );
} }
}; };
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.'));
});
});
}
import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
gcpSignupOffer();
import gcpSignupOffer from '~/clusters/components/gcp_signup_offer';
gcpSignupOffer();
...@@ -265,6 +265,7 @@ $performance-bar-height: 35px; ...@@ -265,6 +265,7 @@ $performance-bar-height: 35px;
$flash-height: 52px; $flash-height: 52px;
$context-header-height: 60px; $context-header-height: 60px;
$breadcrumb-min-height: 48px; $breadcrumb-min-height: 48px;
$gcp-signup-offer-icon-max-width: 125px;
/* /*
* Common component specific colors * Common component specific colors
...@@ -334,11 +335,10 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%); ...@@ -334,11 +335,10 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
/* /*
* Fonts * Fonts
*/ */
$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', $monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; 'Courier New', 'andale mono', 'lucida console', monospace;
$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, $regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
/* /*
* Dropdowns * Dropdowns
...@@ -466,11 +466,9 @@ $issue-boards-card-shadow: rgba(186, 186, 186, 0.5); ...@@ -466,11 +466,9 @@ $issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
*/ */
$issue-boards-filter-height: 68px; $issue-boards-filter-height: 68px;
$issue-boards-breadcrumbs-height-xs: 63px; $issue-boards-breadcrumbs-height-xs: 63px;
$issue-board-list-difference-xs: $header-height + $issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs;
$issue-boards-breadcrumbs-height-xs;
$issue-board-list-difference-sm: $header-height + $breadcrumb-min-height; $issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
$issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height;
$issue-boards-filter-height;
/* /*
* Avatar * Avatar
......
...@@ -26,3 +26,51 @@ ...@@ -26,3 +26,51 @@
margin-right: 0; 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;
}
}
}
...@@ -2,4 +2,12 @@ module ClustersHelper ...@@ -2,4 +2,12 @@ module ClustersHelper
def has_multiple_clusters?(project) def has_multiple_clusters?(project)
false false
end 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 end
module UserCalloutsHelper module UserCalloutsHelper
GKE_CLUSTER_INTEGRATION = 'gke_cluster_integration'.freeze GKE_CLUSTER_INTEGRATION = 'gke_cluster_integration'.freeze
GCP_SIGNUP_OFFER = 'gcp_signup_offer'.freeze
def show_gke_cluster_integration_callout?(project) def show_gke_cluster_integration_callout?(project)
can?(current_user, :create_cluster, project) && can?(current_user, :create_cluster, project) &&
!user_dismissed?(GKE_CLUSTER_INTEGRATION) !user_dismissed?(GKE_CLUSTER_INTEGRATION)
end end
def show_gcp_signup_offer?
!user_dismissed?(GCP_SIGNUP_OFFER)
end
private private
def user_dismissed?(feature_name) def user_dismissed?(feature_name)
......
...@@ -2,7 +2,8 @@ class UserCallout < ActiveRecord::Base ...@@ -2,7 +2,8 @@ class UserCallout < ActiveRecord::Base
belongs_to :user belongs_to :user
enum feature_name: { enum feature_name: {
gke_cluster_integration: 1 gke_cluster_integration: 1,
gcp_signup_offer: 2
} }
validates :user, presence: true validates :user, presence: true
......
- 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 } } &times;
%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
- breadcrumb_title 'Kubernetes' - breadcrumb_title 'Kubernetes'
- page_title _("Login") - page_title _("Login")
= render_gcp_signup_offer
.row.prepend-top-default .row.prepend-top-default
.col-sm-4 .col-sm-4
= render 'projects/clusters/sidebar' = render 'projects/clusters/sidebar'
......
- breadcrumb_title 'Kubernetes' - breadcrumb_title 'Kubernetes'
- page_title "Kubernetes Clusters" - page_title "Kubernetes Clusters"
= render_gcp_signup_offer
.clusters-container .clusters-container
- if @clusters.empty? - if @clusters.empty?
= render "empty_state" = render "empty_state"
......
- breadcrumb_title 'Kubernetes' - breadcrumb_title 'Kubernetes'
- page_title _("Kubernetes Cluster") - page_title _("Kubernetes Cluster")
= render_gcp_signup_offer
.row.prepend-top-default .row.prepend-top-default
.col-sm-4 .col-sm-4
= render 'sidebar' = render 'sidebar'
......
---
title: Add GCP signup offer to cluster index / create pages
merge_request: 18684
author:
type: added
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
"webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js" "webpack-prod": "NODE_ENV=production webpack --config config/webpack.config.js"
}, },
"dependencies": { "dependencies": {
"@gitlab-org/gitlab-svgs": "^1.18.0", "@gitlab-org/gitlab-svgs": "^1.20.0",
"autosize": "^4.0.0", "autosize": "^4.0.0",
"axios": "^0.17.1", "axios": "^0.17.1",
"babel-core": "^6.26.0", "babel-core": "^6.26.0",
......
...@@ -184,4 +184,44 @@ feature 'Gcp Cluster', :js do ...@@ -184,4 +184,44 @@ feature 'Gcp Cluster', :js do
expect(page).to have_css('.signin-with-google') expect(page).to have_css('.signin-with-google')
end end
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 end
...@@ -54,9 +54,9 @@ ...@@ -54,9 +54,9 @@
lodash "^4.2.0" lodash "^4.2.0"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@gitlab-org/gitlab-svgs@^1.18.0": "@gitlab-org/gitlab-svgs@^1.20.0":
version "1.18.0" version "1.20.0"
resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.18.0.tgz#7829f0e6de0647dace54c1fcd597ee3424afb233" resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.20.0.tgz#4c3fa3a91e0693114654b0066fb1ef04c0602047"
"@sindresorhus/is@^0.7.0": "@sindresorhus/is@^0.7.0":
version "0.7.0" version "0.7.0"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment