Add latest changes from gitlab-org/gitlab@master

1 files changed, 25 insertions, 1 deletions

diff --git a/app/assets/javascripts/jobs/components/log/log.vue b/app/assets/javascripts/jobs/components/log/log.vue
index ef126166e8b..03a697d11ed 100644
--- a/app/assets/javascripts/jobs/components/log/log.vue
+++ b/app/assets/javascripts/jobs/components/log/log.vue
@@ -11,11 +11,35 @@ export default {
   computed: {
     ...mapState(['traceEndpoint', 'trace', 'isTraceComplete']),
   },
+  updated() {
+    this.$nextTick(() => {
+      this.handleScrollDown();
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.handleScrollDown();
+    });
+  },
   methods: {
-    ...mapActions(['toggleCollapsibleLine']),
+    ...mapActions(['toggleCollapsibleLine', 'scrollBottom']),
     handleOnClickCollapsibleLine(section) {
       this.toggleCollapsibleLine(section);
     },
+    /**
+     * The job log is sent in HTML, which means we need to use `v-html` to render it
+     * Using the updated hook with $nextTick is not enough to wait for the DOM to be updated
+     * in this case because it runs before `v-html` has finished running, since there's no
+     * Vue binding.
+     * In order to scroll the page down after `v-html` has finished, we need to use setTimeout
+     */
+    handleScrollDown() {
+      if (this.isScrolledToBottomBeforeReceivingTrace) {
+        setTimeout(() => {
+          this.scrollBottom();
+        }, 0);
+      }
+    },
   },
 };
 </script>