Add latest changes from gitlab-org/gitlab@master

8 files changed, 81 insertions, 56 deletions

diff --git a/app/assets/javascripts/create_cluster/gke_cluster/gapi_loader.js b/app/assets/javascripts/create_cluster/gke_cluster/gapi_loader.js
new file mode 100644
index 00000000000..b5f92fed8eb
--- /dev/null
+++ b/app/assets/javascripts/create_cluster/gke_cluster/gapi_loader.js
@@ -0,0 +1,24 @@
+// This is a helper module to lazily import the google APIs for the GKE cluster
+// integration without introducing an indirect global dependency on an
+// initialized window.gapi object.
+export default () => {
+  if (window.gapiPromise === undefined) {
+    // first time loading the module
+    window.gapiPromise = new Promise((resolve, reject) => {
+      // this callback is set as a query param to script.src URL
+      window.onGapiLoad = () => {
+        resolve(window.gapi);
+      };
+
+      const script = document.createElement('script');
+      // do not use script.onload, because gapi continues to load after the initial script load
+      script.type = 'text/javascript';
+      script.async = true;
+      script.src = 'https://apis.google.com/js/api.js?onload=onGapiLoad';
+      script.onerror = reject;
+      document.head.appendChild(script);
+    });
+  }
+
+  return window.gapiPromise;
+};
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/index.js b/app/assets/javascripts/create_cluster/gke_cluster/index.js
index 96043470b63..c02173fc510 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/index.js
+++ b/app/assets/javascripts/create_cluster/gke_cluster/index.js
@@ -1,10 +1,10 @@
-/* global gapi */
 import Vue from 'vue';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import GkeProjectIdDropdown from './components/gke_project_id_dropdown.vue';
 import GkeZoneDropdown from './components/gke_zone_dropdown.vue';
 import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue';
 import GkeSubmitButton from './components/gke_submit_button.vue';
+import gapiLoader from './gapi_loader';
 
 import store from './store';
 
@@ -63,7 +63,7 @@ const gkeDropdownErrorHandler = () => {
   Flash(CONSTANTS.GCP_API_ERROR);
 };
 
