Skip to content
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

Jump to bottom

fix: add Group entity to IDynamicPerson type and introduce typeguards to find the entity type #2688

Merged
merged 19 commits into from
Sep 28, 2023
Merged

fix: add Group entity to IDynamicPerson type and introduce typeguards to find the entity type #2688

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
074e5a9
fix: add Group entity type to IDynamicPerson and entityType property
Mnickii Aug 29, 2023
166f8e1
set entityType to IDynamicPerson
Mnickii Sep 4, 2023
ab432a2
Merge branch 'main' into bug-2649
musale Sep 7, 2023
21f6024
Merge branch 'main' into bug-2649
Mnickii Sep 18, 2023
d938559
implement entityType guards, fix build
Mnickii Sep 18, 2023
1a40aac
Merge branch 'main' into bug-2649
Mnickii Sep 19, 2023
b23f438
refactor getInitials to use type guard functions
Mnickii Sep 18, 2023
ac0555a
Merge branch 'main' into bug-2649
Mnickii Sep 21, 2023
d3cff43
add entityType story
Mnickii Sep 20, 2023
3fe71ec
Export typeguards
Mnickii Sep 25, 2023
4d40572
Merge branch 'main' into bug-2649
Mnickii Sep 25, 2023
e2ad7da
Merge branch 'main' into bug-2649
Mnickii Sep 26, 2023
6d82d46
Update stories/components/peoplePicker/peoplePicker.stories.js
Mnickii Sep 26, 2023
9efd429
remove entityType, use typeGuards instead, fix yarn clean script
Mnickii Sep 27, 2023
8c9b67d
Merge branch 'main' into bug-2649
Mnickii Sep 28, 2023
c3435fe
cleanup of casts introduced for entityType changes
Mnickii Sep 28, 2023
90ab198
remove remaining casts
Mnickii Sep 28, 2023
1961e22
remove IDynamicPerson casts
Mnickii Sep 28, 2023
0f45131
Update packages/mgt-components/src/components/mgt-people-picker/mgt-p…
Mnickii Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { BasePersonCardSection } from '../BasePersonCardSection';
import { styles } from './mgt-contact-css';
import { getSvg, SvgIcon } from '../../utils/SvgHelper';
import { strings } from './strings';
import { IUser } from '../../graph/types';
Mnickii marked this conversation as resolved.
Show resolved Hide resolved

