diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-25 15:09:24 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-09-25 15:09:24 +0300 |
commit | 7a3aca2b5b3bfdebbd7bb6353d5bdcdc422670da (patch) | |
tree | d3431811140c48c2ed31f2e8fdc90504f3bd4344 /app/assets/javascripts/repository | |
parent | 9c3a433b3176e895a23cf0f4b87411b44e264397 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/repository')
-rw-r--r-- | app/assets/javascripts/repository/components/commit_info.vue | 116 | ||||
-rw-r--r-- | app/assets/javascripts/repository/components/last_commit.vue | 151 |
2 files changed, 150 insertions, 117 deletions
diff --git a/app/assets/javascripts/repository/components/commit_info.vue b/app/assets/javascripts/repository/components/commit_info.vue new file mode 100644 index 00000000000..99ec5c78830 --- /dev/null +++ b/app/assets/javascripts/repository/components/commit_info.vue @@ -0,0 +1,116 @@ +<script> +import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui'; +import { __ } from '~/locale'; +import SafeHtml from '~/vue_shared/directives/safe_html'; +import defaultAvatarUrl from 'images/no_avatar.png'; +import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; +import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; +import getRefMixin from '../mixins/get_ref'; + +export default { + components: { + UserAvatarLink, + TimeagoTooltip, + GlButton, + GlLink, + UserAvatarImage, + }, + directives: { + GlTooltip: GlTooltipDirective, + SafeHtml, + }, + mixins: [getRefMixin], + props: { + commit: { + type: Object, + required: true, + }, + }, + data() { + return { showDescription: false }; + }, + computed: { + commitDescription() { + // Strip the newline at the beginning + return this.commit?.descriptionHtml?.replace(/^
/, ''); + }, + }, + methods: { + toggleShowDescription() { + this.showDescription = !this.showDescription; + }, + }, + defaultAvatarUrl, + safeHtmlConfig: { + ADD_TAGS: ['gl-emoji'], + }, + i18n: { + toggleCommitDescription: __('Toggle commit description'), + authored: __('authored'), + }, +}; +</script> + +<template> + <div class="well-segment commit gl-min-h-8 gl-p-5 gl-w-full gl-display-flex"> + <user-avatar-link + v-if="commit.author" + :link-href="commit.author.webPath" + :img-src="commit.author.avatarUrl" + :img-size="32" + class="gl-my-2 gl-mr-4" + /> + <user-avatar-image + v-else + class="gl-my-2 gl-mr-4" + :img-src="commit.authorGravatar || $options.defaultAvatarUrl" + :size="32" + /> + <div + class="commit-detail flex-list gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-grow-1 gl-min-w-0" + > + <div class="commit-content" data-qa-selector="commit_content"> + <gl-link + v-safe-html:[$options.safeHtmlConfig]="commit.titleHtml" + :href="commit.webPath" + :class="{ 'gl-font-style-italic': !commit.message }" + class="commit-row-message item-title" + /> + <gl-button + v-if="commit.descriptionHtml" + v-gl-tooltip + :class="{ open: showDescription }" + :title="$options.i18n.toggleCommitDescription" + :aria-label="$options.i18n.toggleCommitDescription" + :selected="showDescription" + class="text-expander gl-vertical-align-bottom!" + icon="ellipsis_h" + @click="toggleShowDescription" + /> + <div class="committer"> + <gl-link + v-if="commit.author" + :href="commit.author.webPath" + class="commit-author-link js-user-link" + > + {{ commit.author.name }}</gl-link + > + <template v-else> + {{ commit.authorName }} + </template> + {{ $options.i18n.authored }} + <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" /> + </div> + <pre + v-if="commitDescription" + v-safe-html:[$options.safeHtmlConfig]="commitDescription" + :class="{ 'gl-display-block!': showDescription }" + class="commit-row-description gl-mb-3 gl-white-space-pre-line" + ></pre> + </div> + <div class="gl-flex-grow-1"></div> + <slot></slot> + </div> + </div> +</template> diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue index 12edeeb0d2f..ff6acd5239d 100644 --- a/app/assets/javascripts/repository/components/last_commit.vue +++ b/app/assets/javascripts/repository/components/last_commit.vue @@ -1,32 +1,26 @@ <script> -import { GlTooltipDirective, GlLink, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlButtonGroup, GlLoadingIcon } from '@gitlab/ui'; import SafeHtml from '~/vue_shared/directives/safe_html'; -import defaultAvatarUrl from 'images/no_avatar.png'; import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql'; import { sprintf, s__ } from '~/locale'; import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; -import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; -import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; -import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; import SignatureBadge from '~/commit/components/signature_badge.vue'; import getRefMixin from '../mixins/get_ref'; import projectPathQuery from '../queries/project_path.query.graphql'; import eventHub from '../event_hub'; import { FORK_UPDATED_EVENT } from '../constants'; +import CommitInfo from './commit_info.vue'; export default { components: { - UserAvatarLink, - TimeagoTooltip, + CommitInfo, ClipboardButton, - GlButton, - GlButtonGroup, - GlLink, - GlLoadingIcon, - UserAvatarImage, SignatureBadge, CiBadgeLink, + GlButtonGroup, + GlButton, + GlLoadingIcon, }, directives: { GlTooltip: GlTooltipDirective, @@ -80,13 +74,12 @@ export default { return { projectPath: '', commit: null, - showDescription: false, }; }, computed: { statusTitle() { return sprintf(s__('PipelineStatusTooltip|Pipeline: %{ciStatus}'), { - ciStatus: this.commit.pipeline.detailedStatus.text, + ciStatus: this.commit?.pipeline?.detailedStatus?.text, }); }, isLoading() { @@ -95,10 +88,6 @@ export default { showCommitId() { return this.commit?.sha?.substr(0, 8); }, - commitDescription() { - // Strip the newline at the beginning - return this.commit?.descriptionHtml?.replace(/^
/, ''); - }, }, watch: { currentPath() { @@ -112,112 +101,40 @@ export default { eventHub.$off(FORK_UPDATED_EVENT, this.refetchLastCommit); }, methods: { - toggleShowDescription() { - this.showDescription = !this.showDescription; - }, refetchLastCommit() { this.$apollo.queries.commit.refetch(); }, }, - defaultAvatarUrl, - safeHtmlConfig: { - ADD_TAGS: ['gl-emoji'], - }, }; </script> <template> - <div class="well-segment commit gl-p-5 gl-w-full gl-display-flex"> - <gl-loading-icon v-if="isLoading" size="lg" color="dark" class="m-auto" /> - <template v-else-if="commit"> - <user-avatar-link - v-if="commit.author" - :link-href="commit.author.webPath" - :img-src="commit.author.avatarUrl" - :img-size="32" - class="gl-my-2 gl-mr-4" - /> - <user-avatar-image - v-else - class="gl-my-2 gl-mr-4" - :img-src="commit.authorGravatar || $options.defaultAvatarUrl" - :size="32" - /> - <div - class="commit-detail flex-list gl-display-flex gl-justify-content-space-between gl-align-items-center gl-flex-grow-1 gl-min-w-0" - > - <div class="commit-content" data-qa-selector="commit_content"> - <gl-link - v-safe-html:[$options.safeHtmlConfig]="commit.titleHtml" - :href="commit.webPath" - :class="{ 'font-italic': !commit.message }" - class="commit-row-message item-title" - /> - <gl-button - v-if="commit.descriptionHtml" - v-gl-tooltip - :class="{ open: showDescription }" - :title="__('Toggle commit description')" - :aria-label="__('Toggle commit description')" - :selected="showDescription" - class="text-expander gl-vertical-align-bottom!" - icon="ellipsis_h" - @click="toggleShowDescription" - /> - <div class="committer"> - <gl-link - v-if="commit.author" - :href="commit.author.webPath" - class="commit-author-link js-user-link" - > - {{ commit.author.name }}</gl-link - > - <template v-else> - {{ commit.authorName }} - </template> - {{ s__('LastCommit|authored') }} - <timeago-tooltip :time="commit.authoredDate" tooltip-placement="bottom" /> - </div> - <pre - v-if="commitDescription" - v-safe-html:[$options.safeHtmlConfig]="commitDescription" - :class="{ 'd-block': showDescription }" - class="commit-row-description gl-mb-3 gl-white-space-pre-line" - ></pre> - </div> - <div class="gl-flex-grow-1"></div> - <div - class="commit-actions gl-display-flex gl-flex-align gl-align-items-center gl-flex-direction-row" - > - <signature-badge v-if="commit.signature" :signature="commit.signature" /> - <div v-if="commit.pipeline" class="ci-status-link"> - <ci-badge-link - :status="commit.pipeline.detailedStatus" - :details-path="commit.pipeline.detailedStatus.detailsPath" - :aria-label="statusTitle" - size="lg" - :show-text="false" - class="js-commit-pipeline" - /> - </div> - <gl-button-group class="gl-ml-4 js-commit-sha-group"> - <gl-button label class="gl-font-monospace" data-testid="last-commit-id-label">{{ - showCommitId - }}</gl-button> - <clipboard-button - :text="commit.sha" - :title="__('Copy commit SHA')" - class="input-group-text" - /> - </gl-button-group> - </div> + <gl-loading-icon v-if="isLoading" size="lg" color="dark" class="m-auto" /> + <commit-info v-else-if="commit" :commit="commit"> + <div + class="commit-actions gl-display-flex gl-flex-align gl-align-items-center gl-flex-direction-row" + > + <signature-badge v-if="commit.signature" :signature="commit.signature" /> + <div v-if="commit.pipeline" class="ci-status-link"> + <ci-badge-link + :status="commit.pipeline.detailedStatus" + :details-path="commit.pipeline.detailedStatus.detailsPath" + :aria-label="statusTitle" + size="lg" + :show-text="false" + class="js-commit-pipeline" + /> </div> - </template> - </div> + <gl-button-group class="gl-ml-4 js-commit-sha-group"> + <gl-button label class="gl-font-monospace" data-testid="last-commit-id-label">{{ + showCommitId + }}</gl-button> + <clipboard-button + :text="commit.sha" + :title="__('Copy commit SHA')" + class="input-group-text" + /> + </gl-button-group> + </div> + </commit-info> </template> - -<style scoped> -.commit { - min-height: 4.75rem; -} -</style> |