person-card: buttons not working when using person-details

[Rafaelki]

Bug Report

Prerequisites

• Can you reproduce the problem?
• Are you running the latest version?
• Are you reporting to the correct repository?
• Did you perform a cursory search?

For more information, see the CONTRIBUTING guide.

Description

When the person component is defined using person-details, the buttons in the person-card for chat, video and call are visible but not working on click.

Steps to Reproduce

1. Go to the Microsoft Graph Toolkit Playground
2. Add this component in the html tab, replacing [email protected] with a valid email of a user in your organization:
   <mgt-person person-details='{"displayName":"Frank Herbert1","jobTitle":"jobTitle","department":"department","id":"[email protected]"}' view="threelines" person-card="click" />
3. Note that the person component renders the name, department and job title indecated in the person-details object. In the screenshot above the name is Frank Herbert1.
4. Click the person component to open the person-card
5. Note that the person name, department and job title inside the card have been resolved with the actual values of the user indicated in the "id" attribute. In the screenshot above the actual name is "Ruth Bader Ginsburg".
6. Click the buttons chat, video and call and note that nothing happens.

Expected behavior:

1. chat, video and call buttons should work, opening the corresponding application
2. buttons that are not going to work should not be visible

Actual behavior:
chat, video and call buttons are not working

Workaround

I found a workaround by adding the properties userPrincipalName and businessPhones in the person-details object, but this should not be necessary as they can be obtained when the actual name is resolved. I think this was the case in previous versions of MGT.

<mgt-person person-details='{"displayName":"Frank Herbert2","jobTitle":"jobTitle","department":"department","id":"[email protected]","userPrincipalName":"[email protected]","businessPhones":["1234"]}' view="threelines" person-card="click" />