Merge branch '229209-cluster-application-row-loading-button' into 'master'

Migrate loading buttons on cluster applications

Closes #229212 and #229209

See merge request gitlab-org/gitlab!39772

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

 <script>
-import { GlLink, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlModalDirective, GlSprintf, GlButton } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 import identicon from '../../vue_shared/components/identicon.vue';
-import loadingButton from '../../vue_shared/components/loading_button.vue';
 import UninstallApplicationButton from './uninstall_application_button.vue';
 import UninstallApplicationConfirmationModal from './uninstall_application_confirmation_modal.vue';
 import UpdateApplicationConfirmationModal from './update_application_confirmation_modal.vue';
@@ -12,7 +11,7 @@ import { APPLICATION_STATUS, ELASTIC_STACK } from '../constants';
 
 export default {
   components: {
-    loadingButton,
+    GlButton,
     identicon,
     GlLink,
     GlSprintf,
@@ -390,16 +389,18 @@ export default {
           </div>
           <template v-if="updateAvailable || updateFailed || isUpdating">
             <template v-if="updatingNeedsConfirmation">
-              <loading-button
+              <gl-button
                 v-gl-modal-directive="updateModalId"
-                class="btn btn-primary js-cluster-application-update-button mt-2"
+                class="js-cluster-application-update-button mt-2"
+                variant="info"
+                category="primary"
                 :loading="isUpdating"
                 :disabled="isUpdating"
-                :label="updateButtonLabel"
                 data-qa-selector="update_button_with_confirmation"
                 :data-qa-application="id"
-              />
-
+              >
+                {{ updateButtonLabel }}
+              </gl-button>
               <update-application-confirmation-modal
                 :application="id"
                 :application-title="title"
@@ -407,16 +408,19 @@ export default {
               />
             </template>
 
-            <loading-button
+            <gl-button
               v-else
-              class="btn btn-primary js-cluster-application-update-button mt-2"
+              class="js-cluster-application-update-button mt-2"
+              variant="info"
+              category="primary"
               :loading="isUpdating"
               :disabled="isUpdating"
-              :label="updateButtonLabel"
               data-qa-selector="update_button"
               :data-qa-application="id"
               @click="updateConfirmed"
-            />
+            >
+              {{ updateButtonLabel }}
+            </gl-button>
           </template>
         </div>
       </div>
@@ -431,16 +435,18 @@ export default {
           }}</a>
         </div>
         <div class="btn-group table-action-buttons">
-          <loading-button
+          <gl-button
             v-if="displayInstallButton"
             :loading="installButtonLoading"
             :disabled="disabled || installButtonDisabled"
-            :label="installButtonLabel"
             class="js-cluster-application-install-button"
+            variant="default"
             data-qa-selector="install_button"
             :data-qa-application="id"
             @click="installClicked"
-          />
+          >
+            {{ installButtonLabel }}
+          </gl-button>
           <uninstall-application-button
             v-if="displayUninstallButton"
             v-gl-modal-directive="uninstallModalId"

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

 <script>
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { GlButton } from '@gitlab/ui';
 import { APPLICATION_STATUS } from '~/clusters/constants';
 import { __ } from '~/locale';
 
@@ -7,7 +7,7 @@ const { UPDATING, UNINSTALLING } = APPLICATION_STATUS;
 
 export default {
   components: {
-    LoadingButton,
+    GlButton,
   },
   props: {
     status: {
@@ -30,5 +30,7 @@ export default {
 </script>
 
 <template>
-  <loading-button :label="label" :disabled="disabled" :loading="loading" />
+  <gl-button :disabled="disabled" variant="default" :loading="loading">
+    {{ label }}
+  </gl-button>
 </template>

spec/frontend/clusters/components/application_row_spec.js

@@ -48,7 +48,7 @@ describe('Application Row', () => {
   describe('Install button', () => {
     const button = () => wrapper.find('.js-cluster-application-install-button');
     const checkButtonState = (label, loading, disabled) => {
-      expect(button().props('label')).toEqual(label);
+      expect(button().text()).toEqual(label);
       expect(button().props('loading')).toEqual(loading);
       expect(button().props('disabled')).toEqual(disabled);
     };
@@ -56,7 +56,7 @@ describe('Application Row', () => {
     it('has indeterminate state on page load', () => {
       mountComponent({ status: null });
 
-      expect(button().props('label')).toBeUndefined();
+      expect(button().text()).toBe('');
     });
 
     it('has install button', () => {
@@ -225,7 +225,7 @@ describe('Application Row', () => {
       mountComponent({ updateAvailable: true });
 
       expect(button().exists()).toBe(true);
-      expect(button().props('label')).toContain('Update');
+      expect(button().text()).toContain('Update');
     });
 
     it('has enabled "Retry update" when update process fails', () => {
@@ -235,14 +235,14 @@ describe('Application Row', () => {
       });
 
       expect(button().exists()).toBe(true);
-      expect(button().props('label')).toContain('Retry update');
+      expect(button().text()).toContain('Retry update');
     });
 
     it('has disabled "Updating" when APPLICATION_STATUS.UPDATING', () => {
       mountComponent({ status: APPLICATION_STATUS.UPDATING });
 
       expect(button().exists()).toBe(true);
-      expect(button().props('label')).toContain('Updating');
+      expect(button().text()).toContain('Updating');
     });
 
     it('clicking update button emits event', () => {

spec/frontend/clusters/components/uninstall_application_button_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import UninstallApplicationButton from '~/clusters/components/uninstall_application_button.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import { APPLICATION_STATUS } from '~/clusters/constants';
 
 const { INSTALLED, UPDATING, UNINSTALLING } = APPLICATION_STATUS;
@@ -19,14 +19,21 @@ describe('UninstallApplicationButton', () => {
   });
 
   describe.each`
-    status          | loading  | disabled | label
+    status          | loading  | disabled | text
     ${INSTALLED}    | ${false} | ${false} | ${'Uninstall'}
     ${UPDATING}     | ${false} | ${true}  | ${'Uninstall'}
     ${UNINSTALLING} | ${true}  | ${true}  | ${'Uninstalling'}
-  `('when app status is $status', ({ loading, disabled, status, label }) => {
-    it(`renders a loading=${loading}, disabled=${disabled} button with label="${label}"`, () => {
+  `('when app status is $status', ({ loading, disabled, status, text }) => {
+    beforeAll(() => {
       createComponent({ status });
-      expect(wrapper.find(LoadingButton).props()).toMatchObject({ loading, disabled, label });
+    });
+
+    it(`renders a button with loading=${loading} and disabled=${disabled}`, () => {
+      expect(wrapper.find(GlButton).props()).toMatchObject({ loading, disabled });
+    });
+
+    it(`renders a button with text="${text}"`, () => {
+      expect(wrapper.find(GlButton).text()).toBe(text);
     });
   });
 });