diff --git a/app/assets/javascripts/jobs/components/job/sidebar/commit_block.vue b/app/assets/javascripts/jobs/components/job/sidebar/commit_block.vue
index 7f25ca8a94d8719af5eae96c3dcf0d57e82950be..314de21ffe417bf415d3c1299ac30eae3751c56d 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/commit_block.vue
@@ -22,9 +22,13 @@ export default {
</script>
<template>
<div>
- <span class="gl-font-weight-bold">{{ __('Commit') }}</span>
+ <span class="gl-font-weight-bold">{{ __('Commit:') }}</span>
- <gl-link :href="commit.commit_path" class="gl-text-blue-600!" data-testid="commit-sha">
+ <gl-link
+ :href="commit.commit_path"
+ class="gl-text-blue-600! gl-font-monospace"
+ data-testid="commit-sha"
+ >
{{ commit.short_id }}
</gl-link>
@@ -42,6 +46,6 @@ export default {
>
</span>
- <p class="gl-mb-0">{{ commit.title }}</p>
+ <p class="gl-mb-0 gl-font-sm">{{ commit.title }}</p>
</div>
</template>
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/job_sidebar_retry_button.vue b/app/assets/javascripts/jobs/components/job/sidebar/job_sidebar_retry_button.vue
index 87c47f592aa0a5a8c263bf673807b327c880a3d7..f8486bf16f3a16d30d3b3ee31b21bf0850f20035 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/job_sidebar_retry_button.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/job_sidebar_retry_button.vue
@@ -65,6 +65,7 @@ export default {
icon="retry"
category="primary"
placement="right"
+ positioning-strategy="fixed"
variant="confirm"
:items="dropdownItems"
/>
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue b/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue
index 530109f9dfd454f59f72071e35cef2a5f71391f0..e74096bf97959e755707dbce76b173eab5376512 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue
@@ -17,7 +17,6 @@ export default {
i18n: {
...JOB_SIDEBAR_COPY,
},
- borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'],
forwardDeploymentFailureModalId,
components: {
ArtifactsBlock,
@@ -81,34 +80,22 @@ export default {
@updateVariables="$emit('updateVariables')"
/>
- <job-sidebar-details-container class="gl-py-4" :class="$options.borderTopClass" />
+ <job-sidebar-details-container class="gl-py-4 gl-border-t" />
<artifacts-block
v-if="hasArtifact"
class="gl-py-4"
- :class="$options.borderTopClass"
:artifact="job.artifact"
:help-url="artifactHelpUrl"
/>
- <trigger-block
- v-if="hasTriggers"
- class="gl-py-4"
- :class="$options.borderTopClass"
- :trigger="job.trigger"
- />
+ <trigger-block v-if="hasTriggers" class="gl-py-4" :trigger="job.trigger" />
- <commit-block
- :commit="commit"
- class="gl-py-4"
- :class="$options.borderTopClass"
- :merge-request="job.merge_request"
- />
+ <commit-block :commit="commit" class="gl-py-4" :merge-request="job.merge_request" />
<stages-dropdown
v-if="job.pipeline"
class="gl-py-4"
- :class="$options.borderTopClass"
:pipeline="job.pipeline"
:selected-stage="selectedStage"
:stages="stages"
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_job_details_container.vue b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_job_details_container.vue
index 0933547600899e7afbea003aea7dee143b4f72b9..a965563d936594ef271ccbb42520bdabf0ac3250 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_job_details_container.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_job_details_container.vue
@@ -118,7 +118,7 @@ export default {
<p v-if="hasTags" class="build-detail-row" data-testid="job-tags">
<span class="font-weight-bold">{{ $options.i18n.TAGS }}</span>
- <gl-badge v-for="(tag, i) in job.tags" :key="i" variant="info">{{ tag }}</gl-badge>
+ <gl-badge v-for="(tag, i) in job.tags" :key="i" variant="info" size="sm">{{ tag }}</gl-badge>
</p>
</div>
</template>
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue b/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue
index c1f84adf66434e1df706c8b4e4764d66591a944a..c50b85860633203d8cc58016004cccbb0b30a36a 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue
@@ -1,20 +1,20 @@
<script>
import { GlLink, GlDisclosureDropdown, GlSprintf } from '@gitlab/ui';
import { isEmpty } from 'lodash';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
import { Mousetrap } from '~/lib/mousetrap';
import { s__ } from '~/locale';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import { clickCopyToClipboardButton } from '~/behaviors/copy_to_clipboard';
import { keysFor, MR_COPY_SOURCE_BRANCH_NAME } from '~/behaviors/shortcuts/keybindings';
export default {
components: {
- CiIcon,
ClipboardButton,
GlDisclosureDropdown,
GlLink,
GlSprintf,
+ CiBadgeLink,
},
props: {
pipeline: {
@@ -51,15 +51,17 @@ export default {
},
pipelineInfo() {
if (!this.hasRef) {
- return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id}');
+ return s__('Job|%{boldStart}Pipeline:%{boldEnd} %{id} %{status}');
} else if (!this.isTriggeredByMergeRequest) {
- return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{ref}');
+ return s__('Job|%{boldStart}Pipeline:%{boldEnd} %{id} %{status} for %{ref}');
} else if (!this.isMergeRequestPipeline) {
- return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{mrId} with %{source}');
+ return s__(
+ 'Job|%{boldStart}Pipeline:%{boldEnd} %{id} %{status} for %{mrId} with %{source}',
+ );
}
return s__(
- 'Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{mrId} with %{source} into %{target}',
+ 'Job|%{boldStart}Pipeline:%{boldEnd} %{id} for %{mrId} with %{source} into %{target}',
);
},
},
@@ -92,7 +94,6 @@ export default {
<template>
<div class="dropdown">
<div class="js-pipeline-info" data-testid="pipeline-info">
- <ci-icon :status="pipeline.details.status" />
<gl-sprintf :message="pipelineInfo">
<template #bold="{ content }">
<span class="font-weight-bold">{{ content }}</span>
@@ -100,16 +101,19 @@ export default {
<template #id>
<gl-link
:href="pipeline.path"
- class="js-pipeline-path link-commit"
+ class="js-pipeline-path link-commit gl-text-blue-500!"
data-testid="pipeline-path"
data-qa-selector="pipeline_path"
>#{{ pipeline.id }}</gl-link
>
</template>
+ <template #status>
+ <ci-badge-link :status="pipeline.details.status" badge-size="sm" />
+ </template>
<template #mrId>
<gl-link
:href="pipeline.merge_request.path"
- class="link-commit ref-name"
+ class="link-commit ref-name gl-text-blue-500!"
data-testid="mr-link"
>!{{ pipeline.merge_request.iid }}</gl-link
>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2b25fc88fc97b381ba56652618f99f335cbfa206..8f6b665289d60f4502159b6d96c549a5c76c5d94 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -11792,6 +11792,9 @@ msgstr ""
msgid "Commit statistics for %{ref} %{start_time} - %{end_time}"
msgstr ""
+msgid "Commit:"
+msgstr ""
+
msgid "CommitBoxTitle|Commit"
msgstr ""
@@ -27126,16 +27129,16 @@ msgstr ""
msgid "Jobs|You're about to retry a job that failed because it attempted to deploy code that is older than the latest deployment. Retrying this job could result in overwriting the environment with the older source code."
msgstr ""
-msgid "Job|%{boldStart}Pipeline%{boldEnd} %{id}"
+msgid "Job|%{boldStart}Pipeline:%{boldEnd} %{id} %{status}"
msgstr ""
-msgid "Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{mrId} with %{source}"
+msgid "Job|%{boldStart}Pipeline:%{boldEnd} %{id} %{status} for %{mrId} with %{source}"
msgstr ""
-msgid "Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{mrId} with %{source} into %{target}"
+msgid "Job|%{boldStart}Pipeline:%{boldEnd} %{id} %{status} for %{ref}"
msgstr ""
-msgid "Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{ref}"
+msgid "Job|%{boldStart}Pipeline:%{boldEnd} %{id} for %{mrId} with %{source} into %{target}"
msgstr ""
msgid "Job|%{searchLength} results found for %{searchTerm}"
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index 67486b545c9a57a104588a1926feb3a7e9ff440c..75cf4406b2ebe355fa56c45a44fb3f389636b8ac 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -93,7 +93,7 @@
visit project_job_path(project, job)
within '.js-pipeline-info' do
- expect(page).to have_content("Pipeline ##{pipeline.id} for #{pipeline.ref}")
+ expect(page).to have_content("Pipeline: ##{pipeline.id} #{pipeline.status} for #{pipeline.ref}")
end
end
diff --git a/spec/frontend/jobs/components/job/stages_dropdown_spec.js b/spec/frontend/jobs/components/job/stages_dropdown_spec.js
index c42edc62183732f26ea460d35f1d42879f4710fc..9f16769696a11fd2533f11f5b1c701901831dd97 100644
--- a/spec/frontend/jobs/components/job/stages_dropdown_spec.js
+++ b/spec/frontend/jobs/components/job/stages_dropdown_spec.js
@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
import { Mousetrap } from '~/lib/mousetrap';
import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import StagesDropdown from '~/jobs/components/job/sidebar/stages_dropdown.vue';
-import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
import * as copyToClipboard from '~/behaviors/copy_to_clipboard';
import {
mockPipelineWithoutRef,
@@ -15,7 +15,8 @@ import {
describe('Stages Dropdown', () => {
let wrapper;
- const findStatus = () => wrapper.findComponent(CiIcon);
+ const findStatusBadge = () => wrapper.findComponent(CiBadgeLink);
+ const findStatusText = () => findStatusBadge().props('status').label;
const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
const findSelectedStageText = () => findDropdown().props('toggleText');
@@ -46,7 +47,8 @@ describe('Stages Dropdown', () => {
});
it('renders pipeline status', () => {
- expect(findStatus().exists()).toBe(true);
+ expect(findStatusBadge().exists()).toBe(true);
+ expect(findStatusText()).toBe('passed');
});
it('renders dropdown with stages', () => {
@@ -77,7 +79,7 @@ describe('Stages Dropdown', () => {
'does not have a ref',
{
pipeline: mockPipelineWithoutRef,
- text: `Pipeline #${mockPipelineWithoutRef.id}`,
+ text: `Pipeline: #${mockPipelineWithoutRef.id}`,
foundElements: [
{ testId: 'pipeline-path', props: [{ href: mockPipelineWithoutRef.path }] },
],
@@ -87,7 +89,7 @@ describe('Stages Dropdown', () => {
'hasRef but not triggered by MR',
{
pipeline: mockPipelineWithoutMR,
- text: `Pipeline #${mockPipelineWithoutMR.id} for ${mockPipelineWithoutMR.ref.name}`,
+ text: `Pipeline: #${mockPipelineWithoutMR.id} for ${mockPipelineWithoutMR.ref.name}`,
foundElements: [
{ testId: 'pipeline-path', props: [{ href: mockPipelineWithoutMR.path }] },
{ testId: 'source-ref-link', props: [{ href: mockPipelineWithoutMR.ref.path }] },
@@ -99,7 +101,7 @@ describe('Stages Dropdown', () => {
'hasRef and MR but not MR pipeline',
{
pipeline: mockPipelineDetached,
- text: `Pipeline #${mockPipelineDetached.id} for !${mockPipelineDetached.merge_request.iid} with ${mockPipelineDetached.merge_request.source_branch}`,
+ text: `Pipeline: #${mockPipelineDetached.id} for !${mockPipelineDetached.merge_request.iid} with ${mockPipelineDetached.merge_request.source_branch}`,
foundElements: [
{ testId: 'pipeline-path', props: [{ href: mockPipelineDetached.path }] },
{ testId: 'mr-link', props: [{ href: mockPipelineDetached.merge_request.path }] },
@@ -118,7 +120,7 @@ describe('Stages Dropdown', () => {
'hasRef and MR and MR pipeline',
{
pipeline: mockPipelineWithAttachedMR,
- text: `Pipeline #${mockPipelineWithAttachedMR.id} for !${mockPipelineWithAttachedMR.merge_request.iid} with ${mockPipelineWithAttachedMR.merge_request.source_branch} into ${mockPipelineWithAttachedMR.merge_request.target_branch}`,
+ text: `Pipeline: #${mockPipelineWithAttachedMR.id} for !${mockPipelineWithAttachedMR.merge_request.iid} with ${mockPipelineWithAttachedMR.merge_request.source_branch} into ${mockPipelineWithAttachedMR.merge_request.target_branch}`,
foundElements: [
{ testId: 'pipeline-path', props: [{ href: mockPipelineWithAttachedMR.path }] },
{ testId: 'mr-link', props: [{ href: mockPipelineWithAttachedMR.merge_request.path }] },