debian-mirror-gitlab/app/assets/javascripts/repository/components/last_commit.vue

201 lines
5.7 KiB
Vue
Raw Normal View History

2019-09-30 21:07:59 +05:30
<script>
2021-01-03 14:25:43 +05:30
import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui';
2019-12-26 22:10:19 +05:30
import defaultAvatarUrl from 'images/no_avatar.png';
2021-01-03 14:25:43 +05:30
import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
2019-09-30 21:07:59 +05:30
import { sprintf, s__ } from '~/locale';
import CiIcon from '../../vue_shared/components/ci_icon.vue';
import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
2021-03-11 19:13:27 +05:30
import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
2019-09-30 21:07:59 +05:30
import getRefMixin from '../mixins/get_ref';
2020-10-24 23:57:45 +05:30
import projectPathQuery from '../queries/project_path.query.graphql';
2019-09-30 21:07:59 +05:30
export default {
components: {
UserAvatarLink,
TimeagoTooltip,
ClipboardButton,
CiIcon,
2021-01-03 14:25:43 +05:30
GlButton,
GlButtonGroup,
2019-09-30 21:07:59 +05:30
GlLink,
GlLoadingIcon,
},
directives: {
GlTooltip: GlTooltipDirective,
},
mixins: [getRefMixin],
apollo: {
projectPath: {
2020-10-24 23:57:45 +05:30
query: projectPathQuery,
2019-09-30 21:07:59 +05:30
},
commit: {
2020-10-24 23:57:45 +05:30
query: pathLastCommitQuery,
2019-09-30 21:07:59 +05:30
variables() {
return {
projectPath: this.projectPath,
ref: this.ref,
path: this.currentPath.replace(/^\//, ''),
};
},
2021-03-08 18:12:59 +05:30
update: (data) => {
2020-03-13 15:44:24 +05:30
const pipelines = data.project?.repository?.tree?.lastCommit?.pipelines?.edges;
2019-12-26 22:10:19 +05:30
return {
2020-03-13 15:44:24 +05:30
...data.project?.repository?.tree?.lastCommit,
pipeline: pipelines?.length && pipelines[0].node,
2019-12-26 22:10:19 +05:30
};
},
2019-09-30 21:07:59 +05:30
context: {
isSingleRequest: true,
},
2020-03-13 15:44:24 +05:30
error(error) {
throw error;
},
2019-09-30 21:07:59 +05:30
},
},
props: {
currentPath: {
type: String,
required: false,
default: '',
},
},
data() {
return {
projectPath: '',
2020-03-13 15:44:24 +05:30
commit: null,
2019-09-30 21:07:59 +05:30
showDescription: false,
};
},
computed: {
statusTitle() {
2020-04-08 14:13:33 +05:30
return sprintf(s__('PipelineStatusTooltip|Pipeline: %{ciStatus}'), {
ciStatus: this.commit.pipeline.detailedStatus.text,
2019-09-30 21:07:59 +05:30
});
},
isLoading() {
return this.$apollo.queries.commit.loading;
},
showCommitId() {
2020-03-13 15:44:24 +05:30
return this.commit?.sha?.substr(0, 8);
},
2021-03-08 18:12:59 +05:30
commitDescription() {
// Strip the newline at the beginning
return this.commit?.descriptionHtml?.replace(/^&#x000A;/, '');
},
2020-03-13 15:44:24 +05:30
},
watch: {
currentPath() {
this.commit = null;
2019-09-30 21:07:59 +05:30
},
},
methods: {
toggleShowDescription() {
this.showDescription = !this.showDescription;
},
},
2019-12-26 22:10:19 +05:30
defaultAvatarUrl,
2019-09-30 21:07:59 +05:30
};
</script>
<template>
<div class="info-well d-none d-sm-flex project-last-commit commit p-3">
2020-03-13 15:44:24 +05:30
<gl-loading-icon v-if="isLoading" size="md" color="dark" class="m-auto" />
<template v-else-if="commit">
2019-09-30 21:07:59 +05:30
<user-avatar-link
v-if="commit.author"
2020-10-24 23:57:45 +05:30
:link-href="commit.author.webPath"
2019-09-30 21:07:59 +05:30
:img-src="commit.author.avatarUrl"
:img-size="40"
class="avatar-cell"
/>
2019-12-26 22:10:19 +05:30
<span v-else class="avatar-cell user-avatar-link">
2020-03-13 15:44:24 +05:30
<img
:src="commit.authorGravatar || $options.defaultAvatarUrl"
width="40"
height="40"
class="avatar s40"
/>
2019-12-26 22:10:19 +05:30
</span>
2019-09-30 21:07:59 +05:30
<div class="commit-detail flex-list">
<div class="commit-content qa-commit-content">
2020-03-13 15:44:24 +05:30
<gl-link
2020-10-24 23:57:45 +05:30
:href="commit.webPath"
2020-03-13 15:44:24 +05:30
:class="{ 'font-italic': !commit.message }"
class="commit-row-message item-title"
2021-11-11 11:23:49 +05:30
v-html="commit.titleHtml /* eslint-disable-line vue/no-v-html */"
2020-05-24 23:13:21 +05:30
/>
2021-01-03 14:25:43 +05:30
<gl-button
2020-10-24 23:57:45 +05:30
v-if="commit.descriptionHtml"
2019-09-30 21:07:59 +05:30
:class="{ open: showDescription }"
:aria-label="__('Show commit description')"
2021-01-03 14:25:43 +05:30
class="text-expander gl-vertical-align-bottom!"
icon="ellipsis_h"
2019-09-30 21:07:59 +05:30
@click="toggleShowDescription"
2021-01-03 14:25:43 +05:30
/>
2019-09-30 21:07:59 +05:30
<div class="committer">
<gl-link
v-if="commit.author"
2020-10-24 23:57:45 +05:30
:href="commit.author.webPath"
2019-09-30 21:07:59 +05:30
class="commit-author-link js-user-link"
>
2021-01-29 00:20:46 +05:30
{{ commit.author.name }}</gl-link
>
2019-12-26 22:10:19 +05:30
<template v-else>
{{ commit.authorName }}
</template>
2019-12-21 20:55:43 +05:30
{{ s__('LastCommit|authored') }}
2019-09-30 21:07:59 +05:30
<timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" />
</div>
<pre
2021-03-08 18:12:59 +05:30
v-if="commitDescription"
2019-12-26 22:10:19 +05:30
:class="{ 'd-block': showDescription }"
2020-06-23 00:09:42 +05:30
class="commit-row-description gl-mb-3"
2021-11-11 11:23:49 +05:30
v-html="commitDescription /* eslint-disable-line vue/no-v-html */"
2020-10-24 23:57:45 +05:30
></pre>
2019-09-30 21:07:59 +05:30
</div>
<div class="commit-actions flex-row">
2021-11-11 11:23:49 +05:30
<div
v-if="commit.signatureHtml"
v-html="commit.signatureHtml /* eslint-disable-line vue/no-v-html */"
></div>
2019-12-26 22:10:19 +05:30
<div v-if="commit.pipeline" class="ci-status-link">
<gl-link
v-gl-tooltip.left
:href="commit.pipeline.detailedStatus.detailsPath"
:title="statusTitle"
class="js-commit-pipeline"
>
<ci-icon
:status="commit.pipeline.detailedStatus"
:size="24"
:aria-label="statusTitle"
/>
</gl-link>
</div>
2021-01-03 14:25:43 +05:30
<gl-button-group class="gl-ml-4 js-commit-sha-group">
<gl-button
label
class="gl-font-monospace"
data-testid="last-commit-id-label"
v-text="showCommitId"
/>
2019-09-30 21:07:59 +05:30
<clipboard-button
:text="commit.sha"
2019-12-21 20:55:43 +05:30
:title="__('Copy commit SHA')"
2021-01-03 14:25:43 +05:30
class="input-group-text"
2019-09-30 21:07:59 +05:30
/>
2021-01-03 14:25:43 +05:30
</gl-button-group>
2019-09-30 21:07:59 +05:30
</div>
</div>
</template>
</div>
</template>
2019-12-26 22:10:19 +05:30
<style scoped>
.commit {
min-height: 4.75rem;
}
</style>