Updated Readme and include dialog Mgt-File control

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
 
@@ -43,7 +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 and Minimal style change
+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
 
@@ -83,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

@@ -11,4 +11,6 @@ export interface IOneDriveFinderState {
     fileExtensions: string[];
     customStyle: string;
     searchDrive: string;
+    dialogFileStatus: boolean;
+    dialogFile: any;
 }

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

@@ -3,6 +3,7 @@ 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";
@@ -113,12 +114,15 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       fileExtensions: [],
       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({
@@ -149,7 +153,7 @@ 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);
       }
@@ -187,9 +191,11 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       });
     };
     const selectFile = (selectedFile: any) => {
-      if (selectedFile.detail.folder == undefined) {
+      console.log(selectedFile.detail);
-        window.open(selectedFile.detail.webUrl, '_blank');
+      this.setState({
-      } 
+        dialogFileStatus: true,
+        dialogFile: selectedFile.detail,
+      });
     };
 
     const { siteID, itemID, pageSize, breadcrumbItem, siteItems, fileExtensions, searchDrive, customStyle } = this.state;
@@ -198,11 +204,10 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
     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 (
@@ -302,6 +307,15 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
               itemClick={selectFile}
             ></FileList>
           }
+          <DialogFile
+            open={this.state.dialogFileStatus}
+            fileItem={this.state.dialogFile}
+            onClose={() => {
+              this.setState({
+                dialogFileStatus: false
+              });
+            }}
+          ></DialogFile>
         </div>
       </div>
     );
@@ -341,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) => {