Merge branch 'fix-realtime-edited-text-for-issues-9-3' into 'master'

Port fix-realtime-edited-text-for-issues 9-2-stable fix to master.

See merge request !11478

6 files changed, 95 insertions, 18 deletions

diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index 800bb9f1fe8..e14414d3f68 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -7,6 +7,7 @@ import Service from '../services/index';
 import Store from '../stores';
 import titleComponent from './title.vue';
 import descriptionComponent from './description.vue';
+import editedComponent from './edited.vue';
 import formComponent from './form.vue';
 import '../../lib/utils/url_utility';
 
@@ -50,6 +51,21 @@ export default {
       required: false,
       default: '',
     },
+    updatedAt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     issuableTemplates: {
       type: Array,
       required: false,
@@ -86,6 +102,9 @@ export default {
       titleText: this.initialTitleText,
       descriptionHtml: this.initialDescriptionHtml,
       descriptionText: this.initialDescriptionText,
+      updatedAt: this.updatedAt,
+      updatedByName: this.updatedByName,
+      updatedByPath: this.updatedByPath,
     });
 
     return {
@@ -98,10 +117,14 @@ export default {
     formState() {
       return this.store.formState;
     },
+    hasUpdated() {
+      return !!this.state.updatedAt;
+    },
   },
   components: {
     descriptionComponent,
     titleComponent,
+    editedComponent,
     formComponent,
   },
   methods: {
@@ -240,6 +263,11 @@ export default {
         :description-text="state.descriptionText"
         :updated-at="state.updatedAt"
         :task-status="state.taskStatus" />
+      <edited-component
+        v-if="hasUpdated"
+        :updated-at="state.updatedAt"
+        :updated-by-name="state.updatedByName"
+        :updated-by-path="state.updatedByPath" />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 3281ec6b172..5ae617356e0 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -16,11 +16,6 @@
         type: String,
         required: true,
       },
-      updatedAt: {
-        type: String,
-        required: false,
-        default: '',
-      },
       taskStatus: {
         type: String,
         required: false,
@@ -31,7 +26,6 @@
       return {
         preAnimation: false,
         pulseAnimation: false,
-        timeAgoEl: $('.js-issue-edited-ago'),
       };
     },
     watch: {
@@ -39,12 +33,6 @@
         this.animateChange();
 
         this.$nextTick(() => {
-          const toolTipTime = gl.utils.formatDate(this.updatedAt);
-
-          this.timeAgoEl.attr('datetime', this.updatedAt)
-            .attr('title', toolTipTime)
-            .tooltip('fixTitle');
-
           this.renderGFM();
         });
       },
diff --git a/app/assets/javascripts/issue_show/components/edited.vue b/app/assets/javascripts/issue_show/components/edited.vue
new file mode 100644
index 00000000000..d59e6d11032
--- /dev/null
+++ b/app/assets/javascripts/issue_show/components/edited.vue
@@ -0,0 +1,56 @@
+<script>
+import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+
+export default {
+  props: {
+    updatedAt: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    updatedByPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  components: {
+    timeAgoTooltip,
+  },
+  computed: {
+    hasUpdatedBy() {
+      return this.updatedByName && this.updatedByPath;
+    },
+  },
+};
+</script>
+
+<template>
+  <small
+    class="edited-text"
+  >
+    Edited
+    <time-ago-tooltip
+      v-if="updatedAt"
+      placement="bottom"
+      :time="updatedAt"
+    />
+    <span
+      v-if="hasUpdatedBy"
+    >
+      by
+      <a
+        class="author_link"
+        :href="updatedByPath"
+      >
+        <span>{{updatedByName}}</span>
+      </a>
+    </span>
+  </small>
+</template>
+
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index faf79471946..14b2a1e18e9 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -42,6 +42,9 @@ document.addEventListener('DOMContentLoaded', () => {
           projectPath: this.projectPath,
           projectNamespace: this.projectNamespace,
           projectsAutocompleteUrl: this.projectsAutocompleteUrl,
+          updatedAt: this.updatedAt,
+          updatedByName: this.updatedByName,
+          updatedByPath: this.updatedByPath,
         },
       });
     },
diff --git a/app/assets/javascripts/issue_show/stores/index.js b/app/assets/javascripts/issue_show/stores/index.js
index 4a16c3cb4dc..27c2d349f52 100644
--- a/app/assets/javascripts/issue_show/stores/index.js
+++ b/app/assets/javascripts/issue_show/stores/index.js
@@ -4,6 +4,9 @@ export default class Store {
     titleText,
     descriptionHtml,
     descriptionText,
+    updatedAt,
+    updatedByName,
+    updatedByPath,
   }) {
     this.state = {
       titleHtml,
@@ -11,7 +14,9 @@ export default class Store {
       descriptionHtml,
       descriptionText,
       taskStatus: '',
-      updatedAt: '',
+      updatedAt,
+      updatedByName,
+      updatedByPath,
     };
     this.formState = {
       title: '',
@@ -30,6 +35,8 @@ export default class Store {
     this.state.descriptionText = data.description_text;
     this.state.taskStatus = data.task_status;
     this.state.updatedAt = data.updated_at;
+    this.state.updatedByName = data.updated_by_name;
+    this.state.updatedByPath = data.updated_by_path;
   }
 
   stateShouldUpdate(data) {
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index 678af978edd..0140dcf19c3 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -112,11 +112,6 @@
     }
   }
 
-  .issue-edited-ago,
-  .note_edited_ago {
-    display: none;
-  }
-
   aside:not(.right-sidebar) {
     display: none;
   }