Revert "Improve inline copy button with temporary "Copied" hint in details dialog"

This reverts commit 9a353a4.

Author: rabea-al

src/helpers/notificationAugmentor.ts

@@ -1,6 +1,5 @@
 import { Notification, showDialog, Dialog } from '@jupyterlab/apputils';
 import { Widget } from '@lumino/widgets';
-import { copyIcon } from '@jupyterlab/ui-components';
 
 const MAX_VISIBLE_CHARS = 140;
 const VIEW_DETAILS_LABEL = 'View details';
@@ -18,55 +17,25 @@ function createViewDetailsAction(fullMessage: string, dialogTitle = 'Details'):
     label: VIEW_DETAILS_LABEL,
     caption: 'Show full message',
     callback: async () => {
-      const DURATION = 1200;
-
       const dialogBody = new Widget();
       dialogBody.addClass('xircuits-notification-details');
 
-      const wrap = document.createElement('div');
-      wrap.className = 'x-details-copyWrap';
-
-      const copyBtn = document.createElement('button');
-      copyBtn.className = 'x-copy-icon-btn jp-Button jp-mod-minimal';
-      copyBtn.type = 'button';
-      copyBtn.title = 'Copy';
-      copyBtn.setAttribute('aria-label', 'Copy');
-      copyIcon.element({ container: copyBtn, height: '16px', width: '16px' });
-
-      wrap.appendChild(copyBtn);
-
       const pre = document.createElement('pre');
-      pre.className = 'x-details-pre';
       pre.textContent = fullMessage;
+      dialogBody.node.appendChild(pre);
 
-      dialogBody.node.append(wrap, pre);
-
-      let timer: number | null = null;
-      copyBtn.addEventListener('click', async () => {
-        try {
-          await navigator.clipboard.writeText(fullMessage);
+      const copyButton = Dialog.createButton({ label: 'Copy' });
+      const closeButton = Dialog.okButton({ label: 'Close' });
 
-          copyBtn.classList.add('is-copied');
-          copyBtn.title = 'Copied';
-          copyBtn.setAttribute('aria-label', 'Copied');
-
-          if (timer) clearTimeout(timer);
-          timer = window.setTimeout(() => {
-            copyBtn.classList.remove('is-copied');
-            copyBtn.title = 'Copy';
-            copyBtn.setAttribute('aria-label', 'Copy');
-            timer = null;
-          }, DURATION);
-        } catch (err) {
-          console.error('Copy failed', err);
-        }
-      });
-
-      await showDialog({
+      const result = await showDialog({
         title: dialogTitle,
         body: dialogBody,
-        buttons: [Dialog.okButton({ label: 'Close' })]
+        buttons: [copyButton, closeButton]
       });
+
+      if (result.button.label === 'Copy') {
+        await navigator.clipboard.writeText(fullMessage);
+      }
     }
   };
 }

style/base.css

@@ -170,38 +170,4 @@ body.light-mode jp-button[title="Toggle Light/Dark Mode"]  .sun  { visibility: v
   margin: 0;
   font-family: var(--jp-code-font-family);
   font-size: var(--jp-code-font-size);
-}
-
-.xircuits-notification-details { position: relative; }
-
-.x-details-copyWrap {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-}
-
-.x-copy-icon-btn { position: relative; }
-
-.x-copy-icon-btn.is-copied::after {
-  content: "Copied";
-  position: absolute;
-  top: 50%;
-  right: calc(100% + 8px);
-  transform: translateY(-50%);
-  white-space: nowrap;
-  pointer-events: none;
-  padding: 2px 6px;
-  background: var(--jp-layout-color2);
-  border: 1px solid var(--jp-border-color2);
-  border-radius: 4px;
-  font-size: var(--jp-ui-font-size1);
-  line-height: 1.4;
-  z-index: 1;
-}
-
-.xircuits-notification-details .x-details-pre {
-  margin-top: 36px;
-}
-
-
-
+}