improving type import generation logic for events

microsoftgraph · Dec 12, 2022 · 0ee3993 · 0ee3993
1 parent de515c4
commit 0ee3993
Show file tree

Hide file tree

Showing 18 changed files with 149 additions and 85 deletions.
diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
@@ -557,7 +557,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
   }
 
   private async loadEvents(): Promise<MicrosoftGraph.Event[]> {
-    const p = Providers.globalProvider;
+    const p = this.provider;
     let events: MicrosoftGraph.Event[] = [];
 
     if (p && p.state === ProviderState.SignedIn) {

diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
@@ -565,7 +565,7 @@ export class MgtFileList extends MgtTemplatedComponent {
   protected renderNoData(): TemplateResult {
     return (
       this.renderTemplate('no-data', null) ||
-      (this.enableFileUpload === true && Providers.globalProvider !== undefined
+      (this.enableFileUpload === true && this.provider !== undefined
         ? html`
       <fluent-design-system-provider use-defaults>
         <div id="file-list-wrapper" class="file-list-wrapper" dir=${this.direction}>
@@ -661,7 +661,7 @@ export class MgtFileList extends MgtTemplatedComponent {
    */
   protected renderFileUpload(): TemplateResult {
     const fileUploadConfig: MgtFileUploadConfig = {
-      graph: Providers.globalProvider.graph.forComponent(this),
+      graph: this.provider.graph.forComponent(this),
       driveId: this.driveId,
       excludedFileExtensions: this.excludedFileExtensions,
       groupId: this.groupId,
@@ -768,7 +768,7 @@ export class MgtFileList extends MgtTemplatedComponent {
    * @memberof MgtFileList
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state === ProviderState.Loading) {
       return;
     }

diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.ts b/packages/mgt-components/src/components/mgt-file/mgt-file.ts
@@ -577,7 +577,7 @@ export class MgtFile extends MgtTemplatedComponent {
       return;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state === ProviderState.Loading) {
       return;
     }

diff --git a/packages/mgt-components/src/components/mgt-get/mgt-get.ts b/packages/mgt-components/src/components/mgt-get/mgt-get.ts
@@ -304,7 +304,7 @@ export class MgtGet extends MgtTemplatedComponent {
    * @memberof MgtGet
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     this.error = null;
 
@@ -400,7 +400,7 @@ export class MgtGet extends MgtTemplatedComponent {
 
             if (image) {
               response = {
-                image: image
+                image
               };
             }
           }

diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
@@ -129,7 +129,7 @@ export class MgtLogin extends MgtTemplatedComponent {
       return;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     if (provider && provider.login) {
       await provider.login();
@@ -153,7 +153,7 @@ export class MgtLogin extends MgtTemplatedComponent {
       return;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (provider && provider.logout) {
       await provider.logout();
       this.userDetails = null;
@@ -186,7 +186,7 @@ export class MgtLogin extends MgtTemplatedComponent {
    * @memberof MgtLogin
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (provider && !this.userDetails) {
       if (provider.state === ProviderState.SignedIn) {
         this.userDetails = await getUserWithPhoto(provider.graph.forComponent(this));
@@ -209,7 +209,7 @@ export class MgtLogin extends MgtTemplatedComponent {
    * @memberof MgtLogin
    */
   protected renderButton() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     const signedInState = ProviderState.SignedIn;
 
     let ariaLabel = this.strings.signInLinkSubtitle;

diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -550,8 +550,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @memberof MgtPeoplePicker
    */
   public async selectUsersById(userIds: readonly string[]): Promise<void> {
-    const provider = Providers.globalProvider;
-    const graph = Providers.globalProvider.graph;
+    const provider = this.provider;
+    const graph = this.provider.graph;
     if (provider && provider.state === ProviderState.SignedIn) {
       // tslint:disable-next-line: forin
       for (const id in userIds) {
@@ -582,8 +582,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @memberof MgtPeoplePicker
    */
   public async selectGroupsById(groupIds: readonly string[]): Promise<void> {
-    const provider = Providers.globalProvider;
-    const graph = Providers.globalProvider.graph;
+    const provider = this.provider;
+    const graph = this.provider.graph;
     if (provider && provider.state === ProviderState.SignedIn) {
       // tslint:disable-next-line: forin
       for (const id in groupIds) {
@@ -940,7 +940,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   protected async loadState(): Promise<void> {
     let people = this.people;
     const input = this.userInput.toLowerCase();
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     if (people) {
       if (input) {

diff --git a/packages/mgt-components/src/components/mgt-people/mgt-people.ts b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
@@ -418,7 +418,7 @@ export class MgtPeople extends MgtTemplatedComponent {
    */
   protected async loadState() {
     if (!this.people) {
-      const provider = Providers.globalProvider;
+      const provider = this.provider;
 
       if (provider && provider.state === ProviderState.SignedIn) {
         const graph = provider.graph.forComponent(this);

diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -7,7 +7,7 @@
 
 import { customElement, html, internalProperty, property, TemplateResult } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
-import { MgtTemplatedComponent, Providers, ProviderState, TeamsHelper } from '@microsoft/mgt-element';
+import { IProvider, MgtTemplatedComponent, Providers, ProviderState, TeamsHelper } from '@microsoft/mgt-element';
 import { Presence, User, Person } from '@microsoft/microsoft-graph-types';
 
 import { findPeople, getEmailFromGraphEntity } from '../../graph/graph.people';
@@ -49,7 +49,7 @@ interface MgtPersonCardStateHistory {
  * @class MgtPersonCard
  * @extends {MgtTemplatedComponent}
  *
- * @fires expanded - Fired when expanded details section is opened
+ * @fires {CustomEvent<null>} expanded - Fired when expanded details section is opened
  *
  * @cssprop --person-card-display-name-font-size - {Length} Font size of display name title
  * @cssprop --person-card-display-name-color - {Color} Color of display name font
@@ -604,9 +604,9 @@ export class MgtPersonCard extends MgtTemplatedComponent {
    */
   protected renderExpandedDetailsButton(): TemplateResult {
     return html`
-      <div 
-        class="expanded-details-button" 
-        @click=${() => this.showExpandedDetails()} 
+      <div
+        class="expanded-details-button"
+        @click=${() => this.showExpandedDetails()}
         @keydown=${this.handleKeyDown}
         tabindex=0>
           ${getSvg(SvgIcon.ExpandDown)}
@@ -632,7 +632,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
     }
     // load sections when details are expanded
     // when not singed in
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (provider.state === ProviderState.SignedOut) {
       this.loadSections();
     }
@@ -689,9 +689,9 @@ export class MgtPersonCard extends MgtTemplatedComponent {
       'section-nav__icon': true
     });
     return html`
-      <button 
+      <button
         aria-label="overview"
-        tabindex=0 
+        tabindex=0
         class=${overviewClasses}
         @click=${() => this.updateCurrentSection(null)}>
           ${getSvg(SvgIcon.Overview)}
@@ -717,7 +717,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         <div class="section">
           <div class="section__header">
             <div class="section__title" tabindex="0">${section.displayName}</div>
-            <a 
+            <a
               class="section__show-more"
               tabindex=0
               @keydown=${(e: KeyboardEvent) => handleKeyDown(e, section)}
@@ -819,15 +819,16 @@ export class MgtPersonCard extends MgtTemplatedComponent {
         parent = parent.parentElement;
       }
 
-      let parentPerson = (parent as MgtPerson).personDetails || parent['personDetailsInternal'];
+      // tslint:disable-next-line: no-string-literal
+      const parentPerson = (parent as MgtPerson).personDetails || parent['personDetailsInternal'];
 
       if (parent && parentPerson) {
         this.personDetails = parentPerson;
         this.personImage = (parent as MgtPerson).personImage;
       }
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     // check if user is signed in
     if (!provider || provider.state !== ProviderState.SignedIn) {
@@ -1111,7 +1112,7 @@ export class MgtPersonCard extends MgtTemplatedComponent {
   }
 
   private handleKeyDown(e: KeyboardEvent) {
-    //enter activates person-card
+    // enter activates person-card
     if (e) {
       if (e.keyCode === 13) {
         this.showExpandedDetails();

diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -106,9 +106,9 @@ const defaultPersonProperties = [
  * @class MgtPerson
  * @extends {MgtTemplatedComponent}
  *
- * @fires line1clicked - Fired when line1 is clicked
- * @fires line2clicked - Fired when line2 is clicked
- * @fires line3clicked - Fired when line3 is clicked
+ * @fires {CustomEvent<IDynamicPerson>} line1clicked - Fired when line1 is clicked
+ * @fires {CustomEvent<IDynamicPerson>} line2clicked - Fired when line2 is clicked
+ * @fires {CustomEvent<IDynamicPerson>} line3clicked - Fired when line3 is clicked
  *
  * @cssprop --avatar-size - {Length} Avatar size
  * @cssprop --avatar-border - {String} Avatar border
@@ -873,7 +873,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       return html``;
     }
 
-    let person: IDynamicPerson & { presenceActivity?: string; presenceAvailability?: string } = personProps;
+    const person: IDynamicPerson & { presenceActivity?: string; presenceAvailability?: string } = personProps;
     if (presence) {
       person.presenceActivity = presence?.activity;
       person.presenceAvailability = presence?.availability;
@@ -1008,7 +1008,7 @@ export class MgtPerson extends MgtTemplatedComponent {
    * @memberof MgtPerson
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state === ProviderState.Loading) {
       return;
     }
@@ -1239,7 +1239,7 @@ export class MgtPerson extends MgtTemplatedComponent {
   }
 
   private handleKeyDown(e: KeyboardEvent) {
-    //enter activates person-card
+    // enter activates person-card
     if (e) {
       if (e.key === 'Enter') {
         this.showPersonCard();

diff --git a/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.ts b/packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.ts
@@ -133,7 +133,7 @@ export abstract class MgtTasksBase extends MgtTemplatedComponent {
    * trigger the element to update.
    */
   protected render() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state !== ProviderState.SignedIn) {
       return html``;
     }

diff --git a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts
@@ -507,7 +507,7 @@ export class MgtTasks extends MgtTemplatedComponent {
       return;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state !== ProviderState.SignedIn) {
       return;
     }
@@ -690,7 +690,7 @@ export class MgtTasks extends MgtTemplatedComponent {
     this._hiddenTasks = this._hiddenTasks.filter(id => id !== task.id);
   }
 
-  private async assignPeople(task: ITask, people: Array<User | Person | Contact>) {
+  private async assignPeople(task: ITask, people: (User | Person | Contact)[]) {
     const ts = this.getTaskSource();
     if (!ts) {
       return;
@@ -799,7 +799,7 @@ export class MgtTasks extends MgtTemplatedComponent {
   }
 
   private renderPlanOptions() {
-    const p = Providers.globalProvider;
+    const p = this.provider;
 
     if (!p || p.state !== ProviderState.SignedIn) {
       return null;
@@ -1406,7 +1406,7 @@ export class MgtTasks extends MgtTemplatedComponent {
   }
 
   private getTaskSource(): ITaskSource {
-    const p = Providers.globalProvider;
+    const p = this.provider;
     if (!p || p.state !== ProviderState.SignedIn) {
       return null;
     }

diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
@@ -288,7 +288,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
    * @memberof MgtTeamsChannelPicker
    */
   public async selectChannelById(channelId: string): Promise<boolean> {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (provider && provider.state === ProviderState.SignedIn) {
       // since the component normally handles loading on hover, forces the load for items
       if (!this.items) {
@@ -640,7 +640,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
    * @memberof MgtTeamsChannelPicker
    */
   protected async loadState() {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     let teams: MicrosoftGraph.Team[];
     if (provider && provider.state === ProviderState.SignedIn) {
       const graph = provider.graph.forComponent(this);

diff --git a/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts b/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
@@ -379,7 +379,7 @@ export class MgtTodo extends MgtTasksBase {
    * @memberof MgtTasks
    */
   protected async loadState(): Promise<void> {
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
     if (!provider || provider.state !== ProviderState.SignedIn) {
       return;
     }

diff --git a/packages/mgt-element/src/components/baseComponent.ts b/packages/mgt-element/src/components/baseComponent.ts
@@ -6,7 +6,7 @@
  */
 
 import { internalProperty, LitElement, PropertyValues } from 'lit-element';
-import { ProviderState } from '../providers/IProvider';
+import { IProvider, ProviderState } from '../providers/IProvider';
 import { Providers } from '../providers/Providers';
 import { LocalizationHelper } from '../utils/LocalizationHelper';
 
@@ -67,6 +67,30 @@ export abstract class MgtBaseComponent extends LitElement {
     }
   }
 
+  /**
+   * Backing field for the the provider for internal use only
+   *
+   * @protected
+   * @type {IProvider}
+   * @memberof MgtBaseComponent
+   */
+  protected _provider: IProvider;
+
+  /**
+   * Gets and sets the global provider for all components
+   * Will only set the provider if no provider is set
+   *
+   * @type {MgtElement.IProvider}
+   * @memberof MgtPersonCard
+   */
+  public get provider(): IProvider {
+    return this._provider || Providers.globalProvider;
+  }
+
+  public set provider(provider: IProvider) {
+    this._provider = provider;
+  }
+
   /**
    * A flag to check if the component is loading data state.
    *
@@ -231,7 +255,7 @@ export abstract class MgtBaseComponent extends LitElement {
       await this._currentLoadStatePromise;
     }
 
-    const provider = Providers.globalProvider;
+    const provider = this.provider;
 
     if (!provider) {
       return Promise.resolve();

diff --git a/packages/mgt-element/src/components/baseProvider.ts b/packages/mgt-element/src/components/baseProvider.ts
@@ -65,8 +65,6 @@ export abstract class MgtBaseProvider extends MgtBaseComponent {
   })
   public dependsOn: MgtBaseProvider;
 
-  private _provider: IProvider;
-
   /**
    * Invoked when the element is first updated. Implement to perform one time
    * work on the element after update.