Merge pull request #792 from pnp/filepicker-site-pages

#601 - allow display Site Pages on Site tab

Author: AJIXuMuK

docs/documentation/docs/controls/FilePicker.md

@@ -79,6 +79,7 @@ The FilePicker component can be configured with the following properties:
 | storeLastActiveTab | boolean | no | Specifies if last active tab will be stored after the Upload panel has been closed. Note: the value of selected tab is stored in the queryString hash. Default `true` |
 | renderCustomUploadTabContent | (filePickerResult: IFilePickerResult) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Upload" tab |
 | renderCustomLinkTabContent | (filePickerResult: IFilePickerResult) => JSX.Element \| null | no | Optional renderer to add custom user-defined fields to "Link" tab |
+| includePageLibraries | boolean | no | Specifies if Site Pages library to be visible on Sites tab |
 
 interface `IFilePickerResult`
 

src/controls/filePicker/FilePicker.tsx

@@ -211,6 +211,7 @@ export class FilePicker extends React.Component<
             {this.state.selectedTab === "keySite" && (
               <SiteFilePickerTab
                 fileBrowserService={this.fileBrowserService}
+                includePageLibraries={this.props.includePageLibraries}
                 {...linkTabProps}
               />
             )}

src/controls/filePicker/IFilePickerProps.ts

@@ -137,4 +137,9 @@ export interface IFilePickerProps {
    * Optional additional renderer for Upload tab
    */
   renderCustomUploadTabContent?: (filePickerResult: IFilePickerResult) => JSX.Element | null;
+
+  /**
+   * Specifies if Site Pages library to be visible on Sites tab
+   */
+  includePageLibraries?: boolean;
 }

src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabProps.ts

@@ -9,4 +9,6 @@ export interface ISiteFilePickerTabProps extends IFilePickerTab {
    * Represents the base node in the breadrumb navigation
    */
   breadcrumbFirstNode?: IBreadcrumbItem;
+
+  includePageLibraries?: boolean;
 }

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

@@ -46,6 +46,7 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
           {this.state.libraryAbsolutePath === undefined &&
             <DocumentLibraryBrowser
               fileBrowserService={this.props.fileBrowserService}
+              includePageLibraries={this.props.includePageLibraries}
               onOpenLibrary={(selectedLibrary: ILibrary) => this._handleOpenLibrary(selectedLibrary, true)} />}
           {this.state.libraryAbsolutePath !== undefined &&
             <FileBrowser

src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.tsx

@@ -41,7 +41,7 @@ export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrow
   }
 
   public async componentDidMount() {
-    const lists = await this.props.fileBrowserService.getSiteMediaLibraries();
+    const lists = await this.props.fileBrowserService.getSiteMediaLibraries(this.props.includePageLibraries);
     this.setState({
       lists: lists,
       isLoading: false

src/controls/filePicker/controls/DocumentLibraryBrowser/IDocumentLibraryBrowserProps.ts

@@ -4,4 +4,5 @@ import { ILibrary } from "../../../../services/FileBrowserService.types";
 export interface IDocumentLibraryBrowserProps {
   fileBrowserService: FileBrowserService;
   onOpenLibrary: (selectedLibrary: ILibrary) => void;
+  includePageLibraries?: boolean;
 }

src/controls/filePicker/controls/FileBrowser/FileBrowser.tsx

@@ -44,7 +44,11 @@ export class FileBrowser extends React.Component<IFileBrowserProps, IFileBrowser
           const folderIcon: string = strings.FolderIconUrl;
           // TODO: Improve file icon URL
           const isPhoto = GeneralHelper.isImage(item.name);
-          const iconUrl = isPhoto ? strings.PhotoIconUrl : `https://spoprod-a.akamaihd.net/files/odsp-next-prod_2019-01-11_20190116.001/odsp-media/images/itemtypes/20_2x/${item.fileType}.png`;
+          let fileType = item.fileType;
+          if (fileType.toLowerCase() === 'aspx') {
+            fileType = 'html';
+          }
+          const iconUrl = isPhoto ? strings.PhotoIconUrl : `https://spoprod-a.akamaihd.net/files/odsp-next-prod_2019-01-11_20190116.001/odsp-media/images/itemtypes/20_2x/${fileType}.png`;
 
           const altText: string = item.isFolder ? strings.FolderAltText : strings.ImageAltText.replace('{0}', item.fileType);
           return <div className={styles.fileTypeIcon}>

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -1445,6 +1445,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             onChange={(filePickerResult: IFilePickerResult) => { console.log(filePickerResult.fileName); }}
             context={this.props.context}
             hideRecentTab={false}
+            includePageLibraries={true}
           />
           {
             this.state.filePickerResult &&