From 0b1720e0f3a2ca816529cc83296fe55dfdbc9cf9 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 24 Aug 2023 11:32:32 -0600
Subject: [PATCH 1/2] Update job sidebar UI

Changelog: changed
---
 .../components/job/sidebar/commit_block.vue   | 10 ++++---
 .../jobs/components/job/sidebar/sidebar.vue   | 19 +++-----------
 .../sidebar/sidebar_job_details_container.vue |  2 +-
 .../job/sidebar/stages_dropdown.vue           | 26 +++++++++----------
 locale/gitlab.pot                             |  8 +++---
 spec/features/projects/jobs_spec.rb           |  2 +-
 .../components/job/stages_dropdown_spec.js    | 12 ++++-----
 7 files changed, 35 insertions(+), 44 deletions(-)

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 7f25ca8a94d871..a74e070f293cc0 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/sidebar.vue b/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue
index 530109f9dfd454..e74096bf97959e 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 0933547600899e..a965563d936594 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 3fee14272565de..f6cea5f1ac8a20 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,13 +51,11 @@ export default {
     },
     pipelineInfo() {
       if (!this.hasRef) {
-        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id}');
-      }
-      if (!this.isTriggeredByMergeRequest) {
-        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{ref}');
-      }
-      if (!this.isMergeRequestPipeline) {
-        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} for %{mrId} with %{source}');
+        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status}');
+      } else if (!this.isTriggeredByMergeRequest) {
+        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status} for %{ref}');
+      } else if (!this.isMergeRequestPipeline) {
+        return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status} for %{mrId} with %{source}');
       }
 
       return s__(
@@ -95,23 +93,25 @@ 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>
+          <span class="font-weight-bold">{{ content }}:</span>
         </template>
         <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"
             >#{{ 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 92e4bc8fa38023..fcb6a6f448a40d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26805,16 +26805,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 67486b545c9a57..75cf4406b2ebe3 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 c42edc62183732..7cc13049a0a7fb 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,7 @@ import {
 describe('Stages Dropdown', () => {
   let wrapper;
 
-  const findStatus = () => wrapper.findComponent(CiIcon);
+  const findStatus = () => wrapper.findComponent(CiBadgeLink);
   const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
   const findSelectedStageText = () => findDropdown().props('toggleText');
 
@@ -77,7 +77,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 +87,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 +99,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 +118,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 }] },
-- 
GitLab


From 0d15e6c2c3e8c5739a7f2c4b509882a0ec08354b Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Mon, 28 Aug 2023 11:30:40 +0200
Subject: [PATCH 2/2] Job sidebar: Update styles

Updates sidebar styles to use labels on top of values,
tighten up layout for job list, fixes the color of the help icon
and removes the colon from the labels.

