Add the list of opened shared documents to the user awareness

packages/collaboration-extension/src/collaboration.ts

@@ -109,9 +109,9 @@ export const rtcGlobalAwarenessPlugin: JupyterFrontEndPlugin<IAwareness> = {
 
     state.changed.connect(async () => {
       const data: any = await state.toJSON();
-      const current = data['layout-restorer:data']?.main?.current || '';
+      const current: string = data['layout-restorer:data']?.main?.current || '';
 
-      if (current.startsWith('editor') || current.startsWith('notebook')) {
+      if (current.match(/^\w+:RTC:/)) {
         awareness.setLocalStateField('current', current);
       } else {
         awareness.setLocalStateField('current', null);
@@ -161,7 +161,8 @@ export const rtcPanelPlugin: JupyterFrontEndPlugin<void> = {
     const collaboratorsPanel = new CollaboratorsPanel(
       user,
       awareness,
-      fileopener
+      fileopener,
+      app.docRegistry
     );
     collaboratorsPanel.title.label = trans.__('Online Collaborators');
     userPanel.addWidget(collaboratorsPanel);

packages/collaboration/package.json

@@ -44,9 +44,11 @@
     "@jupyter/docprovider": "^3.0.0-alpha.2",
     "@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",

packages/collaboration/src/collaboratorspanel.tsx

@@ -1,17 +1,21 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import * as React from 'react';
+import { ReactWidget } from '@jupyterlab/apputils';
 
-import { Awareness } from 'y-protocols/awareness';
+import { DocumentRegistry } from '@jupyterlab/docregistry';
 
-import { Panel } from '@lumino/widgets';
+import { User } from '@jupyterlab/services';
 
-import { ReactWidget } from '@jupyterlab/apputils';
+import { LabIcon, caretDownIcon, fileIcon } from '@jupyterlab/ui-components';
 
-import { User } from '@jupyterlab/services';
+import { Signal, ISignal } from '@lumino/signaling';
 
-import { PathExt } from '@jupyterlab/coreutils';
+import { Panel } from '@lumino/widgets';
+
+import React, { useState } from 'react';
+
+import { Awareness } from 'y-protocols/awareness';
 
 import { ICollaboratorAwareness } from './tokens';
 
@@ -31,7 +35,17 @@
 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';
 
@@ -40,15 +54,22 @@
  */
 const COLLABORATOR_ICON_CLASS = 'jp-CollaboratorIcon';
 
-export class CollaboratorsPanel extends Panel {
-  private _currentUser: User.IManager;
-  private _awareness: Awareness;
-  private _body: CollaboratorsBody;
+/**
+ * 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: User.IManager,
     awareness: Awareness,
-    fileopener: (path: string) => void
+    fileopener: (path: string) => void,
+    docRegistry?: DocumentRegistry
   ) {
     super({});
 
@@ -58,9 +79,15 @@
 
     this.addClass(COLLABORATORS_PANEL_CLASS);
 
-    this._body = new CollaboratorsBody(fileopener);
-    this.addWidget(this._body);
-    this.update();
+    this.addWidget(
+      ReactWidget.create(
+        <CollaboratorsBody
+          fileopener={fileopener}
+          collaboratorsChanged={this._collaboratorsChanged}
+          docRegistry={docRegistry}
+        ></CollaboratorsBody>
+      )
+    );
 
     this._awareness.on('change', this._onAwarenessChanged);
   }
@@ -75,83 +102,153 @@
     state.forEach((value: ICollaboratorAwareness, key: any) => {
       if (
         this._currentUser.isReady &&
         value.user.username !== this._currentUser.identity!.username
       ) {
         collaborators.push(value);
       }
     });
-
-    this._body.collaborators = collaborators;
+    this._collaboratorsChanged.emit(collaborators);
   };
+  private _currentUser: User.IManager;
+  private _awareness: Awareness;
+  private _collaboratorsChanged = new Signal<this, ICollaboratorAwareness[]>(
+    this
+  );
 }
 
-/**
- * The collaborators list.
- */
-export class CollaboratorsBody extends ReactWidget {
-  private _collaborators: ICollaboratorAwareness[] = [];
-  private _fileopener: (path: string) => void;
-
-  constructor(fileopener: (path: string) => void) {
-    super();
-    this._fileopener = fileopener;
-    this.addClass(COLLABORATORS_LIST_CLASS);
-  }
-
-  get collaborators(): ICollaboratorAwareness[] {
-    return this._collaborators;
-  }
+export function CollaboratorsBody(props: {
+  collaboratorsChanged: ISignal<CollaboratorsPanel, ICollaboratorAwareness[]>;
+  fileopener: (path: string) => void;
+  docRegistry?: DocumentRegistry;
+}): JSX.Element {
+  const [collaborators, setCollaborators] = useState<ICollaboratorAwareness[]>(
+    []
+  );
+
+  props.collaboratorsChanged.connect((_, value) => {
+    setCollaborators(value);
+  });
+
+  return (
+    <div className={COLLABORATORS_LIST_CLASS}>
+      {collaborators.map((collaborator, i) => {
+        return (
+          <Collaborator
+            collaborator={collaborator}
+            fileopener={props.fileopener}
+            docRegistry={props.docRegistry}
+          ></Collaborator>
+        );
+      })}
+    </div>
+  );
+}
 
-  set collaborators(value: ICollaboratorAwareness[]) {
-    this._collaborators = value;
-    this.update();
+export function Collaborator(props: {
+  collaborator: ICollaboratorAwareness;
+  fileopener: (path: string) => void;
+  docRegistry?: DocumentRegistry;
+}): JSX.Element {
+  const [open, setOpen] = useState<boolean>(false);
+  const { collaborator, fileopener } = props;
+  let currentMain = '';
+
+  if (collaborator.current) {
+    const path = collaborator.current.split(':');
+    currentMain = `${path[1]}:${path[2]}`;
   }
 
-  render(): React.ReactElement<any>[] {
-    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 documents: string[] = collaborator.documents || [];
+
+  const docs = documents.map(document => {
+    const path = document.split(':');
+    const fileTypes = props.docRegistry
+      ?.getFileTypesForPath(path[1])
+      ?.filter(ft => ft.icon !== undefined);
+    const icon = fileTypes ? fileTypes[0].icon! : fileIcon;
+    const iconClass: string | undefined = 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);
+    }
+  };
 
-      const onClick = () => {
-        if (canOpenCurrent) {
-          this._fileopener(currentFileLocation);
+  return (
+    <div className={COLLABORATOR_CLASS}>
+      <div
+        className={
+          docs.length
+            ? `${CLICKABLE_COLLABORATOR_CLASS} ${COLLABORATOR_HEADER_CLASS}`
+            : COLLABORATOR_HEADER_CLASS
         }
-      };
-
-      const displayName = `${value.user.display_name} ${separator} ${current}`;
-
-      return (
-        <div
+        onClick={documents ? onClick : undefined}
+      >
+        <LabIcon.resolveReact
+          icon={caretDownIcon}
           className={
-            canOpenCurrent
-              ? `${CLICKABLE_COLLABORATOR_CLASS} ${COLLABORATOR_CLASS}`
-              : COLLABORATOR_CLASS
+            COLLABORATOR_HEADER_COLLAPSER_CLASS +
+            (open ? ' jp-mod-expanded' : '')
           }
-          key={i}
-          onClick={onClick}
+          tag={'div'}
+        />
+        <div
+          className={COLLABORATOR_ICON_CLASS}
+          style={{ backgroundColor: collaborator.user.color }}
         >
-          <div
-            className={COLLABORATOR_ICON_CLASS}
-            style={{ backgroundColor: value.user.color }}
-          >
-            <span>{value.user.initials}</span>
-          </div>
-          <span>{displayName}</span>
+          <span>{collaborator.user.initials}</span>
         </div>
-      );
-    });
-  }
+        <span>{collaborator.user.display_name}</span>
+      </div>
+      <div
+        className={`${COLLABORATOR_FILES_CLASS} jp-DirListing`}
+        style={open ? {} : { display: 'none' }}
+      >
+        <ul className={'jp-DirListing-content'}>
+          {docs.map(doc => {
+            return (
+              <li
+                className={
+                  'jp-DirListing-item ' +
+                  (doc.fileLocation === currentMain
+                    ? `${COLLABORATOR_FILE_CLASS} jp-mod-running`
+                    : COLLABORATOR_FILE_CLASS)
+                }
+                key={doc.filename}
+                onClick={() => fileopener(doc.fileLocation)}
+              >
+                <LabIcon.resolveReact
+                  icon={doc.icon}
+                  iconClass={doc.iconClass}
+                  tag={'span'}
+                  className={'jp-DirListing-itemIcon'}
+                  stylesheet={'listing'}
+                />
+                <span className={'jp-DirListing-itemText'} title={doc.filepath}>
+                  {doc.filename}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
 }

packages/collaboration/src/tokens.ts

@@ -87,7 +87,12 @@ 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[];
 }