From cead35f5db41ba66146e4a73d6a9e264e5a48c94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Markus=20M=C3=B6ller?= Date: Sat, 8 Feb 2020 11:50:01 +0100 Subject: [PATCH] Initial commit (#1130) Co-authored-by: Mikael Svenson Co-authored-by: Laura Kokkarinen <41330990+LauraKokkarinen@users.noreply.github.com> --- .../react-outlook-copy2teams/.editorconfig | 25 + samples/react-outlook-copy2teams/.gitignore | 32 + samples/react-outlook-copy2teams/.yo-rc.json | 13 + samples/react-outlook-copy2teams/README.md | 72 + .../config/config.json | 18 + .../config/copy-assets.json | 4 + .../config/deploy-azure-storage.json | 7 + .../config/package-solution.json | 40 + .../config/serve.json | 10 + .../config/write-manifests.json | 4 + samples/react-outlook-copy2teams/gulpfile.js | 7 + ...4cbd-b4e1-2f4140c1667a_outlookManifest.xml | 91 + .../package-lock.json | 16977 ++++++++++++++++ samples/react-outlook-copy2teams/package.json | 43 + .../src/controller/GraphController.ts | 221 + .../src/controller/Utilities.ts | 8 + samples/react-outlook-copy2teams/src/index.ts | 1 + .../src/model/IFolder.ts | 7 + .../src/model/IMail.ts | 4 + .../Outlook2SharePointWebPart.manifest.json | 27 + .../Outlook2SharePointWebPart.ts | 69 + .../components/Folder.module.scss | 15 + .../outlook2SharePoint/components/Folder.tsx | 23 + .../components/Groups.module.scss | 22 + .../outlook2SharePoint/components/Groups.tsx | 161 + .../components/IFolderProps.ts | 6 + .../components/IGroupsProps.ts | 10 + .../components/IGroupsState.ts | 8 + .../components/IOneDriveProps.ts | 9 + .../components/IOneDriveState.ts | 8 + .../components/IOutlook2SharePointProps.ts | 7 + .../components/IOutlook2SharePointState.ts | 12 + .../components/ITeamsProps.ts | 10 + .../components/ITeamsState.ts | 8 + .../components/OneDrive.tsx | 122 + .../components/Outlook2SharePoint.module.scss | 17 + .../components/Outlook2SharePoint.tsx | 175 + .../outlook2SharePoint/components/Teams.tsx | 161 + .../controls/Breadcrumb.module.scss | 28 + .../components/controls/Breadcrumb.tsx | 43 + .../components/controls/IBreadcrumbProps.ts | 8 + .../webparts/outlook2SharePoint/loc/en-us.js | 7 + .../outlook2SharePoint/loc/mystrings.d.ts | 10 + ...f545-1d02-4cbd-b4e1-2f4140c1667a_color.png | Bin 0 -> 3023 bytes ...45-1d02-4cbd-b4e1-2f4140c1667a_outline.png | Bin 0 -> 1429 bytes .../react-outlook-copy2teams/tsconfig.json | 38 + samples/react-outlook-copy2teams/tslint.json | 30 + 47 files changed, 18618 insertions(+) create mode 100644 samples/react-outlook-copy2teams/.editorconfig create mode 100644 samples/react-outlook-copy2teams/.gitignore create mode 100644 samples/react-outlook-copy2teams/.yo-rc.json create mode 100644 samples/react-outlook-copy2teams/README.md create mode 100644 samples/react-outlook-copy2teams/config/config.json create mode 100644 samples/react-outlook-copy2teams/config/copy-assets.json create mode 100644 samples/react-outlook-copy2teams/config/deploy-azure-storage.json create mode 100644 samples/react-outlook-copy2teams/config/package-solution.json create mode 100644 samples/react-outlook-copy2teams/config/serve.json create mode 100644 samples/react-outlook-copy2teams/config/write-manifests.json create mode 100644 samples/react-outlook-copy2teams/gulpfile.js create mode 100644 samples/react-outlook-copy2teams/officeAddin/7f1ef545-1d02-4cbd-b4e1-2f4140c1667a_outlookManifest.xml create mode 100644 samples/react-outlook-copy2teams/package-lock.json create mode 100644 samples/react-outlook-copy2teams/package.json create mode 100644 samples/react-outlook-copy2teams/src/controller/GraphController.ts create mode 100644 samples/react-outlook-copy2teams/src/controller/Utilities.ts create mode 100644 samples/react-outlook-copy2teams/src/index.ts create mode 100644 samples/react-outlook-copy2teams/src/model/IFolder.ts create mode 100644 samples/react-outlook-copy2teams/src/model/IMail.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/Outlook2SharePointWebPart.manifest.json create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/Outlook2SharePointWebPart.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/Folder.module.scss create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/Folder.tsx create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/Groups.module.scss create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/Groups.tsx create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/IFolderProps.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/IGroupsProps.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/IGroupsState.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/IOneDriveProps.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/IOneDriveState.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/IOutlook2SharePointProps.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/IOutlook2SharePointState.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/ITeamsProps.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/ITeamsState.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/OneDrive.tsx create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/Outlook2SharePoint.module.scss create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/Outlook2SharePoint.tsx create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/Teams.tsx create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/controls/Breadcrumb.module.scss create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/controls/Breadcrumb.tsx create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/components/controls/IBreadcrumbProps.ts create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/loc/en-us.js create mode 100644 samples/react-outlook-copy2teams/src/webparts/outlook2SharePoint/loc/mystrings.d.ts create mode 100644 samples/react-outlook-copy2teams/teams/7f1ef545-1d02-4cbd-b4e1-2f4140c1667a_color.png create mode 100644 samples/react-outlook-copy2teams/teams/7f1ef545-1d02-4cbd-b4e1-2f4140c1667a_outline.png create mode 100644 samples/react-outlook-copy2teams/tsconfig.json create mode 100644 samples/react-outlook-copy2teams/tslint.json diff --git a/samples/react-outlook-copy2teams/.editorconfig b/samples/react-outlook-copy2teams/.editorconfig new file mode 100644 index 000000000..8ffcdc4ec --- /dev/null +++ b/samples/react-outlook-copy2teams/.editorconfig @@ -0,0 +1,25 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] + +# change these settings to your own preference +indent_style = space +indent_size = 2 + +# we recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false + +[{package,bower}.json] +indent_style = space +indent_size = 2 \ No newline at end of file diff --git a/samples/react-outlook-copy2teams/.gitignore b/samples/react-outlook-copy2teams/.gitignore new file mode 100644 index 000000000..b19bbe123 --- /dev/null +++ b/samples/react-outlook-copy2teams/.gitignore @@ -0,0 +1,32 @@ +# Logs +logs +*.log +npm-debug.log* + +# Dependency directories +node_modules + +# Build generated files +dist +lib +solution +temp +*.sppkg + +# Coverage directory used by tools like istanbul +coverage + +# OSX +.DS_Store + +# Visual Studio files +.ntvs_analysis.dat +.vs +bin +obj + +# Resx Generated Code +*.resx.ts + +# Styles Generated Code +*.scss.ts diff --git a/samples/react-outlook-copy2teams/.yo-rc.json b/samples/react-outlook-copy2teams/.yo-rc.json new file mode 100644 index 000000000..ce2214bdc --- /dev/null +++ b/samples/react-outlook-copy2teams/.yo-rc.json @@ -0,0 +1,13 @@ +{ + "@microsoft/generator-sharepoint": { + "plusBeta": true, + "isCreatingSolution": true, + "environment": "spo", + "version": "1.10.0", + "libraryName": "outlook-2-sp-spfx", + "libraryId": "41e21307-ed8c-4409-b12f-9c575675bb37", + "packageManager": "npm", + "isDomainIsolated": false, + "componentType": "webpart" + } +} \ No newline at end of file diff --git a/samples/react-outlook-copy2teams/README.md b/samples/react-outlook-copy2teams/README.md new file mode 100644 index 000000000..82a81ca52 --- /dev/null +++ b/samples/react-outlook-copy2teams/README.md @@ -0,0 +1,72 @@ +## outlook-2-teams-spfx + + +## Summary +This SPFx Outlook Add-In lets you browse your OneDrive, joined Teams or Groups and select a folder to save your complete mail in there. +This sample shows you working with the current Office context and receive information on currently selected mail from there. +Furthermore it shows you how to retrieve a complete mail as a mimestream via Microsoft Graph and finally two file operations with Microsoft Graph as well: +* Writing normal files smaller 4MB +* Writing big files with an UploadSession when bigger than 4MB + +## outlook-2-teams-spfx in action +![WebPartInAction](https://mmsharepoint.files.wordpress.com/2020/01/addin_overall.png) + +A detailed functionality and technical description can be found in the [author's blog series](https://mmsharepoint.wordpress.com/2020/01/11/an-outlook-add-in-with-sharepoint-framework-spfx-introduction/) + +## Used SharePoint Framework Version + +![drop](https://img.shields.io/badge/drop-1.10.0-green.svg) + +## Applies to + +* [Tutorial for creating Outlook Web Access extension using SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial) + +## Solution + +Solution|Author(s) +--------|--------- +outlook-2-teams-spfx| Markus Moeller ([@moeller2_0](http://www.twitter.com/moeller2_0)) + +## Version history + +Version|Date|Comments +-------|----|-------- +1.0|February 05, 2020|Initial release + +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + +--- + +## Minimal Path to Awesome + +* Clone this repository +* in the command line run: + * restore dependencies: `npm install` + From here you can also follow the deployment steps from the official [Microsoft Tutorial](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/office-addins-tutorial#packaging-and-deploying-your-solution-to-sharepoint) + * build solution `gulp build --ship` + * bundle solution: `gulp bundle --ship` + * package solution: `gulp package-solution --ship` + * locate solution at `.\sharepoint\solution\outlook-2-sp-spfx.sppkg` + * upload it to your tenant app catalog + * Go to your Outlook Web Access and selct a mail + * Choose ... and "Get Add Ins" + * Choose My Add-ins from left menu + * Choose *Add from file... under the Custom add-ins + * Upload the manifest xml file from \officeAddin folder + * Click Install on the warning message to get your add-in available on the tenant + * Close the add-in window by clicking X on the top-right corner + * Activate again the context menu from [...] and choose "Copy to SharePoint" to activate the add-in in your inbox + +## Features + +This Outlook Add-In shows the following capabilities on top of the SharePoint Framework: + +* Select Office context and attributes of currently selected mail +* Use Microsoft Graph to retrieve joined Groups and Teams +* Use Microsoft Graph to retrieve folders and subfolders for OneDrive or Teams/Group drives +* Use Microsoft Graph to retrieve complete mail mimestream by given ID +* Use Microsoft Graph to save normal or big files (in size bigger 4MB) with different concepts + + diff --git a/samples/react-outlook-copy2teams/config/config.json b/samples/react-outlook-copy2teams/config/config.json new file mode 100644 index 000000000..40923ec13 --- /dev/null +++ b/samples/react-outlook-copy2teams/config/config.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json", + "version": "2.0", + "bundles": { + "outlook-2-share-point-web-part": { + "components": [ + { + "entrypoint": "./lib/webparts/outlook2SharePoint/Outlook2SharePointWebPart.js", + "manifest": "./src/webparts/outlook2SharePoint/Outlook2SharePointWebPart.manifest.json" + } + ] + } + }, + "externals": {}, + "localizedResources": { + "Outlook2SharePointWebPartStrings": "lib/webparts/outlook2SharePoint/loc/{locale}.js" + } +} diff --git a/samples/react-outlook-copy2teams/config/copy-assets.json b/samples/react-outlook-copy2teams/config/copy-assets.json new file mode 100644 index 000000000..3771fd04a --- /dev/null +++ b/samples/react-outlook-copy2teams/config/copy-assets.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json", + "deployCdnPath": "temp/deploy" +} diff --git a/samples/react-outlook-copy2teams/config/deploy-azure-storage.json b/samples/react-outlook-copy2teams/config/deploy-azure-storage.json new file mode 100644 index 000000000..a798b0d74 --- /dev/null +++ b/samples/react-outlook-copy2teams/config/deploy-azure-storage.json @@ -0,0 +1,7 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json", + "workingDir": "./temp/deploy/", + "account": "", + "container": "outlook-2-sp-spfx", + "accessKey": "" +} \ No newline at end of file diff --git a/samples/react-outlook-copy2teams/config/package-solution.json b/samples/react-outlook-copy2teams/config/package-solution.json new file mode 100644 index 000000000..da76919db --- /dev/null +++ b/samples/react-outlook-copy2teams/config/package-solution.json @@ -0,0 +1,40 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", + "solution": { + "name": "outlook-2-sp-spfx-client-side-solution", + "id": "41e21307-ed8c-4409-b12f-9c575675bb37", + "version": "1.0.0.0", + "includeClientSideAssets": true, + "skipFeatureDeployment": true, + "isDomainIsolated": false, + "webApiPermissionRequests": [ + { + "resource": "Microsoft Graph", + "scope": "Group.Read.All" + }, + { + "resource": "Windows Azure Active Directory", + "scope": "User.Read" + }, + { + "resource": "Microsoft Graph", + "scope": "Files.Read" + }, + { + "resource": "Microsoft Graph", + "scope": "Files.ReadWrite" + }, + { + "resource": "Microsoft Graph", + "scope": "Mail.Read" + }, + { + "resource": "Microsoft Graph", + "scope": "Sites.ReadWrite.All" + } + ] + }, + "paths": { + "zippedPackage": "solution/outlook-2-sp-spfx.sppkg" + } +} diff --git a/samples/react-outlook-copy2teams/config/serve.json b/samples/react-outlook-copy2teams/config/serve.json new file mode 100644 index 000000000..090cfe9e6 --- /dev/null +++ b/samples/react-outlook-copy2teams/config/serve.json @@ -0,0 +1,10 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json", + "port": 4321, + "https": true, + "initialPage": "https://localhost:5432/workbench", + "api": { + "port": 5432, + "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/" + } +} diff --git a/samples/react-outlook-copy2teams/config/write-manifests.json b/samples/react-outlook-copy2teams/config/write-manifests.json new file mode 100644 index 000000000..bad352605 --- /dev/null +++ b/samples/react-outlook-copy2teams/config/write-manifests.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json", + "cdnBasePath": "" +} \ No newline at end of file diff --git a/samples/react-outlook-copy2teams/gulpfile.js b/samples/react-outlook-copy2teams/gulpfile.js new file mode 100644 index 000000000..cafe79916 --- /dev/null +++ b/samples/react-outlook-copy2teams/gulpfile.js @@ -0,0 +1,7 @@ +'use strict'; + +const build = require('@microsoft/sp-build-web'); + +build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`); + +build.initialize(require('gulp')); diff --git a/samples/react-outlook-copy2teams/officeAddin/7f1ef545-1d02-4cbd-b4e1-2f4140c1667a_outlookManifest.xml b/samples/react-outlook-copy2teams/officeAddin/7f1ef545-1d02-4cbd-b4e1-2f4140c1667a_outlookManifest.xml new file mode 100644 index 000000000..586dea07b --- /dev/null +++ b/samples/react-outlook-copy2teams/officeAddin/7f1ef545-1d02-4cbd-b4e1-2f4140c1667a_outlookManifest.xml @@ -0,0 +1,91 @@ + + + 7f1ef545-1d02-4cbd-b4e1-2f4140c1667a + 1.0.0.0 + SPFx Provider + en-US + + + + + + + https://login.microsoftonline.com + https://login.windows.net + + + + + + + + + + + +
+ + + 250 + +
+ + ReadWriteMailbox + + + + false + + + + + + + + +