Update OneDrive Finder to MGT 2.2.0

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

@@ -10,7 +10,7 @@
       "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. "
     ],
     "creationDateTime": "2021-04-16",
-    "updateDateTime": "2021-04-29",
+    "updateDateTime": "2021-05-20",
     "products": [
       "SharePoint",
       "Office"

samples/react-onedrive-finder/README.md

@@ -2,11 +2,11 @@
 
 ## 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 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.
+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://docs.microsoft.com/en-us/graph/toolkit/components/file-list)** and **Mgt-File [File](https://docs.microsoft.com/en-us/graph/toolkit/components/file)** . 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/next/file/specs/mgt-file-list.md)** control allow to load files base on graph querys or parameters ids.
+**[FileList](https://docs.microsoft.com/en-us/graph/toolkit/components/file-list)** 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.
+**[File](https://docs.microsoft.com/en-us/graph/toolkit/components/file)** 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)
@@ -48,6 +48,7 @@ react-onedrive-finder | [André Lage](http://aaclage.blogspot.com) ([@aaclage](h
 
 Version|Date|Comments
 -------|----|--------
+2.0|May 20, 2021|Update MGT to version 2.2.0, include new Features (Localization, cache refresh).
 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
@@ -90,9 +91,10 @@ This extension illustrates the following concepts:
 - Easy to navigate between shared Drives using **Graph API and Breadcrumb**
 - Search in OneDrive Library
 - Filter by File Extension
-- Change theme of control
+- Change theme of control and Localization
-- **[FileList](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file-list.md)** New mgt-file-list control.
+- Caching refresh
-- **[File](https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/next/file/specs/mgt-file.md)** New mgt-file control.
+- **[FileList](https://docs.microsoft.com/en-us/graph/toolkit/components/file-list)** New mgt-file-list control.
+- **[File](https://docs.microsoft.com/en-us/graph/toolkit/components/file)** New mgt-file control.
 
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-onedrive-finder" />
 

samples/react-onedrive-finder/package.json

@@ -12,8 +12,8 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/mgt": "^2.2.0-next.file.0e80deb",
+    "@microsoft/mgt": "^2.2.0",
-    "@microsoft/mgt-react": "^2.2.0-next.file.0e80deb",
+    "@microsoft/mgt-react": "^2.2.0",
     "@microsoft/sp-core-library": "1.11.0",
     "@microsoft/sp-lodash-subset": "1.11.0",
     "@microsoft/sp-office-ui-fabric-core": "1.11.0",

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import {IDialogFileProps } from './IDialogFileProps';
+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 { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { File,ViewType } from '@microsoft/mgt-react';
+import { File, ViewType, Person, PersonViewType } from '@microsoft/mgt-react';
 
 export function DialogFile(props: IDialogFileProps) {
-    let _queryString= "";
+    let _queryString = "";
-    const { open, fileItem, onClose } = props;
+    const { className, open, fileItem, onClose } = props;
 
     const dialogStyles = { main: { maxWidth: 800 } };
 
@@ -25,16 +25,15 @@ export function DialogFile(props: IDialogFileProps) {
     };
 
     const checkLink = () => {
-        if(fileItem != null)
+        if (fileItem != null) {
-        {
             window.open(fileItem.webUrl, '_blank');
         }
     };
-    if(fileItem != null)
+    if (fileItem != null) {
-    {
+        _queryString = "/drives/" + fileItem.parentReference.driveId + "/items/" + fileItem.id;
-        _queryString = "/drives/"+fileItem.parentReference.driveId +"/items/"+ fileItem.id;
+
     }
-    
+
     return (
         <Dialog
             hidden={!open}
@@ -42,11 +41,12 @@ export function DialogFile(props: IDialogFileProps) {
             dialogContentProps={dialogContentProps}
             styles={dialogStyles}
             modalProps={modalProps}>
-                <File
+            <File
                 view={ViewType.threelines}
                 fileQuery={_queryString}
-                ></File>
+                className={className}
-                <Link onClick={checkLink} >File link</Link>
+            ></File>
+            <Link onClick={checkLink} >File link</Link>
             <DialogFooter>
                 <DefaultButton onClick={handleClose()} text="Close" />
             </DialogFooter>

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

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

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

@@ -24,9 +24,13 @@
   --file-list-box-shadow: none;
   --file-list-padding: 0px;
   --file-list-margin: 0;
-  --file-item-border-radius: 0px;
+  --file-item-border-radius: 12px;
   --file-item-margin: 0px 0px;
+  --file-item-border-top: 1px solid #dddddd;
+  --file-item-border-left: 1px solid #dddddd;
+  --file-item-border-right: 1px solid #dddddd;
   --file-item-border-bottom: 1px solid #dddddd;
+  --file-item-border-focused: 1px dashed red;
   --show-more-button-background-color: #fef8dd;
   --show-more-button-background-color--hover: #ffe7c7;
   --show-more-button-font-size: 14px;

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

@@ -9,8 +9,10 @@ import { Dropdown, IDropdownOption, IDropdownProps } from 'office-ui-fabric-reac
 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 { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
+import { MgtFileList, LocalizationHelper } from '@microsoft/mgt';
 
 const theme: ITheme = getTheme();
 const { palette, fonts } = theme;
@@ -99,12 +101,13 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
   public _pageSize: number;
   public _breadcrumbItem: IBreadcrumbItem[] = [];
   public _customStyle: string;
-
   public _fileExtensions: string[] = null;
+  public flref = React.createRef<MgtFileList>();
+
   constructor(props: IOneDriveFinderProps, state: IOneDriveFinderState) {
     super(props);
-
     // Initialize the state of the component
+
     this.state = {
       breadcrumbItem: [],
       pageSize: 50,
@@ -115,7 +118,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
       customStyle: "",
       searchDrive: "",
       dialogFileStatus: false,
-      dialogFile: null
+      dialogFile: null,
     };
     this.getDomainData();
   }
@@ -167,10 +170,30 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
         this.setState({
           customStyle: styles.mgtfilelist
         });
+        LocalizationHelper.strings = {
+          _components: {
+            'file-list': {
+              showMoreSubtitle: 'Take a pause ☕ and show more'
+            },
+            'file': {
+              modifiedSubtitle: 'Once upon a time in this day ',
+            }
+          }
+        };
       } else {
         this.setState({
           customStyle: selectedOption.text
         });
+        LocalizationHelper.strings = {
+          _components: {
+            'file-list': {
+              showMoreSubtitle: 'Show more items'
+            },
+            'file': {
+              modifiedSubtitle: 'Modified ',
+            }
+          }
+        };
       }
     };
 
@@ -210,6 +233,7 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
     else {
       this._fileExtensions = null;
     }
+
     return (
       <div>
         <div className={styles.pageWrapper}>
@@ -273,10 +297,15 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
                 onChange={checkFileExtensions}
                 styles={dropdownFilterStyles}
               />
+
             </div>
           </div>
         </div>
         <div>
+          <IconButton iconProps={{ iconName: 'Refresh' }} text="Refresh cache" onClick={this.refreshMGTControl} allowDisabledFocus disabled={false} checked={false} ></IconButton>
+        </div>
+        <div>
+
           <Breadcrumb
             items={this._breadcrumbItem}
             maxDisplayedItems={10}
@@ -285,29 +314,35 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
           />
           {(this.state.breadcrumbItem.length > 0) &&
             <Stack tokens={stackTokens}>
-              <SearchBox placeholder="Search Drive" onSearch={checkSearchDrive} onClear={checkClear} />
+              <SearchBox style={{ width: "90%" }} placeholder="Search Drive" onSearch={checkSearchDrive} onClear={checkClear} />
             </Stack>
           }
           {(this.state.itemID != "" && this.state.searchDrive == "") &&
             <FileList
+              ref={this.flref}
               className={this._customStyle}
               fileExtensions={this._fileExtensions}
               pageSize={this._pageSize}
               siteId={this._siteID}
               itemId={this._itemID}
               itemClick={this.manageFolder}
-            ></FileList>
+            >
+            </FileList>
           }
           {(this.state.searchDrive != "") &&
             <FileList
+
               className={this._customStyle}
               fileExtensions={this._fileExtensions}
               pageSize={this._pageSize}
               fileListQuery={searchDrive}
               itemClick={selectFile}
-            ></FileList>
+            >
+            </FileList>
           }
           <DialogFile
+
+            className={this._customStyle}
             open={this.state.dialogFileStatus}
             fileItem={this.state.dialogFile}
             onClose={() => {
@@ -321,12 +356,17 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
     );
   }
 
+  private refreshMGTControl = (): void => {
+    this.flref.current.reload(true);
+  }
+
   /**
    * 
    * @param e 
    * Capture file or folder and manages breadcrumb
    */
   private manageFolder = (e: any) => {
+    console.log(e.detail);
     if (e.detail.folder != undefined) {
       this._breadcrumbItem.push({
         text: e.detail.name,
@@ -355,7 +395,6 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
         breadcrumbItem: this._breadcrumbItem
       });
     } else {
-      console.log(e.detail);
       this.setState({
         dialogFileStatus: true,
         dialogFile: e.detail,
@@ -367,8 +406,8 @@ export default class OneDriveFinder extends React.Component<IOneDriveFinderProps
     return graphData.id;
   }
 
-  private getOneDriveRootFolderID = async (key) => {
+  private getOneDriveRootFolderID = async (ItemId) => {
-    let graphData: any = await this.getGraphContent("https://graph.microsoft.com/v1.0/me/drive/items/" + key + "?$select=id");
+    let graphData: any = await this.getGraphContent("https://graph.microsoft.com/v1.0/me/drive/items/" + ItemId + "?$select=id");
     return graphData.id;
   }