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` + + + + + +
+ + +`; + export const selectGroupsById = () => html`