honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Samples reviewed and prepared for merge

This commit is contained in:
Paolo Pialorsi 2022-11-08 19:11:58 +01:00
parent 913dbd56aa
commit 4806c9a057
15 changed files with 334 additions and 4350 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
samples/react-graph-auto-batching/.gitignore vendored
View File

@ -31,10 +31,7 @@ obj
# Styles Generated Code
*.scss.ts
<<<<<<< HEAD
=======
# .CER Certificates
*.cer
# .PEM Certificates
*.pem
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d

47
samples/react-graph-auto-batching/README.md
View File

@ -1,8 +1,4 @@
<<<<<<< HEAD
# react-graph-auto-batching
=======
# Graph auto batching
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
## Summary
@ -18,11 +14,6 @@ Finally, let me know if You would like to see this auto batcher in some library
You may ask why I used AadHttpClient instead of MSGraphClient. AadHttpClient shares more similarity with a http client based on fetch api, this means it will be easier to adopt this solution to an implementation outside of SPFx.
<<<<<<< HEAD
## Used SharePoint Framework Version
![version](https://img.shields.io/badge/version-1.13-green.svg)
=======
## Compatibility
@ -35,18 +26,12 @@ You may ask why I used AadHttpClient instead of MSGraphClient. AadHttpClient sha
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
## Applies to
- [SharePoint Framework](https://aka.ms/spfx)
- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
<<<<<<< HEAD
> Get your own free development tenant by subscribing to
=======
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
## Prerequisites
None
@ -55,11 +40,7 @@ None
Solution|Author(s)
--------|---------
<<<<<<< HEAD
react-graph-auto-batching | Marcin Wojciechowski [@mgwojciech](https://twitter.com/mgwojciech)
=======
react-graph-auto-batching | [Marcin Wojciechowski](https://github.com/mgwojciech) [@mgwojciech](https://twitter.com/mgwojciech)
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
## Version history
@ -67,29 +48,6 @@ Version|Date|Comments
-------|----|--------
1.0|February 3, 2022|Initial release
<<<<<<< HEAD
## 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
- Ensure that you are at the solution folder
- in the command-line run:
- **npm install**
- **gulp serve**
- Add Graph Auto Batching
To run tests
Clone this repository
- Ensure that you are at the solution folder
- in the command-line run:
- **npm install**
- **npx jest**
=======
## Minimal Path to Awesome
* Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-auto-batching) then unzip it)
@ -108,7 +66,6 @@ To run tests
* in the command line run:
* `npm install`
* `npx jest`
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
## Features
@ -129,9 +86,6 @@ This extension illustrates the following concepts:
- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
<<<<<<< HEAD
- You can find more on unit testing on my [Blog](https://mgwdevcom.wordpress.com)
=======
- You can find more on unit testing on my [Blog](https://mgwdevcom.wordpress.com)
@ -159,4 +113,3 @@ Finally, if you have an idea for improvement, [make a suggestion](https://github
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/react-graph-auto-batching" />
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d

2
samples/react-graph-auto-batching/assets/sample.json
View File

@ -3,7 +3,7 @@
"name": "pnp-sp-dev-spfx-web-parts-react-graph-auto-batching",
"title": "Graph auto batching",
"source": "pnp",
"shortDescription": "This same shows how to abstract batching graph requests",
"shortDescription": "This sample shows how to abstract batching graph requests",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-auto-batching",
"longDescription": [
"This sample shows how to abstract batching Graph requests"

7
samples/react-graph-auto-batching/config/config.json
View File

@ -7,24 +7,17 @@
{
"entrypoint": "./lib/webparts/graphAutoBatching/GraphAutoBatchingWebPart.js",
"manifest": "./src/webparts/graphAutoBatching/GraphAutoBatchingWebPart.manifest.json"
<<<<<<< HEAD
=======
},
{
"entrypoint": "./lib/adaptiveCardExtensions/profileCard/ProfileCardAdaptiveCardExtension.js",
"manifest": "./src/adaptiveCardExtensions/profileCard/ProfileCardAdaptiveCardExtension.manifest.json"
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
}
]
}
},
"externals": {},
"localizedResources": {
<<<<<<< HEAD
"GraphAutoBatchingWebPartStrings": "lib/webparts/graphAutoBatching/loc/{locale}.js"
=======
"GraphAutoBatchingWebPartStrings": "lib/webparts/graphAutoBatching/loc/{locale}.js",
"ProfileCardAdaptiveCardExtensionStrings": "lib/adaptiveCardExtensions/profileCard/loc/{locale}.js"
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
}
}

3
samples/react-graph-auto-batching/gulpfile.js vendored
View File

@ -12,8 +12,6 @@ build.rig.getTasks = function () {
return result;
};
<<<<<<< HEAD
=======
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration.node = {
@ -28,6 +26,5 @@ build.configureWebpack.mergeConfig({
return generatedConfiguration;
}
});
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
build.initialize(require('gulp'));

4422
samples/react-graph-auto-batching/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
samples/react-graph-auto-batching/package.json
View File

@ -9,20 +9,6 @@
"test": "gulp test"
},
"dependencies": {
<<<<<<< HEAD
"react": "16.9.0",
"react-dom": "16.9.0",
"office-ui-fabric-react": "7.156.0",
"@microsoft/sp-core-library": "1.13.0-beta.17",
"@microsoft/sp-property-pane": "1.13.0-beta.17",
"@microsoft/sp-webpart-base": "1.13.0-beta.17",
"@microsoft/sp-lodash-subset": "1.13.0-beta.17",
"@microsoft/sp-office-ui-fabric-core": "1.13.0-beta.17"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
"@microsoft/sp-build-web": "1.13.0-beta.17",
=======
"@microsoft/sp-adaptive-card-extension-base": "1.13.0-beta.17",
"@microsoft/sp-core-library": "1.13.0-beta.17",
"@microsoft/sp-lodash-subset": "1.13.0-beta.17",
@ -35,8 +21,7 @@
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
"@microsoft/sp-build-web": "1.15.2",
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
"@microsoft/sp-build-web": "1.13.0-beta.17",
"@microsoft/sp-module-interfaces": "1.13.0-beta.17",
"@microsoft/sp-tslint-rules": "1.13.0-beta.17",
"@testing-library/react": "^12.1.2",
@ -45,22 +30,14 @@
"@types/react": "16.9.36",
"@types/react-dom": "16.9.8",
"@types/webpack-env": "1.13.1",
<<<<<<< HEAD
"ajv": "~5.2.2",
=======
"ajv": "~6.12.3",
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
"chai": "^4.3.6",
"gulp": "~4.0.2",
"jest": "^27.4.7",
"jest-environment-jsdom": "^27.4.6",
"jsdom": "^19.0.0",
<<<<<<< HEAD
"ts-jest": "^27.1.3"
=======
"ts-jest": "^27.1.3",
"xml-loader": "^1.2.1"
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
},
"jest": {
"transform": {

5
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/ProfileCardAdaptiveCardExtension.ts
View File

@ -1,7 +1,6 @@
import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
import { BaseAdaptiveCardExtension } from '@microsoft/sp-adaptive-card-extension-base';
import { CardView } from './cardView/CardView';
import { QuickView } from './quickView/QuickView';
import { ProfileCardPropertyPane } from './ProfileCardPropertyPane';
import { BatchGraphClient } from '../../dal/http/BatchGraphClient';
import { SPFxHttpClient } from '../../dal/http/SPFxHttpClient';
@ -22,7 +21,6 @@ export interface IProfileCardAdaptiveCardExtensionState {
}
const CARD_VIEW_REGISTRY_ID: string = 'ProfileCard_CARD_VIEW';
export const QUICK_VIEW_REGISTRY_ID: string = 'ProfileCard_QUICK_VIEW';
export default class ProfileCardAdaptiveCardExtension extends BaseAdaptiveCardExtension<
IProfileCardAdaptiveCardExtensionProps,
@ -33,7 +31,7 @@ export default class ProfileCardAdaptiveCardExtension extends BaseAdaptiveCardEx
public async onInit(): Promise<void> {
let client = await this.context.aadHttpClientFactory.getClient('https://graph.microsoft.com');
this.httpClient = new BatchGraphClient(new SPFxHttpClient(client));
let userQuery = this.properties.userId ? `/users/${this.properties.userId}` : "/me"
let userQuery = this.properties.userId ? `/users/${this.properties.userId}` : "/me";
const [userInfoRequest, userPhotoRequest, presenceInfo] = await Promise.all([this.httpClient.get(userQuery),
this.httpClient.get(userQuery+ "/photo/$value"),
this.httpClient.get(userQuery+ "/presence")]);
@ -46,7 +44,6 @@ export default class ProfileCardAdaptiveCardExtension extends BaseAdaptiveCardEx
};
this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
return Promise.resolve();
}

2
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/loc/en-us.js vendored
View File

@ -6,9 +6,7 @@ define([], function() {
"TitleFieldLabel": "Card Title",
"IconPropertyFieldLabel": "Card Icon",
"Title": "Adaptive Card Extension",
"SubTitle": "Quick View",
"Description": "Create your SPFx Adaptive Card Extension solution!",
"PrimaryText": "SPFx Adaptive Card Extension",
"QuickViewButton": "Quick View"
}
});

2
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/loc/mystring.d.ts vendored
View File

@ -5,10 +5,8 @@ declare interface IProfileCardAdaptiveCardExtensionStrings {
TitleFieldLabel: string;
IconPropertyFieldLabel: string;
Title: string;
SubTitle: string;
Description: string;
PrimaryText: string;
QuickViewButton: string;
}
declare module 'ProfileCardAdaptiveCardExtensionStrings' {

27
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/quickView/QuickView.ts
View File

@ -1,27 +0,0 @@
import { ISPFxAdaptiveCard, BaseAdaptiveCardView } from '@microsoft/sp-adaptive-card-extension-base';
import * as strings from 'ProfileCardAdaptiveCardExtensionStrings';
import { IProfileCardAdaptiveCardExtensionProps, IProfileCardAdaptiveCardExtensionState } from '../ProfileCardAdaptiveCardExtension';
export interface IQuickViewData {
subTitle: string;
title: string;
description: string;
}
export class QuickView extends BaseAdaptiveCardView<
IProfileCardAdaptiveCardExtensionProps,
IProfileCardAdaptiveCardExtensionState,
IQuickViewData
> {
public get data(): IQuickViewData {
return {
subTitle: strings.SubTitle,
title: strings.Title,
description: this.properties.description
};
}
public get template(): ISPFxAdaptiveCard {
return require('./template/QuickViewTemplate.json');
}
}

33
samples/react-graph-auto-batching/src/adaptiveCardExtensions/profileCard/quickView/template/QuickViewTemplate.json
View File

@ -1,33 +0,0 @@
{
"schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "${title}"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "${subTitle}",
"wrap": true
}
]
}
]
},
{
"type": "TextBlock",
"text": "${description}",
"wrap": true
}
]
}

