feature: Update teams-channel-picker to fluent UI designs (#1805)

* update: Set rtl and images for fluent UI look

* update: Make card height wrap around the content

* update: Make searched channels expand in dropdown

* refactor: Remove deprecated even.keyCode for event.code

* fix: Apply auto card height on the fluent-card

* fix: Set render direction to ltr by default and auto height card

* update: set the dir attribute at the top most part of the element

This together with setting the dir attribute on the fluent-tree-view enables
the fluentui components to set the dir on their own. Multiple dir attributes are
unnecessary and cause the fluentui components to exhibit unexpected behaviour.

* update: Change the usage of fluentui components

* update: Set card width

* update: Set the width to 368px

* update: Handle enter keypress on channel

* fix: use min-width to allow growth of element when txt is long

* fix: flexible width for the dropdown and selected values

* fix: hide the dropdown on losing component focus

* fix: change the loading component props to align with main component

* refactor: remove unused code

* fix: format fixes and new lock file

* fix: disable input on selecting a channel

* fix: toggle the chevrons and close btn correctly

* fix: set a fixed width and resize selected channel img

* fix: truncate selected team or channel to fit the width

* fix: test the fluent component in spinner

* fix: custom event detail should be an obj in an array

* fix: mark a channel selected by ID as highlighted in the DOM

* fix: remove the click event on the team tree-item

* fix: remove highlight on clicking a team name

- make clicking the team only expand/collapse channel list

* fix: stop showing the  previously selected channel

* remove the DOM properties that show it selected manually to avoid reloading the state of the component

* fix: selectionChanged evt to emit correct type

* fix: update the layout of selected pills

* fix: remove end slot on selected team

Render the team parent name with the default slot

---------

Co-authored-by: Gavin Barron <[email protected]>

Author: musale

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

@@ -5,8 +5,15 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { IGraph, prepScopes } from '@microsoft/mgt-element';
+import { IGraph, BetaGraph, CacheItem, CacheService, CacheStore } from '@microsoft/mgt-element';
 import { Team } from '@microsoft/microsoft-graph-types';
+import {
+  getPhotoForResource,
+  CachePhoto,
+  getPhotoInvalidationTime,
+  getIsPhotosCacheEnabled
+} from '../../graph/graph.photos';
+import { schemas } from '../../graph/cacheStores';
 
 /**
  * async promise, returns all Teams associated with the user logged in
@@ -15,11 +22,46 @@ import { Team } from '@microsoft/microsoft-graph-types';
  * @memberof Graph
  */
 export async function getAllMyTeams(graph: IGraph): Promise<Team[]> {
-  const scopes = 'team.readbasic.all';
-  const teams = await graph
-    .api('/me/joinedTeams')
-    .select(['displayName', 'id', 'isArchived'])
-    .middlewareOptions(prepScopes(scopes))
-    .get();
+  const teams = await graph.api('/me/joinedTeams').select(['displayName', 'id', 'isArchived']).get();
   return teams ? teams.value : null;
 }
+
+/** An object collection of cached photos. */
+type CachePhotos = {
+  [key: string]: CachePhoto;
+};
+
+export async function getTeamsPhotosforPhotoIds(graph: BetaGraph, teamIds: string[]): Promise<CachePhotos> {
+  let cache: CacheStore<CachePhoto>;
+  let photos: CachePhotos = {};
+
+  if (getIsPhotosCacheEnabled()) {
+    cache = CacheService.getCache<CachePhoto>(schemas.photos, schemas.photos.stores.teams);
+    for (const id of teamIds) {
+      try {
+        const photoDetail = await cache.getValue(id);
+        if (photoDetail && getPhotoInvalidationTime() > Date.now() - photoDetail.timeCached) {
+          photos[id] = photoDetail;
+        }
+      } catch (_) {}
+    }
+    if (Object.keys(photos).length) {
+      return photos;
+    }
+  }
+
+  let scopes = ['team.readbasic.all'];
+  photos = {};
+
+  for (const id of teamIds) {
+    try {
+      const photoDetail = await getPhotoForResource(graph, `/teams/${id}`, scopes);
+      if (getIsPhotosCacheEnabled() && photoDetail) {
+        cache.putValue(id, photoDetail);
+      }
+      photos[id] = photoDetail;
+    } catch (_) {}
+  }
+
+  return photos;
+}