How to use @jupyterlab/filebrowser - 10 common examples

it('should be resilient to a slow initial fetch', async () => {
        let delayedServiceManager = new ServiceManager({ standby: 'never' });
        (delayedServiceManager as any).contents = new DelayedContentsManager();
        let manager = new DocumentManager({
          registry,
          opener,
          manager: delayedServiceManager
        });
        model = new FileBrowserModel({ manager, state }); // Should delay 1000ms

        // An initial refresh is called in the constructor.
        // If it is too slow, it can come in after the directory change,
        // causing a directory set by, e.g., the tree handler to be wrong.
        // This checks to make sure we are handling that case correctly.
        await model.cd('src'); // should delay 500ms
        await sleep(2000);
        expect(model.path).to.equal('src');

        manager.dispose();
        delayedServiceManager.contents.dispose();
        delayedServiceManager.dispose();
        model.dispose();
      });
    });

let wFactory = new FileEditorFactory({
    editorServices,
    factoryOptions: {
      name: 'Editor',
      modelName: 'text',
      fileTypes: ['*'],
      defaultFor: ['*'],
      preferKernel: false,
      canStartKernel: true
    }
  });
  docRegistry.addWidgetFactory(wFactory);

  let commands = new CommandRegistry();

  let fbModel = new FileBrowserModel({ manager: docManager });
  let fbWidget = new FileBrowser({
    id: 'filebrowser',
    model: fbModel
  });

  // Add a creator toolbar item.
  let creator = new ToolbarButton({
    iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
    onClick: () => {
      docManager
        .newUntitled({
          type: 'file',
          path: fbModel.path
        })
        .then(model => {
          docManager.open(model.path);

createFileBrowser(id: string, options: IFileBrowserFactory.IOptions = {}): FileBrowser {
      const model = new FileBrowserModel({
        manager: docManager,
        driveName: options.driveName || '',
        state: options.state === null ? null : options.state || state
      });
      const widget = new FileBrowser({
        id, model, commands: options.commands || commands
      });
      const { registry } = docManager;

      // Add a launcher toolbar item.
      let launcher = new ToolbarButton({
        className: 'jp-AddIcon',
        onClick: () => {
          return commands.execute('launcher:create', {
            cwd: widget.model.path
          });

let wFactory = new FileEditorFactory({
    editorServices,
    factoryOptions: {
      name: 'Editor',
      modelName: 'text',
      fileTypes: ['*'],
      defaultFor: ['*'],
      preferKernel: false,
      canStartKernel: true
    }
  });
  docRegistry.addWidgetFactory(wFactory);

  let commands = new CommandRegistry();

  let fbModel = new FileBrowserModel({
    manager: docManager,
    iconRegistry: defaultIconRegistry
  });
  let fbWidget = new FileBrowser({
    id: 'filebrowser',
    model: fbModel
  });

  // Add a creator toolbar item.
  let creator = new ToolbarButton({
    iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
    onClick: () => {
      void docManager
        .newUntitled({
          type: 'file',
          path: fbModel.path

const createFileBrowser = (
    id: string,
    options: IFileBrowserFactory.IOptions = {}
  ) => {
    const model = new FileBrowserModel({
      manager: docManager,
      driveName: options.driveName || '',
      refreshInterval: options.refreshInterval,
      state: options.state === null ? null : options.state || state
    });
    const widget = new FileBrowser({
      id,
      model
    });

    // Add a launcher toolbar item.
    let launcher = new ToolbarButton({
      iconClassName: 'jp-AddIcon',
      onClick: () => {
        return Private.createLauncher(commands, widget);
      },

const createFileBrowser = (
    id: string,
    options: IFileBrowserFactory.IOptions = {}
  ) => {
    const model = new FileBrowserModel({
      manager: docManager,
      driveName: options.driveName || '',
      refreshInterval: options.refreshInterval,
      state: options.state === null ? null : options.state || state
    });
    const widget = new FileBrowser({
      id,
      model
    });

    // Add a launcher toolbar item.
    let launcher = new ToolbarButton({
      iconClassName: 'jp-AddIcon',
      onClick: () => {
        return Private.createLauncher(commands, widget);
      },

editorServices,
    factoryOptions: {
      name: 'Editor',
      modelName: 'text',
      fileTypes: ['*'],
      defaultFor: ['*'],
      preferKernel: false,
      canStartKernel: true
    }
  });
  docRegistry.addWidgetFactory(wFactory);

  let commands = new CommandRegistry();

  let fbModel = new FileBrowserModel({ manager: docManager });
  let fbWidget = new FileBrowser({
    id: 'filebrowser',
    model: fbModel
  });

  // Add a creator toolbar item.
  let creator = new ToolbarButton({
    iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
    onClick: () => {
      docManager
        .newUntitled({
          type: 'file',
          path: fbModel.path
        })
        .then(model => {
          docManager.open(model.path);
        });

widget.id = `google-drive-manager-${++id}`;
      }
      if (!widget.isAttached) {
        app.shell.addToMainArea(widget);
      }
      app.shell.activateById(widget.id);
    }
  };
  let documentManager = new DocumentManager({
    registry,
    manager: serviceManager,
    opener,
    realtimeServices: realtime
  });
  let fbModel = new FileBrowserModel({manager: serviceManager});
  let fbWidget = new FileBrowser({
    commands: commands,
    manager: documentManager,
    model: fbModel
  });

  // Add the file browser widget to the application restorer
  restorer.add(fbWidget, NAMESPACE);

  // Restore the state of the file browser on reload.
  const key = `${NAMESPACE}:cwd`;
  let connect = () => {
    // Save the subsequent state of the file browser in the state database.
    fbModel.pathChanged.connect((sender, args) => {
      state.save(key, { path: args.newValue });
    });
  };

const createFileBrowser = (
    id: string,
    options: IFileBrowserFactory.IOptions = {}
  ) => {
    const model = new FileBrowserModel({
      manager: docManager,
      driveName: options.driveName || '',
      refreshInterval: options.refreshInterval,
      state: options.state === null ? null : options.state || state
    });
    const widget = new FileBrowser({
      id,
      model,
      commands: options.commands || commands
    });
    const { registry } = docManager;

    // Add a launcher toolbar item.
    let launcher = new ToolbarButton({
      iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
      onClick: () => {
        return createLauncher(commands, widget);
      },
      tooltip: 'New Launcher'
    });
    widget.toolbar.insertItem(0, 'launch', launcher);

modelName: 'text',
      fileTypes: ['*'],
      defaultFor: ['*'],
      preferKernel: false,
      canStartKernel: true
    }
  });
  docRegistry.addWidgetFactory(wFactory);

  let commands = new CommandRegistry();

  let fbModel = new FileBrowserModel({
    manager: docManager,
    iconRegistry: defaultIconRegistry
  });
  let fbWidget = new FileBrowser({
    id: 'filebrowser',
    model: fbModel
  });

  // Add a creator toolbar item.
  let creator = new ToolbarButton({
    iconClassName: 'jp-AddIcon jp-Icon jp-Icon-16',
    onClick: () => {
      void docManager
        .newUntitled({
          type: 'file',
          path: fbModel.path
        })
        .then(model => {
          docManager.open(model.path);
        });