diff --git a/frontend/app/layout/SideMenu.tsx b/frontend/app/layout/SideMenu.tsx index efea409ef..6aa3afd11 100644 --- a/frontend/app/layout/SideMenu.tsx +++ b/frontend/app/layout/SideMenu.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Divider, Menu, Typography, Drawer, Button, Space } from 'antd'; +import { Divider, Menu, Typography } from 'antd'; import SVG from 'UI/SVG'; import * as routes from 'App/routes'; import { bookmarks, client, CLIENT_DEFAULT_TAB, CLIENT_TABS, fflags, notes, sessions, withSiteId } from 'App/routes'; @@ -28,36 +28,43 @@ interface Props extends RouteComponentProps { modules: string[]; setActiveTab: (tab: any) => void; activeTab: string; + isAdmin: boolean; + isEnterprise: boolean; } function SideMenu(props: Props) { // @ts-ignore - const { activeTab, siteId, modules, location } = props; + const { activeTab, siteId, modules, location, account, isEnterprise } = props; const isPreferencesActive = location.pathname.includes('/client/'); const [supportOpen, setSupportOpen] = React.useState(false); + const isAdmin = account.admin || account.superAdmin; - let menu = isPreferencesActive ? preferences : main_menu; - menu.forEach((category) => { - category.items.forEach((item) => { - if (item.key === MENU.NOTES && modules.includes(MODULES.NOTES)) { - item.hidden = true; - } + let menu: any[] = React.useMemo(() => { + const sourceMenu = isPreferencesActive ? preferences : main_menu; - if ((item.key === MENU.LIVE_SESSIONS || item.key === MENU.RECORDINGS) && modules.includes(MODULES.ASSIST)) { - item.hidden = true; - } + return sourceMenu.map(category => { + return { + ...category, + items: category.items.map(item => { + if (item.hidden) return item; // Guard clause to early return if the item is already hidden. - if (item.key === MENU.SESSIONS && modules.includes(MODULES.OFFLINE_RECORDINGS)) { - item.hidden = true; - } + const isHidden = [ + (item.key === MENU.NOTES && modules.includes(MODULES.NOTES)), + (item.key === MENU.LIVE_SESSIONS || item.key === MENU.RECORDINGS) && modules.includes(MODULES.ASSIST), + (item.key === MENU.SESSIONS && modules.includes(MODULES.OFFLINE_RECORDINGS)), + (item.key === MENU.ALERTS && modules.includes(MODULES.ALERTS)), + (item.isAdmin && !isAdmin), + (item.isEnterprise && !isEnterprise) + ].some(cond => cond); - if (item.key === MENU.ALERTS && modules.includes(MODULES.ALERTS)) { - item.hidden = true; - } + return { ...item, hidden: isHidden }; + }) + }; }); - }); + }, [isAdmin, isEnterprise, isPreferencesActive, modules]); + React.useEffect(() => { const currentLocation = location.pathname; @@ -130,7 +137,7 @@ function SideMenu(props: Props) { }> Exit } - {(isPreferencesActive ? preferences : main_menu).map((category, index) => ( + {menu.map((category, index) => ( {index > 0 && } ({ modules: state.getIn(['user', 'account', 'settings', 'modules']) || [], activeTab: state.getIn(['search', 'activeTab', 'type']), + isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee', + account: state.getIn(['user', 'account']) }), { setActiveTab })(SideMenu)); diff --git a/frontend/app/layout/data.ts b/frontend/app/layout/data.ts index 0e001b740..33d94de75 100644 --- a/frontend/app/layout/data.ts +++ b/frontend/app/layout/data.ts @@ -10,6 +10,8 @@ export interface MenuItem { hidden?: boolean; disabled?: boolean; leading?: any; + isEnterprise?: boolean; + isAdmin?: boolean; } interface Category { @@ -69,7 +71,7 @@ export const categories: Category[] = [ key: 'assist', items: [ { label: 'Live Sessions', key: MENU.LIVE_SESSIONS, icon: 'broadcast' }, - { label: 'Recordings', key: MENU.RECORDINGS, icon: 'record-btn' } + { label: 'Recordings', key: MENU.RECORDINGS, icon: 'record-btn', isEnterprise: true } ] }, { @@ -112,11 +114,17 @@ export const preferences: Category[] = [ { label: 'Webhooks', key: PREFERENCES_MENU.WEBHOOKS, icon: 'link-45deg' }, { label: 'Modules', key: PREFERENCES_MENU.MODULES, icon: 'people' }, { label: 'Projects', key: PREFERENCES_MENU.PROJECTS, icon: 'folder2' }, - { label: 'Roles & Access', key: PREFERENCES_MENU.ROLES_ACCESS, icon: 'diagram-3' }, - { label: 'Audit', key: PREFERENCES_MENU.AUDIT, icon: 'list-ul' }, - { label: 'Team', key: PREFERENCES_MENU.TEAM, icon: 'people' }, - { label: 'Notifications', key: PREFERENCES_MENU.NOTIFICATIONS, icon: 'bell' } - // { label: 'Billing', key: PREFERENCES_MENU.BILLING, icon: 'bell' } + { + label: 'Roles & Access', + key: PREFERENCES_MENU.ROLES_ACCESS, + icon: 'diagram-3', + isEnterprise: true, + isAdmin: true + }, + { label: 'Audit', key: PREFERENCES_MENU.AUDIT, icon: 'list-ul', isAdmin: true }, + { label: 'Team', key: PREFERENCES_MENU.TEAM, icon: 'people', isAdmin: true }, + { label: 'Notifications', key: PREFERENCES_MENU.NOTIFICATIONS, icon: 'bell' }, + { label: 'Billing', key: PREFERENCES_MENU.BILLING, icon: 'bell', hidden: true } ] } ]; \ No newline at end of file