Add subnet dropdown store

- Setup actions to select a subnet
- Setup dropdown Vuex store module for subnet dropdown
- Implement method to fetch subnets

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

@@ -24,7 +24,7 @@ export const fetchVpcs = () =>
     ec2
       .describeVpcs()
       .on('success', ({ data: { Vpcs: vpcs } }) => {
-        const transformedVpcs = vpcs.map(({ VpcId: name }) => ({ name }));
+        const transformedVpcs = vpcs.map(({ VpcId: id }) => ({ id, name: id }));
 
         resolve(transformedVpcs);
       })
@@ -34,4 +34,28 @@ export const fetchVpcs = () =>
       .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 default () => {};

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

@@ -8,4 +8,8 @@ export const setVpc = ({ commit }, payload) => {
   commit(types.SET_VPC, payload);
 };
 
+export const setSubnet = ({ commit }, payload) => {
+  commit(types.SET_SUBNET, payload);
+};
+
 export default () => {};

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

@@ -4,10 +4,10 @@ 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),
-  fetchItems: ({ dispatch }) => {
+  fetchItems: ({ dispatch }, payload) => {
     dispatch('requestItems');
 
-    return fetchItems()
+    return fetchItems(payload)
       .then(items => dispatch('receiveItemsSuccess', { items }))
       .catch(error => dispatch('receiveItemsError', { error }));
   },

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

@@ -23,6 +23,10 @@ const createStore = () =>
         namespaced: true,
         ...clusterDropdownStore(awsServices.fetchVpcs),
       },
+      subnets: {
+        namespaced: true,
+        ...clusterDropdownStore(awsServices.fetchSubnets),
+      },
     },
   });
 

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_SUBNET = 'SET_SUBNET';

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

@@ -7,4 +7,7 @@ export default {
   [types.SET_VPC](state, { vpc }) {
     state.selectedVpc = vpc;
   },
+  [types.SET_SUBNET](state, { subnet }) {
+    state.selectedSubnet = subnet;
+  },
 };

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

 import testAction from 'helpers/vuex_action_helper';
 
 import createState from '~/create_cluster/eks_cluster/store/state';
-import * as types from '~/create_cluster/eks_cluster/store/mutation_types';
 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';
 
 describe('EKS Cluster Store Actions', () => {
-  describe('setRegion', () => {
-    it(`commits ${types.SET_REGION} mutation`, () => {
-      const region = { name: 'west-1' };
+  let region;
+  let vpc;
+  let subnet;
 
-      testAction(actions.setRegion, { region }, createState(), [
-        { type: types.SET_REGION, payload: { region } },
-      ]);
-    });
+  beforeEach(() => {
+    region = { name: 'regions-1' };
+    vpc = { name: 'vpc-1' };
+    subnet = { name: 'subnet-1' };
   });
 
-  describe('setVpc', () => {
-    it(`commits ${types.SET_VPC} mutation`, () => {
-      const vpc = { name: 'west-1' };
+  it.each`
+    action         | mutation      | payload       | payloadDescription
+    ${'setRegion'} | ${SET_REGION} | ${{ region }} | ${'region'}
+    ${'setVpc'}    | ${SET_VPC}    | ${{ vpc }}    | ${'vpc'}
+    ${'setSubnet'} | ${SET_SUBNET} | ${{ subnet }} | ${'subnet'}
+  `(`$action commits $mutation with $payloadDescription payload`, data => {
+    const { action, mutation, payload } = data;
 
-      testAction(actions.setVpc, { vpc }, createState(), [
-        { type: types.SET_VPC, payload: { vpc } },
-      ]);
-    });
+    testAction(actions[action], payload, createState(), [{ type: mutation, payload }]);
   });
 });

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

-import { SET_REGION, SET_VPC } from '~/create_cluster/eks_cluster/store/mutation_types';
+import { SET_REGION, SET_VPC, SET_SUBNET } 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';
 
@@ -6,10 +6,13 @@ describe('Create EKS cluster store mutations', () => {
   let state;
   let region;
   let vpc;
+  let subnet;
 
   beforeEach(() => {
     region = { name: 'regions-1' };
     vpc = { name: 'vpc-1' };
+    subnet = { name: 'subnet-1' };
+
     state = createState();
   });
 
@@ -17,6 +20,7 @@ describe('Create EKS cluster store mutations', () => {
     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 sets $mutatedProperty to $expectedValueDescription`, data => {
     const { mutation, mutatedProperty, payload, expectedValue } = data;