From fa8c59360addd147f975c7cbf8e0ed94b536c49c Mon Sep 17 00:00:00 2001 From: Prakash Senthil Vel <23444145+prakashsvmx@users.noreply.github.com> Date: Tue, 29 Mar 2022 16:31:54 +0000 Subject: [PATCH] Fix sidebar navigation state (#1775) Fix sidebar navigation state --- .../src/common/SecureComponent/permissions.ts | 5 +- portal-ui/src/screens/Console/Console.tsx | 2 +- .../screens/Console/Menu/ConsoleMenuList.tsx | 33 ++++---- .../src/screens/Console/Menu/MenuItem.tsx | 82 +++++++++++++------ portal-ui/src/screens/Console/Tools/Tools.tsx | 2 +- portal-ui/src/screens/Console/valid-routes.ts | 2 +- portal-ui/tests/permissions-2/inspect.ts | 4 +- 7 files changed, 82 insertions(+), 48 deletions(-) diff --git a/portal-ui/src/common/SecureComponent/permissions.ts b/portal-ui/src/common/SecureComponent/permissions.ts index 1305ba2f9..e8e6a7002 100644 --- a/portal-ui/src/common/SecureComponent/permissions.ts +++ b/portal-ui/src/common/SecureComponent/permissions.ts @@ -133,7 +133,7 @@ export const IAM_PAGES = { DASHBOARD: "/tools/metrics", TOOLS_HEAL: "/tools/heal", TOOLS_WATCH: "/tools/watch", - TOOLS_INSPECT: "/tools/inspect", + /* Health */ HEALTH: "/health", @@ -144,6 +144,7 @@ export const IAM_PAGES = { TOOLS_SPEEDTEST: "/support/speedtest", CALL_HOME: "/support/call-home", PROFILE: "/support/profile", + SUPPORT_INSPECT: "/support/inspect", /** License **/ LICENSE: "/license", @@ -367,7 +368,7 @@ export const IAM_PAGES_PERMISSIONS = { [IAM_PAGES.CALL_HOME]: [IAM_SCOPES.ADMIN_HEALTH_INFO], [IAM_PAGES.PROFILE]: [IAM_SCOPES.ADMIN_HEALTH_INFO], [IAM_PAGES.HEALTH]: [IAM_SCOPES.ADMIN_HEALTH_INFO], - [IAM_PAGES.TOOLS_INSPECT]: [IAM_SCOPES.ADMIN_HEALTH_INFO], + [IAM_PAGES.SUPPORT_INSPECT]: [IAM_SCOPES.ADMIN_HEALTH_INFO], [IAM_PAGES.LICENSE]: [ IAM_SCOPES.ADMIN_SERVER_INFO, IAM_SCOPES.ADMIN_CONFIG_UPDATE, diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx index b569985db..7b74193b4 100644 --- a/portal-ui/src/screens/Console/Console.tsx +++ b/portal-ui/src/screens/Console/Console.tsx @@ -327,7 +327,7 @@ const Console = ({ }, { component: Tools, - path: IAM_PAGES.TOOLS_INSPECT, + path: IAM_PAGES.SUPPORT_INSPECT, }, { component: ConfigurationOptions, diff --git a/portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx b/portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx index 2af396415..7d7527ca5 100644 --- a/portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx +++ b/portal-ui/src/screens/Console/Menu/ConsoleMenuList.tsx @@ -30,6 +30,8 @@ import { import MenuItem from "./MenuItem"; import { useLocation } from "react-router-dom"; +import { IAM_PAGES } from "../../../common/SecureComponent/permissions"; + const ConsoleMenuList = ({ menuItems, onLogoutClick, @@ -41,22 +43,21 @@ const ConsoleMenuList = ({ }) => { const stateClsName = isOpen ? "wide" : "mini"; const { pathname = "" } = useLocation(); - let selectedMenuGroup = pathname.slice(1, pathname.length); //single path - if (selectedMenuGroup.indexOf("/") !== -1) { - selectedMenuGroup = selectedMenuGroup.slice( - 0, - selectedMenuGroup.indexOf("/") - ); //nested path + let groupToSelect = pathname.slice(1, pathname.length); //single path + if (groupToSelect.indexOf("/") !== -1) { + groupToSelect = groupToSelect.slice(0, groupToSelect.indexOf("/")); //nested path } - const [openGroup, setOpenGroup] = useState(selectedMenuGroup); + const [expandGroup, setExpandGroup] = useState(IAM_PAGES.BUCKETS); + const [selectedMenuItem, setSelectedMenuItem] = + useState(groupToSelect); - const [expandedGroup, setExpandedGroup] = useState(selectedMenuGroup); + const [previewMenuGroup, setPreviewMenuGroup] = useState(""); useEffect(() => { - //in case of redirects. - setOpenGroup(selectedMenuGroup); - }, [selectedMenuGroup]); + setExpandGroup(groupToSelect); + setSelectedMenuItem(groupToSelect); + }, [groupToSelect]); return ( ); } diff --git a/portal-ui/src/screens/Console/Menu/MenuItem.tsx b/portal-ui/src/screens/Console/Menu/MenuItem.tsx index 57f94f749..2cda7fd1d 100644 --- a/portal-ui/src/screens/Console/Menu/MenuItem.tsx +++ b/portal-ui/src/screens/Console/Menu/MenuItem.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { Suspense } from "react"; +import React, { Suspense, useCallback } from "react"; import { Collapse, ListItem, @@ -44,20 +44,24 @@ const MenuItem = ({ page, stateClsName = "", onExpand, - selectedMenuGroup, + selectedMenuItem, pathValue = "", expandedGroup = "", - setSelectedMenuGroup, + setSelectedMenuItem, id = `${Math.random()}`, + setPreviewMenuGroup, + previewMenuGroup, }: { page: any; stateClsName?: string; - onExpand?: (id: any) => void; - selectedMenuGroup?: any; + setSelectedMenuItem: (value: string) => void; + selectedMenuItem?: any; pathValue?: string; + onExpand: (id: any) => void; expandedGroup?: string; - setSelectedMenuGroup?: (value: string) => void; id?: string; + setPreviewMenuGroup: (value: string) => void; + previewMenuGroup: string; }) => { const childrenMenuList = page?.children?.filter( (item: any) => @@ -70,35 +74,55 @@ const MenuItem = ({ let hasChildren = childrenMenuList?.length; - const expandCollapseHandler = (e: any) => { - e.preventDefault(); - if (page.id === selectedMenuGroup && selectedMenuGroup === expandedGroup) { - onExpand && onExpand(null); - } else if (page.id === selectedMenuGroup) { - onExpand && onExpand(selectedMenuGroup); - } else { - onExpand && onExpand(page.id); - } - }; + const expandCollapseHandler = useCallback( + (e: any) => { + e.preventDefault(); + if (previewMenuGroup === page.id) { + setPreviewMenuGroup(""); + } else if (page.id !== selectedMenuItem) { + setPreviewMenuGroup(page.id); + onExpand(""); + } - const onClickHandler = hasChildren ? expandCollapseHandler : page.onClick; + if (page.id === selectedMenuItem && selectedMenuItem === expandedGroup) { + onExpand(null); + } else if (page.id === selectedMenuItem) { + onExpand(selectedMenuItem); + setPreviewMenuGroup(""); + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [page, selectedMenuItem, previewMenuGroup, expandedGroup] + ); + const selectMenuHandler = useCallback( + (e) => { + onExpand(page.id); + setSelectedMenuItem(page.id); + page.onClick && page.onClick(e); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [page] + ); + + const onClickHandler = hasChildren + ? expandCollapseHandler + : selectMenuHandler; + + const isActiveGroup = expandedGroup === page.id; const activeClsName = - pathValue.includes(selectedMenuGroup) && page.id === selectedMenuGroup + pathValue.includes(selectedMenuItem) && page.id === selectedMenuItem ? "active" : ""; - const isActiveGroup = - selectedMenuGroup === page.id || expandedGroup === page.id; return ( { - onExpand && onExpand(null); - onClickHandler && onClickHandler(e); - setSelectedMenuGroup && setSelectedMenuGroup(selectedMenuGroup); + onClickHandler(e); + setSelectedMenuItem(selectedMenuItem); }} component={page.component} to={page.to} @@ -138,7 +162,7 @@ const MenuItem = ({ )} {hasChildren ? ( - isActiveGroup ? ( + isActiveGroup || previewMenuGroup === page.id ? ( - {hasChildren ? ( + {(isActiveGroup || previewMenuGroup === page.id) && hasChildren ? ( @@ -183,6 +207,12 @@ const MenuItem = ({ button component={item.component} to={item.to} + onClick={(e: any) => { + if (page.id) { + setPreviewMenuGroup(""); + setSelectedMenuItem(page.id); + } + }} disableRipple sx={{ ...menuItemStyle, diff --git a/portal-ui/src/screens/Console/Tools/Tools.tsx b/portal-ui/src/screens/Console/Tools/Tools.tsx index fc4c4071d..739dcb52d 100644 --- a/portal-ui/src/screens/Console/Tools/Tools.tsx +++ b/portal-ui/src/screens/Console/Tools/Tools.tsx @@ -78,7 +78,7 @@ const Tools = () => { ); }} /> - + diff --git a/portal-ui/src/screens/Console/valid-routes.ts b/portal-ui/src/screens/Console/valid-routes.ts index 77c169f2e..dd4c8abef 100644 --- a/portal-ui/src/screens/Console/valid-routes.ts +++ b/portal-ui/src/screens/Console/valid-routes.ts @@ -205,7 +205,7 @@ export const validRoutes = ( { name: "Inspect", id: "inspectObjects", - to: IAM_PAGES.TOOLS_INSPECT, + to: IAM_PAGES.SUPPORT_INSPECT, icon: InspectMenuIcon, component: NavLink, }, diff --git a/portal-ui/tests/permissions-2/inspect.ts b/portal-ui/tests/permissions-2/inspect.ts index a562dcebe..e691762d8 100644 --- a/portal-ui/tests/permissions-2/inspect.ts +++ b/portal-ui/tests/permissions-2/inspect.ts @@ -44,7 +44,7 @@ insNotAllowedSeckey = "minio123"; /* End Local Testing config block */ const loginUrl = `${testDomainUrl}/login`; -const inspectScreenUrl = `${testDomainUrl}/tools/inspect`; +const inspectScreenUrl = `${testDomainUrl}${IAM_PAGES.SUPPORT_INSPECT}`; const loginSubmitBtn = Selector("form button"); @@ -55,7 +55,7 @@ export const supportSidebarEl = Selector(".MuiPaper-root") export const supportChildren = Selector("#support-children"); export const inspectEl = supportChildren .find("a") - .withAttribute("href", IAM_PAGES.TOOLS_INSPECT); + .withAttribute("href", IAM_PAGES.SUPPORT_INSPECT); export const inspect_volume_input = Selector('[data-test-id="inspect_volume"]'); export const inspect_path_input = Selector('[data-test-id="inspect_path"]');