diff options
Diffstat (limited to 'app/assets/javascripts/design_management/components/delete_button.vue')
-rw-r--r-- | app/assets/javascripts/design_management/components/delete_button.vue | 65 |
1 files changed, 52 insertions, 13 deletions
diff --git a/app/assets/javascripts/design_management/components/delete_button.vue b/app/assets/javascripts/design_management/components/delete_button.vue index 1fd902c9ed7..37686dd5a46 100644 --- a/app/assets/javascripts/design_management/components/delete_button.vue +++ b/app/assets/javascripts/design_management/components/delete_button.vue @@ -1,11 +1,12 @@ <script> -import { GlDeprecatedButton, GlModal, GlModalDirective } from '@gitlab/ui'; +import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui'; import { uniqueId } from 'lodash'; +import { s__, __ } from '~/locale'; export default { name: 'DeleteButton', components: { - GlDeprecatedButton, + GlButton, GlModal, }, directives: { @@ -25,40 +26,78 @@ export default { buttonVariant: { type: String, required: false, - default: '', + default: 'info', + }, + buttonCategory: { + type: String, + required: false, + default: 'primary', + }, + buttonIcon: { + type: String, + required: false, + default: undefined, + }, + buttonSize: { + type: String, + required: false, + default: 'medium', }, hasSelectedDesigns: { type: Boolean, required: false, default: true, }, + loading: { + type: Boolean, + required: false, + default: false, + }, }, data() { return { modalId: uniqueId('design-deletion-confirmation-'), }; }, + modal: { + title: s__('DesignManagement|Are you sure you want to archive the selected designs?'), + actionPrimary: { + text: s__('DesignManagement|Archive designs'), + attributes: { variant: 'warning' }, + }, + actionCancel: { + text: __('Cancel'), + }, + }, }; </script> <template> - <div> + <div class="gl-display-flex gl-align-items-center gl-h-full"> <gl-modal :modal-id="modalId" - :title="s__('DesignManagement|Delete designs confirmation')" - :ok-title="s__('DesignManagement|Delete')" - ok-variant="danger" + :title="$options.modal.title" + :action-primary="$options.modal.actionPrimary" + :action-cancel="$options.modal.actionCancel" @ok="$emit('deleteSelectedDesigns')" > - <p>{{ s__('DesignManagement|Are you sure you want to delete the selected designs?') }}</p> + <p> + {{ + s__( + 'DesignManagement|Archived designs will still be available in previous versions of the design collection.', + ) + }} + </p> </gl-modal> - <gl-deprecated-button + <gl-button v-gl-modal-directive="modalId" :variant="buttonVariant" - :disabled="isDeleting || !hasSelectedDesigns" + :category="buttonCategory" + :size="buttonSize" :class="buttonClass" - > - <slot></slot> - </gl-deprecated-button> + :loading="loading" + :icon="buttonIcon" + :disabled="isDeleting || !hasSelectedDesigns" + /> </div> </template> |