Add latest changes from gitlab-org/gitlab@12-6-stable-ee

app/assets/javascripts/commons/polyfills.js

@@ -4,6 +4,7 @@ import 'core-js/es/array/find';
 import 'core-js/es/array/find-index';
 import 'core-js/es/array/from';
 import 'core-js/es/array/includes';
+import 'core-js/es/number/is-integer';
 import 'core-js/es/object/assign';
 import 'core-js/es/object/values';
 import 'core-js/es/object/entries';

app/assets/javascripts/confidential_merge_request/components/project_form_group.vue

 <script>
-import { GlLink } from '@gitlab/ui';
-import { __, sprintf } from '../../locale';
+import { GlLink, GlSprintf } from '@gitlab/ui';
+import { __ } from '../../locale';
 import createFlash from '../../flash';
 import Api from '../../api';
 import state from '../state';
@@ -9,6 +9,7 @@ import Dropdown from './dropdown.vue';
 export default {
   components: {
     GlLink,
+    GlSprintf,
     Dropdown,
   },
   props: {
@@ -38,15 +39,6 @@ export default {
     selectedProject() {
       return state.selectedProject;
     },
-    noForkText() {
-      return sprintf(
-        __(
-          "To protect this issue's confidentiality, %{link_start}fork the project%{link_end} and set the forks visibility to private.",
-        ),
-        { link_start: `<a href="${this.newForkPath}" class="help-link">`, link_end: '</a>' },
-        false,
-      );
-    },
   },
   mounted() {
     this.fetchProjects();
@@ -123,8 +115,20 @@ export default {
           }}
         </template>
         <template v-else>
-          {{ __('No forks available to you.') }}<br />
-          <span v-html="noForkText"></span>
+          {{ __('No forks are available to you.') }}<br />
+          <gl-sprintf
+            :message="
+              __(
+                `To protect this issue's confidentiality, %{forkLink} and set the fork's visibility to private.`,
+              )
+            "
+          >
+            <template #forkLink>
+              <a :href="newForkPath" target="_blank" class="help-link">{{
+                __('fork this project')
+              }}</a>
+            </template>
+          </gl-sprintf>
         </template>
         <gl-link
           :href="helpPagePath"

app/assets/javascripts/confirm_danger_modal.js

 import $ from 'jquery';
 import { rstrip } from './lib/utils/common_utils';
-function openConfirmDangerModal($form, text) {
-  const $input = $('.js-confirm-danger-input');
+function openConfirmDangerModal($form, $modal, text) {
+  const $input = $('.js-confirm-danger-input', $modal);
   $input.val('');
-  $('.js-confirm-text').text(text || '');
-  $('#modal-confirm-danger').modal('show');
-  const confirmTextMatch = $('.js-confirm-danger-match').text();
-  const $submit = $('.js-confirm-danger-submit');
+  $('.js-confirm-text', $modal).text(text || '');
+  $modal.modal('show');
+  const confirmTextMatch = $('.js-confirm-danger-match', $modal).text();
+  const $submit = $('.js-confirm-danger-submit', $modal);
   $submit.disable();
   $input.focus();
-  $('.js-confirm-danger-input')
-    .off('input')
-    .on('input', function handleInput() {
-      const confirmText = rstrip($(this).val());
-      if (confirmText === confirmTextMatch) {
-        $submit.enable();
-      } else {
-        $submit.disable();
-      }
-    });
-  $('.js-confirm-danger-submit')
+  $input.off('input').on('input', function handleInput() {
+    const confirmText = rstrip($(this).val());
+    if (confirmText === confirmTextMatch) {
+      $submit.enable();
+    } else {
+      $submit.disable();
+    }
+  });
+  $('.js-confirm-danger-submit', $modal)
     .off('click')
     .on('click', () => $form.submit());
 }
+function getModal($btn) {
+  const $modal = $btn.prev('.modal');
+
+  if ($modal.length) {
+    return $modal;
+  }
+
+  return $('#modal-confirm-danger');
+}
+
 export default function initConfirmDangerModal() {
   $(document).on('click', '.js-confirm-danger', e => {
-    e.preventDefault();
     const $btn = $(e.target);
-    const $form = $btn.closest('form');
-    const text = $btn.data('confirmDangerMessage');
-    openConfirmDangerModal($form, text);
+    const checkFieldName = $btn.data('checkFieldName');
+    const checkFieldCompareValue = $btn.data('checkCompareValue');
+    const checkFieldVal = parseInt($(`[name="${checkFieldName}"]`).val(), 10);
+
+    if (!checkFieldName || checkFieldVal < checkFieldCompareValue) {
+      e.preventDefault();
+      const $form = $btn.closest('form');
+      const $modal = getModal($btn);
+      const text = $btn.data('confirmDangerMessage');
+      openConfirmDangerModal($form, $modal, text);
+    }
   });
 }

app/assets/javascripts/contributors/components/contributors.vue

 <script>
-import { __ } from '~/locale';
 import _ from 'underscore';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
 import { GlAreaChart } from '@gitlab/ui/dist/charts';
+import { __ } from '~/locale';
 import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
 import { getDatesInRange } from '~/lib/utils/datetime_utility';
 import { xAxisLabelFormatter, dateFormatter } from '../utils';

app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue

 <script>
+import $ from 'jquery';
+import { GlIcon } from '@gitlab/ui';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
-import { GlIcon } from '@gitlab/ui';
 const toArray = value => [].concat(value);
 const itemsProp = (items, prop) => items.map(item => item[prop]);
@@ -106,6 +107,7 @@ export default {
   data() {
     return {
       searchQuery: '',
+      focusOnSearch: false,
     };
   },
   computed: {
@@ -141,6 +143,18 @@ export default {
       return itemsProp(this.selectedItems, this.valueProperty).join(', ');
     },
   },
+  mounted() {
+    $(this.$refs.dropdown)
+      .on('shown.bs.dropdown', () => {
+        this.focusOnSearch = true;
+      })
+      .on('hidden.bs.dropdown', () => {
+        this.focusOnSearch = false;
+      });
+  },
+  beforeDestroy() {
+    $(this.$refs.dropdown).off();
+  },
   methods: {
     getItemsOrEmptyList() {
       return this.items || [];
@@ -170,7 +184,7 @@ export default {
 <template>
   <div>
-    <div class="js-gcp-machine-type-dropdown dropdown">
+    <div ref="dropdown" class="dropdown">
       <dropdown-hidden-input :name="fieldName" :value="selectedItemsValues" />
       <dropdown-button
         :class="{ 'border-danger': hasErrors }"
@@ -179,7 +193,11 @@ export default {
         :toggle-text="toggleText"
       />
       <div class="dropdown-menu dropdown-select">
-        <dropdown-search-input v-model="searchQuery" :placeholder-text="searchFieldPlaceholder" />
+        <dropdown-search-input
+          v-model="searchQuery"
+          :focused="focusOnSearch"
+          :placeholder-text="searchFieldPlaceholder"
+        />
         <div class="dropdown-content">
           <ul>
             <li v-if="!results.length">

app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue

 <script>
 import { createNamespacedHelpers, mapState, mapActions } from 'vuex';
-import { sprintf, s__ } from '~/locale';
 import _ from 'underscore';
 import { GlFormInput, GlFormCheckbox } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
 import ClusterFormDropdown from './cluster_form_dropdown.vue';
 import { KUBERNETES_VERSIONS } from '../constants';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
@@ -22,10 +22,7 @@ const {
   mapState: mapSecurityGroupsState,
   mapActions: mapSecurityGroupsActions,
 } = createNamespacedHelpers('securityGroups');
-const {
-  mapState: mapInstanceTypesState,
-  mapActions: mapInstanceTypesActions,
-} = createNamespacedHelpers('instanceTypes');
+const { mapState: mapInstanceTypesState } = createNamespacedHelpers('instanceTypes');
 export default {
   components: {
@@ -265,12 +262,10 @@ export default {
   mounted() {
     this.fetchRegions();
     this.fetchRoles();
-    this.fetchInstanceTypes();
   },
   methods: {
     ...mapActions([
       'createCluster',
-      'signOut',
       'setClusterName',
       'setEnvironmentScope',
       'setKubernetesVersion',
@@ -290,7 +285,6 @@ export default {
     ...mapRolesActions({ fetchRoles: 'fetchItems' }),
     ...mapKeyPairsActions({ fetchKeyPairs: 'fetchItems' }),
     ...mapSecurityGroupsActions({ fetchSecurityGroups: 'fetchItems' }),
-    ...mapInstanceTypesActions({ fetchInstanceTypes: 'fetchItems' }),
     setRegionAndFetchVpcsAndKeyPairs(region) {
       this.setRegion({ region });
       this.setVpc({ vpc: null });
@@ -316,11 +310,6 @@ export default {
       {{ s__('ClusterIntegration|Enter the details for your Amazon EKS Kubernetes cluster') }}
     </h2>
     <div class="mb-3" v-html="kubernetesIntegrationHelpText"></div>
-    <div class="mb-3">
-      <button class="btn btn-link js-sign-out" @click.prevent="signOut()">
-        {{ s__('ClusterIntegration|Select a different AWS role') }}
-      </button>
-    </div>
     <div class="form-group">
       <label class="label-bold" for="eks-cluster-name">{{
         s__('ClusterIntegration|Kubernetes cluster name')

app/assets/javascripts/create_cluster/eks_cluster/components/service_credentials_form.vue

 <script>
 import { GlFormInput } from '@gitlab/ui';
-import { sprintf, s__, __ } from '~/locale';
 import _ from 'underscore';
 import { mapState, mapActions } from 'vuex';
+import { sprintf, s__, __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
@@ -28,7 +28,7 @@ export default {
   },
   data() {
     return {
-      roleArn: '',
+      roleArn: this.$store.state.roleArn,
     };
   },
   computed: {

app/assets/javascripts/create_cluster/eks_cluster/index.js

@@ -12,20 +12,14 @@ export default el => {
     kubernetesIntegrationHelpPath,
     accountAndExternalIdsHelpPath,
     createRoleArnHelpPath,
-    getRolesPath,
-    getRegionsPath,
-    getKeyPairsPath,
-    getVpcsPath,
-    getSubnetsPath,
-    getSecurityGroupsPath,
-    getInstanceTypesPath,
     externalId,
     accountId,
+    instanceTypes,
     hasCredentials,
     createRolePath,
     createClusterPath,
-    signOutPath,
     externalLinkIcon,
+    roleArn,
   } = el.dataset;
   return new Vue({
@@ -35,18 +29,10 @@ export default el => {
         hasCredentials: parseBoolean(hasCredentials),
         externalId,
         accountId,
+        instanceTypes: JSON.parse(instanceTypes),
         createRolePath,
         createClusterPath,
-        signOutPath,
-      },
-      apiPaths: {
-        getRolesPath,
-        getRegionsPath,
-        getKeyPairsPath,
-        getVpcsPath,
-        getSubnetsPath,
-        getSecurityGroupsPath,
-        getInstanceTypesPath,
+        roleArn,
       },
     }),
     components: {

app/assets/javascripts/create_cluster/eks_cluster/services/aws_services_facade.js

-import axios from '~/lib/utils/axios_utils';
-
-export default apiPaths => ({
-  fetchRoles() {
-    return axios
-      .get(apiPaths.getRolesPath)
-      .then(({ data: { roles } }) =>
-        roles.map(({ role_name: name, arn: value }) => ({ name, value })),
-      );
-  },
-  fetchKeyPairs({ region }) {
-    return axios
-      .get(apiPaths.getKeyPairsPath, { params: { region } })
-      .then(({ data: { key_pairs: keyPairs } }) =>
-        keyPairs.map(({ key_name }) => ({ name: key_name, value: key_name })),
-      );
-  },
-  fetchRegions() {
-    return axios.get(apiPaths.getRegionsPath).then(({ data: { regions } }) =>
-      regions.map(({ region_name }) => ({
-        name: region_name,
-        value: region_name,
+import AWS from 'aws-sdk/global';
+import EC2 from 'aws-sdk/clients/ec2';
+import IAM from 'aws-sdk/clients/iam';
+
+const lookupVpcName = ({ Tags: tags, VpcId: id }) => {
+  const nameTag = tags.find(({ Key: key }) => key === 'Name');
+
+  return nameTag ? nameTag.Value : id;
+};
+
+export const DEFAULT_REGION = 'us-east-2';
+
+export const setAWSConfig = ({ awsCredentials }) => {
+  AWS.config = {
+    ...awsCredentials,
+    region: DEFAULT_REGION,
+  };
+};
+
+export const fetchRoles = () => {
+  const iam = new IAM();
+
+  return iam
+    .listRoles()
+    .promise()
+    .then(({ Roles: roles }) => roles.map(({ RoleName: name, Arn: value }) => ({ name, value })));
+};
+
+export const fetchRegions = () => {
+  const ec2 = new EC2();
+
+  return ec2
+    .describeRegions()
+    .promise()
+    .then(({ Regions: regions }) =>
+      regions.map(({ RegionName: name }) => ({
+        name,
+        value: name,
       })),
     );
-  },
-  fetchVpcs({ region }) {
-    return axios.get(apiPaths.getVpcsPath, { params: { region } }).then(({ data: { vpcs } }) =>
-      vpcs.map(({ vpc_id }) => ({
-        value: vpc_id,
-        name: vpc_id,
+};
+
+export const fetchKeyPairs = ({ region }) => {
+  const ec2 = new EC2({ region });
+
+  return ec2
+    .describeKeyPairs()
+    .promise()
+    .then(({ KeyPairs: keyPairs }) => keyPairs.map(({ KeyName: name }) => ({ name, value: name })));
+};
+
+export const fetchVpcs = ({ region }) => {
+  const ec2 = new EC2({ region });
+
+  return ec2
+    .describeVpcs()
+    .promise()
+    .then(({ Vpcs: vpcs }) =>
+      vpcs.map(vpc => ({
+        value: vpc.VpcId,
+        name: lookupVpcName(vpc),
       })),
     );
-  },
-  fetchSubnets({ vpc, region }) {
-    return axios
-      .get(apiPaths.getSubnetsPath, { params: { vpc_id: vpc, region } })
-      .then(({ data: { subnets } }) =>
-        subnets.map(({ subnet_id }) => ({ name: subnet_id, value: subnet_id })),
-      );
-  },
-  fetchSecurityGroups({ vpc, region }) {
-    return axios
-      .get(apiPaths.getSecurityGroupsPath, { params: { vpc_id: vpc, region } })
-      .then(({ data: { security_groups: securityGroups } }) =>
-        securityGroups.map(({ group_name: name, group_id: value }) => ({ name, value })),
-      );
-  },
-  fetchInstanceTypes() {
-    return axios
-      .get(apiPaths.getInstanceTypesPath)
-      .then(({ data: { instance_types: instanceTypes } }) =>
-        instanceTypes.map(({ instance_type_name }) => ({
-          name: instance_type_name,
-          value: instance_type_name,
-        })),
-      );
-  },
-});
+};
+
+export const fetchSubnets = ({ vpc, region }) => {
+  const ec2 = new EC2({ region });
+
+  return ec2
+    .describeSubnets({
+      Filters: [
+        {
+          Name: 'vpc-id',
+          Values: [vpc],
+        },
+      ],
+    })
+    .promise()
+    .then(({ Subnets: subnets }) => subnets.map(({ SubnetId: id }) => ({ value: id, name: id })));
+};
+
+export const fetchSecurityGroups = ({ region, vpc }) => {
+  const ec2 = new EC2({ region });
+
+  return ec2
+    .describeSecurityGroups({
+      Filters: [
+        {
+          Name: 'vpc-id',
+          Values: [vpc],
+        },
+      ],
+    })
+    .promise()
+    .then(({ SecurityGroups: securityGroups }) =>
+      securityGroups.map(({ GroupName: name, GroupId: value }) => ({ name, value })),
+    );
+};

app/assets/javascripts/create_cluster/eks_cluster/store/actions.js

 import * as types from './mutation_types';
+import { setAWSConfig } from '../services/aws_services_facade';
 import axios from '~/lib/utils/axios_utils';
 import createFlash from '~/flash';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 const getErrorMessage = data => {
   const errorKey = Object.keys(data)[0];
@@ -28,7 +30,7 @@ export const createRole = ({ dispatch, state: { createRolePath } }, payload) =>
       role_arn: payload.roleArn,
       role_external_id: payload.externalId,
     })
-    .then(() => dispatch('createRoleSuccess'))
+    .then(({ data }) => dispatch('createRoleSuccess', convertObjectPropsToCamelCase(data)))
     .catch(error => dispatch('createRoleError', { error }));
 };
@@ -36,7 +38,8 @@ export const requestCreateRole = ({ commit }) => {
   commit(types.REQUEST_CREATE_ROLE);
 };
-export const createRoleSuccess = ({ commit }) => {
+export const createRoleSuccess = ({ commit }, awsCredentials) => {
+  setAWSConfig({ awsCredentials });
   commit(types.CREATE_ROLE_SUCCESS);
 };
@@ -117,9 +120,3 @@ export const setInstanceType = ({ commit }, payload) => {
 export const setNodeCount = ({ commit }, payload) => {
   commit(types.SET_NODE_COUNT, payload);
 };
-
-export const signOut = ({ commit, state: { signOutPath } }) =>
-  axios
-    .delete(signOutPath)
-    .then(() => commit(types.SIGN_OUT))
-    .catch(({ response: { data } }) => createFlash(getErrorMessage(data)));

app/assets/javascripts/create_cluster/eks_cluster/store/cluster_dropdown/index.js

@@ -3,11 +3,11 @@ import actions from './actions';
 import mutations from './mutations';
 import state from './state';
-const createStore = fetchFn => ({
+const createStore = ({ fetchFn, initialState }) => ({
   actions: actions(fetchFn),
   getters,
   mutations,
-  state: state(),
+  state: Object.assign(state(), initialState || {}),
 });
 export default createStore;

app/assets/javascripts/create_cluster/eks_cluster/store/index.js

@@ -6,12 +6,17 @@ import state from './state';
 import clusterDropdownStore from './cluster_dropdown';
-import awsServicesFactory from '../services/aws_services_facade';
-const createStore = ({ initialState, apiPaths }) => {
-  const awsServices = awsServicesFactory(apiPaths);
-
-  return new Vuex.Store({
+import {
+  fetchRoles,
+  fetchRegions,
+  fetchKeyPairs,
+  fetchVpcs,
+  fetchSubnets,
+  fetchSecurityGroups,
+} from '../services/aws_services_facade';
+const createStore = ({ initialState }) =>
+  new Vuex.Store({
     actions,
     getters,
     mutations,
@@ -19,34 +24,33 @@ const createStore = ({ initialState, apiPaths }) => {
     modules: {
       roles: {
         namespaced: true,
-        ...clusterDropdownStore(awsServices.fetchRoles),
+        ...clusterDropdownStore({ fetchFn: fetchRoles }),
       },
       regions: {
         namespaced: true,
-        ...clusterDropdownStore(awsServices.fetchRegions),
+        ...clusterDropdownStore({ fetchFn: fetchRegions }),
       },
       keyPairs: {
         namespaced: true,
-        ...clusterDropdownStore(awsServices.fetchKeyPairs),
+        ...clusterDropdownStore({ fetchFn: fetchKeyPairs }),
       },
       vpcs: {
         namespaced: true,
-        ...clusterDropdownStore(awsServices.fetchVpcs),
+        ...clusterDropdownStore({ fetchFn: fetchVpcs }),
       },
       subnets: {
         namespaced: true,
-        ...clusterDropdownStore(awsServices.fetchSubnets),
+        ...clusterDropdownStore({ fetchFn: fetchSubnets }),
       },
       securityGroups: {
         namespaced: true,
-        ...clusterDropdownStore(awsServices.fetchSecurityGroups),
+        ...clusterDropdownStore({ fetchFn: fetchSecurityGroups }),
       },
       instanceTypes: {
         namespaced: true,
-        ...clusterDropdownStore(awsServices.fetchInstanceTypes),
+        ...clusterDropdownStore({ initialState: { items: initialState.instanceTypes } }),
       },
     },
   });
-};
 export default createStore;

app/assets/javascripts/create_cluster/eks_cluster/store/mutation_types.js

@@ -13,7 +13,6 @@ export const SET_GITLAB_MANAGED_CLUSTER = 'SET_GITLAB_MANAGED_CLUSTER';
 export const REQUEST_CREATE_ROLE = 'REQUEST_CREATE_ROLE';
 export const CREATE_ROLE_SUCCESS = 'CREATE_ROLE_SUCCESS';
 export const CREATE_ROLE_ERROR = 'CREATE_ROLE_ERROR';
-export const SIGN_OUT = 'SIGN_OUT';
 export const REQUEST_CREATE_CLUSTER = 'REQUEST_CREATE_CLUSTER';
 export const CREATE_CLUSTER_SUCCESS = 'CREATE_CLUSTER_SUCCESS';
 export const CREATE_CLUSTER_ERROR = 'CREATE_CLUSTER_ERROR';

app/assets/javascripts/create_cluster/eks_cluster/store/mutations.js

@@ -60,7 +60,4 @@ export default {
     state.isCreatingCluster = false;
     state.createClusterError = error;
   },
-  [types.SIGN_OUT](state) {
-    state.hasCredentials = false;
-  },
 };

app/assets/javascripts/create_cluster/eks_cluster/store/state.js

@@ -12,6 +12,8 @@ export default () => ({
   accountId: '',
   externalId: '',
+  roleArn: '',
+
   clusterName: '',
   environmentScope: '*',
   kubernetesVersion,

app/assets/javascripts/create_cluster/gke_cluster/components/gke_dropdown_mixin.js

 import _ from 'underscore';
+import { GlLoadingIcon } from '@gitlab/ui';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
-import { GlLoadingIcon } from '@gitlab/ui';
 import store from '../store';

app/assets/javascripts/create_cluster/gke_cluster/components/gke_machine_type_dropdown.vue

 <script>
-import { sprintf, s__ } from '~/locale';
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { sprintf, s__ } from '~/locale';
 import gkeDropdownMixin from './gke_dropdown_mixin';

app/assets/javascripts/create_cluster/gke_cluster/components/gke_project_id_dropdown.vue

 <script>
 import _ from 'underscore';
-import { s__, sprintf } from '~/locale';
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { s__, sprintf } from '~/locale';
 import gkeDropdownMixin from './gke_dropdown_mixin';

app/assets/javascripts/create_cluster/gke_cluster/components/gke_zone_dropdown.vue

 <script>
-import { sprintf, s__ } from '~/locale';
 import { mapState, mapActions } from 'vuex';
+import { sprintf, s__ } from '~/locale';
 import gkeDropdownMixin from './gke_dropdown_mixin';

app/assets/javascripts/create_cluster/init_create_cluster.js

@@ -6,7 +6,7 @@ const newClusterViews = [':clusters:new', ':clusters:create_gcp', ':clusters:cre
 const isProjectLevelCluster = page => page.startsWith('project:clusters');
-export default (document, gon) => {
+export default document => {
   const { page } = document.body.dataset;
   const isNewClusterView = newClusterViews.some(view => page.endsWith(view));
@@ -19,17 +19,15 @@ export default (document, gon) => {
   initGkeDropdowns();
-  if (gon.features.createEksClusters) {
-    import(/* webpackChunkName: 'eks_cluster' */ '~/create_cluster/eks_cluster')
-      .then(({ default: initCreateEKSCluster }) => {
-        const el = document.querySelector('.js-create-eks-cluster-form-container');
-        if (el) {
-          initCreateEKSCluster(el);
-        }
-      })
-      .catch(() => {});
-  }
+  import(/* webpackChunkName: 'eks_cluster' */ '~/create_cluster/eks_cluster')
+    .then(({ default: initCreateEKSCluster }) => {
+      const el = document.querySelector('.js-create-eks-cluster-form-container');
+      if (el) {
+        initCreateEKSCluster(el);
+      }
+    })
+    .catch(() => {});
   if (isProjectLevelCluster(page)) {
     initGkeNamespace();