[BUG] Incorrect Presence Display

[dougroutledge]

The avatar icon with presence displays green when the presence is "Available Idle" and "Inactive" where MS Teams and the other MS apps display the yellow away icon. It corrects once the presence changes to Away, but this should be correct to match the product line.

[musale]

@dougroutledge thank you for raising this issue. I wanted to clarify on reproducing this issue:

1. The mgt-person component with presence "Available Idle" and "Inactive" is green. This should be yellow away icon.
   
2. The mgt-person component with presence "Away" is yellow.
   

So the second one is the correct icon to use for "Available Idle" and "Inactive" presence?

I also want to draw your attention to this doc https://learn.microsoft.com/en-us/microsoftteams/presence-admins#presence-states-in-teams that we used to create the rendering options based on availability(statuses) and activity. From it we see that the yellow icon is for away (away and away last seen time activities) and be right back statuses.

For your case, the availability is 'AvailableIdle' and the activity is unknown, which defaults to the green icon:

For "Inactive", it should be like this as this is an unknown status in mgt (and also in the teams presence list) and will display like this:

For "Away" the display is correct because the activities we check for are "out of office" or "away last seen time". The "away last seen time" and unknown activities (in this example "Inactive") default to the yellow icon:

I'm not sure of the combination of availability status and activity that is causing this mismatch for you. If you can provide more information on this, we can be able to pinpoint the appropriate way to create the correct icon.

Here is the functionality that is used to render the icon in the mgt-person component

microsoft-graph-toolkit/packages/mgt-components/src/components/mgt-person/mgt-person.ts

Lines 771 to 877 in e2edc88

	protected renderPresence(presence: Presence): TemplateResult {
	if (!this.showPresence || !presence) {
	return html``;
	}
	let presenceIcon: TemplateResult;
	const { activity, availability } = presence;
	switch (availability) {
	case 'Available':
	case 'AvailableIdle':
	switch (activity) {
	case 'OutOfOffice':
	presenceIcon = getSvg(SvgIcon.PresenceOofAvailable);
	break;
	// OutOfOffice and Uknowns
	case 'Available':
	default:
	presenceIcon = getSvg(SvgIcon.PresenceAvailable);
	break;
	}
	break;
	case 'Busy':
	case 'BusyIdle':
	switch (activity) {
	case 'OutOfOffice':
	case 'OnACall':
	presenceIcon = getSvg(SvgIcon.PresenceOofBusy);
	break;
	// Busy,InACall,InAConferenceCall,InAMeeting, Unknown
	case 'Busy':
	case 'InACall':
	case 'InAMeeting':
	case 'InAConferenceCall':
	default:
	presenceIcon = getSvg(SvgIcon.PresenceBusy);
	break;
	}
	break;
	case 'DoNotDisturb':
	switch (activity) {
	case 'OutOfOffice':
	presenceIcon = getSvg(SvgIcon.PresenceOofDnd);
	break;
	case 'Presenting':
	case 'Focusing':
	case 'UrgentInterruptionsOnly':
	default:
	presenceIcon = getSvg(SvgIcon.PresenceDnd);
	break;
	}
	break;
	case 'Away':
	switch (activity) {
	case 'OutOfOffice':
	presenceIcon = getSvg(SvgIcon.PresenceOofAway);
	break;
	case 'AwayLastSeenTime':
	default:
	presenceIcon = getSvg(SvgIcon.PresenceAway);
	break;
	}
	break;
	case 'BeRightBack':
	switch (activity) {
	default:
	presenceIcon = getSvg(SvgIcon.PresenceAway);
	break;
	}
	break;
	case 'Offline':
	switch (activity) {
	case 'Offline':
	presenceIcon = getSvg(SvgIcon.PresenceOffline);
	break;
	case 'OutOfOffice':
	case 'OffWork':
	presenceIcon = getSvg(SvgIcon.PresenceOofAway);
	break;
	default:
	presenceIcon = getSvg(SvgIcon.PresenceStatusUnknown);
	break;
	}
	break;
	default:
	presenceIcon = getSvg(SvgIcon.PresenceStatusUnknown);
	break;
	}
	const presenceWrapperClasses = classMap({
	'presence-wrapper': true,
	noline: this.isNoLine(),
	oneline: this.isOneLine()
	});
	const formattedActivity = (this.strings[activity] as string) ?? nothing;
	return html`
	<span
	class="${presenceWrapperClasses}"
	title="${formattedActivity}"
	aria-label="${formattedActivity}"
	role="img">
	${presenceIcon}
	</span>
	`;
	}

[dougroutledge]

The issue is with this combination, Teams is yellow, and MGT is green. So it is not consistent.

[dougroutledge]

AvailableIdle is not an "unknown" availability, it is defined the MS graph presence object. (Above)