CEC-3071: Fixed Duplicate datascope menu (#232)

* CEC-3071: Fixed Duplicate datascope menu

* Mde item type dynamic

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

src/components/Layouts/SideMenu.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { List } from "@material-ui/core";
 import HomeIcon from "@material-ui/icons/Home";
 import DirectionsCarIcon from "@material-ui/icons/DirectionsCar";
@@ -8,12 +8,10 @@ import AssessmentIcon from "@material-ui/icons/Assessment";
 import BuildIcon from "@material-ui/icons/Build";
 import SettingsInputCompositeIcon from "@material-ui/icons/SettingsInputComposite";
 
-import ListItemLink from "../ListItemLink";
-import ListItemExternalLink from "../ListItemExternalLink";
 import { useUserContext } from "../Contexts/UserContext";
 import { Roles, hasRole } from "../../utils/roles";
-
-import supersetAPI from "../../services/superset";
+import { ExpandableSideMenuItem, MenuItem } from "./MenuItem";
+import SupersetDashboardList from "../SupersetDashboardList/SupersetDashboardList";
 
 const menuData = [
   {
@@ -40,6 +38,13 @@ const menuData = [
     icon: <CommuteIcon />,
     roles: [Roles.READ, Roles.CREATE],
   },
+  {
+    label: "Datascope",
+    to: null,
+    icon: <AssessmentIcon />,
+    roles: [Roles.READ, Roles.CREATE],
+    component: SupersetDashboardList
+  },
   {
     label: "Suppliers",
     to: "/suppliers",
@@ -66,62 +71,17 @@ const menuData = [
   },
 ];
 
-const MenuItem = ({ item, children }) => {
-  return (
-    <li>
-      {item.to && (
-        <ListItemLink primary={item.label} to={item.to} icon={item.icon} />
-      )}
-      {item.url && (
-        <ListItemExternalLink
-          primary={item.label}
-          url={item.url}
-          icon={item.icon}
-        />
-      )}
-      {children}
-    </li>
-  );
-};
-
-const ExpandableSideMenuItem = ({ item }) => (
-  <>
-    <span>
-      <MenuItem item={item}></MenuItem>
-    </span>
-    <ul style={{ marginLeft: 50 }}>
-      {item.submenus.map((subitem, index) => (
-        <MenuItem key={`submenu-${index}`} item={subitem} />
-      ))}
-    </ul>
-  </>
-);
 
 const SideMenu = () => {
   const { groups } = useUserContext();
-  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)
+  const menu = menuData.reduce((result, item) => {
+    if (hasRole(item.roles, groups)) {
+      result.push(item);
     }
 
-  }, [groups, token])
-
-  useEffect(() => {
-    FilterAccessible(groups, setMenu)
-  }, [groups])
+    return result;
+  }, []);
 
 
   return (
@@ -136,36 +96,4 @@ const 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;