diff --git a/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx b/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx index f8a9813d8..449c1024d 100644 --- a/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx +++ b/frontend-modern/src/features/proxmox/ProxmoxBackupsTable.tsx @@ -4,7 +4,7 @@ import CalendarIcon from 'lucide-solid/icons/calendar'; import ShieldCheckIcon from 'lucide-solid/icons/shield-check'; import { useSearchParams } from '@solidjs/router'; import { FilterBar, type FilterDef, type FilterSelectOption } from '@/components/shared/FilterBar'; -import { FilterButtonGroup, type FilterOption } from '@/components/shared/FilterButtonGroup'; +import { FilterSegmentedControl } from '@/components/shared/FilterToolbar'; import { useBreakpoint } from '@/hooks/useBreakpoint'; import { apiFetch } from '@/utils/apiClient'; import { @@ -66,11 +66,6 @@ import { ProxmoxRecoverableTable } from './ProxmoxRecoverableTable'; type BackupView = 'date' | 'coverage'; -const BACKUP_VIEW_OPTIONS: FilterOption[] = [ - { value: 'date', label: 'By date', compactLabel: 'Date', icon: CalendarIcon }, - { value: 'coverage', label: 'Coverage', icon: ShieldCheckIcon }, -]; - async function fetchPVEBackups(): Promise { const response = await apiFetch('/api/backups/pve'); if (!response.ok) { @@ -527,13 +522,32 @@ export const ProxmoxBackupsTable: Component<{ /> - setView(value as BackupView)} + options={[ + { + value: 'date', + title: 'Backups by date', + label: ( + <> + + By date + + ), + }, + { + value: 'coverage', + title: 'Backups by workload coverage', + label: ( + <> + + Coverage + + ), + }, + ]} /> 0}> diff --git a/frontend-modern/src/features/proxmox/__tests__/ProxmoxBackupsTable.test.tsx b/frontend-modern/src/features/proxmox/__tests__/ProxmoxBackupsTable.test.tsx index f00e01059..7e431db17 100644 --- a/frontend-modern/src/features/proxmox/__tests__/ProxmoxBackupsTable.test.tsx +++ b/frontend-modern/src/features/proxmox/__tests__/ProxmoxBackupsTable.test.tsx @@ -221,10 +221,10 @@ describe('ProxmoxBackupsTable', () => { await screen.findAllByText('pbs-docker'); expect(proxmoxBackupsTableSource).toContain( - "import { FilterButtonGroup, type FilterOption } from '@/components/shared/FilterButtonGroup';", + "import { FilterSegmentedControl } from '@/components/shared/FilterToolbar';", ); - expect(proxmoxBackupsTableSource).toContain('