From ffef72533d0086dbd599604daf8ca1f23bd5a649 Mon Sep 17 00:00:00 2001 From: aaclage Date: Fri, 21 May 2021 00:20:02 +0200 Subject: [PATCH] Update OneDrive Finder to MGT 2.2.0 --- .../react-onedrive-finder/Assets/sample.json | 2 +- samples/react-onedrive-finder/README.md | 14 +++-- samples/react-onedrive-finder/package.json | 4 +- .../components/Dialog/DialogFile.tsx | 28 ++++----- .../components/Dialog/IDialogFileProps.ts | 3 +- .../components/OneDriveFinder.module.scss | 6 +- .../components/OneDriveFinder.tsx | 57 ++++++++++++++++--- 7 files changed, 80 insertions(+), 34 deletions(-) diff --git a/samples/react-onedrive-finder/Assets/sample.json b/samples/react-onedrive-finder/Assets/sample.json index 27dbfa7b4..a921eb690 100644 --- a/samples/react-onedrive-finder/Assets/sample.json +++ b/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" diff --git a/samples/react-onedrive-finder/README.md b/samples/react-onedrive-finder/README.md index eef43680d..bbcf3b648 100644 --- a/samples/react-onedrive-finder/README.md +++ b/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 -- **[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. +- Change theme of control and Localization +- Caching refresh +- **[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. diff --git a/samples/react-onedrive-finder/package.json b/samples/react-onedrive-finder/package.json index 7c219d689..5772372b3 100644 --- a/samples/react-onedrive-finder/package.json +++ b/samples/react-onedrive-finder/package.json @@ -12,8 +12,8 @@ "test": "gulp test" }, "dependencies": { - "@microsoft/mgt": "^2.2.0-next.file.0e80deb", - "@microsoft/mgt-react": "^2.2.0-next.file.0e80deb", + "@microsoft/mgt": "^2.2.0", + "@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", diff --git a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx b/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx index 3882a1788..ecf898c69 100644 --- a/samples/react-onedrive-finder/src/webparts/oneDriveFinder/components/Dialog/DialogFile.tsx +++ b/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 { File,ViewType } from '@microsoft/mgt-react'; +import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { File, ViewType, Person, PersonViewType } from '@microsoft/mgt-react'; export function DialogFile(props: IDialogFileProps) { - let _queryString= ""; - const { open, fileItem, onClose } = props; + let _queryString = ""; + 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) - { - _queryString = "/drives/"+fileItem.parentReference.driveId +"/items/"+ fileItem.id; + if (fileItem != null) { + _queryString = "/drives/" + fileItem.parentReference.driveId + "/items/" + fileItem.id; + } - + return (