Add form static fields to cluster form

- Cluster name
- Environment scope
- Kubernetes version

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

@@ -7,8 +7,16 @@ export default {
     ServiceCredentialsForm,
     EksClusterConfigurationForm,
   },
+  props: {
+    gitlabManagedClusterHelpPath: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 <template>
-  <eks-cluster-configuration-form />
+  <eks-cluster-configuration-form
+    :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
+  />
 </template>

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 ClusterFormDropdown from './cluster_form_dropdown.vue';
 import RegionDropdown from './region_dropdown.vue';
-import SecurityGroupDropdown from './security_group_dropdown.vue';
+import { KUBERNETES_VERSIONS } from '../constants';
 
 const { mapState: mapRolesState, mapActions: mapRolesActions } = createNamespacedHelpers('roles');
 const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers(
@@ -16,20 +18,36 @@ const { mapState: mapVpcsState, mapActions: mapVpcActions } = createNamespacedHe
 const { mapState: mapSubnetsState, mapActions: mapSubnetActions } = createNamespacedHelpers(
   'subnets',
 );
+const {
+  mapState: mapSecurityGroupsState,
+  mapActions: mapSecurityGroupsActions,
+} = createNamespacedHelpers('securityGroups');
 
 export default {
   components: {
     ClusterFormDropdown,
     RegionDropdown,
-    SecurityGroupDropdown,
+    GlFormInput,
+    GlFormCheckbox,
+  },
+  props: {
+    gitlabManagedClusterHelpPath: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     ...mapState([
+      'clusterName',
+      'environmentScope',
+      'kubernetesVersion',
       'selectedRegion',
       'selectedKeyPair',
       'selectedVpc',
       'selectedSubnet',
       'selectedRole',
+      'selectedSecurityGroup',
+      'gitlabManagedCluster',
     ]),
     ...mapRolesState({
       roles: 'items',
@@ -56,6 +74,14 @@ export default {
       isLoadingSubnets: 'isLoadingItems',
       loadingSubnetsError: 'loadingItemsError',
     }),
+    ...mapSecurityGroupsState({
+      securityGroups: 'items',
+      isLoadingSecurityGroups: 'isLoadingItems',
+      loadingSecurityGroupsError: 'loadingItemsError',
+    }),
+    kubernetesVersions() {
+      return KUBERNETES_VERSIONS;
+    },
     vpcDropdownDisabled() {
       return !this.selectedRegion;
     },
@@ -65,6 +91,9 @@ export default {
     subnetDropdownDisabled() {
       return !this.selectedVpc;
     },
+    securityGroupDropdownDisabled() {
+      return !this.selectedVpc;
+    },
     roleDropdownHelpText() {
       return sprintf(
         s__(
@@ -117,18 +146,57 @@ export default {
         false,
       );
     },
+    securityGroupDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Choose the %{startLink}security groups%{endLink} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets.',
+        ),
+        {
+          startLink:
+            '<a href="https://console.aws.amazon.com/vpc/home?#securityGroups" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    gitlabManagedHelpText() {
+      const escapedUrl = _.escape(this.gitlabManagedClusterHelpPath);
+
+      return sprintf(
+        s__(
+          'ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{startLink}More information%{endLink}',
+        ),
+        {
+          startLink: `<a href="${escapedUrl}" target="_blank" rel="noopener noreferrer">`,
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
   },
   mounted() {
     this.fetchRegions();
     this.fetchRoles();
   },
   methods: {
-    ...mapActions(['setRegion', 'setVpc', 'setSubnet', 'setRole', 'setKeyPair']),
+    ...mapActions([
+      'setClusterName',
+      'setEnvironmentScope',
+      'setKubernetesVersion',
+      'setRegion',
+      'setVpc',
+      'setSubnet',
+      'setRole',
+      'setKeyPair',
+      'setSecurityGroup',
+      'setGitlabManagedCluster',
+    ]),
     ...mapRegionsActions({ fetchRegions: 'fetchItems' }),
     ...mapVpcActions({ fetchVpcs: 'fetchItems' }),
     ...mapSubnetActions({ fetchSubnets: 'fetchItems' }),
     ...mapRolesActions({ fetchRoles: 'fetchItems' }),
     ...mapKeyPairsActions({ fetchKeyPairs: 'fetchItems' }),
+    ...mapSecurityGroupsActions({ fetchSecurityGroups: 'fetchItems' }),
     setRegionAndFetchVpcsAndKeyPairs(region) {
       this.setRegion({ region });
       this.fetchVpcs({ region });
@@ -137,12 +205,47 @@ export default {
     setVpcAndFetchSubnets(vpc) {
       this.setVpc({ vpc });
       this.fetchSubnets({ vpc });
+      this.fetchSecurityGroups({ vpc });
     },
   },
 };
 </script>
 <template>
   <form name="eks-cluster-configuration-form">
+    <div class="form-group">
+      <label class="label-bold" for="eks-cluster-name">{{
+        s__('ClusterIntegration|Kubernetes cluster name')
+      }}</label>
+      <gl-form-input
+        id="eks-cluster-name"
+        :value="clusterName"
+        @input="setClusterName({ clusterName: $event })"
+      />
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-environment-scope">{{
+        s__('ClusterIntegration|Environment scope')
+      }}</label>
+      <gl-form-input
+        id="eks-environment-scope"
+        :value="environmentScope"
+        @input="setEnvironmentScope({ environmentScope: $event })"
+      />
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-kubernetes-version">{{
+        s__('ClusterIntegration|Kubernetes version')
+      }}</label>
+      <cluster-form-dropdown
+        field-id="eks-kubernetes-version"
+        field-name="eks-kubernetes-version"
+        :value="kubernetesVersion"
+        :items="kubernetesVersions"
+        :empty-text="s__('ClusterIntegration|Kubernetes version not found')"
+        @input="setKubernetesVersion({ kubernetesVersion: $event })"
+      />
+      <p class="form-text text-muted" v-html="roleDropdownHelpText"></p>
+    </div>
     <div class="form-group">
       <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Role name') }}</label>
       <cluster-form-dropdown
@@ -233,5 +336,37 @@ export default {
       />
       <p class="form-text text-muted" v-html="subnetDropdownHelpText"></p>
     </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-security-group">{{
+        s__('ClusterIntegration|Security groups')
+      }}</label>
+      <cluster-form-dropdown
+        field-id="eks-security-group"
+        field-name="eks-security-group"
+        :input="selectedSecurityGroup"
+        :items="securityGroups"
+        :loading="isLoadingSecurityGroups"
+        :disabled="securityGroupDropdownDisabled"
+        :disabled-text="s__('ClusterIntegration|Select a VPC to choose a security group')"
+        :loading-text="s__('ClusterIntegration|Loading security groups')"
+        :placeholder="s__('ClusterIntergation|Select a security group')"
+        :search-field-placeholder="s__('ClusterIntegration|Search security groups')"
+        :empty-text="s__('ClusterIntegration|No security group found')"
+        :has-errors="Boolean(loadingSecurityGroupsError)"
+        :error-message="
+          s__('ClusterIntegration|Could not load security groups for the selected VPC')
+        "
+        @input="setSecurityGroup({ securityGroup: $event })"
+      />
+      <p class="form-text text-muted" v-html="securityGroupDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <gl-form-checkbox
+        :checked="gitlabManagedCluster"
+        @input="setGitlabManagedCluster({ gitlabManagedCluster: $event })"
+        >{{ s__('ClusterIntegration|GitLab-managed cluster') }}</gl-form-checkbox
+      >
+      <p class="form-text text-muted" v-html="gitlabManagedHelpText"></p>
+    </div>
   </form>
 </template>

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

+// eslint-disable-next-line import/prefer-default-export
+export const KUBERNETES_VERSIONS = [
+  { name: '1.14', value: '1.14' },
+  { name: '1.13', value: '1.13' },
+  { name: '1.12', value: '1.12' },
+  { name: '1.11', value: '1.11' },
+];

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

@@ -12,7 +12,18 @@ export default () =>
     components: {
       CreateEksCluster,
     },
+    data() {
+      const { gitlabManagedClusterHelpPath } = document.querySelector(this.$options.el).dataset;
+
+      return {
+        gitlabManagedClusterHelpPath,
+      };
+    },
     render(createElement) {
-      return createElement('create-eks-cluster');
+      return createElement('create-eks-cluster', {
+        props: {
+          gitlabManagedClusterHelpPath: this.gitlabManagedClusterHelpPath,
+        },
+      });
     },
   });

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

 import EC2 from 'aws-sdk/clients/ec2';
 import IAM from 'aws-sdk/clients/iam';
 
-export const fetchRoles = () =>
-  new Promise((resolve, reject) => {
-    const iam = new IAM();
-
-    iam
-      .listRoles()
-      .on('success', ({ data: { Roles: roles } }) => {
-        const transformedRoles = roles.map(({ RoleName: name }) => ({ name }));
-
-        resolve(transformedRoles);
-      })
-      .on('error', error => {
-        reject(error);
-      })
-      .send();
-  });
-
-export const fetchKeyPairs = () =>
-  new Promise((resolve, reject) => {
-    const ec2 = new EC2();
-
-    ec2
-      .describeKeyPairs()
-      .on('success', ({ data: { KeyPairs: keyPairs } }) => {
-        const transformedKeyPairs = keyPairs.map(({ RegionName: name }) => ({ name }));
-
-        resolve(transformedKeyPairs);
-      })
-      .on('error', error => {
-        reject(error);
-      })
-      .send();
-  });
-
-export const fetchRegions = () =>
-  new Promise((resolve, reject) => {
-    const ec2 = new EC2();
-
-    ec2
-      .describeRegions()
-      .on('success', ({ data: { Regions: regions } }) => {
-        const transformedRegions = regions.map(({ RegionName: name }) => ({ name }));
-
-        resolve(transformedRegions);
-      })
-      .on('error', error => {
-        reject(error);
-      })
-      .send();
-  });
-
-export const fetchVpcs = () =>
-  new Promise((resolve, reject) => {
-    const ec2 = new EC2();
-
-    ec2
-      .describeVpcs()
-      .on('success', ({ data: { Vpcs: vpcs } }) => {
-        const transformedVpcs = vpcs.map(({ VpcId: id }) => ({ id, name: id }));
-
-        resolve(transformedVpcs);
-      })
-      .on('error', error => {
-        reject(error);
-      })
-      .send();
-  });
-
-export const fetchSubnets = ({ vpc }) =>
-  new Promise((resolve, reject) => {
-    const ec2 = new EC2();
-
-    ec2
-      .describeSubnets({
-        Filters: [
-          {
-            Name: 'vpc-id',
-            Values: [vpc.id],
-          },
-        ],
-      })
-      .on('success', ({ data: { Subnets: subnets } }) => {
-        const transformedSubnets = subnets.map(({ SubnetId: id }) => ({ id, name: id }));
-
-        resolve(transformedSubnets);
-      })
-      .on('error', error => {
-        reject(error);
-      })
-      .send();
-  });
+export const fetchRoles = () => {
+  const iam = new IAM();
+
+  return iam
+    .listRoles()
+    .promise()
+    .then(({ Roles: roles }) => roles.map(({ RoleName: name }) => ({ name })));
+};
+
+export const fetchKeyPairs = () => {
+  const ec2 = new EC2();
+
+  return ec2
+    .describeKeyPairs()
+    .promise()
+    .then(({ KeyPairs: keyPairs }) => keyPairs.map(({ RegionName: name }) => ({ name })));
+};
+
+export const fetchRegions = () => {
+  const ec2 = new EC2();
+
+  return ec2
+    .describeRegions()
+    .promise()
+    .then(({ Regions: regions }) =>
+      regions.map(({ RegionName: name }) => ({
+        name,
+        value: name,
+      })),
+    );
+};
+
+export const fetchVpcs = () => {
+  const ec2 = new EC2();
+
+  return ec2
+    .describeVpcs()
+    .promise()
+    .then(({ Vpcs: vpcs }) =>
+      vpcs.map(({ VpcId: id }) => ({
+        value: id,
+        name: id,
+      })),
+    );
+};
+
+export const fetchSubnets = ({ vpc }) => {
+  const ec2 = new EC2();
+
+  return ec2
+    .describeSubnets({
+      Filters: [
+        {
+          Name: 'vpc-id',
+          Values: [vpc],
+        },
+      ],
+    })
+    .promise()
+    .then(({ Subnets: subnets }) => subnets.map(({ SubnetId: id }) => ({ id, name: id })));
+};
+
+export const fetchSecurityGroups = ({ vpc }) => {
+  const ec2 = new EC2();
+
+  return ec2
+    .describeSecurityGroups({
+      Filters: [
+        {
+          Name: 'vpc-id',
+          Values: [vpc],
+        },
+      ],
+    })
+    .promise()
+    .then(({ SecurityGroups: securityGroups }) =>
+      securityGroups.map(({ GroupName: name, GroupId: value }) => ({ name, value })),
+    );
+};
 
 export default () => {};

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

 import * as types from './mutation_types';
 
+export const setClusterName = ({ commit }, payload) => {
+  commit(types.SET_CLUSTER_NAME, payload);
+};
+
+export const setEnvironmentScope = ({ commit }, payload) => {
+  commit(types.SET_ENVIRONMENT_SCOPE, payload);
+};
+
+export const setKubernetesVersion = ({ commit }, payload) => {
+  commit(types.SET_KUBERNETES_VERSION, payload);
+};
+
 export const setRegion = ({ commit }, payload) => {
   commit(types.SET_REGION, payload);
 };
@@ -20,4 +32,12 @@ export const setRole = ({ commit }, payload) => {
   commit(types.SET_ROLE, payload);
 };
 
+export const setSecurityGroup = ({ commit }, payload) => {
+  commit(types.SET_SECURITY_GROUP, payload);
+};
+
+export const setGitlabManagedCluster = ({ commit }, payload) => {
+  commit(types.SET_GITLAB_MANAGED_CLUSTER, payload);
+};
+
 export default () => {};

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

@@ -35,6 +35,10 @@ const createStore = () =>
         namespaced: true,
         ...clusterDropdownStore(awsServices.fetchSubnets),
       },
+      securityGroups: {
+        namespaced: true,
+        ...clusterDropdownStore(awsServices.fetchSecurityGroups),
+      },
     },
   });
 

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

