ref(ts): Convert groupActivity to Typescript (#21921)

* ref(ts): Convert groupActivity to Typescript

* missing props

* default error json constant

* showtime should be false

* route component props

* route component params

Author: taylangocmen

src/sentry/static/sentry/app/components/activity/note/types.tsx

@@ -1,5 +1,7 @@
 import {OnChangeHandlerFunc} from 'react-mentions';
 
+import {DEFAULT_ERROR_JSON} from 'app/constants';
+
 /**
  * Represents a mentionable user or team.
  */
@@ -20,10 +22,12 @@ export type Mentioned = [string, string];
  */
 export type MentionChangeEvent = Parameters<OnChangeHandlerFunc>[0];
 
-export type CreateError = {
-  detail: {
-    message: string;
-    code: number;
-    extra: any;
-  };
-};
+export type CreateError =
+  | {
+      detail: {
+        message: string;
+        code: number;
+        extra: any;
+      };
+    }
+  | typeof DEFAULT_ERROR_JSON;

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

@@ -248,3 +248,7 @@ export const IS_ACCEPTANCE_TEST = !!process.env.IS_ACCEPTANCE_TEST;
 export const NODE_ENV = process.env.NODE_ENV;
 export const DISABLE_RR_WEB = !!process.env.DISABLE_RR_WEB;
 export const SPA_DSN = process.env.SPA_DSN;
+
+export const DEFAULT_ERROR_JSON = {
+  detail: t('Unknown error. Please try again.'),
+};

src/sentry/static/sentry/app/views/alerts/details/activity/index.tsx

@@ -11,7 +11,7 @@ import {
 import {replaceAtArrayIndex} from 'app/utils/replaceAtArrayIndex';
 import {NoteType} from 'app/types/alerts';
 import {CreateError} from 'app/components/activity/note/types';
-import {t} from 'app/locale';
+import {DEFAULT_ERROR_JSON} from 'app/constants';
 import {uniqueId} from 'app/utils/guid';
 import ConfigStore from 'app/stores/configStore';
 import withApi from 'app/utils/withApi';
@@ -25,10 +25,6 @@ import {
 } from '../../types';
 import Activity from './activity';
 
-function makeDefaultErrorJson() {
-  return {detail: t('Unknown error. Please try again.')};
-}
-
 type Activities = Array<ActivityType | ActivityType>;
 
 type Props = {
@@ -146,7 +142,7 @@ class ActivityContainer extends React.PureComponent<Props, State> {
           activities,
           createBusy: false,
           createError: true,
-          createErrorJSON: error.responseJSON || makeDefaultErrorJson(),
+          createErrorJSON: error.responseJSON || DEFAULT_ERROR_JSON,
         };
       });
     }

src/sentry/static/sentry/app/views/organizationGroupDetails/groupActivity.jsx renamed to src/sentry/static/sentry/app/views/organizationGroupDetails/groupActivity.tsx

@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
+import {RouteComponentProps} from 'react-router/lib/Router';
 
 import {
   addErrorMessage,
@@ -15,27 +15,34 @@ import ConfigStore from 'app/stores/configStore';
 import ErrorBoundary from 'app/components/errorBoundary';
 import Note from 'app/components/activity/note';
 import NoteInputWithStorage from 'app/components/activity/note/inputWithStorage';
-import SentryTypes from 'app/sentryTypes';
 import withApi from 'app/utils/withApi';
 import withOrganization from 'app/utils/withOrganization';
+import {Activity, Group, Organization, User} from 'app/types';
+import {Client} from 'app/api';
+import {CreateError} from 'app/components/activity/note/types';
+import {DEFAULT_ERROR_JSON} from 'app/constants';
 
 import GroupActivityItem from './groupActivityItem';
 
-function makeDefaultErrorJson() {
-  return {detail: t('Unknown error. Please try again.')};
-}
+type Props = {
+  api: Client;
+  organization: Organization;
+  group: Group;
+} & RouteComponentProps<{orgId: string}, {}>;
 
-class GroupActivity extends React.Component {
-  // TODO(dcramer): only re-render on group/activity change
-  static propTypes = {
-    api: PropTypes.object,
-    organization: SentryTypes.Organization.isRequired,
-    group: SentryTypes.Group,
-  };
+type State = {
+  createBusy: boolean;
+  error: boolean;
+  errorJSON: CreateError | null;
+  inputId: string;
+};
 
-  state = {
+class GroupActivity extends React.Component<Props, State> {
+  // TODO(dcramer): only re-render on group/activity change
+  state: State = {
     createBusy: false,
     error: false,
+    errorJSON: null,
     inputId: uniqueId(),
   };
 
@@ -80,7 +87,7 @@ class GroupActivity extends React.Component {
       this.setState({
         createBusy: false,
         error: true,
-        errorJSON: error.responseJSON || makeDefaultErrorJson(),
+        errorJSON: error.responseJSON || DEFAULT_ERROR_JSON,
       });
       addErrorMessage(t('Unable to post comment'));
     }
@@ -89,22 +96,15 @@ class GroupActivity extends React.Component {
   handleNoteUpdate = async (note, {modelId, text: oldText}) => {
     const {api, group} = this.props;
 
-    this.setState({
-      updateBusy: true,
-    });
     addLoadingMessage(t('Updating comment...'));
 
     try {
       await updateNote(api, group, note, modelId, oldText);
-      this.setState({
-        updateBusy: false,
-      });
       clearIndicators();
     } catch (error) {
       this.setState({
-        updateBusy: false,
         error: true,
-        errorJSON: error.responseJSON || makeDefaultErrorJson(),
+        errorJSON: error.responseJSON || DEFAULT_ERROR_JSON,
       });
       addErrorMessage(t('Unable to update comment'));
     }
@@ -115,6 +115,7 @@ class GroupActivity extends React.Component {
     const me = ConfigStore.get('user');
     const projectSlugs = group && group.project ? [group.project.slug] : [];
     const noteProps = {
+      minHeight: 140,
       group,
       projectSlugs,
       placeholder: t(
@@ -141,21 +142,21 @@ class GroupActivity extends React.Component {
               )}
             </ActivityItem>
 
-            {group.activity.map(item => {
+            {group.activity.map((item: Activity) => {
               const authorName = item.user ? item.user.name : 'Sentry';
 
               if (item.type === 'note') {
                 return (
                   <ErrorBoundary mini key={`note-${item.id}`}>
                     <Note
+                      showTime={false}
                       text={item.data.text}
                       modelId={item.id}
-                      user={item.user}
+                      user={item.user as User}
                       dateCreated={item.dateCreated}
                       authorName={authorName}
                       onDelete={this.handleNoteDelete}
                       onUpdate={this.handleNoteUpdate}
-                      busy={this.state.updateBusy}
                       {...noteProps}
                     />
                   </ErrorBoundary>
@@ -164,7 +165,6 @@ class GroupActivity extends React.Component {
                 return (
                   <ErrorBoundary mini key={`item-${item.id}`}>
                     <ActivityItem
-                      item={item}
                       author={{type: item.user ? 'user' : 'system', user: item.user}}
                       date={item.dateCreated}
                       header={