mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
feat(studio): improve database column list scanning (#44208)
## 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>
This commit is contained in:
Danny WhiteandJoshen Lim authored and GitHub committed
1 parent
fe08059cb7
commit
3980bb162d
5 files changed
+436
-116
No files matched your search
@@ -3,6 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
|
||||
import { useParams } from 'common'
|
||||
import AlertError from 'components/ui/AlertError'
|
||||
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
|
||||
import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
|
||||
import { NoSearchResults } from 'components/ui/NoSearchResults'
|
||||
import { useTableEditorQuery } from 'data/table-editor/table-editor-query'
|
||||
import { isTableLike } from 'data/table-editor/table-editor-types'
|
||||
@@ -10,14 +11,29 @@ import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
||||
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
|
||||
import { useIsProtectedSchema } from 'hooks/useProtectedSchemas'
|
||||
import { noop } from 'lodash'
|
||||
import { Check, Edit, MoreVertical, Plus, Search, Trash, X } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Braces,
|
||||
Calendar,
|
||||
DiamondIcon,
|
||||
Fingerprint,
|
||||
Hash,
|
||||
Key,
|
||||
Link as LinkIcon,
|
||||
ListPlus,
|
||||
MoreVertical,
|
||||
Plus,
|
||||
Search,
|
||||
ToggleRight,
|
||||
Trash,
|
||||
Type,
|
||||
} from 'lucide-react'
|
||||
import { useState, type ReactNode } from 'react'
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
cn,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -34,6 +50,51 @@ import { Input } from 'ui-patterns/DataInputs/Input'
|
||||
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
|
||||
|
||||
import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning'
|
||||
import {
|
||||
getColumnTypeAffordance,
|
||||
getForeignKeyColumnNames,
|
||||
getPrimaryKeyColumnNames,
|
||||
getUniqueIndexColumnNames,
|
||||
} from './ColumnList.utils'
|
||||
import { ConstraintToken } from './ConstraintToken'
|
||||
|
||||
const getColumnTypeAffordancePresentation = (column: PostgresColumn) => {
|
||||
const { kind, label } = getColumnTypeAffordance(column.format)
|
||||
const iconClassName = 'text-foreground-muted'
|
||||
|
||||
switch (kind) {
|
||||
case 'number':
|
||||
return {
|
||||
icon: <Hash size={14} className={iconClassName} strokeWidth={1.5} />,
|
||||
label,
|
||||
}
|
||||
case 'time':
|
||||
return {
|
||||
icon: <Calendar size={14} className={iconClassName} strokeWidth={1.5} />,
|
||||
label,
|
||||
}
|
||||
case 'text':
|
||||
return {
|
||||
icon: <Type size={14} className={iconClassName} strokeWidth={1.5} />,
|
||||
label,
|
||||
}
|
||||
case 'json':
|
||||
return {
|
||||
icon: <Braces size={14} className={iconClassName} strokeWidth={1.5} />,
|
||||
label,
|
||||
}
|
||||
case 'bool':
|
||||
return {
|
||||
icon: <ToggleRight size={14} className={iconClassName} strokeWidth={1.5} />,
|
||||
label,
|
||||
}
|
||||
default:
|
||||
return {
|
||||
icon: <ListPlus size={16} className={iconClassName} strokeWidth={1.5} />,
|
||||
label,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface ColumnListProps {
|
||||
onAddColumn: () => void
|
||||
@@ -64,6 +125,10 @@ export const ColumnList = ({
|
||||
|
||||
const [filterString, setFilterString] = useState<string>('')
|
||||
const isTableEntity = isTableLike(selectedTable)
|
||||
const tableConstraintSource = isTableEntity ? selectedTable : undefined
|
||||
const primaryKeyColumns = getPrimaryKeyColumnNames(tableConstraintSource)
|
||||
const foreignKeyColumns = getForeignKeyColumnNames(tableConstraintSource)
|
||||
const uniqueIndexColumns = getUniqueIndexColumnNames(tableConstraintSource)
|
||||
|
||||
const columns =
|
||||
(filterString.length === 0
|
||||
@@ -77,6 +142,9 @@ export const ColumnList = ({
|
||||
PermissionAction.TENANT_SQL_ADMIN_WRITE,
|
||||
'columns'
|
||||
)
|
||||
const deleteColumnTooltipText = !canUpdateColumns
|
||||
? 'Additional permissions required to delete column'
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -122,25 +190,23 @@ export const ColumnList = ({
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className={columns.length === 0 ? 'text-foreground-muted' : undefined}>
|
||||
<TableHead className="w-0 !px-0" />
|
||||
|
||||
<TableHead
|
||||
className={cn(columns.length === 0 ? 'text-foreground-muted' : undefined)}
|
||||
>
|
||||
Name
|
||||
</TableHead>
|
||||
<TableHead className={columns.length === 0 ? 'text-foreground-muted' : undefined}>
|
||||
Data Type
|
||||
Type
|
||||
</TableHead>
|
||||
<TableHead className={columns.length === 0 ? 'text-foreground-muted' : undefined}>
|
||||
Format
|
||||
</TableHead>
|
||||
<TableHead
|
||||
className={
|
||||
columns.length === 0 ? 'text-right text-foreground-muted' : 'text-right'
|
||||
}
|
||||
>
|
||||
Nullable
|
||||
Constraints
|
||||
</TableHead>
|
||||
<TableHead />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{isError && (
|
||||
<TableRow className="[&>td]:hover:bg-inherit">
|
||||
@@ -177,86 +243,156 @@ export const ColumnList = ({
|
||||
)}
|
||||
|
||||
{isSuccess &&
|
||||
columns.length > 0 &&
|
||||
columns.map((column) => (
|
||||
<TableRow key={column.name}>
|
||||
<TableCell>
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<p>{column.name}</p>
|
||||
{column.comment !== null ? (
|
||||
<span
|
||||
className="max-w-md truncate text-foreground-lighter"
|
||||
title={column.comment}
|
||||
>
|
||||
{column.comment}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<code className="text-code-inline">{column.data_type}</code>
|
||||
</TableCell>
|
||||
<TableCell className="font-mono text-xs">
|
||||
<code className="text-code-inline">{column.format}</code>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{column.is_nullable ? (
|
||||
<div className="flex justify-end">
|
||||
<Check size={16} strokeWidth={2} className="text-brand" />
|
||||
columns.map((column) => {
|
||||
const { icon: TypeIcon, label: typeLabel } =
|
||||
getColumnTypeAffordancePresentation(column)
|
||||
|
||||
const constraintTokens = [
|
||||
primaryKeyColumns.has(column.name) ? (
|
||||
<ConstraintToken
|
||||
key="primary"
|
||||
icon={<Key size={12} strokeWidth={1.7} className="shrink-0" />}
|
||||
label="Primary"
|
||||
variant="primary"
|
||||
/>
|
||||
) : null,
|
||||
foreignKeyColumns.has(column.name) ? (
|
||||
<ConstraintToken
|
||||
key="foreign-key"
|
||||
icon={
|
||||
<LinkIcon
|
||||
size={12}
|
||||
strokeWidth={1.7}
|
||||
className="shrink-0 text-foreground-muted"
|
||||
/>
|
||||
}
|
||||
label="Foreign key"
|
||||
/>
|
||||
) : null,
|
||||
column.is_unique || uniqueIndexColumns.has(column.name) ? (
|
||||
<ConstraintToken
|
||||
key="unique"
|
||||
icon={
|
||||
<Fingerprint
|
||||
size={12}
|
||||
strokeWidth={1.7}
|
||||
className="shrink-0 text-foreground-light"
|
||||
/>
|
||||
}
|
||||
label="Unique"
|
||||
/>
|
||||
) : null,
|
||||
column.is_identity ? (
|
||||
<ConstraintToken
|
||||
key="identity"
|
||||
icon={
|
||||
<Hash
|
||||
size={12}
|
||||
strokeWidth={1.7}
|
||||
className="shrink-0 text-foreground-lighter"
|
||||
/>
|
||||
}
|
||||
label="Identity"
|
||||
/>
|
||||
) : null,
|
||||
<ConstraintToken
|
||||
key="nullability"
|
||||
icon={
|
||||
<DiamondIcon
|
||||
size={12}
|
||||
strokeWidth={1.7}
|
||||
className="shrink-0"
|
||||
fill={column.is_nullable ? 'none' : 'currentColor'}
|
||||
/>
|
||||
}
|
||||
label={column.is_nullable ? 'Nullable' : 'Non-nullable'}
|
||||
variant="secondary"
|
||||
/>,
|
||||
].filter(Boolean)
|
||||
|
||||
return (
|
||||
<TableRow key={column.name}>
|
||||
<TableCell className="w-0 !pl-5 !pr-1">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild className="cursor-default" aria-label={typeLabel}>
|
||||
<div className="flex w-4 justify-center">{TypeIcon}</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
<div className="flex flex-col">
|
||||
<span>{column.data_type}</span>
|
||||
{column.format !== column.data_type && (
|
||||
<span className="text-xs text-foreground-light">
|
||||
{column.format}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell className="max-w-[160px] sm:max-w-[280px]">
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<p>{column.name}</p>
|
||||
{column.comment !== null ? (
|
||||
<span
|
||||
className="max-w-md truncate text-foreground-lighter"
|
||||
title={column.comment}
|
||||
>
|
||||
{column.comment}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-end">
|
||||
<X size={16} strokeWidth={2} className="text-foreground-lighter" />
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{!isSchemaLocked && isTableEntity && (
|
||||
<div className="flex justify-end gap-2">
|
||||
<ButtonTooltip
|
||||
type="default"
|
||||
disabled={!canUpdateColumns}
|
||||
onClick={() => onEditColumn(column)}
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: !canUpdateColumns
|
||||
? 'Additional permissions required to edit column'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</ButtonTooltip>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="default" className="px-1" icon={<MoreVertical />} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="bottom" align="end" className="w-32">
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<DropdownMenuItem
|
||||
disabled={!canUpdateColumns || isSchemaLocked}
|
||||
onClick={() => onDeleteColumn(column)}
|
||||
className="space-x-2"
|
||||
>
|
||||
<Trash size={12} />
|
||||
<p>Delete column</p>
|
||||
</DropdownMenuItem>
|
||||
</TooltipTrigger>
|
||||
{!canUpdateColumns && (
|
||||
<TooltipContent side="bottom">
|
||||
Additional permissions required to delete column
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<p className="text-foreground-lighter">{column.format}</p>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1.5">{constraintTokens}</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{!isSchemaLocked && isTableEntity && (
|
||||
<div className="flex justify-end gap-2">
|
||||
<ButtonTooltip
|
||||
type="default"
|
||||
disabled={!canUpdateColumns}
|
||||
onClick={() => onEditColumn(column)}
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: !canUpdateColumns
|
||||
? 'Additional permissions required to edit column'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</ButtonTooltip>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button type="default" className="px-1" icon={<MoreVertical />} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="bottom" align="end" className="w-32">
|
||||
<DropdownMenuItemTooltip
|
||||
disabled={!canUpdateColumns}
|
||||
onClick={() => onDeleteColumn(column)}
|
||||
className="gap-x-2"
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'left',
|
||||
text: deleteColumnTooltipText,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Trash size={12} />
|
||||
<p>Delete column</p>
|
||||
</DropdownMenuItemTooltip>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
{isSuccess && (
|
||||
<TableFooter className="font-normal">
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import {
|
||||
getColumnTypeAffordance,
|
||||
getForeignKeyColumnNames,
|
||||
getPrimaryKeyColumnNames,
|
||||
getUniqueIndexColumnNames,
|
||||
} from './ColumnList.utils'
|
||||
|
||||
describe('ColumnList.utils', () => {
|
||||
it('normalises quoted array formats before resolving the affordance kind', () => {
|
||||
expect(getColumnTypeAffordance('"uuid"[]')).toEqual({
|
||||
kind: 'text',
|
||||
label: 'Text',
|
||||
})
|
||||
})
|
||||
|
||||
it('maps recognised Postgres formats to their affordance labels', () => {
|
||||
expect(getColumnTypeAffordance('timestamptz')).toEqual({
|
||||
kind: 'time',
|
||||
label: 'Date / time',
|
||||
})
|
||||
expect(getColumnTypeAffordance('jsonb')).toEqual({
|
||||
kind: 'json',
|
||||
label: 'JSON',
|
||||
})
|
||||
})
|
||||
|
||||
it('falls back to the other affordance for unrecognised formats', () => {
|
||||
expect(getColumnTypeAffordance('citext')).toEqual({
|
||||
kind: 'other',
|
||||
label: 'Other',
|
||||
})
|
||||
})
|
||||
|
||||
it('derives only source-table foreign key column names', () => {
|
||||
const table = {
|
||||
schema: 'public',
|
||||
name: 'orders',
|
||||
primary_keys: [{ name: 'id' }],
|
||||
relationships: [
|
||||
{
|
||||
source_schema: 'public',
|
||||
source_table_name: 'orders',
|
||||
source_column_name: 'customer_id',
|
||||
target_table_schema: 'public',
|
||||
target_table_name: 'customers',
|
||||
target_column_name: 'id',
|
||||
},
|
||||
{
|
||||
source_schema: 'public',
|
||||
source_table_name: 'customers',
|
||||
source_column_name: 'account_id',
|
||||
target_table_schema: 'public',
|
||||
target_table_name: 'accounts',
|
||||
target_column_name: 'id',
|
||||
},
|
||||
],
|
||||
unique_indexes: [{ columns: ['reference'] }, { columns: ['customer_id', 'reference'] }],
|
||||
} as const
|
||||
|
||||
expect([...getPrimaryKeyColumnNames(table)]).toEqual(['id'])
|
||||
expect([...getForeignKeyColumnNames(table)]).toEqual(['customer_id'])
|
||||
expect([...getUniqueIndexColumnNames(table)]).toEqual(['reference'])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,78 @@
|
||||
import { POSTGRES_DATA_TYPE_OPTIONS } from 'components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants'
|
||||
|
||||
type TableConstraintSource = {
|
||||
schema: string
|
||||
name: string
|
||||
primary_keys: ReadonlyArray<{ name: string }>
|
||||
relationships: ReadonlyArray<{
|
||||
source_schema: string
|
||||
source_table_name: string
|
||||
source_column_name: string
|
||||
}>
|
||||
unique_indexes?: ReadonlyArray<{ columns: ReadonlyArray<string> }>
|
||||
}
|
||||
|
||||
export type ColumnAffordanceKind = 'number' | 'time' | 'text' | 'json' | 'bool' | 'other'
|
||||
|
||||
export interface ColumnTypeAffordance {
|
||||
kind: ColumnAffordanceKind
|
||||
label: string
|
||||
}
|
||||
|
||||
const COLUMN_AFFORDANCE_LABELS: Record<ColumnAffordanceKind, string> = {
|
||||
number: 'Numeric',
|
||||
time: 'Date / time',
|
||||
text: 'Text',
|
||||
json: 'JSON',
|
||||
bool: 'Boolean',
|
||||
other: 'Other',
|
||||
}
|
||||
|
||||
const normalizeColumnFormat = (format: string) => format.replaceAll('"', '').replace(/\[\]$/, '')
|
||||
|
||||
export function getColumnTypeAffordance(format: string): ColumnTypeAffordance {
|
||||
const normalizedFormat = normalizeColumnFormat(format)
|
||||
const optionType = POSTGRES_DATA_TYPE_OPTIONS.find(
|
||||
(option) => option.name === normalizedFormat
|
||||
)?.type
|
||||
|
||||
switch (optionType) {
|
||||
case 'number':
|
||||
case 'time':
|
||||
case 'text':
|
||||
case 'json':
|
||||
case 'bool':
|
||||
return { kind: optionType, label: COLUMN_AFFORDANCE_LABELS[optionType] }
|
||||
default:
|
||||
return { kind: 'other', label: COLUMN_AFFORDANCE_LABELS.other }
|
||||
}
|
||||
}
|
||||
|
||||
export function getPrimaryKeyColumnNames(table?: TableConstraintSource) {
|
||||
return new Set(table?.primary_keys.map((primaryKey) => primaryKey.name) ?? [])
|
||||
}
|
||||
|
||||
export function getForeignKeyColumnNames(table?: TableConstraintSource) {
|
||||
if (!table) {
|
||||
return new Set<string>()
|
||||
}
|
||||
|
||||
const { schema, name, relationships } = table
|
||||
|
||||
return new Set(
|
||||
relationships
|
||||
.filter(
|
||||
(relationship) =>
|
||||
relationship.source_schema === schema && relationship.source_table_name === name
|
||||
)
|
||||
.map((relationship) => relationship.source_column_name)
|
||||
)
|
||||
}
|
||||
|
||||
export function getUniqueIndexColumnNames(table?: TableConstraintSource) {
|
||||
return new Set(
|
||||
table?.unique_indexes
|
||||
?.filter((uniqueIndex) => uniqueIndex.columns.length === 1)
|
||||
.flatMap((uniqueIndex) => uniqueIndex.columns) ?? []
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -306,22 +306,14 @@ export const TableList = ({
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead key="icon" className="!px-0" />
|
||||
<TableHead key="icon" className="w-0 !px-0" />
|
||||
<TableHead key="name" className="max-w-[160px] sm:max-w-[280px]">
|
||||
Name
|
||||
</TableHead>
|
||||
<TableHead key="columns" className="text-right">
|
||||
Columns
|
||||
</TableHead>
|
||||
<TableHead key="rows" className="text-right">
|
||||
Rows (Estimated)
|
||||
</TableHead>
|
||||
<TableHead key="size" className="text-right">
|
||||
Size (Estimated)
|
||||
</TableHead>
|
||||
<TableHead key="realtime" className="text-right">
|
||||
Realtime Enabled
|
||||
</TableHead>
|
||||
<TableHead key="columns">Columns</TableHead>
|
||||
<TableHead key="rows">Rows (Estimated)</TableHead>
|
||||
<TableHead key="size">Size (Estimated)</TableHead>
|
||||
<TableHead key="realtime">Realtime</TableHead>
|
||||
<TableHead key="buttons"></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -375,10 +367,12 @@ export const TableList = ({
|
||||
{entities.length > 0 &&
|
||||
entities.map((x) => (
|
||||
<TableRow key={x.id}>
|
||||
<TableCell className="!pl-5 !pr-1">
|
||||
<TableCell className="w-0 !pl-5 !pr-1">
|
||||
<Tooltip>
|
||||
<TooltipTrigger className="cursor-default">
|
||||
<EntityTypeIcon type={x.type} />
|
||||
<TooltipTrigger asChild className="cursor-default">
|
||||
<div className="flex w-4 justify-center">
|
||||
<EntityTypeIcon type={x.type} />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
{formatTooltipText(x.type)}
|
||||
@@ -412,35 +406,37 @@ export const TableList = ({
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell>
|
||||
<p className="text-foreground-light">
|
||||
{x.columns.length.toLocaleString()}
|
||||
</p>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell>
|
||||
{x.rows !== undefined ? (
|
||||
<p className="text-foreground-light">{x.rows.toLocaleString()}</p>
|
||||
) : (
|
||||
<p className="text-foreground-muted">–</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell>
|
||||
{x.size !== undefined ? (
|
||||
<p className="text-foreground-light">{x.size}</p>
|
||||
) : (
|
||||
<p className="text-foreground-muted">–</p>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<TableCell>
|
||||
{(realtimePublication?.tables ?? []).find(
|
||||
(table) => table.id === x.id
|
||||
) ? (
|
||||
<div className="flex justify-end">
|
||||
<Check size={16} strokeWidth={2} className="text-brand" />
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Check size={16} strokeWidth={2} className="text-brand-link" />
|
||||
<p className="text-foreground-light">Enabled</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-end">
|
||||
<X size={16} strokeWidth={2} className="text-foreground-lighter" />
|
||||
<div className="flex items-center gap-x-2">
|
||||
<X size={16} strokeWidth={2} className="text-foreground-muted" />
|
||||
<p className="text-foreground-lighter">Disabled</p>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
Reference in new issue
Block a user