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;

src/components/Layouts/SideMenu.test.jsx

@@ -1,6 +1,7 @@
 jest.mock("../Contexts/UserContext");
+jest.mock("../../services/superset")
 
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import { UserProvider, setToken } from "../Contexts/UserContext";
 import { TEST_AUTH_OBJECT } from "../../utils/testing";
@@ -22,17 +23,15 @@ const renderMenu = async () => {
 describe("SideMenu", () => {
   beforeAll(() => {
     addSnapshotSerializer(expect);
-  });
 
-  it("Unauthenticated", async () => {
-    setToken(null);
-    const container = await renderMenu();
-    expect(container).toMatchSnapshot();
   });
 
   it("Authenticated", async () => {
     setToken(TEST_AUTH_OBJECT);
     const container = await renderMenu();
+    await waitFor(() => {
+      expect(screen.getByText('Datascope')).toBeInTheDocument()
+    })
     expect(container).toMatchSnapshot();
   });
 });

src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap

@@ -152,42 +152,6 @@ exports[`SideMenu Authenticated 1`] = `
           />
         </a>
       </li>
-      <li>
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-          href="/datascope"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiListItemIcon-root"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
-              />
-            </svg>
-          </div>
-          <div
-            class="MuiListItemText-root"
-          >
-            <span
-              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
-            >
-              Datascope
-            </span>
-          </div>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </a>
-      </li>
       <span>
         <li>
           <a
@@ -274,55 +238,70 @@ exports[`SideMenu Authenticated 1`] = `
           </a>
         </li>
       </ul>
-    </ul>
-  </div>
-</div>
-`;
-
-exports[`SideMenu Unauthenticated 1`] = `
-<div>
-  <div
-    data-testid="mocked-userprovider"
-  >
-    <ul
-      class="MuiList-root MuiList-padding"
-    >
-      <li>
-        <a
-          aria-disabled="false"
-          class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
-          href="/home"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="MuiListItemIcon-root"
+      <span>
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/datascope"
+            role="button"
+            tabindex="0"
           >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root"
-              focusable="false"
-              viewBox="0 0 24 24"
+            <div
+              class="MuiListItemIcon-root"
             >
-              <path
-                d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
-              />
-            </svg>
-          </div>
-          <div
-            class="MuiListItemText-root"
-          >
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"
+                />
+              </svg>
+            </div>
+            <div
+              class="MuiListItemText-root"
+            >
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                Datascope
+              </span>
+            </div>
             <span
-              class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              class="MuiTouchRipple-root"
+            />
+          </a>
+        </li>
+      </span>
+      <ul
+        style="margin-left: 50px;"
+      >
+        <li>
+          <a
+            aria-disabled="false"
+            class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button"
+            href="/datascope/00000000-0000-0000-0000-000000000000"
+            role="button"
+            tabindex="0"
+          >
+            <div
+              class="MuiListItemText-root"
             >
-              Home
-            </span>
-          </div>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </a>
-      </li>
+              <span
+                class="MuiTypography-root MuiListItemText-primary MuiTypography-body1 MuiTypography-displayBlock"
+              >
+                test title
+              </span>
+            </div>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </a>
+        </li>
+      </ul>
     </ul>
   </div>
 </div>