Merge branch '443786_clarify_action_timestamp' into 'master'

Clarify action timestamp on Deployment page

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/147084



Merged-by: Andrew Fontaine <afontaine@gitlab.com>
Approved-by: Emily Bauman <ebauman@gitlab.com>
Approved-by: Andrew Fontaine <afontaine@gitlab.com>
Reviewed-by: Andrew Fontaine <afontaine@gitlab.com>
Co-authored-by: Phawin Khongkhasawan <lifez999@gmail.com>

app/assets/javascripts/environments/components/deployment.vue

@@ -5,6 +5,7 @@ import {
   GlIcon,
   GlLink,
   GlLoadingIcon,
+  GlSprintf,
   GlTooltipDirective as GlTooltip,
   GlTruncate,
 } from '@gitlab/ui';
@@ -24,6 +25,7 @@ export default {
     GlBadge,
     GlIcon,
     GlLink,
+    GlSprintf,
     GlTruncate,
     GlLoadingIcon,
     TimeAgoTooltip,
@@ -61,6 +63,12 @@ export default {
     shortSha() {
       return this.commit?.shortId;
     },
+    timeStamp() {
+      return this.deployment?.deployedAt ? __('Deployed %{timeago}') : __('Created %{timeago}');
+    },
+    displayTimeAgo() {
+      return this.deployment?.deployedAt || this.deployment?.createdAt;
+    },
     createdAt() {
       return this.deployment?.createdAt;
     },
@@ -207,10 +215,19 @@ export default {
               size="small"
             />
           </div>
-          <time-ago-tooltip v-if="createdAt" :time="createdAt" class="gl-display-flex">
+          <time-ago-tooltip
+            v-if="displayTimeAgo"
+            :time="displayTimeAgo"
+            class="gl-display-flex"
+            data-testid="deployment-timestamp"
+          >
             <template #default="{ timeAgo }">
               <gl-icon name="calendar" class="gl-mr-2" />
-              <span class="gl-mr-2 gl-white-space-nowrap">{{ timeAgo }}</span>
+              <span class="gl-mr-2 gl-white-space-nowrap">
+                <gl-sprintf :message="timeStamp">
+                  <template #timeago>{{ timeAgo }}</template>
+                </gl-sprintf>
+              </span>
             </template>
           </time-ago-tooltip>
         </div>

locale/gitlab.pot

@@ -15152,6 +15152,9 @@ msgstr ""
 msgid "Created %{time_ago}"
 msgstr ""
+msgid "Created %{timeago}"
+msgstr ""
+
 msgid "Created %{timestamp}"
 msgstr ""
@@ -17415,6 +17418,9 @@ msgstr ""
 msgid "Deployed"
 msgstr ""
+msgid "Deployed %{timeago}"
+msgstr ""
+
 msgid "Deployed to"
 msgstr ""

spec/frontend/environments/deployment_spec.js

@@ -153,16 +153,22 @@ describe('~/environments/components/deployment.vue', () => {
       });
     });
   });
-
-  describe('created at time', () => {
+  describe('deployedAt', () => {
     describe('is present', () => {
       it('shows the timestamp the deployment was deployed at', () => {
         wrapper = createWrapper();
-        const date = wrapper.findByTitle(
-          localeDateFormat.asDateTimeFull.format(deployment.createdAt),
-        );
+        const date = wrapper.findByTestId('deployment-timestamp');
+        expect(date.text()).toBe('Deployed 1 day ago');
+      });
+    });
+  });
+  describe('created at time', () => {
+    describe('is present and deploymentAt is null', () => {
+      it('shows the timestamp the deployment was created at', () => {
+        wrapper = createWrapper({ propsData: { deployment: { ...deployment, deployedAt: null } } });
 
-        expect(date.text()).toBe('1 day ago');
+        const date = wrapper.findByTestId('deployment-timestamp');
+        expect(date.text()).toBe('Created 1 day ago');
       });
     });
     describe('is not present', () => {