Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

16 files changed, 109 insertions, 90 deletions

diff --git a/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue b/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue
index 1e3a19b9da1..7f4c3635119 100644
--- a/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/components/cluster_form_dropdown.vue
@@ -6,9 +6,9 @@ import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_searc
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
 
-const toArray = value => (isNil(value) ? [] : [].concat(value));
-const itemsProp = (items, prop) => items.map(item => item[prop]);
-const defaultSearchFn = (searchQuery, labelProp) => item =>
+const toArray = (value) => (isNil(value) ? [] : [].concat(value));
+const itemsProp = (items, prop) => items.map((item) => item[prop]);
+const defaultSearchFn = (searchQuery, labelProp) => (item) =>
   item[labelProp].toLowerCase().indexOf(searchQuery) > -1;
 
 export default {
@@ -135,7 +135,7 @@ export default {
       const valueList = toArray(this.value);
       const items = this.getItemsOrEmptyList();
 
-      return items.filter(item => valueList.some(value => item[valueProp] === value));
+      return items.filter((item) => valueList.some((value) => item[valueProp] === value));
     },
     selectedItemsLabels() {
       return itemsProp(this.selectedItems, this.labelProperty).join(', ');
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/index.js b/app/assets/javascripts/create_cluster/eks_cluster/index.js
index 6d1034b4a72..38b7eefd15b 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/index.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/index.js
@@ -6,7 +6,7 @@ import createStore from './store';
 
 Vue.use(Vuex);
 
-export default el => {
+export default (el) => {
   const {
     gitlabManagedClusterHelpPath,
     namespacePerEnvironmentHelpPath,
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js b/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js
index 58568b5dedb..c2b59191997 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js
@@ -37,7 +37,7 @@ export const fetchVpcs = ({ region }) => {
     .describeVpcs()
     .promise()
     .then(({ Vpcs: vpcs }) =>
-      vpcs.map(vpc => ({
+      vpcs.map((vpc) => ({
         value: vpc.VpcId,
         name: lookupVpcName(vpc),
       })),
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js
index b182d4dff13..55576efd3b8 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/store/actions.js
@@ -5,7 +5,7 @@ import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
-const getErrorMessage = data => {
+const getErrorMessage = (data) => {
   const errorKey = Object.keys(data)[0];
 
   return data[errorKey][0];
@@ -42,7 +42,7 @@ export const createRole = ({ dispatch, state: { createRolePath } }, payload) =>
 
       dispatch('createRoleSuccess', awsData);
     })
-    .catch(error => {
+    .catch((error) => {
       let message = error;
       if (error?.response?.data?.message) {
         message = error.response.data.message;
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js
index c957eca1f7a..c906ddf9011 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/store/state.js
+++ b/app/assets/javascripts/create_cluster/eks_cluster/store/state.js
@@ -1,6 +1,6 @@
 import { KUBERNETES_VERSIONS } from '../constants';
 
-const kubernetesVersion = KUBERNETES_VERSIONS.find(version => version.default).value;
+const kubernetesVersion = KUBERNETES_VERSIONS.find((version) => version.default).value;
 
 export default () => ({
   createRolePath: null,
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js
index 3b91ce63744..f9d0d86e381 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js
@@ -42,13 +42,13 @@ export default {
         return [];
       }
 
-      return this.items.filter(item => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
+      return this.items.filter((item) => item.name.toLowerCase().indexOf(this.searchQuery) > -1);
     },
   },
   methods: {
     fetchSuccessHandler() {
       if (this.defaultValue) {
-        const itemToSelect = this.items.find(item => item.name === this.defaultValue);
+        const itemToSelect = this.items.find((item) => item.name === this.defaultValue);
 
         if (itemToSelect) {
           this.setItem(itemToSelect.name);
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
index d6deda25752..6b18455bfcc 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue
@@ -57,9 +57,7 @@ export default {
       if (this.hasZone) {
         this.isLoading = true;
 
-        this.fetchMachineTypes()
-          .then(this.fetchSuccessHandler)
-          .catch(this.fetchFailureHandler);
+        this.fetchMachineTypes().then(this.fetchSuccessHandler).catch(this.fetchFailureHandler);
       }
     },
   },
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue
index 522fef423af..acbc4d1b3bc 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue
@@ -99,16 +99,14 @@ export default {
   created() {
     this.isLoading = true;
 
-    this.fetchProjects()
-      .then(this.fetchSuccessHandler)
-      .catch(this.fetchFailureHandler);
+    this.fetchProjects().then(this.fetchSuccessHandler).catch(this.fetchFailureHandler);
   },
   methods: {
     ...mapActions(['fetchProjects', 'setIsValidatingProjectBilling', 'validateProjectBilling']),
     ...mapActions({ setItem: 'setProject' }),
     fetchSuccessHandler() {
       if (this.defaultValue) {
-        const projectToSelect = this.items.find(item => item.projectId === this.defaultValue);
+        const projectToSelect = this.items.find((item) => item.projectId === this.defaultValue);
 
         if (projectToSelect) {
           this.setItem(projectToSelect);
@@ -175,9 +173,7 @@ export default {
       <gl-sprintf :message="helpText">
         <template #linkToBilling="{ content }">
           <gl-link
-            :href="
-              'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral'
-            "
+            :href="'https://console.cloud.google.com/freetrial?utm_campaign=2018_cpanel&utm_source=gitlab&utm_medium=referral'"
             target="_blank"
             >{{ content }} <gl-icon name="external-link"
           /></gl-link>
diff --git a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue
index b60a5be2e63..daab42c7e60 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue
@@ -46,9 +46,7 @@ export default {
       if (!isValidating && this.projectHasBillingEnabled) {
         this.isLoading = true;
 
-        this.fetchZones()
-          .then(this.fetchSuccessHandler)
-          .catch(this.fetchFailureHandler);
+        this.fetchZones().then(this.fetchSuccessHandler).catch(this.fetchFailureHandler);
       }
     },
   },
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 b9316353072..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';
 
@@ -22,7 +22,7 @@ const mountComponent = (entryPoint, component, componentName, extraProps = {}) =
     components: {
       [componentName]: component,
     },
-    render: createElement =>
+    render: (createElement) =>
       createElement(componentName, {
         props: {
           fieldName: hiddenInput.getAttribute('name'),
@@ -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 f0c41d1d230..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,19 +1,19 @@
-/* global gapi */
 import * as types from './mutation_types';
+import gapiLoader from '../gapi_loader';
 
 const gapiResourceListRequest = ({ resource, params, commit, mutation, payloadKey }) =>
   new Promise((resolve, reject) => {
     const request = resource.list(params);
 
     return request.then(
-      resp => {
+      (resp) => {
         const { result } = resp;
 
         commit(mutation, result[payloadKey]);
 
         resolve();
       },
-      resp => {
+      (resp) => {
         reject(resp);
       },
     );
@@ -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(
-      resp => {
+      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/gke_cluster/store/getters.js b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js
index 4d4cd223832..99f8393ffdb 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js
+++ b/app/assets/javascripts/create_cluster/gke_cluster/store/getters.js
@@ -1,5 +1,5 @@
-export const hasProject = state => Boolean(state.selectedProject.projectId);
-export const hasZone = state => Boolean(state.selectedZone);
-export const hasMachineType = state => Boolean(state.selectedMachineType);
+export const hasProject = (state) => Boolean(state.selectedProject.projectId);
+export const hasZone = (state) => Boolean(state.selectedZone);
+export const hasMachineType = (state) => Boolean(state.selectedMachineType);
 export const hasValidData = (state, getters) =>
   Boolean(state.projectHasBillingEnabled) && getters.hasZone && getters.hasMachineType;
diff --git a/app/assets/javascripts/create_cluster/gke_cluster_namespace/index.js b/app/assets/javascripts/create_cluster/gke_cluster_namespace/index.js
index 0ec4d8807b0..2b3dfb99328 100644
--- a/app/assets/javascripts/create_cluster/gke_cluster_namespace/index.js
+++ b/app/assets/javascripts/create_cluster/gke_cluster_namespace/index.js
@@ -12,7 +12,7 @@ const setDisabled = (el, isDisabled) => {
   }
 };
 
-const setState = glManagedCheckbox => {
+const setState = (glManagedCheckbox) => {
   const glManaged = document.querySelector('.js-namespace-prefixed');
   const selfManaged = document.querySelector('.js-namespace');
 
diff --git a/app/assets/javascripts/create_cluster/init_create_cluster.js b/app/assets/javascripts/create_cluster/init_create_cluster.js
index 2b09771d772..f97da3d55db 100644
--- a/app/assets/javascripts/create_cluster/init_create_cluster.js
+++ b/app/assets/javascripts/create_cluster/init_create_cluster.js
@@ -4,11 +4,11 @@ import PersistentUserCallout from '~/persistent_user_callout';
 
 const newClusterViews = [':clusters:new', ':clusters:create_gcp', ':clusters:create_user'];
 
-const isProjectLevelCluster = page => page.startsWith('project:clusters');
+const isProjectLevelCluster = (page) => page.startsWith('project:clusters');
 
-export default document => {
+export default (document) => {
   const { page } = document.body.dataset;
-  const isNewClusterView = newClusterViews.some(view => page.endsWith(view));
+  const isNewClusterView = newClusterViews.some((view) => page.endsWith(view));
 
   if (!isNewClusterView) {
     return;
@@ -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/assets/javascripts/create_cluster/store/cluster_dropdown/actions.js b/app/assets/javascripts/create_cluster/store/cluster_dropdown/actions.js
index 5d250b2e29e..669b0dcc732 100644
--- a/app/assets/javascripts/create_cluster/store/cluster_dropdown/actions.js
+++ b/app/assets/javascripts/create_cluster/store/cluster_dropdown/actions.js
@@ -1,6 +1,6 @@
 import * as types from './mutation_types';
 
-export default fetchItems => ({
+export default (fetchItems) => ({
   requestItems: ({ commit }) => commit(types.REQUEST_ITEMS),
   receiveItemsSuccess: ({ commit }, payload) => commit(types.RECEIVE_ITEMS_SUCCESS, payload),
   receiveItemsError: ({ commit }, payload) => commit(types.RECEIVE_ITEMS_ERROR, payload),
@@ -8,7 +8,7 @@ export default fetchItems => ({
     dispatch('requestItems');
 
     return fetchItems(payload)
-      .then(items => dispatch('receiveItemsSuccess', { items }))
-      .catch(error => dispatch('receiveItemsError', { error }));
+      .then((items) => dispatch('receiveItemsSuccess', { items }))
+      .catch((error) => dispatch('receiveItemsError', { error }));
   },
 });