diff --git a/static/app/views/settings/project/projectFilters/customFilters.tsx b/static/app/views/settings/project/projectFilters/customFilters.tsx new file mode 100644 index 000000000000..0e99dcd1e965 --- /dev/null +++ b/static/app/views/settings/project/projectFilters/customFilters.tsx @@ -0,0 +1,26 @@ +import styled from '@emotion/styled'; + +import {SimpleTable} from 'sentry/components/tables/simpleTable'; +import {t} from 'sentry/locale'; + +export function CustomFilters() { + return ( + + + {t('Active')} + {t('Name')} + {t('Conditions')} + {t('Created')} + {t('Edited')} + {t('Action')} + + {t('No inbound filters found')} + + ); +} + +const CustomFiltersTable = styled(SimpleTable)` + grid-template-columns: + max-content minmax(0, 1fr) minmax(0, 2fr) max-content max-content + max-content; +`; diff --git a/static/app/views/settings/project/projectFilters/index.spec.tsx b/static/app/views/settings/project/projectFilters/index.spec.tsx index 7c6551a4afe2..bd8e4e795cc0 100644 --- a/static/app/views/settings/project/projectFilters/index.spec.tsx +++ b/static/app/views/settings/project/projectFilters/index.spec.tsx @@ -342,6 +342,46 @@ describe('ProjectFilters', () => { ); }); + it('shows inbound filters v2 tab between data filters and discarded issues', () => { + const organizationWithFlag = OrganizationFixture({ + ...organization, + features: ['inbound-filters-v2'], + }); + const projectWithDiscardGroups = ProjectFixture({ + ...project, + features: ['discard-groups'], + }); + + render(, { + organization: organizationWithFlag, + outletContext: {project: projectWithDiscardGroups}, + initialRouterConfig: { + location: { + pathname: `/settings/${organizationWithFlag.slug}/projects/${projectWithDiscardGroups.slug}/filters/inbound-filters/`, + }, + route: '/settings/:orgId/projects/:projectId/filters/:filterType/', + }, + }); + + expect(screen.getAllByRole('tab').map(tab => tab.textContent)).toEqual([ + 'Data Filters', + 'Custom Filters', + 'Discarded Issues', + ]); + expect(screen.getByRole('table')).toBeInTheDocument(); + for (const column of [ + 'Active', + 'Name', + 'Conditions', + 'Created', + 'Edited', + 'Action', + ]) { + expect(screen.getByRole('columnheader', {name: column})).toBeInTheDocument(); + } + expect(screen.getByText('No inbound filters found')).toBeInTheDocument(); + }); + it('disables configuration for non project:write users', async () => { render(, { organization: OrganizationFixture({access: []}), diff --git a/static/app/views/settings/project/projectFilters/index.tsx b/static/app/views/settings/project/projectFilters/index.tsx index 8a76b23487ff..63f161cae7b9 100644 --- a/static/app/views/settings/project/projectFilters/index.tsx +++ b/static/app/views/settings/project/projectFilters/index.tsx @@ -6,6 +6,7 @@ import {TabList, Tabs} from '@sentry/scraps/tabs'; import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle'; import {t} from 'sentry/locale'; import {recreateRoute} from 'sentry/utils/recreateRoute'; +import {useOrganization} from 'sentry/utils/useOrganization'; import {useParams} from 'sentry/utils/useParams'; import {useRoutes} from 'sentry/utils/useRoutes'; import {SettingsPageHeader} from 'sentry/views/settings/components/settingsPageHeader'; @@ -15,17 +16,23 @@ import {ProjectFiltersSettings} from 'sentry/views/settings/project/projectFilte import {ProjectPermissionAlert} from 'sentry/views/settings/project/projectPermissionAlert'; import {useProjectSettingsOutlet} from 'sentry/views/settings/project/projectSettingsLayout'; +import {CustomFilters} from './customFilters'; + export default function ProjectFilters() { const routes = useRoutes(); const params = useParams<{filterType: string; projectId: string}>(); const {projectId, filterType} = params; const {project} = useProjectSettingsOutlet(); + const organization = useOrganization(); if (!project) { return null; } const features = new Set(project.features); + const hasInboundFiltersV2 = organization.features.includes('inbound-filters-v2'); + const hasDiscardGroups = features.has('discard-groups'); + const showTabs = hasDiscardGroups || hasInboundFiltersV2; return ( @@ -42,7 +49,7 @@ export default function ProjectFilters() {
- {features.has('discard-groups') && ( + {showTabs && ( @@ -52,8 +59,20 @@ export default function ProjectFilters() { > {t('Data Filters')} +