projectUserFeedback.tsx 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import type {RouteComponentProps} from 'react-router';
  2. import styled from '@emotion/styled';
  3. import * as Sentry from '@sentry/react';
  4. import Access from 'sentry/components/acl/access';
  5. import {Button} from 'sentry/components/button';
  6. import Form from 'sentry/components/forms/form';
  7. import JsonForm from 'sentry/components/forms/jsonForm';
  8. import formGroups from 'sentry/data/forms/userFeedback';
  9. import {t} from 'sentry/locale';
  10. import {space} from 'sentry/styles/space';
  11. import type {Organization, Project} from 'sentry/types';
  12. import routeTitleGen from 'sentry/utils/routeTitle';
  13. import withOrganization from 'sentry/utils/withOrganization';
  14. import DeprecatedAsyncView from 'sentry/views/deprecatedAsyncView';
  15. import SettingsPageHeader from 'sentry/views/settings/components/settingsPageHeader';
  16. import TextBlock from 'sentry/views/settings/components/text/textBlock';
  17. import PermissionAlert from 'sentry/views/settings/project/permissionAlert';
  18. type RouteParams = {
  19. projectId: string;
  20. };
  21. type Props = RouteComponentProps<RouteParams, {}> & {
  22. organization: Organization;
  23. project: Project;
  24. };
  25. class ProjectUserFeedbackSettings extends DeprecatedAsyncView<Props> {
  26. submitTimeout: number | undefined = undefined;
  27. componentDidMount() {
  28. super.componentDidMount();
  29. window.sentryEmbedCallback = function (embed) {
  30. // Mock the embed's submit xhr to always be successful
  31. // NOTE: this will not have errors if the form is empty
  32. embed.submit = function (_body) {
  33. this._submitInProgress = true;
  34. window.setTimeout(() => {
  35. this._submitInProgress = false;
  36. this.onSuccess();
  37. }, 500);
  38. };
  39. };
  40. }
  41. componentWillUnmount() {
  42. window.sentryEmbedCallback = null;
  43. }
  44. getEndpoints(): ReturnType<DeprecatedAsyncView['getEndpoints']> {
  45. const {organization} = this.props;
  46. const {projectId} = this.props.params;
  47. return [
  48. ['keyList', `/projects/${organization.slug}/${projectId}/keys/`],
  49. ['project', `/projects/${organization.slug}/${projectId}/`],
  50. ];
  51. }
  52. getTitle(): string {
  53. const {projectId} = this.props.params;
  54. return routeTitleGen(t('User Feedback'), projectId, false);
  55. }
  56. handleClick = () => {
  57. Sentry.showReportDialog({
  58. // should never make it to the Sentry API, but just in case, use throwaway id
  59. eventId: '00000000000000000000000000000000',
  60. });
  61. };
  62. renderBody() {
  63. const {organization, project} = this.props;
  64. const {projectId} = this.props.params;
  65. return (
  66. <div>
  67. <SettingsPageHeader
  68. title={t('User Feedback')}
  69. action={
  70. <ButtonList>
  71. <Button external href="https://docs.sentry.io/product/user-feedback/">
  72. {t('Read the docs')}
  73. </Button>
  74. <Button priority="primary" onClick={this.handleClick}>
  75. {t('Open the report dialog')}
  76. </Button>
  77. </ButtonList>
  78. }
  79. />
  80. <TextBlock>
  81. {t(
  82. `Don't rely on stack traces and graphs alone to understand
  83. the cause and impact of errors. Enable User Feedback to collect
  84. your users' comments when they encounter a crash or bug.`
  85. )}
  86. </TextBlock>
  87. <TextBlock>
  88. {t(
  89. `When configured, your users will be presented with a dialog prompting
  90. them for additional information. That information will get attached to
  91. the issue in Sentry.`
  92. )}
  93. </TextBlock>
  94. <PermissionAlert project={project} />
  95. <Form
  96. saveOnBlur
  97. apiMethod="PUT"
  98. apiEndpoint={`/projects/${organization.slug}/${projectId}/`}
  99. initialData={this.state.project.options}
  100. >
  101. <Access access={['project:write']} project={project}>
  102. {({hasAccess}) => <JsonForm disabled={!hasAccess} forms={formGroups} />}
  103. </Access>
  104. </Form>
  105. </div>
  106. );
  107. }
  108. }
  109. const ButtonList = styled('div')`
  110. display: inline-grid;
  111. grid-auto-flow: column;
  112. gap: ${space(1)};
  113. `;
  114. export default withOrganization(ProjectUserFeedbackSettings);