@jupyter/collaboration 3.0.0-alpha.1 → 3.0.0-beta.0

package/lib/collaboratorspanel.d.ts

@@ -1,27 +1,26 @@
-import * as React from 'react';
-import { Awareness } from 'y-protocols/awareness';
-import { Panel } from '@lumino/widgets';
-import { ReactWidget } from '@jupyterlab/apputils';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { User } from '@jupyterlab/services';
+import { ISignal } from '@lumino/signaling';
+import { Panel } from '@lumino/widgets';
+import { Awareness } from 'y-protocols/awareness';
 import { ICollaboratorAwareness } from './tokens';
 export declare class CollaboratorsPanel extends Panel {
-    private _currentUser;
-    private _awareness;
-    private _body;
-    constructor(currentUser: User.IManager, awareness: Awareness, fileopener: (path: string) => void);
+    constructor(currentUser: User.IManager, awareness: Awareness, fileopener: (path: string) => void, docRegistry?: DocumentRegistry);
     /**
      * Handle collaborator change.
      */
     private _onAwarenessChanged;
+    private _currentUser;
+    private _awareness;
+    private _collaboratorsChanged;
 }
-/**
- * The collaborators list.
- */
-export declare class CollaboratorsBody extends ReactWidget {
-    private _collaborators;
-    private _fileopener;
-    constructor(fileopener: (path: string) => void);
-    get collaborators(): ICollaboratorAwareness[];
-    set collaborators(value: ICollaboratorAwareness[]);
-    render(): React.ReactElement<any>[];
-}
+export declare function CollaboratorsBody(props: {
+    collaboratorsChanged: ISignal<CollaboratorsPanel, ICollaboratorAwareness[]>;
+    fileopener: (path: string) => void;
+    docRegistry?: DocumentRegistry;
+}): JSX.Element;
+export declare function Collaborator(props: {
+    collaborator: ICollaboratorAwareness;
+    fileopener: (path: string) => void;
+    docRegistry?: DocumentRegistry;
+}): JSX.Element;

package/lib/collaboratorspanel.js

@@ -1,9 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import * as React from 'react';
-import { Panel } from '@lumino/widgets';
 import { ReactWidget } from '@jupyterlab/apputils';
-import { PathExt } from '@jupyterlab/coreutils';
+import { LabIcon, caretDownIcon, fileIcon } from '@jupyterlab/ui-components';
+import { Signal } from '@lumino/signaling';
+import { Panel } from '@lumino/widgets';
+import React, { useState } from 'react';
 /**
  * The CSS class added to collaborators panel.
  */
@@ -17,15 +18,31 @@ const COLLABORATORS_LIST_CLASS = 'jp-CollaboratorsList';
  */
 const COLLABORATOR_CLASS = 'jp-Collaborator';
 /**
- * The CSS class added to each collaborator element.
+ * The CSS class added to each collaborator header.
+ */
+const COLLABORATOR_HEADER_CLASS = 'jp-CollaboratorHeader';
+/**
+ * The CSS class added to each collaborator header collapser.
+ */
+const COLLABORATOR_HEADER_COLLAPSER_CLASS = 'jp-CollaboratorHeaderCollapser';
+/**
+ * The CSS class added to each collaborator header with document.
  */
 const CLICKABLE_COLLABORATOR_CLASS = 'jp-ClickableCollaborator';
 /**
  * The CSS class added to each collaborator icon.
  */
 const COLLABORATOR_ICON_CLASS = 'jp-CollaboratorIcon';
