debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/commit.vue

191 lines
5 KiB
Vue
Raw Normal View History

2017-09-10 17:25:29 +05:30
<script>
2020-11-24 15:15:51 +05:30
import { GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { isString, isEmpty } from 'lodash';
2019-09-30 21:07:59 +05:30
import { __, sprintf } from '~/locale';
2019-09-04 21:01:54 +05:30
import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
2018-10-15 14:42:47 +05:30
import UserAvatarLink from './user_avatar/user_avatar_link.vue';
2017-09-10 17:25:29 +05:30
2018-10-15 14:42:47 +05:30
export default {
directives: {
2019-02-15 15:39:39 +05:30
GlTooltip: GlTooltipDirective,
2018-10-15 14:42:47 +05:30
},
components: {
UserAvatarLink,
2020-11-24 15:15:51 +05:30
GlIcon,
2019-07-07 11:18:12 +05:30
GlLink,
2019-09-04 21:01:54 +05:30
TooltipOnTruncate,
2018-10-15 14:42:47 +05:30
},
props: {
/**
2018-12-13 13:39:08 +05:30
* Indicates the existence of a tag.
2020-11-24 15:15:51 +05:30
* Used to render the correct GlIcon, if true will render `tag` GlIcon,
2018-10-15 14:42:47 +05:30
* if false will render a svg sprite fork icon
*/
tag: {
type: Boolean,
required: false,
default: false,
2018-03-17 18:26:18 +05:30
},
2018-10-15 14:42:47 +05:30
/**
* If provided is used to render the branch name and url.
* Should contain the following properties:
* name
* ref_url
*/
commitRef: {
type: Object,
required: false,
default: () => ({}),
},
2019-07-07 11:18:12 +05:30
/**
* If provided, is used the render the MR IID and link
* in place of the branch name. Must contains the
* following properties:
* - iid (number)
* - path (non-empty string)
*
* May optionally contain the following properties:
* - title (string): used in a tooltip if provided
*
* Any additional properties are ignored.
*/
mergeRequestRef: {
type: Object,
required: false,
default: undefined,
2021-03-08 18:12:59 +05:30
validator: (ref) =>
2020-04-22 19:07:51 +05:30
ref === undefined || (Number.isFinite(ref.iid) && isString(ref.path) && !isEmpty(ref.path)),
2019-07-07 11:18:12 +05:30
},
2018-10-15 14:42:47 +05:30
/**
* Used to link to the commit sha.
*/
commitUrl: {
type: String,
required: false,
default: '',
2018-03-17 18:26:18 +05:30
},
2017-09-10 17:25:29 +05:30
2018-10-15 14:42:47 +05:30
/**
* Used to show the commit short sha that links to the commit url.
*/
shortSha: {
type: String,
required: false,
default: '',
},
/**
* If provided shows the commit tile.
*/
title: {
type: String,
required: false,
default: '',
},
/**
* If provided renders information about the author of the commit.
* When provided should include:
* `avatar_url` to render the avatar icon
* `web_url` to link to user profile
* `username` to render alt and title tags
*/
author: {
type: Object,
required: false,
default: () => ({}),
},
2019-07-07 11:18:12 +05:30
/**
* Indicates whether or not to show the branch/MR ref info
*/
showRefInfo: {
2018-10-15 14:42:47 +05:30
type: Boolean,
required: false,
default: true,
2017-09-10 17:25:29 +05:30
},
2018-10-15 14:42:47 +05:30
},
computed: {
/**
2021-03-08 18:12:59 +05:30
* Determines if we should render the ref info section based
2018-10-15 14:42:47 +05:30
*/
2019-07-07 11:18:12 +05:30
shouldShowRefInfo() {
return this.showRefInfo && (this.commitRef || this.mergeRequestRef);
2017-09-10 17:25:29 +05:30
},
2019-07-07 11:18:12 +05:30
2018-10-15 14:42:47 +05:30
/**
* Used to verify if all the properties needed to render the commit
* author section were provided.
*
* @returns {Boolean}
*/
hasAuthor() {
return this.author && this.author.avatar_url && this.author.path && this.author.username;
2017-09-10 17:25:29 +05:30
},
2018-10-15 14:42:47 +05:30
/**
* If information about the author is provided will return a string
* to be rendered as the alt attribute of the img tag.
*
* @returns {String}
*/
userImageAltDescription() {
2019-09-30 21:07:59 +05:30
return this.author && this.author.username
? sprintf(__("%{username}'s avatar"), { username: this.author.username })
: null;
2018-10-15 14:42:47 +05:30
},
2021-03-11 19:13:27 +05:30
refUrl() {
return this.commitRef.ref_url || this.commitRef.path;
},
2018-10-15 14:42:47 +05:30
},
};
2017-09-10 17:25:29 +05:30
</script>
<template>
2019-07-31 22:56:46 +05:30
<div class="branch-commit cgray">
2019-07-07 11:18:12 +05:30
<template v-if="shouldShowRefInfo">
2021-01-03 14:25:43 +05:30
<div class="icon-container gl-display-inline-block">
2020-11-24 15:15:51 +05:30
<gl-icon v-if="tag" name="tag" />
<gl-icon v-else-if="mergeRequestRef" name="git-merge" />
<gl-icon v-else name="branch" />
2018-03-17 18:26:18 +05:30
</div>
2017-09-10 17:25:29 +05:30
2019-07-07 11:18:12 +05:30
<gl-link
v-if="mergeRequestRef"
v-gl-tooltip
:href="mergeRequestRef.path"
:title="mergeRequestRef.title"
class="ref-name"
2019-10-12 21:52:04 +05:30
>{{ mergeRequestRef.iid }}</gl-link
2019-07-07 11:18:12 +05:30
>
<gl-link
v-else
v-gl-tooltip
2021-03-11 19:13:27 +05:30
:href="refUrl"
2019-07-07 11:18:12 +05:30
:title="commitRef.name"
class="ref-name"
2021-03-11 19:13:27 +05:30
data-testid="ref-name"
2019-10-12 21:52:04 +05:30
>{{ commitRef.name }}</gl-link
2019-07-07 11:18:12 +05:30
>
2018-03-17 18:26:18 +05:30
</template>
2020-11-24 15:15:51 +05:30
<gl-icon name="commit" class="commit-icon js-commit-icon" />
2017-09-10 17:25:29 +05:30
2019-10-12 21:52:04 +05:30
<gl-link :href="commitUrl" class="commit-sha mr-0">{{ shortSha }}</gl-link>
2017-09-10 17:25:29 +05:30
2019-10-12 21:52:04 +05:30
<div class="commit-title">
<span v-if="title" class="flex-truncate-parent">
2017-09-10 17:25:29 +05:30
<user-avatar-link
v-if="hasAuthor"
:link-href="author.path"
:img-src="author.avatar_url"
:img-alt="userImageAltDescription"
:tooltip-text="author.username"
2019-10-12 21:52:04 +05:30
class="avatar-image-container text-decoration-none"
2017-09-10 17:25:29 +05:30
/>
2019-10-12 21:52:04 +05:30
<tooltip-on-truncate :title="title" class="flex-truncate-child">
<gl-link :href="commitUrl" class="commit-row-message cgray">{{ title }}</gl-link>
</tooltip-on-truncate>
</span>
2019-09-30 21:07:59 +05:30
<span v-else>{{ __("Can't find HEAD commit for this branch") }}</span>
2017-09-10 17:25:29 +05:30
</div>
</div>
</template>