mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
a11y updates on table editor entity items (#21482)
a11y updates on entity items. fixed bg-selection issue
This commit is contained in:
Jonathan Summers-Muir authored and GitHub committed
1 parent
b510595abf
commit
13ea35f631
1 file changed
+130
-148
@@ -118,161 +118,143 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
'group flex items-center justify-between rounded-md',
|
||||
isActive && 'text-foreground bg-surface-200'
|
||||
<Link
|
||||
title={entity.name}
|
||||
href={`/project/${projectRef}/editor/${entity.id}`}
|
||||
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 ? 'text-foreground bg-selection' : 'hover:bg-surface-200 focus:bg-surface-200',
|
||||
'group',
|
||||
'transition'
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={`/project/${projectRef}/editor/${entity.id}`}
|
||||
className="flex items-center gap-2 py-1 pl-2 w-full max-w-[90%]"
|
||||
>
|
||||
<Tooltip.Root delayDuration={0} disableHoverableContent={true}>
|
||||
<Tooltip.Trigger className="flex items-center" asChild>
|
||||
{entity.type === ENTITY_TYPE.TABLE ? (
|
||||
<Table2 size={15} strokeWidth={1.5} className="text-foreground-light" />
|
||||
) : entity.type === ENTITY_TYPE.VIEW ? (
|
||||
<Eye size={15} strokeWidth={1.5} className="text-foreground-light" />
|
||||
) : (
|
||||
<div
|
||||
className={clsx(
|
||||
'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(
|
||||
'text-sm text-foreground-light group-hover:text-foreground transition max-w-[175px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
|
||||
isActive && 'text-foreground'
|
||||
)}
|
||||
>
|
||||
{/* only show tooltips if required, to reduce noise */}
|
||||
{entity.name.length > 20 ? (
|
||||
<Tooltip.Root delayDuration={0} disableHoverableContent={true}>
|
||||
<Tooltip.Trigger className="max-w-[95%] overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{entity.name}
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content
|
||||
side="right"
|
||||
className={[
|
||||
'rounded bg-alternative py-1 px-2 leading-none shadow',
|
||||
'border border-background',
|
||||
'text-xs text-foreground',
|
||||
].join(' ')}
|
||||
>
|
||||
<Tooltip.Arrow className="radix-tooltip-arrow" />
|
||||
{entity.name}
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
<Tooltip.Root delayDuration={0} disableHoverableContent={true}>
|
||||
<Tooltip.Trigger className="flex items-center" asChild>
|
||||
{entity.type === ENTITY_TYPE.TABLE ? (
|
||||
<Table2 size={15} strokeWidth={1.5} className="text-foreground-lighter" />
|
||||
) : entity.type === ENTITY_TYPE.VIEW ? (
|
||||
<Eye size={15} strokeWidth={1.5} className="text-foreground-lighter" />
|
||||
) : (
|
||||
entity.name
|
||||
)}
|
||||
|
||||
{entity.type === ENTITY_TYPE.TABLE && !entity.rls_enabled && (
|
||||
<div className="w-4 px-0.5">
|
||||
<Unlock
|
||||
size={14}
|
||||
strokeWidth={1.5}
|
||||
className={cn(isActive ? 'text-warning' : 'text-warning-500')}
|
||||
/>
|
||||
<div
|
||||
className={clsx(
|
||||
'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>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="pr-2 flex items-center">
|
||||
{entity.type === ENTITY_TYPE.TABLE && isActive && !isLocked && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<div className="text-foreground-lighter transition-all hover:text-foreground">
|
||||
<MoreHorizontal size={14} strokeWidth={2} />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="bottom" align="start">
|
||||
<DropdownMenuItem
|
||||
key="edit-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onEditTable()
|
||||
}}
|
||||
>
|
||||
<IconEdit size="tiny" />
|
||||
<span>Edit Table</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
key="duplicate-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onDuplicateTable()
|
||||
}}
|
||||
>
|
||||
<IconCopy size="tiny" />
|
||||
<span>Duplicate Table</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem key="view-policies" className="space-x-2" asChild>
|
||||
<Link
|
||||
key="view-policies"
|
||||
href={`/project/${projectRef}/auth/policies?schema=${snap.selectedSchemaName}&search=${entity.id}`}
|
||||
>
|
||||
<IconLock size="tiny" />
|
||||
<span>View Policies</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
key="download-table-csv"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
exportTableAsCSV()
|
||||
}}
|
||||
>
|
||||
<IconDownload size="tiny" />
|
||||
<span>Export as CSV</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
key="delete-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onDeleteTable()
|
||||
}}
|
||||
>
|
||||
<IconTrash size="tiny" />
|
||||
<span>Delete Table</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</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(
|
||||
'truncate',
|
||||
'max-w-[175px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center gap-2 relative w-full',
|
||||
isActive && 'text-foreground'
|
||||
)}
|
||||
>
|
||||
{/* only show tooltips if required, to reduce noise */}
|
||||
<span className="truncate text-sm text-foreground-light group-hover:text-foreground transition">
|
||||
{entity.name}
|
||||
</span>
|
||||
|
||||
{entity.type === ENTITY_TYPE.TABLE && !entity.rls_enabled && (
|
||||
<Unlock
|
||||
size={14}
|
||||
strokeWidth={2}
|
||||
className={cn(isActive ? 'text-warning-600' : 'text-warning-500')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{entity.type === ENTITY_TYPE.TABLE && isActive && !isLocked && (
|
||||
<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">
|
||||
<DropdownMenuItem
|
||||
key="edit-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onEditTable()
|
||||
}}
|
||||
>
|
||||
<IconEdit size="tiny" />
|
||||
<span>Edit Table</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
key="duplicate-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onDuplicateTable()
|
||||
}}
|
||||
>
|
||||
<IconCopy size="tiny" />
|
||||
<span>Duplicate Table</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem key="view-policies" className="space-x-2" asChild>
|
||||
<Link
|
||||
key="view-policies"
|
||||
href={`/project/${projectRef}/auth/policies?schema=${snap.selectedSchemaName}&search=${entity.id}`}
|
||||
>
|
||||
<IconLock size="tiny" />
|
||||
<span>View Policies</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
key="download-table-csv"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
exportTableAsCSV()
|
||||
}}
|
||||
>
|
||||
<IconDownload size="tiny" />
|
||||
<span>Export as CSV</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
key="delete-table"
|
||||
className="space-x-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
snap.onDeleteTable()
|
||||
}}
|
||||
>
|
||||
<IconTrash size="tiny" />
|
||||
<span>Delete Table</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user