Merge pull request #3754 from IntersectMBO/3682-adjust-top-menu-layout-when-wallet-is-not-connected-storybook-fixes

fix(#3682): adjust top menu - fixes to storybook + tests

Author: Ciabas

govtool/frontend/src/components/atoms/Link.tsx

@@ -3,12 +3,17 @@ import { NavLink } from "react-router-dom";
 import { Typography } from "@mui/material";
 import { useCardano } from "@context";
 
+const FONT_SIZE = {
+  small: 14,
+  big: 22,
+};
+
 type LinkProps = {
   dataTestId?: string;
   isConnectWallet?: boolean;
   label: React.ReactNode;
   navTo: string;
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
   size?: "small" | "big";
 };
 
@@ -24,10 +29,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     } = props;
     const { disconnectWallet } = useCardano();
 
-    const fontSize = {
-      small: 14,
-      big: 22,
-    }[size];
+    const fontSize = FONT_SIZE[size];
 
     return (
       <NavLink
@@ -57,3 +59,40 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     );
   },
 );
+
+// This component is used as a placeholder for links that do not navigate anywhere,
+// but with the same styling as the Link component.
+export const FakeLink = forwardRef<HTMLElement, Omit<LinkProps, "navTo">>(
+  (props, ref) => {
+    const {
+      dataTestId,
+      isConnectWallet,
+      label,
+      size = "small",
+      onClick,
+    } = props;
+    const { disconnectWallet } = useCardano();
+
+    const fontSize = FONT_SIZE[size];
+
+    return (
+      <Typography
+        data-testid={dataTestId}
+        onClick={(e) => {
+          e.preventDefault();
+          if (!isConnectWallet) disconnectWallet();
+          if (onClick) onClick(e);
+        }}
+        ref={ref}
+        sx={{
+          cursor: "pointer",
+          fontSize,
+          fontWeight: 500,
+          color: "textBlack",
+        }}
+      >
+        {label}
+      </Typography>
+    );
+  },
+);

govtool/frontend/src/components/organisms/TopNav.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, FC } from "react";
 import { NavLink, useNavigate } from "react-router-dom";
 import { AppBar, Box, Grid, IconButton, Menu, MenuItem } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-import { Button, Link } from "@atoms";
+import { Button, Link, FakeLink } from "@atoms";
 import { ICONS, IMAGES, PATHS, NAV_ITEMS, NavMenuItem } from "@consts";
 import { useCardano, useFeatureFlag, useModal } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
@@ -48,6 +48,10 @@ export const TopNav = ({ isConnectButton = true }) => {
     openModal({ type: "chooseWallet" });
   };
 
+  const closeDrawer = () => {
+    setIsDrawerOpen(false);
+  };
+
   const renderDesktopNav = () => (
     <nav
       style={{ display: "flex", alignItems: "center", justifyContent: "end" }}
@@ -62,10 +66,7 @@ export const TopNav = ({ isConnectButton = true }) => {
           if (isNavMenuItem(navItem)) {
             return (
               <Grid item key={navItem.label}>
-                <MenuNavItem
-                  navItem={navItem}
-                  closeDrawer={() => setIsDrawerOpen(false)}
-                />
+                <MenuNavItem navItem={navItem} closeDrawer={closeDrawer} />
               </Grid>
             );
           }
@@ -75,7 +76,8 @@ export const TopNav = ({ isConnectButton = true }) => {
                 {...navItem}
                 isConnectWallet={isConnectButton}
                 onClick={() => {
-                  setIsDrawerOpen(false);
+                  if (navItem.newTabLink) openInNewTab(navItem.newTabLink);
+                  closeDrawer();
                 }}
               />
             </Grid>
@@ -197,17 +199,17 @@ const MenuNavItem: FC<{
   navItem: NavMenuItem;
   closeDrawer: () => void;
 }> = ({ closeDrawer, navItem }) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLAnchorElement | null>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const {
     isProposalDiscussionForumEnabled,
     isGovernanceOutcomesPillarEnabled,
   } = useFeatureFlag();
 
   // Create a ref array for child links to manage cliking within MenuItem but outside of Link
-  const linkRefs = useRef<Array<HTMLAnchorElement | null>>([]);
+  const linkRefs = useRef<Array<HTMLElement | null>>([]);
 
   const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
@@ -234,12 +236,8 @@ const MenuNavItem: FC<{
   };
   return (
     <>
-      <Link
-        navTo=""
-        data-testid={navItem.dataTestId}
-        aria-controls={open ? "basic-menu" : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
+      <FakeLink
+        dataTestId={navItem.dataTestId}
         onClick={handleClick}
         label={
           <span
@@ -286,14 +284,14 @@ const MenuNavItem: FC<{
         {filterChildNavItems()?.map((childNavItem, idx) => (
           <MenuItem
             key={childNavItem.label}
-            data-testid={childNavItem.dataTestId}
             sx={{ minWidth: 160 }}
             onClick={() => {
               linkRefs.current[idx]?.click();
             }}
           >
             <Link
-              {...childNavItem}
+              dataTestId={childNavItem.dataTestId}
+              navTo={childNavItem.navTo}
               ref={(el) => {
                 linkRefs.current[idx] = el;
               }}

govtool/frontend/src/stories/TopNav.stories.ts

@@ -15,12 +15,34 @@ type Story = StoryObj<typeof meta>;
 const performCommonActions = async (canvas: ReturnType<typeof within>) => {
   window.open = fn();
 
-  await userEvent.click(canvas.getByTestId("logo-button"));
-  const governanceActionsLink = canvas.getByTestId("governance-actions-link");
-  await userEvent.click(canvas.getByTestId("governance-actions-link"));
+  const logoButton = canvas.getByTestId("logo-button");
+  await userEvent.click(logoButton);
+
+  const governanceActions = canvas.getByTestId("governance-actions");
+  await userEvent.click(governanceActions);
+
+  // governance actions link is injected outside the TopNav component, so we use querySelector
+  const governanceActionsLink = document.querySelector(
+    '[data-testid="governance-actions-link"]',
+  );
+  if (!governanceActionsLink)
+    throw new Error("governance-actions-link not found");
+  await expect(governanceActionsLink).not.toHaveClass("active");
+  await userEvent.click(governanceActionsLink);
+  await expect(governanceActions).not.toHaveClass("active");
   await expect(governanceActionsLink).toHaveClass("active");
-  await userEvent.click(canvas.getByTestId("guides-link"));
-  await userEvent.click(canvas.getByTestId("faqs-link"));
+
+  const drepDirectoryLink = canvas.getByTestId("drep-directory-link");
+  await expect(drepDirectoryLink).not.toHaveClass("active");
+  await userEvent.click(drepDirectoryLink);
+  await expect(drepDirectoryLink).toHaveClass("active");
+
+  const guidesLink = canvas.getByTestId("guides-link");
+  await userEvent.click(guidesLink);
+
+  const faqsLink = canvas.getByTestId("faqs-link");
+  await userEvent.click(faqsLink);
+
   await expect(window.open).toHaveBeenCalledTimes(2);
 };