Set up create eks cluster flow

- Pass server side parameters
- Decide to render service credentials form or cluster config form

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

@@ -16,14 +16,40 @@ export default {
       type: String,
       required: true,
     },
+    accountAndExternalIdsHelpPath: {
+      type: String,
+      required: true,
+    },
+    createRoleArnHelpPath: {
+      type: String,
+      required: true,
+    },
+    externalId: {
+      type: String,
+      required: true,
+    },
+    accountId: {
+      type: String,
+      required: true,
+    },
+    validCredentials: {
+      type: Boolean,
+      required: true,
+    },
   },
 };
 </script>
 <template>
   <div class="js-create-eks-cluster">
     <eks-cluster-configuration-form
+      v-if="hasCredentials"
       :gitlab-managed-cluster-help-path="gitlabManagedClusterHelpPath"
       :kubernetes-integration-help-path="kubernetesIntegrationHelpPath"
     />
+    <service-credentials-form
+      v-else
+      :create-role-arn-help-path="createRoleArnHelpPath"
+      :account-and-external-ids-help-path="accountAndExternalIdsHelpPath"
+    />
   </div>
 </template>

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

@@ -14,11 +14,34 @@ export default el => {
     components: {
       CreateEksCluster,
     },
+    data() {
+      const {
+        gitlabManagedClusterHelpPath,
+        accountAndExternalIdsHelpPath,
+        createRoleArnHelpPath,
+        externalId,
+        accountId,
+        validCredentials,
+      } = document.querySelector(this.$options.el).dataset;
+
+      return {
+        gitlabManagedClusterHelpPath,
+        accountAndExternalIdsHelpPath,
+        createRoleArnHelpPath,
+        externalId,
+        accountId,
+        validCredentials,
+      };
+    },
     render(createElement) {
       return createElement('create-eks-cluster', {
         props: {
-          gitlabManagedClusterHelpPath,
-          kubernetesIntegrationHelpPath,
+          gitlabManagedClusterHelpPath: this.gitlabManagedClusterHelpPath,
+          accountAndExternalIdsHelpPath: this.accountAndExternalIdsHelpPath,
+          createRoleArnHelpPath: this.createRoleArnHelpPath,
+          externalId: this.externalId,
+          accountId: this.accountId,
+          validCredentials: this.validCredentials,
         },
       });
     },

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

+import { shallowMount } from '@vue/test-utils';
+
+import CreateEksCluster from '~/create_cluster/eks_cluster/components/create_eks_cluster.vue';
+import EksClusterConfigurationForm from '~/create_cluster/eks_cluster/components/eks_cluster_configuration_form.vue';
+import ServiceCredentialsForm from '~/create_cluster/eks_cluster/components/service_credentials_form.vue';
+
+describe('CreateEksCluster', () => {
+  let vm;
+  const accountId = 'accountId';
+  const externalId = 'externalId';
+  const gitlabManagedClusterHelpPath = 'gitlab-managed-cluster-help-path';
+  const accountAndExternalIdsHelpPath = 'account-and-external-id-help-path';
+  const createRoleArnHelpPath = 'role-arn-help-path';
+
+  beforeEach(() => {
+    vm = shallowMount(CreateEksCluster, {
+      propsData: {
+        validCredentials: false,
+        accountId,
+        externalId,
+        gitlabManagedClusterHelpPath,
+        accountAndExternalIdsHelpPath,
+        createRoleArnHelpPath,
+      },
+    });
+  });
+  afterEach(() => vm.destroy());
+
+  describe('when credentials are valid', () => {
+    beforeEach(() => {
+      vm.setProps({ validCredentials: true });
+    });
+
+    it('displays eks cluster configuration form when credentials are valid', () => {
+      expect(vm.find(EksClusterConfigurationForm).exists()).toBe(true);
+    });
+
+    it('provides gitlabManagedClusterHelpPath to eks cluster config form', () => {
+      expect(vm.find(EksClusterConfigurationForm).props('gitlabManagedClusterHelpPath')).toBe(
+        gitlabManagedClusterHelpPath,
+      );
+    });
+  });
+
+  describe('when credentials are invalid', () => {
+    beforeEach(() => {
+      vm.setProps({ validCredentials: false });
+    });
+
+    it('displays service credentials form', () => {
+      expect(vm.find(ServiceCredentialsForm).exists()).toBe(true);
+    });
+
+    describe('passes to the service credentials form', () => {
+      it('account id and external id', () => {
+        expect(vm.find(ServiceCredentialsForm).props('externalId')).toBe(externalId);
+        expect(vm.find(ServiceCredentialsForm).props('accountId')).toBe(accountId);
+      });
+
+      it('help url for account and external ids', () => {
+        expect(vm.find(ServiceCredentialsForm).props('accountAndExternalIdsHelpPath')).toBe(
+          accountAndExternalIdsHelpPath,
+        );
+      });
+
+      it('help url to create a role ARN', () => {
+        expect(vm.find(ServiceCredentialsForm).props('createRoleArnHelpPath')).toBe(
+          createRoleArnHelpPath,
+        );
+      });
+    });
+  });
+});