MGT Person - Disable attempt to get user photo when using userId/personQuery and fetchImage=false (#1562)

Co-authored-by: Nickii Miaro <[email protected]>
Co-authored-by: Sébastien Levert <[email protected]>

Author: 3 people

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

@@ -345,6 +345,19 @@ export class MgtPerson extends MgtTemplatedComponent {
   })
   public fetchImage: boolean;
 
+  /**
+   * Sets whether to disable the person image fetch
+   * from the Microsoft Graph
+   *
+   * @type {boolean}
+   * @memberof MgtPerson
+   */
+  @property({
+    attribute: 'disable-image-fetch',
+    type: Boolean
+  })
+  public disableImageFetch: boolean;
+
   /**
    * Determines and sets person avatar
    *
@@ -526,6 +539,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     this.line3Property = 'jobTitle';
     this.view = ViewType.image;
     this.avatarSize = 'auto';
+    this.disableImageFetch = false;
     this._isInvalidImageSrc = false;
     this._avatarType = 'photo';
   }
@@ -1019,7 +1033,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     } else if (this.userId || this.personQuery === 'me') {
       // Use userId or 'me' query to get the person and image
       let person;
-      if (this._avatarType === 'photo') {
+      if (this._avatarType === 'photo' && !this.disableImageFetch) {
         person = await getUserWithPhoto(graph, this.userId, personProps);
       } else {
         if (this.personQuery === 'me') {
@@ -1040,7 +1054,7 @@ export class MgtPerson extends MgtTemplatedComponent {
 
       if (people && people.length) {
         this.personDetailsInternal = people[0];
-        if (this._avatarType === 'photo') {
+        if (this._avatarType === 'photo' && !this.disableImageFetch) {
           const image = await getPersonImage(graph, people[0], MgtPerson.config.useContactApis);
 
           if (image) {

packages/mgt-react/src/generated/react.ts

@@ -170,6 +170,7 @@ export type PersonProps = {
 	line3Property?: string;
 	view?: ViewType | PersonViewType;
 	avatarSize?: AvatarSize;
+	disableImageFetch?: boolean;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
 	line1clicked?: (e: Event) => void;

stories/components/person/person.properties.js

@@ -268,6 +268,10 @@ export const personAvatarType = () => html`
   <mgt-person person-query="me" avatar-type="initials"></mgt-person>
 `;
 
+export const personDisableImageFetch = () => html`
+  <mgt-person person-query="me" disable-image-fetch></mgt-person>
+`;
+
 export const moreExamples = () => html`
   <style>
     .example {