CEC-2269: Embdeded Superset (#228)

Co-authored-by: Alexander Andrews <aandrews@fiskerinc.com>

src/components/Dashboard/index.css

@@ -0,0 +1,4 @@
+iframe {
+  width: 100%;
+  height: 100%;
+}

src/components/Dashboard/index.jsx

@@ -1,27 +1,41 @@
 import React, { useEffect } from "react";
-import ResponsiveIFrame from "../Controls/ResponsiveIFrame";
-import { SupersetDashboardURL } from "../../services/superset";
+import api from "../../services/superset";
 import { useStatusContext } from "../Contexts/StatusContext";
-import useStyles from "../useStyles";
+import { useUserContext } from "../Contexts/UserContext";
+import './index.css'
+import { embedDashboard } from "@superset-ui/embedded-sdk";
+
 
 const Dashboard = () => {
-  const classes = useStyles();
   const { setTitle, setSitePath } = useStatusContext();
 
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
   useEffect(() => {
     setTitle("Datascope");
     setSitePath([]);
+    embedDashboard({
+      id: api.SupersetDashboardID(), // given by the Superset embedding UI
+      supersetDomain: api.SupersetDashboardURL(),
+      mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
+      fetchGuestToken: () => api.getGuestToken(token),
+      dashboardUiConfig: { hideTab: true, hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
-    <ResponsiveIFrame
-      src={SupersetDashboardURL}
-      title="Dashboard"
-      classes={classes}
-      fullscreen
-    />
+    <div style={{
+      display: 'flex',
+      height: '85vh'
+    }} id="my-superset-container">
+    </div>
   );
 };
 
+//style={{position:'absolute', top:0, left:0, bottom:0, right:0, width:'100%', height:'100%', border:'none', margin:0, padding:0, overflow:'hidden'}}
 export default Dashboard;

src/components/useStyles.jsx

@@ -180,6 +180,15 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     height: "100%",
   },
+  iframe: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    width: "100%",
+    height: "100%",
+  },
   embeddedWrapper: {
     marginTop: 10,
     position: "relative",