Merge branch '326197-change-runner-identifiers-job-sidebar-admin-list' into 'master'

Display runner identifiers consistently

See merge request gitlab-org/gitlab!58904

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

@@ -51,7 +51,9 @@ export default {
       });
     },
     runnerId() {
-      return `${this.job.runner.description} (#${this.job.runner.id})`;
+      const { id, short_sha: token, description } = this.job?.runner;
+
+      return `#${id} (${token}) ${description}`;
     },
     shouldRenderBlock() {
       return Boolean(this.hasAnyDetail || this.hasTimeout || this.hasTags);

app/serializers/runner_entity.rb

@@ -3,7 +3,7 @@
 class RunnerEntity < Grape::Entity
   include RequestAwareEntity
 
-  expose :id, :description
+  expose :id, :description, :short_sha
 
   expose :edit_path, if: -> (*) { can_edit_runner? } do |runner|
     edit_project_runner_path(project, runner)

app/views/admin/runners/_runner.html.haml

+-# Note: This file should stay aligned with:
+-# `app/views/groups/runners/_runner.html.haml`
+
 .gl-responsive-table-row{ id: dom_id(runner) }
   .table-section.section-10.section-wrap
     .table-mobile-header{ role: 'rowheader' }= _('Type')
@@ -13,14 +16,12 @@
       - unless runner.active?
         %span.badge.badge-pill.gl-badge.sm.badge-danger= _("paused")
 
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
     .table-mobile-content
-      = link_to runner.short_sha, admin_runner_path(runner)
-
-  .table-section.section-20
-    .table-mobile-header{ role: 'rowheader' }= _('Description')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
+      = link_to("##{runner.id} (#{runner.short_sha})", admin_runner_path(runner))
+      .gl-text-truncate
+        %span{ title: runner.description, data: { toggle: 'tooltip', container: 'body' } }
           = runner.description
 
   .table-section.section-10

app/views/admin/runners/index.html.haml

@@ -122,8 +122,7 @@
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
         .table-section.section-10{ role: 'rowheader' }= _('Type/State')
-        .table-section.section-10{ role: 'rowheader' }= _('Runner token')
-        .table-section.section-20{ role: 'rowheader' }= _('Description')
+        .table-section.section-30{ role: 'rowheader' }= s_('Runners|Runner')
         .table-section.section-10{ role: 'rowheader' }= _('Version')
         .table-section.section-10{ role: 'rowheader' }= _('IP Address')
         .table-section.section-5{ role: 'rowheader' }= _('Projects')

app/views/groups/runners/_index.html.haml

@@ -86,8 +86,7 @@
     .table-holder
       .gl-responsive-table-row.table-row-header{ role: 'row' }
         .table-section.section-10{ role: 'rowheader' }= _('Type/State')
-        .table-section.section-10{ role: 'rowheader' }= _('Runner token')
-        .table-section.section-20{ role: 'rowheader' }= _('Description')
+        .table-section.section-30{ role: 'rowheader' }= s_('Runners|Runner')
         .table-section.section-10{ role: 'rowheader' }= _('Version')
         .table-section.section-10{ role: 'rowheader' }= _('IP Address')
         .table-section.section-5{ role: 'rowheader' }= _('Projects')

app/views/groups/runners/_runner.html.haml

+-# Note: This file should stay aligned with:
+-# `app/views/admin/runners/_runner.html.haml`
+
 .gl-responsive-table-row{ id: dom_id(runner) }
   .table-section.section-10.section-wrap
     .table-mobile-header{ role: 'rowheader' }= _('Type')
@@ -15,14 +18,12 @@
         %span.badge.badge-pill.gl-badge.sm.badge-danger
           = _('paused')
 
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
+  .table-section.section-30
+    .table-mobile-header{ role: 'rowheader' }= s_('Runners|Runner')
     .table-mobile-content
-      = link_to runner.short_sha, group_runner_path(@group, runner)
-
-  .table-section.section-20
-    .table-mobile-header{ role: 'rowheader' }= _('Description')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
+      = link_to("##{runner.id} (#{runner.short_sha})", group_runner_path(@group, runner))
+      .gl-text-truncate
+        %span{ title: runner.description, data: { toggle: 'tooltip', container: 'body' } }
           = runner.description
 
   .table-section.section-10

changelogs/unreleased/326197-change-runner-identifiers-job-sidebar-admin-list.yml

+---
+title: Display runner token and description consistently in the job sidebar and admin
+  list
+merge_request: 58904
+author:
+type: changed

locale/gitlab.pot

@@ -27181,9 +27181,6 @@ msgstr ""
 msgid "Runner API"
 msgstr ""
 
-msgid "Runner token"
-msgstr ""
-
 msgid "Runner tokens"
 msgstr ""
 
@@ -27271,6 +27268,9 @@ msgstr ""
 msgid "Runners|Revision"
 msgstr ""
 
+msgid "Runners|Runner"
+msgstr ""
+
 msgid "Runners|Runner #%{runner_id}"
 msgstr ""
 

spec/frontend/jobs/components/job_sidebar_details_container_spec.js

@@ -34,11 +34,22 @@ describe('Job Sidebar Details Container', () => {
   });
 
   describe('when no details are available', () => {
-    it('should render an empty container', () => {
+    beforeEach(() => {
       createWrapper();
+    });
 
+    it('should render an empty container', () => {
       expect(wrapper.html()).toBe('');
     });
+
+    it.each(['duration', 'erased_at', 'finished_at', 'queued', 'runner', 'coverage'])(
+      'should not render %s details when missing',
+      async (detail) => {
+        await store.dispatch('receiveJobSuccess', { [detail]: undefined });
+
+        expect(findAllDetailsRow()).toHaveLength(0);
+      },
+    );
   });
 
   describe('when some of the details are available', () => {
@@ -49,7 +60,7 @@ describe('Job Sidebar Details Container', () => {
       ['erased_at', 'Erased: 3 weeks ago'],
       ['finished_at', 'Finished: 3 weeks ago'],
       ['queued', 'Queued: 9 seconds'],
-      ['runner', 'Runner: local ci runner (#1)'],
+      ['runner', 'Runner: #1 (ABCDEFGH) local ci runner'],
       ['coverage', 'Coverage: 20%'],
     ])('uses %s to render job-%s', async (detail, value) => {
       await store.dispatch('receiveJobSuccess', { [detail]: job[detail] });

spec/frontend/jobs/mock_data.js

@@ -958,6 +958,7 @@ export default {
   artifacts: [null],
   runner: {
     id: 1,
+    short_sha: 'ABCDEFGH',
     description: 'local ci runner',
     edit_path: '/root/ci-mock/runners/1/edit',
   },

spec/serializers/runner_entity_spec.rb

@@ -20,6 +20,7 @@ RSpec.describe RunnerEntity do
     it 'contains required fields' do
       expect(subject).to include(:id, :description)
       expect(subject).to include(:edit_path)
+      expect(subject).to include(:short_sha)
     end
   end
 end