remove empty table state lines

This commit is contained in:
miloschwartz
2026-04-22 17:43:29 -07:00
parent 6b83d3c3f1
commit f651ca84fa
3 changed files with 48 additions and 41 deletions

View File

@@ -77,11 +77,11 @@ function VerticalRuleStep({
className="flex flex-col items-center gap-0 shrink-0 w-8"
aria-hidden
>
<div className="flex h-8 w-8 items-center justify-center rounded-full border-2 border-border bg-background text-sm font-semibold text-muted-foreground">
<div className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background text-sm text-muted-foreground">
{stepNumber}
</div>
{!isLast && (
<div className="w-px flex-1 min-h-8 my-1 border-l-2 border-dashed border-border" />
<div className="w-px flex-1 min-h-8 my-1 border-l border-dashed border-border" />
)}
</div>
<div
@@ -178,7 +178,7 @@ export default function AlertRuleGraphEditor({
>
<div className="flex flex-wrap items-center gap-2">
{isNew && (
<Badge variant="secondary" >
<Badge variant="secondary">
{t("alertingDraftBadge")}
</Badge>
)}
@@ -209,7 +209,9 @@ export default function AlertRuleGraphEditor({
render={({ field }) => (
<FormItem>
<FormLabel>
{t("alertingRuleCooldown")}
{t(
"alertingRuleCooldown"
)}
</FormLabel>
<FormControl>
<Input
@@ -229,7 +231,9 @@ export default function AlertRuleGraphEditor({
/>
</FormControl>
<FormDescription>
{t("alertingRuleCooldownDescription")}
{t(
"alertingRuleCooldownDescription"
)}
</FormDescription>
<FormMessage />
</FormItem>

View File

@@ -256,31 +256,39 @@ export function ControlledDataTable<TData, TValue>({
addButtonText && ((addActions && addActions.length > 0) || onAdd)
);
const showAddActionInEmptyState = !hasRows && hasAddAction;
const addAction = addActions && addActions.length > 0 && addButtonText ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
disabled={addButtonDisabled || isNavigatingToAddPage}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{addActions.map((action, i) => (
<DropdownMenuItem key={i} onSelect={() => action.onSelect()}>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : onAdd && addButtonText ? (
<Button onClick={onAdd} loading={isNavigatingToAddPage} disabled={addButtonDisabled}>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
) : null;
const addAction =
addActions && addActions.length > 0 && addButtonText ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
disabled={addButtonDisabled || isNavigatingToAddPage}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{addActions.map((action, i) => (
<DropdownMenuItem
key={i}
onSelect={() => action.onSelect()}
>
{action.label}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
) : onAdd && addButtonText ? (
<Button
onClick={onAdd}
loading={isNavigatingToAddPage}
disabled={addButtonDisabled}
>
<Plus className="mr-2 h-4 w-4" />
{addButtonText}
</Button>
) : null;
return (
<div className="container mx-auto max-w-12xl">
@@ -606,13 +614,11 @@ export function ControlledDataTable<TData, TValue>({
<DataTableEmptyState
colSpan={columns.length}
action={
showAddActionInEmptyState
? (
<div className="hidden sm:block">
{addAction}
</div>
)
: undefined
showAddActionInEmptyState ? (
<div className="hidden sm:block">
{addAction}
</div>
) : undefined
}
/>
)}

View File

@@ -26,10 +26,7 @@ export function DataTableEmptyState({
>
{Array.from({ length: PLACEHOLDER_ROW_COUNT }).map(
(_, i) => (
<div
key={i}
className="h-10 shrink-0 border-b border-border/30"
/>
<div key={i} className="h-10 shrink-0" />
)
)}
</div>