1 files changed, 25 insertions, 0 deletions
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
index 6e74963dcb0..a700069d2c8 100644
--- a/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
+++ b/app/assets/javascripts/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue
@@ -1,4 +1,7 @@
 <script>
+import { mapActions, mapState } from 'vuex';
+
+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';
@@ -6,11 +9,21 @@ import VPCDropdown from './vpc_dropdown.vue';
 
 export default {
   components: {
+    RegionDropdown,
     RoleNameDropdown,
     SecurityGroupDropdown,
     SubnetDropdown,
     VPCDropdown,
   },
+  computed: {
+    ...mapState(['isLoadingRegions', 'loadingRegionsError', 'regions', 'selectedRegion']),
+  },
+  mounted() {
+    this.fetchRegions();
+  },
+  methods: {
+    ...mapActions(['fetchRegions', 'setRegion']),
+  },
 };
 </script>
 <template>
@@ -21,5 +34,17 @@ export default {
       </label>
       <role-name-dropdown />
     </div>
+    <div class="form-group">
+      <label class="label-bold" name="role" for="eks-role">
+        {{ s__('ClusterIntegration|Region') }}
+      </label>
+      <region-dropdown
+        :value="selectedRegion"
+        :regions="regions"
+        :error="loadingRegionsError"
+        :loading="isLoadingRegions"
+        @input="setRegion({ region: $event })"
+      />
+    </div>
   </form>
 </template>