Merge pull request #1841 from aaclage/reactonedrivefinderV1.2

samples/react-onedrive-finder/Assets/sample.json

@@ -9,8 +9,8 @@
       "This sample access drives from OneDrive and navigate between his content using Graph OneDrive and Site API and Microsoft Graph Toolkit React controls with the addition of new FileList control.",
       "This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file. "
     ],
-    "created": "2021-04-16",
-    "modified": "2021-04-24",
+    "creationDateTime": "2021-04-16",
+    "updateDateTime": "2021-04-29",
     "products": [
       "SharePoint",
       "Office"

samples/react-onedrive-finder/README.md

@@ -2,9 +2,14 @@
 
 ## Summary
 
-This sample access drives from OneDrive and navigate between his content using **Graph OneDrive and Site API and [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit) react controls "@microsoft/mgt-react**" with the addition of new control **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136) "still preview version"** . This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file.
+This sample access drives from OneDrive and navigate between his content using **Graph OneDrive and Site API and [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit) react controls "@microsoft/mgt-react**" with the addition of new controls **Mgt-File-List [FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/stories/components/fileList.stories.js)** and **Mgt-File [File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/stories/components/file.stories.js) "Beta version"** . This new control provides the ability to retrieve the Drive Library with associated Files and folders making easier to develop and navigate between tenant content and access to file.
 
-**[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136)** control allow to load files base on graph querys or parameters ids.
+**[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file-list.md)** control allow to load files base on graph querys or parameters ids.
+
+**[File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file.md)** control allow to File component is used to represent an individual file/folder from OneDrive or SharePoint base on graph querys or parameters ids.
+
+Below a draw resuming the custom query's made and what control uses to retrieve associated folders and files from different locations.
+![Demo](./Assets/OneDrivefinderSample4.PNG)
 
 ### Retrieve Sites with drives associate
 
@@ -14,7 +19,7 @@ This sample access drives from OneDrive and navigate between his content using *
 
 ![Demo](./Assets/OneDrivefinderSample2.PNG)
 
-### Navigate and filter extensions
+### Navigate, search Files and filter extensions
 
 ![Demo](./Assets/OneDrivefinderSample3.gif)
 
@@ -43,6 +48,7 @@ react-onedrive-finder | [André Lage](http://aaclage.blogspot.com) ([@aaclage](h
 
 Version|Date|Comments
 -------|----|--------
+1.2|April 30, 2021|Include content Search on Drive Library, file details and Minimal style change.
 1.1|April 24, 2021|Fixes, optimization, Styling and extension filter included
 1.0|April 16, 2021|Initial release
 
@@ -82,8 +88,11 @@ Description of the extension that expands upon high-level summary above.
 This extension illustrates the following concepts:
 
 - Easy to navigate between shared Drives using **Graph API and Breadcrumb**
-- **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/f8b8aa81d00bf426b94ee5016d511bc78b36e152/stories/components/fileList.stories.js#L136)** control allow to load documents base on graph querys or parameters ids.
-
+- Search in OneDrive Library
+- Filter by File Extension
+- Change theme of control
+- **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file-list.md)** New mgt-file-list control.
+- **[File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file.md)** New mgt-file control.
 
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-onedrive-finder" />
 

samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {IDialogFileProps } from './IDialogFileProps';
+import { Dialog, DialogFooter, DialogType } from 'office-ui-fabric-react/lib/Dialog';
+import { Link } from 'office-ui-fabric-react/lib/Link';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; 
+import { File,ViewType } from '@microsoft/mgt-react';
+
+export function DialogFile(props: IDialogFileProps) {
+    let _queryString= "";
+    const { open, fileItem, onClose } = props;
+
+    const dialogStyles = { main: { maxWidth: 800 } };
+
+    const dialogContentProps = {
+        type: DialogType.normal,
+        title: 'File Details',
+    };
+
+    const handleClose = () => () => {
+        onClose();
+    };
+
+    const modalProps = {
+        isBlocking: true,
+    };
+
+    const checkLink = () => {
+        if(fileItem != null)
+        {
+            window.open(fileItem.webUrl, '_blank');
+        }
+    };
+    if(fileItem != null)
+    {
+        _queryString = "/drives/"+fileItem.parentReference.driveId +"/items/"+ fileItem.id;
+    }
+    
+    return (
+        <Dialog
+            hidden={!open}
+            onDismiss={handleClose()}
+            dialogContentProps={dialogContentProps}
+            styles={dialogStyles}
+            modalProps={modalProps}>
+                <File
+                view={ViewType.threelines}
+                fileQuery={_queryString}
+                ></File>
+                <Link onClick={checkLink} >File link</Link>
+            <DialogFooter>
+                <DefaultButton onClick={handleClose()} text="Close" />
+            </DialogFooter>
+        </Dialog>
+    );
+} 

samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/IDialogFileProps.ts

@@ -0,0 +1,5 @@
+export interface IDialogFileProps {
+    open: boolean;
+    fileItem:any;
+    onClose: () => void;
+}

samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/IOneDriveFinderState.ts

@@ -10,4 +10,7 @@ export interface IOneDriveFinderState {
     siteItems: IDropdownOption[];
     fileExtensions: string[];
     customStyle: string;
+    searchDrive: string;
+    dialogFileStatus: boolean;
+    dialogFile: any;
 }

samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.module.scss

