Merged PR 16158: Javascript SDK - Apply theme API

apply theme API
jfavlam · Jan 23, 2019 · 6493333 · 6493333
1 parent 2a3a49b
commit 6493333
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 14 deletions.
diff --git a/dist/powerbi-client.d.ts b/dist/powerbi-client.d.ts
@@ -1,4 +1,4 @@
-/*! powerbi-client v2.6.7 | (c) 2016 Microsoft Corporation MIT */
+/*! powerbi-client v2.6.8 | (c) 2016 Microsoft Corporation MIT */
 declare module "util" {
     /**
      * Raises a custom event with event data on the specified HTML element.
@@ -110,6 +110,7 @@ declare module "embed" {
         dashboardId?: string;
         height?: number;
         width?: number;
+        theme?: models.IReportTheme;
     }
     export interface IVisualEmbedConfiguration extends IEmbedConfiguration {
         visualName: string;
@@ -933,6 +934,23 @@ declare module "report" {
         * ```
         */
         refresh(): Promise<void>;
+        /**
+        * Apply a theme to the report
+        *
+        * ```javascript
+        * report.applyTheme(theme);
+        * ```
+        */
+        applyTheme(theme: models.IReportTheme): Promise<void>;
+        /**
+        * Reset and apply the default theme of the report
+        *
+        * ```javascript
+        * report.resetTheme();
+        * ```
+        */
+        resetTheme(): Promise<void>;
+        private applyThemeInternal(theme);
         private viewModeToString(viewMode);
     }
 }

diff --git a/dist/powerbi.js b/dist/powerbi.js
diff --git a/dist/powerbi.min.js b/dist/powerbi.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-client",
-  "version": "2.6.7",
+  "version": "2.6.8",
   "description": "JavaScript library for embedding Power BI into your apps. Provides service which makes it easy to embed different types of components and an object model which allows easy interaction with these components such as changing pages, applying filters, and responding to data selection.",
   "main": "dist/powerbi.js",
   "typings": "dist/powerbi-client.d.ts",

diff --git a/src/config.ts b/src/config.ts
@@ -1,5 +1,5 @@
 const config = {
-  version: '2.6.7',
+  version: '2.6.8',
   type: 'js'
 };
 

diff --git a/src/create.ts b/src/create.ts
@@ -48,11 +48,12 @@ export class Create extends embed.Embed {
       const config = <embed.IEmbedConfiguration>this.config;
 
       this.createConfig = {
-          datasetId: config.datasetId || this.getId(),
           accessToken: config.accessToken,
-          tokenType: config.tokenType,
+          datasetId: config.datasetId || this.getId(),
+          groupId:  config.groupId,
           settings: settings,
-          groupId:  config.groupId
+          tokenType: config.tokenType,
+          theme: config.theme
       }
   }
 

diff --git a/src/embed.ts b/src/embed.ts
@@ -58,6 +58,7 @@ export interface IEmbedConfiguration extends IEmbedConfigurationBase {
   dashboardId?: string;
   height?: number;
   width?: number;
+  theme?: models.IReportTheme;
 }
 
 export interface IVisualEmbedConfiguration extends IEmbedConfiguration {

diff --git a/src/report.ts b/src/report.ts
@@ -365,6 +365,38 @@ export class Report extends embed.Embed implements IReportNode, IFilterable {
     });
   }
 
