refactor(fleet): standardize empty-state and header layout across Fleet tabs (#1312)

Extract the Secrets tab's header and empty-card markup into shared
primitives (FleetTabHeading, FleetEmptyState, FleetEmptyCard) and adopt
them across Snapshots, Deployments, Routing, Federation, and Secrets so
the Fleet area presents one consistent layout. The empty card sits
vertically centered below a title/subtitle header. Deployments keeps its
onboarding steps inside the shared shell; Federation's sections are
unchanged.
This commit is contained in:
Anso
2026-06-04 21:46:33 -04:00
committed by GitHub
parent 81858a0bb0
commit 37af4a2087
6 changed files with 160 additions and 82 deletions
@@ -1,5 +1,7 @@
import { useCallback, useEffect, useState } from 'react';
import { Plus } from 'lucide-react';
import { Modal, ModalHeader, ModalBody } from '@/components/ui/modal';
import { Button } from '@/components/ui/button';
import { toast } from '@/components/ui/toast-store';
import {
type BlueprintListItem,
@@ -11,6 +13,7 @@ import {
} from '@/lib/blueprintsApi';
import { BlueprintCatalog } from './BlueprintCatalog';
import { BlueprintEmptyState } from './BlueprintEmptyState';
import { FleetTabHeading, FleetEmptyState } from '../fleet/FleetEmptyState';
import { BlueprintDetail } from './BlueprintDetail';
import { BlueprintEditor } from './BlueprintEditor';
import { useLicense } from '@/context/LicenseContext';
@@ -95,7 +98,21 @@ export function DeploymentsTab() {
return (
<div className="space-y-5">
{blueprints.length === 0 ? (
<BlueprintEmptyState onCreate={() => setCreateOpen(true)} canCreate={canEdit} />
<>
<FleetTabHeading
title="Blueprints"
subtitle="Declare compose templates once and keep matching nodes in sync."
action={canEdit ? (
<Button size="sm" className="gap-1.5" onClick={() => setCreateOpen(true)}>
<Plus className="w-4 h-4" strokeWidth={1.5} />
New Blueprint
</Button>
) : undefined}
/>
<FleetEmptyState>
<BlueprintEmptyState onCreate={() => setCreateOpen(true)} canCreate={canEdit} />
</FleetEmptyState>
</>
) : (
<BlueprintCatalog
blueprints={blueprints}