diff --git a/src/containers/internal/navi/index.tsx b/src/containers/internal/navi/index.tsx index 5146c36..b3d0833 100644 --- a/src/containers/internal/navi/index.tsx +++ b/src/containers/internal/navi/index.tsx @@ -16,9 +16,7 @@ import type { NaviItem } from "./items"; import "./styles.scss"; import { ScopedAccess } from "src/components/scoped-access"; -import { Scope } from "src/store/types"; -import { USER_ACCOUNT } from "src/api/constants"; -import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes"; +import { Scope, UserData } from "src/store/types"; type CommonProps = { handleMenu: () => void; @@ -32,16 +30,17 @@ type NaviProps = CommonProps & { type ItemProps = CommonProps & { item: NaviItem; + user?: UserData; }; -const Item = ({ item, handleMenu }: ItemProps) => { +const Item = ({ item, user, handleMenu }: ItemProps) => { const location = useLocation(); - const active = location.pathname.includes(item.route); + const active = location.pathname.includes(item.route(user)); return (
  • @@ -73,6 +72,20 @@ export const Navi = ({ ); }, [accessControl, currentServiceProvider]); + const naviTopFiltered = useMemo(() => { + return naviTop.filter((item) => { + if (item.scope === undefined) { + return true; + } else if (user) { + if (item.restrict) { + return user.access === item.scope; + } + + return user.access >= item.scope; + } + }); + }, [user]); + const handleSubmit = () => { postServiceProviders({ name }) .then(({ json }) => { @@ -174,53 +187,14 @@ export const Navi = ({
    @@ -231,7 +205,12 @@ export const Navi = ({
      {naviByoFiltered.map((item) => ( - + ))}
    diff --git a/src/containers/internal/navi/items.ts b/src/containers/internal/navi/items.ts index fa4c9b6..9b2ac76 100644 --- a/src/containers/internal/navi/items.ts +++ b/src/containers/internal/navi/items.ts @@ -11,6 +11,7 @@ import { ROUTE_INTERNAL_MS_TEAMS_TENANTS, } from "src/router/routes"; import { Icons } from "src/components"; +import { Scope, UserData } from "src/store/types"; import type { Icon } from "react-feather"; import type { ACL } from "src/store/types"; @@ -18,40 +19,51 @@ import type { ACL } from "src/store/types"; export interface NaviItem { label: string; icon: Icon; - route: string; + route: (user?: UserData) => string; acl?: keyof ACL; + scope?: Scope; + restrict?: boolean; } export const naviTop: NaviItem[] = [ { label: "Users", icon: Icons.UserCheck, - route: ROUTE_INTERNAL_USERS, + route: () => ROUTE_INTERNAL_USERS, }, { label: "Settings", icon: Icons.Settings, - route: ROUTE_INTERNAL_SETTINGS, + route: () => ROUTE_INTERNAL_SETTINGS, + scope: Scope.service_provider, }, { label: "Accounts", icon: Icons.Activity, - route: ROUTE_INTERNAL_ACCOUNTS, + route: () => ROUTE_INTERNAL_ACCOUNTS, + scope: Scope.service_provider, + }, + { + label: "Account", + icon: Icons.Activity, + route: (user) => `${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`, + scope: Scope.account, + restrict: true, }, { label: "Applications", icon: Icons.Grid, - route: ROUTE_INTERNAL_APPLICATIONS, + route: () => ROUTE_INTERNAL_APPLICATIONS, }, { label: "Recent Calls", icon: Icons.List, - route: ROUTE_INTERNAL_RECENT_CALLS, + route: () => ROUTE_INTERNAL_RECENT_CALLS, }, { label: "Alerts", icon: Icons.AlertCircle, - route: ROUTE_INTERNAL_ALERTS, + route: () => ROUTE_INTERNAL_ALERTS, }, ]; @@ -59,22 +71,22 @@ export const naviByo: NaviItem[] = [ { label: "Carriers", icon: Icons.Server, - route: ROUTE_INTERNAL_CARRIERS, + route: () => ROUTE_INTERNAL_CARRIERS, }, { label: "Speech", icon: Icons.MessageCircle, - route: ROUTE_INTERNAL_SPEECH, + route: () => ROUTE_INTERNAL_SPEECH, }, { label: "Phone Numbers", icon: Icons.Phone, - route: ROUTE_INTERNAL_PHONE_NUMBERS, + route: () => ROUTE_INTERNAL_PHONE_NUMBERS, }, { label: "MS Teams Tenants", icon: Icons.Users, - route: ROUTE_INTERNAL_MS_TEAMS_TENANTS, + route: () => ROUTE_INTERNAL_MS_TEAMS_TENANTS, acl: "hasMSTeamsFqdn", }, ];