Custom env variables

packages/apputils/src/sessioncontext.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { IChangedArgs, PathExt } from '@jupyterlab/coreutils';
+import { IChangedArgs, PageConfig, PathExt } from '@jupyterlab/coreutils';
 import {
   Kernel,
   KernelMessage,
@@ -16,12 +16,18 @@ import {
   TranslationBundle
 } from '@jupyterlab/translation';
 import { find } from '@lumino/algorithm';
-import { JSONExt, PromiseDelegate, UUID } from '@lumino/coreutils';
+import {
+  JSONExt,
+  PartialJSONObject,
+  PromiseDelegate,
+  UUID
+} from '@lumino/coreutils';
 import { IDisposable, IObservableDisposable } from '@lumino/disposable';
 import { ISignal, Signal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
 import * as React from 'react';
 import { Dialog, showDialog } from './dialog';
+import { CustomEnvWidget } from '@jupyterlab/ui-components';
 
 /**
  * A context object to manage a widget's kernel session connection.
@@ -301,6 +307,11 @@ export namespace ISessionContext {
      * Skip showing the kernel restart dialog if checked (default `false`).
      */
     readonly skipKernelRestartDialog?: boolean;
+
+    /**
+     * Custom kernel variables
+     */
+    customEnvVars?: undefined | PartialJSONObject;
   }
 
   export type KernelDisplayStatus =
@@ -709,7 +720,14 @@ export class SessionContext implements ISessionContext {
         preference
       });
       if (name) {
-        options = { name };
+        if (preference.customEnvVars) {
+          options = {
+            name,
+            custom_env_vars: preference.customEnvVars
+          };
+        } else {
+          options = { name };
+        }
       }
     }
 
@@ -1407,14 +1425,23 @@ export class SessionContextDialogs implements ISessionContext.IDialogs {
       return;
     }
 
+    const model = result.value as Kernel.IModel;
+
+    if (model && sessionContext.kernelPreference?.customEnvVars) {
+      sessionContext.kernelPreference.customEnvVars = undefined;
+    }
+
+    if (model.custom_env_vars) {
+      sessionContext.kernelPreference.customEnvVars = model.custom_env_vars;
+    }
+
     if (hasCheckbox && result.isChecked !== null) {
       sessionContext.kernelPreference = {
         ...sessionContext.kernelPreference,
         autoStartDefault: result.isChecked
       };
     }
 
-    const model = result.value;
     if (model === null && !sessionContext.hasNoKernel) {
       return sessionContext.shutdown();
     }
@@ -1812,21 +1839,55 @@ namespace Private {
   export const createKernelSelector = (
     sessionContext: ISessionContext,
     translator?: ITranslator
-  ) =>
-    new KernelSelector({
-      node: createSelectorNode(sessionContext, translator)
-    });
+  ) => new KernelSelector(sessionContext, translator);
 
   /**
    * A widget that provides a kernel selection.
    */
-  class KernelSelector extends Widget {
+  export class KernelSelector extends Widget {
+    sessionContext: ISessionContext;
+    translator: ITranslator | undefined;
+
+    constructor(sessionContext: ISessionContext, translator?: ITranslator) {
+      super({ node: createSelectorNode(sessionContext, translator) });
+      this.sessionContext = sessionContext;
+      this.translator = translator;
+    }
     /**
      * Get the value of the kernel selector widget.
      */
     getValue(): Kernel.IModel {
       const selector = this.node.querySelector('select') as HTMLSelectElement;
-      return JSON.parse(selector.value) as Kernel.IModel;
+      let kernelData = JSON.parse(selector.value) as Kernel.IModel;
+      let tmp = {} as PartialJSONObject;
+      const envVarsBlock = this.node.querySelector(
+        'div.jp-custom-env-vars-block'
+      );
+
+      if (envVarsBlock) {
+        let customEnvParameters = envVarsBlock.getAttribute(
+          'data-custom-env-vars'
+        );
+        if (customEnvParameters) {
+          let envParameters = JSON.parse(
+            customEnvParameters
+          ) as PartialJSONObject;
+
+          for (let index in envParameters) {
+            let env = envParameters[index] as PartialJSONObject;
+            let envName: string =
+              env && typeof env.name === 'string' ? env.name : '';
+            let envValue: string =
+              env && typeof env.value === 'string' ? env.value : ('' as string);
+            if (envName && envValue) {
+              tmp[envName] = envValue;
+            }
+          }
+
+          kernelData['custom_env_vars'] = tmp;
+        }
+      }
+      return kernelData;
     }
   }
 
@@ -1853,25 +1914,80 @@ namespace Private {
       sessionContext,
       translator
     );
+
+    const allowCustomEnvVariables =
+      PageConfig.getOption('allow_setup_custom_env_variables') === 'true'
+        ? true
+        : false;
+    const envVarsDiv = document.createElement('div');
+    envVarsDiv.setAttribute('class', 'jp-custom-env-vars-block');
+    envVarsDiv.setAttribute('data-custom-env-vars', '');
+
     if (options.disabled) select.disabled = true;
     for (const group of options.groups) {
       const { label, options } = group;
       const optgroup = document.createElement('optgroup');
       optgroup.label = label;
       for (const { selected, text, title, value } of options) {
         const option = document.createElement('option');
-        if (selected) option.selected = true;
+        if (selected) {
+          option.selected = true;
+          let val = JSON.parse(value);
+          let id = val && val.id ? val.id : '';
+          if (allowCustomEnvVariables && !id) {
+            let defaultEnvValue = {};
+            envVarsDiv.innerHTML = '';
+            addEnvBlock(envVarsDiv, defaultEnvValue, translator);
+          }
+        }
+
         if (title) option.title = title;
         option.text = text;
         option.value = value;
         optgroup.appendChild(option);
       }
       select.appendChild(optgroup);
     }
+
+    select.onchange = () => {
+      let kernelData = JSON.parse(select.value) as Kernel.IModel;
+      envVarsDiv.innerHTML = '';
+      body.setAttribute('data-custom-env-vars', '');
+      if (allowCustomEnvVariables && !kernelData.id) {
+        let defaultEnvValue = {};
+        addEnvBlock(envVarsDiv, defaultEnvValue, translator);
+      }
+    };
     body.appendChild(select);
+    body.appendChild(envVarsDiv);
     return body;
   }
 
