mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
fix(dashboard): Improve scrollbar position on Table Editor list (#32505)
* Improve padding on infinite table list when scrollbar is visible * Add back removed bottom padding --------- Co-authored-by: Kyle Rummens <kyle@prodatakey.com>
This commit is contained in:
Kyle RummensandKyle Rummens authored and GitHub committed
1 parent
364f001e68
commit
8d00fd0aba
2 files changed
+186
-184
No files matched your search
@@ -267,196 +267,198 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<EditorTablePageLink
|
||||
title={entity.name}
|
||||
id={String(entity.id)}
|
||||
href={`/project/${projectRef}/editor/${entity.id}?schema=${selectedSchema}`}
|
||||
role="button"
|
||||
aria-label={`View ${entity.name}`}
|
||||
className={cn(
|
||||
'w-full',
|
||||
'flex items-center gap-2',
|
||||
'py-1 px-2',
|
||||
'text-light',
|
||||
'rounded-md',
|
||||
isActive ? 'bg-selection' : 'hover:bg-surface-200 focus:bg-surface-200',
|
||||
'group',
|
||||
'transition'
|
||||
)}
|
||||
>
|
||||
<Tooltip.Root delayDuration={0} disableHoverableContent={true}>
|
||||
<Tooltip.Trigger className="min-w-4" asChild>
|
||||
{entity.type === ENTITY_TYPE.TABLE ? (
|
||||
<Table2
|
||||
size={15}
|
||||
strokeWidth={1.5}
|
||||
className={cn(
|
||||
'text-foreground-muted group-hover:text-foreground-lighter',
|
||||
isActive && 'text-foreground-lighter',
|
||||
'transition-colors'
|
||||
)}
|
||||
/>
|
||||
) : entity.type === ENTITY_TYPE.VIEW ? (
|
||||
<Eye
|
||||
size={15}
|
||||
strokeWidth={1.5}
|
||||
className={cn(
|
||||
'text-foreground-muted group-hover:text-foreground-lighter',
|
||||
isActive && 'text-foreground-lighter',
|
||||
'transition-colors'
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
|
||||
entity.type === ENTITY_TYPE.FOREIGN_TABLE && 'text-yellow-900 bg-yellow-500',
|
||||
entity.type === ENTITY_TYPE.MATERIALIZED_VIEW && 'text-purple-1000 bg-purple-500',
|
||||
entity.type === ENTITY_TYPE.PARTITIONED_TABLE &&
|
||||
'text-foreground-light bg-border-stronger'
|
||||
)}
|
||||
>
|
||||
{Object.entries(ENTITY_TYPE)
|
||||
.find(([, value]) => value === entity.type)?.[0]?.[0]
|
||||
?.toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content
|
||||
side="bottom"
|
||||
className={[
|
||||
'rounded bg-alternative py-1 px-2 leading-none shadow',
|
||||
'border border-background',
|
||||
'text-xs text-foreground capitalize',
|
||||
].join(' ')}
|
||||
>
|
||||
<Tooltip.Arrow className="radix-tooltip-arrow" />
|
||||
{formatTooltipText(entity.type)}
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
<div
|
||||
<div className="px-2">
|
||||
<EditorTablePageLink
|
||||
title={entity.name}
|
||||
id={String(entity.id)}
|
||||
href={`/project/${projectRef}/editor/${entity.id}?schema=${selectedSchema}`}
|
||||
role="button"
|
||||
aria-label={`View ${entity.name}`}
|
||||
className={cn(
|
||||
'truncate',
|
||||
'overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
|
||||
isActive && 'text-foreground'
|
||||
'w-full',
|
||||
'flex items-center gap-2',
|
||||
'py-1 px-2',
|
||||
'text-light',
|
||||
'rounded-md',
|
||||
isActive ? 'bg-selection' : 'hover:bg-surface-200 focus:bg-surface-200',
|
||||
'group',
|
||||
'transition'
|
||||
)}
|
||||
>
|
||||
<span
|
||||
<Tooltip.Root delayDuration={0} disableHoverableContent={true}>
|
||||
<Tooltip.Trigger className="min-w-4" asChild>
|
||||
{entity.type === ENTITY_TYPE.TABLE ? (
|
||||
<Table2
|
||||
size={15}
|
||||
strokeWidth={1.5}
|
||||
className={cn(
|
||||
'text-foreground-muted group-hover:text-foreground-lighter',
|
||||
isActive && 'text-foreground-lighter',
|
||||
'transition-colors'
|
||||
)}
|
||||
/>
|
||||
) : entity.type === ENTITY_TYPE.VIEW ? (
|
||||
<Eye
|
||||
size={15}
|
||||
strokeWidth={1.5}
|
||||
className={cn(
|
||||
'text-foreground-muted group-hover:text-foreground-lighter',
|
||||
isActive && 'text-foreground-lighter',
|
||||
'transition-colors'
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
'flex items-center justify-center text-xs h-4 w-4 rounded-[2px] font-bold',
|
||||
entity.type === ENTITY_TYPE.FOREIGN_TABLE && 'text-yellow-900 bg-yellow-500',
|
||||
entity.type === ENTITY_TYPE.MATERIALIZED_VIEW && 'text-purple-1000 bg-purple-500',
|
||||
entity.type === ENTITY_TYPE.PARTITIONED_TABLE &&
|
||||
'text-foreground-light bg-border-stronger'
|
||||
)}
|
||||
>
|
||||
{Object.entries(ENTITY_TYPE)
|
||||
.find(([, value]) => value === entity.type)?.[0]?.[0]
|
||||
?.toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content
|
||||
side="bottom"
|
||||
className={[
|
||||
'rounded bg-alternative py-1 px-2 leading-none shadow',
|
||||
'border border-background',
|
||||
'text-xs text-foreground capitalize',
|
||||
].join(' ')}
|
||||
>
|
||||
<Tooltip.Arrow className="radix-tooltip-arrow" />
|
||||
{formatTooltipText(entity.type)}
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
<div
|
||||
className={cn(
|
||||
isActive ? 'text-foreground' : 'text-foreground-light group-hover:text-foreground',
|
||||
'text-sm',
|
||||
'transition',
|
||||
'truncate'
|
||||
'truncate',
|
||||
'overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
|
||||
isActive && 'text-foreground'
|
||||
)}
|
||||
>
|
||||
{entity.name}
|
||||
</span>
|
||||
<EntityTooltipTrigger entity={entity} />
|
||||
</div>
|
||||
|
||||
{canEdit && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="text-foreground-lighter transition-all hover:text-foreground data-[state=open]:text-foreground">
|
||||
<MoreHorizontal size={14} strokeWidth={2} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="bottom" align="start" className="w-44">
|
||||
<DropdownMenuItem
|
||||
key="copy-name"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
copyToClipboard(entity.name)
|
||||
}}
|
||||
>
|
||||
<Clipboard size={12} />
|
||||
<span>Copy name</span>
|
||||
</DropdownMenuItem>
|
||||
|
||||
{entity.type === ENTITY_TYPE.TABLE && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuItem
|
||||
key="edit-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onEditTable()
|
||||
}}
|
||||
>
|
||||
<Edit size={12} />
|
||||
<span>Edit table</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
key="duplicate-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onDuplicateTable()
|
||||
}}
|
||||
>
|
||||
<Copy size={12} />
|
||||
<span>Duplicate table</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem key="view-policies" className="space-x-2" asChild>
|
||||
<Link
|
||||
key="view-policies"
|
||||
href={`/project/${projectRef}/auth/policies?schema=${selectedSchema}&search=${entity.id}`}
|
||||
>
|
||||
<Lock size={12} />
|
||||
<span>View policies</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger className="gap-x-2">
|
||||
<Download size={12} />
|
||||
Export data
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem
|
||||
key="download-table-csv"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
exportTableAsCSV()
|
||||
}}
|
||||
>
|
||||
<span>Export table as CSV</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
key="download-table-sql"
|
||||
className="gap-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
exportTableAsSQL()
|
||||
}}
|
||||
>
|
||||
<span>Export table as SQL</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
key="delete-table"
|
||||
className="gap-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onDeleteTable()
|
||||
}}
|
||||
>
|
||||
<Trash size={12} />
|
||||
<span>Delete table</span>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
<span
|
||||
className={cn(
|
||||
isActive ? 'text-foreground' : 'text-foreground-light group-hover:text-foreground',
|
||||
'text-sm',
|
||||
'transition',
|
||||
'truncate'
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</EditorTablePageLink>
|
||||
>
|
||||
{entity.name}
|
||||
</span>
|
||||
<EntityTooltipTrigger entity={entity} />
|
||||
</div>
|
||||
|
||||
{canEdit && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger className="text-foreground-lighter transition-all hover:text-foreground data-[state=open]:text-foreground">
|
||||
<MoreHorizontal size={14} strokeWidth={2} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="bottom" align="start" className="w-44">
|
||||
<DropdownMenuItem
|
||||
key="copy-name"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
copyToClipboard(entity.name)
|
||||
}}
|
||||
>
|
||||
<Clipboard size={12} />
|
||||
<span>Copy name</span>
|
||||
</DropdownMenuItem>
|
||||
|
||||
{entity.type === ENTITY_TYPE.TABLE && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<DropdownMenuItem
|
||||
key="edit-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onEditTable()
|
||||
}}
|
||||
>
|
||||
<Edit size={12} />
|
||||
<span>Edit table</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
key="duplicate-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onDuplicateTable()
|
||||
}}
|
||||
>
|
||||
<Copy size={12} />
|
||||
<span>Duplicate table</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem key="view-policies" className="space-x-2" asChild>
|
||||
<Link
|
||||
key="view-policies"
|
||||
href={`/project/${projectRef}/auth/policies?schema=${selectedSchema}&search=${entity.id}`}
|
||||
>
|
||||
<Lock size={12} />
|
||||
<span>View policies</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger className="gap-x-2">
|
||||
<Download size={12} />
|
||||
Export data
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem
|
||||
key="download-table-csv"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
exportTableAsCSV()
|
||||
}}
|
||||
>
|
||||
<span>Export table as CSV</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
key="download-table-sql"
|
||||
className="gap-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
exportTableAsSQL()
|
||||
}}
|
||||
>
|
||||
<span>Export table as SQL</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
key="delete-table"
|
||||
className="gap-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onDeleteTable()
|
||||
}}
|
||||
>
|
||||
<Trash size={12} />
|
||||
<span>Delete table</span>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</EditorTablePageLink>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -269,7 +269,7 @@ const TableEditorMenu = () => {
|
||||
/>
|
||||
)}
|
||||
{(entityTypes?.length ?? 0) > 0 && (
|
||||
<div className="flex flex-1" data-testid="tables-list">
|
||||
<div className="flex flex-1 -mx-2" data-testid="tables-list">
|
||||
<InfiniteList
|
||||
items={entityTypes}
|
||||
ItemComponent={EntityListItem}
|
||||
|
||||
Reference in new issue
Block a user