├── React
    ├── demo
    │   ├── src
    │   │   ├── public
    │   │   │   └── favicon.ico
    │   │   ├── assets
    │   │   │   ├── GitHub_Icon.png
    │   │   │   └── PowerBI_Icon.png
    │   │   ├── constants
    │   │   │   └── constants.ts
    │   │   ├── index.tsx
    │   │   ├── index.html
    │   │   ├── components
    │   │   │   ├── event-details-dialog
    │   │   │   │   ├── EventDetailsDialogComponent.css
    │   │   │   │   └── EventDetailsDialogComponent.tsx
    │   │   │   └── embed-config-dialog
    │   │   │   │   ├── EmbedConfigDialogComponent.css
    │   │   │   │   └── EmbedConfigDialogComponent.tsx
    │   │   ├── DemoApp.css
    │   │   └── DemoApp.tsx
    │   ├── tsconfig.json
    │   ├── webpack.config.js
    │   └── package.json
    ├── powerbi-client-react
    │   ├── src
    │   │   ├── powerbi-client-react.ts
    │   │   ├── utils.ts
    │   │   └── PowerBIEmbed.tsx
    │   ├── test
    │   │   ├── mockService.ts
    │   │   ├── utils.spec.ts
    │   │   └── PowerBIEmbed.spec.tsx
    │   ├── config
    │   │   ├── test
    │   │   │   ├── tsconfig.json
    │   │   │   ├── webpack.config.js
    │   │   │   └── karma.conf.js
    │   │   └── src
    │   │   │   ├── tsconfig.json
    │   │   │   └── webpack.config.js
    │   ├── .eslintrc.js
    │   └── package.json
    └── .editorconfig
├── resources
    └── react_wrapper_flow_diagram.png
├── .gitignore
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE.txt
├── LICENSE
├── SECURITY.md
└── README.md


/React/demo/src/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/powerbi-client-react/HEAD/React/demo/src/public/favicon.ico


--------------------------------------------------------------------------------
/React/demo/src/assets/GitHub_Icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/powerbi-client-react/HEAD/React/demo/src/assets/GitHub_Icon.png


--------------------------------------------------------------------------------
/React/demo/src/assets/PowerBI_Icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/powerbi-client-react/HEAD/React/demo/src/assets/PowerBI_Icon.png


--------------------------------------------------------------------------------
/resources/react_wrapper_flow_diagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/microsoft/powerbi-client-react/HEAD/resources/react_wrapper_flow_diagram.png


--------------------------------------------------------------------------------
/React/powerbi-client-react/src/powerbi-client-react.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 | 
4 | export {
5 | 	PowerBIEmbed,
6 | 	EmbedProps,
7 | 	EmbedType,
8 | 	EventHandler
9 | } from './PowerBIEmbed'


--------------------------------------------------------------------------------
/React/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/React/powerbi-client-react/test/mockService.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) Microsoft Corporation.
2 | // Licensed under the MIT License.
3 | 
4 | const mockedMethods = ['init', 'embed', 'bootstrap', 'load', 'get', 'reset', 'preload', 'setSdkInfo'];
5 | 
6 | const mockPowerBIService = jasmine.createSpyObj('mockService', mockedMethods);
7 | 
8 | export { mockPowerBIService, mockedMethods };


--------------------------------------------------------------------------------
/React/demo/src/constants/constants.ts:
--------------------------------------------------------------------------------
 1 | /* Copyright (c) Microsoft Corporation.
 2 | Licensed under the MIT License. */
 3 | 
 4 | export const sampleTheme = {
 5 |     name: 'Sample Theme',
 6 |     dataColors: ['#990011', '#cc1144', '#ee7799', '#eebbcc', '#cc4477', '#cc5555', '#882222', '#a30e33'],
 7 |     background: '#ffffff',
 8 |     foreground: '#007799',
 9 |     tableAccent: '#990011',
10 | };


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | **/node_modules
 3 | /.pnp
 4 | .pnp.js
 5 | **/package-lock.json
 6 | 
 7 | # testing
 8 | coverage
 9 | compiledTests
10 | 
11 | # production
12 | dist
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | .vscode
26 | 
27 | *.tgz
28 | 


--------------------------------------------------------------------------------
/React/demo/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"include": [
 3 | 		"./**/*.tsx",
 4 | 		"./**/*.ts"
 5 | 	],
 6 | 	"compilerOptions": {
 7 | 		"target": "es6",
 8 | 		"esModuleInterop": true,
 9 | 		"allowSyntheticDefaultImports": true,
10 | 		"strict": true,
11 | 		"noErrorTruncation": true,
12 | 		"forceConsistentCasingInFileNames": true,
13 | 		"module": "ES6",
14 | 		"moduleResolution": "node",
15 | 		"resolveJsonModule": true,
16 | 		"jsx": "react",
17 | 	  }
18 | }


--------------------------------------------------------------------------------
/React/demo/src/index.tsx:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | import 'react-app-polyfill/ie11';	// For IE compatibility
 5 | import 'react-app-polyfill/stable';	// For IE compatibility
 6 | import React from 'react';
 7 | import { createRoot } from 'react-dom/client';
 8 | import DemoApp from './DemoApp';
 9 | 
10 | const container = document.getElementById('root');
11 | const root = createRoot(container!);
12 | root.render(<DemoApp />);


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Microsoft Open Source Code of Conduct
 2 | 
 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
 4 | 
 5 | Resources:
 6 | 
 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
10 | 


--------------------------------------------------------------------------------
/React/demo/src/index.html:
--------------------------------------------------------------------------------
 1 | <!-- Copyright (c) Microsoft Corporation.
 2 | 	 Licensed under the MIT License. -->
 3 | 
 4 | <!DOCTYPE html>
 5 | <html lang="en">
 6 | 	<head>
 7 | 		<meta charset="UTF-8" />
 8 | 		<link rel="icon" href="./public/favicon.ico" />
 9 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 | 		<title>React Wrapper demo</title>
11 | 	</head>
12 | 	<body>
13 | 		<div id="root"></div>
14 | 		<script src="./bundle.js"></script>
15 | 	</body>
16 | </html>


--------------------------------------------------------------------------------
/React/powerbi-client-react/config/test/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "include": [
 3 | 		"../../test/**/*.tsx",
 4 | 		"../../test/**/*.ts"
 5 | 	],
 6 | 	"compilerOptions": {
 7 | 		"target": "ES5",
 8 | 		"lib": [
 9 | 			"ES2016",
10 | 		  	"dom"
11 | 		],
12 | 		"types": ["jasmine"],
13 | 		"esModuleInterop": true,
14 | 		"allowSyntheticDefaultImports": true,
15 | 		"strict": false,
16 | 		"module": "esnext",
17 | 		"moduleResolution": "node",
18 | 		"resolveJsonModule": true,
19 | 		"jsx": "react"
20 | 	}
21 | }


--------------------------------------------------------------------------------
/React/powerbi-client-react/config/src/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "include": [
 3 | 		"../../src/**/*.tsx",
 4 | 		"../../src/**/*.ts"
 5 | 	],
 6 | 	"compilerOptions": {
 7 | 		"lib": ["ES2016"],
 8 | 		"target": "es5",
 9 | 		"esModuleInterop": false,
10 | 		"allowSyntheticDefaultImports": true,
11 | 		"strict": true,
12 | 		"noErrorTruncation": true,
13 | 		"module": "ES6",
14 | 		"moduleResolution": "node",
15 | 		"jsx": "react",
16 | 		"sourceMap": true,
17 | 		"noImplicitAny": true,
18 | 		"declaration": true,
19 | 		"outDir": "../../dist",
20 | 	}
21 | }


--------------------------------------------------------------------------------
/React/demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | const path = require('path');
 5 | 
 6 | module.exports = {
 7 | 	mode: 'development',
 8 | 	entry: path.resolve('src/index.tsx'),
 9 | 	output: {
10 | 		path: __dirname,
11 | 		filename: 'bundle.js'
12 | 	},
13 | 	module: {
14 | 		rules: [
15 | 			{
16 | 				test: /\.ts(x)?$/,
17 | 				loader: 'ts-loader'
18 | 			},
19 | 			{
20 | 				test: /\.css$/,
21 | 				use: [
22 | 					'style-loader',
23 | 					'css-loader'
24 | 				]
25 | 			},
26 | 		]
27 | 	},
28 | 	resolve: {
29 | 		extensions: [
30 | 			'.tsx',
31 | 			'.ts',
32 | 			'.js',
33 | 		]
34 | 	},
35 | 	devtool: 'source-map',
36 | };


--------------------------------------------------------------------------------
/React/powerbi-client-react/config/test/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | const path = require('path');
 5 | 
 6 | module.exports = {
 7 | 	mode: 'development',
 8 | 	entry: {
 9 | 		PowerBIEmbedTest: path.resolve('test/PowerBIEmbed.spec.tsx'),
10 | 		utilsTest: path.resolve('test/utils.spec.ts'),
11 | 	},
12 | 	output: {
13 | 		path: path.resolve('compiledTests'),
14 | 		filename: '[name].spec.js'
15 | 	},
16 | 	devtool: 'source-map',
17 | 	module: {
18 | 		rules: [
19 | 			{
20 | 				test: /\.ts(x)?$/,
21 | 				loader: 'ts-loader',
22 | 				options: {
23 | 					configFile: path.resolve('config/test/tsconfig.json')
24 | 				},
25 | 				exclude: /node_modules/
26 | 			},
27 | 		]
28 | 	},
29 | 	resolve: {
30 | 		extensions: [
31 | 			'.tsx',
32 | 			'.ts',
33 | 			'.js'
34 | 		]
35 | 	},
36 | };


--------------------------------------------------------------------------------
/React/powerbi-client-react/config/src/webpack.config.js:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | const path = require('path');
 5 | 
 6 | module.exports = {
 7 | 	entry: path.resolve('src/PowerBIEmbed.tsx'),
 8 | 	output: {
 9 | 		library: 'powerbi-client-react',
10 | 		libraryTarget: 'umd',
11 | 		path: path.resolve('dist'),
12 | 		filename: 'powerbi-client-react.js'
13 | 	},
14 | 	externals: [
15 | 		'react',
16 | 		'powerbi-client',
17 | 		'lodash.isequal'
18 | 	],
19 | 	module: {
20 | 		rules: [
21 | 			{
22 | 				test: /\.ts(x)?$/,
23 | 				loader: 'ts-loader',
24 | 				options: {
25 | 					configFile: path.resolve('config/src/tsconfig.json')
26 | 				},
27 | 				exclude: /node_modules/
28 | 			},
29 | 		]
30 | 	},
31 | 	resolve: {
32 | 		modules: ['node_modules'],
33 | 		extensions: [
34 | 			'.tsx',
35 | 			'.ts',
36 | 			'.js'
37 | 		]
38 | 	},
39 | 	devtool: 'source-map',
40 | };


--------------------------------------------------------------------------------
/React/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "powerbi-client-react-demo",
 3 | 	"version": "1.1.0",
 4 | 	"description": "Demo for usage of powerbi-client-react",
 5 | 	"scripts": {
 6 | 		"demo": "webpack-dev-server --static ./src/ --open"
 7 | 	},
 8 | 	"license": "MIT",
 9 | 	"dependencies": {
10 | 		"@fluentui/web-components": "^2.6.1",
11 | 		"@microsoft/fast-react-wrapper": "^0.3.24",
12 | 		"powerbi-client-react": "^2.0.0",
13 | 		"powerbi-report-authoring": "^2.0.0",
14 | 		"react-app-polyfill": "^3.0.0"
15 | 	},
16 | 	"peerDependencies": {
17 | 		"react": ">= 18"
18 | 	},
19 | 	"devDependencies": {
20 | 		"@types/react": "^18.3.10",
21 | 		"@types/react-dom": "^18.3.0",
22 | 		"css-loader": "^3.5.3",
23 | 		"react": "^18.3.1",
24 | 		"react-dom": "^18.3.1",
25 | 		"style-loader": "^1.2.1",
26 | 		"ts-loader": "^9.4.2",
27 | 		"typescript": "^4.9.5",
28 | 		"webpack": "^5.71.0",
29 | 		"webpack-cli": "^4.9.2",
30 | 		"webpack-dev-server": "^4.11.1"
31 | 	}
32 | }
33 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | ## Setup
 4 | 
 5 | Clone the repository:
 6 | ```
 7 | git clone <url>
 8 | ```
 9 | 
10 | Navigate to the cloned directory
11 | 
12 | Navigate to the React\powerbi-client-react workspace folder:
13 | ```
14 | cd React\powerbi-client-react
15 | ```
16 | 
17 | Install local dependencies:
18 | ```
19 | npm install
20 | ```
21 | 
22 | ## Build:
23 | ```
24 | npm run build
25 | ```
26 | Or if using VScode: `Ctrl + Shift + B`
27 | 
28 | ## Test
29 | ```
30 | npm test
31 | ```
32 | By default the tests run using ChromeHeadless browser
33 | 
34 | The build and tests use webpack to compile all the source modules into bundled module that can be executed in the browser.
35 | 
36 | ## Running the demo
37 | 
38 | ```
39 | npm run demo
40 | ```
41 | 
42 | Open the address to view in the browser:
43 | 
44 | http://localhost:8080/
45 | 
46 | ## Flow Diagram for the PowerBIEmbed Component:
47 | ![Flow Diagram](/resources/react_wrapper_flow_diagram.png)
48 | 


