merge from main

cem-plugins/mgt-tag-plugin.mjs

@@ -16,8 +16,8 @@ export default function mgtTagPlugin() {
         //do things...
         if (context.dev) console.log(node);
 
-        var elementClass = node.arguments[1].text;
         var elementTag = node.arguments[0].text;
+        var elementClass = node.arguments[1].text;
         const definitionDoc = {
           kind: 'custom-element-definition',
           name: elementTag,

package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "init": "yarn && yarn build",
-    "analyze": "custom-elements-manifest analyze --globs \"./packages/*/src/**/*.ts\"",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"./packages/*/src/**/*.ts\"",
     "build": "npm run prettier:check && npm run clean && lerna run build --scope '@microsoft/*'",
     "build:dev": "npm run prettier:check && lerna run build --scope '@microsoft/*' --ignore '@microsoft/mgt' --ignore '@microsoft/mgt-spf*' --ignore '@microsoft/mgt-sharepoint-provider' --ignore '@microsoft/mgt-electron-provider' --ignore '@microsoft/mgt-teamsfx-provider' --ignore '@microsoft/mgt-proxy-provider'",
     "build:compile": "npm run prettier:check && npm run clean && lerna run build:compile --scope '@microsoft/*'",
@@ -66,7 +66,7 @@
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.12.7",
     "@babel/preset-typescript": "^7.23.0",
-    "@custom-elements-manifest/analyzer": "^0.8.3",
+    "@custom-elements-manifest/analyzer": "^0.9.0",
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@microsoft/eslint-config-msgraph": "^2.0.0",
     "@octokit/rest": "^18.5.3",

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

@@ -55,6 +55,7 @@ export * from './mgt-search-box/mgt-search-box';
 export * from './mgt-search-results/mgt-search-results';
 export * from './mgt-theme-toggle/mgt-theme-toggle';
 export * from './sub-components/mgt-spinner/mgt-spinner';
+export * from './mgt-teams-channel-picker/teams-channel-picker-types';
 // include preview components here for ease of import into mgt-react
 // There are no preview components in this package at this time
 // export * from './preview';

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

@@ -15,7 +15,6 @@ import { AvatarSize, IDynamicPerson, ViewType } from '../../graph/types';
 import { MgtFlyout, registerMgtFlyoutComponent } from '../sub-components/mgt-flyout/mgt-flyout';
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
 import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person';
-import { PersonViewType } from '../mgt-person/mgt-person-types';
 
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 
@@ -607,7 +606,7 @@ export class MgtLogin extends MgtTemplatedComponent {
                       <mgt-person
                         .personDetails=${details ? JSON.parse(details) : null}
                         .fallbackDetails=${{ displayName: account.name, mail: account.mail }}
-                        .view=${PersonViewType.twolines}
+                        .view=${ViewType.twolines}
                         class="account"
                       ></mgt-person>
                     </li>`;

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

@@ -34,7 +34,6 @@ import {
   mgtHtml
 } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
-import '../sub-components/mgt-spinner/mgt-spinner';
 import { debounce, isValidEmail } from '../../utils/Utils';
 import { MgtPerson, defaultPersonProperties, registerMgtPersonComponent } from '../mgt-person/mgt-person';
 import { PersonCardInteraction } from '../PersonCardInteraction';
@@ -251,7 +250,6 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   /**
    * The type of user to search for. Default is any.
    *
-   * @readonly
    * @type {UserType}
    * @memberof MgtPeoplePicker
    */
@@ -1082,7 +1080,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
                 } catch (_) {
                   this._groupPeople = [];
                 }
-              } else if (this.groupIds) {
+              } else {
                 if (this.type === PersonType.group) {
                   try {
                     this._groupPeople = await getGroupsForGroupIds(graph, this.groupIds, this.groupFilters);
@@ -1120,21 +1118,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               }
             }
           } else if (this.type === PersonType.group) {
-            if (this.groupIds) {
-              try {
-                people = await this.getGroupsForGroupIds(graph, people);
-              } catch (_) {
-                // nop
-              }
-            } else {
-              let groups = (await findGroups(graph, '', this.showMax, this.groupType, this._groupFilters)) || [];
-              // eslint-disable-next-line @typescript-eslint/dot-notation
-              if (groups.length > 0 && groups[0]['value']) {
-                // eslint-disable-next-line @typescript-eslint/dot-notation, @typescript-eslint/no-unsafe-assignment
-                groups = groups[0]['value'];
-              }
-              people = groups;
+            let groups = (await findGroups(graph, '', this.showMax, this.groupType, this._groupFilters)) || [];
+            // eslint-disable-next-line @typescript-eslint/dot-notation
+            if (groups.length > 0 && groups[0]['value']) {
+              // eslint-disable-next-line @typescript-eslint/dot-notation, @typescript-eslint/no-unsafe-assignment
+              groups = groups[0]['value'];
             }
+            people = groups;
           }
           this.defaultPeople = people;
         }
@@ -1190,15 +1180,15 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
               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?.length) {
-                  // has the user-ids proerty set
+                  // has the user-ids property set
                   people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
                 } else {
                   people = await findUsers(graph, input, this.showMax, this._userFilters);
                 }
               } else {
                 if (!this.groupIds) {
                   if (this.userIds?.length) {
-                    // has the user-ids proerty set
+                    // has the user-ids property set
                     people = await getUsersForUserIds(graph, this.userIds, input, this._userFilters);
                   } else {
                     people = (await findPeople(graph, input, this.showMax, this.userType, this._peopleFilters)) || [];
@@ -1607,25 +1597,29 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           if (this.hasMaxSelections) {
             this.disableTextInput();
           }
+          return;
         }
-      } else if (this.allowAnyEmail) {
+      }
+
+      if (this.allowAnyEmail) {
         this.handleAnyEmail();
       } else {
         this.showFlyout();
       }
     }
 
-    if (keyName === 'Tab') {
-      this.hideFlyout();
-    }
-
-    if ([';', ','].includes(keyName)) {
+    if ([';', ',', 'Tab'].includes(keyName)) {
       if (this.allowAnyEmail) {
-        event.preventDefault();
+        // need to ensure the tab key does tab things
+        if ('Tab' !== keyName) event.preventDefault();
         this.userInput = this.input.value;
         this.handleAnyEmail();
       }
     }
+    // need to ensure that the tab key hides the flyout even if the input doesn't have an email address
+    if (keyName === 'Tab') {
+      this.hideFlyout();
+    }
   };
 
   /**

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

@@ -492,10 +492,10 @@ export class MgtPeople extends MgtTemplatedComponent {
         // populate people
         if (this.groupId) {
           this.people = await findGroupMembers(graph, null, this.groupId, this.showMax, PersonType.person);
-        } else if (this.userIds || this.peopleQueries) {
-          this.people = this.userIds
-            ? await getUsersForUserIds(graph, this.userIds, '', '', this._fallbackDetails)
-            : await getUsersForPeopleQueries(graph, this.peopleQueries, this._fallbackDetails);
+        } else if (this.userIds) {
+          this.people = await getUsersForUserIds(graph, this.userIds, '', '', this._fallbackDetails);
+        } else if (this.peopleQueries) {
+          this.people = await getUsersForPeopleQueries(graph, this.peopleQueries, this._fallbackDetails);
         } else if (this.resource) {
           this.people = await getPeopleFromResource(graph, this.version, this.resource, this.scopes);
         } else {

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.graph.ts

@@ -119,8 +119,9 @@ const buildOrgStructureRequest = (batch: IBatch, userId: string) => {
   batch.get(batchKeys.directReports, `users/${userId}/directReports?$select=${userProperties}`);
 };
 
+const validPeopleScopes = ['People.Read.All'];
 const buildWorksWithRequest = (batch: IBatch, userId: string) => {
-  batch.get(batchKeys.people, `users/${userId}/people?$filter=personType/class eq 'Person'`, validUserByIdScopes);
+  batch.get(batchKeys.people, `users/${userId}/people?$filter=personType/class eq 'Person'`, validPeopleScopes);
 };
 const validMailSearchScopes = ['Mail.ReadBasic', 'Mail.Read', 'Mail.ReadWrite'];
 const buildMessagesWithUserRequest = (batch: IBatch, emailAddress: string) => {
@@ -139,6 +140,7 @@ const buildFilesRequest = (batch: IBatch, emailAddress?: string) => {
   batch.get(batchKeys.files, request, validInsightScopes);
 };
 
+const validProfileScopes = ['User.Read.All', 'User.ReadWrite.All'];
 /**
  * Get the profile for a user
  *
@@ -150,7 +152,7 @@ const getProfile = async (graph: IGraph, userId: string): Promise<Profile> =>
   (await graph
     .api(`/users/${userId}/profile`)
     .version('beta')
-    .middlewareOptions(prepScopes(validUserByIdScopes))
+    .middlewareOptions(prepScopes(validProfileScopes))
     .get()) as Profile;
 
 const validCreateChatScopes = ['Chat.Create', 'Chat.ReadWrite'];

packages/mgt-components/src/components/mgt-person/mgt-person-types.ts

@@ -4,41 +4,6 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-
-/**
- * Enumeration to define what parts of the person component render
- *
- * @export
- * @enum {number}
- */
-
-export enum PersonViewType {
-  /**
-   * Render only the avatar
-   */
-  avatar = 2,
-
-  /**
-   * Render the avatar and one line of text
-   */
-  oneline = 3,
-
-  /**
-   * Render the avatar and two lines of text
-   */
-  twolines = 4,
-
-  /**
-   * Render the avatar and three lines of text
-   */
-  threelines = 5,
-
-  /**
-   * Render the avatar and four lines of text
-   */
-  fourlines = 6
-}
-
 export enum avatarType {
   /**
    * Renders avatar photo if available, falls back to initials

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

@@ -22,7 +22,7 @@ import '../sub-components/mgt-flyout/mgt-flyout';
 import { MgtFlyout, registerMgtFlyoutComponent } from '../sub-components/mgt-flyout/mgt-flyout';
 import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-person-css';
-import { MgtPersonConfig, PersonViewType, avatarType } from './mgt-person-types';
+import { MgtPersonConfig, avatarType } from './mgt-person-types';
 import { strings } from './strings';
 import { isUser, isContact } from '../../graph/entityType';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -505,7 +505,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    * Sets what data to be rendered (image only, oneLine, twoLines).
    * Default is 'image'.
    *
-   * @type {ViewType | PersonViewType}
+   * @type {ViewType}
    * @memberof MgtPerson
    */
   @property({
@@ -523,7 +523,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       }
     }
   })
-  public view: ViewType | PersonViewType;
+  public view: ViewType = ViewType.image;
 
   @state() private _fetchedImage: string;
   @state() private _fetchedPresence: Presence;
@@ -917,7 +917,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    * @returns
    */
   protected renderDetails(personProps: IDynamicPerson, presence?: Presence): TemplateResult {
-    if (!personProps || this.view === ViewType.image || this.view === PersonViewType.avatar) {
+    if (!personProps || this.view === ViewType.image) {
       return html``;
     }
 

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

@@ -421,7 +421,7 @@ export class MgtTaxonomyPicker extends MgtTemplatedComponent {
         class="mgt-get"
         resource=${resource}
         version=${this.version}
-        scopes=${['TermStore.Read.All']}
+        scopes="TermStore.Read.All, TermStore.ReadWrite.All"
         ?cache-enabled=${this.cacheEnabled}
         ?cache-invalidation-period=${this.cacheInvalidationPeriod}>
       </mgt-get>`;

packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.graph.ts

@@ -5,8 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { IGraph, BetaGraph, CacheService, CacheStore, prepScopes } from '@microsoft/mgt-element';
-import { Team } from '@microsoft/microsoft-graph-types';
+import { IGraph, CacheService, CacheStore, prepScopes } from '@microsoft/mgt-element';
+import { Team, Channel } from '@microsoft/microsoft-graph-types';
 import {
   getPhotoForResource,
   CachePhoto,
@@ -15,14 +15,28 @@ import {
 } from '../../graph/graph.photos';
 import { schemas } from '../../graph/cacheStores';
 import { CollectionResponse } from '@microsoft/mgt-element';
+import { DropdownItem } from './teams-channel-picker-types';
+
+const teamReadScopes = [
+  'Team.ReadBasic.All',
+  'TeamSettings.Read.All',
+  'TeamSettings.ReadWrite.All',
+  'User.Read.All',
+  'User.ReadWrite.All'
+];
+
+const channelReadScopes = ['Channel.ReadBasic.All', 'ChannelSettings.Read.All', 'ChannelSettings.ReadWrite.All'];
+
+const teamPhotoReadScopes = ['Team.ReadBasic.All', 'TeamSettings.Read.All', 'TeamSettings.ReadWrite.All'];
 
 /**
  * async promise, returns all Teams associated with the user logged in
  *
  * @returns {Promise<Team[]>}
  * @memberof Graph
  */
-export const getAllMyTeams = async (graph: IGraph, scopes: string[]): Promise<Team[]> => {
+export const getAllMyTeams = async (graph: IGraph): Promise<Team[]> => {
+  const scopes = teamReadScopes;
   const teams = (await graph
     .api('/me/joinedTeams')
     .select(['displayName', 'id', 'isArchived'])
@@ -38,11 +52,11 @@ type CachePhotos = Record<string, CachePhoto>;
 /**
  * Load the photos for a give set of teamIds
  *
- * @param graph {BetaGraph}
+ * @param graph {IGraph}
  * @param teamIds {string[]}
  * @returns {Promise<CachePhotos>}
  */
-export const getTeamsPhotosForPhotoIds = async (graph: BetaGraph, teamIds: string[]): Promise<CachePhotos> => {
+export const getTeamsPhotosForPhotoIds = async (graph: IGraph, teamIds: string[]): Promise<CachePhotos> => {
   let cache: CacheStore<CachePhoto>;
   let photos: CachePhotos = {};
 
@@ -63,12 +77,11 @@ export const getTeamsPhotosForPhotoIds = async (graph: BetaGraph, teamIds: strin
     }
   }
 
-  const scopes = ['team.readbasic.all'];
   photos = {};
 
   for (const id of teamIds) {
     try {
-      const photoDetail = await getPhotoForResource(graph, `/teams/${id}`, scopes);
+      const photoDetail = await getPhotoForResource(graph, `/teams/${id}`, teamPhotoReadScopes);
       if (getIsPhotosCacheEnabled() && photoDetail) {
         await cache.putValue(id, photoDetail);
       }
@@ -80,3 +93,31 @@ export const getTeamsPhotosForPhotoIds = async (graph: BetaGraph, teamIds: strin
 
   return photos;
 };
+
+/**
+ * Creates an array of DropdownItems from an array of Teams populated with channels and photos
+ *
+ * @param graph {IGraph}
+ * @param teams {Team[]} the teams to get channels for
+ * @returns {Promise<DropdownItem[]>} a promise that resolves to an array of DropdownItems
+ */
+export const getChannelsForTeams = async (graph: IGraph, teams: Team[]): Promise<DropdownItem[]> => {
+  const batch = graph.createBatch<CollectionResponse<Channel>>();
+
+  for (const team of teams) {
+    batch.get(team.id, `teams/${team.id}/channels`, channelReadScopes);
+  }
+
+  const responses = await batch.executeAll();
+  const result: DropdownItem[] = [];
+  for (const team of teams) {
+    const channelsForTeam = responses.get(team.id);
+    // skip over any teams that don't have channels
+    if (!channelsForTeam?.content?.value?.length) continue;
+    result.push({
+      item: team,
+      channels: channelsForTeam.content.value.map(c => ({ item: c }))
+    });
+  }
+  return result;
+};