deleteButton.tsx 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. import * as Sentry from '@sentry/react';
  2. import {addErrorMessage} from 'sentry/actionCreators/indicator';
  3. import {Button} from 'sentry/components/button';
  4. import Confirm from 'sentry/components/confirm';
  5. import {IconDelete} from 'sentry/icons';
  6. import {t} from 'sentry/locale';
  7. import useApi from 'sentry/utils/useApi';
  8. import {useNavigate} from 'sentry/utils/useNavigate';
  9. import useOrganization from 'sentry/utils/useOrganization';
  10. interface DeleteButtonProps {
  11. projectSlug: string;
  12. replayId: string;
  13. }
  14. function DeleteButton({projectSlug, replayId}: DeleteButtonProps) {
  15. const api = useApi();
  16. const navigate = useNavigate();
  17. const orgSlug = useOrganization().slug;
  18. const handleDelete = async () => {
  19. try {
  20. await api.requestPromise(
  21. `/projects/${orgSlug}/${projectSlug}/replays/${replayId}/`,
  22. {
  23. method: 'DELETE',
  24. }
  25. );
  26. navigate(`/organizations/${orgSlug}/replays/`, {replace: true});
  27. } catch (err) {
  28. addErrorMessage(t('Failed to delete replay'));
  29. Sentry.captureException(err);
  30. }
  31. };
  32. return (
  33. <Confirm
  34. message={t('Are you sure you want to delete this replay?')}
  35. onConfirm={handleDelete}
  36. >
  37. <Button size="sm" icon={<IconDelete size="sm" />}>
  38. {t('Delete')}
  39. </Button>
  40. </Confirm>
  41. );
  42. }
  43. export default DeleteButton;