1 files changed, 27 insertions, 18 deletions

diff --git a/app/assets/javascripts/clusters/components/application_row.vue b/app/assets/javascripts/clusters/components/application_row.vue
index c86db28515f..412260da958 100644
--- a/app/assets/javascripts/clusters/components/application_row.vue
+++ b/app/assets/javascripts/clusters/components/application_row.vue
@@ -1,9 +1,8 @@
 <script>
-import { GlLink, GlModalDirective, GlSprintf } from '@gitlab/ui';
+import { GlLink, GlModalDirective, GlSprintf, GlButton, GlAlert } 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,9 +11,10 @@ import { APPLICATION_STATUS, ELASTIC_STACK } from '../constants';
 
 export default {
   components: {
-    loadingButton,
+    GlButton,
     identicon,
     GlLink,
+    GlAlert,
     GlSprintf,
     UninstallApplicationButton,
     UninstallApplicationConfirmationModal,
@@ -382,24 +382,28 @@ export default {
             </template>
           </div>
 
-          <div
+          <gl-alert
             v-if="updateFailed && !isUpdating"
-            class="bs-callout bs-callout-danger cluster-application-banner mt-2 mb-0 js-cluster-application-update-details"
+            variant="danger"
+            :dismissible="false"
+            class="gl-mt-3 gl-mb-0 js-cluster-application-update-details"
           >
             {{ updateFailureDescription }}
-          </div>
+          </gl-alert>
           <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 +411,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 +438,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"