mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
This PR improves the replication UI in the following ways: - Adds a new selecion picker for destinations which is split by the destination location and it's clearer and can scale more when we add more destinations. - Adds a much improved section on lag, highlighting new metrics that could help debug issues more easily. - Improves the copy across the whole code. - Fixes the 2d topological view of replication with better status handling. ### Screenshots <img width="1270" height="777" alt="image" src="https://github.com/user-attachments/assets/0ffc890e-2f80-47e5-bdb1-75071adda024" /> <img width="1665" height="656" alt="image" src="https://github.com/user-attachments/assets/23a27a02-acb2-4891-af95-5bc1d6ec7bfe" /> <img width="1454" height="247" alt="image" src="https://github.com/user-attachments/assets/c8799983-aa63-42b2-9370-ae4e009c1573" /> <img width="1120" height="340" alt="image" src="https://github.com/user-attachments/assets/20a18ad6-e5a9-40ec-80d4-42d6f783d868" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Live slot health indicators, legend, and connection badges. * Grouped destination type dropdown with alpha badges. * **Improvements** * Clearer UI copy for external destinations, alpha disclaimers, and onboarding flows. * Consolidated "n/a" handling for lag displays and richer metric tooltips. * Simplified replication diagram visuals and clearer table/row status/lag presentation. * Replication status responses now include expanded slot health and lag metrics. * **Tests** * New test suites covering destination selection and destination row states. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
34 lines
891 B
TypeScript
34 lines
891 B
TypeScript
import { TextConfirmModal } from '@/components/ui/TextConfirmModalWrapper'
|
|
|
|
interface DeleteDestinationProps {
|
|
visible: boolean
|
|
isLoading: boolean
|
|
name: string
|
|
setVisible: (value: boolean) => void
|
|
onDelete: () => void
|
|
}
|
|
|
|
export const DeleteDestination = ({
|
|
visible,
|
|
isLoading,
|
|
name,
|
|
setVisible,
|
|
onDelete,
|
|
}: DeleteDestinationProps) => {
|
|
return (
|
|
<TextConfirmModal
|
|
variant="destructive"
|
|
visible={visible}
|
|
loading={isLoading}
|
|
title="Delete this destination"
|
|
confirmLabel={isLoading ? 'Deleting...' : `Delete destination`}
|
|
confirmPlaceholder="Type in name of destination"
|
|
confirmString={name ?? 'Unknown'}
|
|
text={`This will delete the destination "${name}".`}
|
|
alert={{ title: 'You cannot recover this destination once deleted.' }}
|
|
onCancel={() => setVisible(!visible)}
|
|
onConfirm={onDelete}
|
|
/>
|
|
)
|
|
}
|