CEC-2970: Multiple Superset Dashboards (#229)

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

src/components/Layouts/SideMenu.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { List } from "@material-ui/core";
 import HomeIcon from "@material-ui/icons/Home";
 import DirectionsCarIcon from "@material-ui/icons/DirectionsCar";
@@ -13,6 +13,8 @@ import ListItemExternalLink from "../ListItemExternalLink";
 import { useUserContext } from "../Contexts/UserContext";
 import { Roles, hasRole } from "../../utils/roles";
 
+import supersetAPI from "../../services/superset";
+
 const menuData = [
   {
     label: "Home",
@@ -38,12 +40,6 @@ const menuData = [
     icon: <CommuteIcon />,
     roles: [Roles.READ, Roles.CREATE],
   },
-  {
-    label: "Datascope",
-    to: "/datascope",
-    icon: <AssessmentIcon />,
-    roles: [Roles.READ, Roles.CREATE],
-  },
   {
     label: "Suppliers",
     to: "/suppliers",
@@ -103,13 +99,30 @@ const ExpandableSideMenuItem = ({ item }) => (
 
 const SideMenu = () => {
   const { groups } = useUserContext();
-  const menu = menuData.reduce((result, item) => {
-    if (hasRole(item.roles, groups)) {
-      result.push(item);
+  const [menu, setMenu] = useState(menuData)
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  useEffect(() => {
+    if (groups && token) {
+      const internalEffect = async (token) => {
+        const datasscopeitem = await SupersetItemList(token)
+        menuData.push(datasscopeitem)
+        FilterAccessible(groups, setMenu)
+      }
+
+      internalEffect(token)
     }
 
-    return result;
-  }, []);
+  }, [groups, token])
+
+  useEffect(() => {
+    FilterAccessible(groups, setMenu)
+  }, [groups])
+
 
   return (
     <List>
@@ -123,4 +136,36 @@ const SideMenu = () => {
   );
 };
 
-export default SideMenu;
+const FilterAccessible = (groups, setMenu) => {
+
+  const filteredMenu = menuData.reduce((result, item) => {
+    if (hasRole(item.roles, groups)) {
+      result.push(item);
+    }
+    return result;
+  }, [])
+  setMenu(filteredMenu)
+}
+
+// Will get the set of superset embeddable dashboards, and put it in the submenu style
+const SupersetItemList = async (token) => {
+  const embeddedDashboards = await supersetAPI.getEmbeddedDashboards(token)
+
+  const submenus = embeddedDashboards.map((dashboard) => {
+    return {
+      label: dashboard.title,
+      to: "/datascope/" + dashboard.embedded_id,
+      roles: [],
+    }
+  })
+
+  return {
+    label: "Datascope",
+    to: "/datascope",
+    icon: <AssessmentIcon />,
+    roles: [Roles.READ, Roles.CREATE],
+    submenus: submenus
+  }
+}
+
+export default SideMenu;