diff options
Diffstat (limited to 'app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue')
-rw-r--r-- | app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue new file mode 100644 index 00000000000..523710598bf --- /dev/null +++ b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue @@ -0,0 +1,102 @@ +<script> +import { GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { mapActions } from 'vuex'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; +import { JOB_SIDEBAR_COPY, forwardDeploymentFailureModalId } from '~/jobs/constants'; +import JobSidebarRetryButton from './job_sidebar_retry_button.vue'; + +// This component is a port of ~/jobs/components/job/sidebar/legacy_sidebar_header.vue +// It is meant to fetch the job information via GraphQL instead of REST API. + +export default { + name: 'SidebarHeader', + i18n: { + ...JOB_SIDEBAR_COPY, + }, + forwardDeploymentFailureModalId, + directives: { + GlTooltip: GlTooltipDirective, + }, + components: { + GlButton, + JobSidebarRetryButton, + TooltipOnTruncate, + }, + props: { + job: { + type: Object, + required: true, + default: () => ({}), + }, + erasePath: { + type: String, + required: false, + default: null, + }, + }, + computed: { + retryButtonCategory() { + return this.job.status && this.job.recoverable ? 'primary' : 'secondary'; + }, + }, + methods: { + ...mapActions(['toggleSidebar']), + }, +}; +</script> + +<template> + <div class="gl-py-5 gl-display-flex gl-align-items-center"> + <tooltip-on-truncate :title="job.name" truncate-target="child" + ><h4 class="gl-my-0 gl-mr-3 gl-text-truncate"> + {{ job.name }} + </h4> + </tooltip-on-truncate> + <div class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right"> + <gl-button + v-if="erasePath" + v-gl-tooltip.left + :title="$options.i18n.eraseLogButtonLabel" + :aria-label="$options.i18n.eraseLogButtonLabel" + :href="erasePath" + :data-confirm="$options.i18n.eraseLogConfirmText" + class="gl-mr-2" + data-testid="job-log-erase-link" + data-confirm-btn-variant="danger" + data-method="post" + icon="remove" + /> + <job-sidebar-retry-button + v-if="job.retry_path" + v-gl-tooltip.left + :title="$options.i18n.retryJobButtonLabel" + :aria-label="$options.i18n.retryJobButtonLabel" + :category="retryButtonCategory" + :href="job.retry_path" + :modal-id="$options.forwardDeploymentFailureModalId" + variant="confirm" + data-qa-selector="retry_button" + data-testid="retry-button" + /> + <gl-button + v-if="job.cancel_path" + v-gl-tooltip.left + :title="$options.i18n.cancelJobButtonLabel" + :aria-label="$options.i18n.cancelJobButtonLabel" + :href="job.cancel_path" + variant="danger" + icon="cancel" + data-method="post" + data-testid="cancel-button" + rel="nofollow" + /> + <gl-button + :aria-label="$options.i18n.toggleSidebar" + category="tertiary" + class="gl-md-display-none gl-ml-2" + icon="chevron-double-lg-right" + @click="toggleSidebar" + /> + </div> + </div> +</template> |