feat(issues): Add environment selector to other issue details tabs (#33900)

* add env selector to rest of issue details tabs

* fix tests

static/app/views/organizationGroupDetails/groupEvents.tsx

@@ -5,6 +5,7 @@ import pick from 'lodash/pick';
 
 import {Client} from 'sentry/api';
 import EmptyStateWarning from 'sentry/components/emptyStateWarning';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import EventsTable from 'sentry/components/eventsTable/eventsTable';
 import * as Layout from 'sentry/components/layouts/thirds';
 import LoadingError from 'sentry/components/loadingError';
@@ -14,14 +15,16 @@ import {Panel, PanelBody} from 'sentry/components/panels';
 import SearchBar from 'sentry/components/searchBar';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
-import {Group} from 'sentry/types';
+import {Group, Organization} from 'sentry/types';
 import {Event} from 'sentry/types/event';
 import parseApiError from 'sentry/utils/parseApiError';
 import withApi from 'sentry/utils/withApi';
+import withOrganization from 'sentry/utils/withOrganization';
 
 type Props = {
   api: Client;
   group: Group;
+  organization: Organization;
 } & RouteComponentProps<{groupId: string; orgId: string}, {}>;
 
 type State = {
@@ -156,16 +159,22 @@ class GroupEvents extends React.Component<Props, State> {
   }
 
   render() {
+    const hasPageFilters =
+      this.props.organization.features.includes('selection-filters-v2');
+
     return (
       <Layout.Body>
         <Layout.Main fullWidth>
           <Wrapper>
-            <SearchBar
-              defaultQuery=""
-              placeholder={t('Search events by id, message, or tags')}
-              query={this.state.query}
-              onSearch={this.handleSearch}
-            />
+            <FilterSection hasPageFilters={hasPageFilters}>
+              {hasPageFilters && <EnvironmentPageFilter />}
+              <SearchBar
+                defaultQuery=""
+                placeholder={t('Search events by id, message, or tags')}
+                query={this.state.query}
+                onSearch={this.handleSearch}
+              />
+            </FilterSection>
 
             <Panel className="event-list">
               <PanelBody>{this.renderBody()}</PanelBody>
@@ -178,6 +187,12 @@ class GroupEvents extends React.Component<Props, State> {
   }
 }
 
+const FilterSection = styled('div')<{hasPageFilters?: boolean}>`
+  display: grid;
+  gap: ${space(1)};
+  grid-template-columns: ${p => (p.hasPageFilters ? 'max-content 1fr' : '1fr')};
+`;
+
 const Wrapper = styled('div')`
   display: grid;
   gap: ${space(2)};
@@ -185,4 +200,4 @@ const Wrapper = styled('div')`
 
 export {GroupEvents};
 
-export default withApi(GroupEvents);
+export default withOrganization(withApi(GroupEvents));

static/app/views/organizationGroupDetails/groupTags.tsx

@@ -6,6 +6,7 @@ import Alert from 'sentry/components/alert';
 import AsyncComponent from 'sentry/components/asyncComponent';
 import Count from 'sentry/components/count';
 import {DeviceName} from 'sentry/components/deviceName';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
 import * as Layout from 'sentry/components/layouts/thirds';
 import ExternalLink from 'sentry/components/links/externalLink';
@@ -16,13 +17,15 @@ import Version from 'sentry/components/version';
 import {tct} from 'sentry/locale';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
-import {Group, TagWithTopValues} from 'sentry/types';
+import {Group, Organization, TagWithTopValues} from 'sentry/types';
 import {percent} from 'sentry/utils';
+import withOrganization from 'sentry/utils/withOrganization';
 
 type Props = AsyncComponent['props'] & {
   baseUrl: string;
   environments: string[];
   group: Group;
+  organization: Organization;
 } & RouteComponentProps<{}, {}>;
 
 type State = AsyncComponent['state'] & {
@@ -115,9 +118,17 @@ class GroupTags extends AsyncComponent<Props, State> {
   }
 
   renderBody() {
+    const hasPageFilters =
+      this.props.organization.features.includes('selection-filters-v2');
+
     return (
       <Layout.Body>
         <Layout.Main fullWidth>
+          {hasPageFilters && (
+            <FilterSection>
+              <EnvironmentPageFilter />
+            </FilterSection>
+          )}
           <Alert type="info">
             {tct(
               'Tags are automatically indexed for searching and breakdown charts. Learn how to [link: add custom tags to issues]',
@@ -142,6 +153,12 @@ const Container = styled('div')`
   margin-bottom: ${space(2)};
 `;
 
+const FilterSection = styled('div')`
+  width: max-content;
+  max-width: 100%;
+  margin-bottom: ${space(2)};
+`;
+
 const StyledPanel = styled(Panel)`
   height: 100%;
 `;
@@ -209,4 +226,4 @@ const TagBarCount = styled('div')`
   font-variant-numeric: tabular-nums;
 `;
 
-export default GroupTags;
+export default withOrganization(GroupTags);

tests/js/spec/views/organizationGroupDetails/organizationGroupEvents.spec.jsx

@@ -10,6 +10,8 @@ const OrganizationGroupEvents = GroupEvents;
 describe('groupEvents', function () {
   let request;
 
+  const organization = TestStubs.Organization();
+
   beforeEach(function () {
     request = MockApiClient.addMockResponse({
       url: '/issues/1/events/',
@@ -52,6 +54,7 @@ describe('groupEvents', function () {
   it('renders', function () {
     const component = mountWithTheme(
       <OrganizationGroupEvents
+        organization={organization}
         api={new MockApiClient()}
         group={TestStubs.Group()}
         params={{orgId: 'orgId', projectId: 'projectId', groupId: '1'}}
@@ -65,6 +68,7 @@ describe('groupEvents', function () {
   it('handles search', function () {
     const component = shallow(
       <OrganizationGroupEvents
+        organization={organization}
         api={new MockApiClient()}
         params={{orgId: 'orgId', projectId: 'projectId', groupId: '1'}}
         group={TestStubs.Group()}
@@ -97,6 +101,7 @@ describe('groupEvents', function () {
   it('handles environment filtering', function () {
     shallow(
       <OrganizationGroupEvents
+        organization={organization}
         api={new MockApiClient()}
         params={{orgId: 'orgId', projectId: 'projectId', groupId: '1'}}
         group={TestStubs.Group()}