SPFX sample is confusing

[smolattack]

Sample

https://github.com/pnp/mgt-samples/tree/main/samples/app/sp-webpart

Author(s)

@gavinbarron @sebastienlevert

What happened?

The author for this sample does not seem to be listed in the ReadMe.md file

It is quite ironic that an article titled disambiguation has incomplete information and links to a very confusing sample.

https://github.com/pnp/mgt-samples/blob/fab3c392c1411ba4436948f4e64301deb8c4e104/samples/app/sp-webpart/src/webparts/mgtDemo/components/MgtDemo.tsx#L6C1-L7

1. Confusion

• Comments and code are mismatched https://github.com/pnp/mgt-samples/blob/fab3c392c1411ba4436948f4e64301deb8c4e104/samples/app/sp-webpart/src/webparts/mgtDemo/components/MgtDemo.tsx#L5-L7 Either specify one way of using/importing a package or give a reason why there are multiple ways of doing so and what would be appropriate circumstances to use one over the other. Yes, the comments continue on to provide information about disambiguation but this sample is linked to by an article specifically about disambiguation. This sample should help those that want to use disambiguation. You can have another sample without disambiguation. At time of writing, the following page has an important note https://learn.microsoft.com/en-us/graph/toolkit/get-started/mgt-spfx#installation

  If you're building on Microsoft Graph Toolkit v3.0.0 or higher, we recommend that you consider using Disambiguation for your SharePoint Framework web parts. Anyone new to the Graph toolkit would most likely use the latest version so it seems disambiguation is the recommended way forward. I see little reason to have a sample that is not entirely dedicated to disambiguation. Just create another one if you want to demonstrate other ways of working with the toolkit.

• https://github.com/pnp/mgt-samples/blob/fab3c392c1411ba4436948f4e64301deb8c4e104/samples/app/sp-webpart/src/webparts/mgtDemo/components/MgtDemo.tsx#L19-L20 The actual code does not use either of the paths mentioned at the top of the comments. So do we import from @microsoft/mgt-react/dist/es6/generated/react or @microsoft/mgt-react/dist/es6/index?

2. Grammar https://github.com/pnp/mgt-samples/blob/fab3c392c1411ba4436948f4e64301deb8c4e104/samples/app/sp-webpart/src/webparts/mgtDemo/components/MgtDemo.tsx#L9C1-L9C1

   If you wish to make used of element disambiguation you should:

We don't want to be spend all this time diagnosing issues about the wrong sample, do we?

Or maybe don't ask rhetorical questions in your instructions to begin with?

Steps to reproduce

1. 2. 3.

Expected behavior

Sample about disambiguation to have a single focus. How should someone using the latest version of an SPFx webpart import and use React graph toolkit components?

Developer environment

Windows

Browsers

• [ ] Internet Explorer
• [ ] Microsoft Edge
• [ ] Google Chrome
• [ ] FireFox
• [ ] Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [X] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

No response

[sebastienlevert]

Thanks for reporting the issue @smolattack! Some of these issues are valid and should be fixed. I'll send a PR that will fix some of them.

Here are a couple of comments:

1. This is a miss when we moved to disambiguation. It absolutely should not refer to this but to the @microsoft/mgt-react package. This will be easier and fully take advantage of our disambiguation features.
2. I'll be fixing those typos, thanks for reporting!