[Fix] Signout action in nav menu (#12031)

* update signout to be link * undo unused code changes * update tests with sign out link role * fix sign out link colour * add description to signout confirmation
GCTC-NTGC · Nov 22, 2024 · 9bff669 · 9bff669
1 parent 9120736
commit 9bff669
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 37 deletions.
diff --git a/apps/playwright/tests/admin/auth.spec.ts b/apps/playwright/tests/admin/auth.spec.ts
@@ -97,7 +97,7 @@ test.describe("Authenticated", () => {
     await applicantPage.page
       .getByRole("button", { name: "your account" })
       .click();
-    await applicantPage.page.getByRole("button", { name: /sign out/i }).click();
+    await applicantPage.page.getByRole("link", { name: /sign out/i }).click();
     const logoutDialog = applicantPage.page.getByRole("alertdialog", {
       name: /sign out/i,
     });

diff --git a/apps/playwright/tests/login-logout.spec.ts b/apps/playwright/tests/login-logout.spec.ts
@@ -347,7 +347,7 @@ test.describe("Login and logout", () => {
     await pageTwo.goto("/en/");
     await pageTwo.getByRole("button", { name: "your account" }).click();
     await expect(
-      pageTwo.getByRole("button", { name: /sign out/i }),
+      pageTwo.getByRole("link", { name: /sign out/i }),
     ).toBeVisible();
 
     // simulate logged out in first page context

diff --git a/apps/web/src/components/NavMenu/useMainNavLinks.tsx b/apps/web/src/components/NavMenu/useMainNavLinks.tsx
@@ -1,8 +1,9 @@
 import { useIntl } from "react-intl";
 import uniqBy from "lodash/unionBy";
 import HomeIcon from "@heroicons/react/24/solid/HomeIcon";
+import { useLocation } from "react-router-dom";
 
-import { getNavLinkStyling, NavMenu } from "@gc-digital-talent/ui";
+import { LinkProps, NavMenu } from "@gc-digital-talent/ui";
 import { commonMessages, navigationMessages } from "@gc-digital-talent/i18n";
 import {
   hasRole,
@@ -11,14 +12,12 @@ import {
   useAuthentication,
   useAuthorization,
 } from "@gc-digital-talent/auth";
-import { notEmpty, useIsSmallScreen } from "@gc-digital-talent/helpers";
+import { notEmpty } from "@gc-digital-talent/helpers";
 
 import useRoutes from "~/hooks/useRoutes";
 import authMessages from "~/messages/authMessages";
 import permissionConstants from "~/constants/permissionConstants";
 
-import SignOutConfirmation from "../SignOutConfirmation/SignOutConfirmation";
-import LogoutButton from "../Layout/LogoutButton";
 import navMenuMessages from "./messages";
 import useNavContext from "../NavContext/useNavContext";
 import {
@@ -27,19 +26,22 @@ import {
   NAV_ROLES_BY_PRIVILEGE,
 } from "../NavContext/NavContextContainer";
 
-const NavItem = ({
-  href,
-  title,
-  subMenu,
-  ...rest
-}: {
+interface NavItemProps {
   href: string;
   title: string;
   subMenu?: boolean;
-}) => {
+  state?: LinkProps["state"];
+}
+
+const NavItem = ({ href, title, subMenu, state, ...rest }: NavItemProps) => {
   return (
     <NavMenu.Item {...rest}>
-      <NavMenu.Link href={href} type={subMenu ? "subMenuLink" : "link"}>
+      <NavMenu.Link
+        type={subMenu ? "subMenuLink" : "link"}
+        // NOTE: Comes from react-router
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        {...{ state, href }}
+      >
         {title}
       </NavMenu.Link>
     </NavMenu.Item>
@@ -53,7 +55,7 @@ const useMainNavLinks = () => {
   const intl = useIntl();
   const paths = useRoutes();
   const permissions = permissionConstants();
-  const isSmallScreen = useIsSmallScreen(1080);
+  const { pathname } = useLocation();
 
   const { navRole } = useNavContext();
   const { userAuthInfo } = useAuthorization();
@@ -293,14 +295,14 @@ const useMainNavLinks = () => {
     />
   );
 
-  const logoutBtnStyling = getNavLinkStyling("subMenuLink", isSmallScreen);
-
   const SignOut = (
-    <SignOutConfirmation key="sign-out">
-      <LogoutButton {...logoutBtnStyling}>
-        {intl.formatMessage(authMessages.signOut)}
-      </LogoutButton>
-    </SignOutConfirmation>
+    <NavItem
+      key="signOut"
+      href={paths.loggedOut()}
+      title={intl.formatMessage(authMessages.signOut)}
+      state={{ from: pathname }}
+      subMenu
+    />
   );
 
   const getRoleName: Record<string, string> = {

diff --git a/apps/web/src/pages/Auth/SignedOutPage/SignedOutPage.tsx b/apps/web/src/pages/Auth/SignedOutPage/SignedOutPage.tsx
@@ -20,6 +20,7 @@ import SEO from "~/components/SEO/SEO";
 import useRoutes from "~/hooks/useRoutes";
 import useBreadcrumbs from "~/hooks/useBreadcrumbs";
 import authMessages from "~/messages/authMessages";
+import useReturnPath from "~/hooks/useReturnPath";
 
 const supportLink = (chunks: ReactNode, path: string) => (
   <Link href={path} state={{ referrer: window.location.href }} color="black">
@@ -32,6 +33,7 @@ export const Component = () => {
   const locale = getLocale(intl);
   const { loggedIn, logout } = useAuthentication();
   const paths = useRoutes();
+  const returnPath = useReturnPath(paths.profileAndApplications());
 
   const logoutReason = localStorage.getItem(
     LOGOUT_REASON_KEY,
@@ -195,14 +197,16 @@ export const Component = () => {
           <AlertDialog.Title>
             {intl.formatMessage(authMessages.signOut)}
           </AlertDialog.Title>
-          <p data-h2-font-size="base(h5, 1)">
-            {intl.formatMessage({
-              defaultMessage: "Are you sure you would like to sign out?",
-              id: "mNNgEF",
-              description:
-                "Question displayed when authenticated user lands on /logged-out.",
-            })}
-          </p>
+          <AlertDialog.Description>
+            <p data-h2-font-size="base(h5, 1)">
+              {intl.formatMessage({
+                defaultMessage: "Are you sure you would like to sign out?",
+                id: "mNNgEF",
+                description:
+                  "Question displayed when authenticated user lands on /logged-out.",
+              })}
+            </p>
+          </AlertDialog.Description>
           <AlertDialog.Footer>
             <AlertDialog.Action>
               <Button
@@ -216,11 +220,7 @@ export const Component = () => {
               </Button>
             </AlertDialog.Action>
             <AlertDialog.Cancel>
-              <Link
-                color="warning"
-                mode="inline"
-                href={paths.profileAndApplications()}
-              >
+              <Link color="warning" mode="inline" href={returnPath}>
                 {intl.formatMessage(commonMessages.cancel)}
               </Link>
             </AlertDialog.Cancel>

diff --git a/packages/ui/src/components/NavMenu/NavMenu.tsx b/packages/ui/src/components/NavMenu/NavMenu.tsx
@@ -14,7 +14,7 @@ import ChevronDownIcon from "@heroicons/react/24/solid/ChevronDownIcon";
 
 import { useIsSmallScreen } from "@gc-digital-talent/helpers";
 
-import OurLink from "../Link/Link";
+import OurLink, { LinkProps as BaseLinkProps } from "../Link/Link";
 import getButtonStyle, {
   ButtonStyleInterface,
 } from "../../utils/button/getButtonStyles";
@@ -134,14 +134,25 @@ type LinkProps = ComponentPropsWithoutRef<
   icon?: IconType;
   mode?: ButtonLinkMode;
   ariaLabel?: string;
+  state?: BaseLinkProps["state"];
 };
 
 const Link = forwardRef<
   ElementRef<typeof NavigationMenuPrimitive.Link>,
   LinkProps
 >(
   (
-    { children, href, type = "link", color, icon, mode, ariaLabel, ...rest },
+    {
+      children,
+      href,
+      type = "link",
+      color,
+      icon,
+      mode,
+      ariaLabel,
+      state,
+      ...rest
+    },
     forwardedRef,
   ) => {
     const { pathname } = useLocation();
@@ -183,6 +194,9 @@ const Link = forwardRef<
           href={href}
           icon={icon}
           mode={mode}
+          // Comes from react-router
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          state={state}
           data-h2-text-decoration="base:selectors[[data-active]](none) base:selectors[[data-active] > span](none)"
           data-h2-font-weight="base:selectors[[data-active]](700)"
           {...linkColor}