Merge branch 'main' into shweaver/mgt-spinner

shweaver-MSFT · web-flow · commit 623ba7e905bc · 2020-09-08T10:32:40.000-07:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,5 +10,5 @@
     "semibold",
     "xmlns"
   ],
-  "tslint.configFile": "./config/tslint.json"
+"tslint.configFile": "./config/tslint.json"
 }
diff --git a/packages/mgt-element/src/IBatch.ts b/packages/mgt-element/src/IBatch.ts
@@ -38,6 +38,12 @@ export class BatchResponse {
    * @memberof BatchResponse
    */
   public content: any;
+  /**
+   * The header of the response
+   * @type {*}
+   * @memberof BatchResponse
+   */
+  public headers: string[];
 }
 
 /**
diff --git a/packages/mgt/src/components/mgt-login/mgt-login.ts b/packages/mgt/src/components/mgt-login/mgt-login.ts
@@ -178,6 +178,8 @@ export class MgtLogin extends MgtTemplatedComponent {
         if (this.userDetails.personImage) {
           this._image = this.userDetails.personImage;
         }
+
+        this.fireCustomEvent('loginCompleted');
       } else {
         this.userDetails = null;
       }
diff --git a/packages/mgt/src/graph/graph.photos.ts b/packages/mgt/src/graph/graph.photos.ts
@@ -29,7 +29,7 @@ const cacheSchema: CacheSchema = {
 /**
  * photo object stored in cache
  */
