FilePicker order of tabs

[Ofer-Gal]

Can I control the order of the tabs or make one the default?

Category

[X] Enhancement

[ ] Bug

[X] Question

Version

Please specify what version of the library you are using: [ 3.1.0 ]

Observed Behavior

The order is always
OneDrive
Upload Files
From Link

My users will use "Upload Files" most of the time and I would like them to have less clicks to get there.

Thanks!

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[joelfmrodrigues]

@Ofer-Gal thanks for the suggestion, makes a lot of sense. I just checked and currently there are no properties to control this, only one option to store the last active tab, but that doesn't seem to be working as expected (at least on my tests just now).
Would returning to the last tab be acceptable to you as a solution?
If not, all the tab options are added to an array inside the _getNavPanelOptions function of FilePicker.tsx so it should be easy to control the order of the items. Keen to give it a try?

[Ofer-Gal]

I like both options.
How can I give it a try?

[joelfmrodrigues]

My understanding is that returning to the tab that was previously used should work and if not is probably a bug.

Regarding the order of tabs, the first thing that comes to my mind is having a new optional component property (maybe a string array with key values) where sorting can be configured. Then sort the array of links before returning it inside the _getNavPanelOptions function as they are all added to an array and have a key property that could be used for sorting.

Just an idea (not 100% sure that it would work but seems possible), but feel free to suggest something else if you find a better approach

[Ateina]

Hi @michaelmaillot @joelfmrodrigues
If this enhancement is still relevant, can you assign it to me? :)

[michaelmaillot]

Hi @Ateina, sure! Do you have a global view about how to implement this one?

[Ateina]

@michaelmaillot Thank you!
I tested the approach using an additional optional property to configure the tab order, and it works well.
I’d also like to include a defaultTab property to allow setting the initially selected tab :)

[michaelmaillot]

Excellent idea! Looking forward to see this enhancement!

[Ateina]

All praise to @Ofer-Gal :)