diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2019-06-20 13:14:34 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2019-06-20 13:14:34 +0000 |
commit | 429f6b629b691945d8cd187b79e00cfa7eed6fa2 (patch) | |
tree | 9262c5b483ce1d5d304fc58d7002942fd1e800b4 /app/assets/javascripts/repository | |
parent | 788690304a495aa6c4d3e2fa163753f28fbdb82f (diff) | |
parent | bf6b70662bb9512e7d0e179358c174ad59c49156 (diff) | |
download | gitlab-ce-429f6b629b691945d8cd187b79e00cfa7eed6fa2.tar.gz |
Merge branch 'last-commit-repo-widget' into 'master'
Render last commit widget with Vue
Closes #62766
See merge request gitlab-org/gitlab-ce!29419
Diffstat (limited to 'app/assets/javascripts/repository')
3 files changed, 193 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue new file mode 100644 index 00000000000..b1565699432 --- /dev/null +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -0,0 +1,145 @@ +<script> +import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; +import { sprintf, s__ } from '~/locale'; +import Icon from '../../vue_shared/components/icon.vue'; +import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; +import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue'; +import CommitPipelineStatus from '../../projects/tree/components/commit_pipeline_status_component.vue'; +import CiIcon from '../../vue_shared/components/ci_icon.vue'; +import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; +import getRefMixin from '../mixins/get_ref'; +import getProjectPath from '../queries/getProjectPath.graphql'; +import pathLastCommit from '../queries/pathLastCommit.query.graphql'; + +export default { + components: { + Icon, + UserAvatarLink, + TimeagoTooltip, + CommitPipelineStatus, + ClipboardButton, + CiIcon, + GlLink, + GlButton, + }, + directives: { + GlTooltip: GlTooltipDirective, + }, + mixins: [getRefMixin], + apollo: { + projectPath: { + query: getProjectPath, + }, + commit: { + query: pathLastCommit, + variables() { + return { + projectPath: this.projectPath, + ref: this.ref, + path: this.currentPath.replace(/^\//, ''), + }; + }, + update: data => data.project.repository.tree.commit, + }, + }, + props: { + currentPath: { + type: String, + required: false, + default: '', + }, + }, + data() { + return { + projectPath: '', + commit: {}, + showDescription: false, + }; + }, + computed: { + statusTitle() { + return sprintf(s__('Commits|Commit: %{commitText}'), { + commitText: this.commit.pipeline.detailedStatus.text, + }); + }, + isLoading() { + return this.$apollo.queries.commit.loading; + }, + showCommitId() { + return this.commit.id.substr(0, 8); + }, + }, + methods: { + toggleShowDescription() { + this.showDescription = !this.showDescription; + }, + }, +}; +</script> + +<template> + <div v-if="!isLoading" class="info-well d-none d-sm-flex project-last-commit commit p-3"> + <user-avatar-link + v-if="commit.author" + :link-href="commit.author.webUrl" + :img-src="commit.author.avatarUrl" + :img-size="40" + class="avatar-cell" + /> + <div class="commit-detail flex-list"> + <div class="commit-content qa-commit-content"> + <gl-link :href="commit.webUrl" class="commit-row-message item-title"> + {{ commit.title }} + </gl-link> + <gl-button + v-if="commit.description" + :class="{ open: showDescription }" + :aria-label="__('Show commit description')" + class="text-expander" + @click="toggleShowDescription" + > + <icon name="ellipsis_h" /> + </gl-button> + <div class="committer"> + <gl-link + v-if="commit.author" + :href="commit.author.webUrl" + class="commit-author-link js-user-link" + > + {{ commit.author.name }} + </gl-link> + authored + <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" /> + </div> + <pre + v-if="commit.description" + v-show="showDescription" + class="commit-row-description append-bottom-8" + > + {{ commit.description }} + </pre> + </div> + <div class="commit-actions flex-row"> + <gl-link + v-if="commit.pipeline" + v-gl-tooltip + :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 class="commit-sha-group d-flex"> + <div class="label label-monospace monospace"> + {{ showCommitId }} + </div> + <clipboard-button + :text="commit.id" + :title="__('Copy commit SHA to clipboard')" + tooltip-placement="bottom" + /> + </div> + </div> + </div> + </div> +</template> diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js index 52f53be045b..d9216e88676 100644 --- a/app/assets/javascripts/repository/index.js +++ b/app/assets/javascripts/repository/index.js @@ -2,6 +2,7 @@ import Vue from 'vue'; import createRouter from './router'; import App from './components/app.vue'; import Breadcrumbs from './components/breadcrumbs.vue'; +import LastCommit from './components/last_commit.vue'; import apolloProvider from './graphql'; import { setTitle } from './utils/title'; @@ -48,6 +49,24 @@ export default function setupVueRepositoryList() { }, }); + const commitEl = document.getElementById('js-last-commit'); + + if (commitEl) { + // eslint-disable-next-line no-new + new Vue({ + el: commitEl, + router, + apolloProvider, + render(h) { + return h(LastCommit, { + props: { + currentPath: this.$route.params.pathMatch, + }, + }); + }, + }); + } + return new Vue({ el, router, diff --git a/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql b/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql new file mode 100644 index 00000000000..90901f54d54 --- /dev/null +++ b/app/assets/javascripts/repository/queries/pathLastCommit.query.graphql @@ -0,0 +1,29 @@ +query pathLastCommit($projectPath: ID!, $path: String, $ref: String!) { + project(fullPath: $projectPath) { + repository { + tree(path: $path, ref: $ref) { + commit { + id + title + message + webUrl + authoredDate + author { + name + avatarUrl + webUrl + } + pipeline { + detailedStatus { + detailsPath + icon + tooltip + text + group + } + } + } + } + } + } +} |