Display in progess for duration

When pipeline has not finished
running show an in progress to
the user until it has finished.

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -8,6 +8,7 @@ import PipelinesMixin from '~/pipelines/mixins/pipelines_mixin';
 import PipelinesService from '~/pipelines/services/pipelines_service';
 import PipelineStore from '~/pipelines/stores/pipelines_store';
 import TablePagination from '~/vue_shared/components/pagination/table_pagination.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
   components: {
@@ -19,7 +20,7 @@ export default {
     TablePagination,
     SvgBlankState,
   },
-  mixins: [PipelinesMixin],
+  mixins: [PipelinesMixin, glFeatureFlagMixin()],
   props: {
     endpoint: {
       type: String,
@@ -90,6 +91,9 @@ export default {
     canRenderPipelineButton() {
       return this.latestPipelineDetachedFlag;
     },
+    pipelineButtonClass() {
+      return !this.glFeatures.newPipelinesTable ? 'gl-md-display-none' : 'gl-lg-display-none';
+    },
     isForkMergeRequest() {
       return this.sourceProjectFullPath !== this.targetProjectFullPath;
     },
@@ -192,7 +196,8 @@ export default {
       <gl-button
         v-if="canRenderPipelineButton"
         block
-        class="gl-mt-3 gl-mb-3 gl-md-display-none"
+        class="gl-mt-3 gl-mb-3"
+        :class="pipelineButtonClass"
         variant="success"
         data-testid="run_pipeline_button_mobile"
         :loading="state.isRunningMergeRequestPipeline"

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

@@ -48,6 +48,9 @@ export default {
     legacyTableMobileClass() {
       return !this.glFeatures.newPipelinesTable ? 'table-mobile-content' : '';
     },
+    showInProgress() {
+      return !this.duration && !this.finishedTime;
+    },
   },
 };
 </script>
@@ -57,6 +60,11 @@ export default {
       {{ s__('Pipeline|Duration') }}
     </div>
     <div :class="legacyTableMobileClass">
+      <span v-if="showInProgress" data-testid="pipeline-in-progress">
+        <gl-icon name="hourglass" class="gl-vertical-align-baseline! gl-mr-2" :size="12" />
+        {{ s__('Pipeline|In progress') }}
+      </span>
+
       <p v-if="duration" class="duration">
         <gl-icon name="timer" class="gl-vertical-align-baseline!" :size="12" />
         {{ durationFormatted }}

changelogs/unreleased/pb-add-hourglass-icon-to-empty-duration-cell.yml

+---
+title: Display in progress for pipeline duration cell when pipeline has not finished running
+merge_request: 56266
+author:
+type: changed

locale/gitlab.pot

@@ -22501,6 +22501,9 @@ msgstr ""
 msgid "Pipeline|Failed"
 msgstr ""
 
+msgid "Pipeline|In progress"
+msgstr ""
+
 msgid "Pipeline|Key"
 msgstr ""
 

spec/frontend/pipelines/time_ago_spec.js

@@ -29,6 +29,7 @@ describe('Timeago component', () => {
 
   const duration = () => wrapper.find('.duration');
   const finishedAt = () => wrapper.find('.finished-at');
+  const findInProgress = () => wrapper.find('[data-testid="pipeline-in-progress"]');
 
   describe('with duration', () => {
     beforeEach(() => {
@@ -77,4 +78,21 @@ describe('Timeago component', () => {
       expect(finishedAt().exists()).toBe(false);
     });
   });
+
+  describe('in progress', () => {
+    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({ duration: durationTime, finished_at: finishedAtTime });
+
+        expect(findInProgress().exists()).toBe(shouldShow);
+      },
+    );
+  });
 });