diff --git a/package.json b/package.json
index cca4267b3..9c264f4f8 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
"build:mgt-chat": "lerna run build --scope @microsoft/mgt-chat",
"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 718ac98dd..9002b2f0f 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';
@@ -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);
+ 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
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 578abf12f..cc1a8c4f7 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
@@ -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';
@@ -476,7 +477,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();
}
@@ -644,7 +645,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
*/
protected renderPersonSubtitle(person?: IDynamicPerson): TemplateResult {
person = person || this.internalPersonDetails;
- if (!person.department) {
+ if (!isUser(person) || !person.department) {
return;
}
return html`
@@ -1016,8 +1017,11 @@ export class MgtPersonCard extends MgtTemplatedComponent {
// check if personDetail already populated
if (this.personDetails) {
- const user = this.personDetails as User;
- 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
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 b9d259108..910d00ac7 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 { 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';
@@ -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';
@@ -39,7 +40,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 +52,8 @@ const defaultPersonProperties = [
'preferredLanguage',
'surname',
'userPrincipalName',
- 'id'
+ 'id',
+ 'userType'
];
/**
@@ -1205,15 +1207,13 @@ 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.givenName) {
+ if (isUser(person)) {
initials += person.givenName[0].toUpperCase();
- }
- if (person.surname) {
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 000000000..6fee2e53b
--- /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 73156dcfa..941d958c4 100644
--- a/packages/mgt-components/src/graph/types.ts
+++ b/packages/mgt-components/src/graph/types.ts
@@ -14,7 +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) & {
+export type IUser = MicrosoftGraph.User | MicrosoftGraph.Person;
+export type IContact = MicrosoftGraph.Contact;
+export type IGroup = MicrosoftGraph.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.
diff --git a/packages/mgt-components/src/index.ts b/packages/mgt-components/src/index.ts
index bbf2a0ce0..3d9d23808 100644
--- a/packages/mgt-components/src/index.ts
+++ b/packages/mgt-components/src/index.ts
@@ -13,3 +13,4 @@ export * from './graph/graph.photos';
export * from './graph/cacheStores';
export * from './styles/theme-manager';
export * from './utils/Utils';
+export * from './graph/entityType';
diff --git a/stories/components/peoplePicker/peoplePicker.stories.js b/stories/components/peoplePicker/peoplePicker.stories.js
index 8bb249e67..39ebb097e 100644
--- a/stories/components/peoplePicker/peoplePicker.stories.js
+++ b/stories/components/peoplePicker/peoplePicker.stories.js
@@ -40,6 +40,35 @@ export const selectionChangedEvent = () => html`
`;
+export const getEntityType = () => html`
+