Use cluster form dropdown directly for VPC

- Instead of creating a new component to wrap ClusterDropdown
for specific EKS cluster dropdown fields, just use the ClusterDropdown
component directly

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 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';
-import VpcDropdown from './vpc_dropdown.vue';
 
 const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNamespacedHelpers(
   'regions',
@@ -12,11 +13,11 @@ const { mapState: mapRegionsState, mapActions: mapRegionsActions } = createNames
 
 export default {
   components: {
+    ClusterFormDropdown,
     RegionDropdown,
     RoleNameDropdown,
     SecurityGroupDropdown,
     SubnetDropdown,
-    VpcDropdown,
   },
   computed: {
     ...mapState(['selectedRegion']),
@@ -33,6 +34,19 @@ export default {
     vpcDropdownDisabled() {
       return !Boolean(this.selectedRegion);
     },
+    vpcDropdownHelpText() {
+      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,
+      );
+    },
   },
   mounted() {
     this.fetchRegions();
@@ -74,14 +88,23 @@ export default {
       <label class="label-bold" name="role" for="eks-role">{{
         s__('ClusterIntegration|VPC')
       }}</label>
-      <vpc-dropdown
+      <cluster-form-dropdown
+        field-id="eks-vpc"
+        field-name="eks-vpc"
         :input="selectedVpc"
-        :vpcs="vpcs"
-        :error="loadingVpcsError"
+        :items="vpcs"
         :loading="isLoadingVpcs"
         :disabled="vpcDropdownDisabled"
+        :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="loadingVpcsError"
+        :error-message="s__('ClusterIntegration|Could not load VPCs for the selected region')"
         @input="setVpc({ vpc: $event })"
       />
+      <p class="form-text text-muted" v-html="vpcDropdownHelpText"></p>
     </div>
   </form>
 </template>

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

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

@@ -3,7 +3,6 @@ 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';
 
@@ -65,7 +64,7 @@ describe('EksClusterConfigurationForm', () => {
   });
 
   const findRegionDropdown = () => vm.find(RegionDropdown);
-  const findVpcDropdown = () => vm.find(VpcDropdown);
+  const findVpcDropdown = () => vm.find('[field-id="eks-vpc"]');
 
   describe('when mounted', () => {
     it('fetches available regions', () => {
@@ -117,12 +116,12 @@ describe('EksClusterConfigurationForm', () => {
     });
   });
 
-  it('sets vpcs to VpcDropdown vpcs property', () => {
-    expect(findVpcDropdown().props('vpcs')).toEqual(vpcsState.items);
+  it('sets vpcs to VpcDropdown items property', () => {
+    expect(findVpcDropdown().props('items')).toEqual(vpcsState.items);
   });
 
-  it('sets loadingVpcsError to VpcDropdown error property', () => {
-    expect(findVpcDropdown().props('error')).toEqual(vpcsState.loadingItemsError);
+  it('sets loadingVpcsError to VpcDropdown hasErrors property', () => {
+    expect(findVpcDropdown().props('hasErrors')).toEqual(vpcsState.loadingItemsError);
   });
 
   it('dispatches setVpc action when vpc is selected', () => {
@@ -131,5 +130,5 @@ describe('EksClusterConfigurationForm', () => {
     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',
-    );
-  });
-});