Show correct deployment date for a manual job56130-operations-environments-shows-incorrect-deployment-date-for-manual-deploy-jobs

Only display time if the job has deployed

Update JS tests for displaying job deployment time

Simplify boolean check in deployedDate

4 files changed, 15 insertions, 19 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 95e1e8af9b3..1d4a6e64f9d 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -111,12 +111,7 @@ export default {
      * @returns {Boolean|Undefined}
      */
     canShowDate() {
-      return (
-        this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable !== undefined
-      );
+      return this.model && this.model.last_deployment && this.model.last_deployment.deployed_at;
     },
 
     /**
@@ -124,14 +119,9 @@ export default {
      *
      * @returns {String}
      */
-    createdDate() {
-      if (
-        this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable.created_at
-      ) {
-        return timeagoInstance.format(this.model.last_deployment.deployable.created_at);
+    deployedDate() {
+      if (this.canShowDate) {
+        return timeagoInstance.format(this.model.last_deployment.deployed_at);
       }
       return '';
     },
@@ -547,7 +537,7 @@ export default {
     <div v-if="!model.isFolder" class="table-section section-10" role="gridcell">
       <div role="rowheader" class="table-mobile-header">{{ s__('Environments|Updated') }}</div>
       <span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content">
-        {{ createdDate }}
+        {{ deployedDate }}
       </span>
     </div>
 
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index a11e23b6daa..1dd85c89fd0 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -22,7 +22,8 @@
 
   .table-section.section-15{ role: 'gridcell' }
     .table-mobile-header{ role: 'rowheader' }= _("Created")
-    %span.table-mobile-content= time_ago_with_tooltip(deployment.created_at)
+    - if deployment.deployed_at
+      %span.table-mobile-content= time_ago_with_tooltip(deployment.deployed_at)
 
   .table-section.section-20.table-button-footer{ role: 'gridcell' }
     .btn-group.table-action-buttons
diff --git a/changelogs/unreleased/56130-operations-environments-shows-incorrect-deployment-date-for-manual-.yml b/changelogs/unreleased/56130-operations-environments-shows-incorrect-deployment-date-for-manual-.yml
new file mode 100644
index 00000000000..92f25ac07e2
--- /dev/null
+++ b/changelogs/unreleased/56130-operations-environments-shows-incorrect-deployment-date-for-manual-.yml
@@ -0,0 +1,6 @@
+---
+title: Update the timestamp in Operations > Environments to show correct deployment
+  date for manual deploy jobs
+merge_request: 32072
+author:
+type: fixed
diff --git a/spec/javascripts/environments/environment_item_spec.js b/spec/javascripts/environments/environment_item_spec.js
index 388d7063d13..f9ee4648128 100644
--- a/spec/javascripts/environments/environment_item_spec.js
+++ b/spec/javascripts/environments/environment_item_spec.js
@@ -106,6 +106,7 @@ describe('Environment item', () => {
               play_path: '/play',
             },
           ],
+          deployed_at: '2016-11-29T18:11:58.430Z',
         },
         has_stop_action: true,
         environment_path: 'root/ci-folders/environments/31',
@@ -139,9 +140,7 @@ describe('Environment item', () => {
 
       it('should render last deployment date', () => {
         const timeagoInstance = new timeago(); // eslint-disable-line
-        const formatedDate = timeagoInstance.format(
-          environment.last_deployment.deployable.created_at,
-        );
+        const formatedDate = timeagoInstance.format(environment.last_deployment.deployed_at);
 
         expect(
           component.$el.querySelector('.environment-created-date-timeago').textContent,