6
samples/react-graph-auto-batching/src/webparts/graphAutoBatching/components/UserCard.tsx
View File

@ -20,11 +20,7 @@ export function UserCard(props: IUserCardProps){
setUser({
...userResult,
presence: presence.availability,
<<<<<<< HEAD
photo: photo.replace("\"","").replace("\"","")
=======
photo: `data:image/png;base64,${photo.replace("\"","").replace("\"","")}`
>>>>>>> 8b2829c8e2260f80fe22aee2a1ccfdd8745b853d
});
setLoading(false);
};
@ -44,7 +40,7 @@ export function UserCard(props: IUserCardProps){
tertiaryText={user.presence}
presence={StringUtilities.getPresence(user.presence)}
size={PersonaSize.size100}
imageAlt="Annie Lindqvist, status is blocked"
imageAlt={user.displayName}
/>
);
}

50
samples/react-react-query/assets/sample.json Normal file
View File

@ -0,0 +1,50 @@
[
{
"name": "pnp-sp-dev-spfx-web-parts-react-react-query",
"title": "React Query Microsoft Graph",
"source": "pnp",
"shortDescription": "This sample shows how you can query Microsoft Graph from React in SharePoint Framework",
"url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-auto-batching",
"longDescription": [
"This sample shows how you can query Microsoft Graph from React in SharePoint Framework"
],
"creationDateTime": "2022-10-18",
"updateDateTime": "2022-10-18",
"products": [
"SharePoint"
],
"metadata": [
{
"key": "CLIENT-SIDE-DEV",
"value": "React"
},
{
"key": "SPFX-VERSION",
"value": "1.15.2"
}
],
"thumbnails": [
{
"type": "image",
"order": 100,
"url": "https://github.com/pnp/sp-dev-fx-webparts/raw/gh-pages/img/_nopreview.png",
"alt": "No preview available"
}
],
"authors": [
{
"gitHubAccount": "mgwojciech",
"pictureUrl": "https://github.com/mgwojciech.png",
"name": "Marcin Wojciechowski",
"company": "Valo"
}
],
"references": [
{
"name": "Build your first SharePoint client-side web part",
"description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
"url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
}
]
}
]

