projectLatestReleases.tsx 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. import {Fragment} from 'react';
  2. import styled from '@emotion/styled';
  3. import type {Location} from 'history';
  4. import pick from 'lodash/pick';
  5. import {fetchAnyReleaseExistence} from 'sentry/actionCreators/projects';
  6. import {SectionHeading} from 'sentry/components/charts/styles';
  7. import DateTime from 'sentry/components/dateTime';
  8. import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
  9. import EmptyStateWarning from 'sentry/components/emptyStateWarning';
  10. import Placeholder from 'sentry/components/placeholder';
  11. import TextOverflow from 'sentry/components/textOverflow';
  12. import Version from 'sentry/components/version';
  13. import {URL_PARAM} from 'sentry/constants/pageFilters';
  14. import {IconOpen} from 'sentry/icons';
  15. import {t} from 'sentry/locale';
  16. import {space} from 'sentry/styles/space';
  17. import type {Organization, Release} from 'sentry/types';
  18. import MissingReleasesButtons from './missingFeatureButtons/missingReleasesButtons';
  19. import {SectionHeadingLink, SectionHeadingWrapper, SidebarSection} from './styles';
  20. import {didProjectOrEnvironmentChange} from './utils';
  21. const PLACEHOLDER_AND_EMPTY_HEIGHT = '160px';
  22. type Props = DeprecatedAsyncComponent['props'] & {
  23. isProjectStabilized: boolean;
  24. location: Location;
  25. organization: Organization;
  26. projectSlug: string;
  27. projectId?: string;
  28. };
  29. type State = {
  30. releases: Release[] | null;
  31. hasOlderReleases?: boolean;
  32. } & DeprecatedAsyncComponent['state'];
  33. class ProjectLatestReleases extends DeprecatedAsyncComponent<Props, State> {
  34. shouldComponentUpdate(nextProps: Props, nextState: State) {
  35. const {location, isProjectStabilized} = this.props;
  36. // TODO(project-detail): we temporarily removed refetching based on timeselector
  37. if (
  38. this.state !== nextState ||
  39. didProjectOrEnvironmentChange(location, nextProps.location) ||
  40. isProjectStabilized !== nextProps.isProjectStabilized
  41. ) {
  42. return true;
  43. }
  44. return false;
  45. }
  46. componentDidUpdate(prevProps: Props) {
  47. const {location, isProjectStabilized} = this.props;
  48. if (
  49. didProjectOrEnvironmentChange(prevProps.location, location) ||
  50. prevProps.isProjectStabilized !== isProjectStabilized
  51. ) {
  52. this.remountComponent();
  53. }
  54. }
  55. getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
  56. const {location, organization, projectSlug, isProjectStabilized} = this.props;
  57. if (!isProjectStabilized) {
  58. return [];
  59. }
  60. const query = {
  61. ...pick(location.query, Object.values(URL_PARAM)),
  62. per_page: 5,
  63. };
  64. // TODO(project-detail): this does not filter releases for the given time
  65. return [
  66. ['releases', `/projects/${organization.slug}/${projectSlug}/releases/`, {query}],
  67. ];
  68. }
  69. /**
  70. * If our releases are empty, determine if we had a release in the last 90 days (empty message differs then)
  71. */
  72. async onLoadAllEndpointsSuccess() {
  73. const {releases} = this.state;
  74. const {organization, projectId, isProjectStabilized} = this.props;
  75. if (!isProjectStabilized) {
  76. return;
  77. }
  78. if ((releases ?? []).length !== 0 || !projectId) {
  79. this.setState({hasOlderReleases: true});
  80. return;
  81. }
  82. this.setState({loading: true});
  83. const hasOlderReleases = await fetchAnyReleaseExistence(
  84. this.api,
  85. organization.slug,
  86. projectId
  87. );
  88. this.setState({hasOlderReleases, loading: false});
  89. }
  90. get releasesLink() {
  91. const {organization} = this.props;
  92. // as this is a link to latest releases, we want to only preserve project and environment
  93. return {
  94. pathname: `/organizations/${organization.slug}/releases/`,
  95. query: {
  96. statsPeriod: undefined,
  97. start: undefined,
  98. end: undefined,
  99. utc: undefined,
  100. },
  101. };
  102. }
  103. renderReleaseRow = (release: Release) => {
  104. const {projectId} = this.props;
  105. const {lastDeploy, dateCreated} = release;
  106. return (
  107. <Fragment key={release.version}>
  108. <DateTime date={lastDeploy?.dateFinished || dateCreated} seconds={false} />
  109. <TextOverflow>
  110. <StyledVersion
  111. version={release.version}
  112. tooltipRawVersion
  113. projectId={projectId}
  114. />
  115. </TextOverflow>
  116. </Fragment>
  117. );
  118. };
  119. renderInnerBody() {
  120. const {organization, projectId, isProjectStabilized} = this.props;
  121. const {loading, releases, hasOlderReleases} = this.state;
  122. const checkingForOlderReleases =
  123. !(releases ?? []).length && hasOlderReleases === undefined;
  124. const showLoadingIndicator =
  125. loading || checkingForOlderReleases || !isProjectStabilized;
  126. if (showLoadingIndicator) {
  127. return <Placeholder height={PLACEHOLDER_AND_EMPTY_HEIGHT} />;
  128. }
  129. if (!hasOlderReleases) {
  130. return <MissingReleasesButtons organization={organization} projectId={projectId} />;
  131. }
  132. if (!releases || releases.length === 0) {
  133. return (
  134. <StyledEmptyStateWarning small>{t('No releases found')}</StyledEmptyStateWarning>
  135. );
  136. }
  137. return <ReleasesTable>{releases.map(this.renderReleaseRow)}</ReleasesTable>;
  138. }
  139. renderLoading() {
  140. return this.renderBody();
  141. }
  142. renderBody() {
  143. return (
  144. <SidebarSection>
  145. <SectionHeadingWrapper>
  146. <SectionHeading>{t('Latest Releases')}</SectionHeading>
  147. <SectionHeadingLink to={this.releasesLink}>
  148. <IconOpen />
  149. </SectionHeadingLink>
  150. </SectionHeadingWrapper>
  151. <div>{this.renderInnerBody()}</div>
  152. </SidebarSection>
  153. );
  154. }
  155. }
  156. const ReleasesTable = styled('div')`
  157. display: grid;
  158. font-size: ${p => p.theme.fontSizeMedium};
  159. white-space: nowrap;
  160. grid-template-columns: 1fr auto;
  161. margin-bottom: ${space(2)};
  162. & > * {
  163. padding: ${space(0.5)} ${space(1)};
  164. height: 32px;
  165. }
  166. & > *:nth-child(2n + 2) {
  167. text-align: right;
  168. }
  169. & > *:nth-child(4n + 1),
  170. & > *:nth-child(4n + 2) {
  171. background-color: ${p => p.theme.rowBackground};
  172. }
  173. `;
  174. const StyledVersion = styled(Version)`
  175. ${p => p.theme.overflowEllipsis}
  176. line-height: 1.6;
  177. font-variant-numeric: tabular-nums;
  178. `;
  179. const StyledEmptyStateWarning = styled(EmptyStateWarning)`
  180. height: ${PLACEHOLDER_AND_EMPTY_HEIGHT};
  181. justify-content: center;
  182. `;
  183. export default ProjectLatestReleases;