@jupyter/collaboration 4.0.1 → 4.1.0-alpha.0

package/lib/components.d.ts

@@ -1,12 +1,53 @@
 import { User } from '@jupyterlab/services';
-import * as React from 'react';
-type Props = {
-    user: User.IIdentity;
+import { ReactWidget } from '@jupyterlab/ui-components';
+import React from 'react';
+type UserIconProps = {
+    /**
+     * The user manager instance.
+     */
+    userManager: User.IManager;
+    /**
+     * An optional onclick handler for the icon.
+     *
+     */
+    onClick?: () => void;
 };
 /**
  * React component for the user icon.
  *
  * @returns The React component
  */
-export declare const UserIconComponent: React.FC<Props>;
+export declare function UserIconComponent(props: UserIconProps): JSX.Element;
+type UserDetailsBodyProps = {
+    /**
+     * The user manager instance.
+     **/
+    userManager: User.IManager;
+};
+/**
+ * React widget for the user details.
+ **/
+export declare class UserDetailsBody extends ReactWidget {
+    /**
+     * Constructs a new user details widget.
+     */
+    constructor(props: UserDetailsBodyProps);
+    /**
+     * Get the user modified fields.
+     */
+    getValue(): UserUpdate;
+    /**
+     * Handle change on a field, by updating the user object.
+     */
+    private _onChange;
+    render(): React.JSX.Element;
+    private _userManager;
+    private _userUpdate;
+}
+/**
+ * Type for the user update object.
+ */
+export type UserUpdate = {
+    [field in keyof Omit<User.IIdentity, 'username'>]: string;
+};
 export {};

package/lib/components.js

@@ -1,15 +1,69 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import * as React from 'react';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import React, { useEffect, useState } from 'react';
 /**
  * React component for the user icon.
  *
  * @returns The React component
  */
-export const UserIconComponent = props => {
-    const { user } = props;
-    return (React.createElement("div", { className: "jp-UserInfo-Container" },
-        React.createElement("div", { title: user.display_name, className: "jp-UserInfo-Icon", style: { backgroundColor: user.color } },
-            React.createElement("span", null, user.initials)),
-        React.createElement("h3", null, user.display_name)));
-};
+export function UserIconComponent(props) {
+    const { userManager, onClick } = props;
+    const [user, setUser] = useState(userManager.identity);
+    useEffect(() => {
+        const updateUser = () => {
+            setUser(userManager.identity);
+        };
+        userManager.userChanged.connect(updateUser);
+        return () => {
+            userManager.userChanged.disconnect(updateUser);
+        };
+    }, [userManager]);
+    return (React.createElement("div", { title: user.display_name, className: "jp-UserInfo-Icon", style: { backgroundColor: user.color }, onClick: onClick },
+        React.createElement("span", null, user.initials)));
+}
+/**
+ * React widget for the user details.
+ **/
+export class UserDetailsBody extends ReactWidget {
+    /**
+     * Constructs a new user details widget.
+     */
+    constructor(props) {
+        super();
+        /**
+         * Handle change on a field, by updating the user object.
+         */
+        this._onChange = (event, field) => {
+            var _a;
+            const updatableFields = (((_a = this._userManager.permissions) === null || _a === void 0 ? void 0 : _a['updatable_fields']) || []);
+            if (!(updatableFields === null || updatableFields === void 0 ? void 0 : updatableFields.includes(field))) {
+                return;
+            }
+            this._userUpdate[field] =
+                event.target.value;
+        };
+        this._userUpdate = {};
+        this._userManager = props.userManager;
+    }
+    /**
+     * Get the user modified fields.
+     */
+    getValue() {
+        return this._userUpdate;
+    }
+    render() {
+        var _a;
+        const identity = this._userManager.identity;
+        if (!identity) {
+            return React.createElement("div", { className: "jp-UserInfo-Details" }, "Error loading user info");
+        }
+        const updatableFields = (((_a = this._userManager.permissions) === null || _a === void 0 ? void 0 : _a['updatable_fields']) || []);
+        return (React.createElement("div", { className: "jp-UserInfo-Details" }, Object.keys(identity).map((field) => {
+            const id = `jp-UserInfo-Value-${field}`;
+            return (React.createElement("div", { key: field, className: "jp-UserInfo-Field" },
+                React.createElement("label", { htmlFor: id }, field),
+                React.createElement("input", { type: 'text', name: field, id: id, onInput: (event) => this._onChange(event, field), defaultValue: identity[field], disabled: !(updatableFields === null || updatableFields === void 0 ? void 0 : updatableFields.includes(field)) })));
+        })));
+    }
+}

package/lib/userinfopanel.d.ts

@@ -1,21 +1,32 @@
-import { ReactWidget } from '@jupyterlab/apputils';
+import { Dialog, ReactWidget } from '@jupyterlab/apputils';
 import { User } from '@jupyterlab/services';
+import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { Panel } from '@lumino/widgets';
+/**
+ * The properties for the UserInfoBody.
+ */
+type UserInfoProps = {
+    userManager: User.IManager;
+    trans: IRenderMime.TranslationBundle;
+};
 export declare class UserInfoPanel extends Panel {
     private _profile;
     private _body;
-    constructor(user: User.IManager);
+    constructor(options: UserInfoProps);
 }
 /**
  * A SettingsWidget for the user.
  */
-export declare class UserInfoBody extends ReactWidget {
-    private _user;
+export declare class UserInfoBody extends ReactWidget implements Dialog.IBodyWidget<User.IManager> {
+    private _userManager;
+    private _trans;
     /**
      * Constructs a new settings widget.
      */
-    constructor(user: User.IIdentity);
-    get user(): User.IIdentity;
-    set user(user: User.IIdentity);
+    constructor(props: UserInfoProps);
+    get user(): User.IManager;
+    set user(user: User.IManager);
+    private onClick;
     render(): JSX.Element;
 }
+export {};

package/lib/userinfopanel.js

@@ -1,24 +1,32 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import { ReactWidget } from '@jupyterlab/apputils';
+import { ReactWidget, showDialog } from '@jupyterlab/apputils';
+import { ServerConnection } from '@jupyterlab/services';
+import { URLExt } from '@jupyterlab/coreutils';
 import { Panel } from '@lumino/widgets';
 import * as React from 'react';
-import { UserIconComponent } from './components';
+import { UserDetailsBody, UserIconComponent } from './components';
 export class UserInfoPanel extends Panel {
-    constructor(user) {
+    constructor(options) {
         super({});
         this.addClass('jp-UserInfoPanel');
-        this._profile = user;
+        this._profile = options.userManager;
         this._body = null;
         if (this._profile.isReady) {
-            this._body = new UserInfoBody(this._profile.identity);
+            this._body = new UserInfoBody({
+                userManager: this._profile,
+                trans: options.trans
+            });
             this.addWidget(this._body);
             this.update();
         }
         else {
             this._profile.ready
                 .then(() => {
-                this._body = new UserInfoBody(this._profile.identity);
+                this._body = new UserInfoBody({
+                    userManager: this._profile,
+                    trans: options.trans
+                });
                 this.addWidget(this._body);
                 this.update();
             })
@@ -33,18 +41,59 @@ export class UserInfoBody extends ReactWidget {
     /**
      * Constructs a new settings widget.
      */
-    constructor(user) {
+    constructor(props) {
         super();
-        this._user = user;
+        this.onClick = () => {
+            if (!this._userManager.identity) {
+                return;
+            }
+            showDialog({
+                body: new UserDetailsBody({
+                    userManager: this._userManager
+                }),
+                title: this._trans.__('User Details')
+            }).then(async (result) => {
+                if (result.button.accept) {
+                    // Call the Jupyter Server API to update the user field
+                    try {
+                        const settings = ServerConnection.makeSettings();
+                        const url = URLExt.join(settings.baseUrl, '/api/me');
+                        const body = {
+                            method: 'PATCH',
+                            body: JSON.stringify(result.value)
+                        };
+                        let response;
+                        try {
+                            response = await ServerConnection.makeRequest(url, body, settings);
+                        }
+                        catch (error) {
+                            throw new ServerConnection.NetworkError(error);
+                        }
+                        if (!response.ok) {
+                            const errorMsg = this._trans.__('Failed to update user data');
+                            throw new Error(errorMsg);
+                        }
+                        // Refresh user information
+                        this._userManager.refreshUser();
+                    }
+                    catch (error) {
+                        console.error(error);
+                    }
+                }
+            });
+        };
+        this._userManager = props.userManager;
+        this._trans = props.trans;
     }
     get user() {
-        return this._user;
+        return this._userManager;
     }
     set user(user) {
-        this._user = user;
+        this._userManager = user;
         this.update();
     }
     render() {
-        return React.createElement(UserIconComponent, { user: this._user });
+        return (React.createElement("div", { className: "jp-UserInfo-Container" },
+            React.createElement(UserIconComponent, { userManager: this._userManager, onClick: this.onClick })));
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/collaboration",
-  "version": "4.0.1",
+  "version": "4.1.0-alpha.0",
   "description": "JupyterLab - Real-Time Collaboration Widgets",
   "homepage": "https://github.com/jupyterlab/jupyter-collaboration",
   "bugs": {
@@ -44,6 +44,7 @@
     "@jupyterlab/apputils": "^4.4.0",
     "@jupyterlab/coreutils": "^6.4.0",
     "@jupyterlab/docregistry": "^4.4.0",
+    "@jupyterlab/rendermime-interfaces": "^3.12.0",
     "@jupyterlab/services": "^7.4.0",
     "@jupyterlab/ui-components": "^4.4.0",
     "@lumino/coreutils": "^2.2.1",

package/style/sidepanel.css

@@ -142,3 +142,38 @@
   box-shadow: 0 2px 2px -2px rgb(0 0 0 / 24%);
 
 }
+
+/************************************************************
+                User Info Details
+*************************************************************/
+.jp-UserInfo-Field {
+  display: flex;
+  justify-content: space-between;
+}
+
+.jp-UserInfo-Field > label,
+.jp-UserInfo-Field > input {
+  padding: 0.5em 1em;
+  margin: 0.25em 0;
+}
+
+.jp-UserInfo-Field > label {
+  font-weight: bold;
+}
+
+.jp-UserInfo-Field > input {
+  border: none;
+}
+
+.jp-UserInfo-Field > input:not(:disabled) {
+  cursor: pointer;
+  background-color: var(--jp-input-background);
+}
+
+.jp-UserInfo-Field > input:focus {
+  border: solid 1px var(--jp-cell-editor-active-border-color);
+}
+
+.jp-UserInfo-Field > input:focus-visible {
+  outline: none;
+}