From 3f73d5bf5338eacd3e91d937ed07a55e7398538d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=A4rkl?= <info@florianmaerkl.de>
Date: Sat, 25 Jun 2022 19:52:37 +0200
Subject: [PATCH] Fix logs view existing multiple times (#1000)

* Fix terminal DOM existing multiple times

When switching between the tasks/config/changed files tabs in the build
view, the DOM for the log xterm would be inserted multiple times,
causing the current terminal to be shifted down weirdly.
This fixes this behavior by cleaning any custom DOM before the log is
unmounted.

* Use ref
---
 web/src/components/repo/build/BuildLog.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/web/src/components/repo/build/BuildLog.vue b/web/src/components/repo/build/BuildLog.vue
index 7e4ab9260..b5bca6780 100644
--- a/web/src/components/repo/build/BuildLog.vue
+++ b/web/src/components/repo/build/BuildLog.vue
@@ -167,11 +167,16 @@ export default defineComponent({
       fitAddon.value.fit();
     }
 
+    const unmounted = ref(false);
     onMounted(async () => {
       term.value.loadAddon(fitAddon.value);
       term.value.loadAddon(new WebLinksAddon());
 
       await nextTick(() => {
+        if (unmounted.value) {
+          // need to check if unmounted already because we are async here
+          return;
+        }
         const element = document.getElementById('terminal');
         if (element === null) {
           throw new Error('Unexpected: "terminal" should be provided at this place');
@@ -214,9 +219,15 @@ export default defineComponent({
     );
 
     onBeforeUnmount(() => {
+      unmounted.value = true;
       if (stream.value) {
         stream.value.close();
       }
+      const element = document.getElementById('terminal');
+      if (element !== null) {
+        // Clean up any custom DOM added in onMounted above
+        element.innerHTML = '';
+      }
       window.removeEventListener('resize', resize);
     });