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" className="flex flex-col items-center gap-0 shrink-0 w-8"
aria-hidden 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} {stepNumber}
</div> </div>
{!isLast && ( {!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>
<div <div
@@ -178,7 +178,7 @@ export default function AlertRuleGraphEditor({
> >
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
{isNew && ( {isNew && (
<Badge variant="secondary" > <Badge variant="secondary">
{t("alertingDraftBadge")} {t("alertingDraftBadge")}
</Badge> </Badge>
)} )}
@@ -209,7 +209,9 @@ export default function AlertRuleGraphEditor({
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel> <FormLabel>
{t("alertingRuleCooldown")} {t(
"alertingRuleCooldown"
)}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Input <Input
@@ -229,7 +231,9 @@ export default function AlertRuleGraphEditor({
/> />
</FormControl> </FormControl>
<FormDescription> <FormDescription>
{t("alertingRuleCooldownDescription")} {t(
"alertingRuleCooldownDescription"
)}
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>

View File

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

View File

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