2021-01-29 00:20:46 +05:30
/* eslint-disable */
2021-11-18 22:05:49 +05:30
import { EXTENSION _ICONS } from '../constants' ;
2021-01-29 00:20:46 +05:30
import issuesCollapsedQuery from './issues_collapsed.query.graphql' ;
import issuesQuery from './issues.query.graphql' ;
2022-01-26 12:08:38 +05:30
import { n _ _ , sprintf } from '~/locale' ;
2021-01-29 00:20:46 +05:30
export default {
// Give the extension a name
// Make it easier to track in Vue dev tools
name : 'WidgetIssues' ,
2021-11-18 22:05:49 +05:30
i18n : {
label : 'Issues' ,
loading : 'Loading issues...' ,
} ,
2021-12-11 22:18:48 +05:30
expandEvent : 'i_testing_load_performance_widget_total' ,
2021-01-29 00:20:46 +05:30
// Add an array of props
// These then get mapped to values stored in the MR Widget store
2021-11-18 22:05:49 +05:30
props : [ 'targetProjectFullPath' , 'conflictsDocsPath' ] ,
2021-01-29 00:20:46 +05:30
// 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 ) {
2022-01-26 12:08:38 +05:30
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' ,
2022-04-04 11:22:00 +05:30
count ,
2022-01-26 12:08:38 +05:30
) ,
2022-04-04 11:22:00 +05:30
{ changesFound : count } ,
2022-01-26 12:08:38 +05:30
) ;
2021-01-29 00:20:46 +05:30
} ,
// Status icon to be used next to the summary text
// Receives the collapsed data as an argument
statusIcon ( count ) {
2021-11-18 22:05:49 +05:30
return EXTENSION _ICONS . warning ;
} ,
// Tertiary action buttons that will take the user elsewhere
// in the GitLab app
tertiaryButtons ( ) {
2021-12-11 22:18:48 +05:30
return [
{
text : 'Click me' ,
onClick ( ) {
console . log ( 'Hello world' ) ;
} ,
} ,
{ text : 'Full report' , href : this . conflictsDocsPath , target : '_blank' } ,
] ;
2021-01-29 00:20:46 +05:30
} ,
} ,
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
2022-01-26 12:08:38 +05:30
return data . project . issues . nodes . map ( ( issue , i ) => ( {
2021-01-29 00:20:46 +05:30
id : issue . id , // Required: The ID of the object
2022-01-26 12:08:38 +05:30
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
2021-01-29 00:20:46 +05:30
// Icon to get rendered on the side of each row
icon : {
// Required: Name maps to an icon in GitLabs SVG
2021-11-18 22:05:49 +05:30
name : issue . state === 'closed' ? EXTENSION _ICONS . error : EXTENSION _ICONS . success ,
2021-01-29 00:20:46 +05:30
} ,
// Badges get rendered next to the text on each row
2021-11-18 22:05:49 +05:30
// 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
// },
2021-01-29 00:20:46 +05:30
// 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
// },
2021-12-11 22:18:48 +05:30
actions : [ { text : 'Full report' , href : 'https://gitlab.com' , target : '_blank' } ] ,
2021-01-29 00:20:46 +05:30
} ) ) ;
} ) ;
} ,
} ,
} ;