index.tsx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  1. import {Component} from 'react';
  2. import type {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import type {Client} from 'sentry/api';
  5. import NotFound from 'sentry/components/errors/notFound';
  6. import {BorderlessEventEntries} from 'sentry/components/events/eventEntries';
  7. import Footer from 'sentry/components/footer';
  8. import Link from 'sentry/components/links/link';
  9. import LoadingError from 'sentry/components/loadingError';
  10. import LoadingIndicator from 'sentry/components/loadingIndicator';
  11. import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
  12. import {t} from 'sentry/locale';
  13. import {SentryPropTypeValidators} from 'sentry/sentryPropTypeValidators';
  14. import {space} from 'sentry/styles/space';
  15. import type {Group} from 'sentry/types/group';
  16. import withApi from 'sentry/utils/withApi';
  17. import {OrganizationContext} from '../organizationContext';
  18. import SharedGroupHeader from './sharedGroupHeader';
  19. type Props = RouteComponentProps<{shareId: string; orgId?: string}, {}> & {
  20. api: Client;
  21. };
  22. type State = {
  23. error: boolean;
  24. group: Group | null;
  25. loading: boolean;
  26. };
  27. class SharedGroupDetails extends Component<Props, State> {
  28. static childContextTypes = {
  29. group: SentryPropTypeValidators.isGroup,
  30. };
  31. state: State = this.getInitialState();
  32. getInitialState() {
  33. return {
  34. group: null,
  35. loading: true,
  36. error: false,
  37. };
  38. }
  39. getChildContext() {
  40. return {
  41. group: this.state.group,
  42. };
  43. }
  44. UNSAFE_componentWillMount() {
  45. document.body.classList.add('shared-group');
  46. }
  47. componentDidMount() {
  48. this.fetchData();
  49. }
  50. componentWillUnmount() {
  51. document.body.classList.remove('shared-group');
  52. }
  53. orgSlug(): string | null {
  54. const {params} = this.props;
  55. if (params.orgId) {
  56. return params.orgId;
  57. }
  58. const {customerDomain} = window.__initialData || {};
  59. if (customerDomain?.subdomain) {
  60. return customerDomain.subdomain;
  61. }
  62. return null;
  63. }
  64. async fetchData() {
  65. const {params, api} = this.props;
  66. const {shareId} = params;
  67. const orgSlug = this.orgSlug();
  68. try {
  69. if (orgSlug) {
  70. const group = await api.requestPromise(
  71. `/organizations/${orgSlug}/shared/issues/${shareId}/`
  72. );
  73. this.setState({loading: false, group});
  74. } else {
  75. const group = await api.requestPromise(`/shared/issues/${shareId}/`);
  76. this.setState({loading: false, group});
  77. }
  78. } catch {
  79. this.setState({loading: false, error: true});
  80. }
  81. }
  82. handleRetry = () => {
  83. this.setState(this.getInitialState());
  84. this.fetchData();
  85. };
  86. getTitle() {
  87. const {group} = this.state;
  88. return group?.title ?? 'Sentry';
  89. }
  90. render() {
  91. const {group, loading, error} = this.state;
  92. if (loading) {
  93. return <LoadingIndicator />;
  94. }
  95. if (!group) {
  96. return <NotFound />;
  97. }
  98. if (error) {
  99. return <LoadingError onRetry={this.handleRetry} />;
  100. }
  101. const {permalink, latestEvent, project} = group;
  102. const title = this.getTitle();
  103. // project.organization is not a real organization, it's just the slug and name
  104. // Add the features array to avoid errors when using OrganizationContext
  105. const org = {...project.organization, features: []};
  106. return (
  107. <SentryDocumentTitle noSuffix title={title}>
  108. <OrganizationContext.Provider value={org}>
  109. <div className="app">
  110. <div className="pattern-bg" />
  111. <div className="container">
  112. <div className="box box-modal">
  113. <div className="box-header">
  114. <Link className="logo" to="/">
  115. <span className="icon-sentry-logo-full" />
  116. </Link>
  117. {permalink && (
  118. <Link className="details" to={permalink}>
  119. {t('Details')}
  120. </Link>
  121. )}
  122. </div>
  123. <div className="box-content">
  124. <SharedGroupHeader group={group} />
  125. <Container className="group-overview event-details-container">
  126. <BorderlessEventEntries
  127. organization={org}
  128. group={group}
  129. event={latestEvent}
  130. project={project}
  131. isShare
  132. />
  133. </Container>
  134. <Footer />
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. </OrganizationContext.Provider>
  140. </SentryDocumentTitle>
  141. );
  142. }
  143. }
  144. const Container = styled('div')`
  145. padding: ${space(4)};
  146. `;
  147. export {SharedGroupDetails};
  148. export default withApi(SharedGroupDetails);