Merge pull request #712 from jupyterlab/requirements-not-found-messag…

…e-and-install

show python requirements not found message and option to install

scripts/copyassets.js

@@ -61,6 +61,10 @@ function copyAssests() {
     path.join(srcDir, 'assets', 'jupyterlab-wordmark.svg'),
     path.join(dest, '../app-assets', 'jupyterlab-wordmark.svg')
   );
+  fs.copySync(
+    path.join(srcDir, 'assets', 'copyable-span.js'),
+    path.join(dest, '../app-assets', 'copyable-span.js')
+  );
 
   const toolkitPath = path.join(
     '../node_modules',

src/assets/copyable-span.js

@@ -0,0 +1,70 @@
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    .container {
+      display: flex;
+      gap: 5px;
+      width: fit-content;
+      padding: 2px;
+      background: var(--neutral-layer-2);
+      cursor: pointer;
+    }
+    .container:hover, .container:hover svg {
+      color: var(--neutral-foreground-hint);
+      fill: var(--neutral-foreground-hint);
+    }
+    .container:active, .container:active svg {
+      color: var(--accent-foreground-active);
+      fill: var(--accent-foreground-active);
+    }
+    .copy-icon svg {
+      fill: var(--neutral-foreground-rest);
+      width: 16px;
+      height: 16px;
+    }
+  </style>
+  <div style="display: inline-block;">
+    <div class="container" data-copied="" title="Copy to clipboard">
+        <div class="label"></div><div class="copy-icon"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg></div>
+    </div>
+  </div>
+`;
+
+class CopyableSpan extends HTMLElement {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot.querySelector('.container').onclick = evt => {
+      window.electronAPI.copyToClipboard(evt.currentTarget.dataset.copied);
+    };
+  }
+
+  static get observedAttributes() {
+    return ['label', 'title', 'copied'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'label':
+        this.shadowRoot.querySelector('.label').innerText = decodeURIComponent(
+          newValue
+        );
+        break;
+      case 'title':
+        this.shadowRoot.querySelector('.container').title = decodeURIComponent(
+          newValue
+        );
+        break;
+      case 'copied':
+        this.shadowRoot.querySelector(
+          '.container'
+        ).dataset.copied = decodeURIComponent(newValue);
+        break;
+    }
+  }
+}
+
+window.customElements.define('copyable-span', CopyableSpan);

src/main/cli.ts

@@ -449,22 +449,36 @@ export async function runCommandInEnvironment(
     ' && '
   );
 
+  // TODO: implement timeout. in case there is network issues
+
   return new Promise<boolean>((resolve, reject) => {
     const shell = isWin
       ? spawn('cmd', ['/c', commandScript], {
-          env: process.env
+          env: process.env,
+          windowsVerbatimArguments: true
         })
       : spawn('bash', ['-c', commandScript], {
-          stdio: 'inherit',
           env: {
             ...process.env,
             BASH_SILENCE_DEPRECATION_WARNING: '1'
           }
         });
 
+    if (shell.stdout) {
+      shell.stdout.on('data', chunk => {
+        console.debug('>', Buffer.from(chunk).toString());
+      });
+    }
+    if (shell.stderr) {
+      shell.stderr.on('data', chunk => {
+        console.error('>', Buffer.from(chunk).toString());
+      });
+    }
+
     shell.on('close', code => {
       if (code !== 0) {
         console.error('Shell exit with code:', code);
+        resolve(false);
       }
       resolve(true);
     });

src/main/eventtypes.ts

@@ -55,7 +55,10 @@ export enum EventTypeMain {
   SetServerLaunchArgs = 'set-server-launch-args',
   SetServerEnvVars = 'set-server-env-vars',
   SetCtrlWBehavior = 'set-ctrl-w-behavior',
-  SetAuthDialogResponse = 'set-auth-dialog-response'
+  SetAuthDialogResponse = 'set-auth-dialog-response',
+  InstallPythonEnvRequirements = 'install-python-env-requirements',
+  ShowLogs = 'show-logs',
+  CopyToClipboard = 'copy-to-clipboard'
 }
 
 // events sent to Renderer process

src/main/progressview/preload.ts

@@ -34,6 +34,9 @@ contextBridge.exposeInMainWorld('electronAPI', {
     callback: InstallBundledPythonEnvStatusListener
   ) => {
     onInstallBundledPythonEnvStatusListener = callback;
+  },
+  copyToClipboard: (content: string) => {
+    ipcRenderer.send(EventTypeMain.CopyToClipboard, content);
   }
 });
 

src/main/progressview/progressview.ts

@@ -17,6 +17,9 @@ export class ProgressView {
     const progressLogo = fs.readFileSync(
       path.join(__dirname, '../../../app-assets/progress-logo.svg')
     );
+    const copyableSpanSrc = fs.readFileSync(
+      path.join(__dirname, '../../../app-assets/copyable-span.js')
+    );
 
     const template = `
       <style>
@@ -79,6 +82,7 @@ export class ProgressView {
         </div>
       </div>
 
+      <script>${copyableSpanSrc}</script>
       <script>
       const progressSvg = document.querySelector('#progress-logo svg');
       const progressTitle = document.getElementById('progress-title');