@buerokratt-ria/menu 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All changes to this project will be documented in this file.
 
+## [0.1.12] - 07-06-2024
+
+- Add dynamic hidden menu items
+- Refactor code for better readability
+- Remove unnecessary component arguments
+
 ## [0.1.11] - 30-05-2024
 
 - Hide some Training Module menu items from production

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/menu",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Generic MainNavigation component that would be injected as dependency.",
   "main": "index.js",
   "scripts": {},

package/src/menu/components/menuTree/index.tsx

@@ -0,0 +1,62 @@
+import React, { FC, MouseEvent } from "react";
+import { NavLink } from 'react-router-dom';
+import { MdKeyboardArrowDown } from 'react-icons/md';
+import { MenuItem } from "../../types/menuItem";
+import { useTranslation } from "react-i18next";
+import { menuData } from './menuData';
+import Icon from "../icons/icon/icon";
+import { isSameRoot } from "./isSameRoot";
+import clsx from 'clsx';
+import '../../main-navigation.scss';
+
+interface MenuTreeProps {
+  menuItems: MenuItem[];
+  serviceId: string[];
+  handleNavToggle: (event: MouseEvent) => void;
+}
+
+const MenuTree: FC<MenuTreeProps> = ({
+  menuItems, 
+  serviceId, 
+  handleNavToggle,
+}) => {
+  const currentlySelectedLanguage = useTranslation().i18n.language;
+
+  return menuItems.map((menuItem) => (
+      <li key={menuItem.label[currentlySelectedLanguage]}>
+        {!!menuItem.children ? (
+            <>
+              <button
+                className={clsx('nav__toggle', { 'nav__toggle--icon': !!menuItem.id })}
+                aria-expanded={menuItem.path && (isSameRoot(menuItem, serviceId)) ? 'true' : 'false'}
+                onClick={handleNavToggle}
+              >
+                {menuItem.id && (
+                  <Icon icon={menuData.find(dataItem => dataItem.id === menuItem.id)?.icon} size='large' />
+                )}
+                <span className='menu-item-title'>{menuItem.label[currentlySelectedLanguage]}</span>
+                <Icon icon={<MdKeyboardArrowDown />} className='menu-item-arrow' />
+              </button>
+              <ul className='nav__submenu'>
+                <MenuTree
+                  menuItems={menuItem.children.map((item)  => ({id: menuItem.id, ...item}))}
+                  serviceId={serviceId}
+                  handleNavToggle={handleNavToggle}
+                />
+              </ul>
+            </>
+        ) : (
+          serviceId.includes(menuItem.id!)
+            ? <NavLink to={menuItem.path || '#'}>
+                {menuItem.label[currentlySelectedLanguage]}
+              </NavLink>
+            : <a href={(menuData.find(dataItem => dataItem.id === menuItem.id)?.url ?? '') + menuItem.path}>
+                {menuItem.label[currentlySelectedLanguage]}
+              </a>
+        )}
+      </li>
+    ),
+  );
+}
+
+export default MenuTree;

package/src/menu/components/menuTree/isSameRoot.ts

@@ -0,0 +1,10 @@
+import { MenuItem } from "../../types/menuItem";
+
+export const isSameRoot = (menuItem, serviceId) => {
+  const base = window.location.pathname.split("/")[1];
+  const currentService = base === 'chat' ? serviceId : [base];
+  if(currentService.includes(menuItem.id)) {
+    return menuItem.children.some((item: MenuItem) => item.path?.includes("/" + window.location.pathname.split("/")[2]));
+  }
+  return false;
+}

package/src/menu/components/menuTree/menuData.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  MdOutlineForum, 
+  MdOutlineAdb, 
+  MdOutlineEqualizer, 
+  MdMiscellaneousServices, 
+  MdSettings, 
+  MdOutlineMonitorWeight,
+} from 'react-icons/md';
+
+export const menuData = [
+  {
+    id: 'conversations',
+    icon: <MdOutlineForum className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_CONVERSATIONS_BASE_URL,
+  },
+  {
+    id: 'training',
+    icon: <MdOutlineAdb className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_TRAINING_BASE_URL,
+  },
+  {
+    id: 'analytics',
+    icon: <MdOutlineEqualizer className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_ANALYTICS_BASE_URL,
+  },
+  {
+    id: "services",
+    icon: <MdMiscellaneousServices className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_SERVICES_BASE_URL,
+  },
+  {
+    id: 'settings',
+    icon: <MdSettings className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_SETTINGS_BASE_URL,
+  },
+  {
+    id: 'monitoring',
+    icon: <MdOutlineMonitorWeight className='menu-item-icon' />,
+    url: import.meta.env.REACT_APP_MONITORING_BASE_URL,
+  },
+];

