ref(ui): Refactor GroupSidebar to not rely on old stores

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

@@ -1,13 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Reflux from 'reflux';
 import createReactClass from 'create-react-class';
 import SentryTypes from 'app/sentryTypes';
-import OrganizationEnvironmentsStore from 'app/stores/organizationEnvironmentsStore';
-import LatestContextStore from 'app/stores/latestContextStore';
-import GlobalSelectionStore from 'app/stores/globalSelectionStore';
 import LoadingIndicator from 'app/components/loadingIndicator';
-import OrganizationState from 'app/mixins/organizationState';
 import GroupReleaseChart from 'app/components/group/releaseChart';
 import SeenInfo from 'app/components/group/seenInfo';
 import {t} from 'app/locale';
@@ -18,45 +13,13 @@ const GroupReleaseStats = createReactClass({
   propTypes: {
     group: SentryTypes.Group.isRequired,
     project: SentryTypes.Project.isRequired,
+    organization: SentryTypes.Organization.isRequired,
+    environments: PropTypes.arrayOf(SentryTypes.Environment),
     allEnvironments: PropTypes.object,
   },
 
-  contextTypes: {
-    organization: PropTypes.object,
-  },
-
-  mixins: [
-    OrganizationState,
-    Reflux.listenTo(LatestContextStore, 'onLatestContextChange'),
-    Reflux.listenTo(GlobalSelectionStore, 'onGlobalSelectionChange'),
-  ],
-
-  getInitialState() {
-    const envList = OrganizationEnvironmentsStore.getActive();
-    const environments = envList.filter(env =>
-      GlobalSelectionStore.get().environments.includes(env.name)
-    );
-
-    return {
-      envList,
-      environments,
-    };
-  },
-
-  onLatestContextChange(context) {
-    this.setState({environments: context.environment ? [context.environment] : []});
-  },
-
-  onGlobalSelectionChange(selection) {
-    const environments = OrganizationEnvironmentsStore.getActive().filter(env =>
-      selection.environments.includes(env.name)
-    );
-    this.setState({environments});
-  },
-
   render() {
-    const {group, project, allEnvironments} = this.props;
-    const {environments} = this.state;
+    const {group, organization, project, environments, allEnvironments} = this.props;
 
     const environmentLabel = environments.length
       ? environments.map(env => env.displayName).join(', ')
@@ -70,15 +33,16 @@ const GroupReleaseStats = createReactClass({
         : null;
 
     const projectId = project.slug;
-    const orgId = this.getOrganization().slug;
+    const orgId = organization.slug;
     const hasRelease = new Set(project.features).has('releases');
     const isLoading = !group || !allEnvironments;
 
     return (
       <div className="env-stats">
         <h6>
-          <span>{environmentLabel}</span>
+          <span data-test-id="env-label">{environmentLabel}</span>
         </h6>
+
         <div className="env-content">
           {isLoading ? (
             <LoadingIndicator />

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

@@ -9,7 +9,6 @@ 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';
-import OrganizationState from 'app/mixins/organizationState';
 import IndicatorStore from 'app/stores/indicatorStore';
 import TagDistributionMeter from 'app/components/group/tagDistributionMeter';
 import LoadingError from 'app/components/loadingError';
@@ -23,19 +22,14 @@ const GroupSidebar = createReactClass({
 
   propTypes: {
     api: PropTypes.object,
+    organization: SentryTypes.Organization,
     project: SentryTypes.Project,
     group: SentryTypes.Group,
     event: SentryTypes.Event,
     environments: PropTypes.arrayOf(SentryTypes.Environment),
     sentryAppInstallations: PropTypes.array,
   },
 
-  contextTypes: {
-    location: PropTypes.object,
-  },
-
-  mixins: [OrganizationState],
-
   getInitialState() {
     return {participants: [], environments: this.props.environments};
   },
@@ -87,7 +81,7 @@ const GroupSidebar = createReactClass({
       query: pickBy({
         key: group.tags.map(data => data.key),
         environment: this.state.environments.map(env => env.name),
-        enable_snuba: this.getFeatures().has('sentry10') ? '1' : '0',
+        enable_snuba: '1',
       }),
       success: data => {
         this.setState({
@@ -115,13 +109,12 @@ const GroupSidebar = createReactClass({
   },
 
   toggleSubscription() {
-    const {group, project} = this.props;
-    const org = this.getOrganization();
+    const {group, project, organization} = this.props;
     const loadingIndicator = IndicatorStore.add(t('Saving changes..'));
 
     this.props.api.bulkUpdate(
       {
-        orgId: org.slug,
+        orgId: organization.slug,
         projectId: project.slug,
         itemIds: [group.id],
         data: {
@@ -235,16 +228,23 @@ const GroupSidebar = createReactClass({
   },
 
   render() {
-    const {group, project, sentryAppInstallations} = this.props;
+    const {
+      group,
+      organization,
+      project,
+      environments,
+      sentryAppInstallations,
+    } = this.props;
     const projectId = project.slug;
-    const organization = this.getOrganization();
 
     return (
       <div className="group-stats">
         <SuggestedOwners project={project} group={group} event={this.props.event} />
         <GroupReleaseStats
           group={this.props.group}
           project={project}
+          environments={environments}
+          organization={organization}
           allEnvironments={this.state.allEnvironmentsGroupData}
         />
 
@@ -307,6 +307,4 @@ const GroupSidebar = createReactClass({
   },
 });
 
-export {GroupSidebar};
-
 export default withApi(GroupSidebar);

src/sentry/static/sentry/app/views/groupDetails/shared/groupDetails.jsx

@@ -203,14 +203,15 @@ const GroupDetails = createReactClass({
   },
 
   renderContent(shouldShowGlobalHeader) {
-    const {params} = this.props;
+    const {params, environments} = this.props;
     const {group, project} = this.state;
 
     const Content = (
       <DocumentTitle title={this.getTitle()}>
         <div className={this.props.className}>
           <GroupHeader params={params} project={project} group={group} />
           {React.cloneElement(this.props.children, {
+            environments,
             group,
             project,
           })}

src/sentry/static/sentry/app/views/groupDetails/shared/groupEventDetails.jsx

@@ -163,6 +163,7 @@ class GroupEventDetails extends React.Component {
           </div>
           <div className="secondary">
             <GroupSidebar
+              organization={organization}
               project={project}
               group={group}
               event={evt}

tests/js/fixtures/environments.js

@@ -3,8 +3,8 @@ export function Environments(hidden) {
     return [{id: '1', name: 'zzz', isHidden: true}];
   } else {
     return [
-      {id: '1', name: 'production', isHidden: false},
-      {id: '2', name: 'staging', isHidden: false},
+      {id: '1', name: 'production', displayName: 'Production', isHidden: false},
+      {id: '2', name: 'staging', displayName: 'Staging', isHidden: false},
     ];
   }
 }