Merge branch '229211-knative-domain-loading-button' into 'master'

Migrate knative domain loading button

Closes #229211

See merge request gitlab-org/gitlab!39774

app/assets/javascripts/clusters/components/knative_domain_editor.vue

@@ -6,8 +6,8 @@ import {
   GlLoadingIcon,
   GlSearchBoxByType,
   GlSprintf,
+  GlButton,
 } from '@gitlab/ui';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import { __, s__ } from '~/locale';
 
@@ -17,7 +17,7 @@ const { UPDATING, UNINSTALLING } = APPLICATION_STATUS;
 
 export default {
   components: {
-    LoadingButton,
+    GlButton,
     ClipboardButton,
     GlLoadingIcon,
     GlDeprecatedDropdown,
@@ -215,13 +215,16 @@ export default {
         }}
       </p>
 
-      <loading-button
-        class="btn-success js-knative-save-domain-button mt-3 ml-3"
+      <gl-button
+        class="js-knative-save-domain-button gl-mt-5 gl-ml-5"
+        variant="success"
+        category="primary"
         :loading="saving"
         :disabled="saveButtonDisabled"
-        :label="saveButtonLabel"
         @click="$emit('save')"
-      />
+      >
+        {{ saveButtonLabel }}
+      </gl-button>
     </template>
   </div>
 </template>

spec/frontend/clusters/components/knative_domain_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem, GlButton } from '@gitlab/ui';
 import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { APPLICATION_STATUS } from '~/clusters/constants';
 
 const { UPDATING } = APPLICATION_STATUS;
@@ -79,7 +78,7 @@ describe('KnativeDomainEditor', () => {
     });
 
     it('triggers save event and pass current knative hostname', () => {
-      wrapper.find(LoadingButton).vm.$emit('click');
+      wrapper.find(GlButton).vm.$emit('click');
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('save').length).toEqual(1);
       });
@@ -166,15 +165,15 @@ describe('KnativeDomainEditor', () => {
     });
 
     it('renders loading spinner in save button', () => {
-      expect(wrapper.find(LoadingButton).props('loading')).toBe(true);
+      expect(wrapper.find(GlButton).props('loading')).toBe(true);
     });
 
     it('renders disabled save button', () => {
-      expect(wrapper.find(LoadingButton).props('disabled')).toBe(true);
+      expect(wrapper.find(GlButton).props('disabled')).toBe(true);
     });
 
     it('renders save button with "Saving" label', () => {
-      expect(wrapper.find(LoadingButton).props('label')).toBe('Saving');
+      expect(wrapper.find(GlButton).text()).toBe('Saving');
     });
   });
 });