From b7a5989a5e09fb36dfcaf3cb06d6eac6fcc2bc74 Mon Sep 17 00:00:00 2001 From: Ayobami Akingbade Date: Thu, 21 Sep 2023 22:13:45 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(menu):=20move=20menu=20setting?= =?UTF-8?q?s=20to=20persistent=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/backend/menu/menu.service.ts | 8 ++++- src/backend/menu/portal/index.ts | 2 +- src/backend/menu/portal/main.ts | 7 ++++ .../_layouts/app/LayoutImpl/Profile.tsx | 4 +++ .../app/LayoutImpl/RenderNavigation.tsx | 19 ++++++---- .../app/appendPortalMenuItems/portal/index.ts | 1 - .../app/appendPortalMenuItems/portal/main.ts | 7 ---- src/frontend/_layouts/app/constants.ts | 11 ------ src/frontend/docs/menu-entities.tsx | 13 ------- src/frontend/lib/routing/links.ts | 2 +- .../lib/routing/useNavigationStack.ts | 5 --- .../{Entities/Menu.tsx => Menu/index.tsx} | 36 ++++--------------- src/frontend/views/settings/_Base.tsx | 7 ---- src/pages/admin/settings/menu-entities.tsx | 3 -- src/pages/admin/settings/menu.tsx | 3 ++ src/shared/configurations/constants.ts | 4 +-- 16 files changed, 44 insertions(+), 88 deletions(-) delete mode 100644 src/frontend/_layouts/app/appendPortalMenuItems/portal/index.ts delete mode 100644 src/frontend/_layouts/app/appendPortalMenuItems/portal/main.ts delete mode 100644 src/frontend/_layouts/app/constants.ts delete mode 100644 src/frontend/docs/menu-entities.tsx rename src/frontend/views/settings/{Entities/Menu.tsx => Menu/index.tsx} (82%) delete mode 100644 src/pages/admin/settings/menu-entities.tsx create mode 100644 src/pages/admin/settings/menu.tsx diff --git a/src/backend/menu/menu.service.ts b/src/backend/menu/menu.service.ts index 9212014cf..911aa64fe 100644 --- a/src/backend/menu/menu.service.ts +++ b/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.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); diff --git a/src/backend/menu/portal/index.ts b/src/backend/menu/portal/index.ts index a71fe9fba..ea5ddf177 100644 --- a/src/backend/menu/portal/index.ts +++ b/src/backend/menu/portal/index.ts @@ -1 +1 @@ -export { portalCheckIfIsMenuAllowed } from "./main"; +export { portalCheckIfIsMenuAllowed, getPortalMenuItems } from "./main"; diff --git a/src/backend/menu/portal/main.ts b/src/backend/menu/portal/main.ts index 1300e89ec..6bb52536b 100644 --- a/src/backend/menu/portal/main.ts +++ b/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 => { + noop(userRole); + return null; +}; diff --git a/src/frontend/_layouts/app/LayoutImpl/Profile.tsx b/src/frontend/_layouts/app/LayoutImpl/Profile.tsx index 8acd66bfd..00497c1df 100644 --- a/src/frontend/_layouts/app/LayoutImpl/Profile.tsx +++ b/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 ( diff --git a/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx b/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx index c2db4fb7f..c34e66604 100644 --- a/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx +++ b/src/frontend/_layouts/app/LayoutImpl/RenderNavigation.tsx @@ -8,7 +8,6 @@ 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"; @@ -16,6 +15,8 @@ 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.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={ diff --git a/src/frontend/_layouts/app/appendPortalMenuItems/portal/index.ts b/src/frontend/_layouts/app/appendPortalMenuItems/portal/index.ts deleted file mode 100644 index 49f895166..000000000 --- a/src/frontend/_layouts/app/appendPortalMenuItems/portal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useAppendPortalMenuItems } from "./main"; diff --git a/src/frontend/_layouts/app/appendPortalMenuItems/portal/main.ts b/src/frontend/_layouts/app/appendPortalMenuItems/portal/main.ts deleted file mode 100644 index ce4abd2d6..000000000 --- a/src/frontend/_layouts/app/appendPortalMenuItems/portal/main.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { IAppMenuItems } from "../../types"; - -export const useAppendPortalMenuItems = () => { - return (menuItems: IAppMenuItems[]) => { - return menuItems; - }; -}; diff --git a/src/frontend/_layouts/app/constants.ts b/src/frontend/_layouts/app/constants.ts deleted file mode 100644 index df8028a3e..000000000 --- a/src/frontend/_layouts/app/constants.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { NAVIGATION_LINKS } from "frontend/lib/routing/links"; -import { ActionIntegrationKeys } from "shared/types/actions"; - -export const ROOT_LINKS_TO_CLEAR_BREADCRUMBS = { - HOME: NAVIGATION_LINKS.DASHBOARD.HOME, - SETTINGS: NAVIGATION_LINKS.SETTINGS.DEFAULT, - USERS: NAVIGATION_LINKS.USERS.LIST, - ACCOUNT: NAVIGATION_LINKS.ACCOUNT.PROFILE, - ROLES: NAVIGATION_LINKS.ROLES.LIST, - ACTIONS: NAVIGATION_LINKS.INTEGRATIONS.ACTIONS(ActionIntegrationKeys.HTTP), -}; diff --git a/src/frontend/docs/menu-entities.tsx b/src/frontend/docs/menu-entities.tsx deleted file mode 100644 index 669c734a3..000000000 --- a/src/frontend/docs/menu-entities.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { DocumentationRoot, IDocumentationRootProps } from "./_base"; - -export function MenuEntitiesDocumentation(props: IDocumentationRootProps) { - return ( - -

- Here you will be able to select the entities that will be shown on the - entities menu sidebar. You can also reorder them on the{" "} - Order to control how they appear on the sidebar. -

- - ); -} diff --git a/src/frontend/lib/routing/links.ts b/src/frontend/lib/routing/links.ts index 03304cdc3..38e2701d8 100644 --- a/src/frontend/lib/routing/links.ts +++ b/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", diff --git a/src/frontend/lib/routing/useNavigationStack.ts b/src/frontend/lib/routing/useNavigationStack.ts index 97b297dd2..d5d682ce8 100644 --- a/src/frontend/lib/routing/useNavigationStack.ts +++ b/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) { diff --git a/src/frontend/views/settings/Entities/Menu.tsx b/src/frontend/views/settings/Menu/index.tsx similarity index 82% rename from src/frontend/views/settings/Entities/Menu.tsx rename to src/frontend/views/settings/Menu/index.tsx index a6519bcc0..805757d24 100644 --- a/src/frontend/views/settings/Entities/Menu.tsx +++ b/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( @@ -92,17 +85,8 @@ export function MenuEntitiesSettings() { menuEntitiesOrder.isLoading; return ( - - setIsDocOpen(true), - icon: "help", - label: DOCUMENTATION_LABEL.CONCEPT(DOCS_TITLE), - }, - ]} - > + + } > - - + ); } diff --git a/src/frontend/views/settings/_Base.tsx b/src/frontend/views/settings/_Base.tsx index 04d4e775b..548df9eb5 100644 --- a/src/frontend/views/settings/_Base.tsx +++ b/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", diff --git a/src/pages/admin/settings/menu-entities.tsx b/src/pages/admin/settings/menu-entities.tsx deleted file mode 100644 index 98ce7525e..000000000 --- a/src/pages/admin/settings/menu-entities.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { MenuEntitiesSettings } from "frontend/views/settings/Entities/Menu"; - -export default MenuEntitiesSettings; diff --git a/src/pages/admin/settings/menu.tsx b/src/pages/admin/settings/menu.tsx new file mode 100644 index 000000000..bf7090cda --- /dev/null +++ b/src/pages/admin/settings/menu.tsx @@ -0,0 +1,3 @@ +import { MenuSettings } from "frontend/views/settings/Menu"; + +export default MenuSettings; diff --git a/src/shared/configurations/constants.ts b/src/shared/configurations/constants.ts index 20da1a316..1223135f9 100644 --- a/src/shared/configurations/constants.ts +++ b/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: {