+export const SET_CLUSTER_NAME = 'SET_CLUSTER_NAME';
+export const SET_ENVIRONMENT_SCOPE = 'SET_ENVIRONMENT_SCOPE';
+export const SET_KUBERNETES_VERSION = 'SET_KUBERNETES_VERSION';
 export const SET_REGION = 'SET_REGION';
 export const SET_VPC = 'SET_VPC';
 export const SET_KEY_PAIR = 'SET_KEY_PAIR';
 export const SET_SUBNET = 'SET_SUBNET';
 export const SET_ROLE = 'SET_ROLE';
+export const SET_SECURITY_GROUP = 'SET_SECURITY_GROUP';
+export const SET_GITLAB_MANAGED_CLUSTER = 'SET_GITLAB_MANAGED_CLUSTER';

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

 import * as types from './mutation_types';
 
 export default {
+  [types.SET_CLUSTER_NAME](state, { clusterName }) {
+    state.clusterName = clusterName;
+  },
+  [types.SET_ENVIRONMENT_SCOPE](state, { environmentScope }) {
+    state.environmentScope = environmentScope;
+  },
+  [types.SET_KUBERNETES_VERSION](state, { kubernetesVersion }) {
+    state.kubernetesVersion = kubernetesVersion;
+  },
   [types.SET_REGION](state, { region }) {
     state.selectedRegion = region;
   },
@@ -16,4 +25,10 @@ export default {
   [types.SET_ROLE](state, { role }) {
     state.selectedRole = role;
   },
+  [types.SET_SECURITY_GROUP](state, { securityGroup }) {
+    state.selectedSecurityGroup = securityGroup;
+  },
+  [types.SET_GITLAB_MANAGED_CLUSTER](state, { gitlabManagedCluster }) {
+    state.gitlabManagedCluster = gitlabManagedCluster;
+  },
 };

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

+import { KUBERNETES_VERSIONS } from '../constants';
+
 export default () => ({
   isValidatingCredentials: false,
   validCredentials: false,
 
+  clusterName: '',
+  environmentScope: '*',
+  kubernetesVersion: [KUBERNETES_VERSIONS].value,
   selectedRegion: '',
   selectedRole: '',
   selectedKeyPair: '',
   selectedVpc: '',
   selectedSubnet: '',
   selectedSecurityGroup: '',
+
+  gitlabManagedCluster: true,
 });

app/views/clusters/clusters/eks/_index.html.haml

-.js-create-eks-cluster-form-container
+.js-create-eks-cluster-form-container{ data: { 'gitlab-managed-cluster-help-path' => help_page_path('user/project/clusters/index.md', anchor: 'gitlab-managed-clusters') } }

locale/gitlab.pot

@@ -3408,6 +3408,9 @@ msgstr ""
 msgid "ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster."
 msgstr ""
 
+msgid "ClusterIntegration|Allow GitLab to manage namespace and service accounts for this cluster. %{startLink}More information%{endLink}"
+msgstr ""
+
 msgid "ClusterIntegration|Alternatively"
 msgstr ""
 
@@ -3456,6 +3459,9 @@ msgstr ""
 msgid "ClusterIntegration|Choose a prefix to be used for your namespaces. Defaults to your project path."
 msgstr ""
 
+msgid "ClusterIntegration|Choose the %{startLink}security groups%{endLink} to apply to the EKS-managed Elastic Network Interfaces that are created in your worker node subnets."
+msgstr ""
+
 msgid "ClusterIntegration|Choose the %{startLink}subnets%{endLink} in your VPC where your worker nodes will run."
 msgstr ""
 
@@ -3510,6 +3516,9 @@ msgstr ""
 msgid "ClusterIntegration|Could not load regions from your AWS account"
 msgstr ""
 
+msgid "ClusterIntegration|Could not load security groups for the selected VPC"
+msgstr ""
+
 msgid "ClusterIntegration|Could not load subnets for the selected VPC"
 msgstr ""
 
@@ -3675,6 +3684,12 @@ msgstr ""
 msgid "ClusterIntegration|Kubernetes clusters can be used to deploy applications and to provide Review Apps for this project"
 msgstr ""
 
+msgid "ClusterIntegration|Kubernetes version"
+msgstr ""
+
+msgid "ClusterIntegration|Kubernetes version not found"
+msgstr ""
+
 msgid "ClusterIntegration|Learn more about %{help_link_start_machine_type}machine types%{help_link_end} and %{help_link_start_pricing}pricing%{help_link_end}."
 msgstr ""
 
@@ -3708,6 +3723,9 @@ msgstr ""
 msgid "ClusterIntegration|Loading VPCs"
 msgstr ""
 
+msgid "ClusterIntegration|Loading security groups"
+msgstr ""
+
 msgid "ClusterIntegration|Loading subnets"
 msgstr ""
 
@@ -3741,6 +3759,9 @@ msgstr ""
 msgid "ClusterIntegration|No region found"
 msgstr ""
 
+msgid "ClusterIntegration|No security group found"
+msgstr ""
+
 msgid "ClusterIntegration|No subnet found"
 msgstr ""
 
@@ -3828,15 +3849,24 @@ msgstr ""
 msgid "ClusterIntegration|Search regions"
 msgstr ""
 
+msgid "ClusterIntegration|Search security groups"
+msgstr ""
+
 msgid "ClusterIntegration|Search subnets"
 msgstr ""
 
 msgid "ClusterIntegration|Search zones"
 msgstr ""
 
+msgid "ClusterIntegration|Security groups"
+msgstr ""
+
 msgid "ClusterIntegration|See and edit the details for your Kubernetes cluster"
 msgstr ""
 
+msgid "ClusterIntegration|Select a VPC to choose a security group"
+msgstr ""
+
 msgid "ClusterIntegration|Select a VPC to choose a subnet"
 msgstr ""
 
@@ -4008,6 +4038,9 @@ msgstr ""
 msgid "ClusterIntergation|Select a region"
 msgstr ""
 
+msgid "ClusterIntergation|Select a security group"
+msgstr ""
+
 msgid "ClusterIntergation|Select a subnet"
 msgstr ""
 

spec/frontend/create_cluster/eks_cluster/components/eks_cluster_configuration_form_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
 import Vue from 'vue';
+import { GlFormCheckbox } from '@gitlab/ui';
+
 import EksClusterConfigurationForm from '~/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue';
 import RegionDropdown from '~/create_cluster/eks_cluster/components/region_dropdown.vue';
-
 import eksClusterFormState from '~/create_cluster/eks_cluster/store/state';
 import clusterDropdownStoreState from '~/create_cluster/eks_cluster/store/cluster_dropdown/state';
 
@@ -19,21 +20,28 @@ describe('EksClusterConfigurationForm', () => {
   let vpcsState;
   let subnetsState;
   let keyPairsState;
+  let securityGroupsState;
   let vpcsActions;
   let rolesActions;
   let regionsActions;
   let subnetsActions;
   let keyPairsActions;
+  let securityGroupsActions;
   let vm;
 
   beforeEach(() => {
     state = eksClusterFormState();
     actions = {
+      setClusterName: jest.fn(),
+      setEnvironmentScope: jest.fn(),
+      setKubernetesVersion: jest.fn(),
       setRegion: jest.fn(),
       setVpc: jest.fn(),
       setSubnet: jest.fn(),
       setRole: jest.fn(),
       setKeyPair: jest.fn(),
+      setSecurityGroup: jest.fn(),
+      setGitlabManagedCluster: jest.fn(),
     };
     regionsActions = {
       fetchItems: jest.fn(),
@@ -50,6 +58,9 @@ describe('EksClusterConfigurationForm', () => {
     rolesActions = {
       fetchItems: jest.fn(),
     };
+    securityGroupsActions = {
+      fetchItems: jest.fn(),
+    };
     rolesState = {
       ...clusterDropdownStoreState(),
     };
@@ -65,6 +76,9 @@ describe('EksClusterConfigurationForm', () => {
     keyPairsState = {
       ...clusterDropdownStoreState(),
     };
+    securityGroupsState = {
+      ...clusterDropdownStoreState(),
+    };
     store = new Vuex.Store({
       state,
       actions,
@@ -94,6 +108,11 @@ describe('EksClusterConfigurationForm', () => {
           state: keyPairsState,
           actions: keyPairsActions,
         },
+        securityGroups: {
+          namespaced: true,
+          state: securityGroupsState,
+          actions: securityGroupsActions,
+        },
       },
     });
   });
@@ -102,6 +121,9 @@ describe('EksClusterConfigurationForm', () => {
     vm = shallowMount(EksClusterConfigurationForm, {
       localVue,
       store,
+      propsData: {
+        gitlabManagedClusterHelpPath: '',
+      },
     });
   });
 
@@ -109,11 +131,16 @@ describe('EksClusterConfigurationForm', () => {
     vm.destroy();
   });
 
+  const findClusterNameInput = () => vm.find('[id=eks-cluster-name]');
+  const findEnvironmentScopeInput = () => vm.find('[id=eks-environment-scope]');
+  const findKubernetesVersionDropdown = () => vm.find('[field-id="eks-kubernetes-version"]');
   const findRegionDropdown = () => vm.find(RegionDropdown);
   const findKeyPairDropdown = () => vm.find('[field-id="eks-key-pair"]');
   const findVpcDropdown = () => vm.find('[field-id="eks-vpc"]');
   const findSubnetDropdown = () => vm.find('[field-id="eks-subnet"]');
   const findRoleDropdown = () => vm.find('[field-id="eks-role"]');
+  const findSecurityGroupDropdown = () => vm.find('[field-id="eks-security-group"]');
+  const findGitlabManagedClusterCheckbox = () => vm.find(GlFormCheckbox);
 
   describe('when mounted', () => {
     it('fetches available regions', () => {
@@ -249,6 +276,36 @@ describe('EksClusterConfigurationForm', () => {
     expect(findSubnetDropdown().props('hasErrors')).toEqual(true);
   });
 
+  it('disables SecurityGroupDropdown when no vpc is selected', () => {
+    expect(findSecurityGroupDropdown().props('disabled')).toBe(true);
+  });
+
+  it('enables SecurityGroupDropdown when a vpc is selected', () => {
+    state.selectedVpc = { name: 'vpc-1 ' };
+
+    return Vue.nextTick().then(() => {
+      expect(findSecurityGroupDropdown().props('disabled')).toBe(false);
+    });
+  });
+
+  it('sets isLoadingSecurityGroups to SecurityGroupDropdown loading property', () => {
+    securityGroupsState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findSecurityGroupDropdown().props('loading')).toBe(securityGroupsState.isLoadingItems);
+    });
+  });
+
+  it('sets securityGroups to SecurityGroupDropdown items property', () => {
+    expect(findSecurityGroupDropdown().props('items')).toBe(securityGroupsState.items);
+  });
+
+  it('sets SecurityGroupDropdown hasErrors to true when loading security groups fails', () => {
+    securityGroupsState.loadingItemsError = new Error();
+
+    expect(findSecurityGroupDropdown().props('hasErrors')).toEqual(true);
+  });
+
   describe('when region is selected', () => {
     const region = { name: 'us-west-2' };
 
@@ -273,6 +330,54 @@ describe('EksClusterConfigurationForm', () => {
     });
   });
 
+  it('dispatches setClusterName when cluster name input changes', () => {
+    const clusterName = 'name';
+
+    findClusterNameInput().vm.$emit('input', clusterName);
+
+    expect(actions.setClusterName).toHaveBeenCalledWith(
+      expect.anything(),
+      { clusterName },
+      undefined,
+    );
+  });
+
+  it('dispatches setEnvironmentScope when environment scope input changes', () => {
+    const environmentScope = 'production';
+
+    findEnvironmentScopeInput().vm.$emit('input', environmentScope);
+
+    expect(actions.setEnvironmentScope).toHaveBeenCalledWith(
+      expect.anything(),
+      { environmentScope },
+      undefined,
+    );
+  });
+
+  it('dispatches setKubernetesVersion when kubernetes version dropdown changes', () => {
+    const kubernetesVersion = { name: '1.11' };
+
+    findKubernetesVersionDropdown().vm.$emit('input', kubernetesVersion);
+
+    expect(actions.setKubernetesVersion).toHaveBeenCalledWith(
+      expect.anything(),
+      { kubernetesVersion },
+      undefined,
+    );
+  });
+
+  it('dispatches setGitlabManagedCluster when gitlab managed cluster input changes', () => {
+    const gitlabManagedCluster = false;
+
+    findGitlabManagedClusterCheckbox().vm.$emit('input', gitlabManagedCluster);
+
+    expect(actions.setGitlabManagedCluster).toHaveBeenCalledWith(
+      expect.anything(),
+      { gitlabManagedCluster },
+      undefined,
+    );
+  });
+
   describe('when vpc is selected', () => {
     const vpc = { name: 'vpc-1' };
 
@@ -287,6 +392,14 @@ describe('EksClusterConfigurationForm', () => {
     it('dispatches fetchSubnets action', () => {
       expect(subnetsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
     });
+
+    it('dispatches fetchSecurityGroups action', () => {
+      expect(securityGroupsActions.fetchItems).toHaveBeenCalledWith(
+        expect.anything(),
+        { vpc },
+        undefined,
+      );
+    });
   });
 
   describe('when a subnet is selected', () => {
@@ -324,4 +437,20 @@ describe('EksClusterConfigurationForm', () => {
       expect(actions.setKeyPair).toHaveBeenCalledWith(expect.anything(), { keyPair }, undefined);
     });
   });
+
+  describe('when security group is selected', () => {
+    const securityGroup = { name: 'default group' };
+
+    beforeEach(() => {
+      findSecurityGroupDropdown().vm.$emit('input', securityGroup);
+    });
+
+    it('dispatches setSecurityGroup action', () => {
+      expect(actions.setSecurityGroup).toHaveBeenCalledWith(
+        expect.anything(),
+        { securityGroup },
+        undefined,
+      );
+    });
+  });
 });

spec/frontend/create_cluster/eks_cluster/store/actions_spec.js

@@ -3,35 +3,55 @@ import testAction from 'helpers/vuex_action_helper';
 import createState from '~/create_cluster/eks_cluster/store/state';
 import * as actions from '~/create_cluster/eks_cluster/store/actions';
 import {
+  SET_CLUSTER_NAME,
+  SET_ENVIRONMENT_SCOPE,
+  SET_KUBERNETES_VERSION,
   SET_REGION,
   SET_VPC,
   SET_KEY_PAIR,
   SET_SUBNET,
   SET_ROLE,
+  SET_SECURITY_GROUP,
+  SET_GITLAB_MANAGED_CLUSTER,
 } from '~/create_cluster/eks_cluster/store/mutation_types';
 
 describe('EKS Cluster Store Actions', () => {
+  let clusterName;
+  let environmentScope;
+  let kubernetesVersion;
   let region;
   let vpc;
   let subnet;
   let role;
   let keyPair;
+  let securityGroup;
+  let gitlabManagedCluster;
 
   beforeEach(() => {
+    clusterName = 'my cluster';
+    environmentScope = 'production';
+    kubernetesVersion = '11.1';
     region = { name: 'regions-1' };
     vpc = { name: 'vpc-1' };
     subnet = { name: 'subnet-1' };
     role = { name: 'role-1' };
     keyPair = { name: 'key-pair-1' };
+    securityGroup = { name: 'default group' };
+    gitlabManagedCluster = true;
   });
 
   it.each`
-    action          | mutation        | payload        | payloadDescription
-    ${'setRole'}    | ${SET_ROLE}     | ${{ role }}    | ${'role'}
-    ${'setRegion'}  | ${SET_REGION}   | ${{ region }}  | ${'region'}
-    ${'setKeyPair'} | ${SET_KEY_PAIR} | ${{ keyPair }} | ${'key pair'}
-    ${'setVpc'}     | ${SET_VPC}      | ${{ vpc }}     | ${'vpc'}
-    ${'setSubnet'}  | ${SET_SUBNET}   | ${{ subnet }}  | ${'subnet'}
+    action                       | mutation                      | payload                  | payloadDescription
+    ${'setClusterName'}          | ${SET_CLUSTER_NAME}           | ${{ clusterName }}       | ${'cluster name'}
+    ${'setEnvironmentScope'}     | ${SET_ENVIRONMENT_SCOPE}      | ${{ environmentScope }}  | ${'environment scope'}
+    ${'setKubernetesVersion'}    | ${SET_KUBERNETES_VERSION}     | ${{ kubernetesVersion }} | ${'kubernetes version'}
+    ${'setRole'}                 | ${SET_ROLE}                   | ${{ role }}              | ${'role'}
+    ${'setRegion'}               | ${SET_REGION}                 | ${{ region }}            | ${'region'}
+    ${'setKeyPair'}              | ${SET_KEY_PAIR}               | ${{ keyPair }}           | ${'key pair'}
+    ${'setVpc'}                  | ${SET_VPC}                    | ${{ vpc }}               | ${'vpc'}
+    ${'setSubnet'}               | ${SET_SUBNET}                 | ${{ subnet }}            | ${'subnet'}
+    ${'setSecurityGroup'}        | ${SET_SECURITY_GROUP}         | ${{ securityGroup }}     | ${'securityGroup'}
+    ${'setGitlabManagedCluster'} | ${SET_GITLAB_MANAGED_CLUSTER} | ${gitlabManagedCluster}  | ${'gitlab managed cluster'}
   `(`$action commits $mutation with $payloadDescription payload`, data => {
     const { action, mutation, payload } = data;
 

spec/frontend/create_cluster/eks_cluster/store/mutations_spec.js

 import {
+  SET_CLUSTER_NAME,
+  SET_ENVIRONMENT_SCOPE,
+  SET_KUBERNETES_VERSION,
   SET_REGION,
   SET_VPC,
   SET_KEY_PAIR,
   SET_SUBNET,
   SET_ROLE,
+  SET_SECURITY_GROUP,
+  SET_GITLAB_MANAGED_CLUSTER,
 } from '~/create_cluster/eks_cluster/store/mutation_types';
 import createState from '~/create_cluster/eks_cluster/store/state';
 import mutations from '~/create_cluster/eks_cluster/store/mutations';
 
 describe('Create EKS cluster store mutations', () => {
+  let clusterName;
+  let environmentScope;
+  let kubernetesVersion;
   let state;
   let region;
   let vpc;
   let subnet;
   let role;
   let keyPair;
+  let securityGroup;
+  let gitlabManagedCluster;
 
   beforeEach(() => {
+    clusterName = 'my cluster';
+    environmentScope = 'production';
+    kubernetesVersion = '11.1';
     region = { name: 'regions-1' };
     vpc = { name: 'vpc-1' };
     subnet = { name: 'subnet-1' };
     role = { name: 'role-1' };
     keyPair = { name: 'key pair' };
+    securityGroup = { name: 'default group' };
+    gitlabManagedCluster = false;
 
     state = createState();
   });
 
   it.each`
-    mutation        | mutatedProperty      | payload        | expectedValue | expectedValueDescription
-    ${SET_ROLE}     | ${'selectedRole'}    | ${{ role }}    | ${role}       | ${'selected role payload'}
-    ${SET_REGION}   | ${'selectedRegion'}  | ${{ region }}  | ${region}     | ${'selected region payload'}
-    ${SET_KEY_PAIR} | ${'selectedKeyPair'} | ${{ keyPair }} | ${keyPair}    | ${'selected key pair payload'}
-    ${SET_VPC}      | ${'selectedVpc'}     | ${{ vpc }}     | ${vpc}        | ${'selected vpc payload'}
-    ${SET_SUBNET}   | ${'selectedSubnet'}  | ${{ subnet }}  | ${subnet}     | ${'selected sybnet payload'}
+    mutation                      | mutatedProperty            | payload                     | expectedValue           | expectedValueDescription
+    ${SET_CLUSTER_NAME}           | ${'clusterName'}           | ${{ clusterName }}          | ${clusterName}          | ${'cluster name'}
+    ${SET_ENVIRONMENT_SCOPE}      | ${'environmentScope'}      | ${{ environmentScope }}     | ${environmentScope}     | ${'environment scope'}
+    ${SET_KUBERNETES_VERSION}     | ${'kubernetesVersion'}     | ${{ kubernetesVersion }}    | ${kubernetesVersion}    | ${'kubernetes version'}
+    ${SET_ROLE}                   | ${'selectedRole'}          | ${{ role }}                 | ${role}                 | ${'selected role payload'}
+    ${SET_REGION}                 | ${'selectedRegion'}        | ${{ region }}               | ${region}               | ${'selected region payload'}
+    ${SET_KEY_PAIR}               | ${'selectedKeyPair'}       | ${{ keyPair }}              | ${keyPair}              | ${'selected key pair payload'}
+    ${SET_VPC}                    | ${'selectedVpc'}           | ${{ vpc }}                  | ${vpc}                  | ${'selected vpc payload'}
+    ${SET_SUBNET}                 | ${'selectedSubnet'}        | ${{ subnet }}               | ${subnet}               | ${'selected sybnet payload'}
+    ${SET_SECURITY_GROUP}         | ${'selectedSecurityGroup'} | ${{ securityGroup }}        | ${securityGroup}        | ${'selected security group payload'}
+    ${SET_GITLAB_MANAGED_CLUSTER} | ${'gitlabManagedCluster'}  | ${{ gitlabManagedCluster }} | ${gitlabManagedCluster} | ${'gitlab managed cluster'}
   `(`$mutation sets $mutatedProperty to $expectedValueDescription`, data => {
     const { mutation, mutatedProperty, payload, expectedValue } = data;