diff options
Diffstat (limited to 'app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue')
| -rw-r--r-- | app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue | 141 |
1 files changed, 74 insertions, 67 deletions
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue index 77e3ecb9b3c..f757a3bcf00 100644 --- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue +++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_header.vue @@ -6,7 +6,6 @@ import { createAlert } from '~/alert'; import { TYPENAME_COMMIT_STATUS } from '~/graphql_shared/constants'; import { convertToGraphQLId } from '~/graphql_shared/utils'; import { __, s__ } from '~/locale'; -import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; import { JOB_GRAPHQL_ERRORS, forwardDeploymentFailureModalId, PASSED_STATUS } from '~/ci/constants'; import GetJob from '../../graphql/queries/get_job.query.graphql'; import JobSidebarRetryButton from './job_sidebar_retry_button.vue'; @@ -20,7 +19,6 @@ export default { eraseLogConfirmText: s__('Job|Are you sure you want to erase this job log and artifacts?'), newIssue: __('New issue'), retryJobLabel: s__('Job|Retry'), - toggleSidebar: __('Toggle Sidebar'), runAgainJobButtonLabel: s__('Job|Run again'), }, forwardDeploymentFailureModalId, @@ -30,7 +28,6 @@ export default { components: { GlButton, JobSidebarRetryButton, - TooltipOnTruncate, }, inject: ['projectPath'], apollo: { @@ -85,6 +82,15 @@ export default { retryButtonCategory() { return this.restJob.status && this.restJob.recoverable ? 'primary' : 'secondary'; }, + jobHasPath() { + return Boolean( + this.restJob.erase_path || + this.restJob.new_issue_path || + this.restJob.terminal_path || + this.restJob.retry_path || + this.restJob.cancel_path, + ); + }, }, methods: { ...mapActions(['toggleSidebar']), @@ -93,73 +99,74 @@ export default { </script> <template> - <div> - <tooltip-on-truncate :title="job.name" truncate-target="child" - ><h4 class="gl-mt-0 gl-mb-3 gl-text-truncate" data-testid="job-name">{{ job.name }}</h4> - </tooltip-on-truncate> - <div class="gl-display-flex gl-gap-3"> - <gl-button - v-if="restJob.erase_path" - v-gl-tooltip.bottom - :title="$options.i18n.eraseLogButtonLabel" - :aria-label="$options.i18n.eraseLogButtonLabel" - :href="restJob.erase_path" - :data-confirm="$options.i18n.eraseLogConfirmText" - data-testid="job-log-erase-link" - data-confirm-btn-variant="danger" - data-method="post" - icon="remove" - /> - <gl-button - v-if="restJob.new_issue_path" - v-gl-tooltip.bottom - :href="restJob.new_issue_path" - :title="$options.i18n.newIssue" - :aria-label="$options.i18n.newIssue" - category="secondary" - variant="confirm" - data-testid="job-new-issue" - icon="issue-new" - /> - <gl-button - v-if="restJob.terminal_path" - v-gl-tooltip.bottom - :href="restJob.terminal_path" - :title="$options.i18n.debug" - :aria-label="$options.i18n.debug" - target="_blank" - icon="external-link" - data-testid="terminal-link" - /> - <job-sidebar-retry-button - v-if="canShowJobRetryButton" - v-gl-tooltip.bottom - :title="buttonTitle" - :aria-label="buttonTitle" - :is-manual-job="isManualJob" - :category="retryButtonCategory" - :href="restJob.retry_path" - :modal-id="$options.forwardDeploymentFailureModalId" - variant="confirm" - data-testid="retry-button" - @updateVariablesClicked="$emit('updateVariables')" - /> - <gl-button - v-if="restJob.cancel_path" - v-gl-tooltip.bottom - :title="$options.i18n.cancelJobButtonLabel" - :aria-label="$options.i18n.cancelJobButtonLabel" - :href="restJob.cancel_path" - variant="danger" - icon="cancel" - data-method="post" - data-testid="cancel-button" - rel="nofollow" - /> + <div class="gl-py-3!"> + <div class="gl-display-flex gl-justify-content-space-between gl-gap-3"> + <div class="gl-display-flex gl-gap-3"> + <template v-if="jobHasPath"> + <gl-button + v-if="restJob.erase_path" + v-gl-tooltip.bottom + :title="$options.i18n.eraseLogButtonLabel" + :aria-label="$options.i18n.eraseLogButtonLabel" + :href="restJob.erase_path" + :data-confirm="$options.i18n.eraseLogConfirmText" + data-testid="job-log-erase-link" + data-confirm-btn-variant="danger" + data-method="post" + icon="remove" + /> + <gl-button + v-if="restJob.new_issue_path" + v-gl-tooltip.bottom + :href="restJob.new_issue_path" + :title="$options.i18n.newIssue" + :aria-label="$options.i18n.newIssue" + category="secondary" + variant="confirm" + data-testid="job-new-issue" + icon="issue-new" + /> + <gl-button + v-if="restJob.terminal_path" + v-gl-tooltip.bottom + :href="restJob.terminal_path" + :title="$options.i18n.debug" + :aria-label="$options.i18n.debug" + target="_blank" + icon="external-link" + data-testid="terminal-link" + /> + <job-sidebar-retry-button + v-if="canShowJobRetryButton" + v-gl-tooltip.bottom + :title="buttonTitle" + :aria-label="buttonTitle" + :is-manual-job="isManualJob" + :category="retryButtonCategory" + :href="restJob.retry_path" + :modal-id="$options.forwardDeploymentFailureModalId" + variant="confirm" + data-testid="retry-button" + @updateVariablesClicked="$emit('updateVariables')" + /> + <gl-button + v-if="restJob.cancel_path" + v-gl-tooltip.bottom + :title="$options.i18n.cancelJobButtonLabel" + :aria-label="$options.i18n.cancelJobButtonLabel" + :href="restJob.cancel_path" + variant="danger" + icon="cancel" + data-method="post" + data-testid="cancel-button" + rel="nofollow" + /> + </template> + </div> <gl-button :aria-label="$options.i18n.toggleSidebar" category="secondary" - class="gl-md-display-none gl-ml-2" + class="gl-lg-display-none" icon="chevron-double-lg-right" @click="toggleSidebar" /> |