fix: people-picker uses show-max attribute (#2527)

adds top to caching of people picker graph calls
ensures that show max is used when loading the initial state with no other options set

Co-authored-by: Sébastien Levert <[email protected]>

Author: gavinbarron

index.html

@@ -54,12 +54,12 @@ <h2>mgt-login</h2>
       </div>
       <!-- <mgt-login></mgt-login> -->
       <!-- <h2>mgt-person me query two lines card on click with presence</h2> -->
-      <mgt-person person-query="me" view="twoLines" person-card="hover" show-presence></mgt-person>
+      <!-- <mgt-person person-query="me" view="twoLines" person-card="hover" show-presence></mgt-person> -->
       <!-- <mgt-person-card person-query="me"></mgt-person-card> -->
       <h2>mgt-people-picker</h2>
-      <mgt-people-picker></mgt-people-picker>
-      <h2>mgt-teams-channel-picker</h2>
-      <mgt-teams-channel-picker></mgt-teams-channel-picker>
+      <mgt-people-picker show-max="6"></mgt-people-picker>
+      <!-- <h2>mgt-teams-channel-picker</h2>
+      <mgt-teams-channel-picker></mgt-teams-channel-picker> -->
       <!-- <h2>mgt-tasks</h2>
       <mgt-tasks></mgt-tasks> -->
       <!-- <h2>mgt-agenda group-by-day</h2>

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -1071,7 +1071,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               if (this._userFilters && isUserOrContactType) {
                 people = await getUsers(graph, this._userFilters, this.showMax);
               } else {
-                people = await getPeople(graph, this.userType, this._peopleFilters);
+                people = await getPeople(graph, this.userType, this._peopleFilters, this.showMax);
               }
             }
           } else if (this.type === PersonType.group) {

packages/mgt-components/src/graph/graph.groups.ts

@@ -109,7 +109,7 @@ export const findGroups = async (
   const scopes = 'Group.Read.All';
 
   let cache: CacheStore<CacheGroupQuery>;
-  const key = `${query ? query : '*'}*${groupTypes}*${groupFilters}`;
+  const key = `${query ? query : '*'}*${groupTypes}*${groupFilters}:${top}`;
 
   if (getIsGroupsCacheEnabled()) {
     cache = CacheService.getCache(schemas.groups, schemas.groups.stores.groupsQuery);

packages/mgt-components/src/graph/graph.people.ts

@@ -173,12 +173,13 @@ export const findPeople = async (
 export const getPeople = async (
   graph: IGraph,
   userType: UserType = UserType.any,
-  peopleFilters = ''
+  peopleFilters = '',
+  top = 10
 ): Promise<Person[]> => {
   const scopes = 'people.read';
 
   let cache: CacheStore<CachePeopleQuery>;
-  const cacheKey = peopleFilters ? peopleFilters : `*:${userType}`;
+  const cacheKey = `${peopleFilters ? peopleFilters : `*:${userType}`}:${top}`;
 
   if (getIsPeopleCacheEnabled()) {
     cache = CacheService.getCache<CachePeopleQuery>(schemas.people, schemas.people.stores.peopleQuery);
@@ -205,7 +206,7 @@ export const getPeople = async (
 
   let people: CollectionResponse<Person>;
   try {
-    let graphRequest = graph.api(uri).middlewareOptions(prepScopes(scopes)).filter(filter);
+    let graphRequest = graph.api(uri).middlewareOptions(prepScopes(scopes)).top(top).filter(filter);
 
     if (userType !== UserType.contact) {
       // for any type other than Contact, user a wider search

packages/mgt-components/src/graph/graph.user.ts

@@ -52,7 +52,7 @@ export const getIsUsersCacheEnabled = (): boolean =>
 export const getUsers = async (graph: IGraph, userFilters = '', top = 10): Promise<User[]> => {
   const apiString = '/users';
   let cache: CacheStore<CacheUserQuery>;
-  const cacheKey = userFilters === '' ? '*' : userFilters;
+  const cacheKey = `${userFilters === '' ? '*' : userFilters}:${top}`;
   const cacheItem = { maxResults: top, results: null };
 
   if (getIsUsersCacheEnabled()) {
@@ -386,11 +386,12 @@ export const getUsersForPeopleQueries = async (
 export const findUsers = async (graph: IGraph, query: string, top = 10, userFilters = ''): Promise<User[]> => {
   const scopes = 'User.ReadBasic.All';
   const item = { maxResults: top, results: null };
+  const cacheKey = `${query}:${top}:${userFilters}`;
   let cache: CacheStore<CacheUserQuery>;
 
   if (getIsUsersCacheEnabled()) {
     cache = CacheService.getCache<CacheUserQuery>(schemas.users, schemas.users.stores.usersQuery);
-    const result: CacheUserQuery = await cache.getValue(query);
+    const result: CacheUserQuery = await cache.getValue(cacheKey);
 
     if (result && getUserInvalidationTime() > Date.now() - result.timeCached) {
       return result.results.map(userStr => JSON.parse(userStr) as User);
@@ -444,7 +445,7 @@ export const findGroupMembers = async (
   const item = { maxResults: top, results: null };
 
   let cache: CacheStore<CacheUserQuery>;
-  const key = `${groupId || '*'}:${query || '*'}:${personType}:${transitive}:${userFilters}`;
+  const key = `${groupId || '*'}:${query || '*'}:${top}:${personType}:${transitive}:${userFilters}`;
 
   if (getIsUsersCacheEnabled()) {
     cache = CacheService.getCache<CacheUserQuery>(schemas.users, schemas.users.stores.usersQuery);