Merge branch 'bethpan/more-channelpicker-fixes' of https://github.com/microsoftgraph/microsoft-graph-toolkit into bethpan/more-channelpicker-fixes

beth-panx · beth-panx · commit 0b3e20a9f1f8 · 2020-06-08T15:10:34.000-07:00
diff --git a/src/components/mgt-people-picker/mgt-people-picker.ts b/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -108,12 +108,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   @property({
     attribute: 'type',
     converter: (value, type) => {
+      value = value.toLowerCase();
       if (!value || value.length === 0) {
-        return PersonType.Any;
+        return PersonType.any;
       }
 
       if (typeof PersonType[value] === 'undefined') {
-        return PersonType.Any;
+        return PersonType.any;
       } else {
         return PersonType[value];
       }
@@ -140,7 +141,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     attribute: 'group-type',
     converter: (value, type) => {
       if (!value || value.length === 0) {
-        return GroupType.Any;
+        return GroupType.any;
       }
 
       const values = value.split(',');
@@ -154,7 +155,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       }
 
       if (groupTypes.length === 0) {
-        return GroupType.Any;
+        return GroupType.any;
       }
 
       // tslint:disable-next-line:no-bitwise
@@ -255,8 +256,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   @property({ attribute: false }) private _showLoading: boolean;
 
   private _groupId: string;
-  private _type: PersonType = PersonType.Person;
-  private _groupType: GroupType = GroupType.Any;
+  private _type: PersonType = PersonType.person;
+  private _groupType: GroupType = GroupType.any;
 
   private defaultPeople: IDynamicPerson[];
 
@@ -645,12 +646,25 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     if (!people && provider && provider.state === ProviderState.SignedIn) {
       const graph = provider.graph.forComponent(this);
 
-      // default common people
       if (!input.length && this._isFocused) {
         if (this.defaultPeople) {
           people = this.defaultPeople;
         } else {
-          people = await getPeople(graph);
+          if (this.groupId) {
+            if (this._groupPeople === null) {
+              try {
+                this._groupPeople = await getPeopleFromGroup(graph, this.groupId);
+              } catch (_) {
+                this._groupPeople = [];
+              }
+            }
+            people = this._groupPeople || [];
+          } else if (this.type === PersonType.person || this.type === PersonType.any) {
+            people = await getPeople(graph);
+          } else if (this.type === PersonType.group) {
+            const groups = (await findGroups(graph, '', this.showMax, this.groupType)) || [];
+            people = groups;
+          }
           this.defaultPeople = people;
         }
         this._showLoading = false;
@@ -664,19 +678,9 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
         this.fireCustomEvent('selectionChanged', this.selectedPeople);
       }
 
-      if (this.groupId && input) {
-        if (this._groupPeople === null) {
-          try {
-            this._groupPeople = await getPeopleFromGroup(graph, this.groupId);
-          } catch (_) {
-            this._groupPeople = [];
-          }
-        }
-
-        people = this._groupPeople || [];
-      } else if (input) {
+      if (input) {
         people = [];
-        if (this.type === PersonType.Person || this.type === PersonType.Any) {
+        if (this.type === PersonType.person || this.type === PersonType.any) {
           try {
             people = (await findPeople(graph, input, this.showMax)) || [];
           } catch (e) {
@@ -700,7 +704,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           }
         }
 
-        if ((this.type === PersonType.Group || this.type === PersonType.Any) && people.length < this.showMax) {
+        if ((this.type === PersonType.group || this.type === PersonType.any) && people.length < this.showMax) {
+          people = [];
           try {
             const groups = (await findGroups(graph, input, this.showMax, this.groupType)) || [];
             people = people.concat(groups);
@@ -863,6 +868,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       this.userInput = '';
       // remove last person in selected list
       this.selectedPeople = this.selectedPeople.splice(0, this.selectedPeople.length - 1);
+      this.loadState();
       // reset flyout position
       this.hideFlyout();
       this.showFlyout();
@@ -888,7 +894,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @param input - input text
    */
   private handleUserSearch(input: HTMLInputElement) {
-    this._showLoading = true;
     if (!this._debouncedSearch) {
       this._debouncedSearch = debounce(async () => {
         // Wait a few milliseconds before showing the flyout.
@@ -911,6 +916,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     }
 
     if (this.userInput !== input.value) {
+      this._showLoading = true;
       this.userInput = input.value;
       this._debouncedSearch();
     }
diff --git a/src/graph/graph.groups.ts b/src/graph/graph.groups.ts
@@ -19,31 +19,31 @@ export enum GroupType {
   /**
    * Any group Type
    */
-  Any = 0,
+  any = 0,
 
   /**
    * Office 365 group
    */
   // tslint:disable-next-line:no-bitwise
-  Unified = 1 << 0,
+  unified = 1 << 0,
 
   /**
    * Security group
    */
   // tslint:disable-next-line:no-bitwise
-  Security = 1 << 1,
+  security = 1 << 1,
 
   /**
    * Mail Enabled Security group
    */
   // tslint:disable-next-line:no-bitwise
-  MailEnabledSecurity = 1 << 2,
+  mailenabledsecurity = 1 << 2,
 
   /**
    * Distribution Group
    */
   // tslint:disable-next-line:no-bitwise
-  Distribution = 1 << 3
+  distribution = 1 << 3
 }
 
 /**
@@ -53,43 +53,46 @@ export enum GroupType {
  * @param {IGraph} graph
  * @param {string} query - what to search for
  * @param {number} [top=10] - number of groups to return
- * @param {GroupType} [groupTypes=GroupType.Any] - the type of group to search for
+ * @param {GroupType} [groupTypes=GroupType.any] - the type of group to search for
  * @returns {Promise<Group[]>} An array of Groups
  */
 export async function findGroups(
   graph: IGraph,
   query: string,
   top: number = 10,
-  groupTypes: GroupType = GroupType.Any
+  groupTypes: GroupType = GroupType.any
 ): Promise<Group[]> {
   const scopes = 'Group.Read.All';
 
-  let filterQuery = `(startswith(displayName,'${query}') or startswith(mailNickname,'${query}') or startswith(mail,'${query}'))`;
+  let filterQuery = '';
+  if (query !== '') {
+    filterQuery = `(startswith(displayName,'${query}') or startswith(mailNickname,'${query}') or startswith(mail,'${query}'))`;
+  }
 
-  if (groupTypes !== GroupType.Any) {
+  if (groupTypes !== GroupType.any) {
     const filterGroups = [];
 
     // tslint:disable-next-line:no-bitwise
-    if (GroupType.Unified === (groupTypes & GroupType.Unified)) {
+    if (GroupType.unified === (groupTypes & GroupType.unified)) {
       filterGroups.push("groupTypes/any(c:c+eq+'Unified')");
     }
 
     // tslint:disable-next-line:no-bitwise
-    if (GroupType.Security === (groupTypes & GroupType.Security)) {
+    if (GroupType.security === (groupTypes & GroupType.security)) {
       filterGroups.push('(mailEnabled eq false and securityEnabled eq true)');
     }
 
     // tslint:disable-next-line:no-bitwise
-    if (GroupType.MailEnabledSecurity === (groupTypes & GroupType.MailEnabledSecurity)) {
+    if (GroupType.mailenabledsecurity === (groupTypes & GroupType.mailenabledsecurity)) {
       filterGroups.push('(mailEnabled eq true and securityEnabled eq true)');
     }
 
     // tslint:disable-next-line:no-bitwise
-    if (GroupType.Distribution === (groupTypes & GroupType.Distribution)) {
+    if (GroupType.distribution === (groupTypes & GroupType.distribution)) {
       filterGroups.push('(mailEnabled eq true and securityEnabled eq false)');
     }
 
-    filterQuery += ' and ' + filterGroups.join(' or ');
+    filterQuery += (query !== '' ? ' and ' : '') + filterGroups.join(' or ');
   }
 
   const result = await graph
diff --git a/src/graph/graph.people.ts b/src/graph/graph.people.ts
@@ -20,39 +20,45 @@ export enum PersonType {
   /**
    * Any type
    */
-  Any = 0,
+  any = 0,
 
   /**
    * A Person such as User or Contact
    */
-  Person = 'Person',
+  person = 'person',
 
   /**
    * A group
    */
-  Group = 'Group'
+  group = 'group'
 }
 
 /**
  * async promise, returns all Graph people who are most relevant contacts to the signed in user.
  *
  * @param {string} query
  * @param {number} [top=10] - number of people to return
- * @param {PersonType} [personType=PersonType.Person] - the type of person to search for
+ * @param {PersonType} [personType=PersonType.person] - the type of person to search for
  * @returns {(Promise<Person[]>)}
  */
 export async function findPeople(
   graph: IGraph,
   query: string,
   top: number = 10,
-  personType: PersonType = PersonType.Person
+  personType: PersonType = PersonType.person
 ): Promise<Person[]> {
   const scopes = 'people.read';
 
   let filterQuery = '';
 
-  if (personType !== PersonType.Any) {
-    filterQuery = `personType/class eq '${personType}'`;
+  if (personType !== PersonType.any) {
+    // converts personType to capitalized case
+    const personTypeString =
+      personType
+        .toString()
+        .charAt(0)
+        .toUpperCase() + personType.toString().slice(1);
+    filterQuery = `personType/class eq '${personTypeString}'`;
   }
 
   const result = await graph
diff --git a/stories/components/peoplePicker.stories.js b/stories/components/peoplePicker.stories.js
@@ -50,16 +50,16 @@ export const DarkMode = () => html`
 `;
 
 export const pickPeopleAndGroups = () => html`
-  <mgt-people-picker type="Any"></mgt-people-picker>
-  <!-- type can be "Any", "Person", "Group" -->
+  <mgt-people-picker type="any"></mgt-people-picker>
+  <!-- type can be "any", "person", "group" -->
 `;
 
 export const pickGroups = () => html`
-  <mgt-people-picker type="Group"></mgt-people-picker>
-  <!-- type can be "Any", "Person", "Group" -->
+  <mgt-people-picker type="group"></mgt-people-picker>
+  <!-- type can be "any", "person", "group" -->
 `;
 
 export const pickDistributionGroups = () => html`
-  <mgt-people-picker type="Group" group-type="Distribution"></mgt-people-picker>
-  <!-- group-type can be "Any", "Unified", "Security", "MailEnabledSecurity", "Distribution" -->
+  <mgt-people-picker type="group" group-type="distribution"></mgt-people-picker>
+  <!-- group-type can be "any", "unified", "security", "mailenabledsecurity", "distribution" -->
 `;
