114 lines
2.5 KiB
Vue
114 lines
2.5 KiB
Vue
<script>
|
|
import { GlButton, GlTableLite, GlSafeHtmlDirective } from '@gitlab/ui';
|
|
import { __ } from '~/locale';
|
|
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
|
|
|
|
const DEFAULT_TD_CLASSES = 'gl-vertical-align-middle!';
|
|
|
|
export default {
|
|
name: 'MessagesTable',
|
|
components: {
|
|
GlButton,
|
|
GlTableLite,
|
|
},
|
|
directives: {
|
|
SafeHtml: GlSafeHtmlDirective,
|
|
},
|
|
mixins: [glFeatureFlagsMixin()],
|
|
i18n: {
|
|
edit: __('Edit'),
|
|
delete: __('Delete'),
|
|
},
|
|
props: {
|
|
messages: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
fields() {
|
|
if (this.glFeatures.roleTargetedBroadcastMessages) return this.$options.allFields;
|
|
return this.$options.allFields.filter((f) => f.key !== 'target_roles');
|
|
},
|
|
},
|
|
allFields: [
|
|
{
|
|
key: 'status',
|
|
label: __('Status'),
|
|
tdClass: DEFAULT_TD_CLASSES,
|
|
},
|
|
{
|
|
key: 'preview',
|
|
label: __('Preview'),
|
|
tdClass: DEFAULT_TD_CLASSES,
|
|
},
|
|
{
|
|
key: 'starts_at',
|
|
label: __('Starts'),
|
|
tdClass: DEFAULT_TD_CLASSES,
|
|
},
|
|
{
|
|
key: 'ends_at',
|
|
label: __('Ends'),
|
|
tdClass: DEFAULT_TD_CLASSES,
|
|
},
|
|
{
|
|
key: 'target_roles',
|
|
label: __('Target roles'),
|
|
tdClass: DEFAULT_TD_CLASSES,
|
|
thAttr: { 'data-testid': 'target-roles-th' },
|
|
},
|
|
{
|
|
key: 'target_path',
|
|
label: __('Target Path'),
|
|
tdClass: DEFAULT_TD_CLASSES,
|
|
},
|
|
{
|
|
key: 'type',
|
|
label: __('Type'),
|
|
tdClass: DEFAULT_TD_CLASSES,
|
|
},
|
|
{
|
|
key: 'buttons',
|
|
label: '',
|
|
tdClass: `${DEFAULT_TD_CLASSES} gl-white-space-nowrap`,
|
|
},
|
|
],
|
|
safeHtmlConfig: {
|
|
ADD_TAGS: ['use'],
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<gl-table-lite
|
|
:items="messages"
|
|
:fields="fields"
|
|
:tbody-tr-attr="{ 'data-testid': 'message-row' }"
|
|
stacked="md"
|
|
>
|
|
<template #cell(preview)="{ item: { preview } }">
|
|
<div v-safe-html:[$options.safeHtmlConfig]="preview"></div>
|
|
</template>
|
|
|
|
<template #cell(buttons)="{ item: { id, edit_path, disable_delete } }">
|
|
<gl-button
|
|
icon="pencil"
|
|
:aria-label="$options.i18n.edit"
|
|
:href="edit_path"
|
|
data-testid="edit-message"
|
|
/>
|
|
|
|
<gl-button
|
|
class="gl-ml-3"
|
|
icon="remove"
|
|
variant="danger"
|
|
:aria-label="$options.i18n.delete"
|
|
rel="nofollow"
|
|
:disabled="disable_delete"
|
|
:data-testid="`delete-message-${id}`"
|
|
@click="$emit('delete-message', id)"
|
|
/>
|
|
</template>
|
|
</gl-table-lite>
|
|
</template>
|