Load and display EKS AWS VPCs

- Implement VPC dropdown component
- Include VPC dropdown component in form
- Implement vuex store flow to fetch VPCs

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

@@ -25,15 +25,28 @@ export default {
       isLoadingRegions: 'isLoadingItems',
       loadingRegionsError: 'loadingItemsError',
     }),
+    ...mapState('vpcs', {
+      vpcs: ({ items }) => items,
+      isLoadingVpcs: ({ isLoadingItems }) => isLoadingItems,
+      loadingVpcsError: ({ loadingItemsError }) => loadingItemsError,
+    }),
+    vpcDropdownDisabled() {
+      return !Boolean(this.selectedRegion);
+    },
   },
   mounted() {
     this.fetchRegions();
   },
   methods: {
-    ...mapActions(['setRegion']),
-    ...mapRegionsActions({
-      fetchRegions: 'fetchItems',
+    ...mapActions(['setRegion', 'setVpc']),
+    ...mapActions({
+      fetchRegions: 'regions/fetchItems',
+      fetchVpcs: 'vpcs/fetchItems',
     }),
+    setRegionAndFetchVpcs(region) {
+      this.setRegion({ region });
+      this.fetchVpcs({ region });
+    },
   },
 };
 </script>
@@ -54,7 +67,20 @@ export default {
         :regions="regions"
         :error="loadingRegionsError"
         :loading="isLoadingRegions"
-        @input="setRegion({ region: $event })"
+        @input="setRegionAndFetchVpcs($event)"
+      />
+    </div>
+    <div class="form-group">
+      <label class="label-bold" name="role" for="eks-role">{{
+        s__('ClusterIntegration|VPC')
+      }}</label>
+      <vpc-dropdown
+        :input="selectedVpc"
+        :vpcs="vpcs"
+        :error="loadingVpcsError"
+        :loading="isLoadingVpcs"
+        :disabled="vpcDropdownDisabled"
+        @input="setVpc({ vpc: $event })"
       />
     </div>
   </form>

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

+<script>
+import { sprintf, s__ } from '~/locale';
+
+import ClusterFormDropdown from './cluster_form_dropdown.vue';
+
+export default {
+  components: {
+    ClusterFormDropdown,
+  },
+  props: {
+    vpcs: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    error: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    hasErrors() {
+      return Boolean(this.error);
+    },
+    helpText() {
+      return sprintf(
+        s__(
+          '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}.',
+        ),
+        {
+          startLink:
+            '<a href="https://console.aws.amazon.com/vpc/home?#vpc" target="_blank" rel="noopener noreferrer">',
+          endLink: '</a>',
+        },
+        false,
+      );
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <cluster-form-dropdown
+      field-id="eks-vpc"
+      field-name="eks-vpc"
+      :items="vpcs"
+      :loading="loading"
+      :disabled="disabled"
+      :disabled-text="s__('ClusterIntegration|Select a region to choose a VPC')"
+      :loading-text="s__('ClusterIntegration|Loading VPCs')"
+      :placeholder="s__('ClusterIntergation|Select a VPC')"
+      :search-field-placeholder="s__('ClusterIntegration|Search VPCs')"
+      :empty-text="s__('ClusterIntegration|No VPCs found')"
+      :has-errors="hasErrors"
+      :error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')"
+      v-bind="$attrs"
+      v-on="$listeners"
+    />
+    <p class="form-text text-muted" v-html="helpText"></p>
+  </div>
+</template>

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

@@ -12,6 +12,7 @@ export default () =>
     components: {
       CreateEksCluster,
     },
+    data() {},
     render(createElement) {
       return createElement('create-eks-cluster');
     },

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

@@ -17,4 +17,21 @@ export const fetchRegions = () =>
       .send();
   });
 
+export const fetchVpcs = () =>
+  new Promise((resolve, reject) => {
+    const ec2 = new EC2();
+
+    ec2
+      .describeVpcs()
+      .on('success', ({ data: { Vpcs: vpcs } }) => {
+        const transformedVpcs = vpcs.map(({ VpcId: name }) => ({ name }));
+
+        resolve(transformedVpcs);
+      })
+      .on('error', error => {
+        reject(error);
+      })
+      .send();
+  });
+
 export default () => {};

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

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

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

@@ -19,6 +19,10 @@ const createStore = () =>
         namespaced: true,
         ...clusterDropdownStore(awsServices.fetchRegions),
       },
+      vpcs: {
+        namespaced: true,
+        ...clusterDropdownStore(awsServices.fetchVpcs),
+      },
     },
   });
 

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

-// eslint-disable-next-line import/prefer-default-export
 export const SET_REGION = 'SET_REGION';
+export const SET_VPC = 'SET_VPC';

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

@@ -4,4 +4,7 @@ export default {
   [types.SET_REGION](state, { region }) {
     state.selectedRegion = region;
   },
+  [types.SET_VPC](state, { vpc }) {
+    state.selectedVpc = vpc;
+  },
 };

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

@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import Vue from 'vue';
 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 VpcDropdown from '~/create_cluster/eks_cluster/components/vpc_dropdown.vue';
 
 import clusterDropdownStoreState from '~/create_cluster/eks_cluster/store/cluster_dropdown/state';
 
