Add optional disabled property to FileList component

[NathZ1]

Proposal: Please add an optional disabled prop to FileList component

Description

Other MGT components allow for the component to be disabled (eg. PeoplePicker), however this functionality is not available with FileList component.

Rationale

The functionality is required when using the FileList component as part of a form (eg. disable after form submission).

Preferred Solution

Add optional prop :)

[ghost]

Hello NathZ1, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[sebastienlevert]

Interesting thought. Today, mgt-file-list is not considered a picker... It's really considered a listing of mgt-file with an optional itemClick. That being said, with the upload capabilities we are closer to it.

In your scenario, you'd be looking at disabling both the itemClick action to be triggered and the associated cursor theming and also disabling the upload capabilities?

[NathZ1]

Hi @sebastienlevert, that's interesting because in my mind it was definitely a picker.

My use case is allowing a user to copy a file from OneDrive/SharePoint/Team to a target SharePoint site. I use either the default FilePicker config (for user OneDrive), /me/followedSites (to get list of SP sites that the user can first select from, then feed the site details into FilePicker), or /me/joinedTeams (to get list of Teams that the user can first select from, then feed the team root drive details into FilePicker). The navigation of the target folder structure works well with a breadcrumb component I made, and I have templated out File to allow me to style each folder/file differently to the default - I have a small space to work with so I have condensed it down a bit, reduced padding etc.

I don't actually use the upload capabilities at all since I am using the /copy endpoint - it is purely a picker for OneDrive/SP/Teams files.

In my scenario, ideally when the component was passed the optional disabled prop of true, it would be visually obvious it was disabled (greyed out, cursor theming etc.) and itemClick would also need to be disabled. This would ideally be disabled even if File has been templated out (which I know you guys are already working on - #1484). While I won't be using the upload capabilities, it would make sense to disable this as well.

[sebastienlevert]

Awesome, thanks for the details! I'll be looking at this and see how we can make this happen. This is a great request! Would you be up for the challenge to implement it? Would love to partner up with you on this one! Thanks!

[NathZ1]

I've had a look at the FileList code but admittedly I got a little lost. Would definitely need some pointers before I had a crack at it...

[sebastienlevert]

Adding @vogtn to help with some key pointers! We would love to have you contribute to MGT, we will make is as frictionless as possible!

[NathZ1]

@vogtn any help appreciated..

[vogtn]

@NathZ1

Sorry just saw this. Two parts:

1. Design

Just to clarify the design.. I met with our designer @yyiinnggzz, essentially to align the control still with fluent, they tend to use 0.3 opacity so we're looking at something like this:

Do you need the show-more button included as well? Either way if you still plan to try to do the PR, you can just apply a new subclass based on a property (disabled classmap) with opacity to one of the main classes: https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/main/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss#L44

2. Functionality

You can follow how the picker disabled attribute is added and do the same for the file list. : https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/main/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts#L328

To disable, use the disable attribute as a flag in any of the onclick events: https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/main/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts#L605

And add an e.preventDefault() to start. Let me know if this helps.

[NathZ1]

thanks mate, that definitely helps - just trying to find time to attempt this!

[sebastienlevert]

Hey @NathZ1 is this still relevant to you? Thanks!

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.