mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Danny WhiteandJoshen Lim
3980bb162d
## What kind of change does this PR introduce? UI improvements. Resolves DEPR-419. ## What is the current behavior? - `ColumnList` splits type information across separate `Data Type` and `Format` columns, which makes scanning less efficient - The list only surfaces a limited subset of column metadata up front, so key structural information like primary keys, foreign keys, uniqueness, and identity is not easy to scan - Constraint and nullability affordances are not aligned with the visual language already used in the Table Editor and Schema Visualiser ## What is the new behavior? - `ColumnList` now shows a leading type affordance icon, while keeping the exact Postgres type visible in the `Type` column - The standalone `Data Type` column is removed, and `format` is now the primary textual type shown in the table - The `Constraints` column now surfaces explicit icon-plus-label tokens for: - `Primary` - `Foreign key` - `Unique` - `Identity` - `Nullable` / `Non-nullable` - Constraint tokens use a purpose-built segmented style based on `ComputeBadge`, including a green primary variant for primary keys - Nullability now matches Schema Visualiser semantics exactly: outlined diamond for nullable, filled diamond for non-nullable - Existing search, descriptions, row actions, and permission gating are preserved --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
interface ConstraintTokenProps {
|
|
icon?: ReactNode
|
|
label: string
|
|
variant?: 'default' | 'secondary' | 'primary'
|
|
}
|
|
|
|
const constraintTokenClassName = cn(
|
|
'inline-flex items-center justify-center rounded-md text-center font-mono uppercase whitespace-nowrap font-medium',
|
|
'tracking-[0.06em] text-[11px] leading-[1.1] px-[5.5px] h-[21px]',
|
|
'transition-all border'
|
|
)
|
|
|
|
export const ConstraintToken = ({ icon, label, variant = 'default' }: ConstraintTokenProps) => {
|
|
const tokenToneClassName =
|
|
variant === 'primary'
|
|
? 'bg-brand bg-opacity-10 text-brand-600 border-brand-500'
|
|
: variant === 'default'
|
|
? 'bg-surface-75 text-foreground-light border-strong'
|
|
: 'bg-surface-75 bg-opacity-50 text-foreground-light border-strong'
|
|
|
|
return (
|
|
<div className="inline-flex items-center whitespace-nowrap">
|
|
{icon && (
|
|
<span
|
|
className={cn(constraintTokenClassName, tokenToneClassName, 'rounded-r-none border-r-0')}
|
|
>
|
|
{icon}
|
|
</span>
|
|
)}
|
|
<span
|
|
className={cn(
|
|
constraintTokenClassName,
|
|
tokenToneClassName,
|
|
icon ? 'rounded-l-none' : 'rounded-md'
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|