--------------------------------------------------------------------------------
/React/demo/src/components/event-details-dialog/EventDetailsDialogComponent.css:
--------------------------------------------------------------------------------
 1 | /* Copyright (c) Microsoft Corporation.
 2 | Licensed under the MIT License. */
 3 | 
 4 | h1 {
 5 |     margin: 5px 0;
 6 | }
 7 | 
 8 | pre {
 9 |     height: 348px;
10 |     margin: 3.5px;
11 | }
12 | 
13 | .close-icon-button {
14 |     align-self: center;
15 |     margin-bottom: 0;
16 |     min-width: unset;
17 | }
18 | 
19 | .dialog-header-event-details {
20 |     display: flex;
21 |     justify-content: space-between;
22 |     text-align: start;
23 | }
24 | 
25 | .dialog-main-event-details {
26 |     align-items: flex-start;
27 |     border: 1px solid #e8e8e8;
28 |     display: flex;
29 |     flex-direction: column;
30 |     max-height: 400px;
31 |     overflow-y: auto;
32 | }
33 | 
34 | fluent-button.event-details-close-button {
35 |     float: right;
36 | }
37 | 
38 | fluent-button.event-details-close-button::part(control) {
39 |     border: 1px solid #e8e8e8;
40 |     margin-top: 8px;
41 |     height: 32px;
42 |     width: 80px;
43 | }
44 | 
45 | fluent-dialog::part(control) {
46 |     min-width: 300px;
47 | }


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | powerbi-client-react
 2 | 
 3 | Copyright (c) Microsoft Corporation.
 4 | 
 5 | MIT License
 6 | 
 7 | Permission is hereby granted, free of charge, to any person obtaining a copy
 8 | of this software and associated documentation files (the "Software"), to deal
 9 | in the Software without restriction, including without limitation the rights
10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 | copies of the Software, and to permit persons to whom the Software is
12 | furnished to do so, subject to the following conditions:
13 | 
14 | The above copyright notice and this permission notice shall be included in all
15 | copies or substantial portions of the Software.
16 | 
17 | THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23 | SOFTWARE.
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 |     MIT License
 2 | 
 3 |     Copyright (c) Microsoft Corporation.
 4 | 
 5 |     Permission is hereby granted, free of charge, to any person obtaining a copy
 6 |     of this software and associated documentation files (the "Software"), to deal
 7 |     in the Software without restriction, including without limitation the rights
 8 |     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 |     copies of the Software, and to permit persons to whom the Software is
10 |     furnished to do so, subject to the following conditions:
11 | 
12 |     The above copyright notice and this permission notice shall be included in all
13 |     copies or substantial portions of the Software.
14 | 
15 |     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 |     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 |     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 |     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 |     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 |     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 |     SOFTWARE
22 | 


--------------------------------------------------------------------------------
/React/powerbi-client-react/src/utils.ts:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | import { EmbedProps } from "./PowerBIEmbed";
 5 | 
 6 | /**
 7 |  * Get JSON string representation of the given map.
 8 |  *
 9 |  * @param map Map of event and corresponding handler method
10 |  *
11 |  * For example:
12 |  * Input:
13 |  * ```
14 |  *  Map([
15 | 		['loaded', null],
16 | 		['rendered', function () { console.log('Rendered'); }]
17 | 	]);
18 |  * ```
19 |  * Output:
20 |  * ```
21 |  * `[["loaded",""],["rendered","function () { console.log('Rendered'); }"]]`
22 |  * ```
23 |  */
24 | export function stringifyMap(map: EmbedProps['eventHandlers']): string {
25 | 
26 | 	// Return empty string for empty/null map
27 | 	if (!map) {
28 | 		return '';
29 | 	}
30 | 
31 | 	// Get entries of map as array
32 | 	const mapEntries = Array.from(map);
33 | 
34 | 	// Return JSON string
35 | 	return JSON.stringify(mapEntries.map((mapEntry) => {
36 | 
37 | 		// Convert event handler method to a string containing its source code for comparison
38 | 		return [
39 | 			mapEntry[0],
40 | 			mapEntry[1] ? mapEntry[1].toString() : ''
41 | 		];
42 | 	}));
43 | };
44 | 
45 | // SDK information to be used with service instance
46 | export const SdkType = "powerbi-client-react";
47 | export const SdkWrapperVersion = "2.0.0";


--------------------------------------------------------------------------------
/React/powerbi-client-react/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | module.exports = {
 5 | 	parser: "@typescript-eslint/parser", // Specifies the ESLint parser
 6 | 	extends: [
 7 | 		"eslint:recommended",
 8 | 		"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
 9 | 		"plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
10 | 	],
11 | 	parserOptions: {
12 | 		ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
13 | 		sourceType: "module", // Allows for the use of imports
14 | 		ecmaFeatures: {
15 | 			jsx: true // Allows for the parsing of JSX
16 | 		},
17 | 	},
18 | 	rules: {
19 | 		"prefer-const": "warn",
20 | 		"no-var": "error",
21 | 		'@typescript-eslint/no-this-alias': [
22 | 			'error',
23 | 			{
24 | 				allowDestructuring: true, // Allow `const { props, state } = this`; false by default
25 | 				allowedNames: ['thisObj'], // Allow `const self = this`; `[]` by default
26 | 			},
27 | 		],
28 | 		'@typescript-eslint/no-empty-interface': [
29 | 			'error',
30 | 			{
31 | 				allowSingleExtends: true
32 | 			}
33 | 		],
34 | 		"@typescript-eslint/no-explicit-any": "off",
35 | 		"@typescript-eslint/no-extra-semi": "off"
36 | 	},
37 | 	settings: {
38 | 		react: {
39 | 			version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
40 | 		}
41 | 	}
42 | };


--------------------------------------------------------------------------------
/React/demo/src/components/event-details-dialog/EventDetailsDialogComponent.tsx:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | import React from "react";
 5 | import { provideFluentDesignSystem, fluentDialog, fluentButton } from '@fluentui/web-components';
 6 | import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
 7 | import './EventDetailsDialogComponent.css';
 8 | 
 9 | const { wrap } = provideReactWrapper(React, provideFluentDesignSystem());
10 | 
11 | export const FluentDialog = wrap(fluentDialog());
12 | export const FluentButton = wrap(fluentButton());
13 | 
14 | interface EventDetailsDialogProps {
15 |     isOpen: boolean;
16 |     onRequestClose: () => void;
17 |     dataSelectedEventDetails: any;
18 | }
19 | 
20 | const EventDetailsDialog = ({
21 |     isOpen,
22 |     onRequestClose,
23 |     dataSelectedEventDetails,
24 | }: EventDetailsDialogProps) => {
25 |     return (
26 |         isOpen ? (
27 |             <FluentDialog>
28 |                 <div className="dialog-header-event-details">
29 |                     <h1>Event Details</h1>
30 |                     <button className="close-icon-button" onClick={onRequestClose}>&#x2715;</button>
31 |                 </div>
32 |                 <div className="dialog-main-event-details" tabIndex={0}>
33 |                     <pre>{JSON.stringify(dataSelectedEventDetails, null, 2)}</pre>
34 |                 </div>
35 |                 <FluentButton className="event-details-close-button" onClick={onRequestClose}>Close</FluentButton>
36 |             </FluentDialog>
37 |         ) : null
38 |     );
39 | };
40 | 
41 | export default EventDetailsDialog;


--------------------------------------------------------------------------------
/React/powerbi-client-react/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "powerbi-client-react",
 3 | 	"version": "2.0.0",
 4 | 	"description": "React wrapper for powerbi-client library",
 5 | 	"main": "dist/powerbi-client-react.js",
 6 | 	"types": "dist/powerbi-client-react.d.ts",
 7 | 	"files": [
 8 | 		"dist"
 9 | 	],
10 | 	"scripts": {
11 | 		"prebuild": "npm run lint",
12 | 		"build": "webpack --mode=production --config config/src/webpack.config.js",
13 | 		"build:dev": "webpack --mode=development --config config/src/webpack.config.js",
14 | 		"pretest": "webpack --config config/test/webpack.config.js",
15 | 		"test": "karma start config/test/karma.conf.js",
16 | 		"demo": "cd ../demo && npm install && npm run demo",
17 | 		"lint": "eslint --fix src/**/*.{ts,tsx}"
18 | 	},
19 | 	"keywords": [
20 | 		"microsoft",
21 | 		"powerbi",
22 | 		"embedded",
23 | 		"react"
24 | 	],
25 | 	"repository": {
26 | 		"type": "git",
27 | 		"url": "https://github.com/microsoft/powerbi-client-react.git"
28 | 	},
29 | 	"license": "MIT",
30 | 	"publishConfig": {
31 | 		"tag": "beta"
32 | 	},
33 | 	"dependencies": {
34 | 		"lodash.isequal": "^4.5.0",
35 | 		"powerbi-client": "^2.23.1"
36 | 	},
37 | 	"peerDependencies": {
38 | 		"react": ">= 18"
39 | 	},
40 | 	"devDependencies": {
41 | 		"@testing-library/react": "^16.0.1",
42 | 		"@types/jasmine": "^5.1.4",
43 | 		"@types/lodash.isequal": "^4.5.8",
44 | 		"@types/node": "^16.18.112",
45 | 		"@types/react": "^18.3.10",
46 | 		"@types/react-dom": "^18.3.0",
47 | 		"@typescript-eslint/eslint-plugin": "^5.42.0",
48 | 		"@typescript-eslint/parser": "^5.42.0",
49 | 		"eslint": "^7.4.0",
50 | 		"eslint-plugin-react": "^7.20.0",
51 | 		"jasmine-core": "^5.3.0",
52 | 		"karma": "^6.4.4",
53 | 		"karma-chrome-launcher": "^3.2.0",
54 | 		"karma-jasmine": "^5.1.0",
55 | 		"react": "^18.3.1",
56 | 		"react-dom": "^18.3.1",
57 | 		"ts-loader": "^9.4.1",
58 | 		"typescript": "^4.9.5",
59 | 		"webpack": "^5.71.0",
60 | 		"webpack-cli": "^4.9.2"
61 | 	}
62 | }


--------------------------------------------------------------------------------
/React/powerbi-client-react/config/test/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | let path = require('path');
 5 | 
 6 | module.exports = function (config) {
 7 | 	config.set({
 8 | 
 9 | 		// base path that will be used to resolve all patterns (eg. files, exclude)
10 | 		basePath: '',
11 | 
12 | 		// frameworks to use
13 | 		// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
14 | 		frameworks: ['jasmine'],
15 | 
16 | 		// list of files / patterns to load in the browser
17 | 		files: [
18 | 			path.resolve('compiledTests/**/*spec.js')
19 | 		],
20 | 
21 | 		// preprocess matching files before serving them to the browser
22 | 		// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
23 | 		preprocessors: {
24 | 		},
25 | 
26 | 		// test results reporter to use
27 | 		// possible values: 'dots', 'progress'
28 | 		// available reporters: https://npmjs.org/browse/keyword/karma-reporter
29 | 		reporters: ['progress'],
30 | 
31 | 		// web server port
32 | 		port: 9876,
33 | 
34 | 		// enable / disable colors in the output (reporters and logs)
35 | 		colors: true,
36 | 
37 | 		// level of logging
38 | 		// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
39 | 		logLevel: config.LOG_INFO,
40 | 
41 | 		// enable / disable watching file and executing tests whenever any file changes
42 | 		autoWatch: false,
43 | 
44 | 		plugins: [
45 | 			require('karma-jasmine'),
46 | 			require('karma-chrome-launcher'),
47 | 		],
48 | 
49 | 		// start these browsers
50 | 		// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
51 | 		browsers: ["Chrome_headless"],
52 | 
53 | 		customLaunchers: {
54 | 			'Chrome_headless': {
55 | 				base: 'Chrome',
56 | 				flags: [
57 | 					'--no-sandbox',
58 | 				]
59 | 			},
60 | 		},
61 | 
62 | 		// Continuous Integration mode
63 | 		// if true, Karma captures browsers, runs the tests and exits
64 | 		singleRun: true,
65 | 
66 | 		// Concurrency level
67 | 		// how many browser should be started simultaneous
68 | 		concurrency: Infinity
69 | 	})
70 | }


