FolderExplorer and FolderPicker do not seem to work for document libraries

[nbelyh]

FolderExplorer and FolderPicker controls do not seem to work for the document libraries

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

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

Description

Create a sample project with FolderExplorer, as specified in the documentation:
https://pnp.github.io/sp-dev-fx-controls-react/controls/FolderExplorer/

<FolderExplorer context={this.props.context}
                rootFolder={{
                  Name: 'Documents',
                  ServerRelativeUrl: `/sites/TestSite/Shared Documents`
                }}
                defaultFolder={{
                  Name: 'Documents',
                  ServerRelativeUrl: `/sites/TestSite/Shared Documents`
                }}
                onSelect={this._onFolderSelect}
                canCreateFolders={true} />

Expected

You see the folder explorer in the UI, showing corresponding folders/libraries.

Observed Behavior

The FolderExplorer does not work, it always shows "there are no folders" and throws this exception in console:

Error loading folders TypeError: Cannot read property 'filter' of undefined
    at FolderExplorerService.<anonymous> (FolderExplorerService.js:68)
    at step (FolderExplorerService.js:31)
    at Object.next (FolderExplorerService.js:12)
    at FolderExplorerService.js:6
    at new Promise (<anonymous>)
    at xI2j.__awaiter (FolderExplorerService.js:2)
    at FolderExplorerService._getDocumentLibraries (FolderExplorerService.js:58)
    at FolderExplorerService.<anonymous> (FolderExplorerService.js:51)
    at step (FolderExplorerService.js:31)
    at Object.next (FolderExplorerService.js:12)

Reasons (most probably pnpjs library modified after the FolderExplorer was last verified?)
1.
@pnp/sp/lists is not included in the FileExplorerService.ts, here:

sp-dev-fx-controls-react/src/services/FolderExplorerService.ts

Lines 1 to 9 in dda0256

	import { ServiceKey, ServiceScope } from "@microsoft/sp-core-library";
	import { PageContext } from "@microsoft/sp-page-context";
	import { IFolderExplorerService } from "./IFolderExplorerService";
	import { IFolder } from "./IFolderExplorerService";
	import { sp } from "@pnp/sp";
	import "@pnp/sp/webs";
	import { Web } from "@pnp/sp/webs";
	import "@pnp/sp/folders";
	import { IFolderAddResult } from "@pnp/sp/folders";

But is used here:

sp-dev-fx-controls-react/src/services/FolderExplorerService.ts

Line 44 in dda0256

const libraries: any[] = await web.lists.filter('BaseTemplate eq 101 and Hidden eq false').expand('RootFolder').select('Title', 'RootFolder/ServerRelativeUrl').orderBy('Title').get();

The result is, web.lists is undefined and that result in the exception.

2. double encoding of folder paths (of the "%" symbol). This causes the list of folders to be always empty even after the change above.

sp-dev-fx-controls-react/src/services/FolderExplorerService.ts

Line 75 in dda0256

let foldersResult: IFolder[] = await web.getFolderByServerRelativePath(encodeURIComponent(folderRelativeUrl)).folders.select('Name', 'ServerRelativeUrl').orderBy('Name').get();

pnpjs (getFolderByServerRelativePath) also encodes it, in the referenced version 2.0.6 as well:
https://github.com/pnp/pnpjs/blob/183dc11edb65aa67f6e053e03fb28c5dbdb8a9a5/packages/sp/folders/web.ts#L58

[ghost]

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

[nbelyh]

Checked the history, seems to be broken recently by this commit actually:
fc7d9fb

@gautamdsheth Don't understand the reason for this change - pnpjs already does the encoding - check here? This commit seems to introduce the bug with double-encoding?

[gautamdsheth]

I did test with normal as well as some folders with special chars like % and # and it worked well, but it looks like I missed something. My bad. Sorry :(

[nbelyh]

@gautamdsheth My guess is that pnpjs version might have been updated and this part not re-checked? But the point is now it seems that FolderExplorer and FolderPicker are simply not working 😄 Would be great if maintainers could look at this in the upcoming release.

[nbelyh]

Reaplced the PR with another to dev branch

[nbelyh]

Sorry for the messed up PR (would be great if the maintainers can delete them 😅
Have read the submission guidelines after creating PR. Now the branch is from dev and trargets dev.

[AJIXuMuK]

Hi @nbelyh, @gautamdsheth - I've merged the PR.

@gautamdsheth - could you please check beta version and confirm that it works correctly for the use-cases you were addressing in your previous PR?

Thank you!

[gautamdsheth]

@AJIXuMuK - works fine with the latest beta. Thanks

[nbelyh]

Thank you guys, then I'm closing the issue