Merge branch '229201-eks-cluster-loading-button' into 'master'

Migrate loading button on AWS cluster authentication

Closes #229201

See merge request gitlab-org/gitlab!39765

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

 <script>
-import { GlFormInput } from '@gitlab/ui';
+import { GlFormInput, GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { mapState, mapActions } from 'vuex';
 import { sprintf, s__, __ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 
 export default {
   components: {
     GlFormInput,
-    LoadingButton,
+    GlButton,
     ClipboardButton,
   },
   props: {
@@ -130,13 +129,15 @@ export default {
       <gl-form-input id="eks-provision-role-arn" v-model="roleArn" />
       <p class="form-text text-muted" v-html="provisionRoleArnHelpText"></p>
     </div>
-    <loading-button
-      class="js-submit-service-credentials btn-success"
+    <gl-button
+      variant="success"
+      category="primary"
       type="submit"
       :disabled="submitButtonDisabled"
       :loading="isCreatingRole"
-      :label="submitButtonLabel"
       @click.prevent="createRole({ roleArn, externalId })"
-    />
+    >
+      {{ submitButtonLabel }}
+    </gl-button>
   </form>
 </template>

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

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
-
+import { GlButton } from '@gitlab/ui';
 import ServiceCredentialsForm from '~/create_cluster/eks_cluster/components/service_credentials_form.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
-
 import eksClusterState from '~/create_cluster/eks_cluster/store/state';
 
 const localVue = createLocalVue();
@@ -46,7 +44,7 @@ describe('ServiceCredentialsForm', () => {
   const findExternalIdInput = () => vm.find('#eks-external-id');
   const findCopyExternalIdButton = () => vm.find('.js-copy-external-id-button');
   const findInvalidCredentials = () => vm.find('.js-invalid-credentials');
-  const findSubmitButton = () => vm.find(LoadingButton);
+  const findSubmitButton = () => vm.find(GlButton);
 
   it('displays provided account id', () => {
     expect(findAccountIdInput().attributes('value')).toBe(accountId);
@@ -102,7 +100,7 @@ describe('ServiceCredentialsForm', () => {
     });
 
     it('displays Authenticating label on submit button', () => {
-      expect(findSubmitButton().props('label')).toBe('Authenticating');
+      expect(findSubmitButton().text()).toBe('Authenticating');
     });
   });