ref(ts): Convert <ReleaseStats> to typescript (#16689)

src/sentry/static/sentry/app/components/releaseStats.jsx

@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from '@emotion/styled';
-
-import AvatarList from 'app/components/avatar/avatarList';
-import {t, tn} from 'app/locale';
-
-class ReleaseStats extends React.Component {
-  static propTypes = {
-    release: PropTypes.object,
-  };
-
-  render() {
-    const release = this.props.release;
-    const commitCount = release.commitCount || 0;
-    const authorCount = (release.authors && release.authors.length) || 0;
-    if (commitCount === 0) {
-      return null;
-    }
-
-    const releaseSummary = [
-      tn('%s commit', '%s commits', commitCount),
-      t('by'),
-      tn('%s author', '%s authors', authorCount),
-    ].join(' ');
-
-    return (
-      <div className="release-stats">
-        <ReleaseSummaryHeading>{releaseSummary}</ReleaseSummaryHeading>
-        <span style={{display: 'inline-block'}}>
-          <AvatarList users={release.authors} avatarSize={25} typeMembers="authors" />
-        </span>
-      </div>
-    );
-  }
-}
-
-const ReleaseSummaryHeading = styled('div')`
-  color: ${p => p.theme.gray2};
-  font-size: 12px;
-  line-height: 1.2;
-  font-weight: 600;
-  text-transform: uppercase;
-  margin-bottom: 4px;
-`;
-
-export default ReleaseStats;

src/sentry/static/sentry/app/components/releaseStats.tsx

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from '@emotion/styled';
+
+import {Release} from 'app/types';
+import AvatarList from 'app/components/avatar/avatarList';
+import {t, tn} from 'app/locale';
+import space from 'app/styles/space';
+
+type Props = {
+  release: Release;
+};
+
+const ReleaseStats = ({release}: Props) => {
+  const commitCount = release.commitCount || 0;
+  const authorCount = (release.authors && release.authors.length) || 0;
+  if (commitCount === 0) {
+    return null;
+  }
+
+  const releaseSummary = [
+    tn('%s commit', '%s commits', commitCount),
+    t('by'),
+    tn('%s author', '%s authors', authorCount),
+  ].join(' ');
+
+  return (
+    <div className="release-stats">
+      <ReleaseSummaryHeading>{releaseSummary}</ReleaseSummaryHeading>
+      <span style={{display: 'inline-block'}}>
+        <AvatarList users={release.authors} avatarSize={25} typeMembers="authors" />
+      </span>
+    </div>
+  );
+};
+
+ReleaseStats.propTypes = {
+  release: PropTypes.object,
+};
+
+const ReleaseSummaryHeading = styled('div')`
+  color: ${p => p.theme.gray2};
+  font-size: ${p => p.theme.fontSizeSmall};
+  line-height: 1.2;
+  font-weight: 600;
+  text-transform: uppercase;
+  margin-bottom: ${space(0.5)};
+`;
+
+export default ReleaseStats;

src/sentry/static/sentry/app/types/index.tsx

@@ -649,6 +649,38 @@ export type UserReport = {
   email: string;
 };
 
+export type Release = {
+  commitCount: number;
+  data: {};
+  lastDeploy?: Deploy;
+  deployCount: number;
+  lastEvent: string;
+  firstEvent: string;
+  lastCommit?: Commit;
+  authors: User[];
+  owner?: any; // TODO(ts)
+  newGroups: number;
+  projects: {slug: string; name: string}[];
+} & BaseRelease;
+
+export type BaseRelease = {
+  dateReleased: string;
+  url: string;
+  dateCreated: string;
+  version: string;
+  shortVersion: string;
+  ref: string;
+};
+
+export type Deploy = {
+  id: string;
+  name: string;
+  url: string;
+  environment: string;
+  dateStarted: string;
+  dateFinished: string;
+};
+
 export type Commit = {
   id: string;
   key: string;
@@ -656,6 +688,7 @@ export type Commit = {
   dateCreated: string;
   repository?: Repository;
   author?: User;
+  releases: BaseRelease[];
 };
 
 export type MemberRole = {