diff options
Diffstat (limited to 'app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue')
-rw-r--r-- | app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue | 27 |
1 files changed, 19 insertions, 8 deletions
diff --git a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue index fd07a41ec37..d1ce7bad39a 100644 --- a/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue +++ b/app/assets/javascripts/monitoring/components/duplicate_dashboard_modal.vue @@ -1,7 +1,7 @@ <script> -import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui'; +import { GlAlert, GlModal } from '@gitlab/ui'; import { mapActions, mapGetters } from 'vuex'; -import { s__ } from '~/locale'; +import { __, s__ } from '~/locale'; import DuplicateDashboardForm from './duplicate_dashboard_form.vue'; const events = { @@ -9,7 +9,7 @@ const events = { }; export default { - components: { GlAlert, GlLoadingIcon, GlModal, DuplicateDashboardForm }, + components: { GlAlert, GlModal, DuplicateDashboardForm }, props: { defaultBranch: { type: String, @@ -32,6 +32,20 @@ export default { okButtonText() { return this.loading ? s__('Metrics|Duplicating...') : s__('Metrics|Duplicate'); }, + actionPrimaryProps() { + return { + text: this.okButtonText, + attributes: { + loading: this.loading, + variant: 'confirm', + }, + }; + }, + actionCancelProps() { + return { + text: __('Cancel'), + }; + }, }, methods: { ...mapActions('monitoringDashboard', ['duplicateSystemDashboard']), @@ -75,7 +89,8 @@ export default { ref="duplicateDashboardModal" :modal-id="modalId" :title="s__('Metrics|Duplicate dashboard')" - ok-variant="success" + :action-primary="actionPrimaryProps" + :action-cancel="actionCancelProps" @ok="ok" @hide="hide" > @@ -87,9 +102,5 @@ export default { :default-branch="defaultBranch" @change="formChange" /> - <template #modal-ok> - <gl-loading-icon v-if="loading" size="sm" inline color="light" /> - {{ okButtonText }} - </template> </gl-modal> </template> |