fix: error handlings for copy text in web components

lablup · Nov 12, 2024 · cbc95b3 · cbc95b3
1 parent 90496bc
commit cbc95b3
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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">