diff options
Diffstat (limited to 'app/assets/javascripts/badges')
3 files changed, 42 insertions, 28 deletions
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue index 6afb10dd2ad..0a8479519f1 100644 --- a/app/assets/javascripts/badges/components/badge_form.vue +++ b/app/assets/javascripts/badges/components/badge_form.vue @@ -218,7 +218,7 @@ export default { </p> </div> - <div v-if="isEditing" class="row-content-block gl-display-flex gl-justify-content-end"> + <div v-if="isEditing" class="row-content-block"> <gl-button class="btn-cancel gl-mr-4" data-testid="cancelEditing" @click="onCancel"> {{ __('Cancel') }} </gl-button> @@ -232,7 +232,7 @@ export default { {{ s__('Badges|Save changes') }} </gl-button> </div> - <div v-else class="gl-display-flex gl-justify-content-end form-group"> + <div v-else class="form-group"> <gl-button :loading="isSaving" type="submit" variant="success" category="primary"> {{ s__('Badges|Add badge') }} </gl-button> diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue index 3343634ecad..4ca91e7a589 100644 --- a/app/assets/javascripts/badges/components/badge_list_row.vue +++ b/app/assets/javascripts/badges/components/badge_list_row.vue @@ -1,6 +1,6 @@ <script> import { mapActions, mapState } from 'vuex'; -import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { GlLoadingIcon, GlButton, GlModalDirective } from '@gitlab/ui'; import { s__ } from '~/locale'; import { PROJECT_BADGE } from '../constants'; import Badge from './badge.vue'; @@ -9,8 +9,11 @@ export default { name: 'BadgeListRow', components: { Badge, - GlIcon, GlLoadingIcon, + GlButton, + }, + directives: { + GlModal: GlModalDirective, }, props: { badge: { @@ -51,24 +54,25 @@ export default { <span class="table-section section-30 str-truncated">{{ badge.linkUrl }}</span> <div class="table-section section-10 table-button-footer"> <div v-if="canEditBadge" class="table-action-buttons"> - <button + <gl-button :disabled="badge.isDeleting" - class="btn btn-default gl-mr-3" - type="button" + class="gl-mr-3" + variant="default" + icon="pencil" + size="medium" + :aria-label="__('Edit')" @click="editBadge(badge)" - > - <gl-icon :size="16" :aria-label="__('Edit')" name="pencil" /> - </button> - <button + /> + <gl-button + v-gl-modal.delete-badge-modal :disabled="badge.isDeleting" - class="btn btn-danger" - type="button" - data-toggle="modal" - data-target="#delete-badge-modal" + variant="danger" + icon="remove" + size="medium" + :aria-label="__('Delete')" + data-testid="delete-badge" @click="updateBadgeInModal(badge)" - > - <gl-icon :size="16" :aria-label="__('Delete')" name="remove" /> - </button> + /> <gl-loading-icon v-show="badge.isDeleting" :inline="true" /> </div> </div> diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue index 531742e49e3..19781783100 100644 --- a/app/assets/javascripts/badges/components/badge_settings.vue +++ b/app/assets/javascripts/badges/components/badge_settings.vue @@ -1,9 +1,8 @@ <script> import { mapState, mapActions } from 'vuex'; -import { GlSprintf } from '@gitlab/ui'; +import { GlSprintf, GlModal } from '@gitlab/ui'; import { deprecatedCreateFlash as createFlash } from '~/flash'; import { s__ } from '~/locale'; -import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue'; import Badge from './badge.vue'; import BadgeForm from './badge_form.vue'; import BadgeList from './badge_list.vue'; @@ -14,7 +13,7 @@ export default { Badge, BadgeForm, BadgeList, - GlModal: DeprecatedModal2, + GlModal, GlSprintf, }, i18n: { @@ -24,6 +23,17 @@ export default { }, computed: { ...mapState(['badgeInModal', 'isEditing']), + primaryProps() { + return { + text: s__('Delete badge'), + attributes: [{ category: 'primary' }, { variant: 'danger' }], + }; + }, + cancelProps() { + return { + text: s__('Cancel'), + }; + }, }, methods: { ...mapActions(['deleteBadge']), @@ -44,11 +54,11 @@ export default { <template> <div class="badge-settings"> <gl-modal - id="delete-badge-modal" - :header-title-text="s__('Badges|Delete badge?')" - :footer-primary-button-text="s__('Badges|Delete badge')" - footer-primary-button-variant="danger" - @submit="onSubmitModal" + modal-id="delete-badge-modal" + :title="s__('Badges|Delete badge?')" + :action-primary="primaryProps" + :action-cancel="cancelProps" + @primary="onSubmitModal" > <div class="well"> <badge @@ -65,9 +75,9 @@ export default { </p> </gl-modal> - <badge-form v-show="isEditing" :is-editing="true" /> + <badge-form v-show="isEditing" :is-editing="true" data-testid="edit-badge" /> - <badge-form v-show="!isEditing" :is-editing="false" /> + <badge-form v-show="!isEditing" :is-editing="false" data-testid="add-new-badge" /> <badge-list v-show="!isEditing" /> </div> </template> |