mirror of
https://github.com/supabase/supabase.git
synced 2026-05-31 09:52:58 +08:00
84484be46d
## Context Supports selecting log rows and allow to copy / ask assistant for selected rows, similar to what we had for the old logs UI Selection will clear whenever the search parameters change <img width="1448" height="413" alt="image" src="https://github.com/user-attachments/assets/b81b359c-28c3-48a8-9895-e77327ebd33e" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Multi-row selection with an action header showing selected count * Copy selected logs as JSON or Markdown from a dropdown * "Explain with AI" action to open the assistant pre-filled with selected logs * Clear selection button * **Refactor** * Row/detail selection now syncs with the URL for shareable views and improves next/previous navigation and panel behavior * **Style** * Minor visual tweak to column level indicator dot size <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45974) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
109 lines
3.3 KiB
TypeScript
109 lines
3.3 KiB
TypeScript
import { ComponentPropsWithRef, forwardRef } from 'react'
|
|
import { cn } from 'ui'
|
|
import {
|
|
Table as ShadcnTable,
|
|
TableBody as ShadcnTableBody,
|
|
TableCaption as ShadcnTableCaption,
|
|
TableCell as ShadcnTableCell,
|
|
TableFooter as ShadcnTableFooter,
|
|
TableHead as ShadcnTableHead,
|
|
TableHeader as ShadcnTableHeader,
|
|
TableRow as ShadcnTableRow,
|
|
} from 'ui/src/components/shadcn/ui/table'
|
|
|
|
// Only create a custom component for Table with the added props
|
|
export const Table = forwardRef<HTMLTableElement, ComponentPropsWithRef<typeof ShadcnTable>>(
|
|
({ className, onScroll, ...props }, ref) => (
|
|
<ShadcnTable
|
|
ref={ref}
|
|
{...props}
|
|
className={cn(className)}
|
|
containerProps={{
|
|
onScroll,
|
|
className: 'h-full w-full overflow-auto caption-bottom text-sm [&>table]:table-fixed',
|
|
}}
|
|
/>
|
|
)
|
|
)
|
|
Table.displayName = 'Table'
|
|
|
|
export const TableHeader = forwardRef<
|
|
HTMLTableSectionElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableHeader>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableHeader ref={ref} className={cn('sticky top-0 z-1', className)} {...props} />
|
|
))
|
|
TableHeader.displayName = 'TableHeader'
|
|
|
|
export const TableBody = forwardRef<
|
|
HTMLTableSectionElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableBody>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableBody
|
|
ref={ref}
|
|
{...props}
|
|
className={cn(
|
|
'transition-colors outline-none focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary',
|
|
className
|
|
)}
|
|
/>
|
|
))
|
|
TableBody.displayName = 'TableBody'
|
|
|
|
export const TableFooter = forwardRef<
|
|
HTMLTableSectionElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableFooter>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableFooter ref={ref} className={cn('text-primary-foreground', className)} {...props} />
|
|
))
|
|
TableFooter.displayName = 'TableFooter'
|
|
|
|
export const TableRow = forwardRef<
|
|
HTMLTableRowElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableRow>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableRow
|
|
ref={ref}
|
|
className={cn('bg-background hover:bg-surface-100 border-b-0', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableRow.displayName = 'TableRow'
|
|
|
|
export const TableHead = forwardRef<
|
|
HTMLTableCellElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableHead>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableHead
|
|
ref={ref}
|
|
className={cn(
|
|
'text-xs! font-normal! text-foreground-lighter font-mono',
|
|
'relative select-none truncate [&>.cursor-col-resize]:last:opacity-0',
|
|
'text-muted-foreground h-9 px-2 text-left align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableHead.displayName = 'TableHead'
|
|
|
|
export const TableCell = forwardRef<
|
|
HTMLTableCellElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableCell>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableCell
|
|
ref={ref}
|
|
className={cn('text-xs py-1! p-2 *:[[role=checkbox]]:translate-y-[2px] truncate', className)}
|
|
{...props}
|
|
/>
|
|
))
|
|
TableCell.displayName = 'TableCell'
|
|
|
|
export const TableCaption = forwardRef<
|
|
HTMLTableCaptionElement,
|
|
ComponentPropsWithRef<typeof ShadcnTableCaption>
|
|
>(({ className, ...props }, ref) => (
|
|
<ShadcnTableCaption ref={ref} className={cn('text-sm', className)} {...props} />
|
|
))
|
|
TableCaption.displayName = 'TableCaption'
|