package/src/menu/data/menu-structure.json

@@ -60,7 +60,7 @@
             "path": "/training/intents"
           },
           {
-            "hiddenMode": "production",
+            "hidden": true,
             "label": {
               "et": "Avalikud teemad",
               "en": "Public themes"
@@ -89,7 +89,7 @@
             "path": "/training/stories"
           },
           {
-            "hiddenMode": "production",
+            "hidden": true,
             "label": {
               "et": "Konfiguratsioon",
               "en": "Configuration"
@@ -111,7 +111,7 @@
             "path": "/training/slots"
           },
           {
-            "hiddenMode": "production",
+            "hidden": true,
             "label": {
               "et": "Automatic Teenused",
               "en": "Automatic Services"
@@ -135,7 +135,7 @@
             "path": "/history/history"
           },
           {
-            "hiddenMode": "production",
+            "hidden": true,
             "label": {
               "et": "Pöördumised",
               "en": "Appeals"
@@ -166,7 +166,7 @@
             "path": "/analytics/models"
           },
           {
-            "hiddenMode": "production",
+            "hidden": true,
             "label": {
               "et": "Testlood",
               "en": "testTracks"
@@ -231,7 +231,7 @@
   },
   {
     "id": "services",
-    "hiddenMode": "production",
+    "hidden": true,
     "label": {
       "et": "Teenused",
       "en": "Services"
@@ -338,7 +338,7 @@
   },
   {
     "id": "monitoring",
-    "hiddenMode": "production",
+    "hidden": true,
     "label": {
       "et": "Seire",
       "en": "Monitoring"
@@ -353,14 +353,5 @@
         "path": "/uptime"
       }
     ]
-  },
-  {
-    "id":"hidden-item",
-    "label": {
-      "et": "Peidetud",
-      "en": "Hidden"
-    },
-    "path": "/hidden",
-    "hidden": true
   }
 ]

package/src/menu/hooks/useFilteredMenuItems.tsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { MenuItem } from "../types/menuItem";
+import useMenuItems from "./useMenuItems";
+
+const useFilteredMenuItems = () => {
+  const items = useMenuItems();
+  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
+
+  useQuery({
+    queryKey: ['accounts/user-role', 'prod'],
+    onSuccess: (res: any) => {
+      const filteredItems = items.filter((item) => {
+        const role = res.response;
+        if (role.includes('ROLE_ADMINISTRATOR'))
+          return item.id;
+        if (role.includes('ROLE_SERVICE_MANAGER'))
+          return item.id != "settings" && item.id != "training";
+        if (role.includes('ROLE_CUSTOMER_SUPPORT_AGENT'))
+          return item.id != "settings" && item.id != "analytics";
+        if (role.includes('ROLE_CHATBOT_TRAINER'))
+          return item.id != "settings" && item.id != "conversations";
+        if (role.includes('ROLE_ANALYST'))
+          return item.id == "analytics" || item.id == "monitoring"; 
+      });
+      setMenuItems(filteredItems ?? []);
+    },
+  });
+
+  return menuItems;
+}
+
+export default useFilteredMenuItems;

package/src/menu/hooks/useMenuItems.tsx

@@ -0,0 +1,49 @@
+import { useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import menuStructure from '../data/menu-structure.json';
+import { MenuItem } from "../types/menuItem";
+
+const useMenuItems = () => {
+  const externalMenuItems = import.meta.env.REACT_APP_MENU_JSON;
+
+  const [mainMenuItems, setMainMenuItems] = useState<MenuItem[] | null>([]);
+
+  useQuery({
+    enabled: !externalMenuItems,
+    queryKey: [import.meta.env.REACT_APP_MENU_URL + import.meta.env.REACT_APP_MENU_PATH],
+    onSuccess: (res: any) => {
+      try {
+        setMainMenuItems(res);
+      } catch (e) {
+        setMainMenuItems(null);
+        console.error(e);
+      }
+      setCache(res);
+    },
+    onError: () => {
+      const cached = getCache();
+      if(cached.length > 0) 
+        setMainMenuItems(cached);
+      else
+        setMainMenuItems(null);
+    },
+  });
+
+  const items = useMemo(() => {
+    const allItems = externalMenuItems ?? mainMenuItems ?? menuStructure ?? [];
+    return allItems.filter(x => !x.hidden);
+  }, [externalMenuItems, mainMenuItems, menuStructure]);
+  
+  return items;
+}
+
+function getCache(): any {
+  const cache = localStorage.getItem('mainmenu-cache') ?? '[]';
+  return JSON.parse(cache);
+}
+
+function setCache(res: any) {
+  localStorage.setItem('mainmenu-cache', JSON.stringify(res));
+}
+
+export default useMenuItems;

package/src/menu/index.tsx

@@ -1,103 +1,19 @@
-import React, { FC, MouseEvent, useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import React, { FC, MouseEvent, useState, useMemo } from 'react';
 import clsx from 'clsx';
 import {
-    MdOutlineForum, 
-    MdOutlineAdb, 
-    MdOutlineEqualizer, 
-    MdKeyboardArrowDown, 
-    MdMiscellaneousServices, 
-    MdSettings, 
-    MdOutlineMonitorWeight,
     MdKeyboardArrowRight,
     MdKeyboardArrowLeft,
 } from 'react-icons/md';
 import Icon from './components/icons/icon/icon';
-import './main-navigation.scss';
-import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from "react-i18next";
-import menuStructure from './data/menu-structure.json';
-import { isHiddenFeaturesEnabled } from './constants';
-
-interface MenuItem {
-  id?: string;
-  label: TranslatedLabel;
-  path?: string;
-  target?: '_blank' | '_self';
-  children?: MenuItem[];
-  hidden?: boolean;
-  hiddenMode?: 'production' | 'development' | 'staging' | 'testing';
-}
-
-interface TranslatedLabel {
-  [lang: string] : string;
-}
-
-const MainNavigation: FC<{items: MenuItem[], serviceId: string[]}> = ( {items, serviceId}) => {
-  if(!items.isArray || items.length === 0) {
-    items = menuStructure;
-  }
-
-  const { t, i18n } = useTranslation();
-  const currentlySelectedLanguage = i18n.language;
-  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
-  
-  const menuData = [
-    {
-      id: 'conversations',
-      icon: <MdOutlineForum className='menu-item-icon' />,
-      url: import.meta.env.REACT_APP_CONVERSATIONS_BASE_URL,
-    },
-    {
-      id: 'training',
-      icon: <MdOutlineAdb className='menu-item-icon' />,
-      url: import.meta.env.REACT_APP_TRAINING_BASE_URL,
-    },
-    {
-      id: 'analytics',
-      icon: <MdOutlineEqualizer className='menu-item-icon' />,
-      url: import.meta.env.REACT_APP_ANALYTICS_BASE_URL,
-    },
-    {
-      id: "services",
-      icon: <MdMiscellaneousServices className='menu-item-icon' />,
-      url: import.meta.env.REACT_APP_SERVICES_BASE_URL,
-    },
-    {
-      id: 'settings',
-      icon: <MdSettings className='menu-item-icon' />,
-      url: import.meta.env.REACT_APP_SETTINGS_BASE_URL,
-    },
-    {
-      id: 'monitoring',
-      icon: <MdOutlineMonitorWeight className='menu-item-icon' />,
-      url: import.meta.env.REACT_APP_MONITORING_BASE_URL,
-    },
-  ];
+import MenuTree from './components/menuTree';
+import useFilteredMenuItems from './hooks/useFilteredMenuItems';
+import './main-navigation.scss';
 
-  useQuery({
-    queryKey: ['accounts/user-role', 'prod'],
-    onSuccess: (res: any) => {
-      const filteredItems =
-          items.filter((item) => {
-            const role = res.response;
-            if (role.includes('ROLE_ADMINISTRATOR')) {
-              return item.id;
-            } else if (role.includes('ROLE_SERVICE_MANAGER')) {
-              return item.id != "settings" && item.id != "training";
-            } else if (role.includes('ROLE_CUSTOMER_SUPPORT_AGENT')) {
-              return item.id != "settings" && item.id != "analytics";
-            } else if (role.includes('ROLE_CHATBOT_TRAINER')) {
-              return item.id != "settings" && item.id != "conversations";
-            }  else if (role.includes('ROLE_ANALYST')) {
-              return item.id == "analytics" || item.id == "monitoring";
-            } else {
-              return;
-            }
-          }) ?? [];
-      setMenuItems(filteredItems);
-    },
-  });
+const MainNavigation: FC = () => {
+  const { t } = useTranslation();
+  const menuItems = useFilteredMenuItems();
+  const serviceId = useMemo(() => import.meta.env.REACT_APP_SERVICE_ID.split(','), []);
 
   const [navCollapsed, setNavCollapsed] = useState(false);
 
@@ -107,52 +23,6 @@ const MainNavigation: FC<{items: MenuItem[], serviceId: string[]}> = ( {items, s
     event.currentTarget.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
   };
 
-  const renderMenuTree = (menuItems: MenuItem[]) => {
-    return menuItems
-    .filter(x => !x.hidden)
-    .filter(x => isHiddenFeaturesEnabled || x.hiddenMode !== "production")
-    .map((menuItem) => (
-        <li key={menuItem.label[currentlySelectedLanguage]}>
-          {!!menuItem.children ? (
-              <>
-                <button
-                  className={clsx('nav__toggle', { 'nav__toggle--icon': !!menuItem.id })}
-                  aria-expanded={menuItem.path && (isSameRoot(menuItem)) ? 'true' : 'false'}
-                  onClick={handleNavToggle}
-                >
-                  {menuItem.id && (
-                    <Icon icon={menuData.find(dataItem => dataItem.id === menuItem.id)?.icon} size='large' />
-                  )}
-                  <span className='menu-item-title'>{menuItem.label[currentlySelectedLanguage]}</span>
-                  <Icon icon={<MdKeyboardArrowDown />} className='menu-item-arrow' />
-                </button>
-                <ul className='nav__submenu'>
-                  {renderMenuTree(menuItem.children.map((item)  => ({id: menuItem.id, ...item})))}
-                </ul>
-              </>
-          ) : (
-            serviceId.includes(menuItem.id)
-              ? <NavLink to={menuItem.path || '#'}>
-                  {menuItem.label[currentlySelectedLanguage]}
-                </NavLink>
-              : <a href={menuData.find(dataItem => dataItem.id === menuItem.id)?.url + menuItem.path}>
-                  {menuItem.label[currentlySelectedLanguage]}
-                </a>
-          )}
-        </li>
-      ),
-    );
-  };
-
-  const base = window.location.pathname.split("/")[1];
-  const currentService = base === 'chat' ? serviceId : [base];
-  const isSameRoot = (menuItem) => {
-    if(currentService.includes(menuItem.id)) {
-      return menuItem.children.some((item: MenuItem) => item.path?.includes("/" + window.location.pathname.split("/")[2]));
-    }
-    return false;
-  }
-
   if (!menuItems) return null;
 
   return (
@@ -166,7 +36,11 @@ const MainNavigation: FC<{items: MenuItem[], serviceId: string[]}> = ( {items, s
         <span className='menu-item-title'>{t('mainMenu.closeMenu')}</span>
       </button>
       <ul className='nav__menu'>
-        {renderMenuTree(menuItems)}
+        <MenuTree
+          menuItems={menuItems}
+          serviceId={serviceId}
+          handleNavToggle={handleNavToggle}
+        />
       </ul>
     </nav>
   );

package/src/menu/types/menuItem.ts

@@ -0,0 +1,13 @@
+
+export  interface TranslatedLabel {
+  [lang: string] : string;
+}
+
+export interface MenuItem {
+  id?: string;
+  label: TranslatedLabel;
+  path?: string;
+  target?: '_blank' | '_self';
+  children?: MenuItem[];
+  hidden?: boolean;
+}

package/src/menu/constants.ts

@@ -1,3 +0,0 @@
-export const isHiddenFeaturesEnabled = 
-  import.meta.env.REACT_APP_ENABLE_HIDDEN_FEATURES?.toLowerCase().trim() == 'true' ||
-  import.meta.env.REACT_APP_ENABLE_HIDDEN_FEATURES?.toLowerCase().trim() == '1';