Add OneDrive files support.

Fix bugs.

Author: Piotr Siatka

src/controls/filePicker/FilePicker.tsx

@@ -21,12 +21,21 @@ import RecentFilesTab from './RecentFilesTab/RecentFilesTab';
 import OneDriveTab from './OneDriveTab/OneDriveTab';
 
 import styles from './FilePicker.module.scss';
+import { FileBrowserService } from '../../services/FileBrowserService';
+import { OneDriveFilesTab } from './OneDriveFilesTab';
+import { OneDriveService } from '../../services/OneDriveService';
 
 
 export class FilePicker extends React.Component<IFilePickerProps, IFilePickerState> {
+  private fileBrowserService: FileBrowserService;
+  private oneDriveService: OneDriveService;
   constructor(props: IFilePickerProps) {
     super(props);
 
+    // Initialize file browser services
+    this.fileBrowserService = new FileBrowserService(props.webPartContext);
+    this.oneDriveService = new OneDriveService(props.webPartContext);
+
     this.state = {
       panelOpen: false,
       selectedTab: 'keyRecent',
@@ -153,6 +162,7 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
             {
               this.state.selectedTab === "keySite" &&
               <SiteFilePickerTab
+                fileBrowserService={this.fileBrowserService}
                 context={this.props.webPartContext}
                 accepts={accepts}
                 onClose={() => this._handleClosePanel()}
@@ -170,7 +180,8 @@ export class FilePicker extends React.Component<IFilePickerProps, IFilePickerSta
             }
             {
               this.state.selectedTab === "keyOneDrive" &&
-              <OneDriveTab
+              <OneDriveFilesTab
+                oneDriveService={this.oneDriveService}
                 context={this.props.webPartContext}
                 accepts={accepts}
                 onClose={() => this._handleClosePanel()}

src/controls/filePicker/OneDriveFilesTab/IOneDriveFilesTabProps.ts

@@ -0,0 +1,6 @@
+import { IFilePickerTab } from "../FilePicker.types";
+import { OneDriveService } from "../../../services/OneDriveService";
+
+export interface IOneDriveFilesTabProps extends IFilePickerTab {
+  oneDriveService: OneDriveService;
+}

src/controls/filePicker/OneDriveFilesTab/IOneDriveFilesTabState.ts

@@ -0,0 +1,11 @@
+import { OneDriveFilesBreadcrumbItem } from "./OneDriveFilesTab.types";
+
+export interface IOneDriveFilesTabState {
+  fileUrl?: string;
+  libraryAbsolutePath: string;
+  libraryTitle: string;
+  folderPath: string;
+  folderName: string;
+
+  breadcrumbItems: OneDriveFilesBreadcrumbItem[];
+}

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.module.scss

@@ -0,0 +1 @@
+@import "../FilePicker.module.scss";

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { IOneDriveFilesTabProps, IOneDriveFilesTabState } from '.';
+import { IFile } from '../../../services/FileBrowserService.types';
+import { OneDriveFilesBreadcrumbItem } from './OneDriveFilesTab.types';
+import { findIndex } from '@microsoft/sp-lodash-subset';
+
+
+import { Breadcrumb } from 'office-ui-fabric-react/lib/Breadcrumb';
+import { FileBrowser } from '../controls';
+import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
+
+import styles from './OneDriveFilesTab.module.scss';
+import * as strings from 'ControlStrings';
+
+export class OneDriveFilesTab extends React.Component<IOneDriveFilesTabProps, IOneDriveFilesTabState> {
+  constructor(props: IOneDriveFilesTabProps) {
+    super(props);
+
+    this.state = {
+      libraryAbsolutePath: undefined,
+      libraryTitle: strings.DocumentLibraries,
+      folderPath: undefined,
+      folderName: strings.DocumentLibraries,
+      breadcrumbItems: []
+    };
+  }
+
+  public async componentDidMount() {
+    const folderPath = await this.props.oneDriveService.getOneDriveRootFolderRelativeUrl();
+    const libraryAbsolutePath = await this.props.oneDriveService.getOneDriveRootFolderFullUrl();
+    const libraryTitle = await this.props.oneDriveService.getOneDrivePersonalLibraryTitle();
+
+    const oneDriveFolderData: IFile = {
+      isFolder: true,
+      modified: null,
+      absoluteRef: libraryAbsolutePath,
+      fileLeafRef: libraryTitle,
+      docIcon: "",
+      fileRef: "",
+    }
+
+    const breadcrumbItems = this.state.breadcrumbItems;
+    // Add OneDrive folder as a first node
+    const breadcrumbNode: OneDriveFilesBreadcrumbItem = {
+      folderData: oneDriveFolderData,
+      isCurrentItem: true,
+      text: oneDriveFolderData.fileLeafRef,
+      key: oneDriveFolderData.absoluteRef
+    };
+    breadcrumbNode.onClick = () => { this.onBreadcrumpItemClick(breadcrumbNode); }
+    breadcrumbItems.push(breadcrumbNode);
+
+    this.setState({
+      libraryAbsolutePath: libraryAbsolutePath,
+      folderName: folderPath,
+      libraryTitle
+    })
+  }
+
+  public render(): React.ReactElement<IOneDriveFilesTabProps> {
+    return (
+      <div className={styles.tabContainer}>
+        <div className={styles.tabHeaderContainer}>
+          { /** TODO: Fix breadcrumb styles */}
+          <Breadcrumb items={this.state.breadcrumbItems} className={styles.tabHeader}/>
+        </div>
+        <div className={styles.tab}>
+
+          {this.state.libraryAbsolutePath !== undefined &&
+            <FileBrowser
+              onChange={(fileUrl: string) => this._handleSelectionChange(fileUrl)}
+              onOpenFolder={(folder: IFile) => this._handleOpenFolder(folder, true)}
+              fileBrowserService={this.props.oneDriveService}
+              libraryName={this.state.libraryTitle}
+              folderPath={this.state.folderPath}
+              accepts={this.props.accepts} />}
+        </div>
+        <div className={styles.actionButtonsContainer}>
+          <div className={styles.actionButtons}>
+            <PrimaryButton
+              disabled={!this.state.fileUrl}
+              onClick={() => this._handleSave()} className={styles.actionButton}>{strings.OpenButtonLabel}</PrimaryButton>
+            <DefaultButton onClick={() => this._handleClose()} className={styles.actionButton}>{strings.CancelButtonLabel}</DefaultButton>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  /**
+   * Handles breadcrump item click
+   */
+  private onBreadcrumpItemClick = (node: OneDriveFilesBreadcrumbItem) => {
+    let { breadcrumbItems } = this.state;
+    let breadcrumbClickedItemIndx = 0;
+    // Site node clicked
+    if (node.folderData == null) {
+      this.setState({
+        libraryAbsolutePath: undefined,
+        folderPath: undefined,
+        folderName: undefined
+      });
+    }
+    // Check if it is folder item
+    else if (node.folderData != null) {
+      this._handleOpenFolder(node.folderData, false);
+      // select which node has been clicked
+      breadcrumbClickedItemIndx = findIndex(breadcrumbItems, item => item.folderData && item.folderData.absoluteRef === node.key);
+    }
+
+    // Trim nodes array
+    breadcrumbItems = breadcrumbItems.slice(0, breadcrumbClickedItemIndx + 1);
+    // Set new current node
+    breadcrumbItems[breadcrumbItems.length - 1].isCurrentItem = true;
+
+    this.setState({
+      breadcrumbItems,
+      fileUrl: undefined
+    });
+  }
+
+  /**
+   * Is called when user selects a different file
+   */
+  private _handleSelectionChange = (imageUrl: string) => {
+    this.setState({
+      fileUrl: imageUrl
+    });
+  }
+
+  /**
+   * Called when user saves
+   */
+  private _handleSave = () => {
+    this.props.onSave(encodeURI(this.state.fileUrl));
+  }
+
+  /**
+   * Called when user closes tab
+   */
+  private _handleClose = () => {
+    this.props.onClose();
+  }
+
+  /**
+   * Triggered when user opens a file folder
+   */
+  private _handleOpenFolder = (folder: IFile, addBreadcrumbNode: boolean) => {
+    const { breadcrumbItems } = this.state;
+
+    if (addBreadcrumbNode) {
+      breadcrumbItems.map(item => item.isCurrentItem = false);
+      const breadcrumbNode: OneDriveFilesBreadcrumbItem = {
+        folderData: folder,
+        isCurrentItem: true,
+        text: folder.fileLeafRef,
+        key: folder.absoluteRef
+      };
+      breadcrumbNode.onClick = () => { this.onBreadcrumpItemClick(breadcrumbNode); }
+      breadcrumbItems.push(breadcrumbNode);
+    }
+
+    this.setState({
+      folderPath: folder.fileRef,
+      folderName: folder.fileLeafRef,
+      libraryAbsolutePath: folder.absoluteRef,
+      breadcrumbItems
+    });
+  }
+}

src/controls/filePicker/OneDriveFilesTab/OneDriveFilesTab.types.ts

@@ -0,0 +1,6 @@
+import { IBreadcrumbItem } from "office-ui-fabric-react/lib/components/Breadcrumb";
+import { IFile } from "../../../services/FileBrowserService.types";
+
+export interface OneDriveFilesBreadcrumbItem extends IBreadcrumbItem {
+  folderData?: IFile;
+}

src/controls/filePicker/OneDriveFilesTab/index.ts

@@ -0,0 +1,3 @@
+export * from './OneDriveFilesTab';
+export * from './IOneDriveFilesTabProps';
+export * from './IOneDriveFilesTabState';

src/controls/filePicker/OneDriveTab/OneDriveTab.tsx

@@ -265,7 +265,7 @@ export default class OneDriveTab extends React.Component<IOneDriveTabProps, IOne
    */
   public componentDidMount(): void {
     // Initialize the OneDrive services
-    this._oneDriveService = new OneDriveService(this.props.context, this.props.accepts);
+    // this._oneDriveService = new OneDriveService(this.props.context, this.props.accepts);
 
     // Get the items at the root of the OneDrive folder
     this._getListItems();
@@ -284,85 +284,8 @@ export default class OneDriveTab extends React.Component<IOneDriveTabProps, IOne
   /**
    * Gets the list of items to display
    */
-  private _getListItems = (): Promise<void> => {
-    // We're loading!
-    this.setState({
-      isLoading: true
-    });
-
-    return this._oneDriveService.getListDataAsStream(this.state.serverRelativeFolderUrl).then((listDataStream: IGetListDataAsStreamResult) => {
-
-      // Get the thumbnail URL template -- stored in the list schema
-      const thumbnailUrlTemplate: string = listDataStream.ListSchema[".thumbnailUrl"]
-        .replace("{.mediaBaseUrl}", listDataStream.ListSchema[".mediaBaseUrl"])
-        .replace("{.callerStack}", listDataStream.ListSchema[".callerStack"])
-        .replace("{.driveAccessToken}", "encodeFailures=1&ctag={.ctag}");
-
-      // Map every item to a OneDrive file
-      const files: IOneDriveFile[] = listDataStream.ListData.Row.map((item: IRow) => {
-        // Build the thumbnail URL from the template
-        // The template is stored in the schema (see above) and contains list-specific
-        // replacement tokens (which we already replaced above) and item-specific
-        // tokens, which we're replacing right. now.
-        const thumbnail: string = thumbnailUrlTemplate
-          .replace('{.spItemUrl}', item[".spItemUrl"])
-          .replace('{.ctag}', encodeURIComponent(item[".ctag"]))
-          .replace('{.fileType}', item[".fileType"]);
-
-        // Get the modified date
-        const modifiedParts: string[] = item["Modified.FriendlyDisplay"]!.split('|');
-        let modified: string = item.Modified;
-
-        // If there is a friendly modified date, use that
-        // The friendly dates seem to be a lot smarter than what I have here.
-        // For example, it seems to use a different structure for dates that are on the same
-        // day, within a few days, etc.
-        // For this example, we just handle the regular friendly-dates, but if we
-        // turn this into a PnP control, we'll want to handle all sorts of friendly dates
-        if (modifiedParts.length === 2) {
-          modified = modifiedParts[1];
-        }
-
-        // Parse media metadata to see if we can get known dimensions
-        // Dimensions are stored as HTML-encoded JSON from media services.
-        // If it is available, get the JSON structure and parse it.
-        const media: any = item.MediaServiceFastMetadata && JSON.parse(unescape(item.MediaServiceFastMetadata));
-        const dimensions: IDimensions = media && media.photo && {
-          width: media.photo.width,
-          height: media.photo.height
-        };
-
-        // Create a nice OneDriveFile interface so we're not saving all that extra metadata that
-        // gets returned from SharePoint in our state.
-        const file: IOneDriveFile = {
-          key: item.UniqueId,
-          name: item.FileLeafRef,
-          absoluteUrl: this._buildOneDriveAbsoluteUrl(listDataStream.HttpRoot, item.FileRef),
-          serverRelativeUrl: item.FileRef,
-          isFolder: item.FSObjType === "1",
-          modified: modified,
-          modifiedBy: item.Editor[0].title,
-          fileType: item.File_x0020_Type,
-          fileIcon: item["HTML_x0020_File_x0020_Type.File_x0020_Type.mapico"],
-          fileSizeDisplay: item.FileSizeDisplay,
-          totalFileCount: +item.SMTotalFileCount, // quickly converts string to number
-          thumbnail: thumbnail,
-          dimensions: dimensions,
-          isShared: parseInt(item.PrincipalCount) > 0
-        };
-        return file;
-      });
-
-      // Set the selection items so that we know what item we're selecting
-      this._selection.setItems(files);
+  private _getListItems = () => {
 
-      // Store the files and stop the loading icon
-      this.setState({
-        files: files,
-        isLoading: false, // we're done loading
-        parentFolderInfo: listDataStream.ParentInfo.ParentFolderInfo // remember where we are
-      });
-    });
   }
 
   /**

src/controls/filePicker/SiteFilePickerTab/FileBrowser/FileBrowser.module.scss

@@ -1,3 +1,6 @@
 import { IFilePickerTab } from "..";
+import { FileBrowserService } from "../../../services/FileBrowserService";
 
-export interface ISiteFilePickerTabProps extends IFilePickerTab { }
+export interface ISiteFilePickerTabProps extends IFilePickerTab {
+  fileBrowserService: FileBrowserService;
+}