@@ -1,4 +1,4 @@
-.some-page-wrapper {
+.pageWrapper {
   margin: 5px;
 }
 

samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/OneDriveFinder.tsx

@@ -3,11 +3,14 @@ import styles from './OneDriveFinder.module.scss';
 import { IOneDriveFinderProps } from './IOneDriveFinderProps';
 import { IOneDriveFinderState } from './IOneDriveFinderState';
 import { FileList } from '@microsoft/mgt-react';
+import { DialogFile } from './Dialog/DialogFile';
 import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcrumb';
 import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-react/lib/Dropdown';
 import { AadHttpClient } from "@microsoft/sp-http";
 import { ITheme, mergeStyleSets, getTheme } from 'office-ui-fabric-react/lib/Styling';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
+import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
+import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
 
 const theme: ITheme = getTheme();
 const { palette, fonts } = theme;
@@ -39,6 +42,8 @@ const onRenderCaretDown = (): JSX.Element => {
   return <Icon iconName="PageRight" />;
 };
 
+const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
+
 /**
  * 
  * @param option 
@@ -107,13 +112,17 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       siteItems: [],
       itemID: "",
       fileExtensions: [],
-      customStyle:""
+      customStyle: "",
+      searchDrive: "",
+      dialogFileStatus: false,
+      dialogFile: null
     };
     this.getDomainData();
   }
 
   public render(): React.ReactElement<IOneDriveFinderProps> {
-    const CheckDrives = (e, selectedOption) => {
+    const CheckDrives = (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
+
       if (selectedOption.data.root == undefined) {
         this._siteID = selectedOption.key.toString();
         this.setState({
@@ -132,7 +141,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       this.getDrives(selectedOption);
     };
 
-    const CheckPageSize= (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
+    const CheckPageSize = (event: React.FormEvent<HTMLDivElement>, selectedOption: IDropdownOption) => {
       let fileListpageSize: number;
       fileListpageSize = +selectedOption.key;
       this.setState({
@@ -144,9 +153,9 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       let fileExtensions: string[] = [];
       if (selectedOption.selected == true) {
         fileExtensions.push(selectedOption.key.toString());
-        fileExtensions = [...fileExtensions,...this.state.fileExtensions];
+        fileExtensions = [...fileExtensions, ...this.state.fileExtensions];
       } else {
-        fileExtensions = this.state.fileExtensions.filter(e => e !== selectedOption.key );
+        fileExtensions = this.state.fileExtensions.filter(e => e !== selectedOption.key);
       }
       this.setState({
         fileExtensions: [...fileExtensions]
@@ -165,22 +174,45 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       }
     };
 
-    const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, customStyle } = this.state;
+    const checkSearchDrive = (SearchQuery: string) => {
+      if (this.state.siteID != "") {
+        this.setState({
+          searchDrive: "/sites/" + this.state.siteID + "/drive/root/search(q='" + SearchQuery + "')"
+        });
+      } else {
+        this.setState({
+          searchDrive: "/me/drive/root/search(q='" + SearchQuery + "')"
+        });
+      }
+    };
+    const checkClear = (ev: any) => {
+      this.setState({
+        searchDrive: ""
+      });
+    };
+    const selectFile = (selectedFile: any) => {
+      console.log(selectedFile.detail);
+      this.setState({
+        dialogFileStatus: true,
+        dialogFile: selectedFile.detail,
+      });
+    };
+
+    const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, searchDrive, customStyle } = this.state;
     this._itemID = itemID;
     this._siteID = siteID;
     this._breadcrumbItem = breadcrumbItem;
     this._pageSize = pageSize;
     this._customStyle = customStyle;
-    if(fileExtensions.length != 0)
-    {
+    if (fileExtensions.length != 0) {
       this._fileExtensions = fileExtensions;
     }
-    else{
+    else {
       this._fileExtensions = null;
     }
     return (
       <div>
-        <div className={styles['some-page-wrapper']}>
+        <div className={styles.pageWrapper}>
           <div className={styles.row}>
             <div className={styles.column}>
               <Dropdown
@@ -251,7 +283,12 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
             ariaLabel="Breadcrumb with items rendered as buttons"
             overflowAriaLabel="More links"
           />
-          {(this.state.itemID != "") &&
+          {(this.state.breadcrumbItem.length > 0) &&
+            <Stack tokens={stackTokens}>
+              <SearchBox placeholder="Search Drive" onSearch={checkSearchDrive} onClear={checkClear} />
+            </Stack>
+          }
+          {(this.state.itemID != "" && this.state.searchDrive == "") &&
             <FileList
               className={this._customStyle}
               fileExtensions={this._fileExtensions}
@@ -261,6 +298,24 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
               itemClick={this.manageFolder}
             ></FileList>
           }
+          {(this.state.searchDrive != "") &&
+            <FileList
+              className={this._customStyle}
+              fileExtensions={this._fileExtensions}
+              pageSize={this._pageSize}
+              fileListQuery={searchDrive}
+              itemClick={selectFile}
+            ></FileList>
+          }
+          <DialogFile
+            open={this.state.dialogFileStatus}
+            fileItem={this.state.dialogFile}
+            onClose={() => {
+              this.setState({
+                dialogFileStatus: false
+              });
+            }}
+          ></DialogFile>
         </div>
       </div>
     );
@@ -272,7 +327,6 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
    * Capture file or folder and manages breadcrumb
    */
   private manageFolder = (e: any) => {
-
     if (e.detail.folder != undefined) {
       this._breadcrumbItem.push({
         text: e.detail.name,
@@ -301,7 +355,11 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
         breadcrumbItem: this._breadcrumbItem
       });
     } else {
-      window.open(e.detail.webUrl, '_blank');
+      console.log(e.detail);
+      this.setState({
+        dialogFileStatus: true,
+        dialogFile: e.detail,
+      });
     }
   }
   private getRootDriveFolderID = async (siteID) => {