+  /**
+  * Apply a theme to the report
+  *
+  * ```javascript
+  * report.applyTheme(theme);
+  * ```
+  */
+  applyTheme(theme: models.IReportTheme): Promise<void> {
+    return this.applyThemeInternal(theme);
+  }
+
+  /**
+  * Reset and apply the default theme of the report
+  *
+  * ```javascript
+  * report.resetTheme();
+  * ```
+  */
+  resetTheme(): Promise<void> {
+    return this.applyThemeInternal(<models.IReportTheme>{});
+  }
+
+  private applyThemeInternal(theme: models.IReportTheme): Promise<void> {
+    return this.service.hpm.put<models.IError[]>('/report/theme', theme, { uid: this.config.uniqueId }, this.iframe.contentWindow)
+      .then(response => {
+        return response.body;
+      })
+      .catch(response => {
+        throw response.body;
+    });
+  }
+
   private viewModeToString(viewMode: models.ViewMode): string {
     let mode: string;
     switch (viewMode) {

diff --git a/test/test.spec.ts b/test/test.spec.ts
@@ -639,6 +639,40 @@ describe('service', function () {
         // Assert
         expect(report.createConfig.datasetId).toEqual(testDatasetId);
       });
+
+      it('theme should be in create config if exists is embedConfig', function () {
+        // Arrange
+
+        const testDatasetId = "ABC123";
+        const accessToken = 'ABC123';
+        const theme = {themeJson: {name: "Theme ABC 123"}};
+        const embedUrl = `https://app.powerbi.com/reportEmbed?datasetId=${testDatasetId}`;
+        const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}"</div>`)
+          .appendTo('#powerbi-fixture');
+
+        // Act
+        const report = powerbi.createReport($reportContainer[0], { embedUrl: embedUrl, accessToken: accessToken, theme: theme });
+
+        // Assert
+        expect(report.createConfig.theme).toEqual(theme);
+      });
+
+      it('theme should be undefined in create config if not exists is embedConfig', function () {
+        // Arrange
+
+        const testDatasetId = "ABC123";
+        const accessToken = 'ABC123';
+        const theme = {themeJson: {name: "Theme ABC 123"}};
+        const embedUrl = `https://app.powerbi.com/reportEmbed?datasetId=${testDatasetId}`;
+        const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}"</div>`)
+          .appendTo('#powerbi-fixture');
+
+        // Act
+        const report = powerbi.createReport($reportContainer[0], { embedUrl: embedUrl, accessToken: accessToken });
+
+        // Assert
+        expect(report.createConfig.theme).toBeUndefined();
+      });
     });
 
     describe('reports', function () {
@@ -725,6 +759,40 @@ describe('service', function () {
         // Assert
         expect((<embed.IEmbedConfiguration>report.config).id).toEqual(testReportId);
       });
+
+      it('theme should be in report config if exists is embedConfig', function () {
+        // Arrange
+        const testReportId = "ABC123";
+        const embedUrl = `https://app.powerbi.com/reportEmbed?reportId=${testReportId}`;
+        const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}" powerbi-type="report" powerbi-report-id></div>`)
+          .appendTo('#powerbi-fixture');
+
+        const theme = {themeJson: {name: "Theme ABC 123"}};
+        const configuration: embed.IEmbedConfiguration = { theme: theme };
+
+        // Act
+        const report = powerbi.embed($reportContainer[0], configuration);
+
+        // Assert
+        expect((<embed.IEmbedConfiguration>report.config).theme).toEqual(theme);
+      });
+
+      it('theme should be  undefined in report config if not exists is embedConfig', function () {
+        // Arrange
+        const testReportId = "ABC123";
+        const embedUrl = `https://app.powerbi.com/reportEmbed?reportId=${testReportId}`;
+        const $reportContainer = $(`<div powerbi-embed-url="${embedUrl}" powerbi-type="report" powerbi-report-id></div>`)
+          .appendTo('#powerbi-fixture');
+
+        const theme = {themeJson: {name: "Theme ABC 123"}};
+        const configuration: embed.IEmbedConfiguration = {};
+
+        // Act
+        const report = powerbi.embed($reportContainer[0], configuration);
+
+        // Assert
+        expect((<embed.IEmbedConfiguration>report.config).theme).toBeUndefined();
+      });
     });
 
     xdescribe('tiles', function () {
@@ -3795,6 +3863,53 @@ describe('SDK-to-HPM', function () {
           });
       });
     });
+
+    describe('theme', function () {
+      it('report.applyTheme(theme) sends PUT /report/theme with theme in body', function () {
+        // Arrange
+        const testData = {
+          theme: {
+            themeJson: {
+              name: "Theme ABC 123"
+            }
+          },
+          response: {
+            body: null
+          }
+        };
+
+        spyHpm.post.and.returnValue(Promise.resolve(testData.response));
+        report.applyTheme(testData.theme)
+          .then(() => {
+            spyHpm.post.calls.reset();
+
+            // Act
+            report.reload();
+
+            // Assert
+            expect(spyHpm.post).toHaveBeenCalledWith('/report/load', jasmine.objectContaining(testData.theme), { uid: uniqueId, sdkSessionId: sdkSessionId }, iframe.contentWindow);
+          });
+      });
+
+      it('report.resetTheme() sends PUT /report/theme with empty object as theme in body', function () {
+        // Arrange
+        const response =  {
+          body: null
+        };
+
+        spyHpm.post.and.returnValue(Promise.resolve(response));
+        report.resetTheme()
+          .then(() => {
+            spyHpm.post.calls.reset();
+
+            // Act
+            report.reload();
+
+            // Assert
+            expect(spyHpm.post).toHaveBeenCalledWith('/report/load', jasmine.objectContaining({}), { uid: uniqueId, sdkSessionId: sdkSessionId }, iframe.contentWindow);
+          });
+      });
+    });
   });
 
   describe('SDK-to-Router (Event subscription)', function () {