projectLatestReleases.tsx 6.5 KB

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