feat(workflow): Remove alert history filters feature flag (#27047)

src/sentry/conf/server.py

@@ -1000,8 +1000,6 @@ SENTRY_FEATURES = {
     "organizations:issue-percent-filters": False,
     # Enable the new alert details ux design
     "organizations:alert-details-redesign": True,
-    # Enable the new alert history filters
-    "organizations:alert-history-filters": False,
     # Enable the new images loaded design and features
     "organizations:images-loaded-v2": True,
     # Enable the adoption chart in the releases page

src/sentry/features/__init__.py

@@ -54,7 +54,6 @@ default_manager.add("organizations:create")
 default_manager.add("organizations:advanced-search", OrganizationFeature)
 default_manager.add("organizations:alert-details-redesign", OrganizationFeature, True)
 default_manager.add("organizations:alert-filters", OrganizationFeature)
-default_manager.add("organizations:alert-history-filters", OrganizationFeature, True)
 default_manager.add("organizations:api-keys", OrganizationFeature)
 default_manager.add("organizations:app-store-connect", OrganizationFeature, True)
 default_manager.add("organizations:boolean-search", OrganizationFeature)

static/app/views/alerts/list/index.tsx

@@ -2,14 +2,12 @@ import {Component, Fragment} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 import flatten from 'lodash/flatten';
-import omit from 'lodash/omit';
 
 import {promptsCheck, promptsUpdate} from 'app/actionCreators/prompts';
 import Feature from 'app/components/acl/feature';
 import Alert from 'app/components/alert';
 import AsyncComponent from 'app/components/asyncComponent';
 import Button from 'app/components/button';
-import ButtonBar from 'app/components/buttonBar';
 import CreateAlertButton from 'app/components/createAlertButton';
 import * as Layout from 'app/components/layouts/thirds';
 import ExternalLink from 'app/components/links/externalLink';
@@ -37,8 +35,6 @@ import Onboarding from './onboarding';
 import AlertListRow from './row';
 import {TableLayout} from './styles';
 
-const DEFAULT_QUERY_STATUS = 'open';
-
 const DOCS_URL =
   'https://docs.sentry.io/workflow/alerts-notifications/alerts/?_ga=2.21848383.580096147.1592364314-1444595810.1582160976';
 
@@ -90,16 +86,7 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
       return [];
     }
 
-    // No default status w/ alert-history-filters
-    const hasAlertHistoryFilters = this.props.organization.features.includes(
-      'alert-history-filters'
-    );
-
-    return ['open', 'closed'].includes(status as string)
-      ? [status as string]
-      : hasAlertHistoryFilters
-      ? []
-      : [DEFAULT_QUERY_STATUS];
+    return ['open', 'closed'].includes(status) ? [status] : [];
   }
 
   /**
@@ -328,17 +315,9 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
   }
 
   renderBody() {
-    const {params, organization, router, location} = this.props;
-    const {pathname, query} = location;
+    const {params, organization, router} = this.props;
     const {orgId} = params;
 
-    const openIncidentsQuery = omit({...query, status: 'open'}, 'cursor');
-    const closedIncidentsQuery = omit({...query, status: 'closed'}, 'cursor');
-    const status = this.getQueryStatus(location.query.status)[0] || DEFAULT_QUERY_STATUS;
-    const hasAlertHistoryFilters = organization.features.includes(
-      'alert-history-filters'
-    );
-
     return (
       <SentryDocumentTitle title={t('Alerts')} orgSlug={orgId}>
         <GlobalSelectionHeader organization={organization} showDateSelector={false}>
@@ -355,26 +334,7 @@ class IncidentsList extends AsyncComponent<Props, State & AsyncComponent['state'
                       {t('This page only shows metric alerts.')}
                     </StyledAlert>
                   </Feature>
-                  {hasAlertHistoryFilters ? (
-                    this.renderFilterBar()
-                  ) : (
-                    <StyledButtonBar merged active={status}>
-                      <Button
-                        to={{pathname, query: openIncidentsQuery}}
-                        barId="open"
-                        size="small"
-                      >
-                        {t('Unresolved')}
-                      </Button>
-                      <Button
-                        to={{pathname, query: closedIncidentsQuery}}
-                        barId="closed"
-                        size="small"
-                      >
-                        {t('Resolved')}
-                      </Button>
-                    </StyledButtonBar>
-                  )}
+                  {this.renderFilterBar()}
                 </Fragment>
               )}
               {this.renderList()}
@@ -433,11 +393,6 @@ class IncidentsListContainer extends Component<Props> {
   }
 }
 
-const StyledButtonBar = styled(ButtonBar)`
-  width: 100px;
-  margin-bottom: ${space(1)};
-`;
-
 const StyledAlert = styled(Alert)`
   margin-bottom: ${space(1.5)};
 `;

tests/js/spec/views/alerts/list/index.spec.jsx

@@ -8,14 +8,13 @@ describe('IncidentsList', function () {
   let routerContext;
   let router;
   let organization;
-  let incidentsMock;
   let projectMock;
   let wrapper;
   let projects;
   const projects1 = ['a', 'b', 'c'];
   const projects2 = ['c', 'd'];
 
-  const createWrapper = async props => {
+  const createWrapper = async (props = {}) => {
     wrapper = mountWithTheme(
       <IncidentsList
         params={{orgId: organization.slug}}
@@ -40,7 +39,7 @@ describe('IncidentsList', function () {
     router = context.router;
     organization = context.organization;
 
-    incidentsMock = MockApiClient.addMockResponse({
+    MockApiClient.addMockResponse({
       url: '/organizations/org-slug/incidents/',
       body: [
         TestStubs.Incident({
@@ -200,44 +199,30 @@ describe('IncidentsList', function () {
     expect(wrapper.text()).toContain('No incidents exist for the current query.');
   });
 
-  it('toggles open/closed', async function () {
+  it('filters by opened issues', async function () {
+    ProjectsStore.loadInitialData(projects);
     wrapper = await createWrapper();
 
-    expect(wrapper.find('StyledButtonBar').find('Button').at(0).prop('priority')).toBe(
-      'primary'
-    );
-
-    expect(wrapper.find('IncidentPanelItem').at(0).find('Duration').exists()).toBeFalsy();
-
-    expect(wrapper.find('IncidentPanelItem').at(0).find('TimeSince')).toHaveLength(1);
+    wrapper.find('[data-test-id="filter-button"]').at(1).simulate('click');
 
-    expect(incidentsMock).toHaveBeenCalledTimes(1);
-
-    expect(incidentsMock).toHaveBeenCalledWith(
-      '/organizations/org-slug/incidents/',
-      expect.objectContaining({
-        query: {status: ['open'], team: ['myteams', 'unassigned']},
-      })
+    const resolved = wrapper.find('Filter').find('ListItem').at(1);
+    expect(resolved.text()).toBe('Resolved');
+    expect(resolved.find('[data-test-id="checkbox-fancy"]').props()['aria-checked']).toBe(
+      false
     );
 
     wrapper.setProps({
       location: {query: {status: ['closed']}, search: '?status=closed`'},
     });
 
-    expect(wrapper.find('StyledButtonBar').find('Button').at(1).prop('priority')).toBe(
-      'primary'
-    );
-
-    expect(wrapper.find('IncidentPanelItem').at(0).text()).toContain('Still Active');
-
-    expect(wrapper.find('IncidentPanelItem').at(0).find('TimeSince')).toHaveLength(1);
-
-    expect(incidentsMock).toHaveBeenCalledTimes(2);
-
-    expect(incidentsMock).toHaveBeenCalledWith(
-      '/organizations/org-slug/incidents/',
-      expect.objectContaining({query: expect.objectContaining({status: ['closed']})})
-    );
+    expect(
+      wrapper
+        .find('Filter')
+        .find('ListItem')
+        .at(1)
+        .find('[data-test-id="checkbox-fancy"]')
+        .props()['aria-checked']
+    ).toBe(true);
   });
 
   it('disables the new alert button for those without alert:write', async function () {
@@ -252,6 +237,7 @@ describe('IncidentsList', function () {
     expect(addButton.props()['aria-disabled']).toBe(true);
 
     // Enabled with access
+    wrapper.unmount();
     wrapper = await createWrapper();
 
     const addLink = wrapper.find('button[aria-label="Create Alert Rule"]');
@@ -259,11 +245,7 @@ describe('IncidentsList', function () {
   });
 
   it('searches by name', async () => {
-    const org = {
-      ...organization,
-      features: ['incidents', 'alert-history-filters'],
-    };
-    wrapper = await createWrapper({organization: org});
+    wrapper = await createWrapper();
     expect(wrapper.find('StyledSearchBar').exists()).toBe(true);
 
     const testQuery = 'test name';