FolderExplorer: "new folder" issues

[nbelyh]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

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

Description

1. New folder name is unnecessarily encoded. If you enter 'A B' as a folder name, you get 'A%20B'. Space is a valid character for a folder name, according to the documentation:
   https://support.microsoft.com/en-us/office/invalid-file-names-and-file-types-in-onedrive-and-sharepoint-64883a5d-228e-48f5-b3d2-eb39e07630fa

2. there is no check for invalid symbols. If you create a new folder in SharePoint UI you have an error message like this:
   

3. There is no way to cancel creation of the folder once you started it (no cancel button and escape does not work)

4. There is no error shown in case folder is not created (just a log entry in console). If error happens, the control gets "stuck" in the "saving" mode here, "loading" is never reset:

   sp-dev-fx-controls-react/src/controls/folderExplorer/NewFolder/NewFolder.tsx

   Line 95 in dda0256

   } catch (error) {

Expected

1. You get 'A B'.
2. There is validation error like in the SharePoint implementation.
3. Cancel key should cancel editing, or there should be a cancel button, or both.
4. In case of error, the field should stop "saving", and should show something like "something went wrong" to indicate that folder creation fails.

Possible solutions

1. There is "blunt" encoding here (should be smarter than this; it's not all "invalid URI characters" that are prohibited). More precisely, encodeURIComponent(name) seems to be a bad idea. If (2) is fixed then this encoding can be probably be just removed (in case something is wrong, the API call will throw an exception):
   

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

   Line 104 in dda0256

   let folderAddResult: IFolderAddResult = await web.getFolderByServerRelativePath(encodeURIComponent(folderRelativeUrl)).folders.addUsingPath(encodeURIComponent(name));

2. Here a validation (errorMessage) property is probably needed, that will check proper characters. Since spfx controls don't care about 2013, the latest invalid character set can be taken, see here. And translation of that to all supported languages:
   

   sp-dev-fx-controls-react/src/controls/folderExplorer/NewFolder/NewFolder.tsx

   Lines 44 to 49 in 84d2b51

   	<TextField
   	placeholder={strings.NewFolderNamePlaceholder}
   	value={this.state.folderName}
   	onChanged={this._onFolderNameChange}
   	// styles={{ fieldGroup: { width: 300 } }}
   	/>

3. Not quite sure how to deal with this one.. Maybe using a focus (lock) somehow? Now the thing is the focus can can close the whole dialog/sidebar where the control is located, instead of just cancelling folder creation.

4. I think at least the state "loading" should be reset here on exception. Ideally, there should an error message (localized) like "failed to add folder" or something that is set as errorMessage for the <TextField>

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

[AJIXuMuK]

Hi @nbelyh,

I've fixed 1, 2, and 4. Please, check beta version.

For the 3 - I don't see a value of doing that as the folder is created almost instantly. Even in OOB UI when you press ESC - the dialog is closed, but the folder is still being created.

I would consider adding some events like folderCreating with ability to cancel, but not Cancel button or ESC handle.

[nbelyh]

@AJIXuMuK This is awesome! 😄 The third item can be thought of later, it's not critical at all, can be left as is I guess! The space character was the only critical issue here for me.

[nbelyh]

Seems to work great 👍