✨ feat(menu): move menu settings to persistent menu

src/backend/menu/menu.service.ts

@@ -21,7 +21,7 @@ import {
 import { sortByList } from "shared/logic/entities/sort.utils";
 import { RolesApiService, rolesApiService } from "backend/roles/roles.service";
 import { ILabelValue } from "shared/types/options";
-import { portalCheckIfIsMenuAllowed } from "./portal";
+import { portalCheckIfIsMenuAllowed, getPortalMenuItems } from "./portal";
 
 const SYSTEM_LINKS_PERMISSION_MAP: Record<SystemLinks, string> = {
   [SystemLinks.Settings]: USER_PERMISSIONS.CAN_CONFIGURE_APP,
@@ -44,6 +44,12 @@ export class NavigationMenuApiService implements IApplicationService {
   }
 
   async getMenuItems(userRole: string) {
+    const portalMenuItems = await getPortalMenuItems(userRole);
+
+    if (portalMenuItems !== null) {
+      return portalMenuItems;
+    }
+
     const navItems = await this.generateMenuItems();
 
     return this.filterOutUserMenuItems(userRole, navItems);

src/backend/menu/portal/index.ts

@@ -1 +1 @@
-export { portalCheckIfIsMenuAllowed } from "./main";
+export { portalCheckIfIsMenuAllowed, getPortalMenuItems } from "./main";

src/backend/menu/portal/main.ts

@@ -9,3 +9,10 @@ export const portalCheckIfIsMenuAllowed = async (
   noop(menuItem, userRole, userPermissions);
   return false;
 };
+
+export const getPortalMenuItems = (
+  userRole: string
+): Promise<INavigationMenuItem[] | null> => {
+  noop(userRole);
+  return null;
+};

src/frontend/_layouts/app/LayoutImpl/Profile.tsx

@@ -60,6 +60,10 @@ export function ProfileOnNavigation({ isFullWidth }: IProps) {
       label: "My Account",
       value: NAVIGATION_LINKS.ACCOUNT.PROFILE,
     },
+    {
+      label: "Menu Settings",
+      value: NAVIGATION_LINKS.SETTINGS.MENU,
+    },
   ];
 
   return (

src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx

@@ -8,14 +8,15 @@ import {
 } from "shared/types/menu";
 import { NAVIGATION_LINKS } from "frontend/lib/routing/links";
 import { systemIconToSVG } from "shared/constants/Icons";
-import { ROOT_LINKS_TO_CLEAR_BREADCRUMBS } from "frontend/_layouts/app/constants";
 import { useSessionStorage } from "react-use";
 import { ChevronRight } from "react-feather";
 import { SYSTEM_COLORS } from "frontend/design-system/theme/system";
 import { Typo } from "frontend/design-system/primitives/Typo";
 import { PlainButton } from "frontend/design-system/components/Button/TextButton";
 import { Stack } from "frontend/design-system/primitives/Stack";
 import { useThemeColorShade } from "frontend/design-system/theme/useTheme";
+import { useNavigationStack } from "frontend/lib/routing/useNavigationStack";
+import { ActionIntegrationKeys } from "shared/types/actions";
 
 const StyledLeftSideNavMenuList = styled.li<{}>`
   list-style: none;
@@ -111,11 +112,13 @@ interface IProp {
 }
 
 const SYSTEM_LINK_MAP: Record<SystemLinks, string> = {
-  [SystemLinks.Settings]: ROOT_LINKS_TO_CLEAR_BREADCRUMBS.SETTINGS,
-  [SystemLinks.Home]: ROOT_LINKS_TO_CLEAR_BREADCRUMBS.HOME,
-  [SystemLinks.Roles]: ROOT_LINKS_TO_CLEAR_BREADCRUMBS.ROLES,
-  [SystemLinks.Users]: ROOT_LINKS_TO_CLEAR_BREADCRUMBS.USERS,
-  [SystemLinks.Actions]: ROOT_LINKS_TO_CLEAR_BREADCRUMBS.ACTIONS,
+  [SystemLinks.Settings]: NAVIGATION_LINKS.SETTINGS.DEFAULT,
+  [SystemLinks.Home]: NAVIGATION_LINKS.DASHBOARD.HOME,
+  [SystemLinks.Roles]: NAVIGATION_LINKS.ROLES.LIST,
+  [SystemLinks.Users]: NAVIGATION_LINKS.USERS.LIST,
+  [SystemLinks.Actions]: NAVIGATION_LINKS.INTEGRATIONS.ACTIONS(
+    ActionIntegrationKeys.HTTP
+  ),
   [SystemLinks.AllDashboards]: NAVIGATION_LINKS.DASHBOARD.CUSTOM.LIST,
 };
 
@@ -149,7 +152,7 @@ export function RenderNavigation({
     ""
   );
 
-  // const { clear } = useNavigationStack(); clear the screen on click
+  const { clear: clearBreadCrumbStack } = useNavigationStack();
 
   const getBackgroundColor = useThemeColorShade();
 
@@ -170,6 +173,7 @@ export function RenderNavigation({
                   $depth={depth}
                   hoverColor={getBackgroundColor("primary-color", 45)}
                   onClick={() => {
+                    clearBreadCrumbStack();
                     setIsFullWidth(true);
                     setActiveItem(isActive ? "" : id);
                   }}
@@ -209,6 +213,7 @@ export function RenderNavigation({
                   $isActive={isActive}
                   $depth={depth}
                   onClick={() => {
+                    clearBreadCrumbStack();
                     setActiveItem(id);
                   }}
                   target={

src/frontend/lib/routing/links.ts

@@ -46,7 +46,7 @@ export const NAVIGATION_LINKS = {
   SETTINGS: {
     DEFAULT: "/admin/settings/entities",
     ENTITIES: "/admin/settings/entities",
-    MENU_ENTITIES: "/admin/settings/menu-entities",
+    MENU: "/admin/settings/menu",
     SYSTEM: "/admin/settings/system",
     DATE: "/admin/settings/date",
     SITE: "/admin/settings/site",

src/frontend/lib/routing/useNavigationStack.ts

@@ -1,5 +1,4 @@
 import { createStore } from "frontend/lib/store";
-import { ROOT_LINKS_TO_CLEAR_BREADCRUMBS } from "frontend/_layouts/app/constants";
 import { useRouter } from "next/router";
 import { useEffect, useMemo } from "react";
 import { TemporayStorageService } from "frontend/lib/storage";
@@ -21,10 +20,6 @@ const handleHistoryMutation = (
     return [newEntry];
   }
 
-  if (Object.values(ROOT_LINKS_TO_CLEAR_BREADCRUMBS).includes(newEntry.link)) {
-    return [newEntry];
-  }
-
   const lastHistory = oldHistory.at(-1);
   // If the viewkey is the last then dont update it
   if (lastHistory.viewKey === newEntry.viewKey) {

src/frontend/views/settings/Entities/Menu.tsx → src/frontend/views/settings/Menu/index.tsx

@@ -1,9 +1,6 @@
 import { ViewStateMachine } from "frontend/components/ViewStateMachine";
 import { USER_PERMISSIONS } from "shared/constants/user";
 import { MAKE_APP_CONFIGURATION_CRUD_CONFIG } from "frontend/hooks/configuration/configuration.constant";
-import { DOCUMENTATION_LABEL } from "frontend/docs";
-import { useState } from "react";
-import { MenuEntitiesDocumentation } from "frontend/docs/menu-entities";
 import { useRouteParam } from "frontend/lib/routing/useRouteParam";
 import { useSetPageDetails } from "frontend/lib/routing/usePageDetails";
 import { useChangeRouterParam } from "frontend/lib/routing/useChangeRouterParam";
@@ -23,17 +20,15 @@ import {
 import { loadedDataState } from "frontend/lib/data/constants/loadedDataState";
 import { NAVIGATION_MENU_ENDPOINT } from "frontend/_layouts/app/LayoutImpl/constants";
 import { sortByList } from "shared/logic/entities/sort.utils";
+import { AppLayout } from "frontend/_layouts/app";
 import { SETTINGS_VIEW_KEY } from "../constants";
-import { BaseSettingsLayout } from "../_Base";
-import { EntitiesSelection } from "./Selection";
+import { EntitiesSelection } from "../Entities/Selection";
 
 const CRUD_CONFIG = MAKE_APP_CONFIGURATION_CRUD_CONFIG(
   "disabled_menu_entities"
 );
 
-const DOCS_TITLE = "Menu Entities";
-
-export function MenuEntitiesSettings() {
+export function MenuSettings() {
   const tabFromUrl = useRouteParam("tab");
 
   useSetPageDetails({
@@ -42,8 +37,6 @@ export function MenuEntitiesSettings() {
     permission: USER_PERMISSIONS.CAN_CONFIGURE_APP,
   });
 
-  const [isDocOpen, setIsDocOpen] = useState(false);
-
   const changeTabParam = useChangeRouterParam("tab");
 
   const menuEntitiesToHide = useAppConfiguration<string[]>(
@@ -92,17 +85,8 @@ export function MenuEntitiesSettings() {
     menuEntitiesOrder.isLoading;
 
   return (
-    <BaseSettingsLayout>
-      <SectionBox
-        title={CRUD_CONFIG.TEXT_LANG.TITLE}
-        iconButtons={[
-          {
-            action: () => setIsDocOpen(true),
-            icon: "help",
-            label: DOCUMENTATION_LABEL.CONCEPT(DOCS_TITLE),
-          },
-        ]}
-      >
+    <AppLayout>
+      <SectionBox title="" headLess>
         <Tabs
           currentTab={tabFromUrl}
           onChange={changeTabParam}
@@ -137,8 +121,7 @@ export function MenuEntitiesSettings() {
                   loader={<ListSkeleton count={20} />}
                 >
                   <SortList
-                    data={loadedDataState([])}
-                    // TODO change to orders
+                    data={loadedDataState(menuEntities)}
                     onSave={
                       upsertEntitiesOrderMutation.mutateAsync as (
                         data: string[]
@@ -151,11 +134,6 @@ export function MenuEntitiesSettings() {
           ]}
         />
       </SectionBox>
-      <MenuEntitiesDocumentation
-        title={DOCS_TITLE}
-        close={setIsDocOpen}
-        isOpen={isDocOpen}
-      />
-    </BaseSettingsLayout>
+    </AppLayout>
   );
 }

src/frontend/views/settings/_Base.tsx

@@ -9,7 +9,6 @@ import {
   GitHub,
   Book,
   Terminal,
-  Table,
 } from "react-feather";
 import {
   IMenuSectionItem,
@@ -33,12 +32,6 @@ const baseMenuItems: IMenuSectionItem[] = [
     IconComponent: Columns,
     order: 10,
   },
-  {
-    action: NAVIGATION_LINKS.SETTINGS.MENU_ENTITIES,
-    name: "Menu Entities",
-    IconComponent: Table,
-    order: 20,
-  },
   {
     action: NAVIGATION_LINKS.SETTINGS.THEME,
     name: "Theme",

src/pages/admin/settings/menu.tsx

@@ -0,0 +1,3 @@
+import { MenuSettings } from "frontend/views/settings/Menu";
+
+export default MenuSettings;

src/shared/configurations/constants.ts

@@ -118,11 +118,11 @@ export const CONFIGURATION_KEYS: Record<
     defaultValue: [],
   },
   disabled_menu_entities: {
-    crudConfigLabel: "Menu Entities Settings",
+    crudConfigLabel: "Menu Settings",
     defaultValue: [],
   },
   menu_entities_order: {
-    crudConfigLabel: "Menu Entities Settings",
+    crudConfigLabel: "Menu Settings",
     defaultValue: [],
   },
   default_date_format: {