chore(Core-Frontend): Run create-react-class codemod (#6823)

* add create-react-class to package.json

* webpack and exports

* proptypes codemod

* run class codemod

* fix tests by adding display names manually

* update layout.html template

package.json

@@ -25,6 +25,7 @@
     "classnames": "2.2.0",
     "clipboard": "^1.7.1",
     "compression-webpack-plugin": "^1.0.0",
+    "create-react-class": "^15.6.2",
     "crypto-js": "3.1.5",
     "css-loader": "^0.28.2",
     "diff": "^3.3.0",

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

@@ -1,11 +1,14 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import createReactClass from 'create-react-class';
 import OrganizationState from '../mixins/organizationState';
 import {t} from '../locale';
 import requiredAdminActions from '../components/requiredAdminActions';
 import LoadingIndicator from '../components/loadingIndicator';
 
-const ActionOverlay = React.createClass({
+const ActionOverlay = createReactClass({
+  displayName: 'ActionOverlay',
+
   propTypes: {
     actionId: PropTypes.string.isRequired,
     isLoading: PropTypes.bool,

src/sentry/static/sentry/app/components/activity/feed.jsx

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import createReactClass from 'create-react-class';
+
 import ApiMixin from '../../mixins/apiMixin';
 import ActivityItem from './item';
 import LoadingError from '../loadingError';
@@ -9,7 +11,9 @@ import Pagination from '../pagination';
 import {t} from '../../locale';
 import {logException} from '../../utils/logging';
 
-const ActivityFeed = React.createClass({
+const ActivityFeed = createReactClass({
+  displayName: 'ActivityFeed',
+
   propTypes: {
     endpoint: PropTypes.string,
     query: PropTypes.object,

src/sentry/static/sentry/app/components/activity/noteInput.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import createReactClass from 'create-react-class';
 import marked from 'marked';
 import {MentionsInput, Mention} from 'react-mentions';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
@@ -18,7 +19,9 @@ function makeDefaultErrorJson() {
   return {detail: t('Unknown error. Please try again.')};
 }
 
-const NoteInput = React.createClass({
+const NoteInput = createReactClass({
+  displayName: 'NoteInput',
+
   propTypes: {
     item: PropTypes.object,
     group: PropTypes.object.isRequired,

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

@@ -1,11 +1,13 @@
 import React from 'react';
+import createReactClass from 'create-react-class';
 import Reflux from 'reflux';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 import AlertStore from '../stores/alertStore';
 import AlertMessage from './alertMessage';
 
-const Alerts = React.createClass({
+const Alerts = createReactClass({
+  displayName: 'Alerts',
   mixins: [PureRenderMixin, Reflux.connect(AlertStore, 'alerts')],
 
   getInitialState() {

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import createReactClass from 'create-react-class';
 import Reflux from 'reflux';
 import classNames from 'classnames';
 
@@ -17,7 +18,9 @@ import MemberListStore from '../stores/memberListStore';
 import MenuItem from './menuItem';
 import TooltipMixin from '../mixins/tooltip';
 
-const AssigneeSelector = React.createClass({
+const AssigneeSelector = createReactClass({
+  displayName: 'AssigneeSelector',
+
   propTypes: {
     id: PropTypes.string.isRequired,
   },

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

@@ -1,9 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import createReactClass from 'create-react-class';
+
 import {t} from '../locale';
 
-const AvatarRadio = React.createClass({
+const AvatarRadio = createReactClass({
+  displayName: 'AvatarRadio',
+
   propTypes: {
     user: PropTypes.object.isRequired,
     updateUser: PropTypes.func.isRequired,

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import createReactClass from 'create-react-class';
 import IconCloseLg from '../icons/icon-close-lg';
 import ConfigStore from '../stores/configStore';
 import ApiMixin from '../mixins/apiMixin';
@@ -49,10 +50,13 @@ ReleaseAnnouncement.propTypes = {
   close: PropTypes.func.isRequired,
 };
 
-const BroadcastModal = React.createClass({
+const BroadcastModal = createReactClass({
+  displayName: 'BroadcastModal',
+
   propTypes: {
     closeBroadcast: PropTypes.func.isRequired,
   },
+
   mixins: [ApiMixin],
 
   getInitialState() {

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

@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import createReactClass from 'create-react-class';
+
 import LoadingIndicator from '../components/loadingIndicator';
 import LoadingError from '../components/loadingError';
 import Avatar from '../components/avatar';
@@ -10,21 +12,23 @@ import ApiMixin from '../mixins/apiMixin';
 
 import {t} from '../locale';
 
-const CommitBar = React.createClass({
-  propTypes: {
+class CommitBar extends React.Component {
+  static propTypes = {
     totalCommits: PropTypes.number.isRequired,
     authorCommits: PropTypes.number.isRequired,
-  },
+  };
 
   render() {
     let barStyle = {};
     barStyle.width = this.props.authorCommits / this.props.totalCommits * 100 + '%';
 
     return <div className="commit-bar" style={barStyle} />;
-  },
-});
+  }
+}
+
+const CommitAuthorStats = createReactClass({
+  displayName: 'CommitAuthorStats',
 
-const CommitAuthorStats = React.createClass({
   propTypes: {
     orgId: PropTypes.string.isRequired,
     projectId: PropTypes.string.isRequired,

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

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import createReactClass from 'create-react-class';
 import Reflux from 'reflux';
 
 import ApiMixin from '../mixins/apiMixin';
@@ -11,14 +12,14 @@ import GroupStore from '../stores/groupStore';
 import Link from './link';
 import {t} from '../locale';
 
-const CompactIssueHeader = React.createClass({
-  propTypes: {
+class CompactIssueHeader extends React.Component {
+  static propTypes = {
     data: PropTypes.object.isRequired,
     orgId: PropTypes.string.isRequired,
     projectId: PropTypes.string.isRequired,
-  },
+  };
 
-  getTitle() {
+  getTitle = () => {
     let data = this.props.data;
     let metadata = data.metadata;
     switch (data.type) {
@@ -43,9 +44,9 @@ const CompactIssueHeader = React.createClass({
       default:
         return <span>{data.title}</span>;
     }
-  },
+  };
 
-  getMessage() {
+  getMessage = () => {
     let data = this.props.data;
     let metadata = data.metadata;
     switch (data.type) {
@@ -56,7 +57,7 @@ const CompactIssueHeader = React.createClass({
       default:
         return '';
     }
-  },
+  };
 
   render() {
     let {orgId, projectId, data} = this.props;
@@ -94,10 +95,12 @@ const CompactIssueHeader = React.createClass({
         </div>
       </div>
     );
-  },
-});
+  }
+}
+
+const CompactIssue = createReactClass({
+  displayName: 'CompactIssue',
 
-const CompactIssue = React.createClass({
   propTypes: {
     data: PropTypes.object,
     id: PropTypes.string,