redirectDeprecatedProjectRoute.tsx 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. import {Component} from 'react';
  2. import {RouteComponentProps} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import isString from 'lodash/isString';
  5. import {Client, ResponseMeta} from 'sentry/api';
  6. import Alert from 'sentry/components/alert';
  7. import LoadingError from 'sentry/components/loadingError';
  8. import LoadingIndicator from 'sentry/components/loadingIndicator';
  9. import {t} from 'sentry/locale';
  10. import space from 'sentry/styles/space';
  11. import {Project} from 'sentry/types';
  12. import {analytics} from 'sentry/utils/analytics';
  13. import getRouteStringFromRoutes from 'sentry/utils/getRouteStringFromRoutes';
  14. import Redirect from 'sentry/utils/redirect';
  15. import withApi from 'sentry/utils/withApi';
  16. type DetailsProps = {
  17. api: Client;
  18. children: (props: ChildProps) => React.ReactNode;
  19. orgId: string;
  20. projectSlug: string;
  21. };
  22. type DetailsState = {
  23. error: null | ResponseMeta;
  24. loading: boolean;
  25. project: null | Project;
  26. };
  27. type ChildProps = DetailsState & {
  28. hasProjectId: boolean;
  29. organizationId: null | string;
  30. projectId: null | string;
  31. };
  32. class ProjectDetailsInner extends Component<DetailsProps, DetailsState> {
  33. state: DetailsState = {
  34. loading: true,
  35. error: null,
  36. project: null,
  37. };
  38. componentDidMount() {
  39. this.fetchData();
  40. }
  41. fetchData = async () => {
  42. this.setState({
  43. loading: true,
  44. error: null,
  45. });
  46. const {orgId, projectSlug} = this.props;
  47. try {
  48. const project = await this.props.api.requestPromise(
  49. `/projects/${orgId}/${projectSlug}/`
  50. );
  51. this.setState({
  52. loading: false,
  53. error: null,
  54. project,
  55. });
  56. } catch (error) {
  57. this.setState({
  58. loading: false,
  59. error,
  60. project: null,
  61. });
  62. }
  63. };
  64. getProjectId() {
  65. if (this.state.project) {
  66. return this.state.project.id;
  67. }
  68. return null;
  69. }
  70. hasProjectId() {
  71. const projectID = this.getProjectId();
  72. return isString(projectID) && projectID.length > 0;
  73. }
  74. getOrganizationId() {
  75. if (this.state.project) {
  76. return this.state.project.organization.id;
  77. }
  78. return null;
  79. }
  80. render() {
  81. const childrenProps: ChildProps = {
  82. ...this.state,
  83. projectId: this.getProjectId(),
  84. hasProjectId: this.hasProjectId(),
  85. organizationId: this.getOrganizationId(),
  86. };
  87. return this.props.children(childrenProps);
  88. }
  89. }
  90. const ProjectDetails = withApi(ProjectDetailsInner);
  91. type Params = {orgId: string; projectId: string} & Record<string, any>;
  92. type Props = RouteComponentProps<Params, {}>;
  93. type RedirectOptions = {
  94. orgId: string;
  95. projectId: null | string;
  96. router: {
  97. params: Params;
  98. };
  99. };
  100. type RedirectCallback = (options: RedirectOptions) => string;
  101. const redirectDeprecatedProjectRoute =
  102. (generateRedirectRoute: RedirectCallback) =>
  103. ({params, router, routes}: Props) => {
  104. // TODO(epurkhiser): The way this function get's called as a side-effect of
  105. // the render is pretty janky and incorrect... we should fix it.
  106. function trackRedirect(organizationId: string, nextRoute: string) {
  107. const payload = {
  108. feature: 'global_views',
  109. url: getRouteStringFromRoutes(routes), // the URL being redirected from
  110. org_id: parseInt(organizationId, 10),
  111. };
  112. // track redirects of deprecated URLs for analytics
  113. analytics('deprecated_urls.redirect', payload);
  114. return nextRoute;
  115. }
  116. const {orgId} = params;
  117. return (
  118. <Wrapper>
  119. <ProjectDetails orgId={orgId} projectSlug={params.projectId}>
  120. {({loading, error, hasProjectId, projectId, organizationId}) => {
  121. if (loading) {
  122. return <LoadingIndicator />;
  123. }
  124. if (!hasProjectId || !organizationId) {
  125. if (error && error.status === 404) {
  126. return (
  127. <Alert type="error">
  128. {t('The project you were looking for was not found.')}
  129. </Alert>
  130. );
  131. }
  132. return <LoadingError />;
  133. }
  134. const routeProps: RedirectOptions = {
  135. orgId,
  136. projectId,
  137. router: {params},
  138. };
  139. return (
  140. <Redirect
  141. router={router}
  142. to={trackRedirect(organizationId, generateRedirectRoute(routeProps))}
  143. />
  144. );
  145. }}
  146. </ProjectDetails>
  147. </Wrapper>
  148. );
  149. };
  150. export default redirectDeprecatedProjectRoute;
  151. const Wrapper = styled('div')`
  152. flex: 1;
  153. padding: ${space(3)};
  154. `;