Add latest changes from gitlab-org/gitlab@master

4 files changed, 79 insertions, 52 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();
-  }
 };