@jupyterlab/filebrowser 4.2.0-beta.1 → 4.2.0-beta.3

package/src/listing.ts

@@ -209,7 +209,7 @@ export class DirListing extends Widget {
   /**
    * Construct a new file browser directory listing widget.
    *
-   * @param model - The file browser view model.
+   * @param options The constructor options
    */
   constructor(options: DirListing.IOptions) {
     super({
@@ -227,6 +227,9 @@ export class DirListing extends Widget {
     this._manager = this._model.manager;
     this._renderer = options.renderer || DirListing.defaultRenderer;
 
+    // Get the width of the "modified" column
+    this._updateModifiedSize(this.node);
+
     const headerNode = DOMUtils.findElement(this.node, HEADER_CLASS);
     // hide the file size column by default
     this._hiddenColumns.add('file_size');
@@ -806,6 +809,99 @@ export class DirListing extends Widget {
     }
   }
 
+  // Update the modified column's size
+  private _updateModifiedSize(node: HTMLElement) {
+    const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
+    this._modifiedWidth = modified?.getBoundingClientRect().width ?? 83;
+    this._modifiedStyle =
+      this._modifiedWidth < 90
+        ? 'narrow'
+        : this._modifiedWidth > 110
+        ? 'long'
+        : 'short';
+  }
+
+  // Update only the modified dates.
+  protected updateModified(items: Contents.IModel[], nodes: HTMLElement[]) {
+    items.forEach((item, i) => {
+      const node = nodes[i];
+      if (item.last_modified) {
+        const modified = DOMUtils.findElement(node, ITEM_MODIFIED_CLASS);
+        if (this.renderer.updateItemModified !== undefined) {
+          this.renderer.updateItemModified(
+            modified,
+            item.last_modified,
+            this._modifiedStyle
+          );
+        } else {
+          DirListing.defaultRenderer.updateItemModified(
+            modified,
+            item.last_modified,
+            this._modifiedStyle
+          );
+        }
+      }
+    });
+  }
+
+  // Update item nodes based on widget state.
+  protected updateNodes(items: Contents.IModel[], nodes: HTMLElement[]) {
+    items.forEach((item, i) => {
+      const node = nodes[i];
+      const ft = this._manager.registry.getFileTypeForModel(item);
+      this.renderer.updateItemNode(
+        node,
+        item,
+        ft,
+        this.translator,
+        this._hiddenColumns,
+        this.selection[item.path],
+        this._modifiedStyle
+      );
+      if (
+        this.selection[item.path] &&
+        this._isCut &&
+        this._model.path === this._prevPath
+      ) {
+        node.classList.add(CUT_CLASS);
+      }
+
+      // add metadata to the node
+      node.setAttribute(
+        'data-isdir',
+        item.type === 'directory' ? 'true' : 'false'
+      );
+    });
+
+    // Handle the selectors on the widget node.
+    const selected = Object.keys(this.selection).length;
+    if (selected) {
+      this.addClass(SELECTED_CLASS);
+      if (selected > 1) {
+        this.addClass(MULTI_SELECTED_CLASS);
+      }
+    }
+
+    // Handle file session statuses.
+    const paths = items.map(item => item.path);
+    for (const session of this._model.sessions()) {
+      const index = ArrayExt.firstIndexOf(paths, session.path);
+      const node = nodes[index];
+      // Node may have been filtered out.
+      if (node) {
+        let name = session.kernel?.name;
+        const specs = this._model.specs;
+
+        node.classList.add(RUNNING_CLASS);
+        if (specs && name) {
+          const spec = specs.kernelspecs[name];
+          name = spec ? spec.display_name : this._trans.__('unknown');
+        }
+        node.title = this._trans.__('%1\nKernel: %2', node.title, name);
+      }
+    }
+  }
+
   /**
    * A handler invoked on an `'update-request'` message.
    */
@@ -879,60 +975,7 @@ export class DirListing extends Widget {
       );
     }
 
-    // Update item nodes based on widget state.
-    items.forEach((item, i) => {
-      const node = nodes[i];
-      const ft = this._manager.registry.getFileTypeForModel(item);
-      renderer.updateItemNode(
-        node,
-        item,
-        ft,
-        this.translator,
-        this._hiddenColumns,
-        this.selection[item.path]
-      );
-      if (
-        this.selection[item.path] &&
-        this._isCut &&
-        this._model.path === this._prevPath
-      ) {
-        node.classList.add(CUT_CLASS);
-      }
-
-      // add metadata to the node
-      node.setAttribute(
-        'data-isdir',
-        item.type === 'directory' ? 'true' : 'false'
-      );
-    });
-
-    // Handle the selectors on the widget node.
-    const selected = Object.keys(this.selection).length;
-    if (selected) {
-      this.addClass(SELECTED_CLASS);
-      if (selected > 1) {
-        this.addClass(MULTI_SELECTED_CLASS);
-      }
-    }
-
-    // Handle file session statuses.
-    const paths = items.map(item => item.path);
-    for (const session of this._model.sessions()) {
-      const index = ArrayExt.firstIndexOf(paths, session.path);
-      const node = nodes[index];
-      // Node may have been filtered out.
-      if (node) {
-        let name = session.kernel?.name;
-        const specs = this._model.specs;
-
-        node.classList.add(RUNNING_CLASS);
-        if (specs && name) {
-          const spec = specs.kernelspecs[name];
-          name = spec ? spec.display_name : this._trans.__('unknown');
-        }
-        node.title = this._trans.__('%1\nKernel: %2', node.title, name);
-      }
-    }
+    this.updateNodes(items, nodes);
 
     this._prevPath = this._model.path;
   }
@@ -941,6 +984,13 @@ export class DirListing extends Widget {
     const { width } =
       msg.width === -1 ? this.node.getBoundingClientRect() : msg;
     this.toggleClass('jp-DirListing-narrow', width < 250);
+
+    // Rerender item nodes' modified dates, if the modified style has changed.
+    const oldModifiedStyle = this._modifiedStyle;
+    this._updateModifiedSize(this.node);
+    if (oldModifiedStyle !== this._modifiedStyle) {
+      this.updateModified(this._sortedItems, this._items);
+    }
   }
 
   setColumnVisibility(
@@ -2094,6 +2144,9 @@ export class DirListing extends Widget {
   private _sortNotebooksFirst = false;
   // _focusIndex should never be set outside the range [0, this._items.length - 1]
   private _focusIndex = 0;
+  // Width of the "last modified" column for an individual file
+  private _modifiedWidth: number;
+  private _modifiedStyle: Time.HumanStyle;
 }
 
 /**
@@ -2201,6 +2254,21 @@ export namespace DirListing {
       hiddenColumns?: Set<DirListing.ToggleableColumn>
     ): HTMLElement;
 
+    /**
+     * Update an item's last modified date.
+     *
+     * @param modified - Element containing the file's last modified date.
+     *
+     * @param modifiedDate - String representation of the last modified date.
+     *
+     * @param modifiedStyle - The date style for the modified column: narrow, short, or long
+     */
+    updateItemModified?(
+      modified: HTMLElement,
+      modifiedDate: string,
+      modifiedStyle: Time.HumanStyle
+    ): void;
+
     /**
      * Update an item node to reflect the current state of a model.
      *
@@ -2208,6 +2276,8 @@ export namespace DirListing {
      *
      * @param model - The model object to use for the item state.
      *
+     * @param modifiedStyle - The date style for the modified column: narrow, short, or long
+     *
      * @param fileType - The file type of the item, if applicable.
      */
     updateItemNode(
@@ -2216,7 +2286,8 @@ export namespace DirListing {
       fileType?: DocumentRegistry.IFileType,
       translator?: ITranslator,
       hiddenColumns?: Set<DirListing.ToggleableColumn>,
-      selected?: boolean
+      selected?: boolean,
+      modifiedStyle?: Time.HumanStyle
     ): void;
 
     /**
@@ -2297,7 +2368,7 @@ export namespace DirListing {
       const trans = translator.load('jupyterlab');
       const name = this.createHeaderItemNode(trans.__('Name'));
       const narrow = document.createElement('div');
-      const modified = this.createHeaderItemNode(trans.__('Last Modified'));
+      const modified = this.createHeaderItemNode(trans.__('Modified'));
       const fileSize = this.createHeaderItemNode(trans.__('File Size'));
       name.classList.add(NAME_ID_CLASS);
       name.classList.add(SELECTED_CLASS);
@@ -2524,6 +2595,32 @@ export namespace DirListing {
       return labelWrapper;
     }
 
+    /**
+     * Update an item's last modified date.
+     *
+     * @param modified - Element containing the file's last modified date.
+     *
+     * @param modifiedDate - String representation of the last modified date.
+     *
+     * @param modifiedStyle - The date style for the modified column: narrow, short, or long
+     */
+    updateItemModified(
+      modified: HTMLElement,
+      modifiedDate: string,
+      modifiedStyle: Time.HumanStyle
+    ): void {
+      let modText = '';
+      let modTitle = '';
+
+      const parsedDate = new Date(modifiedDate);
+      // Render the date in one of multiple formats, depending on the container's size
+      modText = Time.formatHuman(parsedDate, modifiedStyle);
+      modTitle = Time.format(parsedDate);
+
+      modified.textContent = modText;
+      modified.title = modTitle;
+    }
+
     /**
      * Update an item node to reflect the current state of a model.
      *
@@ -2540,7 +2637,8 @@ export namespace DirListing {
       fileType?: DocumentRegistry.IFileType,
       translator?: ITranslator,
       hiddenColumns?: Set<DirListing.ToggleableColumn>,
-      selected?: boolean
+      selected?: boolean,
+      modifiedStyle?: Time.HumanStyle
     ): void {
       if (selected) {
         node.classList.add(SELECTED_CLASS);
@@ -2660,14 +2758,13 @@ export namespace DirListing {
         checkbox.checked = selected ?? false;
       }
 
-      let modText = '';
-      let modTitle = '';
       if (model.last_modified) {
-        modText = Time.formatHuman(new Date(model.last_modified));
-        modTitle = Time.format(new Date(model.last_modified));
+        this.updateItemModified(
+          modified,
+          model.last_modified,
+          modifiedStyle ?? 'short'
+        );
       }
-      modified.textContent = modText;
-      modified.title = modTitle;
     }
 
     /**

package/src/model.ts

@@ -234,22 +234,19 @@ export class FileBrowserModel implements IDisposable {
   /**
    * Change directory.
    *
-   * @param path - The path to the file or directory.
+   * @param path The path to the file or directory.
    *
    * @returns A promise with the contents of the directory.
    */
-  async cd(newValue = '.'): Promise<void> {
-    if (newValue !== '.') {
-      newValue = this.manager.services.contents.resolvePath(
-        this._model.path,
-        newValue
-      );
+  async cd(path = '.'): Promise<void> {
+    if (path !== '.') {
+      path = this.manager.services.contents.resolvePath(this._model.path, path);
     } else {
-      newValue = this._pendingPath || this._model.path;
+      path = this._pendingPath || this._model.path;
     }
     if (this._pending) {
       // Collapse requests to the same directory.
-      if (newValue === this._pendingPath) {
+      if (path === this._pendingPath) {
         return this._pending;
       }
       // Otherwise wait for the pending request to complete before continuing.
@@ -257,13 +254,13 @@ export class FileBrowserModel implements IDisposable {
     }
     const oldValue = this.path;
     const options: Contents.IFetchOptions = { content: true };
-    this._pendingPath = newValue;
-    if (oldValue !== newValue) {
+    this._pendingPath = path;
+    if (oldValue !== path) {
       this._sessions.length = 0;
     }
     const services = this.manager.services;
     this._pending = services.contents
-      .get(newValue, options)
+      .get(path, options)
       .then(contents => {
         if (this.isDisposed) {
           return;
@@ -271,17 +268,17 @@ export class FileBrowserModel implements IDisposable {
         this.handleContents(contents);
         this._pendingPath = null;
         this._pending = null;
-        if (oldValue !== newValue) {
+        if (oldValue !== path) {
           // If there is a state database and a unique key, save the new path.
           // We don't need to wait on the save to continue.
           if (this._state && this._key) {
-            void this._state.save(this._key, { path: newValue });
+            void this._state.save(this._key, { path });
           }
 
           this._pathChanged.emit({
             name: 'path',
             oldValue,
-            newValue
+            newValue: path
           });
         }
         this.onRunningChanged(services.sessions, services.sessions.running());
@@ -290,11 +287,7 @@ export class FileBrowserModel implements IDisposable {
       .catch(error => {
         this._pendingPath = null;
         this._pending = null;
-        if (
-          error.response &&
-          error.response.status === 404 &&
-          newValue !== '/'
-        ) {
+        if (error.response && error.response.status === 404 && path !== '/') {
           error.message = this._trans.__(
             'Directory not found: "%1"',
             this._model.path

package/src/uploadstatus.tsx

@@ -23,7 +23,7 @@ const HALF_SPACING = 4;
 /**
  * A pure function component for a FileUpload status item.
  *
- * @param props: the props for the component.
+ * @param props the props for the component.
  *
  * @returns a tsx component for the file upload status.
  */

package/style/base.css

@@ -99,6 +99,10 @@
   display: none;
 }
 
+.jp-FileBrowser-toolbar > .jp-FileBrowser-filterBox {
+  width: 100%;
+}
+
 .jp-Open-Dialog > .jp-FileBrowser {
   min-height: 200px;
 }
@@ -140,11 +144,11 @@
 }
 
 .jp-DirListing-headerItem.jp-id-name {
-  flex: 1 0 84px;
+  flex: 1 1 126px;
 }
 
 .jp-DirListing-headerItem.jp-id-modified {
-  flex: 0 0 112px;
+  flex: 1 0 70px;
   border-left: var(--jp-border-width) solid var(--jp-border-color2);
   text-align: right;
 }
@@ -272,7 +276,7 @@
 }
 
 .jp-DirListing-itemText {
-  flex: 1 0 64px;
+  flex: 1 1 106px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -297,7 +301,7 @@
 }
 
 .jp-DirListing-itemModified {
-  flex: 0 0 125px;
+  flex: 1 0 83px;
   text-align: right;
 }