Merge pull request #397 from akshay5995/feature/bootstrap

Add useBootstrap feature

Author: akshay5995

README.md

@@ -12,16 +12,7 @@ This repository is maintained by:
 - [Satya J (satya64)](https://github.com/satya64)
 - [Muthu (muthu1712)](https://github.com/muthu1712)
 
-Existing users of the package please refer to Change Log [here](https://github.com/akshay5995/powerbi-report-component/wiki/Changelog) and please refer [here](https://github.com/akshay5995/powerbi-report-component/wiki/README-file-for--=-2.0.0) for the README for versions <=2.0.0.
-
-### [New Embed Type] ReportVisual (from >=2.4.0)
-
-### [New] Typescript support from >=2.2.2
-
-### [Change Log] >=2.3.0
-- **(Breaking change)** `reportMode` prop and config will accept `View`, `Edit` and `Create`. (previously it was `edit`/`view`/`create`)(case sensitive)
-- **(Enhancement)**  Now you can use `Edit` mode in `useReport` hook.
-
+Existing users of the package please refer to Change Log [here](https://github.com/akshay5995/powerbi-report-component/wiki/Changelog) and please refer [here](https://github.com/akshay5995/powerbi-report-component/wiki/README-file-for--=-2.0.0) for the README for versions <=2.0.0
 
 ## Installation
 
@@ -180,7 +171,7 @@ import { ReportVisual } from 'powerbi-report-component';
 
 ## Like hooks ? You'll love this :)
 
-### useReport (available from v2.1.1)
+### useReport
 
 Provides a more fine grained approach for embedding. (where you're in control)
 
@@ -190,7 +181,7 @@ import { useReport } from 'powerbi-report-component';
 
 const MyReport = ({ accessToken, embedUrl, embedId }) => {
   const reportRef = useRef(null);
-  const [report, setEmbed] = useReport();
+  const [report, embed] = useReport();
 
   const myReportConfig = {
     embedType: 'report',
@@ -209,7 +200,7 @@ const MyReport = ({ accessToken, embedUrl, embedId }) => {
   // important
   useEffect(() => {
     // call inside useEffect so the we have the reportRef (reference available)
-    setEmbed(reportRef, myReportConfig);
+    embed(reportRef, myReportConfig);
   }, []);
 
   const handleClick = () => {
@@ -228,7 +219,7 @@ const MyReport = ({ accessToken, embedUrl, embedId }) => {
 export default MyReport;
 ```
 
-## Passing in custom layout for useReport hook.
+#### Passing in custom layout for useReport hook.
 
 Example is taken from powerbi js wiki: [Custom-Layout](https://github.com/Microsoft/PowerBI-JavaScript/wiki/Custom-Layout).
 
@@ -291,11 +282,71 @@ const myReportConfig = {
 
 // Inside your component
 useEffect(() => {
-  setEmbed(reportRef, myReportConfig);
+  embed(reportRef, myReportConfig);
 }, []);
 
 ```
 
+### useBootstrap
+
+Provided performance gains on loading in an async way
+
+```javascript
+import React, { useEffect, useRef } from 'react';
+import { useBootstrap } from 'powerbi-report-component';
+
+// Your configuration from server
+const simulateAjaxCall = new Promise(function(resolve, reject) {
+  setTimeout(() => {
+     console.log("Simulating!!!")
+  }, 3000);
+  resolve({
+    accessToken: "accessToken",
+    embedUrl: "embedUrl",
+    embedId: "embedId",
+    reportMode: "View", // "Edit"
+    permissions: "View", // "All" (when using "Edit" mode)
+  });
+});
+
+
+const MyReport = ({ accessToken, embedUrl, embedId }) => {
+  const reportRef = useRef(null);
+  const [report, bootstrap, embed] = useBootstrap();
+
+  const initialReportConfig = {
+    embedType: 'report',
+    tokenType: 'Embed',
+    extraSettings: {
+      filterPaneEnabled: false,
+      navContentPaneEnabled: false,
+    },
+  };
+
+  const getMyConfigurationFromServer = () => {
+    simulateAjaxCall.then(data => {
+      // Embed the report once your configuration is received 
+      embed(reportRef, {...initialReportConfig, ...data});
+    });
+  }
+
+  // important
+  useEffect(() => {
+    // call inside useEffect so the we have the reportRef (reference available)
+    bootstrap(reportRef, initialReportConfig);
+  }, []);
+
+  return (
+    <div className="report-container">
+      <div className="report" ref={reportRef} />
+      <button onClick={getMyConfiguraionFromServer}>Get config from AJAX call</button>
+    </div>
+  );
+};
+
+export default MyReport;
+```
+
 ## Report features and props you can pass into the component
 
 Inside your component where you're using { Report } component.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-report-component",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "It's a minimalistic react component to embed a Microsoft PowerBI report, dashboard or tile into your react application.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package.json

@@ -12,6 +12,7 @@ import MultiplePageDemo from './MultiplePageDemo';
 import './index.css';
 import { useLocalStorage } from './hooks/useLocalStorage';
 import UseReportDemo from './UseReportDemo';
+import UseBootstrapDemo from './UseBootstrapDemo';
 
 const App = () => {
   const [embedType, setEmbedType] = React.useState('Report');
@@ -35,6 +36,8 @@ const App = () => {
         return <MultiplePageDemo />;
       case 'useReport':
         return <UseReportDemo />;
+        case 'useBootstrap':
+          return <UseBootstrapDemo />;
       default:
         return null;
     }

src/docs/App.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Form, Input, Select } from 'antd';
+import { layout } from '../styles/formLayoutStyles';
+import FormButtonGroupBootstrap from '../common/FormButtonGroupBootstrap';
+
+
+const simulateAjaxCall = (reportProps) => new Promise(function(resolve, reject) {
+  setTimeout(() => {
+     console.log("Simulating!!!")
+  }, 3000);
+  resolve(reportProps);
+});
+
+const ReportForm = ({
+  onSubmit,
+  initialReportProps,
+  onReset,
+  onBootstrap,
+}) => {
+  const [isSubmit, setIsSubmit] = React.useState(false);
+  const [isSimulation, setIsSimulation] = React.useState(false);
+  const [isBootstrapped, setIsBootstrapped] = React.useState(false);
+
+  const handleBootstrap = () => {
+    setIsBootstrapped(true);
+    onBootstrap();
+  };
+
+  const onSubmitForm = ({ reportProps }) => {
+    console.log("Simulating async embed call");
+    setIsSimulation(true);
+    simulateAjaxCall(reportProps).then(data => {
+      setIsSubmit(true);
+      onSubmit({ reportProps: data  });
+      setIsSimulation(false);
+    })
+  };
+
+  const onResetForm = () => {
+    setIsSubmit(false);
+    onReset(false);
+  };
+
+  return (
+    <Form
+      {...layout}
+      size="large"
+      colon={false}
+      name="reportProps"
+      onFinish={onSubmitForm}
+      initialValues={{ reportProps: initialReportProps }}
+    >
+      <Form.Item
+        label="Embed Type"
+        name={['reportProps', 'embedType']}
+        rules={[{ required: true }]}
+      >
+        <Select placeholder="Embed Type">
+          <Select.Option value="report">Report</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        label="Token Type"
+        name={['reportProps', 'tokenType']}
+        rules={[{ required: true }]}
+      >
+        <Select placeholder="Token Type">
+          <Select.Option value="Embed">Embed</Select.Option>
+          <Select.Option value="Aad">Aad</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        name={['reportProps', 'accessToken']}
+        label="Token"
+        hidden={!isBootstrapped}
+        rules={[
+          { required: isBootstrapped, message: 'Token is required' },
+        ]}
+      >
+        <Input placeholder="Embed or Aad Token" />
+      </Form.Item>
+      <Form.Item
+        name={['reportProps', 'embedUrl']}
+        hidden={!isBootstrapped}
+        label="Embed Url"
+        rules={[
+          {
+            required: isBootstrapped,
+            message: 'Embed Url is required',
+          },
+        ]}
+      >
+        <Input placeholder="Embed Url" />
+      </Form.Item>
+      <Form.Item
+        name={['reportProps', 'embedId']}
+        label="Embed Id"
+        hidden={!isBootstrapped}
+        rules={[
+          {
+            required: isBootstrapped,
+            message: 'Embed Id is required',
+          },
+        ]}
+      >
+        <Input placeholder="Embed Id" />
+      </Form.Item>
+      <Form.Item
+        label="Permissions"
+        hidden={!isBootstrapped}
+        name={['reportProps', 'permissions']}
+      >
+        <Select placeholder="Permissions (default: View)">
+          <Select.Option value="View">View</Select.Option>
+          <Select.Option value="All">All</Select.Option>
+        </Select>
+      </Form.Item>
+      <Form.Item
+        hidden={!isBootstrapped}
+        label="Mode"
+        name={['reportProps', 'reportMode']}
+      >
+        <Select placeholder="Mode (default: View)">
+          <Select.Option value="View">View</Select.Option>
+          <Select.Option value="Edit">Edit</Select.Option>
+        </Select>
+      </Form.Item>
+      <FormButtonGroupBootstrap
+        isBootstrapped={isBootstrapped}
+        isSubmit={isSubmit}
+        onReset={onResetForm}
+        onBootstrap={handleBootstrap}
+        isLoading={isSimulation}
+      />
+    </Form>
+  );
+};
+
+export default ReportForm;