import React from 'react' ; import useAttempt from 'shared/hooks/useAttemptNext' ; import { ButtonWarning , ButtonSecondary , Text , Alert } from 'design' ; import Dialog , { DialogContent , DialogFooter , DialogHeader , DialogTitle , } from 'design/DialogConfirmation' ; import { State as ResourceState } from 'teleport/components/useResources' ; export default function DeleteConnectorDialog ( props ) { const { name , onClose , onDelete } = props ; const { attempt , run } = useAttempt ( ) ; const isDisabled = attempt . status === 'processing' ; function onOk ( ) { run ( ( ) => onDelete ( ) ) . then ( ok => ok && onClose ( ) ) ; } return ( < Dialog dialogCss = { ( ) => ( { maxWidth : '500px' , width : '100%' } ) } disableEscapeKeyDown = { false } onClose = { onClose } open = { true } > < DialogHeader > < DialogTitle > Remove Connector ? < /DialogTitle> < /DialogHeader> < DialogContent > { attempt . status === 'failed' && < Alert children = { attempt . statusText } />} < Text typography = "paragraph" mb = "6" > Are you sure you want to delete connector { ' ' } < Text as = "span" bold color = "primary.contrastText" > { name } < /Text> ? < /Text> < /DialogContent> < DialogFooter > < ButtonWarning mr = "3" disabled = { isDisabled } onClick = { onOk } > Yes , Remove Connector < /ButtonWarning> < ButtonSecondary disabled = { isDisabled } onClick = { onClose } > Cancel < /ButtonSecondary> < /DialogFooter> < /Dialog>); } type Props = { name : string ; onClose : ResourceState [ 'disregard' ] ; onDelete ( ) : Promise < any > ; } ;