fix: scopes used to query team channels (#2519)

removes config to use legacy scopes for teams access
clean up construction of team channel items tree
fix proxy provider to use v3.0.2 of graph client

BREAKING CHANGE: removes MgtTeamsChannelPickerConfig
BREAKING CHANGE: removes use of user.read.all and group.read.all scopes for team/channel reading

Co-authored-by: Musale Martin <[email protected]>

Author: gavinbarron

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

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { IGraph, BetaGraph, CacheService, CacheStore } from '@microsoft/mgt-element';
+import { IGraph, BetaGraph, CacheService, CacheStore, prepScopes } from '@microsoft/mgt-element';
 import { Team } from '@microsoft/microsoft-graph-types';
 import {
   getPhotoForResource,
@@ -22,19 +22,18 @@ import { CollectionResponse } from '@microsoft/mgt-element';
  * @returns {Promise<Team[]>}
  * @memberof Graph
  */
-export const getAllMyTeams = async (graph: IGraph): Promise<Team[]> => {
+export const getAllMyTeams = async (graph: IGraph, scopes: string[]): Promise<Team[]> => {
   const teams = (await graph
     .api('/me/joinedTeams')
     .select(['displayName', 'id', 'isArchived'])
+    .middlewareOptions(prepScopes(...scopes))
     .get()) as CollectionResponse<Team>;
 
   return teams?.value;
 };
 
 /** An object collection of cached photos. */
-type CachePhotos = {
-  [key: string]: CachePhoto;
-};
+type CachePhotos = Record<string, CachePhoto>;
 
 /**
  * Load the photos for a give set of teamIds

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

@@ -15,7 +15,8 @@ import {
   MgtTemplatedComponent,
   BetaGraph,
   customElement,
-  mgtHtml
+  mgtHtml,
+  CollectionResponse
 } from '@microsoft/mgt-element';
 import '../../styles/style-helper';
 import '../sub-components/mgt-spinner/mgt-spinner';
@@ -142,22 +143,6 @@ interface ChannelPickerItemState {
   parent: ChannelPickerItemState;
 }
 
-/**
- * Configuration object for the TeamsChannelPicker component
- *
- * @export
- * @interface MgtTeamsChannelPickerConfig
- */
-export interface MgtTeamsChannelPickerConfig {
-  /**
-   * Sets or gets whether the teams channel picker component should use
-   * the Teams based scopes instead of the User and Group based scopes
-   *
-   * @type {boolean}
-   */
-  useTeamsBasedScopes: boolean;
-}
-
 /**
  * Web component used to select channels from a User's Microsoft Teams profile
  *
@@ -209,21 +194,6 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
     return strings;
   }
 
-  /**
-   * Global Configuration object for all
-   * teams channel picker components
-   *
-   * @static
-   * @type {MgtTeamsChannelPickerConfig}
-   * @memberof MgtTeamsChannelPicker
-   */
-  public static get config(): MgtTeamsChannelPickerConfig {
-    return this._config;
-  }
-
-  private static readonly _config = {
-    useTeamsBasedScopes: false
-  };
   private teamsPhotos = {};
 
   /**
@@ -249,11 +219,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
    * @memberof MgtTeamsChannelPicker
    */
   public static get requiredScopes(): string[] {
-    if (this.config.useTeamsBasedScopes) {
-      return ['team.readbasic.all', 'channel.readbasic.all'];
-    } else {
-      return ['user.read.all', 'group.read.all'];
-    }
+    return ['team.readbasic.all', 'channel.readbasic.all'];
   }
 
   private set items(value) {
@@ -695,49 +661,31 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
     if (provider && provider.state === ProviderState.SignedIn) {
       const graph = provider.graph.forComponent(this);
 
-      // make sure we have the needed scopes
-      if (!(await provider.getAccessTokenForScopes(...MgtTeamsChannelPicker.requiredScopes))) {
-        return;
-      }
-
-      teams = await getAllMyTeams(graph);
+      teams = await getAllMyTeams(graph, MgtTeamsChannelPicker.requiredScopes);
       teams = teams.filter(t => !t.isArchived);
 
-      const teamsIds = teams.map(t => t.id);
-
       const beta = BetaGraph.fromGraph(graph);
 
+      const teamsIds = teams.map(t => t.id);
       this.teamsPhotos = await getTeamsPhotosforPhotoIds(beta, teamsIds);
 
-      const batch = graph.createBatch();
-      const scopes = ['team.readbasic.all'];
+      const batch = graph.createBatch<CollectionResponse<MicrosoftGraph.Channel>>();
 
       for (const team of teams) {
-        batch.get(team.id, `teams/${team.id}/channels`, scopes);
+        batch.get(team.id, `teams/${team.id}/channels`, MgtTeamsChannelPicker.requiredScopes);
       }
 
       const responses = await batch.executeAll();
-
+      this._items = [];
       for (const team of teams) {
-        const response = responses.get(team.id);
-
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        if (response?.content?.value) {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-          team.channels = response.content.value.map((c: MicrosoftGraph.Team) => {
-            return {
-              item: c
-            };
-          });
-        }
+        const channelsForTeam = responses.get(team.id);
+        // skip over any teams that don't have channels
+        if (!channelsForTeam.content?.value?.length) continue;
+        this.items.push({
+          item: team,
+          channels: channelsForTeam.content.value.map(c => ({ item: c }))
+        });
       }
-
-      this.items = teams.map(t => {
-        return {
-          channels: t.channels as DropdownItem[],
-          item: t
-        };
-      });
     }
     this.filterList();
     this.resetFocusState();

packages/mgt-element/src/CollectionResponse.ts

@@ -16,5 +16,5 @@ export interface CollectionResponse<T> {
   /**
    * The collection of items
    */
-  value: T[];
+  value?: T[];
 }

packages/providers/mgt-proxy-provider/package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@microsoft/mgt-element": "*",
-    "@microsoft/microsoft-graph-client": "^3.0.0"
+    "@microsoft/microsoft-graph-client": "3.0.2"
   },
   "publishConfig": {
     "directory": "dist"

yarn.lock

@@ -5650,7 +5650,7 @@
     "@microsoft/load-themed-styles" "1.10.292"
     loader-utils "~1.1.0"
 
-"@microsoft/[email protected]", "@microsoft/microsoft-graph-client@^3.0.0", "@microsoft/microsoft-graph-client@^3.0.1":
+"@microsoft/[email protected]", "@microsoft/microsoft-graph-client@^3.0.1":
   version "3.0.2"
   resolved "https://registry.npmjs.org/@microsoft/microsoft-graph-client/-/microsoft-graph-client-3.0.2.tgz"
   integrity sha512-eYDiApYmiGsm1s1jfAa/rhB2xQCsX4pWt0vCTd1LZmiApMQfT/c0hXj2hvpuGz5GrcLdugbu05xB79rIV57Pjw==