Refactor how we manage scope for navi (#163)

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 (
     <li>
       <Link
-        to={item.route}
+        to={item.route(user)}
         className={classNames({ navi__link: true, "txt--jean": true, active })}
         onClick={handleMenu}
       >
@@ -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 = ({
         </div>
         <div className="navi__routes">
           <ul>
-            {naviTop.map((item) => {
-              if (item.label === "Settings") {
-                return (
-                  <ScopedAccess
-                    key={item.label}
-                    scope={Scope.service_provider}
-                    user={user}
-                  >
-                    <Item
-                      key={item.label}
-                      item={item}
-                      handleMenu={handleMenu}
-                    />
-                  </ScopedAccess>
-                );
-              }
-              if (item.label === "Accounts" && user?.scope === USER_ACCOUNT) {
-                const accountNavItem = {
-                  label: "Account",
-                  icon: Icons.Activity,
-                  route: `${ROUTE_INTERNAL_ACCOUNTS}/${user?.account_sid}/edit`,
-                };
-                return (
-                  <Item
-                    key={accountNavItem.label}
-                    item={accountNavItem}
-                    handleMenu={handleMenu}
-                  />
-                );
-              }
-              if (item.label === "Accounts") {
-                return (
-                  <ScopedAccess
-                    key={item.label}
-                    scope={Scope.service_provider}
-                    user={user}
-                  >
-                    <Item
-                      key={item.label}
-                      item={item}
-                      handleMenu={handleMenu}
-                    />
-                  </ScopedAccess>
-                );
-              }
+            {naviTopFiltered.map((item) => {
               return (
-                <Item key={item.label} item={item} handleMenu={handleMenu} />
+                <Item
+                  key={item.label}
+                  user={user}
+                  item={item}
+                  handleMenu={handleMenu}
+                />
               );
             })}
           </ul>
@@ -231,7 +205,12 @@ export const Navi = ({
         <div className="navi__routes">
           <ul>
             {naviByoFiltered.map((item) => (
-              <Item key={item.label} item={item} handleMenu={handleMenu} />
+              <Item
+                key={item.label}
+                user={user}
+                item={item}
+                handleMenu={handleMenu}
+              />
             ))}
           </ul>
         </div>

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",
   },
 ];