/**
* Represents a contact part and its metadata
Expand Down Expand Up @@ -76,7 +77,7 @@ export class MgtContact extends BasePersonCardSection {
private readonly _contactParts: Record<string, IContactPart> = {
email: {
icon: getSvg(SvgIcon.Email),
onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person)),
onClick: () => this.sendEmail(getEmailFromGraphEntity(this._person as IUser)),
showCompact: true,
title: this.strings.emailTitle
},
Expand Down Expand Up @@ -119,7 +120,7 @@ export class MgtContact extends BasePersonCardSection {
super();
this._person = person;

this._contactParts.email.value = getEmailFromGraphEntity(this._person);
this._contactParts.email.value = getEmailFromGraphEntity(this._person as IUser);
this._contactParts.chat.value = this._person.userPrincipalName;
this._contactParts.cellPhone.value = this._person.mobilePhone;
this._contactParts.department.value = this._person.department;
Expand Down
16 changes: 8 additions & 8 deletions packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { getSvg, SvgIcon } from '../../utils/SvgHelper';
import { MgtPersonCardState, UserWithManager } from '../mgt-person-card/mgt-person-card.types';
import { styles } from './mgt-organization-css';
import { strings } from './strings';
import { ViewType } from '../../graph/types';
import { IDynamicPerson, ViewType } from '../../graph/types';
Mnickii marked this conversation as resolved.
Show resolved Hide resolved
Mnickii marked this conversation as resolved.
Show resolved Hide resolved
import { mgtHtml, customElement } from '@microsoft/mgt-element';

/**
Expand Down Expand Up @@ -177,7 +177,7 @@ export class MgtOrganization extends BasePersonCardSection {
* @returns {TemplateResult}
* @memberof MgtOrganization
*/
protected renderManager(person: User): TemplateResult {
protected renderManager(person: IDynamicPerson): TemplateResult {
Mnickii marked this conversation as resolved.
Show resolved Hide resolved
return mgtHtml`
<div
class="org-member"
Expand Down Expand Up @@ -251,9 +251,9 @@ export class MgtOrganization extends BasePersonCardSection {
<div
class="org-member org-member--direct-report"
@keydown=${(e: KeyboardEvent) => {
if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person);
if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person as IDynamicPerson);
}}
@click=${() => this.navigateCard(person)}
@click=${() => this.navigateCard(person as IDynamicPerson)}
>
<div class="org-member__person">
<mgt-person
Expand Down Expand Up @@ -292,9 +292,9 @@ export class MgtOrganization extends BasePersonCardSection {
<div
class="direct-report"
@keydown=${(e: KeyboardEvent) => {
if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person);
if (e.code === 'Enter' || e.code === ' ') this.navigateCard(person as IDynamicPerson);
}}
@click=${() => this.navigateCard(person)}
@click=${() => this.navigateCard(person as IDynamicPerson)}
>
<mgt-person
.personDetails=${person}
Expand Down Expand Up @@ -340,7 +340,7 @@ export class MgtOrganization extends BasePersonCardSection {
* @returns {TemplateResult}
* @memberof MgtOrganization
*/
protected renderCoworker(person: User): TemplateResult {
protected renderCoworker(person: IDynamicPerson): TemplateResult {
Mnickii marked this conversation as resolved.
Show resolved Hide resolved
return mgtHtml`
<div
class="coworker"
Expand Down Expand Up @@ -384,7 +384,7 @@ export class MgtOrganization extends BasePersonCardSection {
<div class="divider"></div>
<div class="subtitle" tabindex="0">${subtitle}</div>
<div>
${people.slice(0, 6).map(person => this.renderCoworker(person))}
${people.slice(0, 6).map((person: IDynamicPerson) => this.renderCoworker(person))}
Mnickii marked this conversation as resolved.
Show resolved Hide resolved
</div>
`;
}
Expand Down
74 changes: 44 additions & 30 deletions packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
getUsersForUserIds,
getUsers
} from '../../graph/graph.user';
import { IDynamicPerson, ViewType } from '../../graph/types';
import { IDynamicPerson, IGroup, IUser, ViewType } from '../../graph/types';
import {
Providers,
ProviderState,
Expand All @@ -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';
Expand Down Expand Up @@ -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)) as IUser;
this.addPerson(personDetails);
} catch (e: unknown) {
// This caters for allow-any-email property if it's enabled on the component
Expand All @@ -651,7 +651,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
mail: userId,
displayName: userId
};
this.addPerson(anyMailUser);
this.addPerson(anyMailUser as IUser);
}
}
}
Expand All @@ -672,7 +672,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
// eslint-disable-next-line guard-for-in, @typescript-eslint/no-for-in-array
for (const id in groupIds) {
try {
const groupDetails = await getGroup(graph, groupIds[id]);
const groupDetails = (await getGroup(graph, groupIds[id])) as IGroup;
this.addPerson(groupDetails);
} catch (e) {
// no-op
Expand Down Expand Up @@ -1011,16 +1011,19 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
if (this.groupId) {
try {
if (this.type === PersonType.group) {
this._groupPeople = await findGroupMembers(
this._groupPeople = (await findGroupMembers(
graph,
null,
this.groupId,
this.showMax,
this.type,
this.transitiveSearch
);
)) as IUser[];
for (const person of this._groupPeople) {
Object.assign(person, { entityType: 'user' });
}
Mnickii marked this conversation as resolved.
Show resolved Hide resolved
} else {
this._groupPeople = await findGroupMembers(
this._groupPeople = (await findGroupMembers(
graph,
null,
this.groupId,
Expand All @@ -1029,15 +1032,19 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
this.transitiveSearch,
this.userFilters,
this.peopleFilters
);
)) as IUser[];
}
} catch (_) {
this._groupPeople = [];
}
} else if (this.groupIds) {
if (this.type === PersonType.group) {
try {
this._groupPeople = await getGroupsForGroupIds(graph, this.groupIds, this.groupFilters);
this._groupPeople = (await getGroupsForGroupIds(
graph,
this.groupIds,
this.groupFilters
)) as IGroup[];
} catch (_) {
this._groupPeople = [];
}
Expand All @@ -1052,7 +1059,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
this.transitiveSearch,
this.userFilters
);
this._groupPeople = peopleInGroups;
this._groupPeople = peopleInGroups as IUser[];
} catch (_) {
this._groupPeople = [];
}
Expand All @@ -1062,13 +1069,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
people = this._groupPeople || [];
} else if (this.type === PersonType.person || this.type === PersonType.any) {
if (this.userIds) {
people = await getUsersForUserIds(graph, this.userIds, '', this.userFilters);
people = (await getUsersForUserIds(graph, this.userIds, '', this.userFilters)) as IUser[];
} else {
const isUserOrContactType = this.userType === UserType.user || this.userType === UserType.contact;
if (this._userFilters && isUserOrContactType) {
people = await getUsers(graph, this._userFilters, this.showMax);
people = (await getUsers(graph, this._userFilters, this.showMax)) as IUser[];
} else {
people = await getPeople(graph, this.userType, this._peopleFilters, this.showMax);
people = (await getPeople(graph, this.userType, this._peopleFilters, this.showMax)) as IUser[];
}
}
} else if (this.type === PersonType.group) {
Expand All @@ -1085,7 +1092,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
// eslint-disable-next-line @typescript-eslint/dot-notation, @typescript-eslint/no-unsafe-assignment
groups = groups[0]['value'];
}
people = groups;
people = groups as IGroup[];
}
}
this.defaultPeople = people;
Expand All @@ -1101,12 +1108,17 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
!this.defaultSelectedUsers.length &&
!this.defaultSelectedGroups.length
) {
this.defaultSelectedUsers = await getUsersForUserIds(graph, this.defaultSelectedUserIds, '', this.userFilters);
this.defaultSelectedGroups = await getGroupsForGroupIds(
this.defaultSelectedUsers = (await getUsersForUserIds(
graph,
this.defaultSelectedUserIds,
'',
this.userFilters
)) as IUser[];
this.defaultSelectedGroups = (await getGroupsForGroupIds(
graph,
this.defaultSelectedGroupIds,
this.peopleFilters
);
)) as IGroup[];

this.defaultSelectedGroups = this.defaultSelectedGroups.filter(group => {
return group !== null;
Expand All @@ -1126,7 +1138,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {

if (this.groupId) {
people =
(await findGroupMembers(
((await findGroupMembers(
graph,
input,
this.groupId,
Expand All @@ -1135,7 +1147,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
this.transitiveSearch,
this.userFilters,
this.peopleFilters
)) || [];
)) as IUser[]) || [];
} else {
if (this.type === PersonType.person || this.type === PersonType.any) {
try {
Expand All @@ -1144,30 +1156,32 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
// we might have a user-filters property set, search for users with it.
if (this.userIds?.length) {
// has the user-ids proerty set
people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
people = (await getUsersForUserIds(graph, this.userIds, input, this._userFilters)) as IUser[];
} else {
people = await findUsers(graph, input, this.showMax, this._userFilters);
people = (await findUsers(graph, input, this.showMax, this._userFilters)) as IUser[];
}
} else {
if (!this.groupIds) {
if (this.userIds?.length) {
// has the user-ids proerty set
people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
people = (await getUsersForUserIds(graph, this.userIds, input, this._userFilters)) as IUser[];
} else {
people = (await findPeople(graph, input, this.showMax, this.userType, this._peopleFilters)) || [];
people =
((await findPeople(graph, input, this.showMax, this.userType, this._peopleFilters)) as IUser[]) ||
[];
}
} else {
// Does not work when the PersonType = person.
try {
people = await findUsersFromGroupIds(
people = (await findUsersFromGroupIds(
graph,
input,
this.groupIds,
this.showMax,
this.type,
this.transitiveSearch,
this.userFilters
);
)) as IUser[];
} catch (_) {
// nop
}
Expand All @@ -1186,7 +1200,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
this.type !== PersonType.person
) {
try {
const users = (await findUsers(graph, input, this.showMax, this._userFilters)) || [];
const users = ((await findUsers(graph, input, this.showMax, this._userFilters)) as IUser[]) || [];

// make sure only unique people
const peopleIds = new Set(people.map(p => p.id));
Expand All @@ -1204,14 +1218,14 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
if ((this.type === PersonType.group || this.type === PersonType.any) && people.length < this.showMax) {
if (this.groupIds) {
try {
people = await findGroupsFromGroupIds(
people = (await findGroupsFromGroupIds(
graph,
input,
this.groupIds,
this.showMax,
this.groupType,
this.userFilters
);
)) as IGroup[];
} catch (_) {
// no-op
}
Expand Down Expand Up @@ -1461,7 +1475,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
mail: this.userInput,
displayName: this.userInput
};
this.addPerson(anyMailUser);
this.addPerson(anyMailUser as IUser);
}
this.hideFlyout();
if (this.input) {
Expand Down
21 changes: 16 additions & 5 deletions packages/mgt-components/src/components/mgt-people/mgt-people.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -490,15 +490,26 @@ export class MgtPeople extends MgtTemplatedComponent {

// populate people
if (this.groupId) {
this.people = await findGroupMembers(graph, null, this.groupId, this.showMax, PersonType.person);
this.people = (await findGroupMembers(
graph,
null,
this.groupId,
this.showMax,
PersonType.person
)) as IDynamicPerson[];
Mnickii marked this conversation as resolved.
Show resolved Hide resolved
} else if (this.userIds || this.peopleQueries) {
this.people = this.userIds
? await getUsersForUserIds(graph, this.userIds, '', '', this._fallbackDetails)
: await getUsersForPeopleQueries(graph, this.peopleQueries, this._fallbackDetails);
? ((await getUsersForUserIds(graph, this.userIds, '', '', this._fallbackDetails)) as IDynamicPerson[])
: ((await getUsersForPeopleQueries(graph, this.peopleQueries, this._fallbackDetails)) as IDynamicPerson[]);
} else if (this.resource) {
this.people = await getPeopleFromResource(graph, this.version, this.resource, this.scopes);
this.people = (await getPeopleFromResource(
graph,
this.version,
this.resource,
this.scopes
)) as IDynamicPerson[];
} else {
this.people = await getPeople(graph);
this.people = (await getPeople(graph)) as IDynamicPerson[];
}

// populate presence for people
Expand Down