fix: EKS credentials form doesn't "reset" after error

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

@@ -82,7 +82,7 @@ export default {
 };
 </script>
 <template>
-  <form name="service-credentials-form" @submit.prevent="createRole({ roleArn, externalId })">
+  <form name="service-credentials-form">
     <h2>{{ s__('ClusterIntegration|Authenticate with Amazon Web Services') }}</h2>
     <p>
       {{
@@ -136,6 +136,7 @@ export default {
       :disabled="submitButtonDisabled"
       :loading="isCreatingRole"
       :label="submitButtonLabel"
+      @click.prevent="createRole({ roleArn, externalId })"
     />
   </form>
 </template>

changelogs/unreleased/37449-fix-eks-authenticate-button.yml

+---
+title: 'fix: EKS credentials form does not reset after error'
+merge_request: 21958
+author:
+type: other

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

@@ -47,7 +47,6 @@ describe('ServiceCredentialsForm', () => {
   const findCopyExternalIdButton = () => vm.find('.js-copy-external-id-button');
   const findInvalidCredentials = () => vm.find('.js-invalid-credentials');
   const findSubmitButton = () => vm.find(LoadingButton);
-  const findForm = () => vm.find('form[name="service-credentials-form"]');
 
   it('displays provided account id', () => {
     expect(findAccountIdInput().attributes('value')).toBe(accountId);
@@ -77,8 +76,10 @@ describe('ServiceCredentialsForm', () => {
     });
   });
 
-  it('dispatches createRole action when form is submitted', () => {
-    findForm().trigger('submit');
+  it('dispatches createRole action when submit button is clicked', () => {
+    vm.setData({ roleArn: '123' }); // set role ARN to enable button
+
+    findSubmitButton().vm.$emit('click', new Event('click'));
 
     expect(createRoleAction).toHaveBeenCalled();
   });