126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
Vue
<script>
|
|
import {
|
|
GlButton,
|
|
GlButtonGroup,
|
|
GlModal,
|
|
GlSprintf,
|
|
GlTooltipDirective,
|
|
GlModalDirective,
|
|
} from '@gitlab/ui';
|
|
import { __, s__, sprintf } from '~/locale';
|
|
import timeagoMixin from '~/vue_shared/mixins/timeago';
|
|
|
|
export default {
|
|
components: { GlButton, GlButtonGroup, GlModal, GlSprintf },
|
|
directives: { GlTooltip: GlTooltipDirective, GlModal: GlModalDirective },
|
|
mixins: [timeagoMixin],
|
|
props: {
|
|
userLists: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
translations: {
|
|
createdTimeagoLabel: s__('UserList|created %{timeago}'),
|
|
deleteListTitle: s__('UserList|Delete %{name}?'),
|
|
deleteListMessage: __('User list %{name} will be removed. Are you sure?'),
|
|
editUserListLabel: s__('FeatureFlags|Edit User List'),
|
|
},
|
|
modal: {
|
|
id: 'deleteListModal',
|
|
actionPrimary: {
|
|
text: __('Delete user list'),
|
|
attributes: { variant: 'danger', 'data-testid': 'modal-confirm' },
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
deleteUserList: null,
|
|
};
|
|
},
|
|
computed: {
|
|
deleteListName() {
|
|
return this.deleteUserList?.name;
|
|
},
|
|
modalTitle() {
|
|
return sprintf(this.$options.translations.deleteListTitle, {
|
|
name: this.deleteListName,
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
createdTimeago(list) {
|
|
return sprintf(this.$options.translations.createdTimeagoLabel, {
|
|
timeago: this.timeFormatted(list.created_at),
|
|
});
|
|
},
|
|
displayList(list) {
|
|
return list.user_xids.replace(/,/g, ', ');
|
|
},
|
|
onDelete() {
|
|
this.$emit('delete', this.deleteUserList);
|
|
},
|
|
confirmDeleteList(list) {
|
|
this.deleteUserList = list;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div
|
|
v-for="list in userLists"
|
|
:key="list.id"
|
|
data-testid="ffUserList"
|
|
class="gl-border-b-solid gl-border-gray-100 gl-border-b-1 gl-w-full gl-py-4 gl-display-flex gl-justify-content-space-between"
|
|
>
|
|
<div class="gl-display-flex gl-flex-direction-column gl-overflow-hidden gl-flex-grow-1">
|
|
<span data-testid="ffUserListName" class="gl-font-weight-bold gl-mb-2">
|
|
{{ list.name }}
|
|
</span>
|
|
<span
|
|
v-gl-tooltip
|
|
:title="tooltipTitle(list.created_at)"
|
|
data-testid="ffUserListTimestamp"
|
|
class="gl-text-gray-300 gl-mb-2"
|
|
>
|
|
{{ createdTimeago(list) }}
|
|
</span>
|
|
<span data-testid="ffUserListIds" class="gl-str-truncated">{{ displayList(list) }}</span>
|
|
</div>
|
|
|
|
<gl-button-group class="gl-align-self-start gl-mt-2">
|
|
<gl-button
|
|
:href="list.path"
|
|
category="secondary"
|
|
icon="pencil"
|
|
:aria-label="$options.translations.editUserListLabel"
|
|
data-testid="edit-user-list"
|
|
/>
|
|
<gl-button
|
|
v-gl-modal="$options.modal.id"
|
|
category="secondary"
|
|
variant="danger"
|
|
icon="remove"
|
|
:aria-label="$options.modal.actionPrimary.text"
|
|
data-testid="delete-user-list"
|
|
@click="confirmDeleteList(list)"
|
|
/>
|
|
</gl-button-group>
|
|
</div>
|
|
<gl-modal
|
|
:title="modalTitle"
|
|
:modal-id="$options.modal.id"
|
|
:action-primary="$options.modal.actionPrimary"
|
|
static
|
|
@primary="onDelete"
|
|
>
|
|
<gl-sprintf :message="$options.translations.deleteListMessage">
|
|
<template #name>
|
|
<b>{{ deleteListName }}</b>
|
|
</template>
|
|
</gl-sprintf>
|
|
</gl-modal>
|
|
</div>
|
|
</template>
|