Merge branch '327633-Time-label-is-misleading-on-the-job-details-page' into 'master'

Change job duration label to 'Elapsed time' when in progress

See merge request gitlab-org/gitlab!75811

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

@@ -20,6 +20,9 @@ export default {
     duration() {
       return timeIntervalInWords(this.job.duration);
     },
+    durationTitle() {
+      return this.job.finished_at ? __('Duration') : __('Elapsed time');
+    },
     erasedAt() {
       return this.timeFormatted(this.job.erased_at);
     },
@@ -76,7 +79,7 @@ export default {
 
 <template>
   <div v-if="shouldRenderBlock">
-    <detail-row v-if="job.duration" :value="duration" title="Duration" />
+    <detail-row v-if="job.duration" :value="duration" :title="durationTitle" />
     <detail-row
       v-if="job.finished_at"
       :value="finishedAt"

spec/frontend/jobs/components/job_sidebar_details_container_spec.js

@@ -56,7 +56,7 @@ describe('Job Sidebar Details Container', () => {
     beforeEach(createWrapper);
 
     it.each([
-      ['duration', 'Duration: 6 seconds'],
+      ['duration', 'Elapsed time: 6 seconds'],
       ['erased_at', 'Erased: 3 weeks ago'],
       ['finished_at', 'Finished: 3 weeks ago'],
       ['queued', 'Queued: 9 seconds'],
@@ -86,6 +86,15 @@ describe('Job Sidebar Details Container', () => {
 
       expect(findAllDetailsRow()).toHaveLength(7);
     });
+
+    describe('duration row', () => {
+      it('renders all the details components', async () => {
+        createWrapper();
+        await store.dispatch('receiveJobSuccess', job);
+
+        expect(findAllDetailsRow().at(0).text()).toBe('Duration: 6 seconds');
+      });
+    });
   });
 
   describe('timeout', () => {