make paths in "File browser" editable?

[mathause]

Problem

It would be nice if it was possible to write out paths in the "File browser" and not only be able to navigate the directory tree by clicking.

Proposed Solution

Allow to edit the path. Of course clicking should still be possible - so it would need something similar to what file managers (dophin, file explorer on windows) do.

Additional context

As a workaround one can probably paste the path to the url but that's less intuitive.

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[JasonWeill]

The "crumbs" in the file browser are rendered using code here: https://github.com/jupyterlab/jupyterlab/blob/master/packages/filebrowser/src/crumbs.ts

It might be good to add a UI element to, in addition to the current breadcrumbs behavior, pop up a dialog box for the user to type a path in.

[jgeden]

@jweill-aws I think a pop-up dialog might be a little too intrusive for the desired feature and there's also the issue of where to display the pop-up, because if it is shown in the middle of the screen it's removed from the area dedicated to file navigation. I took a stab at implementing something similar to how the windows file explorer works like @mathause suggested.

I'd love some feedback on the look & expected behavior. If this way of adding this feature good, then I've also got some specific questions that should be answered before I open a PR.

1. To start the bread crumbs menu looks the same

2. But now when double clicked, the bread crumbs menu is replaced by an input field with the current path. Any space around the text can be double clicked. When the crumbs text is clicked on it still will navigate to that folder as before

3. The user can then type in the path they'd like

4. And after pressing 'enter' I use the cd function on the model to change the file browser location

So some questions

1. Right now I append / to the end of the path that the user inputs if there isn't already one present. So in the above screenshots, I only typed /binder but the path saved is /binder/. Should I keep this?
2. After pressing enter I hide the input field and show the crumbs menu. But when navigating lots of nested folders it might be useful to be able to type part of the path, press enter, show the change in the file browser, but keep the input field visible to continue now that those new sub-folders are visible. In that case, maybe having the user press enter twice without a path change should disable the input field instead?
3. If the user has the input field open, but then uses the file browser to navigate, what should happen to the input field? Should it be disabled and just show the crumbs menu again or should it maintain the value that the user last typed?
4. Code design question here. How should I hide widgets? Right now I'm just adding and removing CSS classes that have display: none to hide widgets when not needed (the input field is a new widget I called BreadCrumbsInput that initially has a CSS class with display: none). Should I instead be adding/removing the widgets from the layout or is it okay to rely on CSS?

[JasonWeill]

@josh0823 Thank you so much for this! I can discuss these concepts with other JupyterLab developers at our weekly meeting tomorrow at 09:00 PDT / 16:00 UTC. If you would like to join us, you can find the details on our official community calendar: https://discourse.jupyter.org/t/jupyter-community-calendar/2485 .

[JasonWeill]

We talked about this during the March 23, 2022 JupyterLab team call. Some notes:

• The Gnome breadcrumbs design page includes some additional concepts of this sort of browsing in file pickers.
• We need to consider accessibility impacts of this feature — would a person be able to access the "jump to path" option using a keyboard shortcut or by tabbing through UI elements, for example?
• Users may expect autocomplete, either active (directory name appears in text box as a user types part of it) or passive (directory name appears as a selectable option as the user types).
• Could we implement functionality like this using a more generally-available "jump" keyboard shortcut, as in popular text editors like VS Code or Sublime Text, or as in developer tools in Firefox or Chrome, or as in macOS helper apps like Alfred or QuickSilver?