@nqst, as per our call - I will describe my questions about restrictions UI.
I think this is best done as a series of situations.

Situation 1

const restrictions = { maxNumberOfFiles: 3 }

I check a folder that has 4 files in it, but we don't yet know about it.

I open that folder, and we find out that it has 4 files inside!

What should happen here.

My ideas:

• It shows those 4 files as selected, but in the footer we show "Uppy only allows 3 files, but 4 files were selected"
  • it stills allows us to click the SELECT (4) button, it will tell us to reduce the number of files in the next screen [explanation: in the next screen we will actually be seeing all files we have ever added, and we will see file sizes - it will be easier for the user to select which files are excessive]
  • OR it doesn't allow us to click the SELECT (4)
• It doesn't show those 4 files as selected - it only selects the first 3 files.
  The issue with this option is - what should we do with the parent folder, should we update it to "partially checked" folder state?
• It shows those 4 files as selected, but, when we click SELECT (4), we get some error notification

Situation 2

const restrictions = { maxNumberOfFiles: 2000 }

I check a folder, which has thousands of files in it. I don't yet know how many - we will discover it upon scrolling.

I open it, and all files are marked as checked.

As I keep scrolling, we stumple upon the 2000ths file.
What should happen next? Should the 2001st file NOT get marked as checked? Again, what should happen to the parent folder - should it update its state to "partially checked"?

Situation 3

const restrictions = { maxNumberOfFiles: 3 }

I check some folders. I never open any of these folders, and we do not know how many files there are.

I click "Select (2)". There are 1000 files inside of those folders, which violates our restrictions.
What should happen?

My ideas:

• Only add the first 3 files we fetch, and show the notification to the user "Not adding 997 files because they didn't pass restrictions"
• Do NOT add any files - show user the error in the footer, saying "Uppy only allows 3 files, but 4 files were selected"
• Do add ALL 1000 files without any warnings - and show the "Uppy only allows 3 files, but 1000 files were selected" error in the footer of the next page.

Situation 4

const restrictions = { maxNumberOfFiles: 3 }

I check 1 file.

and then I shift-click to the 5th file

What should happen?

Situation 5

const restrictions = { maxNumberOfFiles: 3 }

I check 3 files.

What should happen, should other checkboxes grey out like they currently do?
Or, if we add the error message in the footer - should we let the user select the 4th file and only then show them the error?

How to play with it locally

You can checkout this branch to play with it if it helps! I set GoogleDrive's page limit to 10 files so that it's easy to test both the scrolling behaviour and opening the folder behaviour.

Won't we eliminate a whole set of problems and a lot of code complexity by simply not allowing folders to be checked? Instead we offer a "select all" checkbox which checks as many as possible within the current folder up until the limit with the current sorting?

I feel like we starting to over-engineer this, causing many different UI states which are more confusing to the user to figure out than the likelihood of them wanting to select entire folders. Ideally we design for the 80% use case, and I think that's selecting individual files.

@Murderlon, disagreed, people clearly use folder selection, see all the discussions about relativePath vs absolutePath.
And if we disable this, we'll make downloading large number of files outright impossible.

Also - I regularly use folder selection in the wild myself, for example when you're uploading your assignment on university websites, they expect a particular folder structure to be kept.

Sounds like it's getting a bit complicated now. Maybe for simplicity of implementation we could:

• Allow the user to check however many files/folder they want without any restrictions in the UI
• Once the user clicks "select (X) files", then we recurse through all selected directories and count all files. Once we exceed the limit, the we do NOT add any files, but instead show an error message "Uppy only allows X files, but Y files were selected". then the user can go back and deselect files/folders.

First want to say that thanks for putting in big effort of cleaning this up AND writing a lot tests ✨

If we want to keep folder selection, I would follow these options

Situation 1: max files set to 3, you select a folder & then open it, it has 4 files.
--> It shows those 4 files as selected, but, when we click SELECT (4), we get some error notification

Situation 2: identical to situation one from my understanding.

Situation 3: I click "Select (2)". There are 1000 files inside of those folders, which violates our restrictions.
--> I think once again the same? If you open them one by one, you'll see "select {number}" but once you click it none are added and you see an error

Situation 5: should checkboxes be disabled once you reach the limit.
--> I don't think we have to to simplify it + we kind of have to, as we allow selecting beyond the limit in the other examples.

I do think it's essential however to break this PR up into smaller PRs. I understand this made sense to experiment and find a direction, but once we have that I expect this to be four PRs or so. For instance:

1. shift click fixes
2. removing the View class
3. Adding basic partialTree structure
4. refactor of ProviderView/SearchProviderView.

It will be too hard to review otherwise I'm afraid.