@jupyter/collaboration 4.1.0-beta.0 → 4.1.0-rc.0

package/lib/sharedlink.js

@@ -16,17 +16,372 @@ export async function showSharedLinkDialog({ translator }) {
     const url = new URL(URLExt.normalize(PageConfig.getUrl({
         workspace: PageConfig.defaultWorkspace
     })));
-    return showDialog({
-        title: trans.__('Share Jupyter Server Link'),
-        body: new SharedLinkBody(url.toString(), token, PageConfig.getOption('hubUser') !== '', trans),
-        buttons: [
-            Dialog.cancelButton(),
-            Dialog.okButton({
-                label: trans.__('Copy Link'),
-                caption: trans.__('Copy the link to the Jupyter Server')
+    let canCreateShare = false;
+    let canListUsers = false;
+    let canListGroups = false;
+    let canControlServer = false;
+    let hubApiUrl = '';
+    let serverName = '';
+    let serverOwner = '';
+    // If hubUser is set, we are behind a JupyterHub
+    if (PageConfig.getOption('hubUser') !== '') {
+        // Get server name and owner
+        serverOwner = PageConfig.getOption('hubServerUser');
+        serverName = PageConfig.getOption('hubServerName');
+        // Prepare the Hub API URL
+        const protocol = window.location.protocol;
+        const hostname = PageConfig.getOption('hubHost') || window.location.hostname;
+        const port = window.location.port;
+        const prefix = PageConfig.getOption('hubPrefix');
+        hubApiUrl = `${protocol}//${hostname}:${port}${prefix}api`;
+        // Check Hub version for share compatibility (>= 5.0)
+        const response = await fetch(hubApiUrl, {
+            // A GET request on base API url returns the Hub version
+            headers: {
+                Authorization: `token ${token}`
+            }
+        });
+        const data = await response.json();
+        const hubVersion = data.version;
+        const [major] = hubVersion.split('.').map(Number);
+        if (major >= 5) {
+            // The Hub version is compatible with the share feature, but we need to check if the user has rights to create a share
+            const userResponse = await fetch(`${hubApiUrl}/user`, {
+                headers: {
+                    Authorization: `token ${token}`
+                }
+            });
+            const userData = await userResponse.json();
+            // The permissions needed are "read:users:name" (to be able to get a user by his/her name) and "shares!user=owner" (to be able to manage shares)
+            if (userData.scopes.includes('read:users:name')) {
+                // Check for shares permission (shares!user or shares!user=owner or shares!server=owner/serverName)
+                if ((serverOwner === PageConfig.getOption('hubUser') &&
+                    userData.scopes.includes('shares!user')) ||
+                    userData.scopes.includes('shares!user=' + serverOwner) ||
+                    userData.scopes.includes('shares!server=' + serverOwner + '/' + serverName)) {
+                    // If the user has the required permissions, we can create a share
+                    canCreateShare = true;
+                    // Check if the user has the correct scope to list all users (not mandatory, but makes the UI easier to use)
+                    if (userData.scopes.includes('list:users') ||
+                        userData.scopes.includes('read:users') ||
+                        userData.scopes.includes('admin:users')) {
+                        canListUsers = true;
+                    }
+                    // Check if the user has the correct scope to list all groups (not mandatory, but makes the UI easier to use)
+                    if (userData.scopes.includes('list:groups') ||
+                        userData.scopes.includes('read:groups') ||
+                        userData.scopes.includes('admin:groups')) {
+                        canListGroups = true;
+                    }
+                    // Check if the user has the correct scope to control the server (not mandatory, but allows other users to start/stop the server)
+                    if ((serverOwner === PageConfig.getOption('hubUser') &&
+                        userData.scopes.includes('servers!user')) ||
+                        userData.scopes.includes('servers!user=' + serverOwner) ||
+                        userData.scopes.includes('servers!server=' + serverOwner + '/' + serverName + '/') ||
+                        userData.scopes.includes('admin:servers')) {
+                        canControlServer = true;
+                    }
+                }
+            }
+        }
+    }
+    // If we can create a share, open the proper UI
+    if (canCreateShare) {
+        let readableServerName = serverName;
+        if (readableServerName === '') {
+            readableServerName = 'default';
+        }
+        return showDialog({
+            title: trans.__('Share Jupyter Server %1', readableServerName),
+            body: new ManageSharesBody(url.toString(), serverName, canListUsers, canListGroups, canControlServer, serverOwner, hubApiUrl, token, trans),
+            buttons: [
+                Dialog.cancelButton({
+                    label: trans.__('Close'),
+                    caption: trans.__('Close the dialog')
+                }),
+                Dialog.okButton({
+                    label: trans.__('Copy Link'),
+                    caption: trans.__('Copy the link to the Jupyter Server')
+                })
+            ]
+        });
+        // If we can't create a real share, we show the legacy dialog that just copies the URL with the server owner's token
+    }
+    else {
+        return showDialog({
+            title: trans.__('Share Jupyter Server Link'),
+            body: new SharedLinkBody(url.toString(), token, PageConfig.getOption('hubUser') !== '', trans),
+            buttons: [
+                Dialog.cancelButton(),
+                Dialog.okButton({
+                    label: trans.__('Copy Link'),
+                    caption: trans.__('Copy the link to the Jupyter Server')
+                })
+            ]
+        });
+    }
+}
+class ManageSharesBody extends Widget {
+    constructor(_url, _serverName, _canListUsers, _canListGroups, _canControlServer, _serverOwner, _hubApiUrl, _token, _trans) {
+        super();
+        this._url = _url;
+        this._serverName = _serverName;
+        this._canListUsers = _canListUsers;
+        this._canListGroups = _canListGroups;
+        this._canControlServer = _canControlServer;
+        this._serverOwner = _serverOwner;
+        this._hubApiUrl = _hubApiUrl;
+        this._token = _token;
+        this._trans = _trans;
+        this._recipients = [];
+        this._shares = [];
+        this._searchInput = null;
+        this._searchResults = null;
+        this._sharesContainer = null;
+        this._populateBody(this.node);
+        this.addClass('jp-shared-link-body');
+        this._loadShares().then(() => {
+            this._updateSharesList().then(() => {
+                this._loadUsers();
+            });
+        });
+    }
+    /**
+     * Returns the input value.
+     */
+    getValue() {
+        return this._url;
+    }
+    onAfterAttach(msg) {
+        super.onAfterAttach(msg);
+    }
+    onBeforeDetach(msg) {
+        super.onBeforeDetach(msg);
+    }
+    async _loadUsers() {
+        // If possible, download the users list for the UI
+        if (this._canListUsers) {
+            let offset = 0;
+            const limit = 200;
+            let usersData = [];
+            let hasMore = true;
+            while (hasMore) {
+                const usersResponse = await fetch(`${this._hubApiUrl}/users?limit=${limit}&offset=${offset}`, {
+                    headers: {
+                        Authorization: `token ${this._token}`
+                    }
+                });
+                const data = await usersResponse.json();
+                usersData = usersData.concat(data);
+                hasMore = data.length === limit;
+                offset += limit;
+            }
+            const sharedUserNames = new Set(this._shares
+                .filter(share => share.type === 'user')
+                .map(share => share.name));
+            // We remove from the list the current user and the users that already have a share
+            this._recipients = usersData
+                .filter((user) => user.name !== this._serverOwner && !sharedUserNames.has(user.name))
+                .map((user) => ({ ...user, type: 'user' }));
+        }
+        // If possible, download the groups list for the UI and add them to the users list
+        if (this._canListGroups) {
+            const groupsResponse = await fetch(`${this._hubApiUrl}/groups`, {
+                headers: {
+                    Authorization: `token ${this._token}`
+                }
+            });
+            const groupsData = await groupsResponse.json();
+            const sharedGroupNames = new Set(this._shares
+                .filter(share => share.type === 'group')
+                .map(share => share.name));
+            this._recipients = this._recipients.concat(groupsData
+                .filter((group) => !sharedGroupNames.has(group.name))
+                .map((group) => ({ name: group.name, type: 'group' })));
+        }
+        // Sort users and groups by name in alphabetical order
+        this._recipients.sort((a, b) => a.name.localeCompare(b.name));
+        this._updateSearchResults();
+    }
+    async _loadShares() {
+        const sharesResponse = await fetch(`${this._hubApiUrl}/shares/${this._serverOwner}/${this._serverName}`, {
+            headers: {
+                Authorization: `token ${this._token}`
+            }
+        });
+        const sharesData = await sharesResponse.json();
+        this._shares = sharesData.items.map((item) => {
+            var _a, _b;
+            return ({
+                name: ((_a = item.user) === null || _a === void 0 ? void 0 : _a.name) || ((_b = item.group) === null || _b === void 0 ? void 0 : _b.name),
+                createdAt: item.created_at,
+                type: item.user ? 'user' : 'group'
+            });
+        });
+    }
+    async _createShare(sharewith, type) {
+        // If the issuer can control the server, we add the "servers!server" scope to the share to let other users start/stop the server
+        const scopes = [
+            'access:servers!server=' + this._serverOwner + '/' + this._serverName
+        ];
+        if (this._canControlServer) {
+            scopes.push('servers!server=' + this._serverOwner + '/' + this._serverName);
+        }
+        await fetch(`${this._hubApiUrl}/shares/${this._serverOwner}/${this._serverName}`, {
+            method: 'POST',
+            headers: {
+                Authorization: `token ${this._token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                [type]: sharewith.name,
+                scopes
+            })
+        });
+    }
+    async _deleteShare(sharewith, type) {
+        await fetch(`${this._hubApiUrl}/shares/${this._serverOwner}/${this._serverName}`, {
+            method: 'PATCH',
+            headers: {
+                Authorization: `token ${this._token}`
+            },
+            body: JSON.stringify({
+                [type]: sharewith.name
             })
-        ]
-    });
+        });
+    }
+    _populateBody(dialogBody) {
+        // Add search input
+        const searchContainer = document.createElement('div');
+        searchContainer.classList.add('jp-ManageSharesBody-search-container');
+        this._searchInput = document.createElement('input');
+        this._searchInput.type = 'text';
+        this._searchInput.classList.add('jp-ManageSharesBody-search-input');
+        this._searchInput.placeholder = this._trans.__('Type to search for a user or a group to share your server with...');
+        this._searchInput.addEventListener('input', () => {
+            this._updateSearchResults();
+        });
+        searchContainer.appendChild(this._searchInput);
+        dialogBody.appendChild(searchContainer);
+        // Add search results container
+        this._searchResults = document.createElement('div');
+        this._searchResults.classList.add('jp-ManageSharesBody-search-results');
+        dialogBody.appendChild(this._searchResults);
+        // Add selected users container
+        this._sharesContainer = document.createElement('div');
+        this._sharesContainer.classList.add('jp-ManageSharesBody-selected-users');
+        dialogBody.appendChild(this._sharesContainer);
+        const input = document.createElement('input');
+        input.classList.add('jp-ManageSharesBody-url-input');
+        input.readOnly = true;
+        input.value = this._url;
+        dialogBody.appendChild(input);
+        dialogBody.insertAdjacentHTML('beforeend', '<br>');
+        dialogBody.insertAdjacentText('beforeend', this._trans.__('Warning: Anyone you share this server with will have access to all your files, not just the currently open file.'));
+        dialogBody.insertAdjacentHTML('beforeend', '<br>');
+        dialogBody.insertAdjacentText('beforeend', this._trans.__('If your Hub administrator allows it, you can create another server dedicated to sharing a specific project.'));
+    }
+    _updateSearchResults() {
+        var _a;
+        if (!this._searchResults) {
+            return;
+        }
+        this._searchResults.innerHTML = '';
+        const query = ((_a = this._searchInput) === null || _a === void 0 ? void 0 : _a.value) || '';
+        const filteredUsers = this._recipients.filter(user => user.name.toLowerCase().includes(query.toLowerCase()) || query === '');
+        filteredUsers.forEach(user => {
+            var _a;
+            const userElement = document.createElement('div');
+            userElement.classList.add('jp-ManageSharesBody-user-item');
+            if (user.type === 'group') {
+                userElement.textContent = this._trans.__('Group %1', user.name);
+            }
+            else {
+                userElement.textContent = user.name;
+            }
+            userElement.addEventListener('click', async () => {
+                await this._createShare(user, user.type);
+                await this._loadShares();
+                await this._updateSharesList();
+                // Removing the new user from the search results
+                const sharedUserNames = new Set(this._shares.map(share => share.name));
+                this._recipients = this._recipients.filter((user) => user.name !== this._serverOwner && !sharedUserNames.has(user.name));
+                this._updateSearchResults();
+            });
+            (_a = this._searchResults) === null || _a === void 0 ? void 0 : _a.appendChild(userElement);
+        });
+    }
+    async _updateSharesList() {
+        if (!this._sharesContainer) {
+            return;
+        }
+        this._sharesContainer.innerHTML = '';
+        const table = document.createElement('table');
+        table.classList.add('jp-ManageSharesBody-shares-table');
+        const headerRow = document.createElement('tr');
+        const thSharedWith = document.createElement('th');
+        thSharedWith.textContent = this._trans.__('Shared with');
+        const thSharedSince = document.createElement('th');
+        thSharedSince.textContent = this._trans.__('Shared since');
+        const thActions = document.createElement('th');
+        thActions.textContent = this._trans.__('Actions');
+        headerRow.appendChild(thSharedWith);
+        headerRow.appendChild(thSharedSince);
+        headerRow.appendChild(thActions);
+        table.appendChild(headerRow);
+        if (this._shares.length === 0) {
+            const row = document.createElement('tr');
+            const cell = document.createElement('td');
+            cell.colSpan = 3;
+            cell.textContent = this._trans.__('Your server is not shared to anybody yet. You can search for users and groups above.');
+            row.appendChild(cell);
+            table.appendChild(row);
+        }
+        else {
+            this._shares.forEach(share => {
+                const row = document.createElement('tr');
+                // Shared with cell
+                const sharedWithCell = document.createElement('td');
+                if (share.type === 'group') {
+                    sharedWithCell.textContent = this._trans.__('Group %1', share.name);
+                }
+                else {
+                    sharedWithCell.textContent = share.name;
+                }
+                row.appendChild(sharedWithCell);
+                // Shared since cell
+                const sharedSinceCell = document.createElement('td');
+                const formattedDate = new Date(share.createdAt).toLocaleString([], {
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit'
+                });
+                sharedSinceCell.textContent = formattedDate;
+                row.appendChild(sharedSinceCell);
+                // Actions cell
+                const actionsCell = document.createElement('td');
+                const revokeButton = document.createElement('button');
+                revokeButton.textContent = this._trans.__('Revoke');
+                revokeButton.classList.add('jp-mod-styled');
+                revokeButton.addEventListener('click', async () => {
+                    await this._deleteShare(share, share.type);
+                    await this._loadShares();
+                    await this._updateSharesList();
+                    await this._loadUsers();
+                    // Removing the new user from the search results
+                    const sharedUserNames = new Set(this._shares.map(share => share.name));
+                    this._recipients = this._recipients.filter((user) => user.name !== this._serverOwner && !sharedUserNames.has(user.name));
+                    this._updateSearchResults();
+                });
+                actionsCell.appendChild(revokeButton);
+                row.appendChild(actionsCell);
+                table.appendChild(row);
+            });
+        }
+        this._sharesContainer.appendChild(table);
+    }
 }
 class SharedLinkBody extends Widget {
     constructor(_url, _token, _behindHub, _trans) {
@@ -36,12 +391,12 @@ class SharedLinkBody extends Widget {
         this._behindHub = _behindHub;
         this._trans = _trans;
         this._tokenCheckbox = null;
-        this.onTokenChange = (e) => {
+        this._onTokenChange = (e) => {
             const target = e.target;
-            this.updateContent(target === null || target === void 0 ? void 0 : target.checked);
+            this._updateContent(target === null || target === void 0 ? void 0 : target.checked);
         };
         this._warning = document.createElement('div');
-        this.populateBody(this.node);
+        this._populateBody(this.node);
         this.addClass('jp-shared-link-body');
     }
     /**
@@ -62,14 +417,14 @@ class SharedLinkBody extends Widget {
     onAfterAttach(msg) {
         var _a;
         super.onAfterAttach(msg);
-        (_a = this._tokenCheckbox) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.onTokenChange);
+        (_a = this._tokenCheckbox) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this._onTokenChange);
     }
     onBeforeDetach(msg) {
         var _a;
-        (_a = this._tokenCheckbox) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.onTokenChange);
+        (_a = this._tokenCheckbox) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this._onTokenChange);
         super.onBeforeDetach(msg);
     }
-    updateContent(withToken) {
+    _updateContent(withToken) {
         this._warning.innerHTML = '';
         const urlInput = this.node.querySelector('input[readonly]');
         if (withToken) {
@@ -108,15 +463,18 @@ class SharedLinkBody extends Widget {
             }
         }
     }
-    populateBody(dialogBody) {
-        dialogBody.insertAdjacentHTML('afterbegin', `<input readonly value="${this._url}">`);
+    _populateBody(dialogBody) {
+        const input = document.createElement('input');
+        input.readOnly = true;
+        input.value = this._url;
+        dialogBody.appendChild(input);
         if (this._token) {
             const label = dialogBody.appendChild(document.createElement('label'));
             label.insertAdjacentHTML('beforeend', '<input type="checkbox">');
             this._tokenCheckbox = label.firstChild;
             label.insertAdjacentText('beforeend', this._trans.__('Include token in URL'));
             dialogBody.insertAdjacentElement('beforeend', this._warning);
-            this.updateContent(false);
+            this._updateContent(false);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/collaboration",
-  "version": "4.1.0-beta.0",
+  "version": "4.1.0-rc.0",
   "description": "JupyterLab - Real-Time Collaboration Widgets",
   "homepage": "https://github.com/jupyterlab/jupyter-collaboration",
   "bugs": {

package/style/base.css

@@ -6,6 +6,7 @@
 @import url('./menu.css');
 @import url('./sidepanel.css');
 @import url('./users-item.css');
+@import url('./sharedlink.css');
 
 .jp-shared-link-body {
     user-select: none;

package/style/sharedlink.css

@@ -0,0 +1,62 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|---------------------------------------------------------------------------- */
+
+.jp-shared-link-body {
+  user-select: none;
+}
+
+.jp-ManageSharesBody-search-container {
+  margin-bottom: 10px;
+}
+
+.jp-ManageSharesBody-search-input {
+  width: 100%;
+  padding: 5px;
+  margin-top: 5px;
+}
+
+.jp-ManageSharesBody-search-results {
+  height: 10em;
+  overflow-y: auto;
+  border: 1px solid var(--jp-border-color0);
+  padding: 5px;
+  flex-shrink: 0;
+}
+
+.jp-ManageSharesBody-user-item {
+  padding: 5px;
+  cursor: pointer;
+}
+
+.jp-ManageSharesBody-user-item:hover {
+  background-color: var(--jp-border-color3);
+}
+
+.jp-ManageSharesBody-selected-users {
+  margin-top: 10px;
+  height: 10em;
+  overflow-y: auto;
+  border: 1px solid var(--jp-border-color0);
+  flex-shrink: 0;
+}
+
+.jp-ManageSharesBody-url-input {
+  width: 100%;
+  padding: 5px;
+  margin-top: 10px;
+}
+
+.jp-ManageSharesBody-shares-table {
+  width: 100%;
+}
+
+.jp-ManageSharesBody-shares-table td:nth-child(2),
+.jp-ManageSharesBody-shares-table td:nth-child(3) {
+  text-align: center;
+}
+
+.jp-Dialog-content:has(.jp-shared-link-body) {
+    max-height: 750px;
+}