From 47a6fed046a9e1600d0073bb780d7dad09030172 Mon Sep 17 00:00:00 2001
From: brooke <brooke.yalof@mongodb.com>
Date: Tue, 6 Aug 2024 11:50:22 -0400
Subject: [PATCH] make UX improvements

---
 src/auth/logout.tsx                           |  8 ++---
 src/components/global/Search/Search.tsx       |  6 +++-
 .../global/SideNavigation/SideNavigation.tsx  |  9 +++--
 src/components/global/UserMenu.tsx            | 35 +++++++++++++++----
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/auth/logout.tsx b/src/auth/logout.tsx
index d5c7250a..f404d0ea 100644
--- a/src/auth/logout.tsx
+++ b/src/auth/logout.tsx
@@ -1,8 +1,8 @@
-"use server";
+'use server';
 
-import { signOut } from "@/auth/auth";
+import { signOut } from '@/auth/auth';
 
 export async function logout() {
-  "use server";
-  await signOut({ redirectTo: "/" });
+  'use server';
+  await signOut({ redirect: true, redirectTo: '/' });
 }
diff --git a/src/components/global/Search/Search.tsx b/src/components/global/Search/Search.tsx
index c69ba069..bf3f7fe5 100644
--- a/src/components/global/Search/Search.tsx
+++ b/src/components/global/Search/Search.tsx
@@ -4,6 +4,8 @@ import Fuse, { IFuseOptions } from 'fuse.js';
 import debounce from 'lodash/debounce';
 // @ts-expect-error
 import LockIcon from '@leafygreen-ui/icon/dist/Lock';
+// @ts-expect-error
+import UnlockIcon from '@leafygreen-ui/icon/dist/Unlock';
 import { SearchInput, SearchResult } from '@leafygreen-ui/search-input';
 import { useSession } from '@/hooks';
 import { components } from '@/utils/components';
@@ -52,6 +54,8 @@ export function Search() {
     }
   }, [searchTerm]);
 
+  const PrivateIcon = session?.user ? UnlockIcon : LockIcon;
+
   return (
     <SearchInput
       aria-label="Search Components"
@@ -73,7 +77,7 @@ export function Search() {
         >
           <div className={searchResultStyle}>
             {item.name}
-            {item.isPrivate && !session?.user && <LockIcon size="small" />}
+            {item.isPrivate && <PrivateIcon size="small" />}
           </div>
         </SearchResult>
       ))}
diff --git a/src/components/global/SideNavigation/SideNavigation.tsx b/src/components/global/SideNavigation/SideNavigation.tsx
index 61507a80..af81cfa3 100644
--- a/src/components/global/SideNavigation/SideNavigation.tsx
+++ b/src/components/global/SideNavigation/SideNavigation.tsx
@@ -14,6 +14,8 @@ import AppsIcon from '@leafygreen-ui/icon/dist/Apps';
 import LockIcon from '@leafygreen-ui/icon/dist/Lock';
 // @ts-expect-error
 import MenuIcon from '@leafygreen-ui/icon/dist/Menu';
+// @ts-expect-error
+import UnlockIcon from '@leafygreen-ui/icon/dist/Unlock';
 import IconButton from '@leafygreen-ui/icon-button';
 import {
   PortalContextProvider,
@@ -22,7 +24,7 @@ import {
 import { MongoDBLogo, SupportedColors } from '@leafygreen-ui/logo';
 import { color, spacing } from '@leafygreen-ui/tokens';
 import { SIDE_NAV_WIDTH } from '@/constants';
-import { useMediaQuery } from '@/hooks';
+import { useMediaQuery, useSession } from '@/hooks';
 import { ComponentMeta, Group, groupedComponents } from '@/utils/components';
 import { Search } from '../Search/Search';
 import { Drawer } from './Drawer';
@@ -31,6 +33,7 @@ import { SideNavLabel } from './SideNavLabel';
 import { SideNavList } from './SideNavList';
 
 export function SideNavigation() {
+  const session = useSession();
   const navRef = useRef<HTMLElement>(null);
   const [open, setOpen] = React.useState(false);
   const [isMobile] = useMediaQuery(['(max-width: 640px)'], {
@@ -42,6 +45,8 @@ export function SideNavigation() {
     topLevelPage === 'component' ? activeSubDirOrPage : '';
   const { darkMode, theme } = useDarkMode();
 
+  const PrivateIcon = session?.user ? UnlockIcon : LockIcon;
+
   const navContent = (
     <>
       <SideNavLabel
@@ -176,7 +181,7 @@ export function SideNavigation() {
                   >
                     {component.name}
                     {component.isPrivate && (
-                      <LockIcon
+                      <PrivateIcon
                         className={css`
                           margin-left: ${spacing[400]}px;
                         `}
diff --git a/src/components/global/UserMenu.tsx b/src/components/global/UserMenu.tsx
index 41202edd..b391c34a 100644
--- a/src/components/global/UserMenu.tsx
+++ b/src/components/global/UserMenu.tsx
@@ -1,6 +1,7 @@
 'use client';
-
+import { useEffect, useState } from 'react';
 import { css } from '@emotion/css';
+import { Session } from 'next-auth';
 import Button from '@leafygreen-ui/button';
 // @ts-expect-error
 import CaretDownIcon from '@leafygreen-ui/icon/dist/CaretDown';
@@ -14,8 +15,24 @@ import { LogIn } from './LogIn';
 
 export function UserMenu() {
   const session = useSession();
+  // TODO: use next-auth session when available
+  // Session does not clear reliably without forcing a state change or a hard refresh
+  // https://github.com/nextauthjs/next-auth/discussions/4687
+  const [manualSession, setManualSession] = useState<Session | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (session?.user) {
+      setManualSession(session);
+    }
+
+    if (!session?.user) {
+      setManualSession(undefined);
+    }
+  }, [session]);
 
-  return session?.user ? (
+  return manualSession?.user ? (
     <div
       className={css`
         z-index: 1;
@@ -30,15 +47,21 @@ export function UserMenu() {
             `}
             rightGlyph={<CaretDownIcon />}
           >
-            {session.user.name}
+            {manualSession.user.name}
           </Button>
         }
       >
         <MenuItem>
-          <Body darkMode>{session.user.name}</Body>
-          <Description darkMode>{session.user.email}</Description>
+          <Body darkMode>{manualSession.user.name}</Body>
+          <Description darkMode>{manualSession.user.email}</Description>
         </MenuItem>
-        <MenuItem glyph={<LogOutIcon />} onClick={() => logout()}>
+        <MenuItem
+          glyph={<LogOutIcon />}
+          onClick={() => {
+            logout();
+            setManualSession(undefined);
+          }}
+        >
           Log out
         </MenuItem>
       </Menu>