50
samples/react-react-query/package-lock.json generated
View File

@ -2312,15 +2312,6 @@
}
}
},
"@microsoft/microsoft-graph-clientV3": {
"version": "npm:@microsoft/microsoft-graph-client@3.0.2",
"resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz",
"integrity": "sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==",
"requires": {
"@babel/runtime": "^7.12.5",
"tslib": "^2.2.0"
}
},
"@microsoft/office-ui-fabric-react-bundle": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/@microsoft/office-ui-fabric-react-bundle/-/office-ui-fabric-react-bundle-1.15.2.tgz",
@ -2927,6 +2918,32 @@
"adal-angular": "1.0.16",
"msalLegacy": "npm:msal@1.4.12",
"tslib": "2.3.1"
},
"dependencies": {
"@microsoft/microsoft-graph-clientV3": {
"version": "npm:@microsoft/microsoft-graph-client@3.0.2",
"resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz",
"integrity": "sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==",
"requires": {
"@babel/runtime": "^7.12.5",
"tslib": "^2.2.0"
}
},
"msalLegacy": {
"version": "npm:msal@1.4.12",
"resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
"integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
"requires": {
"tslib": "^1.9.3"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
}
}
},
"@microsoft/sp-image-helper": {
@ -16527,21 +16544,6 @@
}
}
},
"msalLegacy": {
"version": "npm:msal@1.4.12",
"resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
"integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
"requires": {
"tslib": "^1.9.3"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"multicast-dns": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",