@@ -13,6 +14,8 @@ describe('EksClusterConfigurationForm', () => {
   let store;
   let actions;
   let regionsState;
+  let vpcsState;
+  let vpcsActions;
   let regionsActions;
   let vm;
 
@@ -24,12 +27,23 @@ describe('EksClusterConfigurationForm', () => {
     regionsActions = {
       fetchItems: jest.fn(),
     };
+    vpcsActions = {
+      fetchItems: jest.fn(),
+    };
     regionsState = {
       ...clusterDropdownStoreState(),
     };
+    vpcsState = {
+      ...clusterDropdownStoreState(),
+    };
     store = new Vuex.Store({
       actions,
       modules: {
+        vpcs: {
+          namespaced: true,
+          state: vpcsState,
+          actions: vpcsActions,
+        },
         regions: {
           namespaced: true,
           state: regionsState,
@@ -51,6 +65,7 @@ describe('EksClusterConfigurationForm', () => {
   });
 
   const findRegionDropdown = () => vm.find(RegionDropdown);
+  const findVpcDropdown = () => vm.find(VpcDropdown);
 
   describe('when mounted', () => {
     it('fetches available regions', () => {
@@ -84,5 +99,37 @@ describe('EksClusterConfigurationForm', () => {
     it('dispatches setRegion action', () => {
       expect(actions.setRegion).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
     });
+
+    it('fetches available vpcs', () => {
+      expect(vpcsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
+    });
+  });
+
+  it('disables VpcDropdown when no region is selected', () => {
+    expect(findVpcDropdown().props('disabled')).toEqual(true);
+  });
+
+  it('sets isLoadingVpcs to VpcDropdown loading property', () => {
+    vpcsState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findVpcDropdown().props('loading')).toEqual(vpcsState.isLoadingItems);
+    });
+  });
+
+  it('sets vpcs to VpcDropdown vpcs property', () => {
+    expect(findVpcDropdown().props('vpcs')).toEqual(vpcsState.items);
   });
+
+  it('sets loadingVpcsError to VpcDropdown error property', () => {
+    expect(findVpcDropdown().props('error')).toEqual(vpcsState.loadingItemsError);
+  });
+
+  it('dispatches setVpc action when vpc is selected', () => {
+    const vpc = { name: 'vpc-1' };
+
+    findVpcDropdown().vm.$emit('input', vpc);
+
+    expect(actions.setVpc).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
+  })
 });

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

+import { shallowMount } from '@vue/test-utils';
+
+import ClusterFormDropdown from '~/create_cluster/eks_cluster/components/cluster_form_dropdown.vue';
+import VpcDropdown from '~/create_cluster/eks_cluster/components/vpc_dropdown.vue';
+
+describe('VpcDropdown', () => {
+  let vm;
+
+  const getClusterFormDropdown = () => vm.find(ClusterFormDropdown);
+
+  beforeEach(() => {
+    vm = shallowMount(VpcDropdown);
+  });
+  afterEach(() => vm.destroy());
+
+  it('renders a cluster-form-dropdown', () => {
+    expect(getClusterFormDropdown().exists()).toBe(true);
+  });
+
+  it('sets vpcs to cluster-form-dropdown items property', () => {
+    const vpcs = [{ name: 'basic' }];
+
+    vm.setProps({ vpcs });
+
+    expect(getClusterFormDropdown().props('items')).toEqual(vpcs);
+  });
+
+  it('maps loading property to cluster-form-dropdown loading property', () => {
+    const loading = true;
+
+    vm.setProps({ loading });
+
+    expect(getClusterFormDropdown().props('loading')).toEqual(loading);
+  });
+
+  it('sets a loading text', () => {
+    expect(getClusterFormDropdown().props('loadingText')).toEqual('Loading VPCs');
+  });
+
+  it('maps disabled property to cluster-form-dropdown disabled property', () => {
+    const disabled = true;
+
+    vm.setProps({ disabled });
+
+    expect(getClusterFormDropdown().props('disabled')).toEqual(disabled);
+  });
+
+  it('sets a disabled text', () => {
+    expect(getClusterFormDropdown().props('disabledText')).toEqual(
+      'Select a region to choose a VPC',
+    );
+  });
+
+  it('sets a placeholder', () => {
+    expect(getClusterFormDropdown().props('placeholder')).toEqual('Select a VPC');
+  });
+
+  it('sets an empty results text', () => {
+    expect(getClusterFormDropdown().props('emptyText')).toEqual('No VPCs found');
+  });
+
+  it('sets a search field placeholder', () => {
+    expect(getClusterFormDropdown().props('searchFieldPlaceholder')).toEqual('Search VPCs');
+  });
+
+  it('sets hasErrors property', () => {
+    vm.setProps({ error: {} });
+
+    expect(getClusterFormDropdown().props('hasErrors')).toEqual(true);
+  });
+
+  it('sets an error message', () => {
+    expect(getClusterFormDropdown().props('errorMessage')).toEqual(
+      'Could not load VPCs for the selected region',
+    );
+  });
+});

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

@@ -14,4 +14,14 @@ describe('EKS Cluster Store Actions', () => {
       ]);
     });
   });
+
+  describe('setVpc', () => {
+    it(`commits ${types.SET_VPC} mutation`, () => {
+      const vpc = { name: 'west-1' };
+
+      testAction(actions.setVpc, { vpc }, createState(), [
+        { type: types.SET_VPC, payload: { vpc } },
+      ]);
+    });
+  });
 });

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

-import { SET_REGION } from '~/create_cluster/eks_cluster/store/mutation_types';
+import { SET_REGION, SET_VPC } 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 state;
   let region;
+  let vpc;
 
   beforeEach(() => {
     region = { name: 'regions-1' };
+    vpc = { name: 'vpc-1' };
     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'}
   `(`$mutation sets $mutatedProperty to $expectedValueDescription`, data => {
     const { mutation, mutatedProperty, payload, expectedValue } = data;