improve: Select folders and select all in File Browser

[wasimsandhu]

📝 Summary

Enhances the File Browser component (fulfilling #1478) with a few bug fixes.

Fixes #1478

🔍 Description of Changes

• Adds selection_mode parameter to allow the user to select files, directories, or both.
  • To select a directory, user must check the checkbox next to the directory name. Clicking the table row still "opens" the directory.
• Adds "Select all" / "Deselect all" button to allow user to select or deselect all files in the current directory.
  • If multiple == False, then these buttons are not rendered.
• Fixes error when clicking ".." at the topmost directory.
• TODO: Prints a more readable representation of a FileInfo list.

📋 Checklist

• [x] I have read the contributor guidelines.
• [x] For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• [ ] I have added tests for the changes made.
• [x] I have run the code and verified that it works as expected.

📜 Reviewers

• @mscolnick

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
marimo-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 6, 2024 6:48am
marimo-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 6, 2024 6:48am

[mscolnick]

Thoughts on make but button more minimal? In the table we use variant="link".

And maybe we can only show one at a time? If we are in a "select all" state, then show "deselect all" instead.

[wasimsandhu]

[wasimsandhu]

Lol did not realize I created a bug until I shared that screenshot.

[wasimsandhu]

First draft is a bit messy, definitely need to do some code and UI cleanup before merging.

Added the selection_mode parameter, which defaults to "file". If set to "directory" or "all", user can check a checkbox next to the folder name to select the folder.

I spent 30 minutes trying to get the checkbox to display nicely to the left of the file icon and just couldn't get the margins right. Ended up defaulting to displaying the checkbox if an item is selected, or always displaying it for selecting directories.

We could display the checkbox on hover, but would managing too many states create a significant performance overhead? @mscolnick

I don't have a good use case for selecting both files and directories off the top of my head, but this gives the user more flexibility I guess.

I also think it might be worth tweaking the printed representation of a FileInfo list (printing b.value is not very user friendly). I'd probably just do a tab-delimited array of each file's name, path, is_directory, and last_modified_date.

[mscolnick]

this looks great! i can take a pass of my own to do the styling

[wasimsandhu]

Thanks, that'd be great!

[mscolnick]

going to merge, and fix from main

[github-actions[bot]]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.6.17-dev3