Add subnets field to cluster form

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

@@ -5,11 +5,10 @@ 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';
-import SubnetDropdown from './subnet_dropdown.vue';
 
-const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers(
-  'regions',
-);
+const { mapState: mapRegionsState } = createNamespacedHelpers('regions');
+const { mapState: mapVpcsState } = createNamespacedHelpers('vpcs');
+const { mapState: mapSubnetsState } = createNamespacedHelpers('subnets');
 
 export default {
   components: {
@@ -17,22 +16,29 @@ export default {
     RegionDropdown,
     RoleNameDropdown,
     SecurityGroupDropdown,
-    SubnetDropdown,
   },
   computed: {
-    ...mapState(['selectedRegion']),
+    ...mapState(['selectedRegion', 'selectedVpc', 'selectedSubnet']),
     ...mapRegionsState({
       regions: 'items',
       isLoadingRegions: 'isLoadingItems',
       loadingRegionsError: 'loadingItemsError',
     }),
-    ...mapState('vpcs', {
-      vpcs: ({ items }) => items,
-      isLoadingVpcs: ({ isLoadingItems }) => isLoadingItems,
-      loadingVpcsError: ({ loadingItemsError }) => loadingItemsError,
+    ...mapVpcsState({
+      vpcs: 'items',
+      isLoadingVpcs: 'isLoadingItems',
+      loadingVpcsError: 'loadingItemsError',
+    }),
+    ...mapSubnetsState({
+      subnets: 'items',
+      isLoadingSubnets: 'isLoadingItems',
+      loadingSubnetsError: 'loadingItemsError',
     }),
     vpcDropdownDisabled() {
-      return !Boolean(this.selectedRegion);
+      return !this.selectedRegion;
+    },
+    subnetDropdownDisabled() {
+      return !this.selectedVpc;
     },
     vpcDropdownHelpText() {
       return sprintf(
@@ -56,11 +62,16 @@ export default {
     ...mapActions({
       fetchRegions: 'regions/fetchItems',
       fetchVpcs: 'vpcs/fetchItems',
+      fetchSubnets: 'subnets/fetchItems',
     }),
     setRegionAndFetchVpcs(region) {
       this.setRegion({ region });
       this.fetchVpcs({ region });
     },
+    setVpcAndFetchSubnets(vpc) {
+      this.setVpc({ vpc });
+      this.fetchSubnets({ vpc });
+    },
   },
 };
 </script>
@@ -102,7 +113,29 @@ export default {
         :empty-text="s__('ClusterIntegration|No VPCs found')"
         :has-errors="loadingVpcsError"
         :error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')"
-        @input="setVpc({ vpc: $event })"
+        @input="setVpcAndFetchSubnets($event)"
+      />
+      <p class="form-text text-muted" v-html="vpcDropdownHelpText"></p>
+    </div>
+    <div class="form-group">
+      <label class="label-bold" name="role" for="eks-role">{{
+        s__('ClusterIntegration|Subnet')
+      }}</label>
+      <cluster-form-dropdown
+        field-id="eks-subnet"
+        field-name="eks-subnet"
+        :input="selectedSubnet"
+        :items="subnets"
+        :loading="isLoadingSubnets"
+        :disabled="subnetDropdownDisabled"
+        :disabled-text="s__('ClusterIntegration|Select a VPC to choose a subnet')"
+        :loading-text="s__('ClusterIntegration|Loading subnets')"
+        :placeholder="s__('ClusterIntergation|Select a subnet')"
+        :search-field-placeholder="s__('ClusterIntegration|Search subnets')"
+        :empty-text="s__('ClusterIntegration|No subnet found')"
+        :has-errors="loadingSubnetsError"
+        :error-message="s__('ClusterIntegration|Could not load subnets for the selected VPC')"
+        @input="setVpcAndFetchSubnets($event)"
       />
       <p class="form-text text-muted" v-html="vpcDropdownHelpText"></p>
     </div>

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

@@ -4,6 +4,7 @@ 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 eksClusterFormState from '~/create_cluster/eks_cluster/store/state';
 import clusterDropdownStoreState from '~/create_cluster/eks_cluster/store/cluster_dropdown/state';
 
 const localVue = createLocalVue();
@@ -12,13 +13,17 @@ localVue.use(Vuex);
 describe('EksClusterConfigurationForm', () => {
   let store;
   let actions;
+  let state;
   let regionsState;
   let vpcsState;
+  let subnetsState;
   let vpcsActions;
   let regionsActions;
+  let subnetsActions;
   let vm;
 
   beforeEach(() => {
+    state = eksClusterFormState();
     actions = {
       setRegion: jest.fn(),
       setVpc: jest.fn(),
@@ -29,13 +34,20 @@ describe('EksClusterConfigurationForm', () => {
     vpcsActions = {
       fetchItems: jest.fn(),
     };
+    subnetsActions = {
+      fetchItems: jest.fn(),
+    };
     regionsState = {
       ...clusterDropdownStoreState(),
     };
     vpcsState = {
       ...clusterDropdownStoreState(),
     };
+    subnetsState = {
+      ...clusterDropdownStoreState(),
+    };
     store = new Vuex.Store({
+      state,
       actions,
       modules: {
         vpcs: {
@@ -48,6 +60,11 @@ describe('EksClusterConfigurationForm', () => {
           state: regionsState,
           actions: regionsActions,
         },
+        subnets: {
+          namespaced: true,
+          state: subnetsState,
+          actions: subnetsActions,
+        },
       },
     });
   });
@@ -65,6 +82,7 @@ describe('EksClusterConfigurationForm', () => {
 
   const findRegionDropdown = () => vm.find(RegionDropdown);
   const findVpcDropdown = () => vm.find('[field-id="eks-vpc"]');
+  const findSubnetDropdown = () => vm.find('[field-id="eks-subnet"]');
 
   describe('when mounted', () => {
     it('fetches available regions', () => {
@@ -76,59 +94,103 @@ describe('EksClusterConfigurationForm', () => {
     regionsState.isLoadingItems = true;
 
     return Vue.nextTick().then(() => {
-      expect(findRegionDropdown().props('loading')).toEqual(regionsState.isLoadingItems);
+      expect(findRegionDropdown().props('loading')).toBe(regionsState.isLoadingItems);
     });
   });
 
   it('sets regions to RegionDropdown regions property', () => {
-    expect(findRegionDropdown().props('regions')).toEqual(regionsState.items);
+    expect(findRegionDropdown().props('regions')).toBe(regionsState.items);
   });
 
   it('sets loadingRegionsError to RegionDropdown error property', () => {
-    expect(findRegionDropdown().props('error')).toEqual(regionsState.loadingItemsError);
+    expect(findRegionDropdown().props('error')).toBe(regionsState.loadingItemsError);
   });
 
-  describe('when region is selected', () => {
-    const region = { name: 'us-west-2' };
-
-    beforeEach(() => {
-      findRegionDropdown().vm.$emit('input', region);
-    });
+  it('disables VpcDropdown when no region is selected', () => {
+    expect(findVpcDropdown().props('disabled')).toBe(true);
+  });
 
-    it('dispatches setRegion action', () => {
-      expect(actions.setRegion).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
-    });
+  it('enables VpcDropdown when no region is selected', () => {
+    state.selectedRegion = { name: 'west-1 ' };
 
-    it('fetches available vpcs', () => {
-      expect(vpcsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
+    return Vue.nextTick().then(() => {
+      expect(findVpcDropdown().props('disabled')).toBe(false);
     });
   });
 
-  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);
+      expect(findVpcDropdown().props('loading')).toBe(vpcsState.isLoadingItems);
     });
   });
 
   it('sets vpcs to VpcDropdown items property', () => {
-    expect(findVpcDropdown().props('items')).toEqual(vpcsState.items);
+    expect(findVpcDropdown().props('items')).toBe(vpcsState.items);
   });
 
   it('sets loadingVpcsError to VpcDropdown hasErrors property', () => {
-    expect(findVpcDropdown().props('hasErrors')).toEqual(vpcsState.loadingItemsError);
+    expect(findVpcDropdown().props('hasErrors')).toBe(vpcsState.loadingItemsError);
+  });
+
+  it('disables SubnetDropdown when no vpc is selected', () => {
+    expect(findSubnetDropdown().props('disabled')).toBe(true);
+  });
+
+  it('enables SubnetDropdown when a vpc is selected', () => {
+    state.selectedVpc = { name: 'vpc-1 ' };
+
+    return Vue.nextTick().then(() => {
+      expect(findSubnetDropdown().props('disabled')).toBe(false);
+    });
   });
 
-  it('dispatches setVpc action when vpc is selected', () => {
+  it('sets isLoadingSubnets to SubnetDropdown loading property', () => {
+    subnetsState.isLoadingItems = true;
+
+    return Vue.nextTick().then(() => {
+      expect(findSubnetDropdown().props('loading')).toBe(subnetsState.isLoadingItems);
+    });
+  });
+
+  it('sets subnets to SubnetDropdown items property', () => {
+    expect(findSubnetDropdown().props('items')).toBe(subnetsState.items);
+  });
+
+  it('sets loadingSubnetsError to SubnetDropdown hasErrors property', () => {
+    expect(findSubnetDropdown().props('hasErrors')).toBe(subnetsState.loadingItemsError);
+  });
+
+  describe('when region is selected', () => {
+    const region = { name: 'us-west-2' };
+
+    beforeEach(() => {
+      findRegionDropdown().vm.$emit('input', region);
+    });
+
+    it('dispatches setRegion action', () => {
+      expect(actions.setRegion).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
+    });
+
+    it('fetches available vpcs', () => {
+      expect(vpcsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { region }, undefined);
+    });
+  });
+
+  describe('when vpc is selected', () => {
     const vpc = { name: 'vpc-1' };
 
-    findVpcDropdown().vm.$emit('input', vpc);
+    beforeEach(() => {
+      findVpcDropdown().vm.$emit('input', vpc);
+    });
 
-    expect(actions.setVpc).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
+    it('dispatches setVpc action', () => {
+      expect(actions.setVpc).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
+    });
+
+    it('dispatches fetchSubnets action', () => {
+      expect(subnetsActions.fetchItems).toHaveBeenCalledWith(expect.anything(), { vpc }, undefined);
+    });
   });
 });