ref(js): Remove ApiMixin [SEN-212]

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

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import {MentionsInput, Mention} from 'react-mentions';
 import _ from 'lodash';
 
-import ApiMixin from 'app/mixins/apiMixin';
+import withApi from 'app/utils/withApi';
 import OrganizationState from 'app/mixins/organizationState';
 
 import GroupStore from 'app/stores/groupStore';
@@ -32,14 +32,15 @@ const NoteInput = createReactClass({
   displayName: 'NoteInput',
 
   propTypes: {
+    api: PropTypes.object,
     item: PropTypes.object,
     group: PropTypes.object.isRequired,
     onFinish: PropTypes.func,
     memberList: PropTypes.array.isRequired,
     sessionUser: PropTypes.object.isRequired,
   },
 
-  mixins: [ApiMixin, OrganizationState],
+  mixins: [OrganizationState],
 
   getInitialState() {
     const {item, group} = this.props;
@@ -143,7 +144,7 @@ const NoteInput = createReactClass({
 
     const loadingIndicator = IndicatorStore.add(t('Posting comment..'));
 
-    this.api.request('/issues/' + group.id + '/comments/', {
+    this.props.api.request('/issues/' + group.id + '/comments/', {
       method: 'POST',
       data: {
         text: this.cleanMarkdown(this.state.value),
@@ -179,7 +180,7 @@ const NoteInput = createReactClass({
 
     const loadingIndicator = IndicatorStore.add(t('Updating comment..'));
 
-    this.api.request('/issues/' + group.id + '/comments/' + item.id + '/', {
+    this.props.api.request('/issues/' + group.id + '/comments/' + item.id + '/', {
       method: 'PUT',
       data: {
         text: this.state.value,
@@ -391,4 +392,6 @@ const NoteInput = createReactClass({
   },
 });
 
-export default NoteInput;
+export {NoteInput};
+
+export default withApi(NoteInput);

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

@@ -4,7 +4,7 @@ import createReactClass from 'create-react-class';
 import Reflux from 'reflux';
 import {Flex, Box} from 'grid-emotion';
 
-import ApiMixin from 'app/mixins/apiMixin';
+import withApi from 'app/utils/withApi';
 import IndicatorStore from 'app/stores/indicatorStore';
 import DropdownLink from 'app/components/dropdownLink';
 import SnoozeAction from 'app/components/issues/snoozeAction';
@@ -127,6 +127,7 @@ const CompactIssue = createReactClass({
   displayName: 'CompactIssue',
 
   propTypes: {
+    api: PropTypes.object,
     data: PropTypes.object,
     id: PropTypes.string,
     eventId: PropTypes.string,
@@ -135,7 +136,7 @@ const CompactIssue = createReactClass({
     organization: SentryTypes.Organization.isRequired,
   },
 
-  mixins: [ApiMixin, Reflux.listenTo(GroupStore, 'onGroupChange')],
+  mixins: [Reflux.listenTo(GroupStore, 'onGroupChange')],
 
   getInitialState() {
     return {
@@ -178,7 +179,7 @@ const CompactIssue = createReactClass({
     const issue = this.state.issue;
     const loadingIndicator = IndicatorStore.add(t('Saving changes..'));
 
-    this.api.bulkUpdate(
+    this.props.api.bulkUpdate(
       {
         orgId: this.props.organization.slug,
         projectId: issue.project.slug,
@@ -282,4 +283,4 @@ const CompactIssue = createReactClass({
 });
 
 export {CompactIssue};
-export default withOrganization(CompactIssue);
+export default withApi(withOrganization(CompactIssue));

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

@@ -9,24 +9,25 @@ import {analytics} from 'app/utils/analytics';
 import {sendSampleEvent} from 'app/actionCreators/projects';
 import Button from 'app/components/button';
 import {t} from 'app/locale';
-import ApiMixin from 'app/mixins/apiMixin';
+import withApi from 'app/utils/withApi';
 
 const ErrorRobot = createReactClass({
   displayName: 'ErrorRobot',
 
   propTypes: {
+    api: PropTypes.object,
     org: PropTypes.object.isRequired,
     project: PropTypes.object,
+
     // sampleIssueId can have 3 values:
     // - empty string to indicate it doesn't exist (render "create sample event")
     // - non-empty string to indicate it exists (render "see sample event")
     // - null/undefined to indicate the project API should be consulted to find out
     sampleIssueId: PropTypes.string,
+
     gradient: PropTypes.bool,
   },
 
-  mixins: [ApiMixin],
-
   getInitialState() {
     return {
       error: false,
@@ -52,7 +53,7 @@ const ErrorRobot = createReactClass({
       const requestParams = {limit: 1};
 
       this.setState({loading: true});
-      this.api.request(url, {
+      this.props.api.request(url, {
         method: 'GET',
         data: requestParams,
         success: (data, ignore, jqXHR) => {
@@ -82,7 +83,7 @@ const ErrorRobot = createReactClass({
       source: 'robot',
     });
 
-    sendSampleEvent(this.api, org.slug, project.slug)
+    sendSampleEvent(this.props.api, org.slug, project.slug)
       .then(data => {
         browserHistory.push(`/${org.slug}/${project.slug}/issues/${data.groupID}/`);
       })
@@ -157,7 +158,9 @@ const ErrorRobot = createReactClass({
   },
 });
 
-export default ErrorRobot;
+export {ErrorRobot};
+
+export default withApi(ErrorRobot);
 
 const ErrorRobotWrapper = styled('div')`
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);

src/sentry/static/sentry/app/components/group/pluginActions.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import createReactClass from 'create-react-class';
 import Modal from 'react-bootstrap/lib/Modal';
-import ApiMixin from 'app/mixins/apiMixin';
+import withApi from 'app/utils/withApi';
 import {addSuccessMessage, addErrorMessage} from 'app/actionCreators/indicator';
 import OrganizationState from 'app/mixins/organizationState';
 import NavTabs from 'app/components/navTabs';
@@ -15,12 +15,13 @@ const PluginActions = createReactClass({
   displayName: 'PluginActions',
 
   propTypes: {
+    api: PropTypes.object,
     group: SentryTypes.Group.isRequired,
     project: SentryTypes.Project.isRequired,
     plugin: PropTypes.object.isRequired,
   },
 
-  mixins: [ApiMixin, OrganizationState],
+  mixins: [OrganizationState],
 
   getInitialState() {
     return {
@@ -49,7 +50,7 @@ const PluginActions = createReactClass({
     // override plugin.issue so that 'create/link' Modal
     // doesn't think the plugin still has an issue linked
     const endpoint = `/issues/${this.props.group.id}/plugins/${plugin.slug}/unlink/`;
-    this.api.request(endpoint, {
+    this.props.api.request(endpoint, {
       success: data => {
         this.loadPlugin(plugin);
         addSuccessMessage(t('Successfully unlinked issue.'));
@@ -146,4 +147,6 @@ const PluginActions = createReactClass({
   },
 });
 
-export default PluginActions;
+export {PluginActions};
+
+export default withApi(PluginActions);

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

@@ -3,7 +3,6 @@ import React from 'react';
 import Reflux from 'reflux';
 import createReactClass from 'create-react-class';
 import SentryTypes from 'app/sentryTypes';
-import ApiMixin from 'app/mixins/apiMixin';
 import OrganizationEnvironmentsStore from 'app/stores/organizationEnvironmentsStore';
 import LatestContextStore from 'app/stores/latestContextStore';
 import GlobalSelectionStore from 'app/stores/globalSelectionStore';
@@ -27,7 +26,6 @@ const GroupReleaseStats = createReactClass({
   },
 
   mixins: [
-    ApiMixin,
     OrganizationState,
     Reflux.listenTo(LatestContextStore, 'onLatestContextChange'),
     Reflux.listenTo(GlobalSelectionStore, 'onGlobalSelectionChange'),

src/sentry/static/sentry/app/components/group/sidebar.jsx

@@ -5,7 +5,7 @@ import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 
 import SentryTypes from 'app/sentryTypes';
-import ApiMixin from 'app/mixins/apiMixin';
+import withApi from 'app/utils/withApi';
 import SuggestedOwners from 'app/components/group/suggestedOwners';
 import GroupParticipants from 'app/components/group/participants';
 import GroupReleaseStats from 'app/components/group/releaseStats';
@@ -21,6 +21,7 @@ const GroupSidebar = createReactClass({
   displayName: 'GroupSidebar',
 
   propTypes: {
+    api: PropTypes.object,
     project: SentryTypes.Project,
     group: SentryTypes.Group,
     event: SentryTypes.Event,
@@ -32,15 +33,15 @@ const GroupSidebar = createReactClass({
     location: PropTypes.object,
   },
 
-  mixins: [ApiMixin, OrganizationState],
+  mixins: [OrganizationState],
 
   getInitialState() {
     return {participants: [], environments: this.props.environments};
   },
 
   componentWillMount() {
     const {group} = this.props;
-    this.api.request(`/issues/${group.id}/participants/`, {
+    this.props.api.request(`/issues/${group.id}/participants/`, {
       success: data => {
         this.setState({
           participants: data,
@@ -55,7 +56,7 @@ const GroupSidebar = createReactClass({
     });
     // Fetch group data for all environments since the one passed in props is filtered for the selected environment
     // The charts rely on having all environment data as well as the data for the selected env
-    this.api.request(`/issues/${group.id}/`, {
+    this.props.api.request(`/issues/${group.id}/`, {
       success: data => {
         this.setState({
           allEnvironmentsGroupData: data,
@@ -81,7 +82,7 @@ const GroupSidebar = createReactClass({
     const {group} = this.props;
 
     // Fetch the top values for the current group's top tags.
-    this.api.request(`/issues/${group.id}/tags/`, {
+    this.props.api.request(`/issues/${group.id}/tags/`, {
       query: pickBy({
         key: group.tags.map(data => data.key),
         environment: this.state.environments.map(env => env.name),
@@ -117,7 +118,7 @@ const GroupSidebar = createReactClass({
     const org = this.getOrganization();
     const loadingIndicator = IndicatorStore.add(t('Saving changes..'));
 
-    this.api.bulkUpdate(
+    this.props.api.bulkUpdate(
       {
         orgId: org.slug,
         projectId: project.slug,
@@ -128,7 +129,7 @@ const GroupSidebar = createReactClass({
       },
       {
         complete: () => {
-          this.api.request(`/issues/${group.id}/participants/`, {
+          this.props.api.request(`/issues/${group.id}/participants/`, {
             success: data => {
               this.setState({
                 participants: data,
@@ -305,4 +306,6 @@ const GroupSidebar = createReactClass({
   },
 });
 
-export default GroupSidebar;
+export {GroupSidebar};
+
+export default withApi(GroupSidebar);

src/sentry/static/sentry/app/components/group/suggestedOwners.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import createReactClass from 'create-react-class';
 
@@ -6,7 +7,7 @@ import {openCreateOwnershipRule} from 'app/actionCreators/modal';
 import {t} from 'app/locale';
 import Access from 'app/components/acl/access';
 import ActorAvatar from 'app/components/actorAvatar';
-import ApiMixin from 'app/mixins/apiMixin';
+import withApi from 'app/utils/withApi';
 import Button from 'app/components/button';
 import OrganizationState from 'app/mixins/organizationState';
 import GuideAnchor from 'app/components/assistant/guideAnchor';
@@ -17,12 +18,13 @@ const SuggestedOwners = createReactClass({
   displayName: 'SuggestedOwners',
 
   propTypes: {
+    api: PropTypes.object,
     project: SentryTypes.Project,
     group: SentryTypes.Group,
     event: SentryTypes.Event,
   },
 
-  mixins: [ApiMixin, OrganizationState],
+  mixins: [OrganizationState],
 
   getInitialState() {
     return {
@@ -55,7 +57,7 @@ const SuggestedOwners = createReactClass({
     const org = this.getOrganization();
     const project = this.props.project;
 
-    this.api.request(
+    this.props.api.request(
       `/projects/${org.slug}/${project.slug}/events/${event.id}/committers/`,
       {
         success: (data, _, jqXHR) => {
@@ -70,19 +72,22 @@ const SuggestedOwners = createReactClass({
         },
       }
     );
-    this.api.request(`/projects/${org.slug}/${project.slug}/events/${event.id}/owners/`, {
-      success: (data, _, jqXHR) => {
-        this.setState({
-          owners: data.owners,
-          rules: data.rules,
-        });
-      },
-      error: error => {
-        this.setState({
-          owners: [],
-        });
-      },
-    });
+    this.props.api.request(
+      `/projects/${org.slug}/${project.slug}/events/${event.id}/owners/`,
+      {
+        success: (data, _, jqXHR) => {
+          this.setState({
+            owners: data.owners,
+            rules: data.rules,
+          });
+        },
+        error: error => {
+          this.setState({
+            owners: [],
+          });
+        },
+      }
+    );
   },
 
   assign(actor) {
@@ -204,7 +209,8 @@ const SuggestedOwners = createReactClass({
     );
   },
 });
-export default SuggestedOwners;
+export {SuggestedOwners};
+export default withApi(SuggestedOwners);
 
 /**
  * Given a list of rule objects returned from the API, locate the matching

src/sentry/static/sentry/app/components/group/tagDistributionMeter.jsx

@@ -7,7 +7,6 @@ import isPropValid from '@emotion/is-prop-valid';
 
 import {escape, percent} from 'app/utils';
 import {t} from 'app/locale';
-import ApiMixin from 'app/mixins/apiMixin';
 import DeviceName, {
   deviceNameMapper,
   loadDeviceListModule,
@@ -30,8 +29,6 @@ const TagDistributionMeter = createReactClass({
     topValues: PropTypes.array,
   },
 
-  mixins: [ApiMixin],
-
   getInitialState() {
     return {
       loading: true,