merge from main

microsoftgraph · Jul 28, 2023 · f5f4684 · f5f4684
2 parents 7ab67b3 + ec621cd
commit f5f4684
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 112 deletions.
diff --git a/.github/workflows/pr-storybook.yml b/.github/workflows/pr-storybook.yml
@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16.20.0]
 
     steps:
       - uses: actions/checkout@v2

diff --git a/.github/workflows/push-release.yml b/.github/workflows/push-release.yml
@@ -88,7 +88,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16.20.0]
 
     steps:
       - uses: actions/checkout@v2

diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -17,7 +17,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [16.20.0]
 
     steps:
       - uses: actions/checkout@v2

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -8,6 +8,9 @@
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   presets: [
     // {
     //   name: '@storybook/addon-docs/preset',

diff --git a/package.json b/package.json
@@ -69,14 +69,16 @@
     "@microsoft/eslint-config-msgraph": "^1.0.0",
     "@octokit/rest": "^18.5.3",
     "@open-wc/testing-helpers": "^2.3.0",
-    "@storybook/addon-a11y": "^6.4.4",
-    "@storybook/addon-actions": "^6.4.4",
-    "@storybook/addon-docs": "^6.4.4",
-    "@storybook/addon-knobs": "^6.3.0",
-    "@storybook/addon-links": "^6.4.4",
-    "@storybook/addon-storysource": "^6.4.4",
-    "@storybook/cli": "^6.4.4",
-    "@storybook/web-components": "^6.4.4",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-storysource": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/cli": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/web-components": "^6.5.16",
     "@testing-library/dom": "^8.20.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
@@ -141,6 +143,7 @@
     "ts-jest": "^29.1.0",
     "typescript": "^5.1.5",
     "web-component-analyzer": "^1.1.6",
+    "webpack": "^5.76.0",
     "whatwg-fetch": "^3.6.2"
   },
   "husky": {

diff --git a/packages/mgt-components/README.md b/packages/mgt-components/README.md
@@ -13,16 +13,23 @@ You can explore components and samples with the [playground](https://mgt.dev) po
 
 The Toolkit currently includes the following components:
 
+* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-file](https://learn.microsoft.com/graph/toolkit/components/file)
+* [mgt-file-list](https://learn.microsoft.com/graph/toolkit/components/file-list)
+* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
 * [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
-* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
-* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
 * [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
 * [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
-* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
+* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
+* [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
+* [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
 * [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
-* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
-* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
+* [mgt-taxonomy-picker](https://learn.microsoft.com/graph/toolkit/components/taxonomy-picker)
 * [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
+* [mgt-theme-toggle](https://learn.microsoft.com/graph/toolkit/components/theme-toggle)
+* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
 
 The components work best when used with a [provider](https://learn.microsoft.com/graph/toolkit/providers). The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.
 

diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
@@ -16,7 +16,7 @@ import { getEventsPageIterator, getEventsQueryPageIterator } from './mgt-agenda.
 import { SvgIcon, getSvg } from '../../utils/SvgHelper';
 import { MgtPeople, registerMgtPeopleComponent } from '../mgt-people/mgt-people';
 import { registerFluentComponents } from '../../utils/FluentComponents';
-import { fluentCard, fluentTooltip } from '@fluentui/web-components';
+import { fluentCard } from '@fluentui/web-components';
 import { classMap } from 'lit/directives/class-map.js';
 import { registerComponent } from '../registerComponent';
 
@@ -47,7 +47,7 @@ import { registerComponent } from '../registerComponent';
  */
 
 export const registerMgtAgendaComponent = () => {
-  registerFluentComponents(fluentCard, fluentTooltip);
+  registerFluentComponents(fluentCard);
   // register dependent components
   registerMgtPeopleComponent();
   // register self
@@ -407,38 +407,16 @@ export class MgtAgenda extends MgtTemplatedComponent {
    * @memberof MgtAgenda
    */
   protected renderTitle(event: MicrosoftGraph.Event): TemplateResult {
-    let eventDescription = event?.bodyPreview ? event.bodyPreview.slice(0, 100) : '';
-    const hasDescription = eventDescription !== '';
-
-    const eventSubjectClasses = {
-      'event-subject': true,
-      narrow: this._isNarrow
-    };
-
-    eventDescription = eventDescription.split(' ').slice(0, -1).join(' ') + '...';
-
-    const hasDescriptionDiv = html`
-      <div
-        aria-describedby="tooltip-${event.id}"
-        class="${classMap(eventSubjectClasses)}"
-        id=${event.id}>
-          ${event.subject}
-      </div>
-      <fluent-tooltip
-        id="tooltip-${event.id}"
-        position="right"
-        anchor="${event.id}">
-          ${eventDescription}
-      </fluent-tooltip>
-    `;
-
-    const noDescriptionDiv = html`
+    return html`
       <div
         aria-label=${event.subject}
-        class="${classMap(eventSubjectClasses)}">
-          ${event.subject}
+        class="${classMap({
+          'event-subject': true,
+          narrow: this._isNarrow
+        })}"
+      >
+        ${event.subject}
       </div>`;
-    return hasDescription ? hasDescriptionDiv : noDescriptionDiv;
   }
 
   /**

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
@@ -66,6 +66,13 @@ interface FutureDataTransferItem extends DataTransferItem {
   getAsEntry: typeof DataTransferItem.prototype.webkitGetAsEntry;
 }
 
+const isFutureDataTransferItem = (item: DataTransferItem): item is FutureDataTransferItem =>
+  'getAsEntry' in item && typeof item.getAsEntry === 'function';
+
+const isDataTransferItem = (item: DataTransferItem | File): item is DataTransferItem =>
+  ('getAsFile' in item && typeof item.getAsFile === 'function') ||
+  ('webkitGetAsEntry' in item && typeof item.webkitGetAsEntry === 'function');
+
 /**
  * Upload conflict behavior status
  */
@@ -1165,13 +1172,10 @@ export class MgtFileUpload extends MgtBaseComponent {
     let entry: FileSystemEntry;
     const collectFilesItems: File[] = [];
 
-    for (const uploadFileItem of filesItems as DataTransferItemList) {
-      if (uploadFileItem.kind === 'file') {
-        // Defensive code to validate if function exists in Browser
-        // Collect all Folders into Array
-        const futureUpload = uploadFileItem as FutureDataTransferItem;
-        if (futureUpload.getAsEntry) {
-          entry = futureUpload.getAsEntry();
+    for (const uploadFileItem of filesItems) {
+      if (isDataTransferItem(uploadFileItem)) {
+        if (isFutureDataTransferItem(uploadFileItem)) {
+          entry = uploadFileItem.getAsEntry();
           if (isFileSystemDirectoryEntry(entry)) {
             folders.push(entry);
           } else {
@@ -1192,22 +1196,19 @@ export class MgtFileUpload extends MgtBaseComponent {
               collectFilesItems.push(file);
             }
           }
-        } else if ('function' == typeof uploadFileItem.getAsFile) {
+        } else {
           const file = uploadFileItem.getAsFile();
           if (file) {
             this.writeFilePath(file, '');
             collectFilesItems.push(file);
           }
         }
-        continue;
       } else {
-        const fileItem = uploadFileItem.getAsFile();
-        if (fileItem) {
-          this.writeFilePath(fileItem, '');
-          collectFilesItems.push(fileItem);
-        }
+        this.writeFilePath(uploadFileItem, '');
+        collectFilesItems.push(uploadFileItem);
       }
     }
+
     // Collect Files from folder
     if (folders.length > 0) {
       const folderFiles = await this.getFolderFiles(folders);

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -707,8 +707,15 @@ export class MgtPerson extends MgtTemplatedComponent {
    */
   protected renderImage(personDetailsInternal: IDynamicPerson, imageSrc: string) {
     const altText = `${this.strings.photoFor} ${personDetailsInternal.displayName}`;
-    const hasImage = imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo';
-    const imageTemplate = html`<img alt=${altText} src=${imageSrc} @error=${() => (this._isInvalidImageSrc = true)} />`;
+    const hasImage = imageSrc && !this._isInvalidImageSrc && this._avatarType === avatarType.photo;
+    const imageOnly = this.avatarType === avatarType.photo && this.view === ViewType.image;
+    const titleText =
+      (personDetailsInternal?.displayName || getEmailFromGraphEntity(personDetailsInternal)) ?? undefined;
+    const imageTemplate = html`<img
+      title="${ifDefined(imageOnly ? titleText : undefined)}"
+      alt=${altText}
+      src=${imageSrc}
+      @error=${() => (this._isInvalidImageSrc = true)} />`;
 
     const initials = personDetailsInternal ? this.getInitials(personDetailsInternal) : '';
     const hasInitials = initials?.length;
@@ -721,6 +728,7 @@ export class MgtPerson extends MgtTemplatedComponent {
     // this reduces the redundant announcement of the user's name.
     const textTemplate = html`
       <span 
+        title="${ifDefined(this.view === ViewType.image ? titleText : undefined)}"
         role="${ifDefined(this.view === ViewType.image ? undefined : 'presentation')}"
         class="${textClasses}"
       >

diff --git a/packages/mgt-components/src/graph/graph.people.ts b/packages/mgt-components/src/graph/graph.people.ts
@@ -224,9 +224,9 @@ export const getPeople = async (
 };
 
 /**
- * returns a promise that resolves after specified time
+ * Attempts to extract the email from the IDynamicPerson properties.
  *
- * @param time in milliseconds
+ * @param {IDynamicperson} entity
  */
 export const getEmailFromGraphEntity = (entity: IDynamicPerson): string => {
   const person = entity as Person;

diff --git a/packages/mgt-element/src/IGraph.ts b/packages/mgt-element/src/IGraph.ts
@@ -75,26 +75,23 @@ export type GraphEndpoint =
   | 'https://graph.microsoft.us'
   | 'https://dod-graph.microsoft.us'
   | 'https://graph.microsoft.de'
-  | 'https://microsoftgraph.chinacloudapi.cn';
-
-/**
- * MICROSOFT_GRAPH_ENDPOINTS is a set of all the valid Graph URL endpoints.
- */
-export const MICROSOFT_GRAPH_ENDPOINTS: Set<GraphEndpoint> = new Set<GraphEndpoint>();
+  | 'https://microsoftgraph.chinacloudapi.cn'
+  | 'https://canary.graph.microsoft.com';
 
 /**
  * MICROSOFT_GRAPH_DEFAULT_ENDPOINT is the default Graph endpoint that is silently set on
  * the providers as the baseURL.
  */
 export const MICROSOFT_GRAPH_DEFAULT_ENDPOINT: GraphEndpoint = 'https://graph.microsoft.com';
 
-(() => {
-  const endpoints: GraphEndpoint[] = [
-    MICROSOFT_GRAPH_DEFAULT_ENDPOINT,
-    'https://graph.microsoft.us',
-    'https://dod-graph.microsoft.us',
-    'https://graph.microsoft.de',
-    'https://microsoftgraph.chinacloudapi.cn'
-  ];
-  endpoints.forEach(endpoint => MICROSOFT_GRAPH_ENDPOINTS.add(endpoint));
-})();
+/**
+ * MICROSOFT_GRAPH_ENDPOINTS is a set of all the valid Graph URL endpoints.
+ */
+export const MICROSOFT_GRAPH_ENDPOINTS: Set<GraphEndpoint> = new Set<GraphEndpoint>([
+  MICROSOFT_GRAPH_DEFAULT_ENDPOINT,
+  'https://graph.microsoft.us',
+  'https://dod-graph.microsoft.us',
+  'https://graph.microsoft.de',
+  'https://microsoftgraph.chinacloudapi.cn',
+  'https://canary.graph.microsoft.com'
+]);
diff --git a/packages/mgt/README.md b/packages/mgt/README.md
@@ -15,27 +15,34 @@ The Microsoft Graph Toolkit includes a collection of web components for the most
 
 The components are also available as [React components](https://learn.microsoft.com/graph/toolkit/get-started/mgt-react).
 
+* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-file](https://learn.microsoft.com/graph/toolkit/components/file)
+* [mgt-file-list](https://learn.microsoft.com/graph/toolkit/components/file-list)
+* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
 * [mgt-login](https://learn.microsoft.com/graph/toolkit/components/login)
-* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
-* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
 * [mgt-people](https://learn.microsoft.com/graph/toolkit/components/people)
 * [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
-* [mgt-agenda](https://learn.microsoft.com/graph/toolkit/components/agenda)
+* [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
+* [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
+* [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
+* [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
 * [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)
-* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
-* [mgt-get](https://learn.microsoft.com/graph/toolkit/components/get)
+* [mgt-taxonomy-picker](https://learn.microsoft.com/graph/toolkit/components/taxonomy-picker)
 * [mgt-teams-channel-picker](https://learn.microsoft.com/graph/toolkit/components/teams-channel-picker)
+* [mgt-theme-toggle](https://learn.microsoft.com/graph/toolkit/components/theme-toggle)
+* [mgt-todo](https://learn.microsoft.com/graph/toolkit/components/todo)
 
 ## Providers
 [Providers](https://learn.microsoft.com/graph/toolkit/providers) enable authentication and provide the implementation for acquiring access tokens on various platforms and expose a Microsoft Graph Client for calling the Microsoft Graph APIs. The components work best when used with a provider, but the providers can be used on their own.
 
-* [Msal Provider](https://learn.microsoft.com/graph/toolkit/providers/msal)
-* [Msal2 Provider](https://learn.microsoft.com/graph/toolkit/providers/msal2)
-* [SharePoint Provider](https://learn.microsoft.com/graph/toolkit/providers/sharepoint)
-* [Teams Provider](https://learn.microsoft.com/graph/toolkit/providers/teams)
-* [Teams Msal2 Provider](https://learn.microsoft.com/graph/toolkit/providers/teams-msal2)
-* [Proxy Provider](https://learn.microsoft.com/graph/toolkit/providers/proxy)
-* [Simple Provider](https://learn.microsoft.com/graph/toolkit/providers/custom)
+* [Msal2Provider](https://learn.microsoft.com/graph/toolkit/providers/msal2)
+* [SharePointProvider](https://learn.microsoft.com/graph/toolkit/providers/sharepoint)
+* [TeamsFxProvider](https://learn.microsoft.com/graph/toolkit/providers/teamsfx)
+* [ProxyProvider](https://learn.microsoft.com/graph/toolkit/providers/proxy)
+* [SimpleProvider](https://learn.microsoft.com/graph/toolkit/providers/custom)
+* [ElectronProvider](https://learn.microsoft.com/graph/toolkit/providers/electron)
+
 
 ## Getting Started
 
@@ -46,15 +53,15 @@ You can use the components by referencing the loader directly (via unpkg), or in
 ### Use via mgt-loader:
 
 ```html
-<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
+<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
 ```
 
-> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 2.0.0 < 3.0.0`, omitting the `@2` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
+> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 3.0.0 < 4.0.0`, omitting the `@3` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
 
 You can then start using the components in your html page. Here is a full working example with the Msal2 provider:
 
 ```html
-<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
+<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
 
 <mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
 

diff --git a/readme.md b/readme.md
@@ -62,6 +62,7 @@ The Toolkit currently includes the following components:
 * [mgt-people-picker](https://learn.microsoft.com/graph/toolkit/components/people-picker)
 * [mgt-person](https://learn.microsoft.com/graph/toolkit/components/person)
 * [mgt-person-card](https://learn.microsoft.com/graph/toolkit/components/person-card)
+* [mgt-picker](https://learn.microsoft.com/en-us/graph/toolkit/components/picker)
 * [mgt-search-box](https://learn.microsoft.com/graph/toolkit/components/person-box)
 * [mgt-search-results](https://learn.microsoft.com/graph/toolkit/components/search-results)
 * [mgt-tasks](https://learn.microsoft.com/graph/toolkit/components/tasks)