fix: permissioned tabs menus

Author: jsers

src/components/pageLayout/PageLayoutWithTabs/TabMenu.tsx

@@ -1,7 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import _ from 'lodash';
 
+import { CommonStateContext } from '@/App';
 import { getStorageKey } from '@/components/SideMenu/utils';
 import { MenuMatchResult } from '@/components/SideMenu/types';
 
@@ -12,9 +14,15 @@ interface TabMenuProps {
   onTabChange?: (key: string) => void;
 }
 
+const calcUrlPath = (url: string) => {
+  const urlPath = url.split('?')[0];
+  return urlPath;
+};
+
 export const TabMenu: React.FC<TabMenuProps> = ({ currentMenu, onTabChange }) => {
   const history = useHistory();
   const { t } = useTranslation('sideMenu');
+  const { perms } = useContext(CommonStateContext);
   const [activeTab, setActiveTab] = useState('');
 
   useEffect(() => {
@@ -27,9 +35,13 @@ export const TabMenu: React.FC<TabMenuProps> = ({ currentMenu, onTabChange }) =>
     return null;
   }
 
+  const permissionedMenus = _.filter(currentMenu.parentItem.children, (item) => {
+    return _.includes(perms, calcUrlPath(item.key));
+  });
+
   return (
     <div className='flex items-center gap-0 h-[50px] -mt-[10px] -mb-[10px] border-b border-fc-200'>
-      {currentMenu.parentItem.children.map((item) => (
+      {_.map(permissionedMenus, (item) => (
         <div
           key={item.key}
           className={`relative px-5 h-full header-tab-menu flex items-center cursor-pointer text-sm transition-colors duration-300 ${