@@ -6,20 +6,11 @@ import { GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui';
66 *
77 * Receives status object containing:
88 * status: {
9- * group:"running" // used for CSS class
10- * icon: "icon_status_running" // used to render the icon
9+ * icon: "status_running" // used to render the icon and CSS class
10+ * text: "Running",
11+ * detailsPath: '/project1/jobs/1' // can also be details_path
1112 * }
1213 *
13- * Used in:
14- * - Extended MR Popover
15- * - Jobs show view header
16- * - Jobs show view sidebar
17- * - Jobs table
18- * - Linked pipelines
19- * - Pipeline graph
20- * - Pipeline mini graph
21- * - Pipeline show view badge
22- * - Pipelines table Badge
2314 */
2415
2516export default {
@@ -35,13 +26,8 @@ export default {
3526 type: Object ,
3627 required: true ,
3728 validator (status ) {
38- const { group , icon } = status;
39- return (
40- typeof group === ' string' &&
41- group .length &&
42- typeof icon === ' string' &&
43- icon .startsWith (' status_'
44- );
29+ const { icon } = status;
30+ return typeof icon === ' string' && icon .startsWith (' status_'
4531 },
4632 },
4733 showStatusText: {
@@ -62,66 +48,47 @@ export default {
6248 },
6349 computed: {
6450 title () {
65- return this .showTooltip && ! this .showStatusText ? this .status ? .text : ' '
51+ if (this .showTooltip ) {
52+ // show tooltip only when not showing text already
53+ return ! this .showStatusText ? this .status ? .text : null ;
54+ }
55+ return null ;
6656 },
67- detailsPath () {
68- // For now, this can either come from graphQL with camelCase or REST API in snake_case
69- if (! this .useLink ) {
70- return null ;
57+ ariaLabel () {
58+ // show aria-label only when text is not rendered
59+ if (! this .showStatusText ) {
60+ return this . status ? . text ;
7161 }
72- return this . status . detailsPath || this . status . details_path ;
62+ return null ;
7363 },
74- wrapperStyleClasses () {
75- const status = this .status .group ;
76- return ` ci-status-icon ci-status-icon-${ status} `
64+ href () {
65+ // href can come from GraphQL (camelCase) or REST API (snake_case)
66+ if (this .useLink ) {
67+ return this .status .detailsPath || this .status .details_path ;
68+ }
69+ return null ;
7770 },
7871 icon () {
79- return this .status .icon ;
72+ if (this .status .icon ) {
73+ return ` ${ this .status .icon } `
74+ }
75+ return null ;
8076 },
81- badgeStyles () {
77+ variant () {
8278 switch (this .status .icon ) {
8379 case ' status_success'
84- return {
85- textColor: ' gl-text-green-700'
86- variant: ' success'
87- };
80+ return ' success'
8881 case ' status_warning'
89- return {
90- textColor: ' gl-text-orange-700'
91- variant: ' warning'
92- };
82+ case ' status_pending'
83+ return ' warning'
9384 case ' status_failed'
94- return {
95- textColor: ' gl-text-red-700'
96- variant: ' danger'
97- };
85+ return ' danger'
9886 case ' status_running'
99- return {
100- textColor: ' gl-text-blue-700'
101- variant: ' info'
102- };
103- case ' status_pending'
104- return {
105- textColor: ' gl-text-orange-700'
106- variant: ' warning'
107- };
108- case ' status_canceled'
109- return {
110- textColor: ' gl-text-gray-700'
111- variant: ' neutral'
112- };
113- case ' status_manual'
114- return {
115- textColor: ' gl-text-gray-700'
116- variant: ' neutral'
117- };
87+ return ' info'
11888 // default covers the styles for the remainder of CI
11989 // statuses that are not explicitly stated here
12090 default :
121- return {
122- textColor: ' gl-text-gray-600'
123- variant: ' muted'
124- };
91+ return ' neutral'
12592 }
12693 },
12794 },
@@ -131,30 +98,18 @@ export default {
13198 < gl- badge
13299 v- gl- tooltip
133100 class = " ci-icon gl-p-2"
101+ : class = " `ci-icon-variant-${variant}`"
102+ : variant= " variant"
134103 : title= " title"
135- : aria- label= " title "
136- : href= " detailsPath "
104+ : aria- label= " ariaLabel "
105+ : href= " href "
137106 size= " md"
138- : variant= " badgeStyles.variant"
139107 data- testid= " ci-icon"
140108 @click= " $emit('ciStatusBadgeClick')"
141109 >
142- < span
143- class = " ci-icon-wrapper"
144- : class = " [
145- wrapperStyleClasses,
146- {
147- 'gl-display-inline-block gl-vertical-align-top': showStatusText,
148- },
149- ]"
150- >
151- < gl- icon : name= " icon" : aria- label= " status.icon" / > < / span
152- >< span
153- v- if = " showStatusText"
154- class = " gl-mx-2 gl-white-space-nowrap"
155- : class = " badgeStyles.textColor"
156- data- testid= " ci-icon-text"
157- > {{ status .text }}< / span
158- >
110+ < span class = " ci-icon-gl-icon-wrapper" >< gl- icon : name= " icon" / >< / span
111+ >< span v- if = " showStatusText" class = " gl-mx-2 gl-white-space-nowrap" - testid= " ci-icon-text" > {{
112+ status .text
113+ }}< / span>
159114 < / gl- badge>
160115< / template>
0 commit comments