navigateToExternalLinkModal.tsx 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import type {ModalRenderProps} from 'sentry/actionCreators/modal';
  4. import {Button, LinkButton} from 'sentry/components/button';
  5. import {t} from 'sentry/locale';
  6. type Props = ModalRenderProps & {
  7. linkText: string;
  8. };
  9. function NavigateToExternalLinkModal({Body, closeModal, Header, linkText}: Props) {
  10. const handleClose = () => closeModal();
  11. return (
  12. <Fragment>
  13. <Header closeButton>
  14. <h2>{t('Heads up')}</h2>
  15. </Header>
  16. <Body>
  17. <p>
  18. {t(
  19. "You're leaving Sentry and will be redirected to the following external website:"
  20. )}
  21. </p>
  22. <ParagraphContainer>{linkText}</ParagraphContainer>
  23. &nbsp;
  24. </Body>
  25. <ButtonContainer>
  26. <ButtonBar>
  27. <LinkButton priority="primary" href={linkText} onClick={handleClose} external>
  28. {t('Continue')}
  29. </LinkButton>
  30. <Button priority="default" onClick={handleClose}>
  31. {t('Cancel')}
  32. </Button>
  33. </ButtonBar>
  34. </ButtonContainer>
  35. </Fragment>
  36. );
  37. }
  38. export default NavigateToExternalLinkModal;
  39. export {NavigateToExternalLinkModal};
  40. const ButtonContainer = styled('div')`
  41. display: flex;
  42. flex-direction: column;
  43. gap: 10px;
  44. `;
  45. const ParagraphContainer = styled('p')`
  46. word-break: break-all;
  47. white-space: normal;
  48. `;
  49. const ButtonBar = styled('div')`
  50. display: flex;
  51. flex-direction: row;
  52. gap: 5px;
  53. justify-content: end;
  54. `;