Use job name for primary identifier on ci header

app/assets/javascripts/jobs/components/job_app.vue

@@ -5,7 +5,7 @@ import { throttle, isEmpty } from 'lodash';
 import { mapGetters, mapState, mapActions } from 'vuex';
 import CodeQualityWalkthrough from '~/code_quality_walkthrough/components/step.vue';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
-import { sprintf } from '~/locale';
+import { __, sprintf } from '~/locale';
 import CiHeader from '~/vue_shared/components/header_ci_component.vue';
 import delayedJobMixin from '../mixins/delayed_job_mixin';
 import EmptyState from './empty_state.vue';
@@ -126,6 +126,9 @@ export default {
     shouldRenderCodeQualityWalkthrough() {
       return this.job.status.group === 'failed-with-warnings';
     },
+    itemName() {
+      return sprintf(__('Job %{jobName}'), { jobName: this.job.name });
+    },
   },
   watch: {
     // Once the job log is loaded,
@@ -205,12 +208,11 @@ export default {
           <div class="build-header top-area">
             <ci-header
               :status="job.status"
-              :item-id="job.id"
               :time="headerTime"
               :user="job.user"
               :has-sidebar-button="true"
               :should-render-triggered-label="shouldRenderTriggeredLabel"
-              :item-name="__('Job')"
+              :item-name="itemName"
               @clickedSidebarButton="toggleSidebar"
             />
           </div>

app/assets/javascripts/pipelines/components/header_component.vue

@@ -218,7 +218,7 @@ export default {
       :status="pipeline.detailedStatus"
       :time="pipeline.createdAt"
       :user="pipeline.user"
-      :item-id="Number(pipelineId)"
+      :item-id="pipelineId"
       item-name="Pipeline"
     >
       <gl-button

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -37,8 +37,9 @@ export default {
       required: true,
     },
     itemId: {
-      type: Number,
-      required: true,
+      type: String,
+      required: false,
+      default: '',
     },
     time: {
       type: String,
@@ -86,6 +87,13 @@ export default {
     message() {
       return this.user?.status?.message;
     },
+    item() {
+      if (this.itemId) {
+        return `${this.itemName} #${this.itemId}`;
+      }
+
+      return this.itemName;
+    },
   },
 
   methods: {
@@ -106,7 +114,7 @@ export default {
     <section class="header-main-content gl-mr-3">
       <ci-icon-badge :status="status" />
 
-      <strong data-testid="ci-header-item-text"> {{ itemName }} #{{ itemId }} </strong>
+      <strong data-testid="ci-header-item-text">{{ item }}</strong>
 
       <template v-if="shouldRenderTriggeredLabel">{{ __('triggered') }}</template>
       <template v-else>{{ __('created') }}</template>

locale/gitlab.pot

@@ -19351,6 +19351,9 @@ msgstr ""
 msgid "Job"
 msgstr ""
 
+msgid "Job %{jobName}"
+msgstr ""
+
 msgid "Job Failed #%{build_id}"
 msgstr ""
 

spec/features/projects/jobs/permissions_spec.rb

@@ -90,7 +90,7 @@ RSpec.describe 'Project Jobs Permissions' do
 
         it_behaves_like 'recent job page details responds with status', 200 do
           it 'renders job details', :js do
-            expect(page).to have_content "Job ##{job.id}"
+            expect(page).to have_content "Job #{job.name}"
             expect(page).to have_css '.log-line'
           end
         end

spec/features/projects/jobs/user_browses_job_spec.rb

@@ -21,7 +21,7 @@ RSpec.describe 'User browses a job', :js do
   it 'erases the job log', :js do
     wait_for_requests
 
-    expect(page).to have_content("Job ##{build.id}")
+    expect(page).to have_content("Job #{build.name}")
     expect(page).to have_css('.job-log')
 
     # scroll to the top of the page first

spec/frontend/jobs/components/job_app_spec.js

@@ -140,7 +140,7 @@ describe('Job App', () => {
 
         it('should render provided job information', () => {
           expect(wrapper.find('.header-main-content').text().replace(/\s+/g, ' ').trim()).toContain(
-            'passed Job #4757 triggered 1 year ago by Root',
+            'passed Job test triggered 1 year ago by Root',
           );
         });
 
@@ -154,7 +154,7 @@ describe('Job App', () => {
           setupAndMount().then(() => {
             expect(
               wrapper.find('.header-main-content').text().replace(/\s+/g, ' ').trim(),
-            ).toContain('passed Job #4757 created 3 weeks ago by Root');
+            ).toContain('passed Job test created 3 weeks ago by Root');
           }));
       });
     });

spec/frontend/pipelines/header_component_spec.js

@@ -24,7 +24,7 @@ describe('Pipeline details header', () => {
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
   const defaultProvideOptions = {
-    pipelineId: 14,
+    pipelineId: '14',
     pipelineIid: 1,
     paths: {
       pipelinesPath: '/namespace/my-project/-/pipelines',

spec/frontend/vue_shared/components/header_ci_component_spec.js

@@ -16,8 +16,6 @@ describe('Header CI Component', () => {
       text: 'failed',
       details_path: 'path',
     },
-    itemName: 'job',
-    itemId: 123,
     time: '2017-05-08T14:57:39.781Z',
     user: {
       web_url: 'path',
@@ -55,17 +53,13 @@ describe('Header CI Component', () => {
 
   describe('render', () => {
     beforeEach(() => {
-      createComponent();
+      createComponent({ itemName: 'Pipeline' });
     });
 
     it('should render status badge', () => {
       expect(findIconBadge().exists()).toBe(true);
     });
 
-    it('should render item name and id', () => {
-      expect(findHeaderItemText().text()).toBe('job #123');
-    });
-
     it('should render timeago date', () => {
       expect(findTimeAgo().exists()).toBe(true);
     });
@@ -83,9 +77,29 @@ describe('Header CI Component', () => {
     });
   });
 
+  describe('with item id', () => {
+    beforeEach(() => {
+      createComponent({ itemName: 'Pipeline', itemId: '123' });
+    });
+
+    it('should render item name and id', () => {
+      expect(findHeaderItemText().text()).toBe('Pipeline #123');
+    });
+  });
+
+  describe('without item id', () => {
+    beforeEach(() => {
+      createComponent({ itemName: 'Job build_job' });
+    });
+
+    it('should render item name', () => {
+      expect(findHeaderItemText().text()).toBe('Job build_job');
+    });
+  });
+
   describe('slot', () => {
     it('should render header action buttons', () => {
-      createComponent({}, { slots: { default: 'Test Actions' } });
+      createComponent({ itemName: 'Job build_job' }, { slots: { default: 'Test Actions' } });
 
       expect(findActionButtons().exists()).toBe(true);
       expect(findActionButtons().text()).toBe('Test Actions');
@@ -94,7 +108,7 @@ describe('Header CI Component', () => {
 
   describe('shouldRenderTriggeredLabel', () => {
     it('should render created keyword when the shouldRenderTriggeredLabel is false', () => {
-      createComponent({ shouldRenderTriggeredLabel: false });
+      createComponent({ shouldRenderTriggeredLabel: false, itemName: 'Job build_job' });
 
       expect(wrapper.text()).toContain('created');
       expect(wrapper.text()).not.toContain('triggered');