Add role dropdown field to cluster form

- Remove role dropdown Vue component and replace it
with a direct use of ClusterDropdown component too.

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

@@ -3,6 +3,8 @@ 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 findItem = (items, valueProp, value) => items.find(item => item[valueProp] === value);
+
 export default {
   components: {
     DropdownButton,
@@ -26,7 +28,7 @@ export default {
       default: '',
     },
     value: {
-      type: Object,
+      type: [Object, String],
       required: false,
       default: () => null,
     },
@@ -93,8 +95,8 @@ export default {
   },
   data() {
     return {
+      selectedItem: findItem(this.items, this.value),
       searchQuery: '',
-      selectedItem: null,
     };
   },
   computed: {
@@ -127,10 +129,15 @@ export default {
       return (this.selectedItem && this.selectedItem[this.valueProperty]) || '';
     },
   },
+  watch: {
+    value(value) {
+      this.selectedItem = findItem(this.items, this.valueProperty, value);
+    },
+  },
   methods: {
     select(item) {
       this.selectedItem = item;
-      this.$emit('input', item);
+      this.$emit('input', item[this.valueProperty]);
     },
   },
 };

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

@@ -3,12 +3,15 @@ import { createNamespacedHelpers, mapState, mapActions } from 'vuex';
 import { sprintf, s__ } from '~/locale';
 import ClusterFormDropdown from './cluster_form_dropdown.vue';
 import RegionDropdown from './region_dropdown.vue';
-import RoleNameDropdown from './role_name_dropdown.vue';
 import SecurityGroupDropdown from './security_group_dropdown.vue';
 
+const { mapState: mapRolesState, mapActions: mapRolesActions } = createNamespacedHelpers('roles');
 const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers(
   'regions',
 );
+const { mapState: mapKeyPairsState, mapActions: mapKeyPairsActions } = createNamespacedHelpers(
+  'keyPairs',
+);
 const { mapState: mapVpcsState, mapActions: mapVpcActions } = createNamespacedHelpers('vpcs');
 const { mapState: mapSubnetsState, mapActions: mapSubnetActions } = createNamespacedHelpers(
   'subnets',
@@ -18,16 +21,31 @@ export default {
   components: {
     ClusterFormDropdown,
     RegionDropdown,
-    RoleNameDropdown,
     SecurityGroupDropdown,
   },
   computed: {
-    ...mapState(['selectedRegion', 'selectedVpc', 'selectedSubnet']),
+    ...mapState([
+      'selectedRegion',
+      'selectedKeyPair',
+      'selectedVpc',
+      'selectedSubnet',
+      'selectedRole',
+    ]),
+    ...mapRolesState({
+      roles: 'items',
+      isLoadingRoles: 'isLoadingItems',
+      loadingRolesError: 'loadingItemsError',
+    }),
     ...mapRegionsState({
       regions: 'items',
       isLoadingRegions: 'isLoadingItems',
       loadingRegionsError: 'loadingItemsError',
     }),
+    ...mapKeyPairsState({
+      keyPairs: 'items',
+      isLoadingKeyPairs: 'isLoadingItems',
+      loadingKeyPairsError: 'loadingItemsError',
+    }),
     ...mapVpcsState({
       vpcs: 'items',
       isLoadingVpcs: 'isLoadingItems',
@@ -41,9 +59,38 @@ export default {
     vpcDropdownDisabled() {
       return !this.selectedRegion;
     },
+    keyPairDropdownDisabled() {
+      return !this.selectedRegion;
+    },
     subnetDropdownDisabled() {
       return !this.selectedVpc;
     },
+    roleDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}.',
+        ),
+        {
+          startLink:
+            '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+    keyPairDropdownHelpText() {
+      return sprintf(
+        s__(
+          'ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services%{endLink}.',
+        ),
+        {
+          startLink:
+            '<a href="https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-key-pairs.html#having-ec2-create-your-key-pair" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
     vpcDropdownHelpText() {
       return sprintf(
         s__(
@@ -73,15 +120,19 @@ export default {
   },
   mounted() {
     this.fetchRegions();
+    this.fetchRoles();
   },
   methods: {
-    ...mapActions(['setRegion', 'setVpc', 'setSubnet']),
+    ...mapActions(['setRegion', 'setVpc', 'setSubnet', 'setRole', 'setKeyPair']),
     ...mapRegionsActions({ fetchRegions: 'fetchItems' }),
     ...mapVpcActions({ fetchVpcs: 'fetchItems' }),
     ...mapSubnetActions({ fetchSubnets: 'fetchItems' }),
-    setRegionAndFetchVpcs(region) {
+    ...mapRolesActions({ fetchRoles: 'fetchItems' }),
+    ...mapKeyPairsActions({ fetchKeyPairs: 'fetchItems' }),
+    setRegionAndFetchVpcsAndKeyPairs(region) {
       this.setRegion({ region });
       this.fetchVpcs({ region });
+      this.fetchKeyPairs({ region });
     },
     setVpcAndFetchSubnets(vpc) {
       this.setVpc({ vpc });
@@ -93,27 +144,57 @@ export default {
 <template>
   <form name="eks-cluster-configuration-form">
     <div class="form-group">
-      <label class="label-bold" name="role" for="eks-role">{{
-        s__('ClusterIntegration|Role name')
-      }}</label>
-      <role-name-dropdown />
+      <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Role name') }}</label>
+      <cluster-form-dropdown
+        field-id="eks-role"
+        field-name="eks-role"
+        :input="selectedRole"
+        :items="roles"
+        :loading="isLoadingRoles"
+        :loading-text="s__('ClusterIntegration|Loading IAM Roles')"
+        :placeholder="s__('ClusterIntergation|Select role name')"
+        :search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')"
+        :empty-text="s__('ClusterIntegration|No IAM Roles found')"
+        :has-errors="Boolean(loadingRolesError)"
+        :error-message="s__('ClusterIntegration|Could not load IAM roles')"
+        @input="setRole({ role: $event })"
+      />
+      <p class="form-text text-muted" v-html="roleDropdownHelpText"></p>
     </div>
     <div class="form-group">
-      <label class="label-bold" name="role" for="eks-role">{{
-        s__('ClusterIntegration|Region')
-      }}</label>
+      <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Region') }}</label>
       <region-dropdown
         :value="selectedRegion"
         :regions="regions"
         :error="loadingRegionsError"
         :loading="isLoadingRegions"
-        @input="setRegionAndFetchVpcs($event)"
+        @input="setRegionAndFetchVpcsAndKeyPairs($event)"
       />
     </div>
     <div class="form-group">
-      <label class="label-bold" name="eks-vpc" for="eks-vpc">{{
-        s__('ClusterIntegration|VPC')
+      <label class="label-bold" for="eks-key-pair">{{
+        s__('ClusterIntegration|Key pair name')
       }}</label>
+      <cluster-form-dropdown
+        field-id="eks-key-pair"
+        field-name="eks-key-pair"
+        :input="selectedKeyPair"
+        :items="keyPairs"
+        :disabled="keyPairDropdownDisabled"
+        :disabled-text="s__('ClusterIntegration|Select a region to choose a Key Pair')"
+        :loading="isLoadingKeyPairs"
+        :loading-text="s__('ClusterIntegration|Loading Key Pairs')"
+        :placeholder="s__('ClusterIntergation|Select key pair')"
+        :search-field-placeholder="s__('ClusterIntegration|Search Key Pairs')"
+        :empty-text="s__('ClusterIntegration|No Key Pairs found')"
+        :has-errors="Boolean(loadingKeyPairsError)"
+        :error-message="s__('ClusterIntegration|Could not load Key Pairs')"
+        @input="setKeyPair({ keyPair: $event })"
+      />
+      <p class="form-text text-muted" v-html="keyPairDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <label class="label-bold" for="eks-vpc">{{ s__('ClusterIntegration|VPC') }}</label>
       <cluster-form-dropdown
         field-id="eks-vpc"
         field-name="eks-vpc"
@@ -126,16 +207,14 @@ export default {
         :placeholder="s__('ClusterIntergation|Select a VPC')"
         :search-field-placeholder="s__('ClusterIntegration|Search VPCs')"
         :empty-text="s__('ClusterIntegration|No VPCs found')"
-        :has-errors="loadingVpcsError"
+        :has-errors="Boolean(loadingVpcsError)"
         :error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')"
         @input="setVpcAndFetchSubnets($event)"
       />
       <p class="form-text text-muted" v-html="vpcDropdownHelpText"></p>
     </div>
     <div class="form-group">
-      <label class="label-bold" name="eks-subnet" for="eks-subnet">{{
-        s__('ClusterIntegration|Subnet')
-      }}</label>
+      <label class="label-bold" for="eks-role">{{ s__('ClusterIntegration|Subnet') }}</label>
       <cluster-form-dropdown
         field-id="eks-subnet"
         field-name="eks-subnet"
@@ -148,7 +227,7 @@ export default {
         :placeholder="s__('ClusterIntergation|Select a subnet')"
         :search-field-placeholder="s__('ClusterIntegration|Search subnets')"
         :empty-text="s__('ClusterIntegration|No subnet found')"
-        :has-errors="loadingSubnetsError"
+        :has-errors="Boolean(loadingSubnetsError)"
         :error-message="s__('ClusterIntegration|Could not load subnets for the selected VPC')"
         @input="setSubnet({ subnet: $event })"
       />

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

-<script>
-import { sprintf, s__ } from '~/locale';
-
-import ClusterFormDropdown from './cluster_form_dropdown.vue';
-
-export default {
-  components: {
-    ClusterFormDropdown,
-  },
-  props: {
-    roles: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    helpText() {
-      return sprintf(
-        s__(
-          'ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}.',
-        ),
-        {
-          startLink:
-            '<a href="https://console.aws.amazon.com/iam/home?#roles" target="_blank" rel="noopener noreferrer">',
-          endLink: '</a>',
-        },
-        false,
-      );
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <cluster-form-dropdown
-      field-id="eks-role-name"
-      field-name="eks-role-name"
-      :items="roles"
-      :loading="loading"
-      :loading-text="s__('ClusterIntegration|Loading IAM Roles')"
-      :placeholder="s__('ClusterIntergation|Select role name')"
-      :search-field-placeholder="s__('ClusterIntegration|Search IAM Roles')"
-      :empty-text="s__('ClusterIntegration|No IAM Roles found')"
-    />
-    <p class="form-text text-muted" v-html="helpText"></p>
-  </div>
-</template>

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) => {

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

@@ -4,6 +4,10 @@ export const setRegion = ({ commit }, payload) => {
   commit(types.SET_REGION, payload);
 };
 
+export const setKeyPair = ({ commit }, payload) => {
+  commit(types.SET_KEY_PAIR, payload);
+};
+
 export const setVpc = ({ commit }, payload) => {
   commit(types.SET_VPC, payload);
 };
@@ -12,4 +16,8 @@ export const setSubnet = ({ commit }, payload) => {
   commit(types.SET_SUBNET, payload);
 };
 
+export const setRole = ({ commit }, payload) => {
+  commit(types.SET_ROLE, payload);
+};
+
 export default () => {};

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

@@ -15,10 +15,18 @@ const createStore = () =>
     mutations,
     state: state(),
     modules: {
+      roles: {
+        namespaced: true,
+        ...clusterDropdownStore(awsServices.fetchRoles),
+      },
       regions: {
         namespaced: true,
         ...clusterDropdownStore(awsServices.fetchRegions),
       },
+      keyPairs: {
+        namespaced: true,
+        ...clusterDropdownStore(awsServices.fetchKeyPairs),
+      },
       vpcs: {
         namespaced: true,
         ...clusterDropdownStore(awsServices.fetchVpcs),

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

 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';

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

@@ -4,10 +4,16 @@ export default {
   [types.SET_REGION](state, { region }) {
     state.selectedRegion = region;
   },
+  [types.SET_KEY_PAIR](state, { keyPair }) {
+    state.selectedKeyPair = keyPair;
+  },
   [types.SET_VPC](state, { vpc }) {
     state.selectedVpc = vpc;
   },
   [types.SET_SUBNET](state, { subnet }) {
     state.selectedSubnet = subnet;
   },
+  [types.SET_ROLE](state, { role }) {
+    state.selectedRole = role;
+  },
 };

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

@@ -4,6 +4,7 @@ export default () => ({
 
   selectedRegion: '',
   selectedRole: '',
+  selectedKeyPair: '',
   selectedVpc: '',
   selectedSubnet: '',
   selectedSecurityGroup: '',

locale/gitlab.pot

@@ -3417,6 +3417,12 @@ msgstr ""
 msgid "ClusterIntegration|Copy Service Token"
 msgstr ""
 
+msgid "ClusterIntegration|Could not load IAM roles"
+msgstr ""
+
+msgid "ClusterIntegration|Could not load Key Pairs"
+msgstr ""
+
 msgid "ClusterIntegration|Could not load VPCs for the selected region"
 msgstr ""
 
@@ -3549,6 +3555,9 @@ msgstr ""
 msgid "ClusterIntegration|JupyterHub, a multi-user Hub, spawns, manages, and proxies multiple instances of the single-user Jupyter notebook server. JupyterHub can be used to serve notebooks to a class of students, a corporate data science group, or a scientific research group."
 msgstr ""
 
+msgid "ClusterIntegration|Key pair name"
+msgstr ""
+
 msgid "ClusterIntegration|Knative"
 msgstr ""
 
@@ -3609,6 +3618,9 @@ msgstr ""
 msgid "ClusterIntegration|Loading IAM Roles"
 msgstr ""
 
+msgid "ClusterIntegration|Loading Key Pairs"
+msgstr ""
+
 msgid "ClusterIntegration|Loading Regions"
 msgstr ""
 
@@ -3630,6 +3642,9 @@ msgstr ""
 msgid "ClusterIntegration|No IAM Roles found"
 msgstr ""
 
+msgid "ClusterIntegration|No Key Pairs found"
+msgstr ""
+
 msgid "ClusterIntegration|No VPCs found"
 msgstr ""
 
@@ -3717,6 +3732,9 @@ msgstr ""
 msgid "ClusterIntegration|Search IAM Roles"
 msgstr ""
 
+msgid "ClusterIntegration|Search Key Pairs"
+msgstr ""
+
 msgid "ClusterIntegration|Search VPCs"
 msgstr ""
 
@@ -3744,6 +3762,9 @@ msgstr ""
 msgid "ClusterIntegration|Select a VPC to use for your EKS Cluster resources. To use a new VPC, first create one on %{startLink}Amazon Web Services%{endLink}."
 msgstr ""
 
+msgid "ClusterIntegration|Select a region to choose a Key Pair"
+msgstr ""
+
 msgid "ClusterIntegration|Select a region to choose a VPC"
 msgstr ""
 
@@ -3762,6 +3783,9 @@ msgstr ""
 msgid "ClusterIntegration|Select the IAM Role to allow Amazon EKS and the Kubernetes control plane to manage AWS resources on your behalf. To use a new role name, first create one on %{startLink}Amazon Web Services%{endLink}."
 msgstr ""
 
+msgid "ClusterIntegration|Select the key pair name that will be used to create EC2 nodes. To use a new key pair name, first create one on %{startLink}Amazon Web Services%{endLink}."
+msgstr ""
+
 msgid "ClusterIntegration|Select zone"
 msgstr ""
 
@@ -3906,6 +3930,9 @@ msgstr ""
 msgid "ClusterIntergation|Select a subnet"
 msgstr ""
 
+msgid "ClusterIntergation|Select key pair"
+msgstr ""
+
 msgid "ClusterIntergation|Select role name"
 msgstr ""
 

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

@@ -7,12 +7,22 @@ import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidde
 
 describe('ClusterFormDropdown', () => {
   let vm;
+  const firstItem = { name: 'item 1', value: 1 };
+  const secondItem = { name: 'item 2', value: 2 };
+  const items = [firstItem, secondItem, { name: 'item 3', value: 3 }];
 
   beforeEach(() => {
     vm = shallowMount(ClusterFormDropdown);
   });
   afterEach(() => vm.destroy());
 
+  describe('when initial value is provided', () => {
+    it('sets selectedItem to initial value', () => {
+      vm.setProps({ items, value: secondItem.value });
+      expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
+    });
+  });
+
   describe('when no item is selected', () => {
     it('displays placeholder text', () => {
       const placeholder = 'placeholder';
@@ -24,18 +34,19 @@ describe('ClusterFormDropdown', () => {
   });
 
   describe('when an item is selected', () => {
-    const selectedItem = { name: 'Name', value: 'value' };
-
     beforeEach(() => {
-      vm.setData({ selectedItem });
+      vm.setProps({ items });
+      vm.findAll('.js-dropdown-item')
+        .at(1)
+        .trigger('click');
     });
 
     it('displays selected item label', () => {
-      expect(vm.find(DropdownButton).props('toggleText')).toEqual(selectedItem.name);
+      expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
     });
 
     it('sets selected value to dropdown hidden input', () => {
-      expect(vm.find(DropdownHiddenInput).props('value')).toEqual(selectedItem.value);
+      expect(vm.find(DropdownHiddenInput).props('value')).toEqual(secondItem.value);
     });
   });
 
@@ -124,9 +135,7 @@ describe('ClusterFormDropdown', () => {
   });
 
   it('it filters results by search query', () => {
-    const secondItem = { name: 'second item' };
-    const items = [{ name: 'first item' }, secondItem];
-    const searchQuery = 'second';
+    const searchQuery = secondItem.name;
 
     vm.setProps({ items });
     vm.setData({ searchQuery });

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

@@ -14,12 +14,16 @@ describe('EksClusterConfigurationForm', () => {
   let store;
   let actions;
   let state;
+  let rolesState;
   let regionsState;
   let vpcsState;
   let subnetsState;
+  let keyPairsState;
   let vpcsActions;
+  let rolesActions;
   let regionsActions;
   let subnetsActions;
+  let keyPairsActions;
   let vm;
 
   beforeEach(() => {
@@ -28,16 +32,27 @@ describe('EksClusterConfigurationForm', () => {
       setRegion: jest.fn(),
       setVpc: jest.fn(),
       setSubnet: jest.fn(),
+      setRole: jest.fn(),
+      setKeyPair: jest.fn(),
     };
     regionsActions = {
       fetchItems: jest.fn(),
     };
+    keyPairsActions = {
+      fetchItems: jest.fn(),
+    };
     vpcsActions = {
       fetchItems: jest.fn(),
     };
     subnetsActions = {
       fetchItems: jest.fn(),
     };
+    rolesActions = {
+      fetchItems: jest.fn(),
+    };
+    rolesState = {
+      ...clusterDropdownStoreState(),
+    };
     regionsState = {
       ...clusterDropdownStoreState(),
     };
@@ -47,6 +62,9 @@ describe('EksClusterConfigurationForm', () => {
     subnetsState = {
       ...clusterDropdownStoreState(),
     };
+    keyPairsState = {
+      ...clusterDropdownStoreState(),
+    };
     store = new Vuex.Store({
       state,
       actions,
@@ -66,6 +84,16 @@ describe('EksClusterConfigurationForm', () => {
           state: subnetsState,
           actions: subnetsActions,
         },
+        roles: {
+          namespaced: true,
+          state: rolesState,
+          actions: rolesActions,
+        },
+        keyPairs: {
+          namespaced: true,
+          state: keyPairsState,
+          actions: keyPairsActions,
+        },
       },
     });
   });
@@ -82,13 +110,37 @@ describe('EksClusterConfigurationForm', () => {
   });
 
   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"]');
 
   describe('when mounted', () => {
     it('fetches available regions', () => {
       expect(regionsActions.fetchItems).toHaveBeenCalled();
     });
+
+    it('fetches available roles', () => {
+      expect(rolesActions.fetchItems).toHaveBeenCalled();
+    });
+  });
+
+  it('sets isLoadingRoles to RoleDropdown loading property', () => {
+    rolesState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findRoleDropdown().props('loading')).toBe(rolesState.isLoadingItems);
+    });
+  });
+
+  it('sets roles to RoleDropdown items property', () => {
+    expect(findRoleDropdown().props('items')).toBe(rolesState.items);
+  });
+
+  it('sets RoleDropdown hasErrors to true when loading roles failed', () => {
+    rolesState.loadingItemsError = new Error();
+
+    expect(findRoleDropdown().props('hasErrors')).toEqual(true);
   });
 
   it('sets isLoadingRegions to RegionDropdown loading property', () => {
@@ -107,6 +159,36 @@ describe('EksClusterConfigurationForm', () => {
     expect(findRegionDropdown().props('error')).toBe(regionsState.loadingItemsError);
   });
 
+  it('disables KeyPairDropdown when no region is selected', () => {
+    expect(findKeyPairDropdown().props('disabled')).toBe(true);
+  });
+
+  it('enables KeyPairDropdown when no region is selected', () => {
+    state.selectedRegion = { name: 'west-1 ' };
+
+    return Vue.nextTick().then(() => {
+      expect(findKeyPairDropdown().props('disabled')).toBe(false);
+    });
+  });
+
+  it('sets isLoadingKeyPairs to KeyPairDropdown loading property', () => {
+    keyPairsState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findKeyPairDropdown().props('loading')).toBe(keyPairsState.isLoadingItems);
+    });
+  });
+
+  it('sets keyPairs to KeyPairDropdown items property', () => {
+    expect(findKeyPairDropdown().props('items')).toBe(keyPairsState.items);
+  });
+
+  it('sets KeyPairDropdown hasErrors to true when loading key pairs fails', () => {
+    keyPairsState.loadingItemsError = new Error();
+
+    expect(findKeyPairDropdown().props('hasErrors')).toEqual(true);
+  });
+
   it('disables VpcDropdown when no region is selected', () => {
     expect(findVpcDropdown().props('disabled')).toBe(true);
   });
@@ -131,8 +213,10 @@ describe('EksClusterConfigurationForm', () => {
     expect(findVpcDropdown().props('items')).toBe(vpcsState.items);
   });
 
-  it('sets loadingVpcsError to VpcDropdown hasErrors property', () => {
-    expect(findVpcDropdown().props('hasErrors')).toBe(vpcsState.loadingItemsError);
+  it('sets VpcDropdown hasErrors to true when loading vpcs fails', () => {
+    vpcsState.loadingItemsError = new Error();
+
+    expect(findVpcDropdown().props('hasErrors')).toEqual(true);
   });
 
   it('disables SubnetDropdown when no vpc is selected', () => {
@@ -159,8 +243,10 @@ describe('EksClusterConfigurationForm', () => {
     expect(findSubnetDropdown().props('items')).toBe(subnetsState.items);
   });
 
-  it('sets loadingSubnetsError to SubnetDropdown hasErrors property', () => {
-    expect(findSubnetDropdown().props('hasErrors')).toBe(subnetsState.loadingItemsError);
+  it('sets SubnetDropdown hasErrors to true when loading subnets fails', () => {
+    subnetsState.loadingItemsError = new Error();
+
+    expect(findSubnetDropdown().props('hasErrors')).toEqual(true);
   });
 
   describe('when region is selected', () => {
@@ -177,6 +263,14 @@ describe('EksClusterConfigurationForm', () => {
     it('fetches available vpcs', () => {
       expect(vpcsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
     });
+
+    it('fetches available key pairs', () => {
+      expect(keyPairsActions.fetchItems).toHaveBeenCalledWith(
+        expect.anything(),
+        { region },
+        undefined,
+      );
+    });
   });
 
   describe('when vpc is selected', () => {
@@ -206,4 +300,28 @@ describe('EksClusterConfigurationForm', () => {
       expect(actions.setSubnet).toHaveBeenCalledWith(expect.anything(), { subnet }, undefined);
     });
   });
+
+  describe('when role is selected', () => {
+    const role = { name: 'admin' };
+
+    beforeEach(() => {
+      findRoleDropdown().vm.$emit('input', role);
+    });
+
+    it('dispatches setRole action', () => {
+      expect(actions.setRole).toHaveBeenCalledWith(expect.anything(), { role }, undefined);
+    });
+  });
+
+  describe('when key pair is selected', () => {
+    const keyPair = { name: 'key pair' };
+
+    beforeEach(() => {
+      findKeyPairDropdown().vm.$emit('input', keyPair);
+    });
+
+    it('dispatches setKeyPair action', () => {
+      expect(actions.setKeyPair).toHaveBeenCalledWith(expect.anything(), { keyPair }, undefined);
+    });
+  });
 });

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

-import { shallowMount } from '@vue/test-utils';
-
-import ClusterFormDropdown from '~/create_cluster/eks_cluster/components/cluster_form_dropdown.vue';
-import RoleNameDropdown from '~/create_cluster/eks_cluster/components/role_name_dropdown.vue';
-
-describe('RoleNameDropdown', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = shallowMount(RoleNameDropdown);
-  });
-  afterEach(() => vm.destroy());
-
-  it('renders a cluster-form-dropdown', () => {
-    expect(vm.find(ClusterFormDropdown).exists()).toBe(true);
-  });
-
-  it('sets roles to cluster-form-dropdown items property', () => {
-    const roles = [{ name: 'basic' }];
-
-    vm.setProps({ roles });
-
-    expect(vm.find(ClusterFormDropdown).props('items')).toEqual(roles);
-  });
-
-  it('sets a loading text', () => {
-    expect(vm.find(ClusterFormDropdown).props('loadingText')).toEqual('Loading IAM Roles');
-  });
-
-  it('sets a placeholder', () => {
-    expect(vm.find(ClusterFormDropdown).props('placeholder')).toEqual('Select role name');
-  });
-
-  it('sets an empty results text', () => {
-    expect(vm.find(ClusterFormDropdown).props('emptyText')).toEqual('No IAM Roles found');
-  });
-
-  it('sets a search field placeholder', () => {
-    expect(vm.find(ClusterFormDropdown).props('searchFieldPlaceholder')).toEqual(
-      'Search IAM Roles',
-    );
-  });
-});

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

@@ -2,24 +2,36 @@ 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_REGION, SET_VPC, SET_SUBNET } from '~/create_cluster/eks_cluster/store/mutation_types';
+import {
+  SET_REGION,
+  SET_VPC,
+  SET_KEY_PAIR,
+  SET_SUBNET,
+  SET_ROLE,
+} from '~/create_cluster/eks_cluster/store/mutation_types';
 
 describe('EKS Cluster Store Actions', () => {
   let region;
   let vpc;
   let subnet;
+  let role;
+  let keyPair;
 
   beforeEach(() => {
     region = { name: 'regions-1' };
     vpc = { name: 'vpc-1' };
     subnet = { name: 'subnet-1' };
+    role = { name: 'role-1' };
+    keyPair = { name: 'key-pair-1' };
   });
 
   it.each`
-    action         | mutation      | payload       | payloadDescription
-    ${'setRegion'} | ${SET_REGION} | ${{ region }} | ${'region'}
-    ${'setVpc'}    | ${SET_VPC}    | ${{ vpc }}    | ${'vpc'}
-    ${'setSubnet'} | ${SET_SUBNET} | ${{ subnet }} | ${'subnet'}
+    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 commits $mutation with $payloadDescription payload`, data => {
     const { action, mutation, payload } = data;
 

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

-import { SET_REGION, SET_VPC, SET_SUBNET } from '~/create_cluster/eks_cluster/store/mutation_types';
+import {
+  SET_REGION,
+  SET_VPC,
+  SET_KEY_PAIR,
+  SET_SUBNET,
+  SET_ROLE,
+} 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';
 
@@ -7,20 +13,26 @@ describe('Create EKS cluster store mutations', () => {
   let region;
   let vpc;
   let subnet;
+  let role;
+  let keyPair;
 
   beforeEach(() => {
     region = { name: 'regions-1' };
     vpc = { name: 'vpc-1' };
     subnet = { name: 'subnet-1' };
+    role = { name: 'role-1' };
+    keyPair = { name: 'key pair' };
 
     state = createState();
   });
 
   it.each`
-    mutation      | mutatedProperty     | payload       | expectedValue | expectedValueDescription
-    ${SET_REGION} | ${'selectedRegion'} | ${{ region }} | ${region}     | ${'selected region payload'}
-    ${SET_VPC}    | ${'selectedVpc'}    | ${{ vpc }}    | ${vpc}        | ${'selected vpc payload'}
-    ${SET_SUBNET} | ${'selectedSubnet'} | ${{ subnet }} | ${subnet}     | ${'selected sybnet payload'}
+    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 sets $mutatedProperty to $expectedValueDescription`, data => {
     const { mutation, mutatedProperty, payload, expectedValue } = data;