1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
<script>
import { GlButton, GlTableLite } from '@gitlab/ui';
import SafeHtml from '~/vue_shared/directives/safe_html';
import { __ } from '~/locale';
import { formatDate } from '~/lib/utils/datetime/date_format_utility';
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,
},
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'],
},
methods: {
formatDate(dateString) {
return formatDate(new Date(dateString));
},
},
};
</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(starts_at)="{ item: { starts_at } }">
{{ formatDate(starts_at) }}
</template>
<template #cell(ends_at)="{ item: { ends_at } }">
{{ formatDate(ends_at) }}
</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>
|
