Skip to content

feat(dashboard): sidebar group settings #3125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rpavlini wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(dashboard): sidebar group settings #3125

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bf846eb
feat(sidebar): group settings and break out suspension banner
rpavlini Dec 5, 2025
eacc3c6
fix(dashboard): alert colors fix
rpavlini Dec 5, 2025
ff81de1
fix(dashboard): drop icon from sidebar notification
rpavlini Dec 8, 2025
71b2614
revert: sidebar alert
rpavlini Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 51 additions & 31 deletions apps/dashboard/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ import {
} from 'lucide-react'
import { useMemo } from 'react'
import { useAuth } from 'react-oidc-context'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { Link, useLocation } from 'react-router-dom'
import { Button } from './ui/button'
import { Card, CardHeader, CardTitle } from './ui/card'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu'
Expand All @@ -64,7 +64,6 @@ interface SidebarProps {
export function Sidebar({ isBannerVisible, billingEnabled, version }: SidebarProps) {
const { theme, setTheme } = useTheme()
const { user, signoutRedirect } = useAuth()
const navigate = useNavigate()
const { pathname } = useLocation()
const { selectedOrganization, authenticatedUserOrganizationMember, authenticatedUserHasPermission } =
useSelectedOrganization()
Expand All @@ -82,7 +81,6 @@ export function Sidebar({ isBannerVisible, billingEnabled, version }: SidebarPro
label: 'Sandboxes',
path: RoutePath.SANDBOXES,
},
{ icon: <KeyRound size={16} strokeWidth={1.5} />, label: 'Keys', path: RoutePath.KEYS },
{
icon: <Box size={16} strokeWidth={1.5} />,
label: 'Snapshots',
Expand All @@ -101,6 +99,38 @@ export function Sidebar({ isBannerVisible, billingEnabled, version }: SidebarPro
path: RoutePath.VOLUMES,
})
}

if (authenticatedUserHasPermission(OrganizationRolePermissionsEnum.READ_AUDIT_LOGS)) {
arr.push({
icon: <TextSearch size={16} strokeWidth={1.5} />,
label: 'Audit Logs',
path: RoutePath.AUDIT_LOGS,
})
}

// Add Webhooks link if webhooks are initialized
if (webhooksInitialized) {
arr.push({
icon: <Mail size={16} strokeWidth={1.5} />,
label: 'Webhooks',
path: '#webhooks' as any, // This will be handled by onClick
onClick: () => openAppPortal(),
})
}

return arr
}, [authenticatedUserHasPermission, webhooksInitialized, openAppPortal])

const settingsItems = useMemo(() => {
const arr = [
{
icon: <Settings size={16} strokeWidth={1.5} />,
label: 'General',
path: RoutePath.SETTINGS,
},
{ icon: <KeyRound size={16} strokeWidth={1.5} />, label: 'API Keys', path: RoutePath.KEYS },
Copy link
Member

@fabjanvucina fabjanvucina Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious, what was the idea behind moving the "API Keys" page to the "Settings" group?

I think we should further discuss whether we even need to have a separate "Settings" section. I'm inclined to say that we don't because all items in the sidebar are organization-related and there isn't a clear distinction in my opinion on why these pages would be considered settings. but I'm open to hear a different opinion.

Semi-related UI suggestions for the sidebar:

  • The section heading should have the same padding as the section item icons, it looks cleaner
  • The gap between sections should be smaller
image

Copy link
Member

@fabjanvucina fabjanvucina Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rpavlini What are your opinions on this?

]

if (authenticatedUserOrganizationMember?.role === OrganizationUserRoleEnum.OWNER) {
arr.push({
icon: <LockKeyhole size={16} strokeWidth={1.5} />,
Expand All @@ -119,36 +149,9 @@ export function Sidebar({ isBannerVisible, billingEnabled, version }: SidebarPro
// arr.push({ icon: <UserCog className="w-5 h-5" />, label: 'Roles', path: RoutePath.ROLES })
// }
}
if (authenticatedUserHasPermission(OrganizationRolePermissionsEnum.READ_AUDIT_LOGS)) {
arr.push({
icon: <TextSearch size={16} strokeWidth={1.5} />,
label: 'Audit Logs',
path: RoutePath.AUDIT_LOGS,
})
}

// Add Webhooks link if webhooks are initialized
if (webhooksInitialized) {
arr.push({
icon: <Mail size={16} strokeWidth={1.5} />,
label: 'Webhooks',
path: '#webhooks' as any, // This will be handled by onClick
onClick: () => openAppPortal(),
})
}
arr.push({
icon: <Settings size={16} strokeWidth={1.5} />,
label: 'Settings',
path: RoutePath.SETTINGS,
})
return arr
}, [
authenticatedUserOrganizationMember?.role,
selectedOrganization?.personal,
authenticatedUserHasPermission,
webhooksInitialized,
openAppPortal,
])
}, [authenticatedUserOrganizationMember?.role, selectedOrganization?.personal])

const billingItems = useMemo(() => {
if (!billingEnabled || authenticatedUserOrganizationMember?.role !== OrganizationUserRoleEnum.OWNER) {
Expand Down Expand Up @@ -207,6 +210,23 @@ export function Sidebar({ isBannerVisible, billingEnabled, version }: SidebarPro
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Settings</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{settingsItems.map((item) => (
<SidebarMenuItem key={item.label}>
<SidebarMenuButton asChild isActive={pathname.startsWith(item.path)} className="text-sm">
<Link to={item.path}>
{item.icon}
<span>{item.label}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarGroup>
{billingItems.length > 0 && <SidebarGroupLabel>Billing</SidebarGroupLabel>}
<SidebarGroupContent>
Expand Down
Loading