-const initializeGapiClient = () => {
+const initializeGapiClient = (gapi) => () => {
   const el = document.querySelector('.js-gke-cluster-creation');
   if (!el) return false;
 
@@ -86,13 +86,9 @@ const initializeGapiClient = () => {
     .catch(gkeDropdownErrorHandler);
 };
 
-const initGkeDropdowns = () => {
-  if (!gapi) {
-    gkeDropdownErrorHandler();
-    return false;
-  }
-
-  return gapi.load('client', initializeGapiClient);
-};
+const initGkeDropdowns = () =>
+  gapiLoader()
+    .then((gapi) => gapi.load('client', initializeGapiClient(gapi)))
+    .catch(gkeDropdownErrorHandler);
 
 export default initGkeDropdowns;
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js b/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js
index 62ff8358c87..8977053297a 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/actions.js
@@ -1,5 +1,5 @@
-/* global gapi */
 import * as types from './mutation_types';
+import gapiLoader from '../gapi_loader';
 
 const gapiResourceListRequest = ({ resource, params, commit, mutation, payloadKey }) =>
   new Promise((resolve, reject) => {
@@ -36,57 +36,64 @@ export const setIsValidatingProjectBilling = ({ commit }, isValidatingProjectBil
 };
 
 export const fetchProjects = ({ commit }) =>
-  gapiResourceListRequest({
-    resource: gapi.client.cloudresourcemanager.projects,
-    params: {},
-    commit,
-    mutation: types.SET_PROJECTS,
-    payloadKey: 'projects',
-  });
+  gapiLoader().then((gapi) =>
+    gapiResourceListRequest({
+      resource: gapi.client.cloudresourcemanager.projects,
+      params: {},
+      commit,
+      mutation: types.SET_PROJECTS,
+      payloadKey: 'projects',
+    }),
+  );
 
 export const validateProjectBilling = ({ dispatch, commit, state }) =>
-  new Promise((resolve, reject) => {
-    const request = gapi.client.cloudbilling.projects.getBillingInfo({
-      name: `projects/${state.selectedProject.projectId}`,
-    });
+  gapiLoader()
+    .then((gapi) => {
+      const request = gapi.client.cloudbilling.projects.getBillingInfo({
+        name: `projects/${state.selectedProject.projectId}`,
+      });
 
-    commit(types.SET_ZONE, '');
-    commit(types.SET_MACHINE_TYPE, '');
+      commit(types.SET_ZONE, '');
+      commit(types.SET_MACHINE_TYPE, '');
 
-    return request.then(
+      return request;
+    })
+    .then(
       (resp) => {
         const { billingEnabled } = resp.result;
 
         commit(types.SET_PROJECT_BILLING_STATUS, Boolean(billingEnabled));
         dispatch('setIsValidatingProjectBilling', false);
-        resolve();
       },
-      (resp) => {
+      (errorResp) => {
         dispatch('setIsValidatingProjectBilling', false);
-        reject(resp);
+        return errorResp;
       },
     );
-  });
 
 export const fetchZones = ({ commit, state }) =>
-  gapiResourceListRequest({
-    resource: gapi.client.compute.zones,
-    params: {
-      project: state.selectedProject.projectId,
-    },
-    commit,
-    mutation: types.SET_ZONES,
-    payloadKey: 'items',
-  });
+  gapiLoader().then((gapi) =>
+    gapiResourceListRequest({
+      resource: gapi.client.compute.zones,
+      params: {
+        project: state.selectedProject.projectId,
+      },
+      commit,
+      mutation: types.SET_ZONES,
+      payloadKey: 'items',
+    }),
+  );
 
 export const fetchMachineTypes = ({ commit, state }) =>
-  gapiResourceListRequest({
-    resource: gapi.client.compute.machineTypes,
-    params: {
-      project: state.selectedProject.projectId,
-      zone: state.selectedZone,
-    },
-    commit,
-    mutation: types.SET_MACHINE_TYPES,
-    payloadKey: 'items',
-  });
+  gapiLoader().then((gapi) =>
+    gapiResourceListRequest({
+      resource: gapi.client.compute.machineTypes,
+      params: {
+        project: state.selectedProject.projectId,
+        zone: state.selectedZone,
+      },
+      commit,
+      mutation: types.SET_MACHINE_TYPES,
+      payloadKey: 'items',
+    }),
+  );
diff --git a/app/assets/javascripts/create_cluster/init_create_cluster.js b/app/assets/javascripts/create_cluster/init_create_cluster.js
index 11e0d93f4fb..f97da3d55db 100644
--- a/app/assets/javascripts/create_cluster/init_create_cluster.js
+++ b/app/assets/javascripts/create_cluster/init_create_cluster.js
@@ -19,6 +19,10 @@ export default (document) => {
 
   initGkeDropdowns();
 
+  if (isProjectLevelCluster(page)) {
+    initGkeNamespace();
+  }
+
   import(/* webpackChunkName: 'eks_cluster' */ '~/create_cluster/eks_cluster')
     .then(({ default: initCreateEKSCluster }) => {
       const el = document.querySelector('.js-create-eks-cluster-form-container');
@@ -28,8 +32,4 @@ export default (document) => {
       }
     })
     .catch(() => {});
-
-  if (isProjectLevelCluster(page)) {
-    initGkeNamespace();
-  }
 };
diff --git a/app/views/clusters/clusters/gcp/_form.html.haml b/app/views/clusters/clusters/gcp/_form.html.haml
index 573b96caae5..50e3d29f974 100644
--- a/app/views/clusters/clusters/gcp/_form.html.haml
+++ b/app/views/clusters/clusters/gcp/_form.html.haml
@@ -1,4 +1,3 @@
-= javascript_include_tag 'https://apis.google.com/js/api.js'
 - external_link_icon = sprite_icon('external-link')
 - zones_link_url = 'https://cloud.google.com/compute/docs/regions-zones/regions-zones'
 - machine_type_link_url = 'https://cloud.google.com/compute/docs/machine-types'
diff --git a/app/views/clusters/clusters/new.html.haml b/app/views/clusters/clusters/new.html.haml
index ff33fb46db8..74e336723ba 100644
--- a/app/views/clusters/clusters/new.html.haml
+++ b/app/views/clusters/clusters/new.html.haml
@@ -2,7 +2,6 @@
 - page_title _('Kubernetes Cluster')
 - active_tab = local_assigns.fetch(:active_tab, 'create')
 - provider = params[:provider]
-= javascript_include_tag 'https://apis.google.com/js/api.js'
 
 = render_gcp_signup_offer
 
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 1394f15cd15..f7e93182ca2 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -16,7 +16,7 @@
                 = logo_text
           - if Gitlab.com_and_canary?
             = link_to 'https://next.gitlab.com', class: 'canary-badge bg-transparent', target: :_blank do
-              %span.color-label.has-tooltip.badge.badge-pill.green-badge
+              %span.gl-badge.gl-bg-green-500.gl-text-white.gl-rounded-pill.gl-font-weight-bold.gl-py-1
                 = _('Next')
 
         - if current_user
diff --git a/app/views/shared/members/_badge.html.haml b/app/views/shared/members/_badge.html.haml
index e304207f3e9..5f925ff0cad 100644
--- a/app/views/shared/members/_badge.html.haml
+++ b/app/views/shared/members/_badge.html.haml
@@ -1,4 +1,4 @@
 - type ||= 'info'
 
 %span.px-1.py-1
-  %span{ class: "badge badge-#{type}" }= yield
+  %span{ class: "badge badge-pill gl-badge sm badge-#{type}" }= yield