DatabaseBackupsNav.tsx54 lines · main
| 1 | import Link from 'next/link' |
| 2 | import { Badge, NavMenu, NavMenuItem } from 'ui' |
| 3 | |
| 4 | import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled' |
| 5 | import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject' |
| 6 | |
| 7 | type Props = { |
| 8 | active: 'pitr' | 'scheduled' | 'rtnp' |
| 9 | } |
| 10 | |
| 11 | function DatabaseBackupsNav({ active }: Props) { |
| 12 | const { ref, cloud_provider } = useSelectedProjectQuery()?.data || {} |
| 13 | const { databaseRestoreToNewProject } = useIsFeatureEnabled(['database:restore_to_new_project']) |
| 14 | |
| 15 | const navMenuItems = [ |
| 16 | { |
| 17 | enabled: true, |
| 18 | id: 'scheduled', |
| 19 | label: 'Scheduled backups', |
| 20 | href: `/project/${ref}/database/backups/scheduled`, |
| 21 | }, |
| 22 | { |
| 23 | enabled: true, |
| 24 | id: 'pitr', |
| 25 | label: 'Point in time', |
| 26 | href: `/project/${ref}/database/backups/pitr`, |
| 27 | }, |
| 28 | { |
| 29 | enabled: databaseRestoreToNewProject && cloud_provider !== 'FLY', |
| 30 | id: 'rtnp', |
| 31 | label: ( |
| 32 | <div className="flex items-center gap-2"> |
| 33 | Restore to new project <Badge variant="warning">Beta</Badge> |
| 34 | </div> |
| 35 | ), |
| 36 | href: `/project/${ref}/database/backups/restore-to-new-project`, |
| 37 | }, |
| 38 | ] as const |
| 39 | |
| 40 | return ( |
| 41 | <NavMenu className="overflow-hidden overflow-x-auto"> |
| 42 | {navMenuItems.map( |
| 43 | (item) => |
| 44 | item.enabled && ( |
| 45 | <NavMenuItem key={item.id} active={item.id === active}> |
| 46 | <Link href={item.href}>{item.label}</Link> |
| 47 | </NavMenuItem> |
| 48 | ) |
| 49 | )} |
| 50 | </NavMenu> |
| 51 | ) |
| 52 | } |
| 53 | |
| 54 | export default DatabaseBackupsNav |