From bed14b2c9e50c51459a034f2ecf7f2629a7d64d3 Mon Sep 17 00:00:00 2001
From: Oliver Roick <oliver@roick.email>
Date: Tue, 12 Nov 2024 16:28:16 +1100
Subject: [PATCH] Set unique IDs for terminal intances

---
 src/ImageBuilder.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/ImageBuilder.jsx b/src/ImageBuilder.jsx
index 0261454..088bc30 100644
--- a/src/ImageBuilder.jsx
+++ b/src/ImageBuilder.jsx
@@ -53,7 +53,8 @@ async function buildImage(repo, ref, term, fitAddon, onImageBuilt) {
   }
 }
 
-function ImageLogs({ setTerm, setFitAddon }) {
+function ImageLogs({ setTerm, setFitAddon, name }) {
+  const terminalId = `${name}--terminal`;
   useEffect(() => {
     async function setup() {
       const { Terminal } = await import("xterm");
@@ -68,7 +69,7 @@ function ImageLogs({ setTerm, setFitAddon }) {
       });
       const fitAddon = new FitAddon();
       term.loadAddon(fitAddon);
-      term.open(document.getElementById("terminal"));
+      term.open(document.getElementById(terminalId));
       fitAddon.fit();
       setTerm(term);
       setFitAddon(fitAddon);
@@ -84,7 +85,7 @@ function ImageLogs({ setTerm, setFitAddon }) {
       </div>
       <div className="profile-option-control-container">
         <div className="terminal-container">
-          <div id="terminal"></div>
+          <div id={terminalId}></div>
         </div>
       </div>
     </div>
@@ -212,7 +213,7 @@ export function ImageBuilder({ name }) {
         </button>
       </div>
       <input name={name} type="hidden" value={customImage} />
-      <ImageLogs setFitAddon={setFitAddon} setTerm={setTerm} />
+      <ImageLogs setFitAddon={setFitAddon} setTerm={setTerm} name={name} />
     </>
   );
 }