[mgt-person][mgt-people-picker] Photo for Person Type "Group"/ missing AD member (#1366)

Co-authored-by: Nikola Metulev <[email protected]>

Author: vogtn

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -748,11 +748,11 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    */
   protected renderSearchResults(people?: IDynamicPerson[]) {
     people = people || this._foundPeople;
-
+    let filteredPeople = people.filter(person => person.id);
     return html`
        <div class="people-list" @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>
          ${repeat(
-           people,
+           filteredPeople,
            person => person.id,
            person => {
              const listPersonClasses = {

packages/mgt-components/src/components/mgt-person/mgt-person.ts

@@ -9,7 +9,7 @@ import { Contact, Presence } from '@microsoft/microsoft-graph-types';
 import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
 import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
-import { getPersonImage } from '../../graph/graph.photos';
+import { getGroupImage, getPersonImage } from '../../graph/graph.photos';
 import { getUserPresence } from '../../graph/graph.presence';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
 import { findUsers, getMe, getUser } from '../../graph/graph.user';
@@ -963,7 +963,13 @@ export class MgtPerson extends MgtTemplatedComponent {
         !this.personImage &&
         !this._fetchedImage
       ) {
-        const image = await getPersonImage(graph, this.personDetails, MgtPerson.config.useContactApis);
+        this.personDetails;
+        let image;
+        if ('personType' in this.personDetails) {
+          image = await getPersonImage(graph, this.personDetails, MgtPerson.config.useContactApis);
+        } else {
+          image = await getGroupImage(graph, this.personDetails, MgtPerson.config.useContactApis);
+        }
         if (image) {
           this.personDetails.personImage = image;
           this._fetchedImage = image;

packages/mgt-components/src/graph/cacheStores.ts

@@ -28,7 +28,8 @@ export const schemas = {
     name: 'photos',
     stores: {
       contacts: 'contacts',
-      users: 'users'
+      users: 'users',
+      groups: 'groups'
     },
     version: 1
   },

packages/mgt-components/src/graph/graph.photos.ts

@@ -231,6 +231,43 @@ export async function getPersonImage(graph: IGraph, person: IDynamicPerson, useC
   return null;
 }
 
+export async function getGroupImage(graph: IGraph, group: any, useContactsApis: boolean = true) {
+  let photoDetails: CachePhoto;
+  let cache: CacheStore<CachePhoto>;
+
+  let groupId = group.id;
+
+  if (getIsPhotosCacheEnabled()) {
+    cache = CacheService.getCache<CachePhoto>(schemas.photos, schemas.photos.stores.groups);
+    photoDetails = await cache.getValue(groupId);
+    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(`group/${groupId}/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;
+      }
+    }
+  }
+
+  // if there is a photo in the cache, we got here because it was stale
+  photoDetails = photoDetails || (await getPhotoForResource(graph, `groups/${groupId}`, ['user.readbasic.all']));
+  if (getIsPhotosCacheEnabled() && photoDetails) {
+    cache.putValue(groupId, photoDetails);
+  }
+  return photoDetails ? photoDetails.photo : null;
+}
+
 /**
  * checks if user has a photo in the cache
  * @param userId