Fix bugs.

Add OrgAssets library support.

Author: Piotr Siatka

src/controls/filePicker/FilePicker.tsx

@@ -23,93 +23,43 @@ import styles from './FilePicker.module.scss';
 import { FileBrowserService } from '../../services/FileBrowserService';
 import { OneDriveFilesTab } from './OneDriveFilesTab';
 import { OneDriveService } from '../../services/OneDriveService';
+import { OrgAssetsService } from '../../services/OrgAssetsService';
 
 export class FilePicker extends React.Component<IFilePickerProps, IFilePickerState> {
   private fileBrowserService: FileBrowserService;
   private oneDriveService: OneDriveService;
+  private orgAssetsService: OrgAssetsService;
+
   constructor(props: IFilePickerProps) {
     super(props);
 
     // Initialize file browser services
     this.fileBrowserService = new FileBrowserService(props.webPartContext);
     this.oneDriveService = new OneDriveService(props.webPartContext);
+    this.orgAssetsService = new OrgAssetsService(props.webPartContext);
 
     this.state = {
       panelOpen: false,
       selectedTab: 'keyRecent',
+      organisationAssetsEnabled: false,
       showFullNav: true
     };
   }
 
+  public async componentDidMount() {
+    // Load information about Organisation Assets Library
+    const orgAssetsLibraries = await this.orgAssetsService.getSiteMediaLibraries();
+    const organisationAssetsEnabled = orgAssetsLibraries ? true : false;
+
+    this.setState({
+      organisationAssetsEnabled
+    })
+  }
+
   public render(): JSX.Element {
     // If no acceptable file type was passed, and we're expecting images, set the default image filter
     const accepts: string = this.props.accepts;
 
-    // Get a list of groups to display
-    let groups: INavLinkGroup[] = [
-      {
-        links: [
-          {
-            name: strings.RecentLinkLabel,
-            url: '#recent',
-            icon: 'Recent',
-            key: 'keyRecent',
-          },
-          {
-            name: strings.WebSearchLinkLabel,
-            url: '#search',
-            key: 'keyWeb',
-            icon: 'Search',
-          },
-          {
-            name: "OneDrive",
-            url: '#onedrive',
-            key: 'keyOneDrive',
-            icon: 'OneDrive',
-          },
-          {
-            name: strings.SiteLinkLabel,
-            url: '#globe',
-            key: 'keySite',
-            icon: 'Globe',
-          },
-          {
-            name: strings.UploadLinkLabel,
-            url: '#upload',
-            key: 'keyUpload',
-            icon: 'System'
-          },
-          {
-            name: strings.FromLinkLinkLabel,
-            url: '#link',
-            key: 'keyLink',
-            icon: 'Link'
-          }
-        ]
-      }
-    ];
-
-    // Hide tabs we don't want. Start from bottom of the list
-    // so we're not changing the relative position of items
-    // as we remove them.
-
-    // I'm sure there is a better way to do this...
-
-    // If we don't want local uploads, remove it from the list
-    if (this.props.disableLocalUpload) {
-      groups[0].links.splice(4, 1);
-    }
-
-    // If we don't want OneDrive, remove it from the list
-    if (this.props.hasMySiteTab === false) {
-      groups[0].links.splice(2, 1);
-    }
-
-    // If we don't want web search, remove it from the list
-    if (this.props.disableWebSearchTab) {
-      groups[0].links.splice(1, 1);
-    }
-
     return (
       <div >
         <Label required={this.props.required}>{this.props.label}</Label>
@@ -132,7 +82,7 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
 
           <div className={styles.nav}>
             <Nav
-              groups={groups}
+              groups={this._getNavPanelOptions()}
               selectedKey={this.state.selectedTab}
               onLinkClick={(ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => this._handleLinkClick(ev, item)}
             />
@@ -167,6 +117,21 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
                 onSave={(value: string) => this._handleSave(value)}
               />
             }
+            {
+              this.state.selectedTab === "keyOrgAssets" &&
+              <SiteFilePickerTab
+                breadcrumbFirstNode={{
+                  isCurrentItem: true,
+                  text: "Images and files provided by your organization",
+                  key: "keyOrgAssets"
+                }}
+                fileBrowserService={this.orgAssetsService}
+                context={this.props.webPartContext}
+                accepts={accepts}
+                onClose={() => this._handleClosePanel()}
+                onSave={(value: string) => this._handleSave(value)}
+              />
+            }
             {
               this.state.selectedTab === "keyWeb" &&
               <WebSearchTab
@@ -245,4 +210,68 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
     this.setState({ selectedTab: item.key });
   }
 
+  private _getNavPanelOptions = () => {
+    let links = [];
+
+    if (!this.props.hideRecentTab) {
+      links.push({
+        name: strings.RecentLinkLabel,
+        url: '#recent',
+        icon: 'Recent',
+        key: 'keyRecent',
+      });
+    }
+    if (!this.props.hideWebSearchTab) {
+      links.push({
+        name: strings.WebSearchLinkLabel,
+        url: '#search',
+        key: 'keyWeb',
+        icon: 'Search',
+      });
+    }
+    if (!this.props.hideOrganisationalAssetTab && this.state.organisationAssetsEnabled) {
+      links.push({
+        name: 'Your organisation',
+        url: '#orgAssets',
+        icon: 'FabricFolderConfirm',
+        key: 'keyOrgAssets',
+      });
+    }
+    if (!this.props.hideOneDriveTab) {
+      links.push({
+        name: "OneDrive",
+        url: '#onedrive',
+        key: 'keyOneDrive',
+        icon: 'OneDrive',
+      });
+    }
+    if (!this.props.hideSiteFilesTab) {
+      links.push({
+        name: strings.SiteLinkLabel,
+        url: '#globe',
+        key: 'keySite',
+        icon: 'Globe',
+      });
+    }
+    if (!this.props.hideLocalUploadTab) {
+      links.push({
+        name: strings.UploadLinkLabel,
+        url: '#upload',
+        key: 'keyUpload',
+        icon: 'System'
+      });
+    }
+    if (!this.props.hideLinkUploadTab) {
+      links.push({
+        name: strings.FromLinkLinkLabel,
+        url: '#link',
+        key: 'keyLink',
+        icon: 'Link'
+      });
+    }
+
+    let groups: INavLinkGroup[] = [ { links} ];
+    return groups;
+  }
+
 }

src/controls/filePicker/IFilePickerProps.ts

@@ -31,10 +31,14 @@ export interface IFilePickerProps {
    */
   disabled?: boolean;
 
-  disableLocalUpload?: boolean;
-  disableWebSearchTab?: boolean;
-  disableCentralAssetRepo?: boolean; // not supported yet
-  hasMySiteTab?: boolean;
+  hideRecentTab?: boolean;
+  hideWebSearchTab?: boolean;
+  hideOrganisationalAssetTab?: boolean;
+  hideOneDriveTab?: boolean;
+  hideSiteFilesTab?: boolean;
+  hideLocalUploadTab?: boolean;
+  hideLinkUploadTab?: boolean;
+
   required?: boolean;
   onChanged: (value: string) => void;
 }

src/controls/filePicker/IFilePickerState.ts

@@ -2,4 +2,6 @@ export interface IFilePickerState {
   showFullNav: boolean; // reserved for future use
   panelOpen: boolean;
   selectedTab: string;
+
+  organisationAssetsEnabled: boolean;
 }

src/controls/filePicker/SiteFilePickerTab/ISiteFilePickerTabProps.ts

@@ -1,6 +1,12 @@
 import { IFilePickerTab } from "..";
 import { FileBrowserService } from "../../../services/FileBrowserService";
+import { IBreadcrumbItem } from "office-ui-fabric-react/lib/Breadcrumb";
 
 export interface ISiteFilePickerTabProps extends IFilePickerTab {
   fileBrowserService: FileBrowserService;
+
+  /**
+   * Represents the base node in the breadrumb navigation
+   */
+  breadcrumbFirstNode?: IBreadcrumbItem;
 }

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.tsx

@@ -6,22 +6,22 @@ import styles from './SiteFilePickerTab.module.scss';
 
 // Custom picker interface
 import { ISiteFilePickerTabProps, ISiteFilePickerTabState, SiteFilePickerBreadcrumbItem } from '.';
-import { DocumentLibraryBrowser, FileBrowser, ILibrary } from '../controls';
+import { DocumentLibraryBrowser, FileBrowser } from '../controls';
 
 // Office Fabric
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/components/Button';
 import { Breadcrumb } from 'office-ui-fabric-react/lib/Breadcrumb';
 
 // Localized strings
 import * as strings from 'ControlStrings';
-import { IFile } from '../../../services/FileBrowserService.types';
+import { IFile, ILibrary } from '../../../services/FileBrowserService.types';
 
 export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTabProps, ISiteFilePickerTabState> {
   constructor(props: ISiteFilePickerTabProps) {
     super(props);
 
-    // Add current site to the breadcrumb
-    const breadcrumbSiteNode: SiteFilePickerBreadcrumbItem = {
+    // Add current site to the breadcrumb or the provided node
+    const breadcrumbSiteNode: SiteFilePickerBreadcrumbItem = this.props.breadcrumbFirstNode ? this.props. breadcrumbFirstNode : {
       isCurrentItem: true,
       text: props.context.pageContext.web.title,
       key: props.context.pageContext.web.id.toString()
@@ -42,12 +42,12 @@ export default class SiteFilePickerTab extends React.Component<ISiteFilePickerTa
       <div className={styles.tabContainer}>
         <div className={styles.tabHeaderContainer}>
           { /** TODO: Fix breadcrumb styles */}
-          <Breadcrumb items={this.state.breadcrumbItems} className={styles.tabHeader}/>
+          <Breadcrumb items={this.state.breadcrumbItems} className={styles.tabHeader} />
         </div>
         <div className={styles.tabFiles}>
           {this.state.libraryAbsolutePath === undefined &&
             <DocumentLibraryBrowser
-              context={this.props.context}
+              fileBrowserService={this.props.fileBrowserService}
               onOpenLibrary={(selectedLibrary: ILibrary) => this._handleOpenLibrary(selectedLibrary, true)} />}
           {this.state.libraryAbsolutePath !== undefined &&
             <FileBrowser

src/controls/filePicker/SiteFilePickerTab/SiteFilePickerTab.types.ts

@@ -1,6 +1,5 @@
 import { IBreadcrumbItem } from "office-ui-fabric-react/lib/Breadcrumb";
-import { ILibrary } from "../controls";
-import { IFile } from "../../../services/FileBrowserService.types";
+import { IFile, ILibrary } from "../../../services/FileBrowserService.types";
 
 export interface SiteFilePickerBreadcrumbItem extends IBreadcrumbItem {
   libraryData?: ILibrary;

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

@@ -5,9 +5,10 @@ import { List } from 'office-ui-fabric-react/lib/List';
 import { css } from "@uifabric/utilities/lib/css";
 import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
 
-import { IDocumentLibraryBrowserProps, IDocumentLibraryBrowserState, ILibrary } from '.';
+import { IDocumentLibraryBrowserProps, IDocumentLibraryBrowserState } from '.';
 import * as strings from 'ControlStrings';
 import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
+import { ILibrary } from '../../../../services/FileBrowserService.types';
 
 /**
  * This would have been better done as an Office Fabric TileList, but it isn't available yet for production use
@@ -22,29 +23,12 @@ export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrow
     };
   }
 
-  public componentDidMount(): void {
-
-    const { absoluteUrl } = this.props.context.pageContext.web;
-
-    const apiUrl: string = `${absoluteUrl}/_api/SP.Web.GetDocumentAndMediaLibraries?webFullUrl='${encodeURIComponent(absoluteUrl)}'&includePageLibraries='false'`;
-    this.props.context.spHttpClient.get(apiUrl,
-      SPHttpClient.configurations.v1)
-      .then((response: SPHttpClientResponse) => {
-        response.json().then((responseJSON: any) => {
-          const lists: ILibrary[] = responseJSON.value.map((item) => {
-            const list: ILibrary = {
-              title: item.Title,
-              absoluteUrl: item.AbsoluteUrl,
-              serverRelativeUrl: item.ServerRelativeUrl
-            };
-            return list;
-          });
-          this.setState({
-                lists: lists,
-                isLoading: false
-              });
-        });
-      });
+  public async componentDidMount() {
+    const lists = await this.props.fileBrowserService.getSiteMediaLibraries();
+    this.setState({
+      lists: lists,
+      isLoading: false
+    });
   }
 
   public render(): React.ReactElement<IDocumentLibraryBrowserProps> {
@@ -66,6 +50,9 @@ export class DocumentLibraryBrowser extends React.Component<IDocumentLibraryBrow
    * Renders a file folder cover
    */
   private _onRenderCell = (item: ILibrary, index: number | undefined): JSX.Element => {
+    // const folderBlackPlateIcon = item.iconPath ? item.iconPath : strings.FolderBackPlate;
+    // const folderFrontPlateIcon = item.iconPath ? item.iconPath : strings.FolderFrontPlate;
+
     return (
       <div className={styles.listCell} data-is-focusable={true}>
         <div className={styles.cell}>

src/controls/filePicker/controls/DocumentLibraryBrowser/DocumentLibraryBrowser.types.ts

@@ -1,7 +1,7 @@
-import { ILibrary } from ".";
-import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { FileBrowserService } from "../../../../services/FileBrowserService";
+import { ILibrary } from "../../../../services/FileBrowserService.types";
 
 export interface IDocumentLibraryBrowserProps {
-  context: WebPartContext;
+  fileBrowserService: FileBrowserService;
   onOpenLibrary: (selectedLibrary: ILibrary) => void;
 }

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

@@ -1,4 +1,4 @@
-import { ILibrary } from ".";
+import { ILibrary } from "../../../../services/FileBrowserService.types";
 
 export interface IDocumentLibraryBrowserState {
   isLoading: boolean;