Added the ability to add filters of users, people or group properties (#1572)

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

Author: musale

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

@@ -11,7 +11,7 @@ import { classMap } from 'lit-html/directives/class-map';
 import { repeat } from 'lit-html/directives/repeat';
 import { findGroups, getGroupsForGroupIds, GroupType, getGroup } from '../../graph/graph.groups';
 import { findPeople, getPeople, PersonType, UserType } from '../../graph/graph.people';
-import { findUsers, findGroupMembers, getUser, getUsersForUserIds } from '../../graph/graph.user';
+import { findUsers, findGroupMembers, getUser, getUsersForUserIds, getUsers } from '../../graph/graph.user';
 import { IDynamicPerson, ViewType } from '../../graph/types';
 import { Providers, ProviderState, MgtTemplatedComponent, arraysAreEqual } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
@@ -376,6 +376,45 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     this.requestStateUpdate(true);
   }
 
+  /**
+   * Filters that can be set on the user properties query.
+   */
+  @property({ attribute: 'user-filters' })
+  public get userFilters(): string {
+    return this._userFilters;
+  }
+
+  public set userFilters(value: string) {
+    this._userFilters = value;
+    this.requestStateUpdate(true);
+  }
+
+  /**
+   * Filters that can be set on the people query properties.
+   */
+  @property({ attribute: 'people-filters' })
+  public get peopleFilters(): string {
+    return this._peopleFilters;
+  }
+
+  public set peopleFilters(value: string) {
+    this._peopleFilters = value;
+    this.requestStateUpdate(true);
+  }
+
+  /**
+   * Filters that can be set on the group query properties.
+   */
+  @property({ attribute: 'group-filters' })
+  public get groupFilters(): string {
+    return this._groupFilters;
+  }
+
+  public set groupFilters(value: string) {
+    this._groupFilters = value;
+    this.requestStateUpdate(true);
+  }
+
   /**
    * Get the scopes required for people picker
    *
@@ -406,6 +445,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private _groupType: GroupType = GroupType.any;
   private _userType: UserType = UserType.any;
   private _currentSelectedUser: IDynamicPerson;
+  private _userFilters: string;
+  private _groupFilters: string;
+  private _peopleFilters: string;
 
   private defaultPeople: IDynamicPerson[];
 
@@ -915,7 +957,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                   this.groupId,
                   this.showMax,
                   this.type,
-                  this.transitiveSearch
+                  this.transitiveSearch,
+                  this._groupFilters
                 );
               } catch (_) {
                 this._groupPeople = [];
@@ -924,13 +967,18 @@ 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);
+              people = await getUsersForUserIds(graph, this.userIds, '', this.userFilters);
             } else {
-              people = await getPeople(graph, this.userType);
+              const isUserOrContactType = this.userType === UserType.user || this.userType === UserType.contact;
+              if (this._userFilters && isUserOrContactType) {
+                people = await getUsers(graph, this._userFilters, this.showMax);
+              } else {
+                people = await getPeople(graph, this.userType, this._peopleFilters);
+              }
             }
           } else if (this.type === PersonType.group) {
-            let groups = (await findGroups(graph, '', this.showMax, this.groupType)) || [];
-            if (groups[0]['value']) {
+            let groups = (await findGroups(graph, '', this.showMax, this.groupType, this._groupFilters)) || [];
+            if (groups.length > 0 && groups[0]['value']) {
               groups = groups[0]['value'];
             }
             people = groups;
@@ -945,8 +993,12 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         !this.selectedPeople.length &&
         !this.defaultSelectedUsers
       ) {
-        this.defaultSelectedUsers = await getUsersForUserIds(graph, this.defaultSelectedUserIds);
-        this.defaultSelectedGroups = await getGroupsForGroupIds(graph, this.defaultSelectedGroupIds);
+        this.defaultSelectedUsers = await getUsersForUserIds(graph, this.defaultSelectedUserIds, '', this._userFilters);
+        this.defaultSelectedGroups = await getGroupsForGroupIds(
+          graph,
+          this.defaultSelectedGroupIds,
+          this._groupFilters
+        );
 
         this.defaultSelectedGroups = this.defaultSelectedGroups.filter(group => {
           return group !== null;
@@ -966,22 +1018,39 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
         if (this.groupId) {
           people =
-            (await findGroupMembers(graph, input, this.groupId, this.showMax, this.type, this.transitiveSearch)) || [];
+            (await findGroupMembers(
+              graph,
+              input,
+              this.groupId,
+              this.showMax,
+              this.type,
+              this.transitiveSearch,
+              this._groupFilters
+            )) || [];
         } else {
           if (this.type === PersonType.person || this.type === PersonType.any) {
             try {
-              if (this.userIds && this.userIds.length) {
-                people = await getUsersForUserIds(graph, this.userIds, input);
+              // Default UserType === any
+              if (this.userType === UserType.contact || this.userType === UserType.user) {
+                // we might have a user-filters property set, search for users with it.
+                if (this.userIds && this.userIds.length) {
+                  // has the user-ids proerty set
+                  people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
+                } else {
+                  people = await findUsers(graph, input, this.showMax, this._userFilters);
+                }
               } else {
-                people = (await findPeople(graph, input, this.showMax, this.userType)) || [];
+                people = (await findPeople(graph, input, this.showMax, this.userType, this._peopleFilters)) || [];
               }
             } catch (e) {
               // nop
             }
 
-            if (people.length < this.showMax && this.userType !== UserType.contact) {
+            // Don't follow this path if a people-filters attribute is set on the component as the
+            // default type === PersonType.person
+            if (people.length < this.showMax && this.userType !== UserType.contact && this.type !== PersonType.person) {
               try {
-                const users = (await findUsers(graph, input, this.showMax)) || [];
+                const users = (await findUsers(graph, input, this.showMax, this._userFilters)) || [];
 
                 // make sure only unique people
                 const peopleIds = new Set(people.map(p => p.id));
@@ -995,10 +1064,11 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               }
             }
           }
+
           if ((this.type === PersonType.group || this.type === PersonType.any) && people.length < this.showMax) {
             let groups = [];
             try {
-              groups = (await findGroups(graph, input, this.showMax, this.groupType)) || [];
+              groups = (await findGroups(graph, input, this.showMax, this.groupType, this._groupFilters)) || [];
               people = people.concat(groups);
             } catch (e) {
               // nop
@@ -1007,7 +1077,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         }
       }
     }
-
     //people = this.getUniquePeople(people);
     this._foundPeople = this.filterPeople(people);
   }
@@ -1606,7 +1675,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     // check if people need to be updated
     // ensuring people list is displayed
     // find ids from selected people
-    if (people) {
+    if (people && people.length > 0) {
       const idFilter = this.selectedPeople.map(el => {
         return el.id ? el.id : el.displayName;
       });

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

@@ -325,7 +325,7 @@ export class MgtPeople extends MgtTemplatedComponent {
    * @memberof MgtPeople
    */
   protected renderPeople(): TemplateResult {
-    const maxPeople = this.people.slice(0, this.showMax);
+    const maxPeople = this.people.slice(0, this.showMax).filter(pple => pple);
     return html`
       <ul class="people-list" aria-label="people">
         ${repeat(

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

@@ -20,9 +20,10 @@ export const schemas = {
     name: 'users',
     stores: {
       users: 'users',
-      usersQuery: 'usersQuery'
+      usersQuery: 'usersQuery',
+      userFilters: 'userFilters'
     },
-    version: 1
+    version: 2
   },
   photos: {
     name: 'photos',
@@ -40,15 +41,15 @@ export const schemas = {
       groupPeople: 'groupPeople',
       peopleQuery: 'peopleQuery'
     },
-    version: 1
+    version: 2
   },
   groups: {
     name: 'groups',
     stores: {
       groups: 'groups',
       groupsQuery: 'groupsQuery'
     },
-    version: 2
+    version: 3
   },
   get: {
     name: 'responses',

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

@@ -95,12 +95,13 @@ export async function findGroups(
   graph: IGraph,
   query: string,
   top: number = 10,
-  groupTypes: GroupType = GroupType.any
+  groupTypes: GroupType = GroupType.any,
+  groupFilters: string = ''
 ): Promise<Group[]> {
   const scopes = 'Group.Read.All';
 
   let cache: CacheStore<CacheGroupQuery>;
-  const key = query || '*' + groupTypes;
+  const key = `${query ? query : '*'}*${groupTypes}*${groupFilters}`;
 
   if (getIsGroupsCacheEnabled()) {
     cache = CacheService.getCache(schemas.groups, schemas.groups.stores.groupsQuery);
@@ -122,6 +123,10 @@ export async function findGroups(
     filterQuery = `(startswith(displayName,'${query}') or startswith(mailNickname,'${query}') or startswith(mail,'${query}'))`;
   }
 
+  if (groupFilters) {
+    filterQuery += `${query ? ' and ' : ''}${groupFilters}`;
+  }
+
   if (groupTypes !== GroupType.any) {
     const batch = graph.createBatch();
 
@@ -147,10 +152,7 @@ export async function findGroups(
       filterGroups.push('(mailEnabled eq true and securityEnabled eq false)');
     }
 
-    if (query !== '') {
-      filterQuery = filterQuery + ' and ';
-    }
-
+    filterQuery += `${filterQuery} and `;
     for (let filter of filterGroups) {
       batch.get(filter, `/groups?$filter=${filterQuery + filter}`, ['Group.Read.All']);
     }
@@ -176,8 +178,10 @@ export async function findGroups(
           queries.push(
             await graph
               .api('groups')
-              .filter(filterQuery + filter)
+              .filter(`${filterQuery} and ${filter}`)
               .top(top)
+              .count(true)
+              .header('ConsistencyLevel', 'eventual')
               .middlewareOptions(prepScopes(scopes))
               .get()
           );
@@ -189,8 +193,14 @@ export async function findGroups(
     }
   } else {
     if (batchedResult.length === 0) {
-      const result = await graph.api('groups').filter(filterQuery).top(top).middlewareOptions(prepScopes(scopes)).get();
-
+      const result = await graph
+        .api('groups')
+        .filter(filterQuery)
+        .top(top)
+        .count(true)
+        .header('ConsistencyLevel', 'eventual')
+        .middlewareOptions(prepScopes(scopes))
+        .get();
       if (getIsGroupsCacheEnabled() && result) {
         cache.putValue(key, { groups: result.value.map(x => JSON.stringify(x)), top: top });
       }
@@ -336,7 +346,11 @@ export async function getGroup(graph: IGraph, id: string, requestedProps?: strin
  * @param {string[]} groupIds, an array of string ids
  * @returns {Promise<Group[]>}
  */
-export async function getGroupsForGroupIds(graph: IGraph, groupIds: string[]): Promise<Group[]> {
+export async function getGroupsForGroupIds(
+  graph: IGraph,
+  groupIds: string[],
+  groupFilters: string = ''
+): Promise<Group[]> {
   if (!groupIds || groupIds.length === 0) {
     return [];
   }
@@ -358,7 +372,11 @@ export async function getGroupsForGroupIds(graph: IGraph, groupIds: string[]): P
     if (group && getGroupsInvalidationTime() > Date.now() - group.timeCached) {
       groupDict[id] = group.group ? JSON.parse(group.group) : null;
     } else if (id !== '') {
-      batch.get(id, `/groups/${id}`, ['Group.Read.All']);
+      let apiUrl: string = `/groups/${id}`;
+      if (groupFilters) {
+        apiUrl += `${apiUrl}?$filters=${groupFilters}`;
+      }
+      batch.get(id, apiUrl, ['Group.Read.All']);
       notInCache.push(id);
     }
   }

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

@@ -105,7 +105,8 @@ export async function findPeople(
   graph: IGraph,
   query: string,
   top: number = 10,
-  userType: UserType = UserType.any
+  userType: UserType = UserType.any,
+  peopleFilters: string = ''
 ): Promise<Person[]> {
   const scopes = 'people.read';
 
@@ -130,6 +131,11 @@ export async function findPeople(
     }
   }
 
+  if (peopleFilters !== '') {
+    // Adding the default people filters to the search filters
+    filter = `${filter} and ${peopleFilters}`;
+  }
+
   let graphResult;
   try {
     graphResult = await graph
@@ -155,11 +161,15 @@ export async function findPeople(
  * @returns {(Promise<Person[]>)}
  * @memberof Graph
  */
-export async function getPeople(graph: IGraph, userType: UserType = UserType.any): Promise<Person[]> {
+export async function getPeople(
+  graph: IGraph,
+  userType: UserType = UserType.any,
+  peopleFilters: string = ''
+): Promise<Person[]> {
   const scopes = 'people.read';
 
   let cache: CacheStore<CachePeopleQuery>;
-  let cacheKey = `*:${userType}`;
+  let cacheKey = peopleFilters ? peopleFilters : `*:${userType}`;
 
   if (getIsPeopleCacheEnabled()) {
     cache = CacheService.getCache<CachePeopleQuery>(schemas.people, schemas.people.stores.peopleQuery);
@@ -172,7 +182,6 @@ export async function getPeople(graph: IGraph, userType: UserType = UserType.any
 
   const uri = '/me/people';
   let filter = "personType/class eq 'Person'";
-
   if (userType !== UserType.any) {
     if (userType === UserType.user) {
       filter += "and personType/subclass eq 'OrganizationUser'";
@@ -181,13 +190,17 @@ export async function getPeople(graph: IGraph, userType: UserType = UserType.any
     }
   }
 
+  if (peopleFilters) {
+    filter += ` and ${peopleFilters}`;
+  }
+
   let people;
   try {
     people = await graph.api(uri).middlewareOptions(prepScopes(scopes)).filter(filter).get();
     if (getIsPeopleCacheEnabled() && people) {
       cache.putValue(cacheKey, { maxResults: 10, results: people.value.map(ppl => JSON.stringify(ppl)) });
     }
-  } catch (error) {}
+  } catch (_) {}
   return people ? people.value : null;
 }