Show skipped duration

Show the skipped duration
state for any pipelines that
are skipped.

app/assets/javascripts/pipelines/components/pipelines_list/time_ago.vue

@@ -22,6 +22,9 @@ export default {
     finishedTime() {
       return this.pipeline?.details?.finished_at;
     },
+    skipped() {
+      return this.pipeline?.details?.status?.label === 'skipped';
+    },
     durationFormatted() {
       const date = new Date(this.duration * 1000);
 
@@ -48,16 +51,11 @@ export default {
     legacyTableMobileClass() {
       return !this.glFeatures.newPipelinesTable ? 'table-mobile-content' : '';
     },
-    singleStagePipelineManual() {
-      return (
-        this.pipeline.details.manual_actions.length > 0 && this.pipeline.details.stages.length === 1
-      );
-    },
     showInProgress() {
-      return !this.duration && !this.finishedTime && !this.singleStagePipelineManual;
+      return !this.duration && !this.finishedTime && !this.skipped;
     },
     showSkipped() {
-      return !this.duration && !this.finishedTime && this.singleStagePipelineManual;
+      return !this.duration && !this.finishedTime && this.skipped;
     },
   },
 };

changelogs/unreleased/pb-fix-duration-for-skipped-pipeline.yml

+---
+title: Show skipped duration state for all skipped pipelines
+merge_request: 57242
+author:
+type: changed

spec/frontend/pipelines/time_ago_spec.js

@@ -5,41 +5,6 @@ import TimeAgo from '~/pipelines/components/pipelines_list/time_ago.vue';
 describe('Timeago component', () => {
   let wrapper;
 
-  const mutlipleStages = {
-    manual_actions: [
-      {
-        name: 'deploy_job',
-        path: '/root/one-stage-manual/-/jobs/1930/play',
-        playable: true,
-        scheduled: false,
-      },
-    ],
-    stages: [
-      {
-        name: 'deploy',
-      },
-      {
-        name: 'qa',
-      },
-    ],
-  };
-
-  const singleStageManual = {
-    manual_actions: [
-      {
-        name: 'deploy_job',
-        path: '/root/one-stage-manual/-/jobs/1930/play',
-        playable: true,
-        scheduled: false,
-      },
-    ],
-    stages: [
-      {
-        name: 'deploy',
-      },
-    ],
-  };
-
   const createComponent = (props = {}) => {
     wrapper = shallowMount(TimeAgo, {
       propsData: {
@@ -82,7 +47,7 @@ describe('Timeago component', () => {
 
   describe('without duration', () => {
     beforeEach(() => {
-      createComponent({ ...singleStageManual, duration: 0, finished_at: '' });
+      createComponent({ duration: 0, finished_at: '' });
     });
 
     it('should not render duration and timer svg', () => {
@@ -107,7 +72,7 @@ describe('Timeago component', () => {
 
   describe('without finishedTime', () => {
     beforeEach(() => {
-      createComponent({ ...singleStageManual, duration: 0, finished_at: '' });
+      createComponent({ duration: 0, finished_at: '' });
     });
 
     it('should not render time and calendar icon', () => {
@@ -126,7 +91,6 @@ describe('Timeago component', () => {
       'progress state shown: $shouldShow when pipeline duration is $durationTime and finished_at is $finishedAtTime',
       ({ durationTime, finishedAtTime, shouldShow }) => {
         createComponent({
-          ...mutlipleStages,
           duration: durationTime,
           finished_at: finishedAtTime,
         });
@@ -138,24 +102,13 @@ describe('Timeago component', () => {
   });
 
   describe('skipped', () => {
-    it.each`
-      durationTime | finishedAtTime                | shouldShow
-      ${10}        | ${'2017-04-26T12:40:23.277Z'} | ${false}
-      ${10}        | ${''}                         | ${false}
-      ${0}         | ${'2017-04-26T12:40:23.277Z'} | ${false}
-      ${0}         | ${''}                         | ${true}
-    `(
-      'progress state shown: $shouldShow when pipeline duration is $durationTime and finished_at is $finishedAtTime',
-      ({ durationTime, finishedAtTime, shouldShow }) => {
-        createComponent({
-          ...singleStageManual,
-          duration: durationTime,
-          finished_at: finishedAtTime,
-        });
+    it('should show skipped if pipeline was skipped', () => {
+      createComponent({
+        status: { label: 'skipped' },
+      });
 
-        expect(findSkipped().exists()).toBe(shouldShow);
-        expect(findInProgress().exists()).toBe(false);
-      },
-    );
+      expect(findSkipped().exists()).toBe(true);
+      expect(findInProgress().exists()).toBe(false);
+    });
   });
 });