Merge pull request #750 from pnp/new-folder

Fixes for #743: no encoding, special characters, displaying error

Author: AJIXuMuK

src/controls/folderExplorer/NewFolder/INewFolderState.ts

@@ -2,4 +2,5 @@ export interface INewFolderState {
   folderName: string;
   showInput: boolean;
   loading: boolean;
+  errorMessage?: string;
 }

src/controls/folderExplorer/NewFolder/NewFolder.module.scss

@@ -4,11 +4,11 @@
 .libraryItem {
   padding: 5px 0 5px 10px;
   cursor: pointer;
-  height: 30px;
-  line-height: 30px;
+  min-height: 32px;
+  line-height: 32px;
   border-width: 1px;
   display: flex;
-  align-items: center;
+  align-items: start;
 }
 
 .libraryItem:hover {

src/controls/folderExplorer/NewFolder/NewFolder.tsx

@@ -29,10 +29,22 @@ export class NewFolder extends React.Component<INewFolderProps, INewFolderState>
 
 
   public render(): React.ReactElement<INewFolderProps> {
+
+    const {
+      folderName,
+      errorMessage
+    } = this.state;
+
+    const hasError = folderName && /["*:<>?/\\|]/gmi.test(folderName);
+
     return (
       <div className={styles.libraryItem}>
         {this.state.loading &&
-          <span className={styles.spinner}><Spinner size={SpinnerSize.xSmall} /></span>
+          <span className={styles.spinner}><Spinner size={SpinnerSize.xSmall} styles={{
+            root: {
+              height: '32px'
+            }
+          }} /></span>
         }
         {!this.state.loading &&
           <Icon iconName="FabricNewFolder" className={styles.folderIcon}></Icon>
@@ -42,9 +54,18 @@ export class NewFolder extends React.Component<INewFolderProps, INewFolderState>
         }
         {this.state.showInput &&
           <TextField
+            styles={{
+              errorMessage: {
+                paddingTop: 0
+              },
+              root: {
+                width: '100%'
+              }
+            }}
             placeholder={strings.NewFolderNamePlaceholder}
-            value={this.state.folderName}
+            value={folderName}
             onChanged={this._onFolderNameChange}
+            errorMessage={hasError ? strings.NewFolderIncorrectSymbolsError : errorMessage}
           // styles={{ fieldGroup: { width: 300 } }}
           />
         }
@@ -54,15 +75,15 @@ export class NewFolder extends React.Component<INewFolderProps, INewFolderState>
             title="Add"
             ariaLabel="Add"
             className={styles.button}
-            disabled={this.state.loading}
+            disabled={this.state.loading || hasError}
             onClick={this._addSubFolder} />
         }
       </div>
     );
   }
 
   private _onFolderNameChange = (newValue?: string) => {
-    this.setState({ folderName: newValue || '' });
+    this.setState({ folderName: newValue || '', errorMessage: '' });
   }
 
   private _onShowInputChange = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -94,6 +115,10 @@ export class NewFolder extends React.Component<INewFolderProps, INewFolderState>
 
     } catch (error) {
       console.error('Error adding folder', error);
+      this.setState({
+        loading: false,
+        errorMessage: strings.SomethingWentWrong
+      });
     }
 
     // callback

src/loc/en-us.ts

@@ -336,6 +336,8 @@ define([], () => {
     FolderFilterBoxPlaceholder: "Filter folders by name",
     FolderExplorerLoading: "Loading folders...",
     FolderExplorerNoItems: "This folder doesn't have any subfolders.",
+    NewFolderIncorrectSymbolsError: "Please enter a name that doesn't include any of these characters: \" * : < > ? / \ |.",
+    SomethingWentWrong: "Something went wrong",
     SelectedLabel: "Selected",
     SelectIcon: "Select icon",
 

src/loc/mystrings.d.ts

@@ -302,6 +302,8 @@ declare interface IControlStrings {
   FolderFilterBoxPlaceholder: string;
   FolderExplorerLoading: string;
   FolderExplorerNoItems: string;
+  NewFolderIncorrectSymbolsError: string;
+  SomethingWentWrong: string;
 
   //Icon picker
   SelectedLabel: string;

src/services/FolderExplorerService.ts

@@ -102,7 +102,7 @@ export class FolderExplorerService implements IFolderExplorerService {
     try {
       const web = Web(webAbsoluteUrl);
       folderRelativeUrl = folderRelativeUrl.replace(/\'/ig, "''");
-      let folderAddResult: IFolderAddResult = await web.getFolderByServerRelativePath(folderRelativeUrl).folders.addUsingPath(encodeURIComponent(name));
+      let folderAddResult: IFolderAddResult = await web.getFolderByServerRelativePath(folderRelativeUrl).folders.addUsingPath(name);
       if (folderAddResult && folderAddResult.data) {
         folder = {
           Name: folderAddResult.data.Name,