--------------------------------------------------------------------------------
/React/powerbi-client-react/test/utils.spec.ts:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | import { EventHandler } from '../src/PowerBIEmbed';
 5 | import { stringifyMap } from '../src/utils';
 6 | 
 7 | describe('tests of PowerBIEmbed', function () {
 8 | 
 9 | 	let container: HTMLDivElement | null;
10 | 
11 | 	beforeEach(function () {
12 | 		container = document.createElement('div');
13 | 		document.body.appendChild(container);
14 | 	});
15 | 
16 | 	afterEach(function () {
17 | 		if (container){
18 | 			document.body.removeChild(container);
19 | 			container = null;
20 | 		}
21 | 	});
22 | 
23 | 	// Tests for utils stringifyMap
24 | 	describe('tests PowerBIEmbed stringifyMap method', () => {
25 | 
26 | 		it('stringifies the event handler map', () => {
27 | 
28 | 			// Arrange
29 | 			const eventHandlerMap = new Map([
30 | 				['loaded', function () { console.log('Report loaded'); }],
31 | 				['rendered', function () { console.log('Rendered'); }]
32 | 			]);
33 | 			const expectedString = `[["loaded","function () { console.log('Report loaded'); }"],["rendered","function () { console.log('Rendered'); }"]]`;
34 | 
35 | 			// Act
36 | 			const jsonStringOutput = stringifyMap(eventHandlerMap);
37 | 
38 | 			// Assert
39 | 			expect(jsonStringOutput).toBe(expectedString);
40 | 		});
41 | 
42 | 		it('stringifies empty event handler map', () => {
43 | 
44 | 			// Arrange
45 | 			const eventHandlerMap = new Map<string, EventHandler>([]);
46 | 			const expectedString = `[]`;
47 | 
48 | 			// Act
49 | 			const jsonStringOutput = stringifyMap(eventHandlerMap);
50 | 
51 | 			// Assert
52 | 			expect(jsonStringOutput).toBe(expectedString);
53 | 		});
54 | 
55 | 		it('stringifies null in event handler map', () => {
56 | 
57 | 			// Arrange
58 | 			const eventHandlerMap = new Map<string, EventHandler>([
59 | 				['loaded', null],
60 | 				['rendered', function () { console.log('Rendered'); }]
61 | 			]);
62 | 			const expectedString = `[["loaded",""],["rendered","function () { console.log('Rendered'); }"]]`;
63 | 
64 | 			// Act
65 | 			const jsonStringOutput = stringifyMap(eventHandlerMap);
66 | 
67 | 			// Assert
68 | 			expect(jsonStringOutput).toBe(expectedString);
69 | 		});
70 | 	});
71 | });


--------------------------------------------------------------------------------
/React/demo/src/DemoApp.css:
--------------------------------------------------------------------------------
  1 | /* Copyright (c) Microsoft Corporation.
  2 | Licensed under the MIT License. */
  3 | 
  4 | body {
  5 | 	font-family: 'Segoe UI';
  6 | 	margin: 0;
  7 | }
  8 | 
  9 | button {
 10 | 	background: #117865;
 11 | 	border: 0;
 12 | 	border-radius: 5px;
 13 | 	color: #ffffff;
 14 | 	cursor: pointer;
 15 | 	font-size: 16px;
 16 | 	height: 35px;
 17 | 	margin-bottom: 8px;
 18 | 	margin-right: 15px;
 19 | 	min-width: 270px;
 20 | 	overflow: hidden;
 21 | 	text-overflow: ellipsis;
 22 | 	white-space: nowrap;
 23 | 	width: calc((100% / 3) - 120px);
 24 | }
 25 | 
 26 | .button-container {
 27 | 	margin-left: auto;
 28 | 	margin-right: auto;
 29 | 	max-width: 1120px;
 30 | }
 31 | 
 32 | .container {
 33 | 	display: flex;
 34 | 	flex-direction: column;
 35 | 	height: 100vh;
 36 | }
 37 | 
 38 | .controls {
 39 | 	flex: 1;
 40 | 	margin-top: 20px;
 41 | 	text-align: center;
 42 | }
 43 | 
 44 | .display-message {
 45 | 	align-items: center;
 46 | 	display: flex;
 47 | 	font: 400 18px/27px 'Segoe UI';
 48 | 	height: 30px;
 49 | 	justify-content: center;
 50 | 	text-align: center;
 51 | }
 52 | 
 53 | .embed-report {
 54 | 	margin-right: 0;
 55 | 	margin-top: 18px;
 56 | 	text-align: center;
 57 | 	width: 180px;
 58 | }
 59 | 
 60 | .footer {
 61 | 	align-items: center;
 62 | 	background: #f7f8fa 0 0 no-repeat padding-box;
 63 | 	display: flex;
 64 | 	font: 400 16px/21px 'Segoe UI';
 65 | 	height: 42px;
 66 | 	justify-content: center;
 67 | 	width: 100%;
 68 | }
 69 | 
 70 | .footer a {
 71 | 	color: #3a3a3a;
 72 | 	text-decoration: underline;
 73 | }
 74 | 
 75 | .footer * {
 76 | 	padding: 0 3px;
 77 | }
 78 | 
 79 | .footer-icon {
 80 | 	border-radius: 50%;
 81 | 	height: 22px;
 82 | 	vertical-align: middle;
 83 | }
 84 | 
 85 | .header {
 86 | 	background: #117865 0 0 no-repeat padding-box;
 87 | 	border: 1px solid #707070;
 88 | 	color: #ffffff;
 89 | 	font: 700 22px/27px 'Segoe UI';
 90 | 	padding: 13px 13px 13px 36px;
 91 | 	text-align: left;
 92 | }
 93 | 
 94 | iframe {
 95 | 	border: none;
 96 | }
 97 | 
 98 | .position {
 99 | 	margin-top: 40vh;
100 | }
101 | 
102 | .report-container {
103 | 	height: 75vh;
104 | 	margin: 8px auto;
105 | 	width: 90%;
106 | }
107 | 
108 | @media screen and (max-width: 980px) {
109 |     p {
110 |         font-size: 12px;
111 |     }
112 | }
113 | 
114 | @media screen and (max-width: 767px) {
115 | 	.display-message {
116 | 		font: 400 14px 'Segoe UI';
117 | 	}
118 | 
119 | 	.footer {
120 | 		font: 400 8px 'Segoe UI';
121 | 		height: 64px;
122 | 	}
123 | }


--------------------------------------------------------------------------------
/React/demo/src/components/embed-config-dialog/EmbedConfigDialogComponent.css:
--------------------------------------------------------------------------------
  1 | /* Copyright (c) Microsoft Corporation.
  2 | Licensed under the MIT License. */
  3 | 
  4 | p {
  5 |     margin: 10px 0;
  6 |     text-align: start;
  7 | }
  8 | 
  9 | span {
 10 |     font-weight: 500;
 11 | }
 12 | 
 13 | .close-icon-button {
 14 |     align-items: center;
 15 |     background: none;
 16 |     border: none;
 17 |     color: #000000;
 18 |     cursor: pointer;
 19 |     display: flex;
 20 |     font-size: 24px;
 21 |     justify-content: flex-end;
 22 |     margin-right: 0;
 23 |     padding: 0;
 24 |     width: 20px;
 25 | }
 26 | 
 27 | .dialog-buttons {
 28 |     background-color: none;
 29 |     border: none;
 30 |     display: flex;
 31 |     justify-content: flex-end;
 32 |     margin: 15px 0;
 33 | }
 34 | 
 35 | .dialog-field {
 36 |     margin: 5px 0;
 37 |     width: 100%;
 38 | }
 39 | 
 40 | .dialog-header {
 41 |     align-items: center;
 42 |     display: flex;
 43 |     justify-content: space-between;
 44 |     text-align: start;
 45 | }
 46 | 
 47 | .dialog-main {
 48 |     align-items: flex-start;
 49 |     display: flex;
 50 |     flex-direction: column;
 51 | }
 52 | 
 53 | .dialog-title {
 54 |     margin: 10px 0;
 55 | }
 56 | 
 57 | .run-button {
 58 |     margin: 0 10px;
 59 | }
 60 | 
 61 | fluent-button.close-button::part(control) {
 62 |     background-color: #ffffff;
 63 |     border: 1px solid #e0e0e0;
 64 |     color: #000000;
 65 |     cursor: pointer;
 66 | }
 67 | 
 68 | fluent-button.run-button.active::part(control) {
 69 |     background-color: #117865 !important;
 70 |     color: #ffffff !important;
 71 | }
 72 | 
 73 | fluent-button.run-button::part(control) {
 74 |     background-color: transparent !important;
 75 |     border: none;
 76 |     color: #000000;
 77 |     transition: background-color 0.3s;
 78 | }
 79 | 
 80 | fluent-button::part(control) {
 81 |     border: none;
 82 |     border-radius: 5px;
 83 |     cursor: pointer;
 84 |     font-size: 16px;
 85 |     font-weight: 500;
 86 |     height: 35px;
 87 |     width: 88px;
 88 | }
 89 | 
 90 | fluent-dialog::part(control) {
 91 |     background-color: #ffffff;
 92 |     border-radius: 8px;
 93 |     height: auto;
 94 |     padding: 24px;
 95 |     --neutral-fill-hover: none;
 96 |     --neutral-fill-rest: transparent;
 97 |     --neutral-stroke-control-rest: transparent;
 98 | }
 99 | 
100 | fluent-text-field::part(control) {
101 |     border: 1px solid #8a8886;
102 |     border-radius: 2px;
103 |     font-size: 16px;
104 |     height: 28px;
105 |     width: -webkit-fill-available;
106 | }


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | <!-- BEGIN MICROSOFT SECURITY.MD V0.0.5 BLOCK -->
 2 | 
 3 | ## Security
 4 | 
 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
 6 | 
 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
 8 | 
 9 | ## Reporting Security Issues
10 | 
11 | **Please do not report security vulnerabilities through public GitHub issues.**
12 | 
13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
14 | 
15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com).  If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
16 | 
17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
18 | 
19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
20 | 
21 |   * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
22 |   * Full paths of source file(s) related to the manifestation of the issue
23 |   * The location of the affected source code (tag/branch/commit or direct URL)
24 |   * Any special configuration required to reproduce the issue
25 |   * Step-by-step instructions to reproduce the issue
26 |   * Proof-of-concept or exploit code (if possible)
27 |   * Impact of the issue, including how an attacker might exploit the issue
28 | 
29 | This information will help us triage your report more quickly.
30 | 
31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs.
32 | 
33 | ## Preferred Languages
34 | 
35 | We prefer all communications to be in English.
36 | 
37 | ## Policy
38 | 
39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
40 | 
41 | <!-- END MICROSOFT SECURITY.MD BLOCK -->


--------------------------------------------------------------------------------
/React/demo/src/components/embed-config-dialog/EmbedConfigDialogComponent.tsx:
--------------------------------------------------------------------------------
 1 | // Copyright (c) Microsoft Corporation.
 2 | // Licensed under the MIT License.
 3 | 
 4 | import React, { useState, useEffect } from "react";
 5 | import { provideFluentDesignSystem, fluentDialog, fluentButton, fluentTextField } from '@fluentui/web-components';
 6 | import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
 7 | import './EmbedConfigDialogComponent.css';
 8 | 
 9 | const { wrap } = provideReactWrapper(React, provideFluentDesignSystem());
10 | 
11 | export const FluentDialog = wrap(fluentDialog());
12 | export const FluentButton = wrap(fluentButton());
13 | export const FluentTextField = wrap(fluentTextField());
14 | 
15 | interface EmbedReportDialogProps {
16 |   isOpen: boolean;
17 |   onRequestClose: () => void;
18 |   onEmbed: (embedUrl: string, accessToken: string) => void;
19 | }
20 | 
21 | const EmbedConfigDialog = ({
22 |   isOpen,
23 |   onRequestClose,
24 |   onEmbed,
25 | }: EmbedReportDialogProps) => {
26 |   const [aadToken, setAadToken] = useState("");
27 |   const [embedUrl, setEmbedUrl] = useState("");
28 |   const [areFieldsFilled, setAreFieldsFilled] = useState<boolean>(false);
29 | 
30 |   useEffect(() => {
31 |     setAreFieldsFilled(!!aadToken && !!embedUrl);
32 |   }, [aadToken, embedUrl]);
33 | 
34 |   const onAadTokenChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
35 |     setAadToken(event.target.value);
36 |   }
37 | 
38 |   const onEmbedUrlChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
39 |     setEmbedUrl(event.target.value);
40 |   }
41 | 
42 |   const runConfig = (): void => {
43 |     if (aadToken && embedUrl) {
44 |       onEmbed(embedUrl, aadToken);
45 |     }
46 |   };
47 | 
48 |   const hideEmbedConfigDialog = (): void => {
49 |     setAadToken("");
50 |     setEmbedUrl("");
51 |     onRequestClose();
52 |   };
53 | 
54 |   return (
55 |     isOpen ? (
56 |       <FluentDialog>
57 |         <div className="dialog-header">
58 |           <h2 className="dialog-title">Use your own Microsoft Entra token</h2>
59 |           <button className="close-icon-button" onClick={hideEmbedConfigDialog}>&#x2715;</button>
60 |         </div>
61 |         <div className="dialog-main">
62 |           <p>Follow the <a href="https://learn.microsoft.com/rest/api/power-bi/embed-token/generate-token" target="_blank" rel="noopener noreferrer">Microsoft Entra Token</a> documentation to generate a Microsoft Entra Token.</p>
63 |           <span>Insert your Microsoft Entra token</span>
64 |           <FluentTextField name="aadToken" value={aadToken} onInput={onAadTokenChange} className="dialog-field" aria-label="AAD Token" />
65 | 
66 |           <p>Use the <a href="https://learn.microsoft.com/rest/api/power-bi/reports/get-report-in-group" target="_blank" rel="noopener noreferrer">Get Report In Group</a> REST API to get your embed URL.</p>
67 |           <span>Insert your embed URL</span>
68 |           <FluentTextField name="embedUrl" value={embedUrl} onInput={onEmbedUrlChange} className="dialog-field" aria-label="Embed URL" />
69 |         </div>
70 |         <div className="dialog-buttons">
71 |           <FluentButton className={`run-button ${areFieldsFilled ? "active" : ""}`} disabled={!areFieldsFilled} onClick={runConfig}>Run</FluentButton>
72 |           <FluentButton className="close-button" onClick={hideEmbedConfigDialog}>Close</FluentButton>
73 |         </div>
74 |       </FluentDialog>
75 |     ) : null
76 |   );
77 | };
78 | 
79 | export default EmbedConfigDialog;