+  function addEnvBlock(
+    body: HTMLDivElement,
+    defaultEnvValues: PartialJSONObject,
+    translator?: ITranslator
+  ) {
+    let envConfiguration: PartialJSONObject = {};
+    body.setAttribute('data-custom-env-vars', '');
+
+    let customEnvBlock = new CustomEnvWidget(
+      envConfiguration,
+      defaultEnvValues,
+      formData => {
+        envConfiguration = formData as PartialJSONObject;
+        body.setAttribute(
+          'data-custom-env-vars',
+          JSON.stringify(envConfiguration)
+        );
+      },
+      false,
+      translator
+    );
+
+    Widget.attach(customEnvBlock, body);
+  }
+
   /**
    * Get the default kernel name given select options.
    */

packages/apputils/style/dialog.css

@@ -90,6 +90,11 @@ button.jp-Dialog-close-button {
   min-height: unset;
 }
 
+button.jp-Dialog-button.jp-mod-styled.js-custom-env {
+  margin-left: 5px;
+  margin-top: 5px;
+}
+
 .jp-Dialog-header {
   display: flex;
   justify-content: space-between;
@@ -151,3 +156,14 @@ button.jp-Dialog-close-button {
 .jp-Dialog-button.jp-mod-styled:not(:last-child) {
   margin-right: 12px;
 }
+
+.jp-Dialog-body .js-Dialog-form-custom-env span {
+  display: inline-block;
+  width: 40px;
+  margin-right: 10px;
+}
+
+.jp-Dialog-body .js-Dialog-form-custom-env input {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}

packages/apputils/test/sessioncontext.spec.ts

@@ -71,6 +71,8 @@ describe('@jupyterlab/apputils', () => {
           // eslint-disable-next-line camelcase
           allow_external_kernels: true,
           // eslint-disable-next-line camelcase
+          allow_setup_custom_env_variables: true,
+          // eslint-disable-next-line camelcase
           external_connection_dir: external
         }
       }
@@ -165,6 +167,25 @@ describe('@jupyterlab/apputils', () => {
       });
     });
 
+    describe('#kernelChanged with custom env variables', () => {
+      it('should be emitted when the kernel changes', async () => {
+        let called = false;
+        sessionContext.kernelChanged.connect(
+          (sender, { oldValue, newValue }) => {
+            if (oldValue !== null) {
+              return;
+            }
+            expect(sender).toBe(sessionContext);
+            expect(oldValue).toBeNull();
+            expect(newValue).toBe(sessionContext.session?.kernel || null);
+            called = true;
+          }
+        );
+        await sessionContext.initialize();
+        expect(called).toBe(true);
+      });
+    });
+
     describe('#sessionChanged', () => {
       it('should be emitted when the session changes', async () => {
         let called = false;
@@ -477,6 +498,16 @@ describe('@jupyterlab/apputils', () => {
         expect(kernel.name).toBe(name);
       });
 
+      it('should change the current kernel and have custom_env_vars', async () => {
+        await sessionContext.initialize();
+
+        const name = sessionContext.session?.kernel?.name;
+        const id = sessionContext.session?.kernel?.id;
+        const customEnvVars = {'TEST_ENV_NAME': 'test_env_value'}
+        const kernel = (await sessionContext.changeKernel({ name, custom_env_vars:customEnvVars  }))!;
+        expect(kernel.id).not.toBe(id);
+      });
+
       it('should still work if called before fully initialized', async () => {
         const initPromise = sessionContext.initialize(); // Start but don't finish init.
         const name = 'echo';