Skip to content

fix: display contact icons with personDetails #3276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Musale Martin (musale) merged 4 commits into from
Aug 28, 2024
Merged

fix: display contact icons with personDetails #3276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ccdb8f0
fix contact icon display
Mnickii Aug 21, 2024
f970ea9
fix icon display with personDetails
Mnickii Aug 21, 2024
5c4ddb9
Merge branch 'main' into fix/person-card-contact-icons
Mnickii Aug 22, 2024
9b3af90
use already imported Person
Mnickii Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/mgt-components/src/components/mgt-person-card/mgt-person-card.graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import { BatchResponse, CacheItem, CacheService, CacheStore, IBatch, IGraph, prepScopes } from '@microsoft/mgt-element';
import { Chat, ChatMessage } from '@microsoft/microsoft-graph-types';
import { Chat, ChatMessage, Person } from '@microsoft/microsoft-graph-types';
import { Profile } from '@microsoft/microsoft-graph-types-beta';

import { getEmailFromGraphEntity } from '../../graph/graph.people';
Expand Down Expand Up @@ -48,7 +48,7 @@ export const getPersonCardGraphData = async (
personDetails: IDynamicPerson,
isMe: boolean
): Promise<MgtPersonCardState> => {
const userId = personDetails.id;
const userId: string = personDetails.id || (personDetails as Person).userPrincipalName;
const email = getEmailFromGraphEntity(personDetails);
const cache: CacheStore<CacheCardState> = CacheService.getCache<CacheCardState>(
schemas.users,
Expand Down
33 changes: 16 additions & 17 deletions packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -649,7 +649,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory

// Chat
let chat: TemplateResult;
if (userPerson?.userPrincipalName) {
if (userPerson?.userPrincipalName || userPerson?.mail) {
ariaLabel = `${this.strings.chatButtonLabel} ${person.displayName}`;
chat = html`
<fluent-button class="icon"
Expand All @@ -662,7 +662,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory

// Video
let video: TemplateResult;
if (userPerson?.userPrincipalName) {
if (userPerson?.userPrincipalName || userPerson?.mail) {
ariaLabel = `${this.strings.videoButtonLabel} ${person.displayName}`;
video = html`
<fluent-button class="icon"
Expand Down Expand Up @@ -990,15 +990,12 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
// check if personDetail already populated
if (this.personDetails) {
const user = this.personDetails;
let id: string;
if (isUser(user)) {
id = user.userPrincipalName || user.id;
}
const userId = (user as Person).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
if (id && !getEmailFromGraphEntity(user)) {
const person = await getUserWithPhoto(graph, id);
if (userId && !getEmailFromGraphEntity(user)) {
const person = await getUserWithPhoto(graph, userId);
this.personDetails = person;
this.personImage = this.getImage();
}
Expand Down Expand Up @@ -1041,9 +1038,11 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
}
}

const personId = this.personDetails?.id || (this.personDetails as Person)?.userPrincipalName;

// populate state
if (this.personDetails?.id) {
this._cardState = await getPersonCardGraphData(graph, this.personDetails, this._me === this.personDetails.id);
if (personId) {
this._cardState = await getPersonCardGraphData(graph, this.personDetails, this._me === personId);
}

this.loadSections();
Expand Down Expand Up @@ -1096,8 +1095,8 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
};

private get hasPhone(): boolean {
const user = this.personDetails as User;
const person = this.personDetails as microsoftgraph.Person;
const user = this.internalPersonDetails as User;
const person = this.internalPersonDetails as Person;
return Boolean(user?.businessPhones?.length) || Boolean(person?.phones?.length);
}

Expand All @@ -1108,8 +1107,8 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
* @memberof MgtPersonCard
*/
protected callUser = () => {
const user = this.personDetails as User;
const person = this.personDetails as microsoftgraph.Person;
const user = this.internalPersonDetails as User;
const person = this.internalPersonDetails as Person;

if (user?.businessPhones?.length) {
const phone = user.businessPhones[0];
Expand Down Expand Up @@ -1163,8 +1162,8 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
*/
protected videoCallUser = () => {
const user = this.personDetails as User;
if (user?.userPrincipalName) {
const users: string = user.userPrincipalName;
if (user?.userPrincipalName || user?.mail) {
const users: string = user.userPrincipalName || user.mail;

const url = `https://teams.microsoft.com/l/call/0/0?users=${users}&withVideo=true`;

Expand Down Expand Up @@ -1258,7 +1257,7 @@ export class MgtPersonCard extends MgtTemplatedTaskComponent implements IHistory
return this.personImage;
}

const person = this.personDetails;
const person = this.internalPersonDetails;
return person?.personImage ? person.personImage : null;
}

Expand Down