index.tsx 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. import {Component, lazy, Suspense} from 'react';
  2. import {Client} from 'sentry/api';
  3. import EmptyStateWarning from 'sentry/components/emptyStateWarning';
  4. import LoadingIndicator from 'sentry/components/loadingIndicator';
  5. import Placeholder from 'sentry/components/placeholder';
  6. import {DEFAULT_QUERY} from 'sentry/constants';
  7. import {t} from 'sentry/locale';
  8. import {Organization, Project} from 'sentry/types';
  9. import {FOR_REVIEW_QUERIES} from 'sentry/views/issueList/utils';
  10. import NoUnresolvedIssues from './noUnresolvedIssues';
  11. type Props = {
  12. api: Client;
  13. groupIds: string[];
  14. organization: Organization;
  15. query: string;
  16. emptyMessage?: React.ReactNode;
  17. selectedProjectIds?: number[];
  18. };
  19. type State = {
  20. fetchingSentFirstEvent: boolean;
  21. firstEventProjects?: Project[] | null;
  22. sentFirstEvent?: boolean;
  23. };
  24. /**
  25. * Component which is rendered when no groups/issues were found. This could
  26. * either be caused by having no first events, having resolved all issues, or
  27. * having no issues be returned from a query. This component will conditionally
  28. * render one of those states.
  29. */
  30. class NoGroupsHandler extends Component<Props, State> {
  31. state: State = {
  32. fetchingSentFirstEvent: true,
  33. sentFirstEvent: false,
  34. firstEventProjects: null,
  35. };
  36. componentDidMount() {
  37. this.fetchSentFirstEvent();
  38. this._isMounted = true;
  39. }
  40. componentWillUnmount() {
  41. this._isMounted = false;
  42. }
  43. /**
  44. * This is a bit hacky, but this is causing flakiness in frontend tests
  45. * `issueList/overview` is being unmounted during tests before the requests
  46. * in `this.fetchSentFirstEvent` are completed and causing this React warning:
  47. *
  48. * Warning: Can't perform a React state update on an unmounted component.
  49. * This is a no-op, but it indicates a memory leak in your application.
  50. * To fix, cancel all subscriptions and asynchronous tasks in the
  51. * componentWillUnmount method.
  52. *
  53. * This is something to revisit if we refactor API client
  54. */
  55. private _isMounted: boolean = false;
  56. async fetchSentFirstEvent() {
  57. this.setState({
  58. fetchingSentFirstEvent: true,
  59. });
  60. const {organization, selectedProjectIds, api} = this.props;
  61. let sentFirstEvent = false;
  62. let projects = [];
  63. // If no projects are selected, then we must check every project the user is a
  64. // member of and make sure there are no first events for all of the projects
  65. // Set project to -1 for all projects
  66. // Do not pass a project id for "my projects"
  67. let firstEventQuery: {project?: number[]} = {};
  68. const projectsQuery: {per_page: number; query?: string} = {per_page: 1};
  69. if (selectedProjectIds?.length) {
  70. firstEventQuery = {project: selectedProjectIds};
  71. projectsQuery.query = selectedProjectIds.map(id => `id:${id}`).join(' ');
  72. }
  73. [{sentFirstEvent}, projects] = await Promise.all([
  74. // checks to see if selection has sent a first event
  75. api.requestPromise(`/organizations/${organization.slug}/sent-first-event/`, {
  76. query: firstEventQuery,
  77. }),
  78. // retrieves a single project to feed to the ErrorRobot from renderStreamBody
  79. api.requestPromise(`/organizations/${organization.slug}/projects/`, {
  80. query: projectsQuery,
  81. }),
  82. ]);
  83. // See comment where this property is initialized
  84. // FIXME
  85. if (!this._isMounted) {
  86. return;
  87. }
  88. this.setState({
  89. fetchingSentFirstEvent: false,
  90. sentFirstEvent,
  91. firstEventProjects: projects,
  92. });
  93. }
  94. renderLoading() {
  95. return <LoadingIndicator />;
  96. }
  97. renderAwaitingEvents(projects: State['firstEventProjects']) {
  98. const {organization, groupIds} = this.props;
  99. const project = projects && projects.length > 0 ? projects[0] : undefined;
  100. const sampleIssueId = groupIds.length > 0 ? groupIds[0] : undefined;
  101. const ErrorRobot = lazy(() => import('sentry/components/errorRobot'));
  102. return (
  103. <Suspense fallback={<Placeholder height="260px" />}>
  104. <ErrorRobot org={organization} project={project} sampleIssueId={sampleIssueId} />
  105. </Suspense>
  106. );
  107. }
  108. renderEmpty() {
  109. const {emptyMessage} = this.props;
  110. return (
  111. <EmptyStateWarning>
  112. <p>{emptyMessage ?? t('Sorry, no issues match your filters.')}</p>
  113. </EmptyStateWarning>
  114. );
  115. }
  116. render() {
  117. const {fetchingSentFirstEvent, sentFirstEvent, firstEventProjects} = this.state;
  118. const {query} = this.props;
  119. if (fetchingSentFirstEvent) {
  120. return this.renderLoading();
  121. }
  122. if (!sentFirstEvent) {
  123. return this.renderAwaitingEvents(firstEventProjects);
  124. }
  125. if (query === DEFAULT_QUERY) {
  126. return (
  127. <NoUnresolvedIssues
  128. title={t("We couldn't find any issues that matched your filters.")}
  129. subtitle={t('Get out there and write some broken code!')}
  130. />
  131. );
  132. }
  133. if (FOR_REVIEW_QUERIES.includes(query || '')) {
  134. return (
  135. <NoUnresolvedIssues
  136. title={t('Well, would you look at that.')}
  137. subtitle={t(
  138. 'No more issues to review. Better get back out there and write some broken code.'
  139. )}
  140. />
  141. );
  142. }
  143. return this.renderEmpty();
  144. }
  145. }
  146. export default NoGroupsHandler;