2017-05-26 17:31:16 +00:00
|
|
|
<script>
|
2018-11-16 19:29:11 +00:00
|
|
|
import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
|
2018-04-19 15:07:11 +00:00
|
|
|
import CiIconBadge from './ci_badge_link.vue';
|
|
|
|
import TimeagoTooltip from './time_ago_tooltip.vue';
|
|
|
|
import UserAvatarImage from './user_avatar/user_avatar_image.vue';
|
2018-11-12 21:50:35 +00:00
|
|
|
import LoadingButton from '~/vue_shared/components/loading_button.vue';
|
2018-01-08 20:01:49 +00:00
|
|
|
|
2018-04-19 15:07:11 +00:00
|
|
|
/**
|
|
|
|
* Renders header component for job and pipeline page based on UI mockups
|
|
|
|
*
|
|
|
|
* Used in:
|
|
|
|
* - job show page
|
|
|
|
* - pipeline show page
|
|
|
|
*/
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
CiIconBadge,
|
|
|
|
TimeagoTooltip,
|
|
|
|
UserAvatarImage,
|
2018-11-12 21:50:35 +00:00
|
|
|
GlLink,
|
|
|
|
GlButton,
|
|
|
|
LoadingButton,
|
2018-04-19 15:07:11 +00:00
|
|
|
},
|
|
|
|
directives: {
|
2018-11-12 21:50:35 +00:00
|
|
|
GlTooltip: GlTooltipDirective,
|
2018-04-19 15:07:11 +00:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
status: {
|
|
|
|
type: Object,
|
|
|
|
required: true,
|
2017-05-26 17:31:16 +00:00
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
itemName: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
2017-05-26 17:31:16 +00:00
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
itemId: {
|
|
|
|
type: Number,
|
|
|
|
required: true,
|
2017-06-12 09:20:19 +00:00
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
time: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
user: {
|
|
|
|
type: Object,
|
|
|
|
required: false,
|
|
|
|
default: () => ({}),
|
|
|
|
},
|
|
|
|
actions: {
|
|
|
|
type: Array,
|
|
|
|
required: false,
|
|
|
|
default: () => [],
|
|
|
|
},
|
|
|
|
hasSidebarButton: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: false,
|
|
|
|
},
|
|
|
|
shouldRenderTriggeredLabel: {
|
|
|
|
type: Boolean,
|
|
|
|
required: false,
|
|
|
|
default: true,
|
|
|
|
},
|
|
|
|
},
|
2017-05-26 17:31:16 +00:00
|
|
|
|
2018-04-19 15:07:11 +00:00
|
|
|
computed: {
|
|
|
|
userAvatarAltText() {
|
|
|
|
return `${this.user.name}'s avatar`;
|
2017-05-26 17:31:16 +00:00
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
},
|
2017-05-26 17:31:16 +00:00
|
|
|
|
2018-04-19 15:07:11 +00:00
|
|
|
methods: {
|
|
|
|
onClickAction(action) {
|
|
|
|
this.$emit('actionClicked', action);
|
2017-05-26 17:31:16 +00:00
|
|
|
},
|
2018-10-17 10:34:19 +00:00
|
|
|
onClickSidebarButton() {
|
|
|
|
this.$emit('clickedSidebarButton');
|
|
|
|
},
|
2018-04-19 15:07:11 +00:00
|
|
|
},
|
|
|
|
};
|
2017-05-26 17:31:16 +00:00
|
|
|
</script>
|
2017-06-12 09:20:19 +00:00
|
|
|
|
2017-05-26 17:31:16 +00:00
|
|
|
<template>
|
2017-06-12 09:20:19 +00:00
|
|
|
<header class="page-content-header ci-header-container">
|
2017-05-26 17:31:16 +00:00
|
|
|
<section class="header-main-content">
|
|
|
|
|
|
|
|
<ci-icon-badge :status="status" />
|
|
|
|
|
|
|
|
<strong>
|
2018-01-08 20:01:49 +00:00
|
|
|
{{ itemName }} #{{ itemId }}
|
2017-05-26 17:31:16 +00:00
|
|
|
</strong>
|
|
|
|
|
2018-01-05 16:18:01 +00:00
|
|
|
<template v-if="shouldRenderTriggeredLabel">
|
2017-12-19 11:04:04 +00:00
|
|
|
triggered
|
|
|
|
</template>
|
|
|
|
<template v-else>
|
|
|
|
created
|
|
|
|
</template>
|
2017-05-26 17:31:16 +00:00
|
|
|
|
|
|
|
<timeago-tooltip :time="time" />
|
|
|
|
|
|
|
|
by
|
|
|
|
|
2017-06-02 13:24:42 +00:00
|
|
|
<template v-if="user">
|
2018-11-12 21:50:35 +00:00
|
|
|
<gl-link
|
|
|
|
v-gl-tooltip
|
2017-06-02 13:24:42 +00:00
|
|
|
:href="user.path"
|
|
|
|
:title="user.email"
|
2018-01-08 20:01:49 +00:00
|
|
|
class="js-user-link commit-committer-link"
|
|
|
|
>
|
2017-06-02 13:24:42 +00:00
|
|
|
|
|
|
|
<user-avatar-image
|
|
|
|
:img-src="user.avatar_url"
|
|
|
|
:img-alt="userAvatarAltText"
|
|
|
|
:tooltip-text="user.name"
|
|
|
|
:img-size="24"
|
2018-01-08 20:01:49 +00:00
|
|
|
/>
|
2017-06-02 13:24:42 +00:00
|
|
|
|
2018-01-08 20:01:49 +00:00
|
|
|
{{ user.name }}
|
2018-11-12 21:50:35 +00:00
|
|
|
</gl-link>
|
2018-07-16 16:18:52 +00:00
|
|
|
<span
|
|
|
|
v-if="user.status_tooltip_html"
|
|
|
|
v-html="user.status_tooltip_html"></span>
|
2017-06-02 13:24:42 +00:00
|
|
|
</template>
|
2017-05-26 17:31:16 +00:00
|
|
|
</section>
|
|
|
|
|
|
|
|
<section
|
2018-02-21 15:17:03 +00:00
|
|
|
v-if="actions.length"
|
2018-06-11 09:49:47 +00:00
|
|
|
class="header-action-buttons"
|
2018-02-21 15:17:03 +00:00
|
|
|
>
|
2017-05-26 17:31:16 +00:00
|
|
|
<template
|
2018-01-08 20:01:49 +00:00
|
|
|
v-for="(action, i) in actions"
|
|
|
|
>
|
2018-11-12 21:50:35 +00:00
|
|
|
<gl-link
|
2017-05-26 17:31:16 +00:00
|
|
|
v-if="action.type === 'link'"
|
2018-09-20 06:13:50 +00:00
|
|
|
:key="i"
|
2017-05-26 17:31:16 +00:00
|
|
|
:href="action.path"
|
2018-01-08 20:01:49 +00:00
|
|
|
:class="action.cssClass"
|
|
|
|
>
|
|
|
|
{{ action.label }}
|
2018-11-12 21:50:35 +00:00
|
|
|
</gl-link>
|
2017-05-26 17:31:16 +00:00
|
|
|
|
2018-11-12 21:50:35 +00:00
|
|
|
<gl-link
|
2017-08-10 10:01:25 +00:00
|
|
|
v-else-if="action.type === 'ujs-link'"
|
2018-09-20 06:13:50 +00:00
|
|
|
:key="i"
|
2017-06-12 09:20:19 +00:00
|
|
|
:href="action.path"
|
2018-01-08 20:01:49 +00:00
|
|
|
:class="action.cssClass"
|
2018-06-11 09:49:47 +00:00
|
|
|
data-method="post"
|
|
|
|
rel="nofollow"
|
2018-01-08 20:01:49 +00:00
|
|
|
>
|
|
|
|
{{ action.label }}
|
2018-11-12 21:50:35 +00:00
|
|
|
</gl-link>
|
2017-06-12 09:20:19 +00:00
|
|
|
|
2018-11-12 21:50:35 +00:00
|
|
|
<loading-button
|
2017-08-10 10:01:25 +00:00
|
|
|
v-else-if="action.type === 'button'"
|
2018-09-20 06:13:50 +00:00
|
|
|
:key="i"
|
2018-11-12 21:50:35 +00:00
|
|
|
:loading="action.isLoading"
|
2017-06-02 13:24:42 +00:00
|
|
|
:disabled="action.isLoading"
|
2017-05-26 17:31:16 +00:00
|
|
|
:class="action.cssClass"
|
2018-11-12 21:50:35 +00:00
|
|
|
container-class="d-inline"
|
|
|
|
:label="action.label"
|
2018-06-11 09:49:47 +00:00
|
|
|
@click="onClickAction(action)"
|
2018-11-12 21:50:35 +00:00
|
|
|
/>
|
2017-05-26 17:31:16 +00:00
|
|
|
</template>
|
2018-10-17 10:34:19 +00:00
|
|
|
</section>
|
2018-11-12 21:50:35 +00:00
|
|
|
<gl-button
|
2018-10-17 10:34:19 +00:00
|
|
|
v-if="hasSidebarButton"
|
|
|
|
id="toggleSidebar"
|
2018-11-12 21:50:35 +00:00
|
|
|
class="d-block d-sm-none
|
2018-04-09 19:57:00 +00:00
|
|
|
sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
|
2018-10-17 10:34:19 +00:00
|
|
|
@click="onClickSidebarButton"
|
|
|
|
>
|
|
|
|
<i
|
|
|
|
class="fa fa-angle-double-left"
|
|
|
|
aria-hidden="true"
|
|
|
|
aria-labelledby="toggleSidebar"
|
2018-01-08 20:01:49 +00:00
|
|
|
>
|
2018-10-17 10:34:19 +00:00
|
|
|
</i>
|
2018-11-12 21:50:35 +00:00
|
|
|
</gl-button>
|
2017-05-26 17:31:16 +00:00
|
|
|
</header>
|
|
|
|
</template>
|