Move accountId, externalId, and hasCredentials

to be part of the Vuex store state

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';
+import { mapState } from 'vuex';
 
 export default {
   components: {
@@ -24,18 +25,9 @@ export default {
       type: String,
       required: true,
     },
-    externalId: {
-      type: String,
-      required: true,
-    },
-    accountId: {
-      type: String,
-      required: true,
-    },
-    validCredentials: {
-      type: Boolean,
-      required: true,
   },
+  computed: {
+    ...mapState(['hasCredentials']),
   },
 };
 </script>

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

@@ -2,6 +2,7 @@
 import { GlFormInput, GlButton } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import _ from 'underscore';
+import { mapState } from 'vuex';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 export default {
@@ -11,14 +12,6 @@ export default {
     ClipboardButton,
   },
   props: {
-    accountId: {
-      type: String,
-      required: true,
-    },
-    externalId: {
-      type: String,
-      required: true,
-    },
     accountAndExternalIdsHelpPath: {
       type: String,
       required: true,
@@ -34,6 +27,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(['accountId', 'externalId']),
     accountAndExternalIdsHelpText() {
       const escapedUrl = _.escape(this.accountAndExternalIdsHelpPath);
 

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

@@ -6,42 +6,39 @@ import createStore from './store';
 Vue.use(Vuex);
 
 export default el => {
-  const { gitlabManagedClusterHelpPath, kubernetesIntegrationHelpPath } = el.dataset;
-
-  return new Vue({
-    el,
-    store: createStore(),
-    components: {
-      CreateEksCluster,
-    },
-    data() {
   const {
     gitlabManagedClusterHelpPath,
+    kubernetesIntegrationHelpPath,
     accountAndExternalIdsHelpPath,
     createRoleArnHelpPath,
     externalId,
     accountId,
-        validCredentials,
-      } = document.querySelector(this.$options.el).dataset;
+    hasCredentials,
+    createCredentialsPath,
+  } = el.dataset;
 
-      return {
-        gitlabManagedClusterHelpPath,
-        accountAndExternalIdsHelpPath,
-        createRoleArnHelpPath,
+  return new Vue({
+    el,
+    store: createStore({
+      initialState: {
+        hasCredentials,
         externalId,
         accountId,
-        validCredentials,
-      };
+      },
+      apiPaths: {
+        createCredentialsPath,
+      },
+    }),
+    components: {
+      CreateEksCluster,
     },
     render(createElement) {
       return createElement('create-eks-cluster', {
         props: {
-          gitlabManagedClusterHelpPath: this.gitlabManagedClusterHelpPath,
-          accountAndExternalIdsHelpPath: this.accountAndExternalIdsHelpPath,
-          createRoleArnHelpPath: this.createRoleArnHelpPath,
-          externalId: this.externalId,
-          accountId: this.accountId,
-          validCredentials: this.validCredentials,
+          gitlabManagedClusterHelpPath,
+          kubernetesIntegrationHelpPath,
+          accountAndExternalIdsHelpPath,
+          createRoleArnHelpPath,
         },
       });
     },

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

@@ -8,12 +8,12 @@ import clusterDropdownStore from './cluster_dropdown';
 
 import * as awsServices from '../services/aws_services_facade';
 
-const createStore = () =>
+const createStore = ({ initialState }) =>
   new Vuex.Store({
     actions,
     getters,
     mutations,
-    state: state(),
+    state: Object.assign(state(), initialState),
     modules: {
       roles: {
         namespaced: true,

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

@@ -2,7 +2,11 @@ import { KUBERNETES_VERSIONS } from '../constants';
 
 export default () => ({
   isValidatingCredentials: false,
-  validCredentials: false,
+  hasCredentials: false,
+  invalidCredentials: false,
+  invalidCredentialsError: null,
+  accountId: '',
+  externalId: '',
 
   clusterName: '',
   environmentScope: '*',

app/views/clusters/clusters/eks/_index.html.haml

@@ -7,4 +7,4 @@
     'account-id' => Gitlab::CurrentSettings.eks_account_id,
     'external-id' => @aws_role.role_external_id,
     'kubernetes-integration-help-path' => help_page_path('user/project/clusters/index'),
-    'valid-credentials' => @aws_role.role_arn.present? } }
+    'has-credentials' => @aws_role.role_arn.present? } }

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

-import { shallowMount } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } 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';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('CreateEksCluster', () => {
   let vm;
-  const accountId = 'accountId';
-  const externalId = 'externalId';
+  let state;
   const gitlabManagedClusterHelpPath = 'gitlab-managed-cluster-help-path';
   const accountAndExternalIdsHelpPath = 'account-and-external-id-help-path';
   const createRoleArnHelpPath = 'role-arn-help-path';
 
   beforeEach(() => {
+    state = { hasCredentials: false };
+    const store = new Vuex.Store({
+      state,
+    });
+
     vm = shallowMount(CreateEksCluster, {
       propsData: {
-        validCredentials: false,
-        accountId,
-        externalId,
         gitlabManagedClusterHelpPath,
         accountAndExternalIdsHelpPath,
         createRoleArnHelpPath,
       },
+      localVue,
+      store,
     });
   });
   afterEach(() => vm.destroy());
 
-  describe('when credentials are valid', () => {
+  describe('when credentials are provided', () => {
     beforeEach(() => {
-      vm.setProps({ validCredentials: true });
+      state.hasCredentials = 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 });
+      state.hasCredentials = false;
     });
 
     it('displays service credentials form', () => {
@@ -52,11 +53,6 @@ describe('CreateEksCluster', () => {
     });
 
     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,