From cbc95b3e6ffc7ee47034a6222c84ac11fb0a96ed Mon Sep 17 00:00:00 2001
From: agatha197 <kimsujin@lablup.com>
Date: Tue, 12 Nov 2024 16:35:28 +0900
Subject: [PATCH] fix: error handlings for copy text in web components

---
 src/components/backend-ai-app-launcher.ts |  2 +-
 src/components/backend-ai-import-view.ts  |  2 +-
 src/components/backend-ai-session-list.ts | 32 ++++++++++++++++++++---
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/backend-ai-app-launcher.ts b/src/components/backend-ai-app-launcher.ts
index be92771a52..d4d5c2c785 100644
--- a/src/components/backend-ai-app-launcher.ts
+++ b/src/components/backend-ai-app-launcher.ts
@@ -1590,7 +1590,7 @@ export default class BackendAiAppLauncher extends BackendAIPage {
       } else {
         if (navigator.clipboard !== undefined) {
           // for Chrome, Safari
-          navigator.clipboard.writeText(textToCopy).then(
+          navigator?.clipboard?.writeText(textToCopy)?.then(
             () => {
               this.notification.text = _text(
                 'session.applauncher.SSHConnectionExampleClipboardCopy',
diff --git a/src/components/backend-ai-import-view.ts b/src/components/backend-ai-import-view.ts
index fd5187c307..3db68920e6 100644
--- a/src/components/backend-ai-import-view.ts
+++ b/src/components/backend-ai-import-view.ts
@@ -632,7 +632,7 @@ export default class BackendAIImport extends BackendAIPage {
       } else {
         if (navigator.clipboard !== undefined) {
           // for Chrome, Safari
-          navigator.clipboard.writeText(copyText).then(
+          navigator?.clipboard?.writeText(copyText)?.then(
             () => {
               this.notification.text = _text('import.NotebookBadgeCodeCopied');
               this.notification.show();
diff --git a/src/components/backend-ai-session-list.ts b/src/components/backend-ai-session-list.ts
index 8a63a01058..8d9aeec4cc 100644
--- a/src/components/backend-ai-session-list.ts
+++ b/src/components/backend-ai-session-list.ts
@@ -3024,6 +3024,33 @@ export default class BackendAISessionList extends BackendAIPage {
     );
   }
 
+  copyText(divSelector) {
+    const divElement = this.shadowRoot?.querySelector(divSelector);
+    if (divElement) {
+      const textToCopy = divElement.textContent
+        .replace(/[\r\n\t]+/g, ' ')
+        .replace(/\s\s+/g, ' ')
+        .trim();
+
+      if (navigator.clipboard !== undefined) {
+        // for Chrome, Safari
+        navigator?.clipboard?.writeText(textToCopy)?.then((err) => {
+          console.error('Could not copy text: ', err);
+        });
+      } else {
+        // other browsers
+        const tmpInputElement = document.createElement('input');
+        tmpInputElement.type = 'text';
+        tmpInputElement.value = textToCopy;
+
+        document.body.appendChild(tmpInputElement);
+        tmpInputElement.select();
+        document.execCommand('copy');
+        document.body.removeChild(tmpInputElement);
+      }
+    }
+  }
+
   /**
    * Render session information - category, color, description, etc.
    *
@@ -3120,10 +3147,7 @@ ${rowData.item[this.sessionNameField]}</pre
                 id="session-name-copy-icon"
                 class="fg controls-running"
                 icon="content_copy"
-                @click="${async () =>
-                  await navigator.clipboard.writeText(
-                    rowData.item[this.sessionNameField],
-                  )}"
+                @click="${() => this.copyText('#session-name-field')}"
               ></mwc-icon-button>
             </div>
             <div class="horizontal center center-justified layout">