Merge branch '24844-environments-date' into 'master'

Resolve "Environments displaying incorrect date since 8.14 upgrade"

## What does this MR do?
Shows the correct date in the environments table.

## Are there points in the code the reviewer needs to double check?

## Why was this MR needed?
Date shown was not the correct one.
## Screenshots (if relevant)

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [x] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #24844

See merge request !7830

3 files changed, 34 insertions, 4 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.js.es6 b/app/assets/javascripts/environments/components/environment_item.js.es6
index 07f49cce3dc..7ead8a18c2a 100644
--- a/app/assets/javascripts/environments/components/environment_item.js.es6
+++ b/app/assets/javascripts/environments/components/environment_item.js.es6
@@ -23,6 +23,7 @@
 
   window.gl = window.gl || {};
   window.gl.environmentsList = window.gl.environmentsList || {};
+  window.gl.environmentsList.timeagoInstance = new timeago(); // eslint-disable-line
 
   gl.environmentsList.EnvironmentItem = Vue.component('environment-item', {
 
@@ -148,14 +149,25 @@
       },
 
       /**
+       * Verifies if the date to be shown is present.
+       *
+       * @returns {Boolean|Undefined}
+       */
+      canShowDate() {
+        return this.model.last_deployment &&
+          this.model.last_deployment.deployable &&
+          this.model.last_deployment.deployable !== undefined;
+      },
+
+      /**
        * Human readable date.
        *
        * @returns {String}
        */
       createdDate() {
-        const timeagoInstance = new timeago(); // eslint-disable-line
-
-        return timeagoInstance.format(this.model.created_at);
+        return window.gl.environmentsList.timeagoInstance.format(
+          this.model.last_deployment.deployable.created_at,
+        );
       },
 
       /**
@@ -453,7 +465,7 @@
 
         <td>
           <span
-            v-if="!isFolder && model.last_deployment"
+            v-if="!isFolder && canShowDate"
             class="environment-created-date-timeago">
             {{createdDate}}
           </span>
diff --git a/changelogs/unreleased/24844-environments-date.yml b/changelogs/unreleased/24844-environments-date.yml
new file mode 100644
index 00000000000..2bc23d40a68
--- /dev/null
+++ b/changelogs/unreleased/24844-environments-date.yml
@@ -0,0 +1,4 @@
+---
+title: Fixes Environments displaying incorrect date since 8.14 upgrade
+merge_request:
+author:
diff --git a/spec/javascripts/environments/environment_item_spec.js.es6 b/spec/javascripts/environments/environment_item_spec.js.es6
index 14e90a9dd1b..5d7c6b2411d 100644
--- a/spec/javascripts/environments/environment_item_spec.js.es6
+++ b/spec/javascripts/environments/environment_item_spec.js.es6
@@ -1,4 +1,5 @@
 //= require vue
+//= require timeago
 //= require environments/components/environment_item
 
 describe('Environment item', () => {
@@ -109,6 +110,8 @@ describe('Environment item', () => {
             name: 'deploy',
             build_path: '/root/ci-folders/builds/1279',
             retry_path: '/root/ci-folders/builds/1279/retry',
+            created_at: '2016-11-29T18:11:58.430Z',
+            updated_at: '2016-11-29T18:11:58.430Z',
           },
           manual_actions: [
             {
@@ -149,6 +152,17 @@ describe('Environment item', () => {
         ).toContain('#');
       });
 
+      it('should render last deployment date', () => {
+        const timeagoInstance = new timeago(); // eslint-disable-line
+        const formatedDate = timeagoInstance.format(
+          environment.last_deployment.deployable.created_at,
+        );
+
+        expect(
+          component.$el.querySelector('.environment-created-date-timeago').textContent,
+        ).toContain(formatedDate);
+      });
+
       describe('With user information', () => {
         it('should render user avatar with link to profile', () => {
           expect(