[mgt-people] fallback details feature (#1355)

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

Author: vogtn

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

@@ -210,6 +210,27 @@ export class MgtPeople extends MgtTemplatedComponent {
   })
   public scopes: string[] = [];
 
+  /**
+   * Fallback when no user is found
+   * @type {IDynamicPerson[]}
+   */
+  @property({
+    attribute: 'fallback-details',
+    type: Array
+  })
+  public get fallbackDetails(): IDynamicPerson[] {
+    return this._fallbackDetails;
+  }
+  public set fallbackDetails(value: IDynamicPerson[]) {
+    if (value === this._fallbackDetails) {
+      return;
+    }
+
+    this._fallbackDetails = value;
+
+    this.requestStateUpdate();
+  }
+
   /**
    * Get the scopes required for people
    *
@@ -236,6 +257,7 @@ export class MgtPeople extends MgtTemplatedComponent {
   private _peoplePresence: {};
   private _resource: string;
   private _version: string = 'v1.0';
+  private _fallbackDetails: IDynamicPerson[];
 
   constructor() {
     super();
@@ -304,7 +326,6 @@ export class MgtPeople extends MgtTemplatedComponent {
    */
   protected renderPeople(): TemplateResult {
     const maxPeople = this.people.slice(0, this.showMax);
-
     return html`
       <ul class="people-list">
         ${repeat(
@@ -405,10 +426,21 @@ export class MgtPeople extends MgtTemplatedComponent {
         // populate people
         if (this.groupId) {
           this.people = await findGroupMembers(graph, null, this.groupId, this.showMax, PersonType.person);
-        } else if (this.userIds) {
-          this.people = await getUsersForUserIds(graph, this.userIds);
-        } else if (this.peopleQueries) {
-          this.people = await getUsersForPeopleQueries(graph, this.peopleQueries);
+        } else if (this.userIds || this.peopleQueries) {
+          this.userIds
+            ? (this.people = await getUsersForUserIds(graph, this.userIds))
+            : (this.people = await getUsersForPeopleQueries(graph, this.peopleQueries));
+          if (this._fallbackDetails) {
+            // replace null people with fallback details
+            this.people = this.people.map((p, i) => {
+              if (p) {
+                return p;
+              } else if (i < this._fallbackDetails.length) {
+                return this._fallbackDetails[i];
+              }
+              return null;
+            });
+          }
         } else if (this.resource) {
           this.people = await getPeopleFromResource(graph, this.version, this.resource, this.scopes);
         } else {

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

@@ -118,7 +118,11 @@ export async function getUser(graph: IGraph, userPrincipleName: string, requeste
   }
 
   // else we must grab it
-  const response = await graph.api(apiString).middlewareOptions(prepScopes(scopes)).get();
+  let response;
+  try {
+    response = await graph.api(apiString).middlewareOptions(prepScopes(scopes)).get();
+  } catch (_) {}
+
   if (getIsUsersCacheEnabled()) {
     cache.putValue(userPrincipleName, { user: JSON.stringify(response) });
   }
@@ -254,6 +258,8 @@ export async function getUsersForPeopleQueries(graph: IGraph, peopleQueries: str
         if (getIsUsersCacheEnabled()) {
           cache.putValue(personQuery, { maxResults: 1, results: [JSON.stringify(response.content.value[0])] });
         }
+      } else {
+        people.push(null);
       }
     }
 

stories/components/people/people.properties.js

@@ -50,3 +50,19 @@ export const PersonCard = () => html`
   <div style="margin-bottom:10px">Person card Click</div>
   <mgt-people show-max="5" person-card="click"></mgt-people>
 `;
+
+export const FallbackDetails = () => html`
+  <mgt-people
+    user-ids="2804bc07-1e1f-4938-9085-ce6d756a32d2, [email protected]"
+    fallback-details='[{"mail": "[email protected]"},{"displayName": "[email protected]", "mail":"[email protected]"}]'
+  >
+  </mgt-people>
+`;
+
+export const FallbackDetailsPeopleQuery = () => html`
+  <mgt-people
+  people-queries="[email protected], [email protected]"
+  fallback-details='[{ "mail":"[email protected]"},{"mail": "[email protected]"}]'
+  >
+  </mgt-people>
+`;