diff options
Diffstat (limited to 'app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue')
| -rw-r--r-- | app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue | 167 |
1 files changed, 160 insertions, 7 deletions
diff --git a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue index e2f30d5a8e6..52da4d01468 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_list/pipeline_url.vue @@ -1,15 +1,19 @@ <script> -import { GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui'; +import { GlIcon, GlLink, GlPopover, GlSprintf, GlTooltipDirective, GlBadge } from '@gitlab/ui'; +import { __, sprintf } from '~/locale'; import { helpPagePath } from '~/helpers/help_page_helper'; import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; -import { SCHEDULE_ORIGIN } from '../../constants'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; +import { SCHEDULE_ORIGIN, ICONS } from '../../constants'; export default { components: { + GlIcon, GlLink, GlPopover, GlSprintf, GlBadge, + TooltipOnTruncate, }, directives: { GlTooltip: GlTooltipDirective, @@ -33,11 +37,12 @@ export default { type: String, required: true, }, + viewType: { + type: String, + required: true, + }, }, computed: { - user() { - return this.pipeline.user; - }, isScheduled() { return this.pipeline.source === SCHEDULE_ORIGIN; }, @@ -53,12 +58,160 @@ export default { autoDevopsHelpPath() { return helpPagePath('topics/autodevops/index.md'); }, + mergeRequestRef() { + return this.pipeline?.merge_request; + }, + commitRef() { + return this.pipeline?.ref; + }, + commitTag() { + return this.commitRef?.tag; + }, + commitUrl() { + return this.pipeline?.commit?.commit_path; + }, + commitShortSha() { + return this.pipeline?.commit?.short_id; + }, + refUrl() { + return this.commitRef?.ref_url || this.commitRef?.path; + }, + tooltipTitle() { + return this.mergeRequestRef?.title || this.commitRef?.name; + }, + commitAuthor() { + let commitAuthorInformation; + const pipelineCommit = this.pipeline?.commit; + const pipelineCommitAuthor = pipelineCommit?.author; + + if (!pipelineCommit) { + return null; + } + + // 1. person who is an author of a commit might be a GitLab user + if (pipelineCommitAuthor) { + // 2. if person who is an author of a commit is a GitLab user + // they can have a GitLab avatar + if (pipelineCommitAuthor?.avatar_url) { + commitAuthorInformation = pipelineCommitAuthor; + + // 3. If GitLab user does not have avatar, they might have a Gravatar + } else if (pipelineCommit.author_gravatar_url) { + commitAuthorInformation = { + ...pipelineCommitAuthor, + avatar_url: pipelineCommit.author_gravatar_url, + }; + } + // 4. If committer is not a GitLab User, they can have a Gravatar + } else { + commitAuthorInformation = { + avatar_url: pipelineCommit.author_gravatar_url, + path: `mailto:${pipelineCommit.author_email}`, + username: pipelineCommit.author_name, + }; + } + + return commitAuthorInformation; + }, + commitIcon() { + let name = ''; + + if (this.commitTag) { + name = ICONS.TAG; + } else if (this.mergeRequestRef) { + name = ICONS.MR; + } else { + name = ICONS.BRANCH; + } + + return name; + }, + commitIconTooltipTitle() { + switch (this.commitIcon) { + case ICONS.TAG: + return __('Tag'); + case ICONS.MR: + return __('Merge Request'); + default: + return __('Branch'); + } + }, + commitTitleText() { + return this.pipeline?.commit?.title || __("Can't find HEAD commit for this branch"); + }, + hasAuthor() { + return ( + this.commitAuthor?.avatar_url && this.commitAuthor?.path && this.commitAuthor?.username + ); + }, + userImageAltDescription() { + return this.commitAuthor?.username + ? sprintf(__("%{username}'s avatar"), { username: this.commitAuthor.username }) + : null; + }, + rearrangePipelinesTable() { + return this.glFeatures?.rearrangePipelinesTable; + }, }, }; </script> <template> <div class="pipeline-tags" data-testid="pipeline-url-table-cell"> + <template v-if="rearrangePipelinesTable"> + <div class="commit-title gl-mb-2" data-testid="commit-title-container"> + <span class="gl-display-flex"> + <tooltip-on-truncate :title="commitTitleText" class="flex-truncate-child gl-flex-grow-1"> + <gl-link + :href="pipeline.path" + class="commit-row-message gl-text-blue-600!" + data-testid="commit-title" + data-qa-selector="pipeline_url_link" + >{{ commitTitleText }}</gl-link + > + </tooltip-on-truncate> + </span> + </div> + <div class="gl-mb-2"> + <span class="gl-font-weight-bold gl-text-gray-500" data-testid="pipeline-identifier"> + #{{ pipeline[pipelineKey] }} + </span> + <!--Commit row--> + <div class="icon-container gl-display-inline-block"> + <gl-icon + v-gl-tooltip + :name="commitIcon" + :title="commitIconTooltipTitle" + data-testid="commit-icon-type" + /> + </div> + <tooltip-on-truncate :title="tooltipTitle" truncate-target="child" placement="top"> + <gl-link + v-if="mergeRequestRef" + :href="mergeRequestRef.path" + class="ref-name" + data-testid="merge-request-ref" + >{{ mergeRequestRef.iid }}</gl-link + > + <gl-link v-else :href="refUrl" class="ref-name" data-testid="commit-ref-name">{{ + commitRef.name + }}</gl-link> + </tooltip-on-truncate> + <gl-icon + v-gl-tooltip + name="commit" + class="commit-icon" + :title="__('Commit')" + data-testid="commit-icon" + /> + + <gl-link :href="commitUrl" class="commit-sha mr-0" data-testid="commit-short-sha">{{ + commitShortSha + }}</gl-link> + <!--End of commit row--> + </div> + </template> <gl-link + v-if="!rearrangePipelinesTable" :href="pipeline.path" class="gl-text-decoration-underline" data-testid="pipeline-url-link" @@ -66,7 +219,7 @@ export default { > #{{ pipeline[pipelineKey] }} </gl-link> - <div class="label-container"> + <div class="label-container gl-mt-1"> <gl-badge v-if="isScheduled" v-gl-tooltip @@ -163,7 +316,7 @@ export default { v-gl-tooltip :title=" __( - 'Pipelines for merge requests are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for Pipelines for Merged Results.', + 'Merge request pipelines are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for merge request pipelines.', ) " variant="info" |