+/**
+ * The CSS class added to the files list.
+ */
+const COLLABORATOR_FILES_CLASS = 'jp-CollaboratorFiles';
+/**
+ * The CSS class added to the files in the list.
+ */
+const COLLABORATOR_FILE_CLASS = 'jp-CollaboratorFile';
 export class CollaboratorsPanel extends Panel {
-    constructor(currentUser, awareness, fileopener) {
+    constructor(currentUser, awareness, fileopener, docRegistry) {
         super({});
         /**
          * Handle collaborator change.
@@ -39,61 +56,76 @@ export class CollaboratorsPanel extends Panel {
                     collaborators.push(value);
                 }
             });
-            this._body.collaborators = collaborators;
+            this._collaboratorsChanged.emit(collaborators);
         };
+        this._collaboratorsChanged = new Signal(this);
         this._awareness = awareness;
         this._currentUser = currentUser;
         this.addClass(COLLABORATORS_PANEL_CLASS);
-        this._body = new CollaboratorsBody(fileopener);
-        this.addWidget(this._body);
-        this.update();
+        this.addWidget(ReactWidget.create(React.createElement(CollaboratorsBody, { fileopener: fileopener, collaboratorsChanged: this._collaboratorsChanged, docRegistry: docRegistry })));
         this._awareness.on('change', this._onAwarenessChanged);
     }
 }
-/**
- * The collaborators list.
- */
-export class CollaboratorsBody extends ReactWidget {
-    constructor(fileopener) {
-        super();
-        this._collaborators = [];
-        this._fileopener = fileopener;
-        this.addClass(COLLABORATORS_LIST_CLASS);
-    }
-    get collaborators() {
-        return this._collaborators;
-    }
-    set collaborators(value) {
-        this._collaborators = value;
-        this.update();
-    }
-    render() {
-        return this._collaborators.map((value, i) => {
-            let canOpenCurrent = false;
-            let current = '';
-            let separator = '';
-            let currentFileLocation = '';
-            if (value.current) {
-                canOpenCurrent = true;
-                const path = value.current.split(':');
-                currentFileLocation = `${path[1]}:${path[2]}`;
-                current = PathExt.basename(path[2]);
-                current =
-                    current.length > 25 ? current.slice(0, 12).concat('…') : current;
-                separator = '•';
-            }
-            const onClick = () => {
-                if (canOpenCurrent) {
-                    this._fileopener(currentFileLocation);
-                }
-            };
-            const displayName = `${value.user.display_name} ${separator} ${current}`;
-            return (React.createElement("div", { className: canOpenCurrent
-                    ? `${CLICKABLE_COLLABORATOR_CLASS} ${COLLABORATOR_CLASS}`
-                    : COLLABORATOR_CLASS, key: i, onClick: onClick },
-                React.createElement("div", { className: COLLABORATOR_ICON_CLASS, style: { backgroundColor: value.user.color } },
-                    React.createElement("span", null, value.user.initials)),
-                React.createElement("span", null, displayName)));
-        });
+export function CollaboratorsBody(props) {
+    const [collaborators, setCollaborators] = useState([]);
+    props.collaboratorsChanged.connect((_, value) => {
+        setCollaborators(value);
+    });
+    return (React.createElement("div", { className: COLLABORATORS_LIST_CLASS }, collaborators.map((collaborator, i) => {
+        return (React.createElement(Collaborator, { collaborator: collaborator, fileopener: props.fileopener, docRegistry: props.docRegistry }));
+    })));
+}
+export function Collaborator(props) {
+    const [open, setOpen] = useState(false);
+    const { collaborator, fileopener } = props;
+    let currentMain = '';
+    if (collaborator.current) {
+        const path = collaborator.current.split(':');
+        currentMain = `${path[1]}:${path[2]}`;
     }
+    const documents = collaborator.documents || [];
+    const docs = documents.map(document => {
+        var _a, _b;
+        const path = document.split(':');
+        const fileTypes = (_b = (_a = props.docRegistry) === null || _a === void 0 ? void 0 : _a.getFileTypesForPath(path[1])) === null || _b === void 0 ? void 0 : _b.filter(ft => ft.icon !== undefined);
+        const icon = fileTypes ? fileTypes[0].icon : fileIcon;
+        const iconClass = fileTypes
+            ? fileTypes[0].iconClass
+            : undefined;
+        return {
+            filepath: path[1],
+            filename: path[1].length > 40
+                ? path[1]
+                    .slice(0, 10)
+                    .concat('…')
+                    .concat(path[1].slice(path[1].length - 15))
+                : path[1],
+            fileLocation: document,
+            icon,
+            iconClass
+        };
+    });
+    const onClick = () => {
+        if (docs.length) {
+            setOpen(!open);
+        }
+    };
+    return (React.createElement("div", { className: COLLABORATOR_CLASS },
+        React.createElement("div", { className: docs.length
+                ? `${CLICKABLE_COLLABORATOR_CLASS} ${COLLABORATOR_HEADER_CLASS}`
+                : COLLABORATOR_HEADER_CLASS, onClick: documents ? onClick : undefined },
+            React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: COLLABORATOR_HEADER_COLLAPSER_CLASS +
+                    (open ? ' jp-mod-expanded' : ''), tag: 'div' }),
+            React.createElement("div", { className: COLLABORATOR_ICON_CLASS, style: { backgroundColor: collaborator.user.color } },
+                React.createElement("span", null, collaborator.user.initials)),
+            React.createElement("span", null, collaborator.user.display_name)),
+        React.createElement("div", { className: `${COLLABORATOR_FILES_CLASS} jp-DirListing`, style: open ? {} : { display: 'none' } },
+            React.createElement("ul", { className: 'jp-DirListing-content' }, docs.map(doc => {
+                return (React.createElement("li", { className: 'jp-DirListing-item ' +
+                        (doc.fileLocation === currentMain
+                            ? `${COLLABORATOR_FILE_CLASS} jp-mod-running`
+                            : COLLABORATOR_FILE_CLASS), key: doc.filename, onClick: () => fileopener(doc.fileLocation) },
+                    React.createElement(LabIcon.resolveReact, { icon: doc.icon, iconClass: doc.iconClass, tag: 'span', className: 'jp-DirListing-itemIcon', stylesheet: 'listing' }),
+                    React.createElement("span", { className: 'jp-DirListing-itemText', title: doc.filepath }, doc.filename)));
+            })))));
 }

package/lib/tokens.d.ts

@@ -68,7 +68,11 @@ export interface ICollaboratorAwareness {
      */
     user: User.IIdentity;
     /**
-     * The current file/context the user is working on.
+     * The current file/context the user is working on (current panel in main area).
      */
     current?: string;
+    /**
+     * The shared documents opened by the user.
+     */
+    documents?: string[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/collaboration",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-beta.0",
   "description": "JupyterLab - Real-Time Collaboration Widgets",
   "homepage": "https://github.com/jupyterlab/jupyter-collaboration",
   "bugs": {
@@ -41,12 +41,14 @@
   "dependencies": {
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.0",
-    "@jupyter/docprovider": "^3.0.0-alpha.1",
+    "@jupyter/docprovider": "^3.0.0-beta.0",
     "@jupyterlab/apputils": "^4.0.5",
     "@jupyterlab/coreutils": "^6.0.5",
+    "@jupyterlab/docregistry": "^4.0.5",
     "@jupyterlab/services": "^7.0.5",
     "@jupyterlab/ui-components": "^4.0.5",
     "@lumino/coreutils": "^2.1.0",
+    "@lumino/signaling": "^2.0.0",
     "@lumino/virtualdom": "^2.0.0",
     "@lumino/widgets": "^2.1.0",
     "react": "^18.2.0",
@@ -54,7 +56,7 @@
     "yjs": "^13.5.40"
   },
   "devDependencies": {
-    "@types/react": "^18.0.27",
+    "@types/react": "~18.3.1",
     "rimraf": "^4.1.2",
     "typescript": "~5.0.4"
   },

package/style/sidepanel.css

@@ -86,7 +86,7 @@
   z-index: 1000;
 }
 
-.jp-Collaborator {
+.jp-CollaboratorHeader {
   padding: 10px;
   display: flex;
   align-items: center;
@@ -95,6 +95,10 @@
   color: var(--jp-ui-font-color1);
 }
 
+.jp-CollaboratorHeader > span {
+  padding-left: 7px;
+}
+
 .jp-ClickableCollaborator:hover {
   cursor: pointer;
   background-color: var(--jp-layout-color2);
@@ -102,8 +106,18 @@
   color: var(--jp-ui-font-color0);
 }
 
-.jp-Collaborator > span {
-  padding-left: 7px;
+.jp-CollaboratorHeaderCollapser {
+  transform: rotate(-90deg);
+  margin: auto 0;
+  height: 16px;
+}
+
+.jp-CollaboratorHeader:not(.jp-ClickableCollaborator) .jp-CollaboratorHeaderCollapser {
+  visibility: hidden;
+}
+
+.jp-CollaboratorHeaderCollapser.jp-mod-expanded {
+  transform: rotate(0deg);
 }
 
 .jp-CollaboratorIcon {
@@ -122,7 +136,9 @@
   color: var(--jp-ui-font-color1);
 }
 
-.jp-CollaboratorCurrent {
-  position: absolute;
-  right: 0;
+.jp-CollaboratorFiles {
+  padding-left: 1em;
+  margin-top: 0;
+  box-shadow: 0 2px 2px -2px rgb(0 0 0 / 24%);
+
 }