--------------------------------------------------------------------------------
/React/powerbi-client-react/src/PowerBIEmbed.tsx:
--------------------------------------------------------------------------------
  1 | // Copyright (c) Microsoft Corporation.
  2 | // Licensed under the MIT License.
  3 | 
  4 | import * as React from 'react';
  5 | import {
  6 | 	service,
  7 | 	factories,
  8 | 	Report,
  9 | 	Embed,
 10 | 	Dashboard,
 11 | 	Tile,
 12 | 	Qna,
 13 | 	Visual,
 14 | 	IQnaEmbedConfiguration,
 15 | 	IVisualEmbedConfiguration,
 16 | 	IReportEmbedConfiguration,
 17 | 	IDashboardEmbedConfiguration,
 18 | 	ITileEmbedConfiguration,
 19 | } from 'powerbi-client';
 20 | import { IReportCreateConfiguration, IPaginatedReportLoadConfiguration } from 'powerbi-models';
 21 | import isEqual from 'lodash.isequal';
 22 | import { stringifyMap, SdkType, SdkWrapperVersion } from './utils';
 23 | 
 24 | /**
 25 |  * Type for event handler function of embedded entity
 26 |  */
 27 | export type EventHandler = ((event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void) | null;
 28 | 
 29 | /**
 30 |  * Props interface for PowerBIEmbed component
 31 |  */
 32 | export interface EmbedProps {
 33 | 
 34 | 	// Configuration for embedding the PowerBI entity (Required)
 35 | 	embedConfig:
 36 | 		| IReportEmbedConfiguration
 37 | 		| IDashboardEmbedConfiguration
 38 | 		| ITileEmbedConfiguration
 39 | 		| IQnaEmbedConfiguration
 40 | 		| IVisualEmbedConfiguration
 41 | 		| IPaginatedReportLoadConfiguration
 42 | 		| IReportCreateConfiguration;
 43 | 
 44 | 	// Callback method to get the embedded PowerBI entity object (Optional)
 45 | 	getEmbeddedComponent?: { (embeddedComponent: Embed): void };
 46 | 
 47 | 	// Map of pair of event name and its handler method to be triggered on the event (Optional)
 48 | 	eventHandlers?: Map<string, EventHandler>;
 49 | 
 50 | 	// CSS class to be set on the embedding container (Optional)
 51 | 	cssClassName?: string;
 52 | 
 53 | 	// Phased embedding flag (Optional)
 54 | 	phasedEmbedding?: boolean;
 55 | 
 56 | 	// Provide a custom implementation of PowerBI service (Optional)
 57 | 	service?: service.Service;
 58 | }
 59 | 
 60 | export enum EmbedType {
 61 | 	Create = 'create',
 62 | 	Report = 'report',
 63 | 	Dashboard = 'dashboard',
 64 | 	Tile = 'tile',
 65 | 	Qna = 'qna',
 66 | 	Visual = 'visual'
 67 | }
 68 | 
 69 | /**
 70 |  * Base react component to embed Power BI entities like: reports, dashboards, tiles, visual and qna containers.
 71 |  */
 72 | export class PowerBIEmbed extends React.Component<EmbedProps> {
 73 | 
 74 | 	// Embedded entity
 75 | 	// Note: Do not read or assign to this member variable directly, instead use the getter and setter
 76 | 	private _embed?: Embed;
 77 | 
 78 | 	// Powerbi service
 79 | 	private powerbi: service.Service;
 80 | 
 81 | 	// Ref to the HTML div element
 82 | 	private containerRef = React.createRef<HTMLDivElement>();
 83 | 
 84 | 	// JSON stringify of prev event handler map
 85 | 	private prevEventHandlerMapString = '';
 86 | 
 87 | 	// Getter for this._embed
 88 | 	private get embed(): Embed | undefined {
 89 | 		return this._embed;
 90 | 	};
 91 | 
 92 | 	// Setter for this._embed
 93 | 	private set embed(newEmbedInstance: Embed | undefined) {
 94 | 		this._embed = newEmbedInstance;
 95 | 
 96 | 		// Invoke callback method in props to return this embed instance
 97 | 		this.invokeGetEmbedCallback();
 98 | 	};
 99 | 
100 | 	constructor(props: EmbedProps) {
101 | 		super(props);
102 | 
103 | 		if (this.props.service) {
104 | 			this.powerbi = this.props.service;
105 | 		}
106 | 		else {
107 | 			this.powerbi = new service.Service(
108 | 				factories.hpmFactory,
109 | 				factories.wpmpFactory,
110 | 				factories.routerFactory);
111 | 		}
112 | 
113 | 		this.powerbi.setSdkInfo(SdkType, SdkWrapperVersion);
114 | 	};
115 | 
116 | 	componentDidMount(): void {
117 | 
118 | 		// Check if HTML container is available
119 | 		if (this.containerRef.current) {
120 | 
121 | 			// Decide to embed, load or bootstrap
122 | 			if (this.props.embedConfig.accessToken && this.props.embedConfig.embedUrl) {
123 | 				this.embedEntity();
124 | 			}
125 | 			else {
126 | 				this.embed = this.powerbi.bootstrap(this.containerRef.current, this.props.embedConfig);
127 | 			}
128 | 		}
129 | 
130 | 		// Set event handlers if available
131 | 		if (this.props.eventHandlers && this.embed) {
132 | 			this.setEventHandlers(this.embed, this.props.eventHandlers);
133 | 		}
134 | 	};
135 | 
136 | 	async componentDidUpdate(prevProps: EmbedProps): Promise<void> {
137 | 
138 | 		// Set event handlers if available
139 | 		if (this.props.eventHandlers && this.embed) {
140 | 			this.setEventHandlers(this.embed, this.props.eventHandlers);
141 | 		}
142 | 
143 | 		// Re-embed when the current embedConfig differs from the previous embedConfig
144 | 		if(!isEqual(this.props.embedConfig, prevProps.embedConfig)){
145 | 			this.embedEntity();
146 | 		}
147 | 	};
148 | 
149 | 	componentWillUnmount(): void {
150 | 		// Clean Up
151 | 		if (this.containerRef.current) {
152 | 			this.powerbi.reset(this.containerRef.current);
153 | 		}
154 | 
155 | 		// Set the previous event handler map string to empty
156 | 		this.prevEventHandlerMapString = '';
157 | 	};
158 | 
159 | 	render(): JSX.Element {
160 | 		return (
161 | 			<div
162 | 				ref={this.containerRef}
163 | 				className={this.props.cssClassName}>
164 | 			</div>
165 | 		)
166 | 	};
167 | 
168 | 	/**
169 | 	 * Embed the powerbi entity (Load for phased embedding)
170 | 	 */
171 | 	private embedEntity(): void {
172 | 		// Ensure that the HTML container is rendered and available
173 | 		// Also check if the Embed URL and Access Token are present in current props
174 | 		if (!this.containerRef.current || !this.props.embedConfig.accessToken || !this.props.embedConfig.embedUrl) {
175 | 			return;
176 | 		}
177 | 
178 | 		// Load when props.phasedEmbedding is true and embed type is report, embed otherwise
179 | 		if (this.props.phasedEmbedding && this.props.embedConfig.type === EmbedType.Report) {
180 | 			this.embed = this.powerbi.load(this.containerRef.current, this.props.embedConfig);
181 | 		}
182 | 		else {
183 | 			if (this.props.phasedEmbedding) {
184 | 				console.error(`Phased embedding is not supported for type ${this.props.embedConfig.type}`)
185 | 			}
186 | 
187 | 			if (this.props.embedConfig.type === EmbedType.Create) {
188 | 				this.embed = this.powerbi.createReport(this.containerRef.current, this.props.embedConfig as IReportCreateConfiguration);
189 | 			}
190 | 			else {
191 | 				this.embed = this.powerbi.embed(this.containerRef.current, this.props.embedConfig);
192 | 			}
193 | 		}
194 | 	}
195 | 
196 | 	/**
197 | 	 * Sets all event handlers from the props on the embedded entity
198 | 	 *
199 | 	 * @param embed Embedded object
200 | 	 * @param eventHandlers Array of eventhandlers to be set on embedded entity
201 | 	 * @returns void
202 | 	 */
203 | 	private setEventHandlers(
204 | 		embed: Embed,
205 | 		eventHandlerMap: Map<string, EventHandler>
206 | 	): void {
207 | 		// Get string representation of eventHandlerMap
208 | 		const eventHandlerMapString = stringifyMap(this.props.eventHandlers);
209 | 
210 | 		// Check if event handler map changed
211 | 		if (this.prevEventHandlerMapString === eventHandlerMapString) {
212 | 			return;
213 | 		}
214 | 
215 | 		// Update prev string representation of event handler map
216 | 		this.prevEventHandlerMapString = eventHandlerMapString;
217 | 
218 | 		// List of allowed events
219 | 		let allowedEvents = Embed.allowedEvents;
220 | 
221 | 		const entityType = embed.embedtype;
222 | 
223 | 		// Append entity specific events
224 | 		switch (entityType) {
225 | 			case EmbedType.Create:
226 | 				break;
227 | 			case EmbedType.Report:
228 | 				allowedEvents = [...allowedEvents, ...Report.allowedEvents];
229 | 				break;
230 | 			case EmbedType.Dashboard:
231 | 				allowedEvents = [...allowedEvents, ...Dashboard.allowedEvents];
232 | 				break;
233 | 			case EmbedType.Tile:
234 | 				allowedEvents = [...allowedEvents, ...Tile.allowedEvents];
235 | 				break;
236 | 			case EmbedType.Qna:
237 | 				allowedEvents = [...allowedEvents, ...Qna.allowedEvents];
238 | 				break;
239 | 			case EmbedType.Visual:
240 | 				allowedEvents = [...allowedEvents, ...Visual.allowedEvents];
241 | 				break;
242 | 			default:
243 | 				console.error(`Invalid embed type ${entityType}`);
244 | 		}
245 | 
246 | 		// Holds list of events which are not allowed
247 | 		const invalidEvents: Array<string> = [];
248 | 
249 | 		// Apply all provided event handlers
250 | 		eventHandlerMap.forEach((eventHandlerMethod, eventName) => {
251 | 			// Check if this event is allowed
252 | 			if (allowedEvents.includes(eventName)) {
253 | 
254 | 				// Removes event handler for this event
255 | 				embed.off(eventName);
256 | 
257 | 				// Event handler is effectively removed for this event when eventHandlerMethod is null
258 | 				if (eventHandlerMethod) {
259 | 
260 | 					// Set single event handler
261 | 					embed.on(eventName, (event: service.ICustomEvent<any>): void => {
262 | 						eventHandlerMethod(event, this.embed);
263 | 					});
264 | 				}
265 | 			}
266 | 			else {
267 | 
268 | 				// Add this event name to the list of invalid events
269 | 				invalidEvents.push(eventName);
270 | 			}
271 | 		});
272 | 
273 | 		// Handle invalid events
274 | 		if (invalidEvents.length) {
275 | 			console.error(`Following events are invalid: ${invalidEvents.join(',')}`);
276 | 		}
277 | 	};
278 | 
279 | 	/**
280 | 	 * Returns the embedded object via _getEmbed_ callback method provided in props
281 | 	 *
282 | 	 * @returns void
283 | 	 */
284 | 	private invokeGetEmbedCallback(): void {
285 | 		if (this.props.getEmbeddedComponent && this.embed) {
286 | 			this.props.getEmbeddedComponent(this.embed);
287 | 		}
288 | 	};
289 | }


--------------------------------------------------------------------------------
/React/demo/src/DemoApp.tsx:
--------------------------------------------------------------------------------
  1 | // Copyright (c) Microsoft Corporation.
  2 | // Licensed under the MIT License.
  3 | 
  4 | import React, { useState, useEffect } from 'react';
  5 | import { models, Report, Embed, service } from 'powerbi-client';
  6 | import { IHttpPostMessageResponse } from 'http-post-message';
  7 | import { PowerBIEmbed } from 'powerbi-client-react';
  8 | import 'powerbi-report-authoring';
  9 | 
 10 | import './DemoApp.css';
 11 | import EmbedConfigDialog from './components/embed-config-dialog/EmbedConfigDialogComponent';
 12 | import EventDetailsDialog from './components/event-details-dialog/EventDetailsDialogComponent';
 13 | import { sampleTheme } from './constants/constants';
 14 | 
 15 | // Root Component to demonstrate usage of embedded component
 16 | function DemoApp (): JSX.Element {
 17 | 
 18 | 	// PowerBI Report object (to be received via callback)
 19 | 	const [report, setReport] = useState<Report>();
 20 | 
 21 | 	// Track Report embedding status
 22 | 	const [isEmbedded, setIsEmbedded] = useState<boolean>(false);
 23 | 
 24 | 	const [displayMessage, setMessage] = useState(`The report is bootstrapped. Click the Embed Report button to set the access token.`);
 25 | 	const [isEmbedConfigDialogOpen, setIsEmbedConfigDialogOpen] = useState<boolean>(false);
 26 | 	const [isFilterPaneVisibleAndExpanded, setIsFilterPaneVisibleAndExpanded] = useState<boolean>(true);
 27 | 	const [isThemeApplied, setIsThemeApplied] = useState<boolean>(false);
 28 | 	const [isZoomedOut, setIsZoomedOut] = useState<boolean>(false);
 29 | 	const [isDataSelectedEvent, setIsDataSelectedEvent] = useState<boolean>(false);
 30 | 	const [isEventDetailsDialogVisible, setIsEventDetailsDialogVisible] = useState<boolean>(false);
 31 | 	const [dataSelectedEventDetails, setDataSelectedEventDetails] = useState<any>(null);
 32 | 
 33 | 	// Constants for zoom levels
 34 | 	const zoomOutLevel = 0.5;
 35 | 	const zoomInLevel = 0.9;
 36 | 
 37 | 	// CSS Class to be passed to the embedded component
 38 | 	const reportClass = 'report-container';
 39 | 
 40 | 	// Pass the basic embed configurations to the embedded component to bootstrap the report on first load
 41 | 	// Values for properties like embedUrl, accessToken and settings will be set on click of button
 42 | 	const [sampleReportConfig, setReportConfig] = useState<models.IReportEmbedConfiguration>({
 43 | 		type: 'report',
 44 | 		embedUrl: undefined,
 45 | 		tokenType: models.TokenType.Aad,
 46 | 		accessToken: undefined,
 47 | 		settings: undefined,
 48 | 	});
 49 | 
 50 | 	/**
 51 | 	 * Map of event handlers to be applied to the embedded report
 52 | 	 * Update event handlers for the report by redefining the map using the setEventHandlersMap function
 53 | 	 * Set event handler to null if event needs to be removed
 54 | 	 * More events can be provided from here
 55 | 	 * https://docs.microsoft.com/en-us/javascript/api/overview/powerbi/handle-events#report-events
 56 | 	 */
 57 | 	const[eventHandlersMap, setEventHandlersMap] = useState<Map<string, (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null>>(new Map([
 58 | 		['loaded', () => console.log('Report has loaded')],
 59 | 		['rendered', () => console.log('Report has rendered')],
 60 | 		['error', (event?: service.ICustomEvent<any>) => {
 61 | 				if (event) {
 62 | 					console.error(event.detail);
 63 | 				}
 64 | 			},
 65 | 		],
 66 | 		['visualClicked', () => console.log('visual clicked')],
 67 | 		['pageChanged', (event) => console.log(event)],
 68 | 	]));
 69 | 
 70 | 	useEffect(() => {
 71 | 		if (report) {
 72 | 			report.setComponentTitle('Embedded Report');
 73 | 		}
 74 | 	}, [report]);
 75 | 
 76 | 	/**
 77 | 	 * Embeds report
 78 | 	 */
 79 | 	const embedReport = (embedUrl: string, accessToken: string): void => {
 80 | 		// Update the reportConfig to embed the PowerBI report
 81 | 		setReportConfig({
 82 | 			...sampleReportConfig,
 83 | 			embedUrl,
 84 | 			accessToken
 85 | 		});
 86 | 		setIsEmbedded(true);
 87 | 
 88 | 		setMessage('Use the buttons above to interact with the report using Power BI Client APIs.');
 89 | 		setIsEmbedConfigDialogOpen(false);
 90 | 	};
 91 | 
 92 | 	/**
 93 |  	 * Toggle Filter Pane
 94 |  	 *
 95 |  	 * @returns Promise<IHttpPostMessageResponse<void> | undefined>
 96 |  	 */
 97 | 	const toggleFilterPane = async (): Promise<IHttpPostMessageResponse<void> | undefined> => {
 98 | 		if (!report) {
 99 | 			setDisplayMessageAndConsole('Report not available');
100 | 			return;
101 | 		}
102 | 
103 | 		const filterPaneVisibleAndExpanded = !isFilterPaneVisibleAndExpanded;
104 | 		setIsFilterPaneVisibleAndExpanded(filterPaneVisibleAndExpanded);
105 | 
106 | 		// Update the settings to show/hide the filter pane
107 | 		const settings = {
108 | 			panes: {
109 | 				filters: {
110 | 					expanded: filterPaneVisibleAndExpanded,
111 | 					visible: filterPaneVisibleAndExpanded,
112 | 				},
113 | 			},
114 | 		};
115 | 
116 | 		try {
117 | 			const response: IHttpPostMessageResponse<void> = await report.updateSettings(settings);
118 | 			setDisplayMessageAndConsole(filterPaneVisibleAndExpanded ? 'Filter pane is visible.' : 'Filter pane is hidden.');
119 | 			return response;
120 | 		} catch (error) {
121 | 			console.error(error);
122 | 			return;
123 | 		}
124 | 	};
125 | 
126 | 	/**
127 | 	 * Handles the visibility and details of the data-selected event dialog.
128 |  	 */
129 | 	const dataSelectedEventDetailsDialog = (dataSelectedEventDetails: any): void => {
130 | 		setDataSelectedEventDetails(dataSelectedEventDetails);
131 | 		setIsEventDetailsDialogVisible(true);
132 | 	}
133 | 
134 | 	/**
135 | 	 * Set data selected event
136 |  	 */
137 | 	const setDataSelectedEvent = () => {
138 | 		const dataSelectedEvent = !isDataSelectedEvent;
139 | 		setIsDataSelectedEvent(dataSelectedEvent);
140 | 
141 | 		if(dataSelectedEvent) {
142 | 			// Adding dataSelected event in eventHandlersMap
143 | 			setEventHandlersMap(new Map<string, (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null> ([
144 | 				...eventHandlersMap,
145 | 				['dataSelected', (event) => {
146 | 					if (event?.detail.dataPoints.length) {
147 | 						dataSelectedEventDetailsDialog(event.detail);
148 | 					}
149 | 				}],
150 | 			]));
151 | 
152 | 			setMessage('Data Selected event has been successfully set. Click on a data point to see the details.');
153 | 		}
154 | 		else {
155 | 			eventHandlersMap.delete('dataSelected');
156 | 			report?.off('dataSelected');
157 | 			setMessage('Data Selected event has been successfully unset.')
158 | 		}
159 | 	}
160 | 
161 | 	/**
162 |  	 * Toggle theme
163 | 	 *
164 | 	 * @returns Promise<void>
165 | 	 */
166 | 	const toggleTheme = async (): Promise<void> => {
167 | 		if (!report) {
168 | 			setDisplayMessageAndConsole('Report not available');
169 | 			return;
170 | 		}
171 | 
172 | 		// Update the theme by passing in the custom theme.
173 | 		// Some theme properties might not be applied if your report has custom colors set.
174 | 		try {
175 | 			await isThemeApplied ? report.resetTheme() : report.applyTheme({ themeJson: sampleTheme });
176 | 			const themeApplied = !isThemeApplied;
177 | 			setIsThemeApplied(themeApplied);
178 | 			setDisplayMessageAndConsole(themeApplied ? "Theme has been applied." : "Theme has been reset to default.");
179 | 		} catch (error) {
180 | 			setDisplayMessageAndConsole("Failed to apply theme.");
181 | 			console.error(error);
182 | 		}
183 | 	};
184 | 
185 | 	/**
186 | 	 * Toggle zoom
187 | 	 *
188 | 	 * @returns Promise<void>
189 | 	 */
190 | 	const toggleZoom = async (): Promise<void> => {
191 | 		if (!report) {
192 | 			setDisplayMessageAndConsole('Report not available');
193 | 			return;
194 | 		}
195 | 
196 | 		try {
197 | 			const newZoomLevel: number = isZoomedOut ? zoomInLevel : zoomOutLevel;
198 | 			await report.setZoom(newZoomLevel);
199 | 			setIsZoomedOut(!isZoomedOut);
200 | 		}
201 | 		catch (errors) {
202 | 			console.log(errors);
203 | 		}
204 | 	}
205 | 
206 | 	/**
207 | 	 * Refresh report event
208 | 	 *
209 | 	 * @returns Promise<void>
210 | 	 */
211 | 	const refreshReport = async (): Promise<void> => {
212 | 		if (!report) {
213 | 			setDisplayMessageAndConsole('Report not available');
214 | 			return;
215 | 		}
216 | 
217 | 		try {
218 | 			await report.refresh();
219 | 			setDisplayMessageAndConsole('The report has been refreshed successfully.');
220 | 		}
221 | 		catch (error: any) {
222 | 			setDisplayMessageAndConsole(error.detailedMessage);
223 | 		}
224 | 	}
225 | 
226 | 	/**
227 | 	 * Full screen event
228 | 	 */
229 | 	const enableFullScreen = (): void => {
230 | 		if (!report) {
231 | 			setDisplayMessageAndConsole('Report not available');
232 | 			return;
233 | 		}
234 | 
235 | 		report.fullscreen();
236 | 	}
237 | 
238 | 
239 | 	/**
240 |      * Set display message and log it in the console
241 |      */
242 | 	const setDisplayMessageAndConsole = (message: string): void => {
243 | 		setMessage(message);
244 | 		console.log(message);
245 | 	}
246 | 
247 | 	const controlButtons =
248 | 		isEmbedded ?
249 | 		<>
250 | 			<div className = "button-container">
251 | 				<button onClick = { toggleFilterPane }>
252 | 					{ isFilterPaneVisibleAndExpanded ? "Hide filter pane" : "Show filter pane" }</button>
253 | 
254 | 				<button onClick = { toggleTheme }>
255 | 					{ isThemeApplied ? "Reset theme" : "Set theme" }</button>
256 | 
257 | 				<button onClick = { setDataSelectedEvent }>
258 | 					{ isDataSelectedEvent ? "Hide dataSelected event in dialog" : "Show dataSelected event in dialog" }</button>
259 | 
260 | 				<button onClick = { toggleZoom }>
261 | 					{ isZoomedOut ? "Zoom in" : "Zoom out" }</button>
262 | 
263 | 				<button onClick = { refreshReport }>
264 | 					Refresh report</button>
265 | 
266 | 				<button onClick = { enableFullScreen }>
267 | 					Full screen</button>
268 | 			</div>
269 | 
270 | 			<label className = "display-message">
271 | 				{ displayMessage }
272 | 			</label>
273 | 		</>
274 | 		:
275 | 		<>
276 | 			<label className = "display-message position">
277 | 				{ displayMessage }
278 | 			</label>
279 | 
280 | 			<button className = "embed-report" onClick = {() => setIsEmbedConfigDialogOpen(true)}>
281 | 				Embed Report</button>
282 | 		</>;
283 | 
284 | 	const header =
285 | 		<div className = "header">Power BI Embedded React Component Demo</div>;
286 | 
287 | 	const reportComponent =
288 | 		<PowerBIEmbed
289 | 			embedConfig = { sampleReportConfig }
290 | 			eventHandlers = { eventHandlersMap }
291 | 			cssClassName = { reportClass }
292 | 			getEmbeddedComponent = { (embedObject: Embed) => {
293 | 				console.log(`Embedded object of type "${ embedObject.embedtype }" received`);
294 | 				setReport(embedObject as Report);
295 | 			} }
296 | 		/>;
297 | 
298 | 	const footer =
299 | 		<div className = "footer" aria-hidden = {isEmbedConfigDialogOpen || isEventDetailsDialogVisible}>
300 | 			<p>This demo is powered by Power BI Embedded Analytics</p>
301 | 			<label className = "separator-pipe">|</label>
302 | 			<img title = "Power-BI" alt = "PowerBI_Icon" className = "footer-icon" src = "./assets/PowerBI_Icon.png" />
303 | 			<p>Explore our <a href = "https://aka.ms/pbijs/" target = "_blank" rel = "noreferrer noopener">Playground</a></p>
304 | 			<label className = "separator-pipe">|</label>
305 | 			<img title = "GitHub" alt = "GitHub_Icon" className = "footer-icon" src = "./assets/GitHub_Icon.png" />
306 | 			<p>Find the <a href = "https://github.com/microsoft/PowerBI-client-react" target = "_blank" rel = "noreferrer noopener">source code</a></p>
307 | 		</div>;
308 | 
309 | 	return (
310 | 		<div className = "container">
311 | 			{ header }
312 | 
313 | 			<div className = "controls" aria-hidden = {isEmbedConfigDialogOpen || isEventDetailsDialogVisible}>
314 | 				{ controlButtons }
315 | 
316 | 				{ isEmbedded ? reportComponent : null }
317 | 			</div>
318 | 
319 | 			<EmbedConfigDialog
320 | 				isOpen = {isEmbedConfigDialogOpen}
321 | 				onRequestClose = {() => setIsEmbedConfigDialogOpen(false)}
322 | 				onEmbed = {embedReport}
323 | 			/>
324 | 
325 | 			<EventDetailsDialog
326 | 				isOpen = {isEventDetailsDialogVisible}
327 | 				onRequestClose = {() => setIsEventDetailsDialogVisible(false)}
328 | 				dataSelectedEventDetails = {dataSelectedEventDetails}
329 | 			/>
330 | 
331 | 			{ footer }
332 | 		</div>
333 | 	);
334 | }
335 | 
336 | export default DemoApp;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # powerbi-client-react
  2 | Power BI React component. This library enables you to embed Power BI reports, dashboards, dashboard tiles, report visuals, Q&A or paginated reports in your React application, and to create new Power BI reports directly in your application.
  3 | 
  4 | ## Quick Start
  5 | 
  6 | ### Import
  7 | 
  8 | ```jsx
  9 | import { PowerBIEmbed } from 'powerbi-client-react';
 10 | ```
 11 | 
 12 | ### Embed a Power BI report
 13 | ```jsx
 14 | <PowerBIEmbed
 15 | 	embedConfig = {{
 16 | 		type: 'report',   // Supported types: report, dashboard, tile, visual, qna, paginated report and create
 17 | 		id: '<Report Id>',
 18 | 		embedUrl: '<Embed Url>',
 19 | 		accessToken: '<Access Token>',
 20 | 		tokenType: models.TokenType.Embed, // Use models.TokenType.Aad for SaaS embed
 21 | 		settings: {
 22 | 			panes: {
 23 | 				filters: {
 24 | 					expanded: false,
 25 | 					visible: false
 26 | 				}
 27 | 			},
 28 | 			background: models.BackgroundType.Transparent,
 29 | 		}
 30 | 	}}
 31 | 
 32 | 	eventHandlers = {
 33 | 		new Map([
 34 | 			['loaded', function () {console.log('Report loaded');}],
 35 | 			['rendered', function () {console.log('Report rendered');}],
 36 | 			['error', function (event) {console.log(event.detail);}],
 37 | 			['visualClicked', () => console.log('visual clicked')],
 38 | 			['pageChanged', (event) => console.log(event)],
 39 | 		])
 40 | 	}
 41 | 
 42 | 	cssClassName = { "reportClass" }
 43 | 
 44 | 	getEmbeddedComponent = { (embeddedReport) => {
 45 | 		this.report = embeddedReport as Report;
 46 | 	}}
 47 | />
 48 | ```
 49 | 
 50 | ### How to [bootstrap a PowerBI report](https://learn.microsoft.com/javascript/api/overview/powerbi/bootstrap-better-performance):
 51 | ```jsx
 52 | <PowerBIEmbed
 53 | 	embedConfig = {{
 54 | 		type: 'report',   // Supported types: report, dashboard, tile, visual, qna and paginated report
 55 | 		id: undefined,
 56 | 		embedUrl: undefined,
 57 | 		accessToken: undefined,    // Keep as empty string, null or undefined
 58 | 		tokenType: models.TokenType.Embed
 59 | 	}}
 60 | />
 61 | ```
 62 | __Note__: To embed the report after bootstrap, update the props (with at least accessToken).
 63 | 
 64 | ### Demo
 65 | 
 66 | This demo includes a React application that demonstrates the complete flow of embedding a sample report using the PowerBIEmbed component.
 67 | 
 68 | The demo shows how to bootstrap the report, embed it, and update it. Additionally, the demo showcases the usage of the powerbi report authoring library by enabling the user to change the type of visual from a report using the "Change visual type" button.
 69 | 
 70 | The demo also sets a "DataSelected" event, which allows the user to interact with the embedded report and retrieve information about the selected data.
 71 | 
 72 | To run the demo on localhost, run the following commands:
 73 | 
 74 | ```
 75 | npm run demo
 76 | ```
 77 | 
 78 | Redirect to http://localhost:8080/ to view in the browser.
 79 | 
 80 | ### Usage
 81 | |Use case|Details|
 82 | |:------|:------|
 83 | |Embed Power BI|To embed your powerbi artifact, pass the component with atleast _type_, _embedUrl_ and _accessToken_ in _embedConfig_ prop.|
 84 | |Get reference to the embedded object|Pass a callback method which accepts the embedded object as parameter to the _getEmbeddedComponent_ of props.<br/>Refer to the _getEmbeddedComponent_ prop in [Quick Start](#quick-start).|
 85 | |Apply style class|Pass the name(s) of style classes to be added to the embed container div to the _cssClassName_ props.|
 86 | |Set event handlers|Pass a map object of event name (string) and event handler (function) to the _eventHandlers_ prop. <br/>__Key__: Event name <br/>__Value__: Event handler method to be triggered<br/>Event handler method takes 2 optional params:<br/>First parameter: Event<br/>Second parameter: Reference to the embedded entity|
 87 | |Reset event handlers|To reset event handler for an event, set the event handler's value as `null` in the _eventHandlers_ map of props.|
 88 | |Update settings (Report type only)|To update the report settings, update the _embedConfig.settings_ property of props.<br/>Refer to the _embedConfig.settings_ prop in [Quick Start](#quick-start).<br/>__Note__: Update the settings only by updating embedConfig prop|
 89 | |Bootstrap Power BI|To [bootstrap your powerbi entity](https://learn.microsoft.com/javascript/api/overview/powerbi/bootstrap-better-performance), pass the props to the component without _accessToken_ in _embedConfig_.<br/>__Note__: _embedConfig_ of props should at least contain __type__ of the powerbi entity being embedded. <br/>Available types: "report", "dashboard", "tile", "visual", "qna" and "paginated report".<br/>Refer to _How to bootstrap a report_ section in [Quick Start](#quick-start).|
 90 | |Using with PowerBI Report Authoring|1. Install [powerbi-report-authoring](https://www.npmjs.com/package/powerbi-report-authoring) as npm dependency.<br>2. Use the report authoring APIs using the embedded report's instance|
 91 | |Phased embedding (Report type only)|Set phasedEmbedding prop's value as `true` <br/> Refer to [Phased embedding docs](https://learn.microsoft.com/javascript/api/overview/powerbi/phased-embedding).|
 92 | |Apply Filters (Report type only)|1. To apply updated filters, update filters in _embedConfig_ props.<br/>2. To remove the applied filters, update the _embedConfig_ prop with the filters removed or set as undefined/null.|
 93 | |Set Page (Report type only)|To set a page when embedding a report or on an embedded report, provide pageName field in the _embedConfig_.|
 94 | |Create report|To create a new report, pass the component with at least _type_, _embedUrl_ and _datasetId_ in _embedConfig_ prop.|
 95 | 
 96 | __Note__: To use this library in IE browser, use [react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill) to add support for the incompatible features. Refer to the imports of [demo/index.tsx](https://github.com/microsoft/powerbi-client-react/blob/master/demo/index.tsx).
 97 | 
 98 | 
 99 | ### Props interface
100 | 
101 | ```ts
102 | interface EmbedProps {
103 | 
104 | 	// Configuration for embedding the PowerBI entity (required)
105 | 	embedConfig:
106 | 		| IReportEmbedConfiguration
107 | 		| IDashboardEmbedConfiguration
108 | 		| ITileEmbedConfiguration
109 | 		| IQnaEmbedConfiguration
110 | 		| IVisualEmbedConfiguration
111 | 		| IPaginatedReportLoadConfiguration
112 | 		| IReportCreateConfiguration
113 | 
114 | 	// Callback method to get the embedded PowerBI entity object (optional)
115 | 	getEmbeddedComponent?: { (embeddedComponent: Embed): void }
116 | 
117 | 	// Map of pair of event name and its handler method to be triggered on the event (optional)
118 | 	eventHandlers?: Map<string, EventHandler>
119 | 
120 | 	// CSS class to be set on the embedding container (optional)
121 | 	cssClassName?: string
122 | 
123 | 	// Phased embedding flag (optional)
124 | 	phasedEmbedding?: boolean;
125 | 
126 | 	// Provide instance of PowerBI service (optional)
127 | 	service?: service.Service
128 | }
129 | ```
130 | 
131 | 
132 | ## Supported Events
133 | 
134 | 
135 | ### Events supported by various Power BI entities:
136 | 
137 | |Entity|Event|
138 | |:----- |:----- |
139 | | Report | "buttonClicked", "commandTriggered", "dataHyperlinkClicked", "dataSelected", "loaded", "pageChanged", "rendered", "saveAsTriggered", "saved", "selectionChanged", "visualClicked", "visualRendered" |
140 | | Dashboard | "loaded", "tileClicked" |
141 | | Tile | "tileLoaded", "tileClicked" |
142 | | QnA | "visualRendered" |
143 | 
144 | ### Event Handler to be used with Map
145 | ```ts
146 | type EventHandler = (event?: service.ICustomEvent<any>, embeddedEntity?: Embed) => void | null;
147 | ```
148 | 
149 | 
150 | ## Using supported SDK methods for Power BI artifacts
151 | 
152 | ### Import
153 | *Import the 'PowerBIEmbed' inside your targeted component file:*
154 | ```ts
155 | import { PowerBIEmbed } from 'powerbi-client-react';
156 | ```
157 | 
158 | ### Use
159 | You can use ```report``` state to call supported SDK APIs.
160 | 
161 | Steps:
162 |    1. Create one state for storing the report object, for example, ```const [report, setReport] = useState<Report>();```.
163 | 
164 |    2. Use the ```setReport``` method inside the component to set the report object.
165 |      <br />
166 | 
167 | ```ts
168 | <PowerBIEmbed
169 | 	embedConfig = { sampleReportConfig }
170 | 	eventHandlers = { eventHandlersMap }
171 | 	cssClassName = { reportClass }
172 | 	getEmbeddedComponent = { (embedObject: Embed) => {
173 | 		setReport(embedObject as Report);
174 | 	} }
175 | />
176 | ```
177 | 
178 |    3. Once the report object is set, it can be used to call SDK methods such as ```getVisuals```, ```getBookmarks```, etc.
179 |    <br />
180 | 
181 | ```ts
182 | async getReportPages(): Page[] {
183 | 	// this.report is a class variable, initialized in step 3
184 | 	const activePage: Page | undefined = await report.getActivePage();
185 | 	console.log(pages);
186 | }
187 | ```
188 | 
189 | 
190 | ## Note
191 | 
192 | The library supports React applications having version **>= 18**.
193 | 
194 | ## Dependencies
195 | 
196 | [powerbi-client](https://www.npmjs.com/package/powerbi-client)
197 | 
198 | ## Peer dependencies
199 | 
200 | [react](https://www.npmjs.com/package/react)
201 | 
202 | ## Trademarks
203 | 
204 | This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow [Microsoft’s Trademark & Brand Guidelines](https://www.microsoft.com/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.
205 | 
206 | ## Contributing
207 | 
208 | This project welcomes contributions and suggestions.  Most contributions require you to agree to a
209 | Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
210 | the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
211 | 
212 | When you submit a pull request, a CLA bot will automatically determine whether you need to provide
213 | a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
214 | provided by the bot. You will only need to do this once across all repos using our CLA.
215 | 
216 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments
217 | 
218 | ## Data Collection.
219 | 
220 | The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. You may turn off the telemetry as described in the repository. There are also some features in the software that may enable you and Microsoft to collect data from users of your applications.
221 | 
222 | If you use these features, you must comply with applicable law, including providing appropriate notices to users of your applications together with a copy of Microsoft’s privacy statement.
223 | Our privacy statement is located at [Microsoft Privacy Statement](https://privacy.microsoft.com/privacystatement). You can learn more about data collection and use in the help documentation and our privacy statement. Your use of the software operates as your consent to these practices.
224 | 
225 | ## Support
226 | 
227 | - **Feature Requests:** Submit your ideas and suggestions to the [Fabric Ideas Portal](https://ideas.fabric.microsoft.com/), where you can also vote on ideas from other developers.
228 | - **Bug Reports and Technical Assistance:** Visit the [Fabric Developer Community Forum](https://community.fabric.microsoft.com/t5/Developer/bd-p/Developer). Our team and community experts are ready to assist you.
229 | - **Additional Support:** Contact your account manager or reach out to the [Fabric Support Team](https://support.fabric.microsoft.com/en-us/support/).
230 | 


--------------------------------------------------------------------------------
/React/powerbi-client-react/test/PowerBIEmbed.spec.tsx:
--------------------------------------------------------------------------------
  1 | // Copyright (c) Microsoft Corporation.
  2 | // Licensed under the MIT License.
  3 | 
  4 | import React, { isValidElement } from 'react';
  5 | import { createRoot, Root } from 'react-dom/client';
  6 | import { Report, Dashboard, service, factories, Embed } from 'powerbi-client';
  7 | import { act } from "@testing-library/react";
  8 | 
  9 | import { mockPowerBIService, mockedMethods } from "./mockService";
 10 | import { PowerBIEmbed, EventHandler } from '../src/PowerBIEmbed';
 11 | import { stringifyMap } from '../src/utils';
 12 | 
 13 | // Use this function to render powerbi entity with only config
 14 | function renderReport(config, root: Root) {
 15 | 	let testReport!: Report;
 16 | 	act(() => {
 17 | 		root.render(
 18 | 			<PowerBIEmbed
 19 | 				embedConfig={config}
 20 | 				getEmbeddedComponent={(callbackReport: Embed) => {
 21 | 					testReport = callbackReport as Report;
 22 | 				}}
 23 | 			/>
 24 | 		)
 25 | 	});
 26 | 	return testReport;
 27 | }
 28 | 
 29 | describe('tests of PowerBIEmbed', function () {
 30 | 
 31 | 	let container: HTMLDivElement;
 32 | 	let root: Root;
 33 | 
 34 | 	beforeEach(function () {
 35 | 		container = document.createElement('div');
 36 | 		document.body.appendChild(container);
 37 | 		root = createRoot(container);
 38 | 
 39 | 		// Reset all methods in PowerBI Service spy object
 40 | 		mockedMethods.forEach(mockedMethod => {
 41 | 			mockPowerBIService[mockedMethod].calls.reset();
 42 | 		});
 43 | 	});
 44 | 
 45 | 	afterEach(function () {
 46 | 		if (container) {
 47 | 			document.body.removeChild(container);
 48 | 			container = document.createElement('div'); // Reset to an empty div;
 49 | 		}
 50 | 	});
 51 | 
 52 | 	describe('basic tests', function () {
 53 | 
 54 | 		it('is a react component', () => {
 55 | 			const component = <PowerBIEmbed embedConfig={{ type: 'report' }} />
 56 | 
 57 | 			// Assert
 58 | 			expect(isValidElement(component)).toBe(true);
 59 | 		});
 60 | 
 61 | 		it('renders exactly one div', () => {
 62 | 
 63 | 			// Act
 64 | 			act(() => {
 65 | 				root.render(<PowerBIEmbed embedConfig={{ type: 'report' }} />);
 66 | 			});
 67 | 
 68 | 			const divCount = container.querySelectorAll('div').length;
 69 | 
 70 | 			// Assert
 71 | 			expect(divCount).toBe(1);
 72 | 		});
 73 | 
 74 | 		it('renders exactly one iframe', () => {
 75 | 
 76 | 			// Act
 77 | 			act(() => {
 78 | 				root.render(<PowerBIEmbed embedConfig={{ type: 'report' }} />);
 79 | 			});
 80 | 
 81 | 			const divCount = container?.querySelectorAll('iframe').length;
 82 | 
 83 | 			// Assert
 84 | 			expect(divCount).toBe(1);
 85 | 		});
 86 | 
 87 | 		it('sets the css classes', () => {
 88 | 
 89 | 			// Arrange
 90 | 			const inputCssClass = 'test-class another-test-class';
 91 | 
 92 | 			// Act
 93 | 			act(() => {
 94 | 				root.render(
 95 | 					<PowerBIEmbed
 96 | 						embedConfig={{ type: 'report' }}
 97 | 						cssClassName={inputCssClass}
 98 | 					/>
 99 | 				);
100 | 			});
101 | 
102 | 			const divClass = container?.querySelectorAll('div')[0].className;
103 | 
104 | 			// Assert
105 | 			expect(divClass).toBe(inputCssClass);
106 | 		});
107 | 
108 | 		it('gets the embedded report object', () => {
109 | 
110 | 			// Act
111 | 			const testReport = renderReport({ type: 'report' }, root);
112 | 
113 | 			// Assert
114 | 			expect(testReport).toBeDefined();
115 | 			expect(testReport instanceof Report).toBe(true);
116 | 		});
117 | 
118 | 		it('gets the embedded dashboard object', () => {
119 | 
120 | 			// Act
121 | 			const testReport = renderReport({ type: 'dashboard' }, root);
122 | 
123 | 			// Assert
124 | 			expect(testReport).toBeDefined();
125 | 			expect(testReport instanceof Dashboard).toBe(true);
126 | 		});
127 | 	});
128 | 
129 | 	it("does not re-embed again when embedConfig remains unchanged", () => {
130 | 		// Arrange
131 | 		const config = {
132 | 			type: 'report',
133 | 			id: 'fakeId',
134 | 			embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
135 | 			accessToken: 'fakeToken'
136 | 		};
137 | 
138 | 		// New accessToken
139 | 		const newConfig = {
140 | 			type: 'report',
141 | 			id: 'fakeId',
142 | 			embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
143 | 			accessToken: 'fakeToken'
144 | 		};
145 | 
146 | 		// Act
147 | 		act(() => {
148 | 			root.render(
149 | 				<PowerBIEmbed
150 | 					embedConfig={config}
151 | 					service={mockPowerBIService}
152 | 				/>
153 | 			);
154 | 		});
155 | 
156 | 		//Assert
157 | 		expect(mockPowerBIService.embed).toHaveBeenCalled();
158 | 		mockPowerBIService.embed.calls.reset();
159 | 
160 | 		// Act
161 | 		act(() => {
162 | 			root.render(
163 | 				<PowerBIEmbed
164 | 					embedConfig={newConfig}
165 | 					service={mockPowerBIService}
166 | 				/>
167 | 			);
168 | 		});
169 | 
170 | 		// Assert
171 | 		expect(mockPowerBIService.embed).not.toHaveBeenCalled();
172 | 	});
173 | 
174 | 	describe('test powerbi service interaction', () => {
175 | 
176 | 		it('embeds report when accessToken provided', () => {
177 | 
178 | 			// Arrange
179 | 			const config = {
180 | 				type: 'report',
181 | 				id: 'fakeId',
182 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
183 | 				accessToken: 'fakeToken'
184 | 			};
185 | 
186 | 			// Act
187 | 			act(() => {
188 | 				root.render(
189 | 					<PowerBIEmbed
190 | 						embedConfig={config}
191 | 						service={mockPowerBIService}
192 | 					/>
193 | 				);
194 | 			});
195 | 
196 | 			// Assert
197 | 			expect(mockPowerBIService.bootstrap).toHaveBeenCalledTimes(0);
198 | 			expect(mockPowerBIService.embed).toHaveBeenCalledTimes(1);
199 | 		});
200 | 
201 | 		it('bootstraps report when no accessToken provided', () => {
202 | 
203 | 			// Arrange
204 | 			const config = {
205 | 				type: 'report',
206 | 				id: 'fakeId',
207 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl'
208 | 			};
209 | 
210 | 			// Act
211 | 			act(() => {
212 | 				root.render(
213 | 					<PowerBIEmbed
214 | 						embedConfig={config}
215 | 						service={mockPowerBIService}
216 | 					/>
217 | 				);
218 | 			});
219 | 
220 | 			// Assert
221 | 			expect(mockPowerBIService.embed).toHaveBeenCalledTimes(0);
222 | 			expect(mockPowerBIService.bootstrap).toHaveBeenCalledTimes(1);
223 | 		});
224 | 
225 | 		it('first bootstraps, then embeds when accessToken is available', () => {
226 | 
227 | 			// Arrange
228 | 			const config = {
229 | 				type: 'report',
230 | 				id: 'fakeId',
231 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
232 | 				accessToken: undefined
233 | 			};
234 | 			const newConfig = {
235 | 				type: 'report',
236 | 				id: 'fakeId',
237 | 				embedUrl: 'https://app.powerbi.com/newFakeEmbedUrl',
238 | 				accessToken: 'fakeToken'
239 | 			};
240 | 
241 | 			// Act
242 | 			// Without accessToken (bootstrap)
243 | 			act(() => {
244 | 				root.render(
245 | 					<PowerBIEmbed
246 | 						embedConfig={config}
247 | 						service={mockPowerBIService}
248 | 					/>
249 | 				);
250 | 			});
251 | 
252 | 			// Assert
253 | 			expect(mockPowerBIService.embed).toHaveBeenCalledTimes(0);
254 | 			expect(mockPowerBIService.bootstrap).toHaveBeenCalledTimes(1);
255 | 
256 | 			// Reset for next Act
257 | 			mockPowerBIService.embed.calls.reset();
258 | 			mockPowerBIService.bootstrap.calls.reset();
259 | 
260 | 			// Act
261 | 			// With accessToken (embed)
262 | 			act(() => {
263 | 				root.render(
264 | 					<PowerBIEmbed
265 | 						embedConfig={newConfig}
266 | 						service={mockPowerBIService}
267 | 					/>
268 | 				);
269 | 			});
270 | 
271 | 			// Assert
272 | 			expect(mockPowerBIService.bootstrap).toHaveBeenCalledTimes(0);
273 | 			expect(mockPowerBIService.embed).toHaveBeenCalledTimes(1);
274 | 		});
275 | 
276 | 		it('does not embed again when accessToken and embedUrl are same', () => {
277 | 			const config = {
278 | 				type: 'report',
279 | 				id: 'fakeId',
280 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
281 | 				accessToken: 'fakeToken',
282 | 			};
283 | 			const newConfig = {
284 | 				type: 'report',
285 | 				id: 'fakeId',
286 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
287 | 				accessToken: 'fakeToken'
288 | 			};
289 | 
290 | 			// Act
291 | 			act(() => {
292 | 				root.render(
293 | 					<PowerBIEmbed
294 | 						embedConfig={config}
295 | 						service={mockPowerBIService}
296 | 					/>
297 | 				);
298 | 			});
299 | 
300 | 			// Assert
301 | 			expect(mockPowerBIService.embed).toHaveBeenCalledTimes(1);
302 | 			mockPowerBIService.embed.calls.reset();
303 | 
304 | 			// Act
305 | 			// With accessToken (embed)
306 | 			act(() => {
307 | 				root.render(
308 | 					<PowerBIEmbed
309 | 						embedConfig={newConfig}
310 | 						service={mockPowerBIService}
311 | 					/>
312 | 				);
313 | 			});
314 | 
315 | 			// Assert
316 | 			expect(mockPowerBIService.embed).not.toHaveBeenCalled();
317 | 		});
318 | 
319 | 		it('powerbi.reset called when component unmounts', () => {
320 | 			// Arrange
321 | 			const config = {
322 | 				type: 'report',
323 | 				id: 'fakeId',
324 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
325 | 				accessToken: 'fakeToken'
326 | 			};
327 | 
328 | 			act(() => {
329 | 				root.render(
330 | 					<PowerBIEmbed
331 | 						embedConfig={config}
332 | 						service={mockPowerBIService}
333 | 					/>
334 | 				);
335 | 			});
336 | 
337 | 			// Act
338 | 			act(() => {
339 | 				root.unmount();
340 | 			});
341 | 
342 | 			// Assert
343 | 			expect(mockPowerBIService.reset).toHaveBeenCalled();
344 | 		});
345 | 
346 | 		it("embeds when report's embedUrl is updated in new props", () => {
347 | 
348 | 			// Arrange
349 | 			const config = {
350 | 				type: 'report',
351 | 				id: 'fakeId',
352 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
353 | 				accessToken: 'fakeToken'
354 | 			};
355 | 
356 | 			act(() => {
357 | 				root.render(
358 | 					<PowerBIEmbed
359 | 						embedConfig={config}
360 | 						service={mockPowerBIService}
361 | 					/>
362 | 				);
363 | 			});
364 | 
365 | 			// Embed URL of different report
366 | 			config.embedUrl = 'https://app.powerbi.com/newFakeEmbedUrl';
367 | 
368 | 			// Act
369 | 			act(() => {
370 | 				root.render(
371 | 					<PowerBIEmbed
372 | 						embedConfig={config}
373 | 						service={mockPowerBIService}
374 | 					/>
375 | 				);
376 | 			});
377 | 
378 | 			// Assert
379 | 			expect(mockPowerBIService.embed).toHaveBeenCalled();
380 | 		});
381 | 
382 | 		it('loads the report when phasedEmbedding props is true', () => {
383 | 
384 | 			// Arrange
385 | 			const config = {
386 | 				type: 'report',
387 | 				id: 'fakeId',
388 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
389 | 				accessToken: 'fakeToken'
390 | 			};
391 | 
392 | 			// Act
393 | 			act(() => {
394 | 				root.render(
395 | 					<PowerBIEmbed
396 | 						embedConfig={config}
397 | 						service={mockPowerBIService}
398 | 						phasedEmbedding={true}
399 | 					/>
400 | 				);
401 | 			});
402 | 
403 | 			// Assert
404 | 			// service.load() is invoked once
405 | 			expect(mockPowerBIService.load).toHaveBeenCalledTimes(1);
406 | 
407 | 			// service.embed() is not invoked
408 | 			expect(mockPowerBIService.embed).not.toHaveBeenCalled();
409 | 		});
410 | 
411 | 		it('embeds the powerbi entity when phasedEmbedding props is true but embed type is not report', () => {
412 | 
413 | 			// Arrange
414 | 			const config = {
415 | 				type: 'dashboard',
416 | 				id: 'fakeId',
417 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
418 | 				accessToken: 'fakeToken'
419 | 			};
420 | 
421 | 			// Act
422 | 			act(() => {
423 | 				root.render(
424 | 					<PowerBIEmbed
425 | 						embedConfig={config}
426 | 						service={mockPowerBIService}
427 | 						phasedEmbedding={true}
428 | 					/>
429 | 				);
430 | 			});
431 | 
432 | 			// Assert
433 | 			// service.load() is not invoked
434 | 			expect(mockPowerBIService.load).not.toHaveBeenCalled();
435 | 
436 | 			// service.embed() is invoked once
437 | 			expect(mockPowerBIService.embed).toHaveBeenCalledTimes(1);
438 | 		});
439 | 
440 | 		it('embeds the report when phasedEmbedding props is undefined', () => {
441 | 
442 | 			// Arrange
443 | 			const config = {
444 | 				type: 'report',
445 | 				id: 'fakeId',
446 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
447 | 				accessToken: 'fakeToken'
448 | 			};
449 | 
450 | 			// Act
451 | 			act(() => {
452 | 				root.render(
453 | 					<PowerBIEmbed
454 | 						embedConfig={config}
455 | 						service={mockPowerBIService}
456 | 						phasedEmbedding={undefined}
457 | 					/>
458 | 				);
459 | 			});
460 | 
461 | 			// Assert
462 | 			// service.load() is not invoked
463 | 			expect(mockPowerBIService.load).not.toHaveBeenCalled();
464 | 
465 | 			// service.embed() is invoked once
466 | 			expect(mockPowerBIService.embed).toHaveBeenCalledTimes(1);
467 | 		});
468 | 
469 | 		it('embeds the report when phasedEmbedding props is not provided', () => {
470 | 
471 | 			// Arrange
472 | 			const config = {
473 | 				type: 'report',
474 | 				id: 'fakeId',
475 | 				embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
476 | 				accessToken: 'fakeToken'
477 | 			};
478 | 
479 | 			// Act
480 | 			act(() => {
481 | 				root.render(
482 | 					<PowerBIEmbed
483 | 						embedConfig={config}
484 | 						service={mockPowerBIService}
485 | 					/>
486 | 				);
487 | 			});
488 | 
489 | 			// Assert
490 | 			// service.load() is not invoked
491 | 			expect(mockPowerBIService.load).not.toHaveBeenCalled();
492 | 
493 | 			// service.embed() is invoked once
494 | 			expect(mockPowerBIService.embed).toHaveBeenCalledTimes(1);
495 | 		});
496 | 	});
497 | 
498 | 	describe('tests for getEmbeddedComponent callback', () => {
499 | 		it('invokes getEmbeddedComponent on embed', () => {
500 | 
501 | 			// Arrange
502 | 			const mockgetEmbeddedComponent = jasmine.createSpy('getEmbeddedComponent');
503 | 
504 | 			// Act
505 | 			act(() => {
506 | 				root.render(
507 | 					<PowerBIEmbed
508 | 						embedConfig={{
509 | 							type: 'report',
510 | 							id: 'fakeId',
511 | 							embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
512 | 							accessToken: 'fakeToken'
513 | 						}}
514 | 						getEmbeddedComponent={mockgetEmbeddedComponent}
515 | 					/>
516 | 				);
517 | 			});
518 | 
519 | 			// Assert
520 | 			expect(mockgetEmbeddedComponent).toHaveBeenCalledTimes(1);
521 | 		});
522 | 
523 | 		it('invokes getEmbeddedComponent once on embed and again when embedConfig is updated', () => {
524 | 
525 | 			// Arrange
526 | 			const mockgetEmbeddedComponent = jasmine.createSpy('getEmbeddedComponent');
527 | 			act(() => {
528 | 				root.render(
529 | 					<PowerBIEmbed
530 | 						embedConfig={{
531 | 							type: 'report',
532 | 							id: 'fakeId',
533 | 							embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
534 | 							accessToken: 'fakeToken'
535 | 						}}
536 | 						getEmbeddedComponent={mockgetEmbeddedComponent}
537 | 					/>
538 | 				);
539 | 			});
540 | 
541 | 			// Act
542 | 			// Update settings
543 | 			act(() => {
544 | 				root.render(
545 | 					<PowerBIEmbed
546 | 						embedConfig={{
547 | 							type: 'report',
548 | 							id: 'fakeId',
549 | 							embedUrl: 'https://app.powerbi.com/fakeEmbedUrl',
550 | 							accessToken: 'fakeToken',
551 | 							settings: {
552 | 								panes: {
553 | 									filters: {
554 | 										visible: false
555 | 									}
556 | 								}
557 | 							}
558 | 						}}
559 | 						getEmbeddedComponent={mockgetEmbeddedComponent}
560 | 					/>
561 | 				);
562 | 			});
563 | 
564 | 			// Assert
565 | 			expect(mockgetEmbeddedComponent).toHaveBeenCalledTimes(2);
566 | 		});
567 | 	});
568 | 
569 | 	describe('tests for setting event handlers', () => {
570 | 		it('test event handlers are setting when remounting twice', () => {
571 | 			// Arrange
572 | 			const eventHandlers = new Map([
573 | 				['loaded', function () { }],
574 | 				['rendered', function () { }],
575 | 				['error', function () { }]
576 | 			]);
577 | 
578 | 			const powerbi = new service.Service(
579 | 				factories.hpmFactory,
580 | 				factories.wpmpFactory,
581 | 				factories.routerFactory);
582 | 			const embed = powerbi.bootstrap(container, { type: 'report' });
583 | 
584 | 			// Act
585 | 			const powerbiembed = new PowerBIEmbed({
586 | 				embedConfig: { type: 'report' },
587 | 				eventHandlers: eventHandlers
588 | 			});
589 | 
590 | 			// Ignoring next line as setEventHandlers is a private method
591 | 			// @ts-ignore
592 | 			powerbiembed.setEventHandlers(embed, eventHandlers);
593 | 			powerbiembed.componentWillUnmount();
594 | 			expect((powerbiembed as any).prevEventHandlerMapString).toBe('');
595 | 			powerbiembed.componentDidMount();
596 | 			// @ts-ignore
597 | 			powerbiembed.setEventHandlers(embed, eventHandlers);
598 | 
599 | 			// Assert
600 | 			expect((powerbiembed as any).prevEventHandlerMapString).toBe(stringifyMap(eventHandlers));
601 | 		});
602 | 
603 | 		it('clears and sets the event handlers', () => {
604 | 
605 | 			// Arrange
606 | 			const eventHandlers = new Map([
607 | 				['loaded', function () { }],
608 | 				['rendered', function () { }],
609 | 				['error', function () { }]
610 | 			]);
611 | 
612 | 			// Initialise testReport
613 | 			const testReport = renderReport({ type: 'report' }, root);
614 | 
615 | 			spyOn(testReport, 'off');
616 | 			spyOn(testReport, 'on');
617 | 
618 | 			// Act
619 | 			act(() => {
620 | 				root.render(
621 | 					<PowerBIEmbed
622 | 						embedConfig={{ type: 'report' }}
623 | 						eventHandlers={eventHandlers}
624 | 					/>
625 | 				);
626 | 			});
627 | 
628 | 			// Assert
629 | 			expect(testReport.off).toHaveBeenCalledTimes(eventHandlers.size);
630 | 			expect(testReport.on).toHaveBeenCalledTimes(eventHandlers.size);
631 | 		});
632 | 
633 | 		it('clears the already set event handlers in case of null provided for handler', () => {
634 | 
635 | 			// Arrange
636 | 			const eventHandlers = new Map([
637 | 				['loaded', function () { }],
638 | 				['rendered', function () { }],
639 | 				['error', function () { }]
640 | 			]);
641 | 			const newEventHandlers = new Map<string, EventHandler>([
642 | 				['loaded', null],
643 | 				['rendered', null],
644 | 				['error', function () { }]
645 | 			]);
646 | 
647 | 			// Initialise testReport
648 | 			const testReport = renderReport({ type: 'report' }, root);
649 | 
650 | 			spyOn(testReport, 'off');
651 | 			spyOn(testReport, 'on');
652 | 
653 | 			// Act
654 | 			act(() => {
655 | 				root.render(
656 | 					<PowerBIEmbed
657 | 						embedConfig={{ type: 'report' }}
658 | 						eventHandlers={newEventHandlers}
659 | 					/>
660 | 				);
661 | 			});
662 | 
663 | 			// Assert
664 | 			expect(testReport.off).toHaveBeenCalledTimes(eventHandlers.size);
665 | 			// Two events are turned off in new eventhandlers
666 | 			expect(testReport.on).toHaveBeenCalledTimes(eventHandlers.size - 2);
667 | 		});
668 | 
669 | 		it('does not console error for valid events for report', () => {
670 | 			const eventHandlers = new Map([
671 | 				['loaded', function () { }],
672 | 				['saved', function () { }],
673 | 				['rendered', function () { }],
674 | 				['saveAsTriggered', function () { }],
675 | 				['dataSelected', function () { }],
676 | 				['buttonClicked', function () { }],
677 | 				['filtersApplied', function () { }],
678 | 				['pageChanged', function () { }],
679 | 				['commandTriggered', function () { }],
680 | 				['swipeStart', function () { }],
681 | 				['swipeEnd', function () { }],
682 | 				['bookmarkApplied', function () { }],
683 | 				['dataHyperlinkClicked', function () { }],
684 | 				['error', function () { }]
685 | 			]);
686 | 
687 | 			spyOn(console, 'error');
688 | 
689 | 			// Act
690 | 			act(() => {
691 | 				root.render(
692 | 					<PowerBIEmbed
693 | 						embedConfig={{ type: 'report' }}
694 | 						eventHandlers={eventHandlers}
695 | 					/>
696 | 				);
697 | 			});
698 | 
699 | 			// Assert
700 | 			expect(console.error).not.toHaveBeenCalled();
701 | 		});
702 | 
703 | 		it('consoles error for invalid events', () => {
704 | 			// Arrange
705 | 			const invalidEvent1 = 'invalidEvent1';
706 | 			const invalidEvent2 = 'invalidEvent2';
707 | 			const errorMessage = `Following events are invalid: ${invalidEvent1},${invalidEvent2}`;
708 | 
709 | 			const eventHandlers = new Map([
710 | 				[invalidEvent1, function () { }],
711 | 				['rendered', function () { }],
712 | 				['error', function () { }],
713 | 				[invalidEvent2, function () { }],
714 | 			]);
715 | 
716 | 			const powerbi = new service.Service(
717 | 				factories.hpmFactory,
718 | 				factories.wpmpFactory,
719 | 				factories.routerFactory);
720 | 			const embed = powerbi.bootstrap(container, { type: 'tile' });
721 | 
722 | 			spyOn(console, 'error');
723 | 
724 | 			// Act
725 | 			const powerbiembed = new PowerBIEmbed({
726 | 				embedConfig: { type: 'tile' },
727 | 				eventHandlers: eventHandlers
728 | 			});
729 | 
730 | 			// Ignoring next line as setEventHandlers is a private method
731 | 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
732 | 			// @ts-ignore
733 | 			powerbiembed.setEventHandlers(embed, eventHandlers);
734 | 
735 | 			// Assert
736 | 			expect(console.error).toHaveBeenCalledWith(errorMessage);
737 | 		});
738 | 
739 | 		it('does not set the same eventhandler map again', () => {
740 | 
741 | 			// Arrange
742 | 			let testReport!: Report;
743 | 			const eventHandlers = new Map([
744 | 				['loaded', function () { }],
745 | 				['rendered', function () { }],
746 | 				['error', function () { }]
747 | 			]);
748 | 			const newSameEventHandlers = new Map([
749 | 				['loaded', function () { }],
750 | 				['rendered', function () { }],
751 | 				['error', function () { }]
752 | 			]);
753 | 
754 | 			// Initialise testReport
755 | 			act(() => {
756 | 				root.render(
757 | 					<PowerBIEmbed
758 | 						embedConfig={{ type: 'report' }}
759 | 						getEmbeddedComponent={(callbackReport: Embed) => {
760 | 							testReport = callbackReport as Report;
761 | 						}}
762 | 						eventHandlers={eventHandlers}
763 | 					/>
764 | 				);
765 | 			});
766 | 
767 | 			spyOn(testReport, 'off');
768 | 			spyOn(testReport, 'on');
769 | 
770 | 			// Act
771 | 			act(() => {
772 | 				root.render(
773 | 					<PowerBIEmbed
774 | 						embedConfig={{ type: 'report' }}
775 | 						eventHandlers={newSameEventHandlers}
776 | 					/>
777 | 				);
778 | 			});
779 | 
780 | 			// Assert
781 | 			expect(testReport.off).not.toHaveBeenCalled();
782 | 			expect(testReport.on).not.toHaveBeenCalled();
783 | 		});
784 | 	});
785 | });


--------------------------------------------------------------------------------