Merge pull request SharePoint#9409 from andrewconnell/content-update/spembedded

♻️ fix typos & markdown issues for SPEmbedded modules

Author: andrewconnell

docs/embedded/mslearn/m01-05-hol.md

@@ -117,7 +117,7 @@ Add the two new permissions to the existing `"resourceAppId": "00000003-0000-000
 
 ### Grant admin consent to the new permissions
 
-Some of the permissions require admin consent. Select 88API Permissions88 in the left-hand navigation, scroll to the bottom of the page, and select the link **Enterprise applications**.
+Some of the permissions require admin consent. Select **API Permissions** in the left-hand navigation, scroll to the bottom of the page, and select the link **Enterprise applications**.
 
 On the Permissions page, select **Grant admin consent for Contoso**. If prompted to sign-in, use the same **Work and School** account you used to sign-in to the Microsoft Entra ID admin center. On the **Permissions requested** page, select **Accept** to grant admin consent to the two pairs of permissions: `FileStorageContainer.Selected` for Microsoft Graph and `Container.Selected` for SharePoint. The two pairs represent the application & delegated options for each of the two permissions.
 
@@ -198,7 +198,7 @@ With the latest **SharePoint Online PowerShell module** installed, the next step
 Update the following values in the following PowerShell script, then execute the script:
 
 - **`{{SPO_ADMIN_URL}}`**: This is the URL of your SharePoint Online admin center. You can get this by signing into the `[https://portal.microsoft.com](https://portal.microsoft.com)` with the **Work and School** of your tenant’s admin account, select **Show All** at the bottom of the left-hand navigation, then select **Admin Centers > SharePoint**. Copy the URL of the SharePoint admin center and use this value. For example, if your tenant ID is **Contoso123**, your admin url would be `https://contoso123-admin.sharepoint.com`.
-- `**{{CONTAINER_TYPE_NAME}}**`: Pick a name for your new Container Type. For example, use `FirstContainerType`.
+- **`{{CONTAINER_TYPE_NAME}}`**: Pick a name for your new Container Type. For example, use `FirstContainerType`.
 - **`{{AZURE_ENTRA_APP_ID}}`:** Set this to the value of the Microsoft Entra ID app ID, also known as the "client ID", you created previously. This value should be in your local text file.
 
 ```powershell

docs/embedded/mslearn/m02-03-hol.md

@@ -77,6 +77,12 @@ Let’s start by creating the front-end part of the project:
 
 From a command line, navigate to the folder where you created your project and execute the following command:
 
+```console
+npx create-react-app my-first-spe-app --template typescript
+```
+
+From the command line, move into the folder **my-first-spe-app** created by the previous command and execute the following command:
+
 ```console
 npm install @azure/msal-browser @fluentui/react-components @fluentui/react-icons @microsoft/mgt-react @microsoft/mgt-element @microsoft/mgt-msal2-provider -SE
 ```
@@ -104,7 +110,7 @@ This command will install the NPM packages:
 - **[@microsoft/microsoft-graph-client](https://www.npmjs.com/package/@microsoft/microsoft-graph-client)**: Microsoft Graph JavaScript SDK.
 - **[isomorphic-fetch](https://www.npmjs.com/package/isomorphic-fetch)**: Polyfill that adds the browser `fetch` API as a global so it’s API is consistent between the client & server.
 - **[jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)**: Implementation of JSON Web Tokens.
-- [**jwks-rsa**](https://www.npmjs.com/package/jwks-rsa): Library to retrieve signing keys from a JSON Web Key Set (JWKS) endpoint.
+- **[jwks-rsa](https://www.npmjs.com/package/jwks-rsa)**: Library to retrieve signing keys from a JSON Web Key Set (JWKS) endpoint.
 
 Add a TypeScript compiler configuration for the server-side project:
 
@@ -216,8 +222,8 @@ export const GRAPH_SITES_READ_ALL = 'Sites.Read.All';
 export const GRAPH_OPENID_CONNECT_BASIC = ["openid", "profile", "offline_access"];
 
 // SharePoint Embedded scopes
-export const SPREPOSERVICES_CONTAINER_MANAGE= 'Container.Manage';
-export const SPREPOSERVICES_FILESTORAGECONTAINER_SELECTED= 'FileStorageContainer.Selected';
+export const SPEMBEDDED_CONTAINER_MANAGE= 'Container.Manage';
+export const SPEMBEDDED_FILESTORAGECONTAINER_SELECTED= 'FileStorageContainer.Selected';
 ```
 
 Create a cop of this file for the API server. Save the file to the following ___location in the project: **./server/common/scopes.ts**.

docs/embedded/mslearn/m02-05-hol.md

@@ -168,13 +168,11 @@ Stop the server by pressing <kbd>CTRL</kbd> + <kbd>C</kbd> in the console.
 
 With the basic project setup and configured to support user authentication, let’s now add support to list and select Containers in your tenant’s partition.
 
-Container management is a privileged operation that requires an access token that must be obtained server side
-
-Let’s start by first creating the server-side API parts to support the React app.
+Container management is a privileged operation that requires an access token that must be obtained server side. Let’s start by first creating the server-side API parts to support the React app.
 
 ### Add utility method to retrieve an OBO token to call Microsoft Graph
 
-We first need is a utility file to obtain a token using the OAuth2 On-Behalf-Of flow using our existing credential.
+We first need a utility file to obtain a token using the OAuth2 On-Behalf-Of flow using our existing credential.
 
 Create a new file **./server/auth.ts** and add the following code to it:
 
@@ -336,7 +334,7 @@ import * as Constants from './../common/constants';
 import * as Scopes from './../common/scopes';
 import { IContainer } from './../common/IContainer';
 
-export default class SRSCODENAME {
+export default class SpEmbedded {
 }
 ```
 
@@ -430,7 +428,7 @@ import type {
 import { IContainer } from "./../common/IContainer";
 import SpEmbedded from '../services/spembedded';
 
-const SpEmbedded = new SpEmbedded();
+const spe = new SpEmbedded();
 
 const useStyles = makeStyles({
   root: {
@@ -488,15 +486,24 @@ Next, add the following React hook after `// BOOKMARK 1` to get all Containers w
 ```typescript
 useEffect(() => {
   (async () => {
-    const containers = await SpEmbedded.listContainers();
+    const containers = await spe.listContainers();
     if (containers) {
       setContainers(containers);
     }
   })();
 }, []);
 ```
 
-Update the rendering by adding the following to the `return()` method after the `// BOOKMARK 3` code. This will create a `DropDown` control and a a placeholder where we’ll add a list of the contents in the selected Container:
+Create an event handler after the React hook implementation you just added that will fire when a user selects a Container from the dropdown control we'll add to our UX:
+
+```typescript
+const onContainerDropdownChange = (event: SelectionEvents, data: OptionOnSelectData) => {
+  const selected = containers.find((container) => container.id === data.optionValue);
+  setSelectedContainer(selected);
+};
+```
+
+Update the rendering by adding the following to the `return()` method after the `// BOOKMARK 3` code. This will create a `DropDown` control and a placeholder where we’ll add a list of the contents in the selected Container:
 
 ```tsx
 <div className={styles.root}>
@@ -629,7 +636,7 @@ export const createContainer = async (req: Request, res: Response) => {
 }
 ```
 
-The last step is to crate the Microsoft Graph client and submit the request to create a new Container that have a specific `ContainerTypeId` set. Add the following code immediacy before the function’s closing bracket:
+The last step is to create the Microsoft Graph client and submit the request to create a new Container set to a specific `ContainerTypeId`. Add the following code immediacy before the function’s closing bracket:
 
 ```typescript
 try {
@@ -654,7 +661,7 @@ try {
 }
 ```
 
-Add this new endpoint to our restify server. Locate and open the **./server/index.ts** file, add a single import statement to the end of the existing imports, and add a listener for HTTP GET requests to the `/api/createContainers` endpoint:
+Add this new endpoint to our restify server. Locate and open the **./server/index.ts** file, add a single import statement to the end of the existing imports, and add a listener for HTTP POST requests to the `/api/createContainers` endpoint:
 
 ```typescript
 import { createContainer } from "./createContainer";
@@ -738,7 +745,7 @@ const handleDescriptionChange: InputProps["onChange"] = (event: React.ChangeEven
 
 const onContainerCreateClick = async (event: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
   setCreatingContainer(true);
-  const newContainer = await SpEmbedded.createContainer(name, description);
+  const newContainer = await spe.createContainer(name, description);
 
   if (newContainer) {
     setName('');

docs/embedded/mslearn/m02-07-hol.md

@@ -117,7 +117,7 @@ export default Files;
 > [!NOTE]
 > Notice the `// BOOKMARK #` comments in the component. We’ll use these to ensure you’re adding code in the correct places.
 
-### Display a table of the selected Container contents
+### Display a list of the selected Container contents
 
 The first thing we need to address is to display the contents of the selected Container. To do this, we’ll use the `DataGrid` component from the Fluent UI React library.