MGT PeoplePicker - Add optional disableImages prop to allow disable retrieving user photos (#1561)

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

Author: 3 people

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

@@ -250,6 +250,19 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   })
   public showMax: number;
 
+  /**
+   * Sets whether the person image should be fetched
+   * from the Microsoft Graph
+   *
+   * @type {boolean}
+   * @memberof MgtPerson
+   */
+  @property({
+    attribute: 'disable-images',
+    type: Boolean
+  })
+  public disableImages: boolean;
+
   /**
    *  array of user picked people.
    * @type {IDynamicPerson[]}
@@ -421,6 +434,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.clearState();
     this._showLoading = true;
     this.showMax = 6;
+    this.disableImages = false;
 
     this.disabled = false;
     this.allowAnyEmail = false;
@@ -846,7 +860,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     return (
       this.renderTemplate('person', { person }, person.id) ||
       html`
-         <mgt-person .personDetails=${person} .fetchImage=${true}></mgt-person>
+         <mgt-person .personDetails=${person} .fetchImage=${!this.disableImages}></mgt-person>
          <div class="people-person-text-area" id="${person.displayName}">
            ${this.renderHighlightText(person)}
            <span class="${classMap(classes)}">${subTitle}</span>
@@ -869,7 +883,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
          tabindex="-1"
          class="selected-list__person-wrapper__person"
          .personDetails=${person}
-         .fetchImage=${true}
+         .fetchImage=${!this.disableImages}
          .view=${ViewType.oneline}
          .personCardInteraction=${PersonCardInteraction.click}
        ></mgt-person>

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

@@ -108,6 +108,7 @@ export type PeoplePickerProps = {
 	selectionMode?: string;
 	userIds?: string[];
 	showMax?: number;
+	disableImages?: boolean;
 	disabled?: boolean;
 	allowAnyEmail?: boolean;
 	templateContext?: TemplateContext;

stories/components/peoplePicker/peoplePicker.properties.js

@@ -153,6 +153,12 @@ export const pickerDisabled = () => html`
   </mgt-people-picker>
 `;
 
+export const pickerDisableImages = () => html`
+  <mgt-people-picker
+    default-selected-user-ids="e3d0513b-449e-4198-ba6f-bd97ae7cae85, 40079818-3808-4585-903b-02605f061225" disable-images>
+  </mgt-people-picker>
+`;
+
 export const pickerDefaultSelectedUserIds = () => html`
   <mgt-people-picker
     default-selected-user-ids="e3d0513b-449e-4198-ba6f-bd97ae7cae85, 40079818-3808-4585-903b-02605f061225">
@@ -182,8 +188,8 @@ export const pickerAllowAnyEmail = () => html`
   </script>
 `;
 
-export const pickerUserIds = ()=> html`
+export const pickerUserIds = () => html`
   <mgt-people-picker
       user-ids="2804bc07-1e1f-4938-9085-ce6d756a32d2 ,e8a02cc7-df4d-4778-956d-784cc9506e5a,c8913c86-ceea-4d39-b1ea-f63a5b675166">
   </mgt-people-picker>
-`
+`;