Changelog: changed
---
 .../components/job/sidebar/commit_block.vue   | 45 +++++++------
 .../job/sidebar/job_container_item.vue        |  8 +--
 .../components/job/sidebar/jobs_container.vue |  3 +-
 .../jobs/components/job/sidebar/sidebar.vue   | 17 ++---
 .../job/sidebar/sidebar_detail_row.vue        | 29 +++++----
 .../components/job/sidebar/sidebar_header.vue |  5 +-
 .../sidebar/sidebar_job_details_container.vue | 10 ++-
 .../job/sidebar/stages_dropdown.vue           | 18 ++---
 .../components/job/sidebar/trigger_block.vue  |  2 +-
 .../vue_shared/components/ci_badge_link.vue   |  3 +-
 .../stylesheets/page_bundles/build.scss       | 65 ++++---------------
 locale/gitlab.pot                             | 11 ++--
 qa/qa/ee/page/operations_dashboard.rb         |  2 +-
 qa/qa/page/component/ci_badge_link.rb         |  4 +-
 spec/features/projects/jobs_spec.rb           |  4 +-
 .../job/job_sidebar_details_container_spec.js |  3 +-
 .../components/job/stages_dropdown_spec.js    |  8 +--
 17 files changed, 111 insertions(+), 126 deletions(-)

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 a74e070f293cc0..95616a4c706785 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/commit_block.vue
@@ -22,30 +22,33 @@ export default {
 </script>
 <template>
   <div>
-    <span class="gl-font-weight-bold">{{ __('Commit') }}:</span>
+    <p class="gl-display-flex gl-flex-wrap gl-align-items-baseline gl-gap-2 gl-mb-0">
+      <span class="gl-display-flex gl-font-weight-bold">{{ __('Commit') }}</span>
 
-    <gl-link
-      :href="commit.commit_path"
-      class="gl-text-blue-600! gl-font-monospace"
-      data-testid="commit-sha"
-    >
-      {{ commit.short_id }}
-    </gl-link>
+      <gl-link
+        :href="commit.commit_path"
+        class="gl-text-blue-500! gl-font-monospace"
+        data-testid="commit-sha"
+      >
+        {{ commit.short_id }}
+      </gl-link>
 
-    <clipboard-button
-      :text="commit.id"
-      :title="__('Copy commit SHA')"
-      category="tertiary"
-      size="small"
-    />
+      <clipboard-button
+        :text="commit.id"
+        :title="__('Copy commit SHA')"
+        category="tertiary"
+        size="small"
+        class="gl-align-self-center"
+      />
 
-    <span v-if="mergeRequest">
-      {{ __('in') }}
-      <gl-link :href="mergeRequest.path" class="gl-text-blue-600!" data-testid="link-commit"
-        >!{{ mergeRequest.iid }}</gl-link
-      >
-    </span>
+      <span v-if="mergeRequest">
+        {{ __('in') }}
+        <gl-link :href="mergeRequest.path" class="gl-text-blue-500!" data-testid="link-commit"
+          >!{{ mergeRequest.iid }}</gl-link
+        >
+      </span>
+    </p>
 
-    <p class="gl-mb-0 gl-font-sm">{{ commit.title }}</p>
+    <p class="gl-mb-0">{{ commit.title }}</p>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/job_container_item.vue b/app/assets/javascripts/jobs/components/job/sidebar/job_container_item.vue
index 097ab3b4cf663a..b941f7a882d18e 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/job_container_item.vue
@@ -40,7 +40,7 @@ export default {
     },
     classes() {
       return {
-        retried: this.job.retried,
+        'retried gl-text-secondary': this.job.retried,
         'gl-font-weight-bold': this.isActive,
       };
     },
@@ -57,7 +57,7 @@ export default {
       v-gl-tooltip.left.viewport
       :href="job.status.details_path"
       :title="tooltipText"
-      class="gl-display-flex gl-align-items-center"
+      class="gl-display-flex gl-align-items-center gl-py-3 gl-pl-7"
       :data-testid="dataTestId"
     >
       <gl-icon
@@ -67,11 +67,11 @@ export default {
         :size="14"
       />
 
-      <ci-icon :status="job.status" class="gl-mr-2" :size="14" />
+      <ci-icon :status="job.status" class="gl-mr-3" :size="14" />
 
       <span class="gl-text-truncate gl-w-full">{{ jobName }}</span>
 
-      <gl-icon v-if="job.retried" name="retry" />
+      <gl-icon v-if="job.retried" name="retry" class="gl-mr-4" />
     </gl-link>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/jobs_container.vue b/app/assets/javascripts/jobs/components/job/sidebar/jobs_container.vue
index df64b6422c7d8c..18bd2593c2a27b 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/jobs_container.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/jobs_container.vue
@@ -24,7 +24,8 @@ export default {
 };
 </script>
 <template>
-  <div class="builds-container">
+  <div class="block builds-container">
+    <b class="gl-display-flex gl-mb-2 gl-font-weight-semibold">{{ __('Related jobs') }}</b>
     <job-container-item
       v-for="job in jobs"
       :key="job.id"
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue b/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue
index e74096bf97959e..1c99aa5e19da0c 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/sidebar.vue
@@ -73,37 +73,38 @@ export default {
 <template>
   <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
     <div class="sidebar-container">
-      <div class="blocks-container">
+      <div class="blocks-container gl-p-4">
         <sidebar-header
+          class="block gl-pb-4! gl-mb-2"
           :rest-job="job"
           :job-id="job.id"
           @updateVariables="$emit('updateVariables')"
         />
 
-        <job-sidebar-details-container class="gl-py-4 gl-border-t" />
+        <job-sidebar-details-container class="block gl-mb-2" />
 
         <artifacts-block
           v-if="hasArtifact"
-          class="gl-py-4"
+          class="block gl-mb-2"
           :artifact="job.artifact"
           :help-url="artifactHelpUrl"
         />
 
-        <trigger-block v-if="hasTriggers" class="gl-py-4" :trigger="job.trigger" />
+        <trigger-block v-if="hasTriggers" class="block gl-mb-2" :trigger="job.trigger" />
 
-        <commit-block :commit="commit" class="gl-py-4" :merge-request="job.merge_request" />
+        <commit-block class="block gl-mb-2" :commit="commit" :merge-request="job.merge_request" />
 
         <stages-dropdown
           v-if="job.pipeline"
-          class="gl-py-4"
+          class="block gl-mb-2"
           :pipeline="job.pipeline"
           :selected-stage="selectedStage"
           :stages="stages"
           @requestSidebarStageDropdown="fetchJobsForStage"
         />
-      </div>
 
-      <jobs-container v-if="jobs.length" :job-id="job.id" :jobs="jobs" />
+        <jobs-container v-if="jobs.length" :job-id="job.id" :jobs="jobs" />
+      </div>
     </div>
     <job-retry-forward-deployment-modal
       v-if="shouldShowJobRetryForwardDeploymentModal"
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_detail_row.vue
index 0ba34eafa583a4..5b1bf354fd45dc 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_detail_row.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_detail_row.vue
@@ -39,21 +39,26 @@ export default {
 };
 </script>
 <template>
-  <p class="gl-display-flex gl-justify-content-space-between gl-mb-2">
-    <span v-if="hasTitle">
-      <b>{{ title }}:</b>
+  <p class="build-sidebar-item gl-mb-2">
+    <b v-if="hasTitle" class="gl-display-flex">{{ title }}:</b>
+    <gl-link
+      v-if="path"
+      :href="path"
+      class="gl-text-blue-600!"
+      data-testid="job-sidebar-value-link"
+    >
+      {{ value }}
+    </gl-link>
+    <span v-else
+      >{{ value }}
       <gl-link
-        v-if="path"
-        :href="path"
-        class="gl-text-blue-600!"
-        data-testid="job-sidebar-value-link"
+        v-if="hasHelpURL"
+        :href="helpUrl"
+        target="_blank"
+        data-testid="job-sidebar-help-link"
       >
-        {{ value }}
+        <gl-icon name="question-o" class="gl-ml-2 gl-text-blue-500" />
       </gl-link>
-      <span v-else>{{ value }}</span>
     </span>
-    <gl-link v-if="hasHelpURL" :href="helpUrl" target="_blank" data-testid="job-sidebar-help-link">
-      <gl-icon name="question-o" />
-    </gl-link>
   </p>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue
index 4ffb8ded8bafd1..3a6551a0128999 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/sidebar_header.vue
@@ -90,7 +90,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-py-4">
+  <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>
@@ -138,6 +138,7 @@ export default {
         :href="restJob.retry_path"
         :modal-id="$options.forwardDeploymentFailureModalId"
         variant="confirm"
+        data-qa-selector="retry_button"
         data-testid="retry-button"
         @updateVariablesClicked="$emit('updateVariables')"
       />
@@ -155,7 +156,7 @@ export default {
       />
       <gl-button
         :aria-label="$options.i18n.toggleSidebar"
-        category="tertiary"
+        category="secondary"
         class="gl-md-display-none gl-ml-2"
         icon="chevron-double-lg-right"
         @click="toggleSidebar"
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 a965563d936594..ebef3ecaa3f7a3 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
@@ -44,10 +44,14 @@ export default {
           this.job.finished_at ||
           this.job.erased_at ||
           this.job.queued_duration ||
+          this.job.id ||
           this.job.runner ||
           this.job.coverage,
       );
     },
+    jobId() {
+      return this.job?.id ? `#${this.job.id}` : '';
+    },
     runnerId() {
       const { id, short_sha: token, description } = this.job.runner;
 
@@ -81,8 +85,9 @@ export default {
     ERASED: __('Erased'),
     QUEUED: __('Queued'),
     RUNNER: __('Runner'),
-    TAGS: __('Tags:'),
+    TAGS: __('Tags'),
     TIMEOUT: __('Timeout'),
+    ID: __('Job ID'),
   },
   TIMEOUT_HELP_URL: helpPagePath('/ci/pipelines/settings.md', {
     anchor: 'set-a-limit-for-how-long-jobs-can-run',
@@ -108,6 +113,7 @@ export default {
       data-testid="job-timeout"
       :title="$options.i18n.TIMEOUT"
     />
+    <detail-row v-if="job.id" :value="jobId" :title="$options.i18n.ID" />
     <detail-row
       v-if="job.runner"
       :value="runnerId"
@@ -117,7 +123,7 @@ export default {
     <detail-row v-if="job.coverage" :value="coverage" :title="$options.i18n.COVERAGE" />
 
     <p v-if="hasTags" class="build-detail-row" data-testid="job-tags">
-      <span class="font-weight-bold">{{ $options.i18n.TAGS }}</span>
+      <span class="font-weight-bold">{{ $options.i18n.TAGS }}:</span>
       <gl-badge v-for="(tag, i) in job.tags" :key="i" variant="info" size="sm">{{ tag }}</gl-badge>
     </p>
   </div>
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 f6cea5f1ac8a20..2a91dea861ce9b 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/stages_dropdown.vue
@@ -52,9 +52,11 @@ export default {
     pipelineInfo() {
       if (!this.hasRef) {
         return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status}');
-      } else if (!this.isTriggeredByMergeRequest) {
+      }
+      if (!this.isTriggeredByMergeRequest) {
         return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status} for %{ref}');
-      } else if (!this.isMergeRequestPipeline) {
+      }
+      if (!this.isMergeRequestPipeline) {
         return s__('Job|%{boldStart}Pipeline%{boldEnd} %{id} %{status} for %{mrId} with %{source}');
       }
 
@@ -92,10 +94,10 @@ export default {
 </script>
 <template>
   <div class="dropdown">
-    <div class="js-pipeline-info" data-testid="pipeline-info">
+    <div class="gl-display-flex gl-flex-wrap gl-gap-2 js-pipeline-info" data-testid="pipeline-info">
       <gl-sprintf :message="pipelineInfo">
         <template #bold="{ content }">
-          <span class="font-weight-bold">{{ content }}:</span>
+          <span class="gl-display-flex gl-font-weight-bold">{{ content }}</span>
         </template>
         <template #id>
           <gl-link
@@ -119,7 +121,7 @@ export default {
         <template #ref>
           <gl-link
             :href="pipeline.ref.path"
-            class="link-commit ref-name"
+            class="link-commit ref-name gl-mt-1"
             data-testid="source-ref-link"
             >{{ pipeline.ref.name }}</gl-link
           ><clipboard-button
@@ -134,7 +136,7 @@ export default {
         <template #source>
           <gl-link
             :href="pipeline.merge_request.source_branch_path"
-            class="link-commit ref-name"
+            class="link-commit ref-name gl-mt-1"
             data-testid="source-branch-link"
             >{{ pipeline.merge_request.source_branch }}</gl-link
           ><clipboard-button
@@ -149,7 +151,7 @@ export default {
         <template #target>
           <gl-link
             :href="pipeline.merge_request.target_branch_path"
-            class="link-commit ref-name"
+            class="link-commit ref-name gl-mt-1"
             data-testid="target-branch-link"
             >{{ pipeline.merge_request.target_branch }}</gl-link
           ><clipboard-button
@@ -167,7 +169,7 @@ export default {
       :toggle-text="selectedStage"
       :items="dropdownItems"
       block
-      class="gl-mt-3"
+      class="gl-mt-2"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/job/sidebar/trigger_block.vue b/app/assets/javascripts/jobs/components/job/sidebar/trigger_block.vue
index c9172fe0322628..315587a3376b03 100644
--- a/app/assets/javascripts/jobs/components/job/sidebar/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/job/sidebar/trigger_block.vue
@@ -68,7 +68,7 @@ export default {
 
     <template v-if="hasVariables">
       <p class="gl-display-flex gl-justify-content-space-between gl-align-items-center">
-        <span class="gl-font-weight-bold">{{ __('Trigger variables:') }}</span>
+        <span class="gl-display-flex gl-font-weight-bold">{{ __('Trigger variables') }}</span>
 
         <gl-button
           v-if="hasValues"
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 9a3f1672d0135f..d25f40b1af9944 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -120,13 +120,12 @@ export default {
 <template>
   <gl-badge
     v-gl-tooltip
-    :class="{ 'gl-pl-0!': isSmallBadgeSize }"
+    :class="{ 'gl-pl-2': isSmallBadgeSize }"
     :title="title"
     :href="detailsPath"
     :size="badgeSize"
     :variant="badgeStyles.variant"
     data-testid="ci-badge-link"
-    data-qa-selector="status_badge_link"
     @click="$emit('ciStatusBadgeClick')"
   >
     <ci-icon :status="status" />
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 4f968197d4e6ce..6c80209bc5c922 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -89,8 +89,6 @@
 }
 
 .right-sidebar.build-sidebar {
-  padding: 0;
-
   &.right-sidebar-collapsed {
     display: none;
   }
@@ -103,29 +101,6 @@
     -webkit-overflow-scrolling: touch;
   }
 
-  .blocks-container {
-    padding: 0 $gl-padding;
-    width: 289px;
-  }
-
-  .trigger-variables-btn-container {
-    justify-content: space-between;
-    align-items: center;
-
-    .trigger-variables-btn {
-      margin-top: -5px;
-      margin-bottom: -5px;
-    }
-  }
-
-  .trigger-build-variables {
-    margin: 0;
-    overflow-x: auto;
-    width: 100%;
-    -ms-overflow-style: scrollbar;
-    -webkit-overflow-scrolling: touch;
-  }
-
   .trigger-build-variable {
     font-weight: $gl-font-weight-normal;
     color: var(--gray-950, $gray-950);
@@ -145,38 +120,20 @@
     vertical-align: top;
   }
 
-  .badge.badge-pill {
-    margin-left: 2px;
+  .blocks-container {
+    width: 289px;
   }
 
-  .stage-item {
-    cursor: pointer;
-
-    &:hover {
-      color: var(--gl-text-color, $gl-text-color);
-    }
+  .block {
+    width: 262px;
   }
 
   .builds-container {
-    background-color: var(--white, $white);
-    border-top: 1px solid var(--border-color, $border-color);
-    border-bottom: 1px solid var(--border-color, $border-color);
-    max-height: 300px;
-    width: 289px;
     overflow: auto;
 
-    a {
-      padding: $gl-padding 10px $gl-padding 40px;
-      width: 270px;
-
-      &:hover {
-        color: var(--gl-text-color, $gl-text-color);
-      }
-    }
-
     .icon-arrow-right {
-      left: 15px;
-      top: 20px;
+      left: 8px;
+      top: 12px;
     }
 
     .build-job {
@@ -195,9 +152,15 @@
   .container-fluid.container-limited {
     max-width: 100%;
   }
+}
+
+.build-sidebar-item {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-gap: $gl-padding-8;
 
-  .content-wrapper {
-    padding-bottom: 6px;
+  &:last-of-type {
+    @include gl-mb-0;
   }
 }
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index fcb6a6f448a40d..9122c1d7d9e9b2 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26610,6 +26610,9 @@ msgstr ""
 msgid "Job Failed #%{build_id}"
 msgstr ""
 
+msgid "Job ID"
+msgstr ""
+
 msgid "Job artifacts"
 msgstr ""
 
@@ -38644,6 +38647,9 @@ msgstr ""
 msgid "Related issues"
 msgstr ""
 
+msgid "Related jobs"
+msgstr ""
+
 msgid "Related merge request %{link_to_merge_request} to merge %{link_to_merge_request_source_branch}"
 msgstr ""
 
@@ -46249,9 +46255,6 @@ msgstr ""
 msgid "Tags this commit to %{tag_name}."
 msgstr ""
 
-msgid "Tags:"
-msgstr ""
-
 msgid "TagsPage|Are you sure you want to delete this tag?"
 msgstr ""
 
@@ -49692,7 +49695,7 @@ msgstr ""
 msgid "Trigger token:"
 msgstr ""
 
-msgid "Trigger variables:"
+msgid "Trigger variables"
 msgstr ""
 
 msgid "Trigger was created successfully."
diff --git a/qa/qa/ee/page/operations_dashboard.rb b/qa/qa/ee/page/operations_dashboard.rb
index f9188fa63011b4..ef29d0b688b39b 100644
--- a/qa/qa/ee/page/operations_dashboard.rb
+++ b/qa/qa/ee/page/operations_dashboard.rb
@@ -42,7 +42,7 @@ def find_project_card_by_name(name)
         end
 
         def pipeline_status(project_card)
-          project_card.find(element_selector_css(:status_badge_link)).text
+          project_card.find(element_selector_css('ci-badge-link')).text
         end
 
         private
diff --git a/qa/qa/page/component/ci_badge_link.rb b/qa/qa/page/component/ci_badge_link.rb
index 485e363d960e38..0fddd1cbf12224 100644
--- a/qa/qa/page/component/ci_badge_link.rb
+++ b/qa/qa/page/component/ci_badge_link.rb
@@ -32,12 +32,12 @@ def self.included(base)
           super
 
           base.view 'app/assets/javascripts/vue_shared/components/ci_badge_link.vue' do
-            element :status_badge_link
+            element 'ci-badge-link'
           end
         end
 
         def status_badge
-          find_element(:status_badge_link).text
+          find_element('ci-badge-link').text
         end
 
         def completed?(timeout: 60)
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index 75cf4406b2ebe3..5a8cee5ef6e90b 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} #{pipeline.status} for #{pipeline.ref}")
+          expect(page).to have_content("Pipeline ##{pipeline.id} #{pipeline.status} for #{pipeline.ref}")
         end
       end
 
@@ -239,7 +239,7 @@
 
           href = new_project_issue_path(project, options)
 
-          page.within('.build-sidebar') do
+          page.within('aside.right-sidebar') do
             expect(find('[data-testid="job-new-issue"]')['href']).to include(href)
           end
         end
diff --git a/spec/frontend/jobs/components/job/job_sidebar_details_container_spec.js b/spec/frontend/jobs/components/job/job_sidebar_details_container_spec.js
index c1028f3929dd88..0b704890d57aeb 100644
--- a/spec/frontend/jobs/components/job/job_sidebar_details_container_spec.js
+++ b/spec/frontend/jobs/components/job/job_sidebar_details_container_spec.js
@@ -53,6 +53,7 @@ describe('Job Sidebar Details Container', () => {
       ['erased_at', 'Erased: 3 weeks ago'],
       ['finished_at', 'Finished: 3 weeks ago'],
       ['queued_duration', 'Queued: 9 seconds'],
+      ['id', 'Job ID: #4757'],
       ['runner', 'Runner: #1 (ABCDEFGH) local ci runner'],
       ['coverage', 'Coverage: 20%'],
     ])('uses %s to render job-%s', async (detail, value) => {
@@ -77,7 +78,7 @@ describe('Job Sidebar Details Container', () => {
       createWrapper();
       await store.dispatch('receiveJobSuccess', job);
 
-      expect(findAllDetailsRow()).toHaveLength(7);
+      expect(findAllDetailsRow()).toHaveLength(8);
     });
 
     describe('duration row', () => {
diff --git a/spec/frontend/jobs/components/job/stages_dropdown_spec.js b/spec/frontend/jobs/components/job/stages_dropdown_spec.js
index 7cc13049a0a7fb..780193b33d060b 100644
--- a/spec/frontend/jobs/components/job/stages_dropdown_spec.js
+++ b/spec/frontend/jobs/components/job/stages_dropdown_spec.js
@@ -77,7 +77,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 +87,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 +99,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 +118,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 }] },
-- 
GitLab