From 074e5a9a14929ec7f3f21fcb649c4f29f61adc20 Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Tue, 29 Aug 2023 17:47:11 +0300
Subject: [PATCH 01/12] fix: add Group entity type to IDynamicPerson and
 entityType property

---
 .../components/mgt-person-card/mgt-person-card.ts  |  4 ++--
 .../src/components/mgt-person/mgt-person.ts        | 10 +++++-----
 packages/mgt-components/src/graph/types.ts         | 14 +++++++++++++-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
index b6d9f6db05..7afec95b74 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -644,11 +644,11 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    */
   protected renderPersonSubtitle(person?: IDynamicPerson): TemplateResult {
     person = person || this.internalPersonDetails;
-    if (!person.department) {
+    if (!(person as Person).department) {
       return;
     }
     return html`
-       <div class="department">${person.department}</div>
+       <div class="department">${(person as Person).department}</div>
      `;
   }
 
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index d149ce5a47..b1d440646e 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -13,7 +13,7 @@ import {
   customElementHelper,
   mgtHtml
 } from '@microsoft/mgt-element';
-import { Contact, Presence } from '@microsoft/microsoft-graph-types';
+import { Contact, Presence, Person } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -1195,11 +1195,11 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
 
     let initials = '';
-    if (person.givenName) {
-      initials += person.givenName[0].toUpperCase();
+    if ((person as Person).givenName) {
+      initials += (person as Person).givenName[0].toUpperCase();
     }
-    if (person.surname) {
-      initials += person.surname[0].toUpperCase();
+    if ((person as Person).surname) {
+      initials += (person as Person).surname[0].toUpperCase();
     }
 
     if (!initials && person.displayName) {
diff --git a/packages/mgt-components/src/graph/types.ts b/packages/mgt-components/src/graph/types.ts
index 73156dcfa2..aa639e6d41 100644
--- a/packages/mgt-components/src/graph/types.ts
+++ b/packages/mgt-components/src/graph/types.ts
@@ -14,7 +14,12 @@ import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  * In addition, this custom type also defines the optional `personImage` property,
  * which is used to pass the image around to other components as part of the person object.
  */
-export type IDynamicPerson = (MicrosoftGraph.User | MicrosoftGraph.Person | MicrosoftGraph.Contact) & {
+export type IDynamicPerson = (
+  | MicrosoftGraph.User
+  | MicrosoftGraph.Person
+  | MicrosoftGraph.Contact
+  | MicrosoftGraph.Group
+) & {
   /**
    * personDetails.personImage is a toolkit injected property to pass image between components
    * an optimization to avoid fetching the image when unnecessary.
@@ -22,6 +27,13 @@ export type IDynamicPerson = (MicrosoftGraph.User | MicrosoftGraph.Person | Micr
    * @type {string}
    */
   personImage?: string;
+  /**
+   * personDetails.entityType is a toolkit injected property to pass the type of each entity
+   * in the array.
+   *
+   * @type {string}
+   */
+  entityType?: 'user' | 'person' | 'group';
 };
 
 /**

From 166f8e195b5460b40bfa9de53e631d7b998dcf5b Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Mon, 4 Sep 2023 14:59:59 +0300
Subject: [PATCH 02/12] set entityType to IDynamicPerson

---
 .../mgt-people-picker/mgt-people-picker.ts         |  4 ++--
 .../src/components/mgt-person/mgt-person.ts        | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 47509af156..82c2a1b6eb 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -37,7 +37,7 @@ import {
 import '../../styles/style-helper';
 import '../sub-components/mgt-spinner/mgt-spinner';
 import { debounce, isValidEmail } from '../../utils/Utils';
-import { MgtPerson } from '../mgt-person/mgt-person';
+import { MgtPerson, defaultPersonProperties } from '../mgt-person/mgt-person';
 import { PersonCardInteraction } from '../PersonCardInteraction';
 import { MgtFlyout } from '../sub-components/mgt-flyout/mgt-flyout';
 import { styles } from './mgt-people-picker-css';
@@ -639,7 +639,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       for (const id in userIds) {
         const userId = userIds[id];
         try {
-          const personDetails = await getUser(graph, userId);
+          const personDetails = await getUser(graph, userId, defaultPersonProperties);
           this.addPerson(personDetails);
         } catch (e: any) {
           // This caters for allow-any-email property if it's enabled on the component
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index b1d440646e..c712c57893 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -17,7 +17,7 @@ import { Contact, Presence, Person } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
+import { PersonType, findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
 import { getGroupImage, getPersonImage } from '../../graph/graph.photos';
 import { getUserPresence } from '../../graph/graph.presence';
 import { findUsers, getMe, getUser } from '../../graph/graph.user';
@@ -39,7 +39,7 @@ export { PersonCardInteraction } from '../PersonCardInteraction';
 /**
  * Person properties part of original set provided by graph by default
  */
-const defaultPersonProperties = [
+export const defaultPersonProperties = [
   'businessPhones',
   'displayName',
   'givenName',
@@ -51,7 +51,8 @@ const defaultPersonProperties = [
   'preferredLanguage',
   'surname',
   'userPrincipalName',
-  'id'
+  'id',
+  'userType'
 ];
 
 /**
@@ -1108,7 +1109,14 @@ export class MgtPerson extends MgtTemplatedComponent {
         let image: string;
         if ('groupTypes' in details) {
           image = await getGroupImage(graph, details, MgtPerson.config.useContactApis);
+          details.entityType = 'group';
         } else {
+          if ('personType' in details) {
+            details.entityType = 'person';
+          }
+          if ('userType' in details) {
+            details.entityType = 'user';
+          }
           image = await getPersonImage(graph, details, MgtPerson.config.useContactApis);
         }
         if (image) {

From d93855965c36b03c3851550a0466396a752b2d9a Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Mon, 18 Sep 2023 22:44:31 +0300
Subject: [PATCH 03/12] implement entityType guards, fix build

---
 .../src/components/mgt-contact/mgt-contact.ts |  5 +-
 .../mgt-organization/mgt-organization.ts      | 16 ++---
 .../mgt-people-picker/mgt-people-picker.ts    | 69 +++++++++++--------
 .../src/components/mgt-people/mgt-people.ts   | 21 ++++--
 .../mgt-person-card/mgt-person-card.ts        |  8 +--
 .../mgt-person-card/mgt-person-card.types.ts  |  3 +-
 .../src/components/mgt-person/mgt-person.ts   | 42 +++++++----
 packages/mgt-components/src/graph/types.ts    | 18 ++---
 8 files changed, 106 insertions(+), 76 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts b/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
index d41980c668..c0341b47fc 100644
--- a/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
+++ b/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
@@ -15,6 +15,7 @@ import { BasePersonCardSection } from '../BasePersonCardSection';
 import { styles } from './mgt-contact-css';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { strings } from './strings';
+import { IUser } from '../../graph/types';
 
 /**
  * Represents a contact part and its metadata
@@ -76,7 +77,7 @@ export class MgtContact extends BasePersonCardSection {
   private readonly _contactParts: Record<string, IContactPart> = {
     email: {
       icon: getSvg(SvgIcon.Email),
-      onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person)),
+      onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person as IUser)),
       showCompact: true,
       title: this.strings.emailTitle
     },
@@ -119,7 +120,7 @@ export class MgtContact extends BasePersonCardSection {
     super();
     this._person = person;
 
-    this._contactParts.email.value = getEmailFromGraphEntity(this._person);
+    this._contactParts.email.value = getEmailFromGraphEntity(this._person as IUser);
     this._contactParts.chat.value = this._person.userPrincipalName;
     this._contactParts.cellPhone.value = this._person.mobilePhone;
     this._contactParts.department.value = this._person.department;
diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
index a816c70829..504aea73c2 100644
--- a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
+++ b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
@@ -13,7 +13,7 @@ import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { MgtPersonCardState, UserWithManager } from '../mgt-person-card/mgt-person-card.types';
 import { styles } from './mgt-organization-css';
 import { strings } from './strings';
-import { ViewType } from '../../graph/types';
+import { IDynamicPerson, ViewType } from '../../graph/types';
 import { mgtHtml, customElement } from '@microsoft/mgt-element';
 
 /**
@@ -177,7 +177,7 @@ export class MgtOrganization extends BasePersonCardSection {
    * @returns {TemplateResult}
    * @memberof MgtOrganization
    */
-  protected renderManager(person: User): TemplateResult {
+  protected renderManager(person: IDynamicPerson): TemplateResult {
     return mgtHtml`
       <div
         class="org-member"
@@ -251,9 +251,9 @@ export class MgtOrganization extends BasePersonCardSection {
             <div
               class="org-member org-member--direct-report"
               @keydown=${(e: KeyboardEvent) => {
-                if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person);
+                if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person as IDynamicPerson);
               }}
-              @click=${() => this.navigateCard(person)}
+              @click=${() => this.navigateCard(person as IDynamicPerson)}
             >
               <div class="org-member__person">
                 <mgt-person
@@ -292,9 +292,9 @@ export class MgtOrganization extends BasePersonCardSection {
             <div
               class="direct-report"
               @keydown=${(e: KeyboardEvent) => {
-                if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person);
+                if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person as IDynamicPerson);
               }}
-              @click=${() => this.navigateCard(person)}
+              @click=${() => this.navigateCard(person as IDynamicPerson)}
             >
               <mgt-person
                 .personDetails=${person}
@@ -340,7 +340,7 @@ export class MgtOrganization extends BasePersonCardSection {
    * @returns {TemplateResult}
    * @memberof MgtOrganization
    */
-  protected renderCoworker(person: User): TemplateResult {
+  protected renderCoworker(person: IDynamicPerson): TemplateResult {
     return mgtHtml`
       <div
         class="coworker"
@@ -384,7 +384,7 @@ export class MgtOrganization extends BasePersonCardSection {
        <div class="divider"></div>
        <div class="subtitle" tabindex="0">${subtitle}</div>
        <div>
-         ${people.slice(0, 6).map(person => this.renderCoworker(person))}
+         ${people.slice(0, 6).map((person: IDynamicPerson) => this.renderCoworker(person))}
        </div>
      `;
   }
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 82c2a1b6eb..bf81f95fcf 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -24,7 +24,7 @@ import {
   getUsersForUserIds,
   getUsers
 } from '../../graph/graph.user';
-import { IDynamicPerson, ViewType } from '../../graph/types';
+import { IDynamicPerson, IGroup, IUser, ViewType } from '../../graph/types';
 import {
   Providers,
   ProviderState,
@@ -639,7 +639,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       for (const id in userIds) {
         const userId = userIds[id];
         try {
-          const personDetails = await getUser(graph, userId, defaultPersonProperties);
+          const personDetails = (await getUser(graph, userId, defaultPersonProperties)) as IUser;
           this.addPerson(personDetails);
         } catch (e: any) {
           // This caters for allow-any-email property if it's enabled on the component
@@ -650,7 +650,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                 mail: userId,
                 displayName: userId
               };
-              this.addPerson(anyMailUser);
+              this.addPerson(anyMailUser as IUser);
             }
           }
         }
@@ -671,7 +671,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       // eslint-disable-next-line guard-for-in, @typescript-eslint/no-for-in-array
       for (const id in groupIds) {
         try {
-          const groupDetails = await getGroup(graph, groupIds[id]);
+          const groupDetails = (await getGroup(graph, groupIds[id])) as IGroup;
           this.addPerson(groupDetails);
         } catch (e) {
           // no-op
@@ -1010,16 +1010,16 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               if (this.groupId) {
                 try {
                   if (this.type === PersonType.group) {
-                    this._groupPeople = await findGroupMembers(
+                    this._groupPeople = (await findGroupMembers(
                       graph,
                       null,
                       this.groupId,
                       this.showMax,
                       this.type,
                       this.transitiveSearch
-                    );
+                    )) as IUser[];
                   } else {
-                    this._groupPeople = await findGroupMembers(
+                    this._groupPeople = (await findGroupMembers(
                       graph,
                       null,
                       this.groupId,
@@ -1028,7 +1028,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                       this.transitiveSearch,
                       this.userFilters,
                       this.peopleFilters
-                    );
+                    )) as IUser[];
                   }
                 } catch (_) {
                   this._groupPeople = [];
@@ -1036,7 +1036,11 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               } else if (this.groupIds) {
                 if (this.type === PersonType.group) {
                   try {
-                    this._groupPeople = await getGroupsForGroupIds(graph, this.groupIds, this.groupFilters);
+                    this._groupPeople = (await getGroupsForGroupIds(
+                      graph,
+                      this.groupIds,
+                      this.groupFilters
+                    )) as IGroup[];
                   } catch (_) {
                     this._groupPeople = [];
                   }
@@ -1051,7 +1055,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                       this.transitiveSearch,
                       this.userFilters
                     );
-                    this._groupPeople = peopleInGroups;
+                    this._groupPeople = peopleInGroups as IUser[];
                   } catch (_) {
                     this._groupPeople = [];
                   }
@@ -1061,13 +1065,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
             people = this._groupPeople || [];
           } else if (this.type === PersonType.person || this.type === PersonType.any) {
             if (this.userIds) {
-              people = await getUsersForUserIds(graph, this.userIds, '', this.userFilters);
+              people = (await getUsersForUserIds(graph, this.userIds, '', this.userFilters)) as IUser[];
             } else {
               const isUserOrContactType = this.userType === UserType.user || this.userType === UserType.contact;
               if (this._userFilters && isUserOrContactType) {
-                people = await getUsers(graph, this._userFilters, this.showMax);
+                people = (await getUsers(graph, this._userFilters, this.showMax)) as IUser[];
               } else {
-                people = await getPeople(graph, this.userType, this._peopleFilters, this.showMax);
+                people = (await getPeople(graph, this.userType, this._peopleFilters, this.showMax)) as IUser[];
               }
             }
           } else if (this.type === PersonType.group) {
@@ -1084,7 +1088,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                 // eslint-disable-next-line @typescript-eslint/dot-notation, @typescript-eslint/no-unsafe-assignment
                 groups = groups[0]['value'];
               }
-              people = groups;
+              people = groups as IGroup[];
             }
           }
           this.defaultPeople = people;
@@ -1100,12 +1104,17 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         !this.defaultSelectedUsers.length &&
         !this.defaultSelectedGroups.length
       ) {
-        this.defaultSelectedUsers = await getUsersForUserIds(graph, this.defaultSelectedUserIds, '', this.userFilters);
-        this.defaultSelectedGroups = await getGroupsForGroupIds(
+        this.defaultSelectedUsers = (await getUsersForUserIds(
+          graph,
+          this.defaultSelectedUserIds,
+          '',
+          this.userFilters
+        )) as IUser[];
+        this.defaultSelectedGroups = (await getGroupsForGroupIds(
           graph,
           this.defaultSelectedGroupIds,
           this.peopleFilters
-        );
+        )) as IGroup[];
 
         this.defaultSelectedGroups = this.defaultSelectedGroups.filter(group => {
           return group !== null;
@@ -1125,7 +1134,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
         if (this.groupId) {
           people =
-            (await findGroupMembers(
+            ((await findGroupMembers(
               graph,
               input,
               this.groupId,
@@ -1134,7 +1143,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               this.transitiveSearch,
               this.userFilters,
               this.peopleFilters
-            )) || [];
+            )) as IUser[]) || [];
         } else {
           if (this.type === PersonType.person || this.type === PersonType.any) {
             try {
@@ -1143,22 +1152,24 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                 // we might have a user-filters property set, search for users with it.
                 if (this.userIds?.length) {
                   // has the user-ids proerty set
-                  people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
+                  people = (await getUsersForUserIds(graph, this.userIds, input, this._userFilters)) as IUser[];
                 } else {
-                  people = await findUsers(graph, input, this.showMax, this._userFilters);
+                  people = (await findUsers(graph, input, this.showMax, this._userFilters)) as IUser[];
                 }
               } else {
                 if (!this.groupIds) {
                   if (this.userIds?.length) {
                     // has the user-ids proerty set
-                    people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
+                    people = (await getUsersForUserIds(graph, this.userIds, input, this._userFilters)) as IUser[];
                   } else {
-                    people = (await findPeople(graph, input, this.showMax, this.userType, this._peopleFilters)) || [];
+                    people =
+                      ((await findPeople(graph, input, this.showMax, this.userType, this._peopleFilters)) as IUser[]) ||
+                      [];
                   }
                 } else {
                   // Does not work when the PersonType = person.
                   try {
-                    people = await findUsersFromGroupIds(
+                    people = (await findUsersFromGroupIds(
                       graph,
                       input,
                       this.groupIds,
@@ -1166,7 +1177,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                       this.type,
                       this.transitiveSearch,
                       this.userFilters
-                    );
+                    )) as IUser[];
                   } catch (_) {
                     // nop
                   }
@@ -1185,7 +1196,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               this.type !== PersonType.person
             ) {
               try {
-                const users = (await findUsers(graph, input, this.showMax, this._userFilters)) || [];
+                const users = ((await findUsers(graph, input, this.showMax, this._userFilters)) as IUser[]) || [];
 
                 // make sure only unique people
                 const peopleIds = new Set(people.map(p => p.id));
@@ -1203,14 +1214,14 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           if ((this.type === PersonType.group || this.type === PersonType.any) && people.length < this.showMax) {
             if (this.groupIds) {
               try {
-                people = await findGroupsFromGroupIds(
+                people = (await findGroupsFromGroupIds(
                   graph,
                   input,
                   this.groupIds,
                   this.showMax,
                   this.groupType,
                   this.userFilters
-                );
+                )) as IGroup[];
               } catch (_) {
                 // no-op
               }
@@ -1460,7 +1471,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         mail: this.userInput,
         displayName: this.userInput
       };
-      this.addPerson(anyMailUser);
+      this.addPerson(anyMailUser as IUser);
     }
     this.hideFlyout();
     if (this.input) {
diff --git a/packages/mgt-components/src/components/mgt-people/mgt-people.ts b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
index 695ebc8207..5b810e513e 100644
--- a/packages/mgt-components/src/components/mgt-people/mgt-people.ts
+++ b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
@@ -490,15 +490,26 @@ export class MgtPeople extends MgtTemplatedComponent {
 
         // populate people
         if (this.groupId) {
-          this.people = await findGroupMembers(graph, null, this.groupId, this.showMax, PersonType.person);
+          this.people = (await findGroupMembers(
+            graph,
+            null,
+            this.groupId,
+            this.showMax,
+            PersonType.person
+          )) as IDynamicPerson[];
         } else if (this.userIds || this.peopleQueries) {
           this.people = this.userIds
-            ? await getUsersForUserIds(graph, this.userIds, '', '', this._fallbackDetails)
-            : await getUsersForPeopleQueries(graph, this.peopleQueries, this._fallbackDetails);
+            ? ((await getUsersForUserIds(graph, this.userIds, '', '', this._fallbackDetails)) as IDynamicPerson[])
+            : ((await getUsersForPeopleQueries(graph, this.peopleQueries, this._fallbackDetails)) as IDynamicPerson[]);
         } else if (this.resource) {
-          this.people = await getPeopleFromResource(graph, this.version, this.resource, this.scopes);
+          this.people = (await getPeopleFromResource(
+            graph,
+            this.version,
+            this.resource,
+            this.scopes
+          )) as IDynamicPerson[];
         } else {
-          this.people = await getPeople(graph);
+          this.people = (await getPeople(graph)) as IDynamicPerson[];
         }
 
         // populate presence for people
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
index 7afec95b74..26dd1a0655 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -21,7 +21,7 @@ import { IGraph } from '@microsoft/mgt-element';
 import { Presence, User, Person } from '@microsoft/microsoft-graph-types';
 
 import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
-import { IDynamicPerson, ViewType } from '../../graph/types';
+import { IDynamicPerson, IUser, ViewType } from '../../graph/types';
 import { getPersonImage } from '../../graph/graph.photos';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
@@ -476,7 +476,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     this._history = [];
 
     this._cardState = historyState.state;
-    this._personDetails = historyState.state;
+    this._personDetails = historyState.personDetails;
     this.personImage = historyState.personImage;
     this.loadSections();
   }
@@ -1016,7 +1016,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
     // check if personDetail already populated
     if (this.personDetails) {
-      const user = this.personDetails as User;
+      const user = this.personDetails as IUser;
       const id = user.userPrincipalName || user.id;
 
       // if we have an id but no email, we should get data from the graph
@@ -1036,7 +1036,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       const people = await findPeople(graph, this.personQuery, 1);
 
       if (people?.length) {
-        this.personDetails = people[0];
+        this.personDetails = people[0] as IDynamicPerson;
         await getPersonImage(graph, this.personDetails, MgtPersonCard.config.useContactApis).then(image => {
           if (image) {
             this.personDetails.personImage = image;
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.types.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.types.ts
index abb131b1e2..dcdf6030c0 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.types.ts
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.types.ts
@@ -7,6 +7,7 @@
 
 import { Message, Person, SharedInsight, User } from '@microsoft/microsoft-graph-types';
 import { Profile } from '@microsoft/microsoft-graph-types-beta';
+import { IUser } from '../../graph/types';
 
 /**
  * Person Card Global Configuration Type
@@ -81,7 +82,7 @@ export interface MgtPersonCardConfig {
   };
 }
 
-export type UserWithManager = User & { manager?: UserWithManager };
+export type UserWithManager = IUser & { manager?: UserWithManager };
 
 export interface MgtPersonCardState {
   directReports?: User[];
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index c712c57893..3640f6587c 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -17,12 +17,12 @@ import { Contact, Presence, Person } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { PersonType, findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
+import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
 import { getGroupImage, getPersonImage } from '../../graph/graph.photos';
 import { getUserPresence } from '../../graph/graph.presence';
 import { findUsers, getMe, getUser } from '../../graph/graph.user';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
-import { AvatarSize, IDynamicPerson, ViewType } from '../../graph/types';
+import { AvatarSize, IDynamicPerson, IUser, IGroup, IContact, ViewType } from '../../graph/types';
 import '../../styles/style-helper';
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
 import { MgtPersonCard } from '../mgt-person-card/mgt-person-card';
@@ -55,6 +55,18 @@ export const defaultPersonProperties = [
   'userType'
 ];
 
+const isGroup = (obj: IDynamicPerson): obj is IGroup => {
+  return obj.entityType === 'group';
+};
+
+const isUser = (obj: IDynamicPerson): obj is IUser => {
+  return obj.entityType === 'user';
+};
+
+const isContact = (obj: IDynamicPerson): obj is IContact => {
+  return obj.entityType === 'contact';
+};
+
 /**
  * The person component is used to display a person or contact by using their photo, name, and/or email address.
  *
@@ -1099,6 +1111,15 @@ export class MgtPerson extends MgtTemplatedComponent {
     let details = this.personDetailsInternal || this.personDetails || this.fallbackDetails;
 
     if (details) {
+      if ('personType' in details || 'userType' in details) {
+        details.entityType = 'user';
+      }
+      if ('initials' in details) {
+        details.entityType = 'contact';
+      }
+      if ('groupTypes' in details) {
+        details.entityType = 'group';
+      }
       if (
         !details.personImage &&
         this.fetchImage &&
@@ -1109,14 +1130,7 @@ export class MgtPerson extends MgtTemplatedComponent {
         let image: string;
         if ('groupTypes' in details) {
           image = await getGroupImage(graph, details, MgtPerson.config.useContactApis);
-          details.entityType = 'group';
         } else {
-          if ('personType' in details) {
-            details.entityType = 'person';
-          }
-          if ('userType' in details) {
-            details.entityType = 'user';
-          }
           image = await getPersonImage(graph, details, MgtPerson.config.useContactApis);
         }
         if (image) {
@@ -1131,9 +1145,9 @@ export class MgtPerson extends MgtTemplatedComponent {
         person = await getUserWithPhoto(graph, this.userId, personProps);
       } else {
         if (this.personQuery === 'me') {
-          person = await getMe(graph, personProps);
+          person = (await getMe(graph, personProps)) as IUser;
         } else {
-          person = await getUser(graph, this.userId, personProps);
+          person = (await getUser(graph, this.userId, personProps)) as IUser;
         }
       }
       this.personDetailsInternal = person;
@@ -1148,10 +1162,10 @@ export class MgtPerson extends MgtTemplatedComponent {
       }
 
       if (people?.length) {
-        this.personDetailsInternal = people[0];
-        this.personDetails = people[0];
+        this.personDetailsInternal = people[0] as IUser;
+        this.personDetails = people[0] as IUser;
         if (this._avatarType === 'photo' && !this.disableImageFetch) {
-          const image = await getPersonImage(graph, people[0], MgtPerson.config.useContactApis);
+          const image = await getPersonImage(graph, people[0] as IUser, MgtPerson.config.useContactApis);
 
           if (image) {
             this.personDetailsInternal.personImage = image;
diff --git a/packages/mgt-components/src/graph/types.ts b/packages/mgt-components/src/graph/types.ts
index aa639e6d41..cd7b6d06a7 100644
--- a/packages/mgt-components/src/graph/types.ts
+++ b/packages/mgt-components/src/graph/types.ts
@@ -14,12 +14,11 @@ import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  * In addition, this custom type also defines the optional `personImage` property,
  * which is used to pass the image around to other components as part of the person object.
  */
-export type IDynamicPerson = (
-  | MicrosoftGraph.User
-  | MicrosoftGraph.Person
-  | MicrosoftGraph.Contact
-  | MicrosoftGraph.Group
-) & {
+export type IUser = (MicrosoftGraph.User | MicrosoftGraph.Person) & { entityType: 'user' };
+export type IContact = MicrosoftGraph.Contact & { entityType: 'contact' };
+export type IGroup = MicrosoftGraph.Group & { entityType: 'group' };
+
+export type IDynamicPerson = (IUser | IContact | IGroup) & {
   /**
    * personDetails.personImage is a toolkit injected property to pass image between components
    * an optimization to avoid fetching the image when unnecessary.
@@ -27,13 +26,6 @@ export type IDynamicPerson = (
    * @type {string}
    */
   personImage?: string;
-  /**
-   * personDetails.entityType is a toolkit injected property to pass the type of each entity
-   * in the array.
-   *
-   * @type {string}
-   */
-  entityType?: 'user' | 'person' | 'group';
 };
 
 /**

From b23f438bab026b7dd0eba82c710ccb0c5247bb5b Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Tue, 19 Sep 2023 00:30:09 +0300
Subject: [PATCH 04/12] refactor getInitials to use type guard functions

---
 .../src/components/mgt-person/mgt-person.ts          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 3640f6587c..bb9158509b 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -1212,16 +1212,16 @@ export class MgtPerson extends MgtTemplatedComponent {
       person = this.personDetailsInternal;
     }
 
-    if ((person as Contact).initials) {
-      return (person as Contact).initials;
+    if (isContact(person)) {
+      return person.initials;
     }
 
     let initials = '';
-    if ((person as Person).givenName) {
-      initials += (person as Person).givenName[0].toUpperCase();
+    if (isUser(person)) {
+      initials += person.givenName[0].toUpperCase();
     }
-    if ((person as Person).surname) {
-      initials += (person as Person).surname[0].toUpperCase();
+    if (isUser(person)) {
+      initials += person.surname[0].toUpperCase();
     }
 
     if (!initials && person.displayName) {

From d3cff4363c30442d9c70e694e994601aef891059 Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Wed, 20 Sep 2023 18:08:34 +0300
Subject: [PATCH 05/12] add entityType story

---
 .../mgt-people-picker/mgt-people-picker.ts    |  3 +++
 .../peoplePicker/peoplePicker.stories.js      | 21 +++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index bf81f95fcf..9d3810212c 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -1018,6 +1018,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                       this.type,
                       this.transitiveSearch
                     )) as IUser[];
+                    for (const person of this._groupPeople) {
+                      Object.assign(person, { entityType: 'user' });
+                    }
                   } else {
                     this._groupPeople = (await findGroupMembers(
                       graph,
diff --git a/stories/components/peoplePicker/peoplePicker.stories.js b/stories/components/peoplePicker/peoplePicker.stories.js
index a15c5a9234..b413d155e0 100644
--- a/stories/components/peoplePicker/peoplePicker.stories.js
+++ b/stories/components/peoplePicker/peoplePicker.stories.js
@@ -41,6 +41,27 @@ export const selectionChangedEvent = () => html`
    </script>
  `;
 
+export const getEntityType = () => html`
+  <mgt-people-picker></mgt-people-picker>
+  <!-- Group entityType -->
+  <!-- <mgt-people-picker type="group"></mgt-people-picker> -->
+
+  <div class="entity-type"></div>
+
+  <script>
+  let entityType;
+  const output = document.querySelector('.entity-type');
+  document.querySelector('mgt-people-picker').addEventListener('selectionChanged', e => {
+    entityType = e.detail[0].entityType
+      if (entityType) {
+      output.innerHTML = '<b>entityType:</b> ' + entityType;
+    } else {
+      output.innerHTML = '<b>entityType:</b> null';
+    }
+  });
+  </script>
+`;
+
 export const selectGroupsById = () => html`
    <mgt-people-picker></mgt-people-picker>
    <!-- Check the js tab for example -->

From 3fe71ec11a466b71e36de54117707813b6ba3d74 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Mon, 25 Sep 2023 17:03:44 +0300
Subject: [PATCH 06/12] Export typeguards

Co-authored-by: Musale Martin <martinmusale@microsoft.com>
---
 .../mgt-components/src/components/mgt-person/mgt-person.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 6ea1c80fea..0e2f08edb7 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -55,15 +55,15 @@ export const defaultPersonProperties = [
   'userType'
 ];
 
-const isGroup = (obj: IDynamicPerson): obj is IGroup => {
+export const isGroup = (obj: IDynamicPerson): obj is IGroup => {
   return obj.entityType === 'group';
 };
 
-const isUser = (obj: IDynamicPerson): obj is IUser => {
+export const isUser = (obj: IDynamicPerson): obj is IUser => {
   return obj.entityType === 'user';
 };
 
-const isContact = (obj: IDynamicPerson): obj is IContact => {
+export const isContact = (obj: IDynamicPerson): obj is IContact => {
   return obj.entityType === 'contact';
 };
 

From 6d82d46d5a06aac5c75cdca63a247dd015533d4a Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Tue, 26 Sep 2023 11:34:14 +0300
Subject: [PATCH 07/12] Update
 stories/components/peoplePicker/peoplePicker.stories.js

Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>
---
 .../peoplePicker/peoplePicker.stories.js      | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/stories/components/peoplePicker/peoplePicker.stories.js b/stories/components/peoplePicker/peoplePicker.stories.js
index b413d155e0..6182101c3f 100644
--- a/stories/components/peoplePicker/peoplePicker.stories.js
+++ b/stories/components/peoplePicker/peoplePicker.stories.js
@@ -48,18 +48,22 @@ export const getEntityType = () => html`
 
   <div class="entity-type"></div>
 
-  <script>
-  let entityType;
+<script type="module">
+  import { isUser, isContact, isGroup} from '@microsoft/mgt-components';
+  let entityType = unknown;
   const output = document.querySelector('.entity-type');
   document.querySelector('mgt-people-picker').addEventListener('selectionChanged', e => {
-    entityType = e.detail[0].entityType
-      if (entityType) {
-      output.innerHTML = '<b>entityType:</b> ' + entityType;
-    } else {
-      output.innerHTML = '<b>entityType:</b> null';
+    const selected = e.detail[0];
+    if (isUser(selected)) {
+      entityType = 'user';
+    } else if (isContact(selected)) {
+      entityType = 'contact';
+    } else if (isGroup(selected)) {
+      entityType = 'group';
     }
+    output.innerHTML = `<b>entityType:</b> ${entityType}`;
   });
-  </script>
+</script>
 `;
 
 export const selectGroupsById = () => html`

From 9efd4292d508092bf11e441b0dd9a38aa9efebe6 Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Wed, 27 Sep 2023 15:06:55 +0300
Subject: [PATCH 08/12] remove entityType, use typeGuards instead, fix yarn
 clean script

---
 package.json                                  |  2 +-
 .../mgt-people-picker/mgt-people-picker.ts    | 20 +++++------
 .../src/components/mgt-person/mgt-person.ts   | 30 +++-------------
 .../mgt-components/src/graph/entityType.ts    | 20 +++++++++++
 packages/mgt-components/src/graph/types.ts    |  6 ++--
 packages/mgt-components/src/index.ts          |  1 +
 .../peoplePicker/peoplePicker.stories.js      | 36 ++++++++++---------
 7 files changed, 57 insertions(+), 58 deletions(-)
 create mode 100644 packages/mgt-components/src/graph/entityType.ts

diff --git a/package.json b/package.json
index da470c9c04..c625f3cf1c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "build:mgt-spfx": "lerna run build --scope @microsoft/mgt-spfx",
     "build:react-contoso": "lerna run build --scope react-contoso",
     "bundle": "cd ./packages/mgt && npm run bundle",
-    "clean": "lerna run --parallel --stream --scope @microsoft/* clean",
+    "clean": "lerna run --parallel --stream --scope '@microsoft/*' clean",
     "lint:eslint": "eslint -c .eslintrc.js --quiet 'packages/*/src/**/*.ts'",
     "lint:eslint:loud": "eslint -c .eslintrc.js 'packages/*/src/**/*.ts'",
     "lint:styles": "stylelint './packages/mgt-components/**/*.{css,scss}'",
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index cbf97e011f..493b64b3ac 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -24,7 +24,7 @@ import {
   getUsersForUserIds,
   getUsers
 } from '../../graph/graph.user';
-import { IDynamicPerson, IGroup, IUser, ViewType } from '../../graph/types';
+import { IDynamicPerson, IUser, ViewType } from '../../graph/types';
 import {
   Providers,
   ProviderState,
@@ -672,7 +672,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       // eslint-disable-next-line guard-for-in, @typescript-eslint/no-for-in-array
       for (const id in groupIds) {
         try {
-          const groupDetails = (await getGroup(graph, groupIds[id])) as IGroup;
+          const groupDetails = await getGroup(graph, groupIds[id]);
           this.addPerson(groupDetails);
         } catch (e) {
           // no-op
@@ -1040,11 +1040,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               } else if (this.groupIds) {
                 if (this.type === PersonType.group) {
                   try {
-                    this._groupPeople = (await getGroupsForGroupIds(
-                      graph,
-                      this.groupIds,
-                      this.groupFilters
-                    )) as IGroup[];
+                    this._groupPeople = await getGroupsForGroupIds(graph, this.groupIds, this.groupFilters);
                   } catch (_) {
                     this._groupPeople = [];
                   }
@@ -1092,7 +1088,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                 // eslint-disable-next-line @typescript-eslint/dot-notation, @typescript-eslint/no-unsafe-assignment
                 groups = groups[0]['value'];
               }
-              people = groups as IGroup[];
+              people = groups;
             }
           }
           this.defaultPeople = people;
@@ -1114,11 +1110,11 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           '',
           this.userFilters
         )) as IUser[];
-        this.defaultSelectedGroups = (await getGroupsForGroupIds(
+        this.defaultSelectedGroups = await getGroupsForGroupIds(
           graph,
           this.defaultSelectedGroupIds,
           this.peopleFilters
-        )) as IGroup[];
+        );
 
         this.defaultSelectedGroups = this.defaultSelectedGroups.filter(group => {
           return group !== null;
@@ -1218,14 +1214,14 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           if ((this.type === PersonType.group || this.type === PersonType.any) && people.length < this.showMax) {
             if (this.groupIds) {
               try {
-                people = (await findGroupsFromGroupIds(
+                people = await findGroupsFromGroupIds(
                   graph,
                   input,
                   this.groupIds,
                   this.showMax,
                   this.groupType,
                   this.userFilters
-                )) as IGroup[];
+                );
               } catch (_) {
                 // no-op
               }
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 66cfd6169c..906bbdb953 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -13,7 +13,7 @@ import {
   customElementHelper,
   mgtHtml
 } from '@microsoft/mgt-element';
-import { Contact, Presence, Person } from '@microsoft/microsoft-graph-types';
+import { Presence } from '@microsoft/microsoft-graph-types';
 import { html, TemplateResult, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -22,7 +22,7 @@ import { getGroupImage, getPersonImage } from '../../graph/graph.photos';
 import { getUserPresence } from '../../graph/graph.presence';
 import { findUsers, getMe, getUser } from '../../graph/graph.user';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
-import { AvatarSize, IDynamicPerson, IUser, IGroup, IContact, ViewType } from '../../graph/types';
+import { AvatarSize, IDynamicPerson, IUser, ViewType } from '../../graph/types';
 import '../../styles/style-helper';
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
 import { MgtPersonCard } from '../mgt-person-card/mgt-person-card';
@@ -32,6 +32,7 @@ import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-person-css';
 import { MgtPersonConfig, PersonViewType, avatarType } from './mgt-person-types';
 import { strings } from './strings';
+import { isUser, isContact } from '../../graph/entityType';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 export { PersonCardInteraction } from '../PersonCardInteraction';
@@ -55,18 +56,6 @@ export const defaultPersonProperties = [
   'userType'
 ];
 
-export const isGroup = (obj: IDynamicPerson): obj is IGroup => {
-  return obj.entityType === 'group';
-};
-
-export const isUser = (obj: IDynamicPerson): obj is IUser => {
-  return obj.entityType === 'user';
-};
-
-export const isContact = (obj: IDynamicPerson): obj is IContact => {
-  return obj.entityType === 'contact';
-};
-
 /**
  * The person component is used to display a person or contact by using their photo, name, and/or email address.
  *
@@ -1126,15 +1115,6 @@ export class MgtPerson extends MgtTemplatedComponent {
     let details = this.personDetailsInternal || this.personDetails || this.fallbackDetails;
 
     if (details) {
-      if ('personType' in details || 'userType' in details) {
-        details.entityType = 'user';
-      }
-      if ('initials' in details) {
-        details.entityType = 'contact';
-      }
-      if ('groupTypes' in details) {
-        details.entityType = 'group';
-      }
       if (
         !details.personImage &&
         this.fetchImage &&
@@ -1179,7 +1159,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       if (people?.length) {
         this.personDetailsInternal = people[0] as IUser;
         this.personDetails = people[0] as IUser;
-        if (this._avatarType === 'photo' && !this.disableImageFetch) {
+        if (this._avatarType === avatarType.photo && !this.disableImageFetch) {
           const image = await getPersonImage(graph, people[0] as IUser, MgtPerson.config.useContactApis);
 
           if (image) {
@@ -1234,8 +1214,6 @@ export class MgtPerson extends MgtTemplatedComponent {
     let initials = '';
     if (isUser(person)) {
       initials += person.givenName[0].toUpperCase();
-    }
-    if (isUser(person)) {
       initials += person.surname[0].toUpperCase();
     }
 
diff --git a/packages/mgt-components/src/graph/entityType.ts b/packages/mgt-components/src/graph/entityType.ts
new file mode 100644
index 0000000000..6fee2e53b5
--- /dev/null
+++ b/packages/mgt-components/src/graph/entityType.ts
@@ -0,0 +1,20 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { IDynamicPerson, IContact, IGroup, IUser } from './types';
+
+export const isGroup = (obj: IDynamicPerson): obj is IGroup => {
+  return 'groupTypes' in obj;
+};
+
+export const isUser = (obj: IDynamicPerson): obj is IUser => {
+  return 'personType' in obj || 'userType' in obj;
+};
+
+export const isContact = (obj: IDynamicPerson): obj is IContact => {
+  return 'initials' in obj;
+};
diff --git a/packages/mgt-components/src/graph/types.ts b/packages/mgt-components/src/graph/types.ts
index cd7b6d06a7..941d958c49 100644
--- a/packages/mgt-components/src/graph/types.ts
+++ b/packages/mgt-components/src/graph/types.ts
@@ -14,9 +14,9 @@ import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
  * In addition, this custom type also defines the optional `personImage` property,
  * which is used to pass the image around to other components as part of the person object.
  */
-export type IUser = (MicrosoftGraph.User | MicrosoftGraph.Person) & { entityType: 'user' };
-export type IContact = MicrosoftGraph.Contact & { entityType: 'contact' };
-export type IGroup = MicrosoftGraph.Group & { entityType: 'group' };
+export type IUser = MicrosoftGraph.User | MicrosoftGraph.Person;
+export type IContact = MicrosoftGraph.Contact;
+export type IGroup = MicrosoftGraph.Group;
 
 export type IDynamicPerson = (IUser | IContact | IGroup) & {
   /**
diff --git a/packages/mgt-components/src/index.ts b/packages/mgt-components/src/index.ts
index e295562d56..573989c5d6 100644
--- a/packages/mgt-components/src/index.ts
+++ b/packages/mgt-components/src/index.ts
@@ -9,3 +9,4 @@ export * from './components/components';
 export * from './components/preview';
 export * from './graph/types';
 export * from './styles/theme-manager';
+export * from './graph/entityType';
diff --git a/stories/components/peoplePicker/peoplePicker.stories.js b/stories/components/peoplePicker/peoplePicker.stories.js
index 6182101c3f..056eeb5b0c 100644
--- a/stories/components/peoplePicker/peoplePicker.stories.js
+++ b/stories/components/peoplePicker/peoplePicker.stories.js
@@ -42,28 +42,32 @@ export const selectionChangedEvent = () => html`
  `;
 
 export const getEntityType = () => html`
-  <mgt-people-picker></mgt-people-picker>
-  <!-- Group entityType -->
-  <!-- <mgt-people-picker type="group"></mgt-people-picker> -->
+  <mgt-people-picker
+    type="person">
+  </mgt-people-picker>
+    <!-- Group entityType -->
+    <!-- <mgt-people-picker type="group"></mgt-people-picker> -->
 
-  <div class="entity-type"></div>
+    <div class="entity-type"></div>
 
-<script type="module">
-  import { isUser, isContact, isGroup} from '@microsoft/mgt-components';
-  let entityType = unknown;
+  <script type="module">
+  import { isUser, isContact, isGroup } from '@microsoft/mgt-components';
+  let entityType;
   const output = document.querySelector('.entity-type');
-  document.querySelector('mgt-people-picker').addEventListener('selectionChanged', e => {
+  const handleSelection = (e) => {
     const selected = e.detail[0];
-    if (isUser(selected)) {
-      entityType = 'user';
+    if (isGroup(selected)) {
+        entityType = 'group'
+    } else if (isUser(selected)) {
+        entityType = 'user'
     } else if (isContact(selected)) {
-      entityType = 'contact';
-    } else if (isGroup(selected)) {
-      entityType = 'group';
+        entityType = 'contact'
     }
-    output.innerHTML = `<b>entityType:</b> ${entityType}`;
-  });
-</script>
+    output.innerHTML = '<b>entityType:</b>' + entityType;
+  }
+  document.querySelector('mgt-people-picker').addEventListener('selectionChanged', e => handleSelection(e));
+
+  </script>
 `;
 
 export const selectGroupsById = () => html`

From c3435fe212e46b14d0467e481abbf0fc92e453d1 Mon Sep 17 00:00:00 2001
From: Mnickii <miaronkirote@gmail.com>
Date: Thu, 28 Sep 2023 09:51:52 +0300
Subject: [PATCH 09/12] cleanup of casts introduced for entityType changes

---
 .../src/components/mgt-contact/mgt-contact.ts |  5 +-
 .../mgt-organization/mgt-organization.ts      |  8 +--
 .../mgt-people-picker/mgt-people-picker.ts    | 51 ++++++++-----------
 .../src/components/mgt-people/mgt-people.ts   | 21 ++------
 .../mgt-person-card/mgt-person-card.ts        | 16 +++---
 .../mgt-person-card/mgt-person-card.types.ts  |  3 +-
 6 files changed, 44 insertions(+), 60 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts b/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
index c0341b47fc..d41980c668 100644
--- a/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
+++ b/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
@@ -15,7 +15,6 @@ import { BasePersonCardSection } from '../BasePersonCardSection';
 import { styles } from './mgt-contact-css';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { strings } from './strings';
-import { IUser } from '../../graph/types';
 
 /**
  * Represents a contact part and its metadata
@@ -77,7 +76,7 @@ export class MgtContact extends BasePersonCardSection {
   private readonly _contactParts: Record<string, IContactPart> = {
     email: {
       icon: getSvg(SvgIcon.Email),
-      onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person as IUser)),
+      onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person)),
       showCompact: true,
       title: this.strings.emailTitle
     },
@@ -120,7 +119,7 @@ export class MgtContact extends BasePersonCardSection {
     super();
     this._person = person;
 
-    this._contactParts.email.value = getEmailFromGraphEntity(this._person as IUser);
+    this._contactParts.email.value = getEmailFromGraphEntity(this._person);
     this._contactParts.chat.value = this._person.userPrincipalName;
     this._contactParts.cellPhone.value = this._person.mobilePhone;
     this._contactParts.department.value = this._person.department;
diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
index c9e8da6566..1686bb9a3e 100644
--- a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
+++ b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
@@ -251,9 +251,9 @@ export class MgtOrganization extends BasePersonCardSection {
             <div
               class="org-member org-member--direct-report"
               @keydown=${(e: KeyboardEvent) => {
-                if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person as IDynamicPerson);
+                if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person);
               }}
-              @click=${() => this.navigateCard(person as IDynamicPerson)}
+              @click=${() => this.navigateCard(person)}
             >
               <div class="org-member__person">
                 <mgt-person
@@ -292,9 +292,9 @@ export class MgtOrganization extends BasePersonCardSection {
             <div
               class="direct-report"
               @keydown=${(e: KeyboardEvent) => {
-                if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person as IDynamicPerson);
+                if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person);
               }}
-              @click=${() => this.navigateCard(person as IDynamicPerson)}
+              @click=${() => this.navigateCard(person)}
             >
               <mgt-person
                 .personDetails=${person}
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 493b64b3ac..f460bee78a 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -24,7 +24,7 @@ import {
   getUsersForUserIds,
   getUsers
 } from '../../graph/graph.user';
-import { IDynamicPerson, IUser, ViewType } from '../../graph/types';
+import { IDynamicPerson, ViewType } from '../../graph/types';
 import {
   Providers,
   ProviderState,
@@ -640,7 +640,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       for (const id in userIds) {
         const userId = userIds[id];
         try {
-          const personDetails = (await getUser(graph, userId, defaultPersonProperties)) as IUser;
+          const personDetails = await getUser(graph, userId, defaultPersonProperties);
           this.addPerson(personDetails);
         } catch (e: unknown) {
           // This caters for allow-any-email property if it's enabled on the component
@@ -651,7 +651,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                 mail: userId,
                 displayName: userId
               };
-              this.addPerson(anyMailUser as IUser);
+              this.addPerson(anyMailUser);
             }
           }
         }
@@ -1011,19 +1011,19 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               if (this.groupId) {
                 try {
                   if (this.type === PersonType.group) {
-                    this._groupPeople = (await findGroupMembers(
+                    this._groupPeople = await findGroupMembers(
                       graph,
                       null,
                       this.groupId,
                       this.showMax,
                       this.type,
                       this.transitiveSearch
-                    )) as IUser[];
+                    );
                     for (const person of this._groupPeople) {
                       Object.assign(person, { entityType: 'user' });
                     }
                   } else {
-                    this._groupPeople = (await findGroupMembers(
+                    this._groupPeople = await findGroupMembers(
                       graph,
                       null,
                       this.groupId,
@@ -1032,7 +1032,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                       this.transitiveSearch,
                       this.userFilters,
                       this.peopleFilters
-                    )) as IUser[];
+                    );
                   }
                 } catch (_) {
                   this._groupPeople = [];
@@ -1055,7 +1055,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                       this.transitiveSearch,
                       this.userFilters
                     );
-                    this._groupPeople = peopleInGroups as IUser[];
+                    this._groupPeople = peopleInGroups;
                   } catch (_) {
                     this._groupPeople = [];
                   }
@@ -1065,13 +1065,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
             people = this._groupPeople || [];
           } else if (this.type === PersonType.person || this.type === PersonType.any) {
             if (this.userIds) {
-              people = (await getUsersForUserIds(graph, this.userIds, '', this.userFilters)) as IUser[];
+              people = await getUsersForUserIds(graph, this.userIds, '', this.userFilters);
             } else {
               const isUserOrContactType = this.userType === UserType.user || this.userType === UserType.contact;
               if (this._userFilters && isUserOrContactType) {
-                people = (await getUsers(graph, this._userFilters, this.showMax)) as IUser[];
+                people = await getUsers(graph, this._userFilters, this.showMax);
               } else {
-                people = (await getPeople(graph, this.userType, this._peopleFilters, this.showMax)) as IUser[];
+                people = await getPeople(graph, this.userType, this._peopleFilters, this.showMax);
               }
             }
           } else if (this.type === PersonType.group) {
@@ -1104,12 +1104,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         !this.defaultSelectedUsers.length &&
         !this.defaultSelectedGroups.length
       ) {
-        this.defaultSelectedUsers = (await getUsersForUserIds(
-          graph,
-          this.defaultSelectedUserIds,
-          '',
-          this.userFilters
-        )) as IUser[];
+        this.defaultSelectedUsers = await getUsersForUserIds(graph, this.defaultSelectedUserIds, '', this.userFilters);
         this.defaultSelectedGroups = await getGroupsForGroupIds(
           graph,
           this.defaultSelectedGroupIds,
@@ -1134,7 +1129,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
         if (this.groupId) {
           people =
-            ((await findGroupMembers(
+            (await findGroupMembers(
               graph,
               input,
               this.groupId,
@@ -1143,7 +1138,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               this.transitiveSearch,
               this.userFilters,
               this.peopleFilters
-            )) as IUser[]) || [];
+            )) || [];
         } else {
           if (this.type === PersonType.person || this.type === PersonType.any) {
             try {
@@ -1152,24 +1147,22 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                 // we might have a user-filters property set, search for users with it.
                 if (this.userIds?.length) {
                   // has the user-ids proerty set
-                  people = (await getUsersForUserIds(graph, this.userIds, input, this._userFilters)) as IUser[];
+                  people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
                 } else {
-                  people = (await findUsers(graph, input, this.showMax, this._userFilters)) as IUser[];
+                  people = await findUsers(graph, input, this.showMax, this._userFilters);
                 }
               } else {
                 if (!this.groupIds) {
                   if (this.userIds?.length) {
                     // has the user-ids proerty set
-                    people = (await getUsersForUserIds(graph, this.userIds, input, this._userFilters)) as IUser[];
+                    people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
                   } else {
-                    people =
-                      ((await findPeople(graph, input, this.showMax, this.userType, this._peopleFilters)) as IUser[]) ||
-                      [];
+                    people = (await findPeople(graph, input, this.showMax, this.userType, this._peopleFilters)) || [];
                   }
                 } else {
                   // Does not work when the PersonType = person.
                   try {
-                    people = (await findUsersFromGroupIds(
+                    people = await findUsersFromGroupIds(
                       graph,
                       input,
                       this.groupIds,
@@ -1177,7 +1170,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                       this.type,
                       this.transitiveSearch,
                       this.userFilters
-                    )) as IUser[];
+                    );
                   } catch (_) {
                     // nop
                   }
@@ -1196,7 +1189,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               this.type !== PersonType.person
             ) {
               try {
-                const users = ((await findUsers(graph, input, this.showMax, this._userFilters)) as IUser[]) || [];
+                const users = (await findUsers(graph, input, this.showMax, this._userFilters)) || [];
 
                 // make sure only unique people
                 const peopleIds = new Set(people.map(p => p.id));
@@ -1471,7 +1464,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         mail: this.userInput,
         displayName: this.userInput
       };
-      this.addPerson(anyMailUser as IUser);
+      this.addPerson(anyMailUser);
     }
     this.hideFlyout();
     if (this.input) {
diff --git a/packages/mgt-components/src/components/mgt-people/mgt-people.ts b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
index 00e35418f5..74bf23cb36 100644
--- a/packages/mgt-components/src/components/mgt-people/mgt-people.ts
+++ b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
@@ -490,26 +490,15 @@ export class MgtPeople extends MgtTemplatedComponent {
 
         // populate people
         if (this.groupId) {
-          this.people = (await findGroupMembers(
-            graph,
-            null,
-            this.groupId,
-            this.showMax,
-            PersonType.person
-          )) as IDynamicPerson[];
+          this.people = await findGroupMembers(graph, null, this.groupId, this.showMax, PersonType.person);
         } else if (this.userIds || this.peopleQueries) {
           this.people = this.userIds
-            ? ((await getUsersForUserIds(graph, this.userIds, '', '', this._fallbackDetails)) as IDynamicPerson[])
-            : ((await getUsersForPeopleQueries(graph, this.peopleQueries, this._fallbackDetails)) as IDynamicPerson[]);
+            ? await getUsersForUserIds(graph, this.userIds, '', '', this._fallbackDetails)
+            : await getUsersForPeopleQueries(graph, this.peopleQueries, this._fallbackDetails);
         } else if (this.resource) {
-          this.people = (await getPeopleFromResource(
-            graph,
-            this.version,
-            this.resource,
-            this.scopes
-          )) as IDynamicPerson[];
+          this.people = await getPeopleFromResource(graph, this.version, this.resource, this.scopes);
         } else {
-          this.people = (await getPeople(graph)) as IDynamicPerson[];
+          this.people = await getPeople(graph);
         }
 
         // populate presence for people
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
index b5a8afd369..cc1a8c4f79 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -21,7 +21,7 @@ import { IGraph } from '@microsoft/mgt-element';
 import { Presence, User, Person } from '@microsoft/microsoft-graph-types';
 
 import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
-import { IDynamicPerson, IUser, ViewType } from '../../graph/types';
+import { IDynamicPerson, ViewType } from '../../graph/types';
 import { getPersonImage } from '../../graph/graph.photos';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
@@ -36,6 +36,7 @@ import { MgtOrganization } from '../mgt-organization/mgt-organization';
 import { MgtProfile } from '../mgt-profile/mgt-profile';
 import { MgtPersonCardConfig, MgtPersonCardState } from './mgt-person-card.types';
 import { strings } from './strings';
+import { isUser } from '../../graph/entityType';
 
 import '../sub-components/mgt-spinner/mgt-spinner';
 
@@ -644,11 +645,11 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    */
   protected renderPersonSubtitle(person?: IDynamicPerson): TemplateResult {
     person = person || this.internalPersonDetails;
-    if (!(person as Person).department) {
+    if (!isUser(person) || !person.department) {
       return;
     }
     return html`
-       <div class="department">${(person as Person).department}</div>
+       <div class="department">${person.department}</div>
      `;
   }
 
@@ -1016,8 +1017,11 @@ export class MgtPersonCard extends MgtTemplatedComponent {
 
     // check if personDetail already populated
     if (this.personDetails) {
-      const user = this.personDetails as IUser;
-      const id = user.userPrincipalName || user.id;
+      const user = this.personDetails;
+      let id: string;
+      if (isUser(user)) {
+        id = user.userPrincipalName || user.id;
+      }
 
       // if we have an id but no email, we should get data from the graph
       // in some graph calls, the user object does not contain the email
@@ -1036,7 +1040,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       const people = await findPeople(graph, this.personQuery, 1);
 
       if (people?.length) {
-        this.personDetails = people[0] as IDynamicPerson;
+        this.personDetails = people[0];
         await getPersonImage(graph, this.personDetails, MgtPersonCard.config.useContactApis).then(image => {
           if (image) {
             this.personDetails.personImage = image;
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.types.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.types.ts
index dcdf6030c0..abb131b1e2 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.types.ts
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.types.ts
@@ -7,7 +7,6 @@
 
 import { Message, Person, SharedInsight, User } from '@microsoft/microsoft-graph-types';
 import { Profile } from '@microsoft/microsoft-graph-types-beta';
-import { IUser } from '../../graph/types';
 
 /**
  * Person Card Global Configuration Type
@@ -82,7 +81,7 @@ export interface MgtPersonCardConfig {
   };
 }
 
-export type UserWithManager = IUser & { manager?: UserWithManager };
+export type UserWithManager = User & { manager?: UserWithManager };
 
 export interface MgtPersonCardState {
   directReports?: User[];

From 90ab19879cc4170062c923365f1777ec91cafa77 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Thu, 28 Sep 2023 17:31:04 +0300
Subject: [PATCH 10/12] remove remaining casts

---
 .../src/components/mgt-person/mgt-person.ts          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 906bbdb953..910d00ac78 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -22,7 +22,7 @@ import { getGroupImage, getPersonImage } from '../../graph/graph.photos';
 import { getUserPresence } from '../../graph/graph.presence';
 import { findUsers, getMe, getUser } from '../../graph/graph.user';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
-import { AvatarSize, IDynamicPerson, IUser, ViewType } from '../../graph/types';
+import { AvatarSize, IDynamicPerson, ViewType } from '../../graph/types';
 import '../../styles/style-helper';
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
 import { MgtPersonCard } from '../mgt-person-card/mgt-person-card';
@@ -1140,9 +1140,9 @@ export class MgtPerson extends MgtTemplatedComponent {
         person = await getUserWithPhoto(graph, this.userId, personProps);
       } else {
         if (this.personQuery === 'me') {
-          person = (await getMe(graph, personProps)) as IUser;
+          person = await getMe(graph, personProps);
         } else {
-          person = (await getUser(graph, this.userId, personProps)) as IUser;
+          person = await getUser(graph, this.userId, personProps);
         }
       }
       this.personDetailsInternal = person;
@@ -1157,10 +1157,10 @@ export class MgtPerson extends MgtTemplatedComponent {
       }
 
       if (people?.length) {
-        this.personDetailsInternal = people[0] as IUser;
-        this.personDetails = people[0] as IUser;
+        this.personDetailsInternal = people[0];
+        this.personDetails = people[0];
         if (this._avatarType === avatarType.photo && !this.disableImageFetch) {
-          const image = await getPersonImage(graph, people[0] as IUser, MgtPerson.config.useContactApis);
+          const image = await getPersonImage(graph, people[0], MgtPerson.config.useContactApis);
 
           if (image) {
             this.personDetailsInternal.personImage = image;

From 1961e2200129e33f5b8f7a21163007b806217954 Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Thu, 28 Sep 2023 17:35:09 +0300
Subject: [PATCH 11/12] remove IDynamicPerson casts

---
 .../src/components/mgt-organization/mgt-organization.ts   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
index 1686bb9a3e..3514084b30 100644
--- a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
+++ b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
@@ -13,7 +13,7 @@ import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { MgtPersonCardState, UserWithManager } from '../mgt-person-card/mgt-person-card.types';
 import { styles } from './mgt-organization-css';
 import { strings } from './strings';
-import { IDynamicPerson, ViewType } from '../../graph/types';
+import { ViewType } from '../../graph/types';
 import { mgtHtml, customElement } from '@microsoft/mgt-element';
 
 /**
@@ -177,7 +177,7 @@ export class MgtOrganization extends BasePersonCardSection {
    * @returns {TemplateResult}
    * @memberof MgtOrganization
    */
-  protected renderManager(person: IDynamicPerson): TemplateResult {
+  protected renderManager(person: User): TemplateResult {
     return mgtHtml`
       <div
         class="org-member"
@@ -340,7 +340,7 @@ export class MgtOrganization extends BasePersonCardSection {
    * @returns {TemplateResult}
    * @memberof MgtOrganization
    */
-  protected renderCoworker(person: IDynamicPerson): TemplateResult {
+  protected renderCoworker(person: User): TemplateResult {
     return mgtHtml`
       <div
         class="coworker"
@@ -384,7 +384,7 @@ export class MgtOrganization extends BasePersonCardSection {
        <div class="divider"></div>
        <div class="subtitle" tabindex="0">${subtitle}</div>
        <div>
-         ${people.slice(0, 6).map((person: IDynamicPerson) => this.renderCoworker(person))}
+         ${people.slice(0, 6).map(person => this.renderCoworker(person))}
        </div>
      `;
   }

From 0f45131f16d801c0eb5a9b249ceda17fb5e9673c Mon Sep 17 00:00:00 2001
From: Nickii Miaro <miaronkirote@gmail.com>
Date: Thu, 28 Sep 2023 17:36:28 +0300
Subject: [PATCH 12/12] Update
 packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

---
 .../src/components/mgt-people-picker/mgt-people-picker.ts      | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index f460bee78a..9002b2f0fa 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -1019,9 +1019,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                       this.type,
                       this.transitiveSearch
                     );
-                    for (const person of this._groupPeople) {
-                      Object.assign(person, { entityType: 'user' });
-                    }
                   } else {
                     this._groupPeople = await findGroupMembers(
                       graph,