diff options
Diffstat (limited to 'app/assets/javascripts/clusters/components/application_row.vue')
-rw-r--r-- | app/assets/javascripts/clusters/components/application_row.vue | 45 |
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" |