Rename class DriveListing -> DriveBrowser, rename file browser.ts -> multidrivesbrowser.ts, dirlisting.ts -> drivelisting.ts. Restore in index.ts a proper logics to add the content of an added driveBrowser to the multidrives browser when a drive is selected and added in the dialog.

Author: HaudinFlorence

src/crumbslayout.ts

@@ -10,7 +10,7 @@ import {
 } from '@lumino/widgets';
 import { caretDownIcon } from '@jupyterlab/ui-components';
 import { BreadCrumbs } from '@jupyterlab/filebrowser';
-import { DriveListing } from './drivelisting';
+import { DriveBrowser } from './drivebrowser';
 
 /**
  * Accordion panel layout that adds a breadcrumb in widget title if present.
@@ -31,7 +31,7 @@ export class BreadCrumbsLayout extends AccordionLayout {
    * #### Undefined Behavior
    * An `index` which is non-integral.
    */
-  insertWidget(index: number, widget: DriveListing): void {
+  insertWidget(index: number, widget: DriveBrowser): void {
     if (widget.breadcrumbs) {
       this._breadcrumbs.set(widget, widget.breadcrumbs);
       widget.breadcrumbs.addClass('jp-AccordionPanel-breadcrumbs');

src/drivelisting.ts renamed to src/drivebrowser.ts

@@ -12,8 +12,8 @@ import { ITranslator } from '@jupyterlab/translation';
  */
 const CRUMBS_CLASS = 'jp-FileBrowser-crumbs';
 
-export class DriveListing extends DirListing {
-  constructor(options: DriveListing.IOptions) {
+export class DriveBrowser extends DirListing {
+  constructor(options: DriveBrowser.IOptions) {
     super({
       model: options.model,
       translator: options.translator,
@@ -35,7 +35,7 @@ export class DriveListing extends DirListing {
   private _breadcrumbs: BreadCrumbs;
 }
 
-export namespace DriveListing {
+export namespace DriveBrowser {
   /**
    * An options object for initializing DrivesListing widget.
    */

src/index.ts

@@ -11,14 +11,15 @@ import { DriveListModel, DriveListView } from './drivelistmanager';
 import { DriveIcon } from './icons';
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { Drive } from './contents';
-import { MultiDrivesFileBrowser } from './browser';
-import { FilterFileBrowserModel } from '@jupyterlab/filebrowser';
+import { MultiDrivesFileBrowser } from './multidrivesbrowser';
+import { BreadCrumbs, FilterFileBrowserModel } from '@jupyterlab/filebrowser';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import {
   createToolbarFactory,
   IToolbarWidgetRegistry,
   setToolbar
 } from '@jupyterlab/apputils';
+import { DriveBrowser } from './drivebrowser';
 
 const FILE_BROWSER_FACTORY = 'FileBrowser';
 const FILE_BROWSER_PLUGIN_ID = '@jupyter/drives:widget';
@@ -100,7 +101,7 @@ export async function activateAddDrivesPlugin(
   avocadoDrive.baseUrl = '/avocado/url';
   avocadoDrive.name = 'avocadoDrive';
 
-  const selectedList1: Drive[] = [cocoDrive];
+  const selectedList1: Drive[] = [];
   const availableList1: Drive[] = [
     avocadoDrive,
     cocoDrive,
@@ -111,32 +112,25 @@ export async function activateAddDrivesPlugin(
     pearDrive,
     tomatoDrive
   ];
-  function buildInitialBrowserModelList() {
-    const modelList: FilterFileBrowserModel[] = [];
-    const drive1 = new Drive(app.docRegistry);
-    drive1.name = 'Drive1';
-    manager.services.contents.addDrive(drive1);
-    const drive1Model = new FilterFileBrowserModel({
-      manager: manager,
-      driveName: drive1.name
-    });
 
-    const drive2 = new Drive(app.docRegistry);
-    drive2.name = 'SuperCoolDrive2';
-    manager.services.contents.addDrive(drive2);
-    const drive2Model = new FilterFileBrowserModel({
+  function createFilterFileBrowserModel(
+    manager: IDocumentManager,
+    drive?: Drive
+  ): FilterFileBrowserModel {
+    const driveModel = new FilterFileBrowserModel({
       manager: manager,
-      driveName: drive2.name
+      driveName: drive?.name
     });
 
-    const localDriveModel = new FilterFileBrowserModel({ manager: manager });
-    modelList.push(localDriveModel);
-    modelList.push(drive1Model);
-    modelList.push(drive2Model);
-
-    return modelList;
+    return driveModel;
+  }
+  function buildInitialBrowserModelList(selectedDrives: Drive[]) {
+    const browserModelList: FilterFileBrowserModel[] = [];
+    const localDriveModel = createFilterFileBrowserModel(manager);
+    browserModelList.push(localDriveModel);
+    return browserModelList;
   }
-  const browserModelList = buildInitialBrowserModelList();
+  const browserModelList = buildInitialBrowserModelList(selectedList1);
   const trans = translator.load('jupyter_drives');
   const panel = new MultiDrivesFileBrowser({
     modelList: browserModelList,
@@ -162,48 +156,71 @@ export async function activateAddDrivesPlugin(
       translator
     )
   );
-
-  function addDriveContentsToPanel(addedDrive: Drive) {
+  function addToBrowserModelList(
+    browserModelList: FilterFileBrowserModel[],
+    addedDrive: Drive
+  ) {
+    const addedDriveModel = createFilterFileBrowserModel(manager, addedDrive);
+    browserModelList.push(addedDriveModel);
+    return browserModelList;
+  }
+  function addDriveContentsToPanel(
+    browserModelList: FilterFileBrowserModel[],
+    addedDrive: Drive,
+    panel: MultiDrivesFileBrowser
+  ) {
+    const addedDriveModel = createFilterFileBrowserModel(manager, addedDrive);
+    browserModelList = addToBrowserModelList(browserModelList, addedDrive);
     manager.services.contents.addDrive(addedDrive);
+    const AddedDriveBrowser = new DriveBrowser({
+      model: addedDriveModel,
+      breadCrumbs: new BreadCrumbs({ model: addedDriveModel }),
+      driveName: addedDrive.name
+    });
+    panel.addWidget(AddedDriveBrowser);
   }
 
   /* Dialog to select the drive */
   addJupyterLabThemeChangeListener();
   const selectedDrivesModelMap = new Map<Drive[], DriveListModel>();
   let selectedDrives: Drive[] = selectedList1;
   const availableDrives: Drive[] = availableList1;
-  let model = selectedDrivesModelMap.get(selectedDrives);
+  let driveListModel = selectedDrivesModelMap.get(selectedDrives);
 
   commands.addCommand(CommandIDs.openDrivesDialog, {
     execute: async args => {
-      if (!model) {
-        model = new DriveListModel(availableDrives, selectedDrives);
-        selectedDrivesModelMap.set(selectedDrives, model);
+      if (!driveListModel) {
+        driveListModel = new DriveListModel(availableDrives, selectedDrives);
+        selectedDrivesModelMap.set(selectedDrives, driveListModel);
       } else {
-        selectedDrives = model.selectedDrives;
-        selectedDrivesModelMap.set(selectedDrives, model);
+        selectedDrives = driveListModel.selectedDrives;
+        selectedDrivesModelMap.set(selectedDrives, driveListModel);
       }
       async function onDriveAdded(selectedDrives: Drive[]) {
-        if (model) {
-          const response = model.sendConnectionRequest(selectedDrives);
+        if (driveListModel) {
+          const response = driveListModel.sendConnectionRequest(selectedDrives);
           if ((await response) === true) {
-            addDriveContentsToPanel(selectedDrives[selectedDrives.length - 1]);
+            addDriveContentsToPanel(
+              browserModelList,
+              selectedDrives[selectedDrives.length - 1],
+              panel
+            );
           } else {
             console.warn('Connection with the drive was not possible');
           }
         }
       }
 
-      if (model) {
+      if (driveListModel) {
         showDialog({
-          body: new DriveListView(model, app.docRegistry),
+          body: new DriveListView(driveListModel, app.docRegistry),
           buttons: [Dialog.cancelButton()]
         });
       }
 
-      model.stateChanged.connect(async () => {
-        if (model) {
-          onDriveAdded(model.selectedDrives);
+      driveListModel.stateChanged.connect(async () => {
+        if (driveListModel) {
+          onDriveAdded(driveListModel.selectedDrives);
         }
       });
     },

src/browser.ts renamed to src/multidrivesbrowser.ts

@@ -13,7 +13,7 @@ import {
 import { IDocumentManager } from '@jupyterlab/docmanager';
 import { AccordionPanel } from '@lumino/widgets';
 import { BreadCrumbsLayout } from './crumbslayout';
-import { DriveListing } from './drivelisting';
+import { DriveBrowser } from './drivebrowser';
 
 /*
  * The class name added to file browsers.
@@ -76,7 +76,7 @@ export class MultiDrivesFileBrowser extends SidePanel {
         driveName = 'Local Drive';
       }
       console.log('driveName:', driveName);
-      const listing = new DriveListing({
+      const listing = new DriveBrowser({
         model: model,
         translator: translator,
         renderer: renderer,
@@ -103,22 +103,22 @@ export class MultiDrivesFileBrowser extends SidePanel {
    *
    * @returns The created DirListing instance.
    */
-  protected createDriveListing(options: DriveListing.IOptions): DriveListing {
-    return new DriveListing(options);
+  protected createDriveBrowser(options: DriveBrowser.IOptions): DriveBrowser {
+    return new DriveBrowser(options);
   }
 
   /**
    * Rename the first currently selected item.
    *
    * @returns A promise that resolves with the new name of the item.
    */
-  rename(listing: DriveListing): Promise<string> {
+  rename(listing: DriveBrowser): Promise<string> {
     return listing.rename();
   }
 
   private async _createNew(
     options: Contents.ICreateOptions,
-    listing: DriveListing
+    listing: DriveBrowser
   ): Promise<Contents.IModel> {
     try {
       const model = await this.manager.newUntitled(options);
@@ -137,7 +137,7 @@ export class MultiDrivesFileBrowser extends SidePanel {
    */
   async createNewDirectory(
     model: FilterFileBrowserModel,
-    listing: DriveListing
+    listing: DriveBrowser
   ): Promise<Contents.IModel> {
     if (this._directoryPending) {
       return this._directoryPending;
@@ -162,7 +162,7 @@ export class MultiDrivesFileBrowser extends SidePanel {
   async createNewFile(
     options: MultiDrivesFileBrowser.IFileOptions,
     model: FilterFileBrowserModel,
-    listing: DriveListing
+    listing: DriveBrowser
   ): Promise<Contents.IModel> {
     if (this._filePending) {
       return this._filePending;

style/base.css

@@ -73,9 +73,9 @@ li {
   display: none;
 }
 
-.lm-SplitPanel-handle {
+/*.lm-SplitPanel-handle {
   display: none;
-}
+}*/
 
 .lm-AccordionPanel .jp-AccordionPanel-title {
   box-sizing: border-box;