project.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. import {Fragment} from 'react';
  2. import {Alert} from 'sentry/components/core/alert';
  3. import ApiForm from 'sentry/components/forms/apiForm';
  4. import HiddenField from 'sentry/components/forms/fields/hiddenField';
  5. import LoadingIndicator from 'sentry/components/loadingIndicator';
  6. import NarrowLayout from 'sentry/components/narrowLayout';
  7. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  8. import {t} from 'sentry/locale';
  9. import type {RouteComponentProps} from 'sentry/types/legacyReactRouter';
  10. import {useApiQuery} from 'sentry/utils/queryClient';
  11. import {decodeScalar} from 'sentry/utils/queryString';
  12. import {useParams} from 'sentry/utils/useParams';
  13. type RouteParams = {
  14. id: string;
  15. orgId: string;
  16. };
  17. type Props = RouteComponentProps<RouteParams>;
  18. function UnsubscribeProject({location}: Props) {
  19. const signature = decodeScalar(location.query._);
  20. const params = useParams();
  21. return (
  22. <SentryDocumentTitle title={t('Unsubscribe')}>
  23. <NarrowLayout>
  24. <h3>{t('Unsubscribe')}</h3>
  25. <UnsubscribeBody
  26. signature={signature}
  27. orgSlug={params.orgId!}
  28. issueId={params.id!}
  29. />
  30. </NarrowLayout>
  31. </SentryDocumentTitle>
  32. );
  33. }
  34. interface UnsubscribeResponse {
  35. displayName: string;
  36. slug: string;
  37. type: string;
  38. viewUrl: string;
  39. }
  40. type BodyProps = {
  41. issueId: string;
  42. orgSlug: string;
  43. signature?: string;
  44. };
  45. function UnsubscribeBody({orgSlug, issueId, signature}: BodyProps) {
  46. const endpoint = `/organizations/${orgSlug}/unsubscribe/project/${issueId}/`;
  47. const {isPending, isError, data} = useApiQuery<UnsubscribeResponse>(
  48. [endpoint, {query: {_: signature}}],
  49. {staleTime: 0}
  50. );
  51. if (isPending) {
  52. return <LoadingIndicator />;
  53. }
  54. if (isError) {
  55. return (
  56. <Alert.Container>
  57. <Alert type="error">
  58. {t('There was an error loading unsubscribe data. Your link may have expired.')}
  59. </Alert>
  60. </Alert.Container>
  61. );
  62. }
  63. return (
  64. <Fragment>
  65. <p>
  66. <strong>{t('Account')}</strong>: {data.displayName}
  67. </p>
  68. <p>
  69. {t(
  70. 'You are about to unsubscribe from project notifications for the following project:'
  71. )}
  72. </p>
  73. <p>
  74. <strong>
  75. {orgSlug} / {data.slug}
  76. </strong>
  77. </p>
  78. <p>{t('You can subscribe to it again by going to your account settings.')}</p>
  79. <ApiForm
  80. apiEndpoint={`${endpoint}?_=${signature}`}
  81. apiMethod="POST"
  82. submitLabel={t('Unsubscribe')}
  83. cancelLabel={t('Cancel')}
  84. onCancel={() => {
  85. // Use window.location as we're going to an HTML view
  86. window.location.assign('/auth/login/');
  87. }}
  88. onSubmitSuccess={() => {
  89. // Use window.location as we're going to an HTML view
  90. window.location.assign('/auth/login/');
  91. }}
  92. initialData={{cancel: 1}}
  93. >
  94. <HiddenField name="cancel" />
  95. </ApiForm>
  96. </Fragment>
  97. );
  98. }
  99. export default UnsubscribeProject;