diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/ci_icon.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/ci_icon.vue | 125 |
1 files changed, 40 insertions, 85 deletions
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue index 9f4cfa6f690..a2b6b4642c9 100644 --- a/app/assets/javascripts/vue_shared/components/ci_icon.vue +++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue @@ -6,20 +6,11 @@ import { GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui'; * * Receives status object containing: * status: { - * group:"running" // used for CSS class - * icon: "icon_status_running" // used to render the icon + * icon: "status_running" // used to render the icon and CSS class + * text: "Running", + * detailsPath: '/project1/jobs/1' // can also be details_path * } * - * Used in: - * - Extended MR Popover - * - Jobs show view header - * - Jobs show view sidebar - * - Jobs table - * - Linked pipelines - * - Pipeline graph - * - Pipeline mini graph - * - Pipeline show view badge - * - Pipelines table Badge */ export default { @@ -35,13 +26,8 @@ export default { type: Object, required: true, validator(status) { - const { group, icon } = status; - return ( - typeof group === 'string' && - group.length && - typeof icon === 'string' && - icon.startsWith('status_') - ); + const { icon } = status; + return typeof icon === 'string' && icon.startsWith('status_'); }, }, showStatusText: { @@ -62,66 +48,47 @@ export default { }, computed: { title() { - return this.showTooltip && !this.showStatusText ? this.status?.text : ''; + if (this.showTooltip) { + // show tooltip only when not showing text already + return !this.showStatusText ? this.status?.text : null; + } + return null; }, - detailsPath() { - // For now, this can either come from graphQL with camelCase or REST API in snake_case - if (!this.useLink) { - return null; + ariaLabel() { + // show aria-label only when text is not rendered + if (!this.showStatusText) { + return this.status?.text; } - return this.status.detailsPath || this.status.details_path; + return null; }, - wrapperStyleClasses() { - const status = this.status.group; - return `ci-status-icon ci-status-icon-${status} gl-rounded-full gl-justify-content-center gl-line-height-0`; + href() { + // href can come from GraphQL (camelCase) or REST API (snake_case) + if (this.useLink) { + return this.status.detailsPath || this.status.details_path; + } + return null; }, icon() { - return this.status.icon; + if (this.status.icon) { + return `${this.status.icon}_borderless`; + } + return null; }, - badgeStyles() { + variant() { switch (this.status.icon) { case 'status_success': - return { - textColor: 'gl-text-green-700', - variant: 'success', - }; + return 'success'; case 'status_warning': - return { - textColor: 'gl-text-orange-700', - variant: 'warning', - }; + case 'status_pending': + return 'warning'; case 'status_failed': - return { - textColor: 'gl-text-red-700', - variant: 'danger', - }; + return 'danger'; case 'status_running': - return { - textColor: 'gl-text-blue-700', - variant: 'info', - }; - case 'status_pending': - return { - textColor: 'gl-text-orange-700', - variant: 'warning', - }; - case 'status_canceled': - return { - textColor: 'gl-text-gray-700', - variant: 'neutral', - }; - case 'status_manual': - return { - textColor: 'gl-text-gray-700', - variant: 'neutral', - }; + return 'info'; // default covers the styles for the remainder of CI // statuses that are not explicitly stated here default: - return { - textColor: 'gl-text-gray-600', - variant: 'muted', - }; + return 'neutral'; } }, }, @@ -131,30 +98,18 @@ export default { <gl-badge v-gl-tooltip class="ci-icon gl-p-2" + :class="`ci-icon-variant-${variant}`" + :variant="variant" :title="title" - :aria-label="title" - :href="detailsPath" + :aria-label="ariaLabel" + :href="href" size="md" - :variant="badgeStyles.variant" data-testid="ci-icon" @click="$emit('ciStatusBadgeClick')" > - <span - class="ci-icon-wrapper" - :class="[ - wrapperStyleClasses, - { - 'gl-display-inline-block gl-vertical-align-top': showStatusText, - }, - ]" - > - <gl-icon :name="icon" :aria-label="status.icon" /> </span - ><span - v-if="showStatusText" - class="gl-mx-2 gl-white-space-nowrap" - :class="badgeStyles.textColor" - data-testid="ci-icon-text" - >{{ status.text }}</span - > + <span class="ci-icon-gl-icon-wrapper"><gl-icon :name="icon" /></span + ><span v-if="showStatusText" class="gl-mx-2 gl-white-space-nowrap" data-testid="ci-icon-text">{{ + status.text + }}</span> </gl-badge> </template> |