Merge pull request #240 from microsoftgraph/shweaver/component-header

Add component header to graph calls

Author: shweaver-MSFT

src/Graph.ts

@@ -9,13 +9,15 @@ import {
   AuthenticationHandler,
   Client,
   HTTPMessageHandler,
+  Middleware,
   ResponseType,
   RetryHandler,
   RetryHandlerOptions,
   TelemetryHandler
 } from '@microsoft/microsoft-graph-client';
 import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
 import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
+import { MgtBaseComponent } from './components/baseComponent';
 import { IProvider } from './providers/IProvider';
 import { Batch } from './utils/Batch';
 import { prepScopes } from './utils/GraphHelpers';
@@ -36,25 +38,38 @@ export class Graph {
    */
   public client: Client;
 
-  constructor(provider: IProvider) {
+  private _provider: IProvider;
+
+  constructor(provider: IProvider, component?: MgtBaseComponent) {
     if (provider) {
-      const authenticationHandler = new AuthenticationHandler(provider);
-      const retryHandler = new RetryHandler(new RetryHandlerOptions());
-      const telemetryHandler = new TelemetryHandler();
-      const sdkVersionMiddleware = new SdkVersionMiddleware();
-      const httpMessageHandler = new HTTPMessageHandler();
+      this._provider = provider;
 
-      authenticationHandler.setNext(retryHandler);
-      retryHandler.setNext(telemetryHandler);
-      telemetryHandler.setNext(sdkVersionMiddleware);
-      sdkVersionMiddleware.setNext(httpMessageHandler);
+      const middleware: Middleware[] = [
+        new AuthenticationHandler(provider),
+        new RetryHandler(new RetryHandlerOptions()),
+        new TelemetryHandler(),
+        new SdkVersionMiddleware(component),
+        new HTTPMessageHandler()
+      ];
 
       this.client = Client.initWithMiddleware({
-        middleware: authenticationHandler
+        middleware: this.chainMiddleware(...middleware)
       });
     }
   }
 
+  /**
+   * Returns a new instance of the Graph using the same
+   * provider and the provided component.
+   *
+   * @param {MgtBaseComponent} component
+   * @returns
+   * @memberof Graph
+   */
+  public forComponent(component: MgtBaseComponent): Graph {
+    return new Graph(this._provider, component);
+  }
+
   /**
    * creates batch request
    *
@@ -608,6 +623,19 @@ export class Graph {
       .delete();
   }
 
+  private chainMiddleware(...middleware: Middleware[]): Middleware {
+    const rootMiddleware = middleware[0];
+    let current = rootMiddleware;
+    for (let i = 1; i < middleware.length; ++i) {
+      const next = middleware[i];
+      if (current.setNext) {
+        current.setNext(next);
+      }
+      current = next;
+    }
+    return rootMiddleware;
+  }
+
   private blobToBase64(blob: Blob): Promise<string> {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();

src/components/mgt-agenda/mgt-agenda.ts

@@ -219,7 +219,8 @@ export class MgtAgenda extends MgtTemplatedComponent {
             query = this.eventQuery;
           }
 
-          let request = await p.graph.client.api(query);
+          const graph = p.graph.forComponent(this);
+          let request = await graph.client.api(query);
 
           if (scope) {
             request = request.middlewareOptions(prepScopes(scope));

src/components/mgt-get/mgt-get.ts

@@ -152,7 +152,8 @@ export class MgtGet extends MgtTemplatedComponent {
 
       let response = null;
       try {
-        let request = provider.graph.client.api(this.resource).version(this.version);
+        const graph = provider.graph.forComponent(this);
+        let request = graph.client.api(this.resource).version(this.version);
 
         if (this.scopes && this.scopes.length) {
           request = request.middlewareOptions(prepScopes(...this.scopes));
@@ -166,7 +167,7 @@ export class MgtGet extends MgtTemplatedComponent {
           while ((pageCount < this.maxPages || this.maxPages <= 0) && page && page['@odata.nextLink']) {
             pageCount++;
             const nextResource = page['@odata.nextLink'].split(this.version)[1];
-            page = await provider.graph.client
+            page = await graph.client
               .api(nextResource)
               .version(this.version)
               .get();

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

@@ -264,7 +264,8 @@ export class MgtLogin extends MgtBaseComponent {
     if (provider) {
       this._loading = true;
       if (provider.state === ProviderState.SignedIn) {
-        const batch = provider.graph.createBatch();
+        const graph = provider.graph.forComponent(this);
+        const batch = graph.createBatch();
         batch.get('me', 'me', ['user.read']);
         batch.get('photo', 'me/photo/$value', ['user.read']);
         const response = await batch.execute();

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

@@ -210,8 +210,8 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
   private async findGroup() {
     const provider = Providers.globalProvider;
     if (provider && provider.state === ProviderState.SignedIn) {
-      const client = Providers.globalProvider.graph;
-      this.groupPeople = await client.getPeopleFromGroup(this.groupId);
+      const graph = provider.graph.forComponent(this);
+      this.groupPeople = await graph.getPeopleFromGroup(this.groupId);
     }
   }
 
@@ -328,13 +328,13 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
           this.showLoading = this.isLoading;
         }, 400);
 
-        const client = Providers.globalProvider.graph;
+        const graph = provider.graph.forComponent(this);
 
         // filtering groups
         if (this.groupId) {
           people = this.groupPeople;
         } else {
-          people = await client.findPerson(name);
+          people = await graph.findPerson(name);
         }
 
         if (people) {

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

@@ -159,18 +159,18 @@ export class MgtPeople extends MgtTemplatedComponent {
       const provider = Providers.globalProvider;
 
       if (provider && provider.state === ProviderState.SignedIn) {
-        const client = Providers.globalProvider.graph;
+        const graph = provider.graph.forComponent(this);
 
         if (this.groupId) {
-          this.people = await client.getPeopleFromGroup(this.groupId);
+          this.people = await graph.getPeopleFromGroup(this.groupId);
         } else if (this.userIds) {
           this.people = await Promise.all(
             this.userIds.map(async userId => {
-              return await client.getUser(userId);
+              return await graph.getUser(userId);
             })
           );
         } else {
-          this.people = await client.getPeople();
+          this.people = await graph.getPeople();
         }
       }
     }

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

@@ -257,7 +257,8 @@ export class MgtPerson extends MgtTemplatedComponent {
     }
 
     if (this.userId || (this.personQuery && this.personQuery === 'me')) {
-      const batch = provider.graph.createBatch();
+      const graph = provider.graph.forComponent(this);
+      const batch = graph.createBatch();
 
       if (this.userId) {
         batch.get('user', `/users/${this.userId}`, ['user.readbasic.all']);
@@ -273,7 +274,8 @@ export class MgtPerson extends MgtTemplatedComponent {
       this.personImage = response.photo;
       (this.personDetails as any).personImage = response.photo;
     } else if (!this.personDetails && this.personQuery) {
-      const people = await provider.graph.findPerson(this.personQuery);
+      const graph = provider.graph.forComponent(this);
+      const people = await graph.findPerson(this.personQuery);
       if (people && people.length > 0) {
         const person = people[0] as MicrosoftGraph.Person;
         this.personDetails = person;
@@ -285,27 +287,26 @@ export class MgtPerson extends MgtTemplatedComponent {
 
   private async loadImage() {
     const provider = Providers.globalProvider;
+    const graph = provider.graph.forComponent(this);
 
     const person = this.personDetails;
     let image: string;
 
     if ((person as MicrosoftGraph.Person).userPrincipalName) {
       const userPrincipalName = (person as MicrosoftGraph.Person).userPrincipalName;
-      image = await provider.graph.getUserPhoto(userPrincipalName);
+      image = await graph.getUserPhoto(userPrincipalName);
     } else {
       const email = getEmailFromGraphEntity(person);
       if (email) {
         // try to find a user by e-mail
-        const users = await provider.graph.findUserByEmail(email);
+        const users = await graph.findUserByEmail(email);
 
         if (users && users.length) {
           if ((users[0] as any).personType && (users[0] as any).personType.subclass === 'OrganizationUser') {
-            image = await provider.graph.getUserPhoto(
-              (users[0] as MicrosoftGraph.Person).scoredEmailAddresses[0].address
-            );
+            image = await graph.getUserPhoto((users[0] as MicrosoftGraph.Person).scoredEmailAddresses[0].address);
           } else {
             const contactId = users[0].id;
-            image = await provider.graph.getContactPhoto(contactId);
+            image = await graph.getContactPhoto(contactId);
           }
         }
       }

src/components/mgt-tasks/mgt-tasks.ts

@@ -384,7 +384,8 @@ export class MgtTasks extends MgtTemplatedComponent {
     this._inTaskLoad = true;
     let meTask;
     if (!this._me) {
-      meTask = provider.graph.getMe();
+      const graph = provider.graph.forComponent(this);
+      meTask = graph.getMe();
     }
 
     if (this.groupId && this.dataSource === TasksSource.planner) {
@@ -1199,10 +1200,11 @@ export class MgtTasks extends MgtTemplatedComponent {
       return null;
     }
 
+    const graph = p.graph.forComponent(this);
     if (this.dataSource === TasksSource.planner) {
-      return new PlannerTaskSource(p.graph);
+      return new PlannerTaskSource(graph);
     } else if (this.dataSource === TasksSource.todo) {
-      return new TodoTaskSource(p.graph);
+      return new TodoTaskSource(graph);
     } else {
       return null;
     }

src/utils/SdkVersionMiddleware.ts

@@ -7,6 +7,7 @@
 
 import { Context, Middleware } from '@microsoft/microsoft-graph-client';
 import { getRequestHeader, setRequestHeader } from '@microsoft/microsoft-graph-client/lib/es/middleware/MiddlewareUtil';
+import { MgtBaseComponent } from '../components/baseComponent';
 import { PACKAGE_VERSION } from './version';
 
 /**
@@ -21,17 +22,38 @@ export class SdkVersionMiddleware implements Middleware {
    * @private
    * A member to hold next middleware in the middleware chain
    */
-  private nextMiddleware: Middleware;
+  private _nextMiddleware: Middleware;
+  private _component?: MgtBaseComponent;
+
+  constructor(component?: MgtBaseComponent) {
+    this._component = component;
+  }
 
   // tslint:disable-next-line: completed-docs
   public async execute(context: Context): Promise<void> {
     try {
-      let sdkVersionValue: string = `mgt/${PACKAGE_VERSION}`;
+      // Header parts must follow the format: 'name/version'
+      const headerParts: string[] = [];
+
+      // Component version
+      if (this._component) {
+        const componentTagName = this._component.tagName.toLowerCase();
+        const componentVersion: string = `${componentTagName}/${PACKAGE_VERSION}`;
+        headerParts.push(componentVersion);
+      }
+
+      // Package version
+      const packageVersion: string = `mgt/${PACKAGE_VERSION}`;
+      headerParts.push(packageVersion);
+
+      // Existing SdkVersion header value
+      headerParts.push(getRequestHeader(context.request, context.options, 'SdkVersion'));
 
-      sdkVersionValue += ', ' + getRequestHeader(context.request, context.options, 'SdkVersion');
+      // Join the header parts together and update the SdkVersion request header value
+      const sdkVersionHeaderValue = headerParts.join(', ');
+      setRequestHeader(context.request, context.options, 'SdkVersion', sdkVersionHeaderValue);
 
-      setRequestHeader(context.request, context.options, 'SdkVersion', sdkVersionValue);
-      return await this.nextMiddleware.execute(context);
+      return await this._nextMiddleware.execute(context);
     } catch (error) {
       throw error;
     }
@@ -43,6 +65,6 @@ export class SdkVersionMiddleware implements Middleware {
    * @memberof SdkVersionMiddleware
    */
   public setNext(next: Middleware): void {
-    this.nextMiddleware = next;
+    this._nextMiddleware = next;
   }
 }