Added COP dashboards to highlight of the month

package.json

@@ -11,6 +11,8 @@
         "@mui/icons-material": "^5.11.11",
         "@mui/material": "^5.11.14",
         "@reduxjs/toolkit": "^1.8.5",
+        "@superset-ui/embedded-sdk": "^0.1.0-alpha.8",
+        "@superset-ui/switchboard": "^1.5.0",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",
@@ -23,7 +25,7 @@
         "highcharts": "^8.2.2",
         "highcharts-react-official": "^3.0.0",
         "lodash": "^4.17.20",
-        "moment": "^2.27.0",
+        "moment": "^2.29.0",
         "mui-datatables": "^4.3.0",
         "oidc-client": "^1.10.1",
         "powerbi-client": "^2.22.2",

src/views/Highlight/Highlight.js

@@ -1,30 +1,9 @@
-import { useState, useEffect } from 'react';
-import { DWH_API_URL } from '../../constants';
-import axios from 'axios';
+import HighlightTabs from './HighlightTabs';
 
 const Highlight = () => {
-    const [iframeUrl, setIframeUrl] = useState('');
-
-    useEffect(() => {
-        axios.get(`${DWH_API_URL}self-service/monthly-highlight`)
-            .then(res => {
-                const url = res.data?.url;
-                setIframeUrl(url);
-            })
-            .catch(error => {
-                console.error('Error fetching iframe URL:', error);
-            });
-    }, []);
-    console.log(iframeUrl)
 
     return (
-        <iframe
-            src={iframeUrl}
-            frameBorder={0}
-            width={'100%'}
-            height={800}
-            allowTransparency
-        />
+        <HighlightTabs />
     );
 }
 

src/views/Highlight/HighlightCOP.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import axios from 'axios';
+import { embedDashboard } from "@superset-ui/embedded-sdk";
+
+
+const supersetUrl = 'https://dwhanalytics.kenyahmis.org'
+const supersetApiUrl = supersetUrl + '/api/v1/security'
+const dashboardId = "7aa9c6c5-2904-4d6f-87e3-9a36a0b51e6e"
+
+async function getToken() {
+
+    //calling login to get access token
+    const login_body = {
+        "password": "admin",
+        "provider": "db",
+        "refresh": true,
+        "username": "admin"
+    };
+
+    const login_headers = {
+        "headers": {
+            "Content-Type": "application/json"
+        }
+    }
+
+    // console.log(supersetApiUrl + '/login')
+    const { data } = await axios.post(supersetApiUrl + '/login', login_body, login_headers)
+    const access_token = data['access_token']
+    // console.log(access_token)
+
+
+    // Calling guest token
+    const guest_token_body = {
+        "resources": [
+            {
+                "type": "dashboard",
+                "id": dashboardId,
+            }
+        ],
+        "rls": [],
+        "user": {
+            "username": "report-viewer",
+            "first_name": "report-viewer",
+            "last_name": "report-viewer",
+        }
+    };
+
+    const guest_token_headers = {
+        "headers": {
+            "Content-Type": "application/json",
+            "Authorization": 'Bearer ' + access_token
+        }
+    }
+
+
+    // console.log(supersetApiUrl + '/guest_token/')
+    // console.log(guest_token_body)
+    // console.log(guest_token_headers)
+    await axios.post(supersetApiUrl + '/guest_token/', guest_token_body, guest_token_headers).then(dt=>{
+        // console.log(dt.data['token'])
+        embedDashboard({
+            id: dashboardId,  // given by the Superset embedding UI
+            supersetDomain: supersetUrl,
+            mountPoint: document.getElementById("superset-container"), // html element in which iframe render
+            fetchGuestToken: () => dt.data['token'],
+            dashboardUiConfig: {
+                hideTitle: false,
+                hideChartControls: true,
+                hideTab: true,
+                filters: {
+                    expanded: true,
+                },
+            }
+        });
+    })
+
+    var iframe = document.querySelector("iframe")
+    if (iframe) {
+        iframe.style.width = '100%'; // Set the width as needed
+        iframe.style.minHeight = '100vw'; // Set the height as needed
+    }
+
+}
+
+const HighlightCOP = () => {
+    getToken()
+
+    return (
+        <>
+            <div id="superset-container"></div>
+        </>
+    )
+}
+
+export default HighlightCOP

src/views/Highlight/HighlightInternal.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { DWH_API_URL } from '../../constants';
+
+const HighlightInternal = () => {
+    const [iframeUrl, setIframeUrl] = useState('');
+
+    useEffect(() => {
+        axios.get(`${DWH_API_URL}self-service/monthly-highlight`)
+            .then(res => {
+                const url = res.data?.url;
+                setIframeUrl(url);
+            })
+            .catch(error => {
+                console.error('Error fetching iframe URL:', error);
+            });
+    }, []);
+
+    return (
+        <iframe
+            src={iframeUrl}
+            frameBorder={0}
+            width={'100%'}
+            height={800}
+            allowTransparency
+        />
+    );
+}
+
+export default HighlightInternal

src/views/Highlight/HighlightTabs.js

@@ -0,0 +1,56 @@
+import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
+import classnames from 'classnames';
+import React, { useState } from 'react';
+import Loadable from 'react-loadable';
+import Loading from '../Shared/Loading';
+import { LOADING_DELAY } from '../../constants';
+const HighlightInternal = Loadable({ loader: () => import('./HighlightInternal'), loading: Loading, delay: LOADING_DELAY });
+const HighlightCOP = Loadable({ loader: () => import('./HighlightCOP'), loading: Loading, delay: LOADING_DELAY });
+
+
+const HighlightTabs = () => {
+
+    const [activeTab, setActiveTab] = useState('cop');
+
+    return(
+        <>
+            <Nav tabs>
+                <NavItem>
+                    <NavLink
+                        className={classnames({
+                            active: activeTab === 'cop',
+                        })}
+                        onClick={() => {
+                            setActiveTab('cop');
+                        }}
+                    >
+                        COMMUNITY DASHBOARDS
+                    </NavLink>
+                </NavItem>
+                <NavItem>
+                    <NavLink
+                        className={classnames({
+                            active: activeTab === 'metabase',
+                        })}
+                        onClick={() => {
+                            setActiveTab('metabase');
+                        }}
+                    >
+                        KENYAHMIS DASHBOARDS
+                    </NavLink>
+                </NavItem>
+            </Nav>
+            <TabContent activeTab={activeTab}>
+                <TabPane tabId="cop">
+                    <HighlightCOP />
+                </TabPane>
+                <TabPane tabId="metabase">
+                    <HighlightInternal />
+                </TabPane>
+            </TabContent>
+        </>
+    )
+}
+
+
+export default HighlightTabs