debian-mirror-gitlab/app/assets/javascripts/diffs/components/commit_item.vue

234 lines
7.2 KiB
Vue
Raw Normal View History

2018-12-05 23:21:45 +05:30
<script>
2020-05-24 23:13:21 +05:30
import { mapActions } from 'vuex';
import { GlButtonGroup, GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2018-12-05 23:21:45 +05:30
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import Icon from '~/vue_shared/components/icon.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
2020-05-24 23:13:21 +05:30
2018-12-05 23:21:45 +05:30
import CommitPipelineStatus from '~/projects/tree/components/commit_pipeline_status_component.vue';
2020-05-24 23:13:21 +05:30
2019-02-15 15:39:39 +05:30
import initUserPopovers from '../../user_popovers';
2020-05-24 23:13:21 +05:30
import { setUrlParams } from '../../lib/utils/url_utility';
2018-12-05 23:21:45 +05:30
/**
* CommitItem
*
* -----------------------------------------------------------------
* WARNING: Please keep changes up-to-date with the following files:
* - `views/projects/commits/_commit.html.haml`
* -----------------------------------------------------------------
*
* This Component was cloned from a HAML view. For the time being they
* coexist, but there is an issue to remove the duplication.
2019-12-04 20:38:33 +05:30
* https://gitlab.com/gitlab-org/gitlab-foss/issues/51613
2018-12-05 23:21:45 +05:30
*
2020-05-24 23:13:21 +05:30
* EXCEPTION WARNING
* 1. The commit navigation buttons (next neighbor, previous neighbor)
* are not duplicated because:
* - We don't have the same data available on the Rails side (yet,
* without backend work)
* - This Vue component should always be what's used when in the
* context of an MR diff, so the HAML should never have any idea
* about navigating among commits.
2018-12-05 23:21:45 +05:30
*/
2020-05-24 23:13:21 +05:30
2018-12-05 23:21:45 +05:30
export default {
components: {
UserAvatarLink,
Icon,
ClipboardButton,
TimeAgoTooltip,
CommitPipelineStatus,
2020-05-24 23:13:21 +05:30
GlButtonGroup,
GlButton,
GlIcon,
},
directives: {
GlTooltip: GlTooltipDirective,
2018-12-05 23:21:45 +05:30
},
2020-05-24 23:13:21 +05:30
mixins: [glFeatureFlagsMixin()],
2018-12-05 23:21:45 +05:30
props: {
2020-10-24 23:57:45 +05:30
isSelectable: {
type: Boolean,
required: false,
default: false,
},
2018-12-05 23:21:45 +05:30
commit: {
type: Object,
required: true,
},
2020-10-24 23:57:45 +05:30
checked: {
type: Boolean,
required: false,
default: false,
},
collapsible: {
type: Boolean,
required: false,
default: true,
},
2018-12-05 23:21:45 +05:30
},
computed: {
2019-02-15 15:39:39 +05:30
author() {
return this.commit.author || {};
},
2018-12-05 23:21:45 +05:30
authorName() {
2019-02-15 15:39:39 +05:30
return this.author.name || this.commit.author_name;
},
authorClass() {
return this.author.name ? 'js-user-link' : '';
},
authorId() {
return this.author.id ? this.author.id : '';
2018-12-05 23:21:45 +05:30
},
authorUrl() {
2019-09-30 21:07:59 +05:30
// name: 'mailto:' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
2020-04-22 19:07:51 +05:30
// eslint-disable-next-line @gitlab/require-i18n-strings
2019-02-15 15:39:39 +05:30
return this.author.web_url || `mailto:${this.commit.author_email}`;
2018-12-05 23:21:45 +05:30
},
authorAvatar() {
2019-02-15 15:39:39 +05:30
return this.author.avatar_url || this.commit.author_gravatar_url;
2018-12-05 23:21:45 +05:30
},
2020-10-24 23:57:45 +05:30
commitDescription() {
// Strip the newline at the beginning
return this.commit.description_html.replace(/^&#x000A;/, '');
},
2020-05-24 23:13:21 +05:30
nextCommitUrl() {
return this.commit.next_commit_id
? setUrlParams({ commit_id: this.commit.next_commit_id })
: '';
},
previousCommitUrl() {
return this.commit.prev_commit_id
? setUrlParams({ commit_id: this.commit.prev_commit_id })
: '';
},
hasNeighborCommits() {
return this.commit.next_commit_id || this.commit.prev_commit_id;
},
2018-12-05 23:21:45 +05:30
},
2019-02-15 15:39:39 +05:30
created() {
this.$nextTick(() => {
initUserPopovers(this.$el.querySelectorAll('.js-user-link'));
});
},
2020-05-24 23:13:21 +05:30
methods: {
...mapActions('diffs', ['moveToNeighboringCommit']),
},
2018-12-05 23:21:45 +05:30
};
</script>
<template>
2020-10-24 23:57:45 +05:30
<li :class="{ 'js-toggle-container': collapsible }" class="commit flex-row">
<div class="d-flex align-items-center align-self-start">
<input
v-if="isSelectable"
class="mr-2"
type="checkbox"
:checked="checked"
@change="$emit('handleCheckboxChange', $event.target.checked)"
/>
<user-avatar-link
:link-href="authorUrl"
:img-src="authorAvatar"
:img-alt="authorName"
:img-size="40"
class="avatar-cell d-none d-sm-block"
/>
</div>
2018-12-05 23:21:45 +05:30
<div class="commit-detail flex-list">
<div class="commit-content qa-commit-content">
<a
2019-02-15 15:39:39 +05:30
:href="commit.commit_url"
2018-12-05 23:21:45 +05:30
class="commit-row-message item-title"
2019-02-15 15:39:39 +05:30
v-html="commit.title_html"
2018-12-05 23:21:45 +05:30
></a>
2019-09-30 21:07:59 +05:30
<span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span>
2018-12-05 23:21:45 +05:30
<button
2020-10-24 23:57:45 +05:30
v-if="commit.description_html && collapsible"
2018-12-05 23:21:45 +05:30
class="text-expander js-toggle-button"
type="button"
:aria-label="__('Toggle commit description')"
>
2019-02-15 15:39:39 +05:30
<icon :size="12" name="ellipsis_h" />
2018-12-05 23:21:45 +05:30
</button>
2019-09-04 21:01:54 +05:30
<div class="committer">
2019-01-03 12:48:30 +05:30
<a
:href="authorUrl"
2019-02-15 15:39:39 +05:30
:class="authorClass"
:data-user-id="authorId"
2019-01-03 12:48:30 +05:30
v-text="authorName"
></a>
{{ s__('CommitWidget|authored') }}
2019-02-15 15:39:39 +05:30
<time-ago-tooltip :time="commit.authored_date" />
2018-12-05 23:21:45 +05:30
</div>
<pre
2019-02-15 15:39:39 +05:30
v-if="commit.description_html"
2020-10-24 23:57:45 +05:30
:class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
class="commit-row-description gl-mb-3 text-dark"
v-html="commitDescription"
2018-12-05 23:21:45 +05:30
></pre>
</div>
<div class="commit-actions flex-row d-none d-sm-flex">
2019-02-15 15:39:39 +05:30
<div v-if="commit.signature_html" v-html="commit.signature_html"></div>
2018-12-05 23:21:45 +05:30
<commit-pipeline-status
2019-02-15 15:39:39 +05:30
v-if="commit.pipeline_status_path"
:endpoint="commit.pipeline_status_path"
2019-07-31 22:56:46 +05:30
class="d-inline-flex"
2018-12-05 23:21:45 +05:30
/>
<div class="commit-sha-group">
2019-07-31 22:56:46 +05:30
<div class="label label-monospace monospace" v-text="commit.short_id"></div>
2018-12-05 23:21:45 +05:30
<clipboard-button
:text="commit.id"
2019-12-21 20:55:43 +05:30
:title="__('Copy commit SHA')"
2018-12-05 23:21:45 +05:30
class="btn btn-default"
/>
</div>
2020-05-24 23:13:21 +05:30
<div
v-if="hasNeighborCommits && glFeatures.mrCommitNeighborNav"
class="commit-nav-buttons ml-3"
>
<gl-button-group>
<gl-button
:href="previousCommitUrl"
:disabled="!commit.prev_commit_id"
@click.prevent="moveToNeighboringCommit({ direction: 'previous' })"
>
<span
v-if="!commit.prev_commit_id"
v-gl-tooltip
class="h-100 w-100 position-absolute"
:title="__('You\'re at the first commit')"
></span>
<gl-icon name="chevron-left" />
{{ __('Prev') }}
</gl-button>
<gl-button
:href="nextCommitUrl"
:disabled="!commit.next_commit_id"
@click.prevent="moveToNeighboringCommit({ direction: 'next' })"
>
<span
v-if="!commit.next_commit_id"
v-gl-tooltip
class="h-100 w-100 position-absolute"
:title="__('You\'re at the last commit')"
></span>
{{ __('Next') }}
<gl-icon name="chevron-right" />
</gl-button>
</gl-button-group>
</div>
2018-12-05 23:21:45 +05:30
</div>
</div>
</li>
</template>