ref(ts) Update Issue List processing issue warnings to typescript (#20634)

src/sentry/static/sentry/app/components/stream/processingIssueHint.jsx → src/sentry/static/sentry/app/components/stream/processingIssueHint.tsx

@@ -4,12 +4,23 @@ import classNames from 'classnames';
 import styled from '@emotion/styled';
 
 import Button from 'app/components/button';
+import {ProcessingIssue} from 'app/types';
 import {IconWarning, IconSettings} from 'app/icons';
 import TimeSince from 'app/components/timeSince';
 import {t, tn, tct} from 'app/locale';
 import space from 'app/styles/space';
 
-class ProcessingIssueHint extends React.Component {
+const defaultProps = {
+  showProject: false,
+};
+
+type Props = {
+  issue: ProcessingIssue;
+  orgId: string;
+  projectId: string;
+} & typeof defaultProps;
+
+class ProcessingIssueHint extends React.Component<Props> {
   static propTypes = {
     issue: PropTypes.object.isRequired,
     orgId: PropTypes.string.isRequired,
@@ -17,9 +28,7 @@ class ProcessingIssueHint extends React.Component {
     showProject: PropTypes.bool,
   };
 
-  static defaultProps = {
-    showProject: false,
-  };
+  static defaultProps = defaultProps;
 
   render() {
     const {orgId, projectId, issue, showProject} = this.props;
@@ -29,11 +38,11 @@ class ProcessingIssueHint extends React.Component {
       'processing-issues': true,
       alert: true,
     };
-    let text = null;
-    let lastEvent = null;
-    let icon = null;
+    let text = '';
+    let lastEvent: React.ReactNode = null;
+    let icon: React.ReactNode = null;
 
-    let project = null;
+    let project: React.ReactNode = null;
     if (showProject) {
       project = (
         <span>

src/sentry/static/sentry/app/components/stream/processingIssueList.jsx → src/sentry/static/sentry/app/components/stream/processingIssueList.tsx

@@ -3,35 +3,44 @@ import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 
 import {Client} from 'app/api';
+import {Organization, ProcessingIssue} from 'app/types';
 import {fetchProcessingIssues} from 'app/actionCreators/processingIssues';
 import ProcessingIssueHint from 'app/components/stream/processingIssueHint';
 import SentryTypes from 'app/sentryTypes';
 
-class ProcessingIssueList extends React.Component {
+const defaultProps = {
+  showProject: false,
+};
+
+type Props = {
+  organization: Organization;
+  projectIds: string[];
+} & typeof defaultProps;
+
+type State = {
+  issues: ProcessingIssue[];
+  loading: boolean;
+};
+
+class ProcessingIssueList extends React.Component<Props, State> {
   static propTypes = {
     organization: SentryTypes.Organization.isRequired,
     projectIds: PropTypes.array,
     showProject: PropTypes.bool,
   };
 
-  static defaultProps = {
-    showProject: false,
-  };
+  static defaultProps = defaultProps;
 
-  constructor(props) {
-    super(props);
-    this.api = new Client();
-    this.state = {
-      loading: true,
-      issues: [],
-    };
-  }
+  state: State = {
+    loading: true,
+    issues: [],
+  };
 
   componentDidMount() {
     this.fetchIssues();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props) {
     if (!isEqual(prevProps.projectIds, this.props.projectIds)) {
       this.fetchIssues();
     }
@@ -41,12 +50,14 @@ class ProcessingIssueList extends React.Component {
     this.api.clear();
   }
 
+  api = new Client();
+
   fetchIssues() {
     const {organization, projectIds} = this.props;
     const promise = fetchProcessingIssues(this.api, organization.slug, projectIds);
 
     promise.then(
-      data => {
+      (data: ProcessingIssue[]) => {
         const hasIssues = data.some(
           p => p.hasIssues || p.resolveableIssues > 0 || p.issuesProcessing > 0
         );

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

@@ -663,6 +663,17 @@ export type Group = {
   subscriptionDetails: {disabled?: boolean; reason?: string} | null;
 };
 
+export type ProcessingIssue = {
+  project: string;
+  numIssues: number;
+  signedLink: string;
+  lastSeen: string;
+  hasMoreResolvableIssues: boolean;
+  hasIssues: boolean;
+  issuesProcessing: number;
+  resolveableIssues: number;
+};
+
 /**
  * Returned from /organizations/org/users/
  */