Create EKS cluster Vue app skeleton

- Add AWS SDK Dependency
- Create placeholders for Vue components
- Create store with state structure

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

+<script>
+import ServiceCredentialsForm from './service_credentials_form.vue';
+import EksClusterConfigurationForm from './eks_cluster_configuration_form.vue';
+
+export default {
+  components: {
+    ServiceCredentialsForm,
+    EksClusterConfigurationForm,
+  },
+};
+</script>
+<template>
+  <eks-cluster-configuration-form />
+</template>

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

+<script>
+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';
+
+export default {
+  components: {
+    RoleNameDropdown,
+    SecurityGroupDropdown,
+    SubnetDropdown,
+    VPCDropdown,
+  },
+};
+</script>
+<template>
+  <form name="eks-cluster-configuration-form"></form>
+</template>

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

+<template>
+  <form name="service-credentials-form"></form>
+</template>

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

+import Vue from 'vue';
+import Vuex from 'vuex';
+import CreateEksCluster from './components/create_eks_cluster.vue';
+import createStore from './store';
+
+Vue.use(Vuex);
+
+export default () =>
+  new Vue({
+    el: '.js-create-eks-cluster-form-container',
+    store: createStore(),
+    components: {
+      CreateEksCluster,
+    },
+    data() {},
+    render(createElement) {
+      return createElement('create-eks-cluster');
+    },
+  });

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

+// import awsServices from '../services/aws_services_facade';
+
+export default () => {};

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

+import Vuex from 'vuex';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+import state from './state';
+
+const createStore = () =>
+  new Vuex.Store({
+    actions,
+    getters,
+    mutations,
+    state,
+  });
+
+export default createStore;

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

+export default () => ({
+  serviceCredentials: {
+    accessKeyId: '',
+    secretAccessKey: '',
+  },
+  isValidatingCredentials: false,
+  validCredentials: false,
+
+  isLoadingRoles: false,
+  isLoadingVPCs: false,
+  isLoadingSubnets: false,
+  isLoadingSecurityGroups: false,
+
+  roles: [],
+  vpcs: [],
+  subnets: [],
+  securityGroups: [],
+
+  selectedRole: '',
+  selectedVPC: '',
+  selectedSubnet: '',
+  selectedSecurityGroup: '',
+});

app/assets/javascripts/pages/projects/clusters/new/index.js

+import initCreateEKSCluster from '~/create_cluster/eks_cluster';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initCreateEKSCluster();
+});

app/views/clusters/clusters/new.html.haml

@@ -5,6 +5,9 @@
 - link_end = '<a/>'.html_safe
 = javascript_include_tag 'https://apis.google.com/js/api.js'
 
+- if create_eks_enabled
+  = javascript_include_tag 'https://sdk.amazonaws.com/js/aws-sdk-2.523.0.min.js'
+
 = render_gcp_signup_offer
 
 .row.prepend-top-default