services in sidebar based on permissions

studio/src/components/GlobalNav/Sidebar.js

@@ -17,6 +17,7 @@ import {
 import Search from '../Search';
 import degaImg from '../../assets/dega.png';
 
+
 const { Sider } = Layout;
 const { SubMenu } = Menu;
 
@@ -85,24 +86,26 @@ function Sidebar({ permission, orgs, loading, applications, menuKey, signOut, or
     padding: '0.25rem 0.5rem',
   };
 
-  if (org_role === 'admin') {
-    resource = resource.concat(protectedResources);
-    if (!showCoreMenu) {
+  useEffect(() => {
+    if (org_role === 'admin' || orgs[0]?.role === 'admin') {
+      resource = resource.concat(protectedResources);
       setCoreMenu(true);
+    } else {
+      permission.forEach((each) => {
+        if (!showCoreMenu && protectedResources.includes(each.resource)) {
+          setCoreMenu(true);
+        }
+        resource.push(each.resource);
+      });
     }
-  } else {
-    permission.forEach((each) => {
-      if (!showCoreMenu && protectedResources.includes(each.resource)) {
-        setCoreMenu(true);
-      }
-      resource.push(each.resource);
-    });
-  }
+  }, [org_role, orgs, permission, showCoreMenu]);
+  const filteredServices = resource.filter((service) => {
+    return permission.some((perm) => perm.resource === service);
+  });
 
-  if (orgs[0]?.role === 'admin') resource = resource.concat(protectedResources);
   const getMenuItems = (children, index, title) =>
     children.map((route, childIndex) => {
-      return resource.includes(route.title.toLowerCase()) ? (
+      return filteredServices.includes(route.title.toLowerCase()) ? (
         ['Events'].indexOf(route.title) !== -1 ? null : (
           <Menu.Item key={route.menuKey}>
             <Link to={route.path}>
@@ -119,25 +122,16 @@ function Sidebar({ permission, orgs, loading, applications, menuKey, signOut, or
       title={menu.title}
       icon={<Icon style={{ color: '#000', fontSize: '15px', fontWeight: '700' }} />}
     >
-      {menu.submenu && menu.submenu.length > 0 ? (
-        <>
-          {menu.submenu.map((submenuItem, index) => {
-            return orgs[0]?.role === 'admin' ? (
-              <SubMenu key={submenuItem.title + index} title={submenuItem.title}>
-                {getMenuItems(submenuItem.children, index, submenuItem.title)}
-              </SubMenu>
-            ) : (
-              <SubMenu key={submenuItem.title + index} title={submenuItem.title}>
-                {getMenuItems(submenuItem.children, index, submenuItem.title)}
-              </SubMenu>
-            );
-          })}
-        </>
-      ) : null}
-      {getMenuItems(menu.children, index, menu.title)}
+     {menu.submenu && menu.submenu.length > 0 && (
+        menu.submenu.map((submenuItem) => (
+          <SubMenu key={submenuItem.title} title={submenuItem.title}>
+            {getMenuItems(submenuItem.children)}
+          </SubMenu>
+        ))
+      )}
+      {getMenuItems(menu.children)}
     </SubMenu>
   );
-
   return (
     <>
       <Sider

studio/src/layouts/basic.js

@@ -38,7 +38,6 @@ function BasicLayout(props) {
     loading,
     selected,
     applications,
-    services,
     org_role,
     session,
   } = useSelector((state) => {
@@ -55,7 +54,6 @@ function BasicLayout(props) {
         orgs: orgs,
         loading: loading,
         selected: selected,
-        services: space.services,
         org_role: space.org_role,
         session: state.session,
       };
@@ -66,7 +64,6 @@ function BasicLayout(props) {
       permission: [],
       selected: selected,
       applications: [],
-      services: ['core'],
       org_role,
       session: state.session,
     };
@@ -144,7 +141,7 @@ function BasicLayout(props) {
       location.pathname.includes('pages')) &&
     (location.pathname.includes('edit') || location.pathname.includes('create'));
 
-  function checkPermissions() {
+   /* function checkPermissions() {
     const requiredPermissions = permissionRequirements[location.pathname];
 
     if (!requiredPermissions) {
@@ -203,7 +200,7 @@ function BasicLayout(props) {
         />
       </div>
     );
-  }
+  } */
 
   return (
     <ConfigProvider
@@ -242,7 +239,6 @@ function BasicLayout(props) {
               orgs={orgs}
               loading={loading}
               applications={applications}
-              services={services}
               org_role={org_role}
             />
           </Layout>
@@ -257,7 +253,6 @@ function BasicLayout(props) {
             orgs={orgs}
             loading={loading}
             applications={applications}
-            services={services}
             signOut={children.props.handleLogout}
             org_role={org_role}
           />