Merge pull request #2055 from IFRCGo/feature/embed-pbi

Power BI authenticated embedding - v0.1

Author: frozenhelium

.changeset/six-camels-design.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+A demo to embed a Power BI report which is visible to logged in users only

app/env.ts

@@ -21,6 +21,7 @@ export default defineConfig({
     APP_TINY_API_KEY: Schema.string(),
     APP_RISK_API_ENDPOINT: Schema.string({ format: 'url', protocol: true }),
     APP_SDT_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+    APP_POWER_BI_REPORT_ID_1: Schema.string.optional(),
     APP_SENTRY_DSN: Schema.string.optional(),
     APP_SENTRY_TRACES_SAMPLE_RATE: Schema.number.optional(),
     APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE: Schema.number.optional(),

app/package.json

@@ -53,6 +53,7 @@
         "html-to-image": "^1.11.11",
         "mapbox-gl": "^1.13.0",
         "papaparse": "^5.4.1",
+        "powerbi-client": "^2.23.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.18.0",

app/src/App/routes/index.tsx

@@ -741,6 +741,20 @@ const resources = customWrapRoute({
         visibility: 'anything',
     },
 });
+
+const spark = customWrapRoute({
+    parent: rootLayout,
+    path: 'spark',
+    component: {
+        render: () => import('#views/Spark'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'SPARK',
+        visibility: 'is-authenticated',
+    },
+});
 const operationalLearning = customWrapRoute({
     parent: rootLayout,
     path: 'operational-learning',
@@ -1317,6 +1331,7 @@ const wrappedRoutes = {
     accountMyFormsDref,
     accountMyFormsThreeW,
     resources,
+    spark,
     search,
     allThreeWProject,
     allThreeWActivity,

app/src/components/domain/SparkEmbed/index.tsx

@@ -0,0 +1,85 @@
+import {
+    useEffect,
+    useRef,
+} from 'react';
+import { _cs } from '@togglecorp/fujs';
+import {
+    factories,
+    type IEmbedConfiguration,
+    models,
+    service,
+} from 'powerbi-client';
+
+import styles from './styles.module.css';
+
+type PowerBiEmbedProps = {
+    embedUrl: string;
+    accessToken: string;
+    reportId?: string;
+    className?: string;
+};
+
+function PowerBiEmbed(props: PowerBiEmbedProps) {
+    const {
+        embedUrl,
+        accessToken,
+        reportId,
+        className,
+    } = props;
+
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    useEffect(() => {
+        const element = containerRef.current;
+        if (!element) {
+            return undefined;
+        }
+        if (!embedUrl || !accessToken) {
+            // Do not attempt to embed without required fields
+            return undefined;
+        }
+
+        const powerBiService = new service.Service(
+            factories.hpmFactory,
+            factories.wpmpFactory,
+            factories.routerFactory,
+        );
+
+        const config: IEmbedConfiguration = {
+            type: 'report',
+            id: reportId,
+            embedUrl,
+            accessToken,
+            tokenType: models.TokenType.Embed,
+            settings: {
+                panes: {
+                    filters: { visible: false },
+                },
+                layoutType: models.LayoutType.FitToWidth,
+                // Enable/disable parts of the UI as needed
+                navContentPaneEnabled: true,
+            },
+        };
+
+        // Embed the report
+        powerBiService.embed(element, config);
+
+        // Cleanup on unmount
+        return () => {
+            try {
+                powerBiService.reset(element as HTMLElement);
+            } catch {
+                // ignore
+            }
+        };
+    }, [embedUrl, accessToken, reportId]);
+
+    return (
+        <div
+            className={_cs(styles.sparkEmbed, className)}
+            ref={containerRef}
+        />
+    );
+}
+
+export default PowerBiEmbed;

app/src/components/domain/SparkEmbed/styles.module.css

@@ -0,0 +1,7 @@
+.spark-embed {
+    aspect-ratio: 5 / 3;
+
+    iframe {
+        border: none;
+    }
+}

app/src/config.ts

@@ -7,6 +7,7 @@ const {
     APP_TINY_API_KEY,
     APP_RISK_API_ENDPOINT,
     APP_SDT_URL,
+    APP_POWER_BI_REPORT_ID_1,
     APP_SENTRY_DSN,
     APP_SENTRY_TRACES_SAMPLE_RATE,
     APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE,
@@ -30,6 +31,7 @@ export const adminUrl = APP_ADMIN_URL ?? `${api}admin/`;
 export const mbtoken = APP_MAPBOX_ACCESS_TOKEN;
 export const riskApi = APP_RISK_API_ENDPOINT;
 export const sdtUrl = APP_SDT_URL;
+export const powerBiReportId1 = APP_POWER_BI_REPORT_ID_1;
 
 export const tinyApiKey = APP_TINY_API_KEY;
 export const sentryAppDsn = APP_SENTRY_DSN;

app/src/views/Spark/index.tsx

@@ -0,0 +1,71 @@
+import { Container } from '@ifrc-go/ui';
+import {
+    isDefined,
+    isNotDefined,
+} from '@togglecorp/fujs';
+
+import SparkEmbed from '#components/domain/SparkEmbed';
+import Page from '#components/Page';
+import { powerBiReportId1 } from '#config';
+import { useRequest } from '#utils/restRequest';
+
+// Backend returns snake_case keys
+type BackendPowerBiAuth = {
+    embed_url: string;
+    embed_token: string;
+    report_id?: string;
+    expires_at?: string; // new field for expiry (ISO string)
+};
+
+/** @knipignore */
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const {
+        response: authRaw,
+        pending,
+        error,
+    } = useRequest({
+        skip: !powerBiReportId1,
+        url: '/api/v2/auth-power-bi/',
+        preserveResponse: true,
+        query: powerBiReportId1 ? ({
+            report_id: powerBiReportId1,
+        }) : undefined,
+    });
+
+    // FIXME: the typings should be generated in the server
+    const auth = authRaw as unknown as BackendPowerBiAuth | undefined;
+    const embedUrl = auth?.embed_url;
+    const accessToken = auth?.embed_token;
+    const reportId = auth?.report_id;
+
+    return (
+        <Page
+            // FIXME: use strings
+            title="SPARK"
+            // FIXME: use strings
+            heading="SPARK"
+        >
+            <Container
+                pending={pending}
+                errored={!!error}
+                errorMessage={error?.value.messageForNotification}
+                empty={isNotDefined(powerBiReportId1)
+                    || isNotDefined(embedUrl)
+                    || isNotDefined(accessToken)}
+                // FIXME: use strings
+                emptyMessage="Page not available!"
+            >
+                {isDefined(embedUrl) && isDefined(accessToken) && (
+                    <SparkEmbed
+                        embedUrl={embedUrl}
+                        accessToken={accessToken}
+                        reportId={reportId}
+                    />
+                )}
+            </Container>
+        </Page>
+    );
+}
+
+Component.displayName = 'Spark';