mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Joshen Lim
9a60994efb
## Context This one's just something that I thought about while doing some debugging - our audit logs UI is pretty outdated and hard to skim as the information is very sparse. This is how it currently looks like (specifically Account audit logs for this PR, there's also org audit logs): <img width="1450" height="957" alt="image" src="https://github.com/user-attachments/assets/4b69511e-1d4f-4725-8ea9-78ddacf76942" /> <img width="1450" height="954" alt="image" src="https://github.com/user-attachments/assets/ec099f52-adef-499c-965a-11b8404bf235" /> Am opting to follow the same UX as that of our Unified Logs, so opting to update the UI as such: <img width="1451" height="958" alt="Screenshot 2026-09-23 at 22 04 33" src="https://github.com/user-attachments/assets/016bd26d-4078-42dc-9ff2-5bae9edbc1b2" /> <img width="1451" height="957" alt="Screenshot 2026-09-23 at 22 16 09" src="https://github.com/user-attachments/assets/f038b635-1359-4710-bc84-0f32ace1fb82" /> <img width="1450" height="956" alt="Screenshot 2026-09-23 at 22 16 37" src="https://github.com/user-attachments/assets/7230b94a-c7ec-4550-bb55-5405ebc074a7" /> More importantly, we'll allow users to copy logs as JSON so users can eject to their own agent if needed <img width="1201" height="350" alt="image" src="https://github.com/user-attachments/assets/587ab881-a501-41e6-8c9b-59191a2b2047" /> ## To test - [ ] Mainly just need to make sure that account audit logs still works as expected - it's all read only so just need to ensure that all information that's available before, is still available <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Browse account activity logs with date-range and project filters, project search, sorting, and refresh controls. Results automatically refresh every five minutes. * Choose preset date ranges, select individual logs or ranges of rows, and copy selected entries as formatted JSON. * Open a log to view request, actor, target, and action details, or inspect and copy its raw data. * Select log rows with a mouse or keyboard, and view loading, error, empty-results, and filtered-empty states. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { LucideIcon } from 'lucide-react'
|
|
import { ReactNode } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
export type IconComponent =
|
|
| LucideIcon
|
|
| React.ComponentType<{ size?: number; strokeWidth?: number; className?: string }>
|
|
|
|
interface DetailSectionHeaderProps {
|
|
title: string
|
|
icon?: IconComponent
|
|
summary?: ReactNode
|
|
className?: string
|
|
}
|
|
|
|
export const DetailSectionHeader = ({
|
|
title,
|
|
icon: Icon,
|
|
summary,
|
|
className,
|
|
}: DetailSectionHeaderProps) => (
|
|
<div className={cn('relative flex h-9 items-center justify-between gap-3 px-4', className)}>
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
{Icon ? (
|
|
<Icon size={14} strokeWidth={1.5} className="shrink-0 text-foreground-lighter" />
|
|
) : (
|
|
<span className="w-3.5 shrink-0" aria-hidden />
|
|
)}
|
|
<span className="truncate heading-default text-foreground">{title}</span>
|
|
</div>
|
|
{summary !== undefined && summary !== null && summary !== '' ? (
|
|
<span className="truncate text-right font-mono text-xs text-foreground">{summary}</span>
|
|
) : null}
|
|
</div>
|
|
)
|