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
|
/* eslint-disable */
import { EXTENSION_ICONS } from '../constants';
import issuesCollapsedQuery from './issues_collapsed.query.graphql';
import issuesQuery from './issues.query.graphql';
import { n__, sprintf } from '~/locale';
export default {
// Give the extension a name
// Make it easier to track in Vue dev tools
name: 'WidgetIssues',
i18n: {
label: 'Issues',
loading: 'Loading issues...',
},
expandEvent: 'i_testing_load_performance_widget_total',
// Add an array of props
// These then get mapped to values stored in the MR Widget store
props: ['targetProjectFullPath', 'conflictsDocsPath'],
// Add any extra computed props in here
computed: {
// Small summary text to be displayed in the collapsed state
// Receives the collapsed data as an argument
summary(count) {
return sprintf(
n__(
'ciReport|Load performance test metrics detected %{strong_start}%{changesFound}%{strong_end} change',
'ciReport|Load performance test metrics detected %{strong_start}%{changesFound}%{strong_end} changes',
count,
),
{ changesFound: count },
);
},
// Status icon to be used next to the summary text
// Receives the collapsed data as an argument
statusIcon(count) {
return EXTENSION_ICONS.warning;
},
// Tertiary action buttons that will take the user elsewhere
// in the GitLab app
tertiaryButtons() {
return [
{
text: 'Click me',
onClick() {
console.log('Hello world');
},
},
{ text: 'Full report', href: this.conflictsDocsPath, target: '_blank' },
];
},
shouldCollapse() {
return true;
},
},
methods: {
// Fetches the collapsed data
// Ideally, this request should return the smallest amount of data possible
// Receives an object of all the props passed in to the extension
fetchCollapsedData({ targetProjectFullPath }) {
return this.$apollo
.query({ query: issuesCollapsedQuery, variables: { projectPath: targetProjectFullPath } })
.then(({ data }) => data.project.issues.count);
},
// Fetches the full data when the extension is expanded
// Receives an object of all the props passed in to the extension
fetchFullData({ targetProjectFullPath }) {
return this.$apollo
.query({ query: issuesQuery, variables: { projectPath: targetProjectFullPath } })
.then(({ data }) => {
// Return some transformed data to be rendered in the expanded state
return data.project.issues.nodes.map((issue, i) => ({
id: issue.id, // Required: The ID of the object
header: ['New', 'This is an %{strong_start}issue%{strong_end} row'],
text:
'%{critical_start}1 Critical%{critical_end}, %{danger_start}1 High%{danger_end}, and %{strong_start}1 Other%{strong_end}. %{small_start}Some smaller text%{small_end}', // Required: The text to get used on each row
subtext:
'Reported resource changes: %{strong_start}2%{strong_end} to add, 0 to change, 0 to delete', // Optional: The sub-text to get displayed below each rows main content
// Icon to get rendered on the side of each row
icon: {
// Required: Name maps to an icon in GitLabs SVG
name: issue.state === 'closed' ? EXTENSION_ICONS.error : EXTENSION_ICONS.success,
},
// Badges get rendered next to the text on each row
// badge: issue.state === 'closed' && {
// text: 'Closed', // Required: Text to be used inside of the badge
// // variant: 'info', // Optional: The variant of the badge, maps to GitLab UI variants
// },
// Each row can have its own link that will take the user elsewhere
// link: {
// href: 'https://google.com', // Required: href for the link
// text: 'Link text', // Required: Text to be used inside the link
// },
actions: [{ text: 'Full report', href: 'https://gitlab.com', target: '_blank' }],
children: [
{
id: `child-${issue.id}`,
header: 'New',
text: '%{critical_start}1 Critical%{critical_end}',
icon: {
name: EXTENSION_ICONS.error,
},
},
],
}));
});
},
},
};
|
