dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-11 20:35:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat/ add log out button, and user details into user popover (#21724)

Browse Source 
* 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>
This commit is contained in:
Jonathan Summers-MuirAlaister YoungAlaister Young
 authored and GitHub committed 2024-03-04 06:43:41 +00:00
1 parent 8fa042930e
commit 2901606b08
3 files changed
+72 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/studio/components/layouts/AccountLayout/AccountLayout.tsx
+1 -1
View File
@@ -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,
},
apps/studio/components/layouts/AccountLayout/WithSidebar.tsx
+1 -1
View File
@@ -174,7 +174,7 @@ const SidebarLinkItem = ({
icon = <IconArrowUpRight size={'tiny'} />
}
if (label === 'Logout') {
if (label === 'Log out') {
icon = <IconLogOut size={'tiny'} />
}
apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
+70 -30
View File
@@ -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>