-interface CachePhoto extends CacheItem {
+export interface CachePhoto extends CacheItem {
   /**
    * user tag associated with photo
    */
@@ -79,8 +79,7 @@ export async function getPhotoForResource(graph: IGraph, resource: string, scope
     if (!response.ok) {
       return null;
     }
-
-    const eTag = response.headers.get('ETag');
+    const eTag = response.headers.get('eTag');
     const blob = await blobToBase64(await response.blob());
     return { eTag, photo: blob };
   } catch (e) {
@@ -121,15 +120,32 @@ export async function getContactPhoto(graph: IGraph, contactId: string): Promise
 export async function getUserPhoto(graph: IGraph, userId: string): Promise<string> {
   let cache: CacheStore<CachePhoto>;
   let photoDetails: CachePhoto;
+
   if (photosCacheEnabled()) {
     cache = CacheService.getCache<CachePhoto>(cacheSchema, userStore);
     photoDetails = await cache.getValue(userId);
     if (photoDetails && getPhotoInvalidationTime() > Date.now() - photoDetails.timeCached) {
       return photoDetails.photo;
+    } else if (photoDetails) {
+      // there is a photo in the cache, but it's stale
+      try {
+        const response = await graph.api(`users/${userId}/photo`).get();
+        if (
+          response &&
+          (response['@odata.mediaEtag'] !== photoDetails.eTag ||
+            (response['@odata.mediaEtag'] === null && response.eTag === null))
+        ) {
+          // set photoDetails to null so that photo gets pulled from the graph later
+          photoDetails = null;
+        }
+      } catch {
+        return null;
+      }
     }
   }
 
-  photoDetails = await getPhotoForResource(graph, `users/${userId}`, ['user.readbasic.all']);
+  // if there is a photo in the cache, we got here because it was stale
+  photoDetails = photoDetails || (await getPhotoForResource(graph, `users/${userId}`, ['user.readbasic.all']));
   if (photosCacheEnabled() && photoDetails) {
     cache.putValue(userId, photoDetails);
   }
@@ -152,7 +168,20 @@ export async function myPhoto(graph: IGraph): Promise<string> {
     }
   }
 
-  photoDetails = await getPhotoForResource(graph, 'me', ['user.read']);
+  try {
+    const response = await graph.api(`me/photo`).get();
+    if (
+      response &&
+      (response['@odata.mediaEtag'] !== photoDetails.eTag ||
+        (response['@odata.mediaEtag'] === null && response.eTag === null))
+    ) {
+      photoDetails = null;
+    }
+  } catch {
+    return null;
+  }
+
+  photoDetails = photoDetails || (await getPhotoForResource(graph, 'me', ['user.read']));
   if (photosCacheEnabled()) {
     cache.putValue('me', photoDetails || {});
   }
diff --git a/packages/mgt/src/graph/graph.user.ts b/packages/mgt/src/graph/graph.user.ts
@@ -15,7 +15,8 @@ import {
   getPhotoFromCache,
   getPhotoInvalidationTime,
   photosCacheEnabled,
-  storePhotoInCache
+  storePhotoInCache,
+  CachePhoto
 } from './graph.photos';
 import { IDynamicPerson } from './types';
 
@@ -114,6 +115,10 @@ export async function getUserWithPhoto(graph: IGraph, userId?: string): Promise<
   let cache: CacheStore<CacheUser>;
   let photo = null;
   let user: IDynamicPerson;
+  let cachedPhoto: CachePhoto;
+  const resource = userId ? `users/${userId}` : 'me';
+  const scopes = userId ? ['user.readbasic.all'] : ['user.read'];
+
   // attempt to get user and photo from cache if enabled
   if (usersCacheEnabled()) {
     cache = CacheService.getCache<CacheUser>(cacheSchema, userStore);
@@ -123,11 +128,21 @@ export async function getUserWithPhoto(graph: IGraph, userId?: string): Promise<
     }
   }
   if (photosCacheEnabled()) {
-    const cachedPhoto = await getPhotoFromCache(userId || 'me', 'users');
+    cachedPhoto = await getPhotoFromCache(userId || 'me', 'users');
     if (cachedPhoto && getPhotoInvalidationTime() > Date.now() - cachedPhoto.timeCached) {
       photo = cachedPhoto.photo;
+    } else if (cachedPhoto) {
+      try {
+        const response = await graph.api(`${resource}/photo`).get();
+        if (response && response['@odata.mediaEtag'] && response['@odata.mediaEtag'] === cachedPhoto.eTag) {
+          // put current image into the cache to update the timestamp since etag is the same
+          storePhotoInCache(userId || 'me', 'users', cachedPhoto);
+          photo = cachedPhoto.photo;
+        }
+      } catch (e) {}
     }
   }
+
   if (!photo && !user) {
     // batch calls
     const batch = graph.createBatch();
@@ -139,8 +154,17 @@ export async function getUserWithPhoto(graph: IGraph, userId?: string): Promise<
       batch.get('photo', 'me/photo/$value', ['user.read']);
     }
     const response = await batch.executeAll();
+    const eTag = response.get('photo').headers['ETag'];
     photo = response.get('photo').content;
     user = response.get('user').content;
+
+    // store user & photo in their respective cache
+    if (usersCacheEnabled()) {
+      cache.putValue(userId || 'me', { user: JSON.stringify(user) });
+    }
+    if (photosCacheEnabled()) {
+      storePhotoInCache(userId || 'me', 'users', { eTag, photo: photo });
+    }
   } else if (!photo) {
     // get photo from graph
     const resource = userId ? `users/${userId}` : 'me';
@@ -165,9 +189,9 @@ export async function getUserWithPhoto(graph: IGraph, userId?: string): Promise<
           .get();
     if (response) {
       if (usersCacheEnabled()) {
-        cache.putValue(userId || 'me', { user: JSON.stringify(response.content) });
+        cache.putValue(userId || 'me', { user: JSON.stringify(response) });
       }
-      user = response.content;
+      user = response;
     }
   }
   person = user;
diff --git a/packages/mgt/src/utils/Batch.ts b/packages/mgt/src/utils/Batch.ts
@@ -164,6 +164,7 @@ export class Batch implements IBatch {
 
       response.id = request.id;
       response.index = request.index;
+      response.headers = r.headers;
 
       if (r.status !== 200) {
         if (r.status === 429) {
diff --git a/samples/examples/login-popup.html b/samples/examples/login-popup.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<script type="module" src="../../packages/mgt/dist/es6/index.js"></script>
+</head>
+
+<body>
+	<!-- <mgt-msal-provider client-id="af4ad92c-e141-49ac-9d86-23af45007101"></mgt-msal-provider> -->
+
+	<mgt-login></mgt-login>
+
+	<div id="loginStatus" style="padding-top: 20px">
+	</div>
+
+	<script type="module">
+		import { Providers, ProviderState, MsalProvider, LoginType } from '../../packages/mgt/dist/es6/index.js';
+
+		Providers.globalProvider = new MsalProvider({
+			clientId: 'af4ad92c-e141-49ac-9d86-23af45007101',
+			loginType: LoginType.Popup
+		});
+
+		document.querySelector('mgt-login').addEventListener('loginCompleted', e => {
+			console.log(e);
+			document.getElementById('loginStatus').innerText = "Login completed successfully";
+		});
+	</script>
+
+</html>
diff --git a/samples/examples/login-redirect-nopopup.html b/samples/examples/login-redirect-nopopup.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<script type="module" src="../../packages/mgt/dist/es6/index.js"></script>
+</head>
+
+<body>
+	<mgt-msal-provider client-id="af4ad92c-e141-49ac-9d86-23af45007101"></mgt-msal-provider>
+
+	<mgt-login></mgt-login>
+
+	<div id="loginStatus" style="padding-top: 20px">
+	</div>
+
+	<script type="module">
+		import { Providers, ProviderState } from '../../packages/mgt/dist/es6/index.js';
+
+		document.querySelector('mgt-login').addEventListener('loginCompleted', e => {
+			console.log(e);
+			document.getElementById('loginStatus').innerText = "Login completed successfully";
+		});
+	</script>
+
+</html>

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,5 @@`
`10`	`10`	`"semibold",`
`11`	`11`	`"xmlns"`
`12`	`12`	`],`
`13`		`- "tslint.configFile": "./config/tslint.json"`
	`13`	`+"tslint.configFile": "./config/tslint.json"`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -178,6 +178,8 @@ export class MgtLogin extends MgtTemplatedComponent {`
`178`	`178`	`if (this.userDetails.personImage) {`
`179`	`179`	`this._image = this.userDetails.personImage;`
`180`	`180`	`}`
	`181`	`+`
	`182`	`+ this.fireCustomEvent('loginCompleted');`
`181`	`183`	`} else {`
`182`	`184`	`this.userDetails = null;`
`183`	`185`	`}`