Merge pull request #382 from jnywong/copy-error

Add `copy error to clipboard` button

Author: yuvipanda

nbgitpuller/static/js/gitsyncview.js

@@ -4,7 +4,7 @@ import { FitAddon } from 'xterm-addon-fit';
 import { WebLinksAddon } from 'xterm-addon-web-links';
 
 export class GitSyncView{
-    constructor(termSelector, progressSelector, termToggleSelector, recoverySelector) {
+    constructor(termSelector, progressSelector, termToggleSelector, containerErrorSelector, copyErrorSelector) {
         // Class that encapsulates view rendering as much as possible
         this.term = new Terminal({
             convertEol: true
@@ -18,7 +18,8 @@ export class GitSyncView{
 
         this.termToggle = document.querySelector(termToggleSelector);
         this.termElement = document.querySelector(termSelector);
-        this.recovery = document.querySelector(recoverySelector);
+        this.containerError = document.querySelector(containerErrorSelector);
+        this.copyError = document.querySelector(copyErrorSelector);
 
         this.termToggle.onclick = () => this.setTerminalVisibility(!this.visible)
     }
@@ -64,9 +65,18 @@ export class GitSyncView{
         }
     }
 
-    setRecoveryLink(isError) {
+    setContainerError(isError, errorText='') {
         if (isError) {
-            this.recovery.classList.toggle('hidden', !visible);
+            this.containerError.classList.toggle('hidden', !this.visible);
+        }
+        const button = this.copyError;
+        button.onclick = async () => {
+            try {
+                await navigator.clipboard.writeText(errorText);
+                button.innerHTML = 'Error message copied!';
+            } catch (err) {
+                console.error('Failed to copy error text: ', err);
+            }
         }
     }
 }

nbgitpuller/static/js/index.js

@@ -29,7 +29,8 @@ const gsv = new GitSyncView(
     '#status-details',
     '#status-panel-title',
     '#status-panel-toggle',
-    '#recovery-link'
+    '#container-error',
+    '#copy-error-button',
 );
 
 gs.addHandler('syncing', function(data) {
@@ -46,10 +47,14 @@ gs.addHandler('error', function(data) {
     gsv.setProgressValue(100);
     gsv.setProgressText('Error: ' + data.message);
     gsv.setProgressError(true);
-    gsv.setRecoveryLink(true);
     gsv.setTerminalVisibility(true);
     if (data.output) {
-        gsv.term.write(data.output);
+        const errorText= `Repository: ${gs.repo}\nBranch: ${gs.branch}\nRedirect URL: ${gs.redirectUrl}\n\n${data.output}\n`;
+        gsv.term.write(errorText);
+        gsv.setContainerError(
+            true, 
+            errorText
+        );
     }
 });
 gs.start();

nbgitpuller/templates/status.html

@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block site %}
-<div class="container"">
+<div class="container">
     <div class="page-header">
         Synchronizing <a href="{{ repo }}">git repository</a> before sending you to <strong>{{ path }}...</strong>
     </div>
@@ -30,8 +30,15 @@
             <div id="status-details"></div>
     </div>
 </div>
-<div id="recovery-link" class="hidden">
-    <a class="btn btn-warning" href="{{ base_url }}" aria-label="Go to the Jupyter server without synchronizing content">Proceed to server without synchronizing</a>
+<div id="container-error" class="container hidden">
+    <div class="row">
+        <div id="recovery-link" class="col-xs-6 pull-left">
+            <a class="btn btn-warning" href="{{ base_url }}" aria-label="Go to the Jupyter server without synchronizing content">Proceed to server without synchronizing</a>
+        </div>
+        <div id="copy-error" class="col-xs-6 pull-right text-right">
+            <button class="btn btn-danger" id="copy-error-button" aria-label="Copy error details to clipboard">Copy error to clipboard</button>
+        </div>
+    </div>
 </div>
 </div>
 {% endblock %}
@@ -74,5 +81,12 @@
     width: 100%;
     color: black;
 }
+
+#container-error {
+    margin-right: 0px;
+    padding-left: 0px;
+    padding-right: 30px;
+}
+
 </style>
 {% endblock %}