Files
supabase/apps/studio/components/interfaces/Database/Replication/DeleteDestination.tsx
T
Riccardo Busetti 324c724117 ref(replication): Improve replication copy and UI (#46793)
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 -->
2026-06-11 10:58:36 +00:00

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}
/>
)
}