Open dialogs

[fcollonval]

References

Fix #6365

Code changes

Add in filebrowser package, two new helper functions building customized Dialog to request the user to select files or folders.

For the helper to open files, a filter function [(model: Contents.IModel): boolean] can be specified to filter files shown in the browser widget - the folders cannot be filtered. This is achieved through a new FilterFileBrowserModel class inheriting from FileBrowserModel.

If nothing is selected, getValue fallback to the current directory.

const result = await getOpenFiles({
        title: 'Select a notebook',
        filter: model => model.type === 'notebook'
});
if(result.button.accept){
  let files = result.value;
}

const result = await getExistingDirectory({
  title: 'Select a folder'
});
if(result.button.accept){
  let folders = result.value;
}

User-facing changes

None

Backwards-incompatible changes

None

Questions

• I currently put the code in the filebrowser package. Not sure it is the right place.
• I would like to emulate selection in the widget for unit tests. But it does not work. If someone now how I could make it work (it seems the click simulation is not working), I happily improve the tests. The code used is

      let counter = 0;
      let listing = node.getElementsByClassName('jp-DirListing-content')[0];
      let items = listing.getElementsByTagName('li');
      // Wait for the directory listing to be populated
      while (items.length === 0 && counter < 100) {
        await sleep(10);
        items = listing.getElementsByTagName('li');
        counter++;
      }

      if (items.length > 0) {
        // Emulate notebook selection
        simulate(items.item(2), 'mousedown');
      }

[jupyterlab-dev-mode]

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link:

[blink1073]

cc @timkpaine

[blink1073]

@fcollonval, you might need to await a framePromise, since _handleFileSelect calls update(), which gets processed on the next animation frame.

[blink1073]

e.g.

jupyterlab/tests/test-fileeditor/src/widget.spec.ts

Line 184 in 9760799

await framePromise();

[fcollonval]

@blink1073 The trick was to specify the mouse event position as the code test which item is hit.

I clean the API and add some documentation. Let me know if it is good to go.

[blink1073]

Excellent, and thank you for the new docs as well!

[blink1073]

Some of the errors are due to a connectivity issue with npm, but this one is legit:

$ tsc -b
../filebrowser/src/opendialog.ts(14,37): error TS2307: Cannot find module './factory'.

[fcollonval]

😕 I try on two PC's and did also an npm run clean:slate. But I can't reproduce the error. Could it come from typescript version discrepancy? How can I check which version is used?
Cheers and thx for the support.

[blink1073]

Ah, the issue was that factory.ts was renamed in #6334. I updated the import.

[blink1073]

...and now I have no idea why this is failing. I need to rebuild my dev environment locally, then will come back to this...

[fcollonval]

@blink1073 thx for the effort. I'll correct the remaining bugs. My unit tests were poorly design. But I found a fix (not yet push).

For my information, are the tests run with the branch merged in the current master?? Is this the explanation for the error with factory.ts not found?

[blink1073]

Correct, I rebased.

[fcollonval]

Unit tests are corrected.
The remaining errors are not related. So I think the merge should run smoothly after 1.0 release.

[afshin]

Hm, I just tried a rebase and it rebased cleanly, but the failures seem legitimate.

[fcollonval]

Thanks @afshin for the rebase. I corrected the code.
Tests are passing locally. Hopefully the CI will confirm it.

[blink1073]

In it goes, thanks @fcollonval!