fix(ui): menu check for admin and ee

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) => {
+  let menu: any[] = React.useMemo(() => {
-    category.items.forEach((item) => {
+    const sourceMenu = isPreferencesActive ? preferences : main_menu;
-      if (item.key === MENU.NOTES && modules.includes(MODULES.NOTES)) {
-        item.hidden = true;
-      }
 
-      if ((item.key === MENU.LIVE_SESSIONS || item.key === MENU.RECORDINGS) && modules.includes(MODULES.ASSIST)) {
+    return sourceMenu.map(category => {
-        item.hidden = true;
+      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)) {
+          const isHidden = [
-        item.hidden = true;
+            (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)) {
+          return { ...item, hidden: isHidden };
-        item.hidden = true;
+        })
-      }
+      };
     });
-  });
+  }, [isAdmin, isEnterprise, isPreferencesActive, modules]);
+
 
   React.useEffect(() => {
     const currentLocation = location.pathname;
@@ -130,7 +137,7 @@ function SideMenu(props: Props) {
           <Menu.Item key='exit' style={{ color: '#333', height: '32px' }} icon={<SVG name='arrow-bar-left' />}>
             <Text className='ml-2'>Exit</Text>
           </Menu.Item>}
-        {(isPreferencesActive ? preferences : main_menu).map((category, index) => (
+        {menu.map((category, index) => (
           <React.Fragment key={category.key}>
             {index > 0 && <Divider style={{ margin: '6px 0' }} />}
             <Menu.ItemGroup key={category.key}
@@ -173,4 +180,6 @@ function SideMenu(props: Props) {
 export default withRouter(connect((state: any) => ({
   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));

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: 'Roles & Access',
-      { label: 'Team', key: PREFERENCES_MENU.TEAM, icon: 'people' },
+        key: PREFERENCES_MENU.ROLES_ACCESS,
-      { label: 'Notifications', key: PREFERENCES_MENU.NOTIFICATIONS, icon: 'bell' }
+        icon: 'diagram-3',
-      // { label: 'Billing', key: PREFERENCES_MENU.BILLING, icon: 'bell' }
+        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 }
     ]
   }
 ];