From 2901606b08de668df7b39b5146f3fcc771e46bfe Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Mon, 4 Mar 2024 14:43:41 +0800
Subject: [PATCH] feat/ add log out button, and user details into user popover
 (#21724)

* Update NavigationBar.tsx

* small nits

* only show email if it's different from username

* Update apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
---
 .../layouts/AccountLayout/AccountLayout.tsx   |   2 +-
 .../layouts/AccountLayout/WithSidebar.tsx     |   2 +-
 .../NavigationBar/NavigationBar.tsx           | 100 ++++++++++++------
 3 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/apps/studio/components/layouts/AccountLayout/AccountLayout.tsx b/apps/studio/components/layouts/AccountLayout/AccountLayout.tsx
index eb8c4f24e1b..ecbef0713e5 100644
--- a/apps/studio/components/layouts/AccountLayout/AccountLayout.tsx
+++ b/apps/studio/components/layouts/AccountLayout/AccountLayout.tsx
@@ -130,7 +130,7 @@ const AccountLayout = ({ children, title, breadcrumbs }: PropsWithChildren<Accou
               {
                 key: `logout`,
                 icon: '/icons/feather/power.svg',
-                label: 'Logout',
+                label: 'Log out',
                 href: undefined,
                 onClick: onClickLogout,
               },
diff --git a/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx b/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx
index e33c0765d0d..43c1ddcfa6a 100644
--- a/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx
+++ b/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx
@@ -174,7 +174,7 @@ const SidebarLinkItem = ({
       icon = <IconArrowUpRight size={'tiny'} />
     }
 
-    if (label === 'Logout') {
+    if (label === 'Log out') {
       icon = <IconLogOut size={'tiny'} />
     }
 
diff --git a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
index 0b5f7fd8edd..3d0da5bbfdd 100644
--- a/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
@@ -17,7 +17,6 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
-  DropdownMenuSub,
   DropdownMenuTrigger,
   Separator,
   Theme,
@@ -40,6 +39,7 @@ import {
 } from './NavigationBar.utils'
 import { NavigationIconButton } from './NavigationIconButton'
 import NavigationIconLink from './NavigationIconLink'
+import { useSignOut } from 'lib/auth'
 
 export const ICON_SIZE = 20
 export const ICON_STROKE_WIDTH = 1.5
@@ -54,6 +54,8 @@ const NavigationBar = () => {
   const { setIsOpen } = useCommandMenu()
   const snap = useAppStateSnapshot()
 
+  const signOut = useSignOut()
+
   const navLayoutV2 = useFlag('navigationLayoutV2')
   const isNewAPIDocsEnabled = useIsAPIDocsSidePanelEnabled()
   const [userDropdownOpen, setUserDropdownOpenState] = useState(false)
@@ -229,18 +231,24 @@ const NavigationBar = () => {
                       'transition-all'
                     )}
                   >
-                    <span
-                      title={profile?.username}
-                      className="w-full text-left text-foreground truncate"
-                    >
-                      {profile?.username}
-                    </span>
-                    <span
-                      title={profile?.primary_email}
-                      className="w-full text-left text-foreground-light text-xs truncate"
-                    >
-                      {profile?.primary_email}
-                    </span>
+                    {profile && IS_PLATFORM && (
+                      <>
+                        <span
+                          title={profile.username}
+                          className="w-full text-left text-foreground truncate"
+                        >
+                          {profile.username}
+                        </span>
+                        {profile.primary_email !== profile.username && (
+                          <span
+                            title={profile.primary_email}
+                            className="w-full text-left text-foreground-light text-xs truncate"
+                          >
+                            {profile.primary_email}
+                          </span>
+                        )}
+                      </>
+                    )}
                   </span>
                 </div>
               </Button>
@@ -248,27 +256,48 @@ const NavigationBar = () => {
             <DropdownMenuContent side="top" align="start">
               {IS_PLATFORM && (
                 <>
-                  <DropdownMenuSub>{}</DropdownMenuSub>
-                  <DropdownMenuItem key="header" className="space-x-2" asChild>
-                    <Link href="/account/me">
-                      <Settings size={14} strokeWidth={1.5} />
-                      <p>Account preferences</p>
-                    </Link>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    key="header"
-                    className="space-x-2"
-                    onClick={() => snap.setShowFeaturePreviewModal(true)}
-                    onSelect={() => snap.setShowFeaturePreviewModal(true)}
-                  >
-                    <FlaskConical size={14} strokeWidth={2} />
-                    <p>Feature previews</p>
-                  </DropdownMenuItem>
+                  <div className="px-2 py-1 flex flex-col gap-0 text-sm">
+                    {profile && (
+                      <>
+                        <span
+                          title={profile.username}
+                          className="w-full text-left text-foreground truncate"
+                        >
+                          {profile.username}
+                        </span>
+                        {profile.primary_email !== profile.username && (
+                          <span
+                            title={profile.primary_email}
+                            className="w-full text-left text-foreground-light text-xs truncate"
+                          >
+                            {profile.primary_email}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </div>
                   <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem className="flex gap-2" asChild>
+                      <Link href="/account/me">
+                        <Settings size={14} strokeWidth={1.5} className="text-foreground-muted" />
+                        Account preferences
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className="flex gap-2"
+                      onClick={() => snap.setShowFeaturePreviewModal(true)}
+                      onSelect={() => snap.setShowFeaturePreviewModal(true)}
+                    >
+                      <FlaskConical size={14} strokeWidth={1.5} className="text-foreground-muted" />
+                      Feature previews
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                  </DropdownMenuGroup>
                 </>
               )}
-              <DropdownMenuLabel>Theme</DropdownMenuLabel>
               <DropdownMenuGroup>
+                <DropdownMenuLabel>Theme</DropdownMenuLabel>
                 <DropdownMenuRadioGroup
                   value={theme}
                   onValueChange={(value) => {
@@ -286,6 +315,17 @@ const NavigationBar = () => {
                     ))}
                 </DropdownMenuRadioGroup>
               </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem
+                  onSelect={async () => {
+                    await signOut()
+                    await router.push('/sign-in')
+                  }}
+                >
+                  Log out
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
             </DropdownMenuContent>
           </DropdownMenu>
         </ul>