Fix sidebar navigation state (#1775)

Fix sidebar navigation state
2022-03-29 16:31:54 +00:00
parent ceeacd2167
commit fa8c59360a
7 changed files with 82 additions and 48 deletions
--- 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,
--- 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,
--- 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<string>(selectedMenuGroup);
+  const [expandGroup, setExpandGroup] = useState(IAM_PAGES.BUCKETS);
+  const [selectedMenuItem, setSelectedMenuItem] =
+    useState<string>(groupToSelect);

-  const [expandedGroup, setExpandedGroup] = useState<string>(selectedMenuGroup);
+  const [previewMenuGroup, setPreviewMenuGroup] = useState<string>("");

  useEffect(() => {
-    //in case of redirects.
-    setOpenGroup(selectedMenuGroup);
-  }, [selectedMenuGroup]);
+    setExpandGroup(groupToSelect);
+    setSelectedMenuItem(groupToSelect);
+  }, [groupToSelect]);

  return (
    <Box
@@ -110,11 +111,13 @@ const ConsoleMenuList = ({
                  page={menuGroup}
                  key={`${menuGroup.id}-${index.toString()}`}
                  id={menuGroup.id}
-                  selectedMenuGroup={openGroup}
-                  setSelectedMenuGroup={setOpenGroup}
+                  selectedMenuItem={selectedMenuItem}
+                  setSelectedMenuItem={setSelectedMenuItem}
                  pathValue={pathname}
-                  onExpand={setExpandedGroup}
-                  expandedGroup={expandedGroup}
+                  onExpand={setExpandGroup}
+                  expandedGroup={expandGroup}
+                  previewMenuGroup={previewMenuGroup}
+                  setPreviewMenuGroup={setPreviewMenuGroup}
                />
              );
            }
--- 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 <http://www.gnu.org/licenses/>.

-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 (
    <React.Fragment>
      <ListItem
        key={page.to}
        button
        onClick={(e: any) => {
-          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 ? (
            <MenuCollapsedIcon
              height={15}
              width={15}
@@ -156,11 +180,11 @@ const MenuItem = ({
        ) : null}
      </ListItem>

-      {hasChildren ? (
+      {(isActiveGroup || previewMenuGroup === page.id) && hasChildren ? (
        <Collapse
          key={page.id}
          id={`${page.id}-children`}
-          in={expandedGroup === page.id}
+          in={true}
          timeout="auto"
          unmountOnExit
        >
@@ -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,
--- a/portal-ui/src/screens/Console/Tools/Tools.tsx
+++ b/portal-ui/src/screens/Console/Tools/Tools.tsx
@@ -78,7 +78,7 @@ const Tools = () => {
            );
          }}
        />
-        <Route path={IAM_PAGES.TOOLS_INSPECT} exact component={Inspect} />
+        <Route path={IAM_PAGES.SUPPORT_INSPECT} exact component={Inspect} />
        <Route component={NotFoundPage} />
      </Switch>
    </Router>
--- 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,
        },
--- 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"]');