mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-11 03:06:54 +00:00
feat(labels): add stack labels for organizing, filtering, and bulk actions (#341)
* feat(labels): add stack_labels schema and DatabaseService CRUD methods
* feat(labels): add label CRUD, assignment, and bulk action API routes
* feat(labels): add oklch label color palette for light and dark themes
* feat(labels): add LabelPill and LabelDot reusable components
* feat(labels): add LabelAssignPopover component for inline label management
* feat(labels): add label pill bar, label dots, and label assignment to sidebar
* feat(labels): add label filtering and label dots to fleet view
* feat(labels): add label-scoped bulk actions (deploy/stop/restart all)
* docs: add Stack Labels feature documentation
* fix(labels): use context menu sub-menu for label assignment and add settings integration
Replace broken Popover-inside-ContextMenu pattern with native Radix
ContextMenuSub for reliable label toggling on right-click. Wrap
ContextMenuSubContent in a Portal to prevent overflow clipping. Add
"Manage labels..." item that opens Settings directly to Labels section.
Fix close button overlap in LabelsSection header. Add LabelsSection
settings component with full CRUD, assignment counts, and ProGate.
Add initialSection prop to SettingsModal for deep-linking. Include
screenshots for documentation.
* docs: update stack labels documentation with screenshots and corrected instructions
* fix(labels): address security and quality issues from code review
- Add NaN validation on parseInt(req.params.id) in label routes
- Scope updateLabel/deleteLabel by nodeId to prevent cross-node IDOR
- Validate labelIds belong to correct node in setStackLabels
- Add requireAdmin check on bulk action endpoint
- Replace error: any with error: unknown and proper narrowing
- Remove unused Label import from index.ts
- Remove unused isPro prop from LabelsSection
- Add strokeWidth={1.5} to Check icons per design system
* chore: update CHANGELOG with stack labels feature
This commit is contained in:
Anso
@@ -0,0 +1,238 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Plus, Pencil, Trash2 } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from '@/components/ui/dialog';
|
||||
import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { toast } from '@/components/ui/toast-store';
|
||||
import { ProGate } from '../ProGate';
|
||||
import { LabelDot, type Label, type LabelColor } from '../LabelPill';
|
||||
|
||||
const LABEL_COLORS: LabelColor[] = ['teal', 'blue', 'purple', 'rose', 'amber', 'green', 'orange', 'pink', 'cyan', 'slate'];
|
||||
|
||||
export function LabelsSection() {
|
||||
const [labels, setLabels] = useState<Label[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [assignmentCounts, setAssignmentCounts] = useState<Record<number, number>>({});
|
||||
|
||||
// Dialog state
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingLabel, setEditingLabel] = useState<Label | null>(null);
|
||||
const [formName, setFormName] = useState('');
|
||||
const [formColor, setFormColor] = useState<LabelColor>('teal');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
// Delete state
|
||||
const [deleteTarget, setDeleteTarget] = useState<Label | null>(null);
|
||||
|
||||
const fetchLabels = useCallback(async () => {
|
||||
try {
|
||||
const [labelsRes, assignmentsRes] = await Promise.all([
|
||||
apiFetch('/labels'),
|
||||
apiFetch('/labels/assignments'),
|
||||
]);
|
||||
if (labelsRes.ok) setLabels(await labelsRes.json());
|
||||
if (assignmentsRes.ok) {
|
||||
const map: Record<string, Label[]> = await assignmentsRes.json();
|
||||
const counts: Record<number, number> = {};
|
||||
for (const stackLabels of Object.values(map)) {
|
||||
for (const l of stackLabels) {
|
||||
counts[l.id] = (counts[l.id] || 0) + 1;
|
||||
}
|
||||
}
|
||||
setAssignmentCounts(counts);
|
||||
}
|
||||
} catch {
|
||||
toast.error('Failed to load labels.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { fetchLabels(); }, [fetchLabels]);
|
||||
|
||||
const openCreate = () => {
|
||||
setEditingLabel(null);
|
||||
setFormName('');
|
||||
setFormColor('teal');
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (label: Label) => {
|
||||
setEditingLabel(label);
|
||||
setFormName(label.name);
|
||||
setFormColor(label.color);
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!formName.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const url = editingLabel ? `/labels/${editingLabel.id}` : '/labels';
|
||||
const method = editingLabel ? 'PUT' : 'POST';
|
||||
const res = await apiFetch(url, {
|
||||
method,
|
||||
body: JSON.stringify({ name: formName.trim(), color: formColor }),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data?.error || `Failed to ${editingLabel ? 'update' : 'create'} label.`);
|
||||
}
|
||||
toast.success(`Label ${editingLabel ? 'updated' : 'created'}.`);
|
||||
setDialogOpen(false);
|
||||
fetchLabels();
|
||||
} catch (err: unknown) {
|
||||
toast.error((err as Error)?.message || 'Something went wrong.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!deleteTarget) return;
|
||||
try {
|
||||
const res = await apiFetch(`/labels/${deleteTarget.id}`, { method: 'DELETE' });
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data?.error || 'Failed to delete label.');
|
||||
}
|
||||
toast.success('Label deleted.');
|
||||
setDeleteTarget(null);
|
||||
fetchLabels();
|
||||
} catch (err: unknown) {
|
||||
toast.error((err as Error)?.message || 'Something went wrong.');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ProGate featureName="Stack Labels">
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between pr-8">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold tracking-tight">Stack Labels</h2>
|
||||
<p className="text-sm text-muted-foreground">Organize stacks with colored labels for filtering and bulk actions.</p>
|
||||
</div>
|
||||
<Button size="sm" onClick={openCreate}>
|
||||
<Plus className="w-4 h-4 mr-1.5" strokeWidth={1.5} />
|
||||
New Label
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-card-border border-t-card-border-top bg-card shadow-card-bevel">
|
||||
{loading ? (
|
||||
<div className="p-6 text-center text-sm text-muted-foreground">Loading...</div>
|
||||
) : labels.length === 0 ? (
|
||||
<div className="p-6 text-center text-sm text-muted-foreground">
|
||||
No labels yet. Create one to start organizing your stacks.
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-border">
|
||||
{labels.map(label => (
|
||||
<div key={label.id} className="flex items-center gap-3 px-4 py-3 group transition-colors hover:bg-accent/5">
|
||||
<LabelDot color={label.color} />
|
||||
<span className="font-mono text-[13px] flex-1">{label.name}</span>
|
||||
<span className="text-xs text-muted-foreground tabular-nums">
|
||||
{assignmentCounts[label.id] || 0} stack{(assignmentCounts[label.id] || 0) !== 1 ? 's' : ''}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => openEdit(label)}
|
||||
>
|
||||
<Pencil className="w-3.5 h-3.5" strokeWidth={1.5} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7 text-destructive/60 hover:bg-destructive hover:text-destructive-foreground opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => setDeleteTarget(label)}
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" strokeWidth={1.5} />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Create / Edit Dialog */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[380px]">
|
||||
<DialogTitle>{editingLabel ? 'Edit Label' : 'Create Label'}</DialogTitle>
|
||||
<VisuallyHidden><DialogDescription>Manage label properties</DialogDescription></VisuallyHidden>
|
||||
<div className="space-y-4 mt-2">
|
||||
<Input
|
||||
placeholder="Label name"
|
||||
value={formName}
|
||||
onChange={e => setFormName(e.target.value)}
|
||||
className="font-mono"
|
||||
maxLength={30}
|
||||
autoFocus
|
||||
onKeyDown={e => { if (e.key === 'Enter') handleSave(); }}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-2">Color</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{LABEL_COLORS.map(c => (
|
||||
<button
|
||||
key={c}
|
||||
type="button"
|
||||
className={`w-7 h-7 rounded-full border-2 transition-colors ${c === formColor ? 'border-foreground scale-110' : 'border-transparent hover:border-muted-foreground/30'}`}
|
||||
style={{ backgroundColor: `var(--label-${c})` }}
|
||||
onClick={() => setFormColor(c)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" onClick={() => setDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleSave} disabled={saving || !formName.trim()}>
|
||||
{saving ? 'Saving...' : editingLabel ? 'Save' : 'Create'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Confirmation */}
|
||||
<AlertDialog open={!!deleteTarget} onOpenChange={open => !open && setDeleteTarget(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete label “{deleteTarget?.name}”?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will remove the label from all stacks. This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
onClick={handleDelete}
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</ProGate>
|
||||
);
|
||||
}
|
||||
@@ -8,5 +8,6 @@ export { DeveloperSection } from './DeveloperSection';
|
||||
export { AppStoreSection } from './AppStoreSection';
|
||||
export { SupportSection } from './SupportSection';
|
||||
export { AboutSection } from './AboutSection';
|
||||
export { LabelsSection } from './LabelsSection';
|
||||
export { DEFAULT_SETTINGS } from './types';
|
||||
export type { PatchableSettings, SectionId, Agent } from './types';
|
||||
|
||||
@@ -33,6 +33,7 @@ export type SectionId =
|
||||
| 'sso'
|
||||
| 'api-tokens'
|
||||
| 'registries'
|
||||
| 'labels'
|
||||
| 'system'
|
||||
| 'notifications'
|
||||
| 'webhooks'
|
||||
|
||||
Reference in New Issue
Block a user