Merge branch '416136-show-triggered-time-ago' into 'master'

Show pipeline created time in pipeline header

See merge request !124630



Merged-by: Alexander Turinske <aturinske@gitlab.com>
Approved-by: Jeremy Elder <jelder@gitlab.com>
Approved-by: Briley Sandlin <bsandlin@gitlab.com>
Approved-by: Alexander Turinske <aturinske@gitlab.com>
Reviewed-by: Alexander Turinske <aturinske@gitlab.com>
Co-authored-by: Payton Burdette <pburdette@gitlab.com>

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

@@ -17,6 +17,7 @@ import { __, s__, sprintf, formatNumber } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import {
   LOAD_FAILURE,
@@ -30,7 +31,6 @@ import cancelPipelineMutation from '../graphql/mutations/cancel_pipeline.mutatio
 import deletePipelineMutation from '../graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '../graphql/mutations/retry_pipeline.mutation.graphql';
 import getPipelineQuery from '../graphql/queries/get_pipeline_header_data.query.graphql';
-import TimeAgo from './pipelines_list/time_ago.vue';
 import { getQueryHeaders } from './graph/utils';
 
 const DELETE_MODAL_ID = 'pipeline-delete-modal';
@@ -54,7 +54,7 @@ export default {
     GlLoadingIcon,
     GlModal,
     GlSprintf,
-    TimeAgo,
+    TimeAgoTooltip,
   },
   directives: {
     GlModal: GlModalDirective,
@@ -90,6 +90,8 @@ export default {
     cancelPipelineText: __('Cancel pipeline'),
     deletePipelineText: __('Delete'),
     clipboardTooltip: __('Copy commit SHA'),
+    createdText: s__('Pipelines|created'),
+    finishedText: s__('Pipelines|finished'),
   },
   errorTexts: {
     [LOAD_FAILURE]: __('We are currently unable to fetch data for the pipeline header.'),
@@ -441,14 +443,14 @@ export default {
               :title="$options.i18n.clipboardTooltip"
               size="small"
             />
-            <time-ago
-              v-if="isFinished"
-              :pipeline="pipeline"
-              class="gl-display-inline gl-mb-0"
-              :display-calendar-icon="false"
-              font-size="gl-font-md"
-              data-testid="pipeline-time-ago"
-            />
+            <span v-if="inProgress" data-testid="pipeline-created-time-ago">
+              {{ $options.i18n.createdText }}
+              <time-ago-tooltip :time="pipeline.createdAt" />
+            </span>
+            <span v-if="isFinished" data-testid="pipeline-finished-time-ago">
+              {{ $options.i18n.finishedText }}
+              <time-ago-tooltip :time="pipeline.finishedAt" />
+            </span>
           </div>
         </div>
         <div v-safe-html="refText" class="gl-mb-2" data-testid="pipeline-ref-text"></div>

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

@@ -14,11 +14,6 @@ export default {
       type: Object,
       required: true,
     },
-    displayCalendarIcon: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
     fontSize: {
       type: String,
       required: false,
@@ -50,13 +45,7 @@ export default {
     </p>
 
     <p v-if="finishedTime" class="finished-at gl-display-inline-flex gl-align-items-center">
-      <gl-icon
-        v-if="displayCalendarIcon"
-        name="calendar"
-        class="gl-mr-2"
-        :size="12"
-        data-testid="calendar-icon"
-      />
+      <gl-icon name="calendar" class="gl-mr-2" :size="12" data-testid="calendar-icon" />
 
       <time
         v-gl-tooltip

ee/spec/features/projects/pipelines/pipeline_spec.rb

@@ -144,7 +144,7 @@
 
           within '[data-testid="pipeline-details-header"]' do
             expect(page).to have_selector('[data-testid="compute-credits"]')
-            expect(page).to have_selector('[data-testid="pipeline-time-ago"]')
+            expect(page).to have_selector('[data-testid="pipeline-finished-time-ago"]')
           end
         end
       end
@@ -155,7 +155,7 @@
 
           within '[data-testid="pipeline-details-header"]' do
             expect(page).not_to have_selector('[data-testid="compute-credits"]')
-            expect(page).not_to have_selector('[data-testid="pipeline-time-ago"]')
+            expect(page).not_to have_selector('[data-testid="pipeline-finished-time-ago"]')
           end
         end
       end

locale/gitlab.pot

@@ -33864,9 +33864,15 @@ msgstr ""
 msgid "Pipelines|Your changes have been successfully committed. Now redirecting to the new merge request page."
 msgstr ""
+msgid "Pipelines|created"
+msgstr ""
+
 msgid "Pipelines|error"
 msgstr ""
+msgid "Pipelines|finished"
+msgstr ""
+
 msgid "Pipelines|invalid"
 msgstr ""

spec/features/projects/pipelines/pipeline_spec.rb

@@ -141,7 +141,7 @@
           visit project_pipeline_path(project, finished_pipeline)
 
           within '[data-testid="pipeline-details-header"]' do
-            expect(page).to have_selector('[data-testid="pipeline-time-ago"]')
+            expect(page).to have_selector('[data-testid="pipeline-finished-time-ago"]')
           end
         end
       end
@@ -151,7 +151,7 @@
           visit_pipeline
 
           within '[data-testid="pipeline-details-header"]' do
-            expect(page).not_to have_selector('[data-testid="pipeline-time-ago"]')
+            expect(page).not_to have_selector('[data-testid="pipeline-finished-time-ago"]')
           end
         end
       end

spec/frontend/pipelines/pipeline_details_header_spec.js

@@ -7,7 +7,6 @@ import waitForPromises from 'helpers/wait_for_promises';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import PipelineDetailsHeader from '~/pipelines/components/pipeline_details_header.vue';
 import { BUTTON_TOOLTIP_RETRY, BUTTON_TOOLTIP_CANCEL } from '~/pipelines/constants';
-import TimeAgo from '~/pipelines/components/pipelines_list/time_ago.vue';
 import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
 import cancelPipelineMutation from '~/pipelines/graphql/mutations/cancel_pipeline.mutation.graphql';
 import deletePipelineMutation from '~/pipelines/graphql/mutations/delete_pipeline.mutation.graphql';
@@ -59,8 +58,10 @@ describe('Pipeline details header', () => {
   const findAlert = () => wrapper.findComponent(GlAlert);
   const findStatus = () => wrapper.findComponent(CiBadgeLink);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
-  const findTimeAgo = () => wrapper.findComponent(TimeAgo);
   const findAllBadges = () => wrapper.findAllComponents(GlBadge);
+  const findDeleteModal = () => wrapper.findComponent(GlModal);
+  const findCreatedTimeAgo = () => wrapper.findByTestId('pipeline-created-time-ago');
+  const findFinishedTimeAgo = () => wrapper.findByTestId('pipeline-finished-time-ago');
   const findPipelineName = () => wrapper.findByTestId('pipeline-name');
   const findCommitTitle = () => wrapper.findByTestId('pipeline-commit-title');
   const findTotalJobs = () => wrapper.findByTestId('total-jobs');
@@ -71,7 +72,6 @@ describe('Pipeline details header', () => {
   const findRetryButton = () => wrapper.findByTestId('retry-pipeline');
   const findCancelButton = () => wrapper.findByTestId('cancel-pipeline');
   const findDeleteButton = () => wrapper.findByTestId('delete-pipeline');
-  const findDeleteModal = () => wrapper.findComponent(GlModal);
   const findPipelineUserLink = () => wrapper.findByTestId('pipeline-user-link');
   const findPipelineDuration = () => wrapper.findByTestId('pipeline-duration-text');
 
@@ -232,12 +232,20 @@ describe('Pipeline details header', () => {
       expect(findComputeCredits().exists()).toBe(false);
     });
 
-    it('displays time ago', async () => {
+    it('does not display created time ago', async () => {
+      createComponent();
+
+      await waitForPromises();
+
+      expect(findCreatedTimeAgo().exists()).toBe(false);
+    });
+
+    it('displays finished time ago', async () => {
       createComponent();
 
       await waitForPromises();
 
-      expect(findTimeAgo().exists()).toBe(true);
+      expect(findFinishedTimeAgo().exists()).toBe(true);
     });
 
     it('displays pipeline duartion text', async () => {
@@ -262,8 +270,8 @@ describe('Pipeline details header', () => {
       expect(findComputeCredits().exists()).toBe(false);
     });
 
-    it('does not display time ago', () => {
-      expect(findTimeAgo().exists()).toBe(false);
+    it('does not display finished time ago', () => {
+      expect(findFinishedTimeAgo().exists()).toBe(false);
     });
 
     it('does not display pipeline duration text', () => {
@@ -273,6 +281,10 @@ describe('Pipeline details header', () => {
     it('displays pipeline running text', () => {
       expect(findPipelineRunningText()).toBe('In progress, queued for 3,600 seconds');
     });
+
+    it('displays created time ago', () => {
+      expect(findCreatedTimeAgo().exists()).toBe(true);
+    });
   });
 
   describe('running pipeline with duration', () => {

spec/frontend/pipelines/time_ago_spec.js

@@ -65,22 +65,11 @@ describe('Timeago component', () => {
       expect(time.exists()).toBe(true);
     });
 
-    it('should display calendar icon by default', () => {
+    it('should display calendar icon', () => {
       createComponent({ duration: 0, finished_at: '2017-04-26T12:40:23.277Z' });
 
       expect(findCalendarIcon().exists()).toBe(true);
     });
-
-    it('should hide calendar icon if correct prop is passed', () => {
-      createComponent(
-        { duration: 0, finished_at: '2017-04-26T12:40:23.277Z' },
-        {
-          displayCalendarIcon: false,
-        },
-      );
-
-      expect(findCalendarIcon().exists()).toBe(false);
-    });
   });
 
   describe('without finishedTime', () => {