From 61982c4ba50dd2bd72df616caa5ff9d99f71a1b2 Mon Sep 17 00:00:00 2001 From: Alexander Andrews <45926661+alexander-e-andrews@users.noreply.github.com> Date: Mon, 7 Nov 2022 12:38:32 -0500 Subject: [PATCH] CEC-3071: Fixed Duplicate datascope menu (#232) * CEC-3071: Fixed Duplicate datascope menu * Mde item type dynamic Co-authored-by: Alexander Andrews --- .../App/__snapshots__/App.test.js.snap | 4895 +++-------------- src/components/Layouts/MenuItem.jsx | 38 + src/components/Layouts/SideMenu.jsx | 102 +- .../__snapshots__/SideMenu.test.jsx.snap | 125 +- src/components/ListItemLink.jsx | 13 +- .../SupersetDashboardList.jsx | 45 + 6 files changed, 838 insertions(+), 4380 deletions(-) create mode 100644 src/components/Layouts/MenuItem.jsx create mode 100644 src/components/SupersetDashboardList/SupersetDashboardList.jsx diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap index 89272a9..4d7e87c 100644 --- a/src/components/App/__snapshots__/App.test.js.snap +++ b/src/components/App/__snapshots__/App.test.js.snap @@ -209,6 +209,67 @@ exports[`App Route / authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -771,6 +768,67 @@ exports[`App Route /home authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -1433,6 +1363,67 @@ exports[`App Route /package-deploy authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -2715,6 +2322,67 @@ exports[`App Route /package-status authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -3651,6 +2999,67 @@ exports[`App Route /packages authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -4750,6 +3903,67 @@ exports[`App Route /page-not-found authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -5403,6 +4425,67 @@ exports[`App Route /tools/certificates/add authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -6737,6 +5180,67 @@ exports[`App Route /tools/sms/send authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -8001,6 +5801,67 @@ exports[`App Route /vehicle-add authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -9567,6 +6980,67 @@ exports[`App Route /vehicle-status authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - @@ -10892,6 +7790,67 @@ exports[`App Route /vehicles authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - diff --git a/src/components/Layouts/MenuItem.jsx b/src/components/Layouts/MenuItem.jsx new file mode 100644 index 0000000..107c032 --- /dev/null +++ b/src/components/Layouts/MenuItem.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import ListItemLink from "../ListItemLink"; +import ListItemExternalLink from "../ListItemExternalLink" + +const MenuItem = ({ item, children }) => { + return ( +
  • + {item.label && (<> + {item.url ? + + : } + {item.component && + + } + )} + {children} +
    • + ); +}; + +const ExpandableSideMenuItem = ({ item }) => ( + <> + + + + + +); + +export {ExpandableSideMenuItem, MenuItem} \ No newline at end of file diff --git a/src/components/Layouts/SideMenu.jsx b/src/components/Layouts/SideMenu.jsx index 16aa04a..214bdf3 100644 --- a/src/components/Layouts/SideMenu.jsx +++ b/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: , roles: [Roles.READ, Roles.CREATE], }, + { + label: "Datascope", + to: null, + icon: , + roles: [Roles.READ, Roles.CREATE], + component: SupersetDashboardList + }, { label: "Suppliers", to: "/suppliers", @@ -66,62 +71,17 @@ const menuData = [ }, ]; -const MenuItem = ({ item, children }) => { - return ( -
  • - {item.to && ( - - )} - {item.url && ( - - )} - {children} -
    • - ); -}; - -const ExpandableSideMenuItem = ({ item }) => ( - <> - - - -
      - {item.submenus.map((subitem, index) => ( - - ))} -
    - -); 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: , - roles: [Roles.READ, Roles.CREATE], - submenus: submenus - } -} - export default SideMenu; \ No newline at end of file diff --git a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap index ac71be0..c804955 100644 --- a/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap +++ b/src/components/Layouts/__snapshots__/SideMenu.test.jsx.snap @@ -152,6 +152,67 @@ exports[`SideMenu Authenticated 1`] = ` /> +
  • +
    +
    + +
    +
    + + Datascope + +
    + +
    + +
    • - -
  • - -
    - -
    -
    - - Datascope - -
    - -     -
    • -     - diff --git a/src/components/ListItemLink.jsx b/src/components/ListItemLink.jsx index b30901b..34eaa8c 100644 --- a/src/components/ListItemLink.jsx +++ b/src/components/ListItemLink.jsx @@ -9,10 +9,13 @@ function ListItemLink(props) { const { icon, primary, to } = props; const renderLink = React.useMemo( - () => - React.forwardRef((itemProps, ref) => ( - - )), + () => { + if (to) { + return React.forwardRef((itemProps, ref) => ( + + )) + } + }, [to] ); @@ -27,7 +30,7 @@ function ListItemLink(props) { ListItemLink.propTypes = { icon: PropTypes.element, primary: PropTypes.string.isRequired, - to: PropTypes.string.isRequired, + to: PropTypes.string, }; export default ListItemLink; diff --git a/src/components/SupersetDashboardList/SupersetDashboardList.jsx b/src/components/SupersetDashboardList/SupersetDashboardList.jsx new file mode 100644 index 0000000..cce2712 --- /dev/null +++ b/src/components/SupersetDashboardList/SupersetDashboardList.jsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from "react"; +import { useUserContext } from "../Contexts/UserContext"; + +import supersetAPI from "../../services/superset"; +import { MenuItem } from "../Layouts/MenuItem"; + +const SupersetDashboardList = () => { + const [dashboardList, setDashboardList] = useState([]) + const { groups } = useUserContext(); + const { + token: { + idToken: { jwtToken: token }, + }, + } = useUserContext(); + + useEffect(() => { + if (groups && token) { + const internalEffect = async (token) => { + const embeddedDashboards = await await supersetAPI.getEmbeddedDashboards(token) + const submenus = embeddedDashboards.map((dashboard) => { + return { + label: dashboard.title, + to: "/datascope/" + dashboard.embedded_id, + roles: [], + } + }) + setDashboardList(submenus) + } + + internalEffect(token) + } + + }, [groups, token]) + + + return ( +
      + {dashboardList.map((subitem, index) => ( + + ))} +
    + ) +} + +export default SupersetDashboardList \ No newline at end of file