feat(page-filters): Add to dashboards (#33034)

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

static/app/components/organizations/pageFilters/utils.tsx

@@ -79,7 +79,7 @@ export function isSelectionEqual(selection: PageFilters, other: PageFilters): bo
 export function doesPathHaveNewFilters(pathname: string, organization: Organization) {
   const newFilterPaths = (
     organization.features.includes('selection-filters-v2')
-      ? ['user-feedback', 'alerts', 'monitors', 'issues', 'projects']
+      ? ['user-feedback', 'alerts', 'monitors', 'issues', 'projects', 'dashboard']
       : ['user-feedback', 'alerts', 'monitors']
   ).map(route => `/organizations/${organization.slug}/${route}/`);
 

static/app/views/dashboardsV2/detail.tsx

@@ -17,6 +17,8 @@ import {
 } from 'sentry/actionCreators/modal';
 import {Client} from 'sentry/api';
 import Breadcrumbs from 'sentry/components/breadcrumbs';
+import DatePageFilter from 'sentry/components/datePageFilter';
+import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
 import HookOrDefault from 'sentry/components/hookOrDefault';
 import * as Layout from 'sentry/components/layouts/thirds';
 import {
@@ -24,7 +26,9 @@ import {
   WidgetViewerQueryField,
 } from 'sentry/components/modals/widgetViewerModal/utils';
 import NoProjectMessage from 'sentry/components/noProjectMessage';
+import PageFilterBar from 'sentry/components/organizations/pageFilterBar';
 import PageFiltersContainer from 'sentry/components/organizations/pageFilters/container';
+import ProjectPageFilter from 'sentry/components/projectPageFilter';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
 import {PageContent} from 'sentry/styles/organization';
@@ -585,9 +589,12 @@ class DashboardDetail extends Component<Props, State> {
     const {modifiedDashboard, dashboardState, widgetLimitReached} = this.state;
     const {dashboardId} = params;
 
+    const hasPageFilters = organization.features.includes('selection-filters-v2');
+
     return (
       <PageFiltersContainer
         skipLoadLastUsed={organization.features.includes('global-views')}
+        hideGlobalHeader={hasPageFilters}
         defaultSelection={{
           datetime: {
             start: null,
@@ -619,6 +626,13 @@ class DashboardDetail extends Component<Props, State> {
                 widgetLimitReached={widgetLimitReached}
               />
             </StyledPageHeader>
+            {hasPageFilters && (
+              <DashboardPageFilterBar>
+                <ProjectPageFilter />
+                <EnvironmentPageFilter alignDropdown="right" />
+                <DatePageFilter alignDropdown="right" />
+              </DashboardPageFilterBar>
+            )}
             <HookHeader organization={organization} />
             <Dashboard
               paramDashboardId={dashboardId}
@@ -665,10 +679,13 @@ class DashboardDetail extends Component<Props, State> {
     const {modifiedDashboard, dashboardState, widgetLimitReached} = this.state;
     const {dashboardId} = params;
 
+    const hasPageFilters = organization.features.includes('selection-filters-v2');
+
     return (
       <SentryDocumentTitle title={dashboard.title} orgSlug={organization.slug}>
         <PageFiltersContainer
           skipLoadLastUsed={organization.features.includes('global-views')}
+          hideGlobalHeader={hasPageFilters}
           defaultSelection={{
             datetime: {
               start: null,
@@ -717,6 +734,13 @@ class DashboardDetail extends Component<Props, State> {
               </Layout.Header>
               <Layout.Body>
                 <Layout.Main fullWidth>
+                  {hasPageFilters && (
+                    <DashboardPageFilterBar>
+                      <ProjectPageFilter />
+                      <EnvironmentPageFilter alignDropdown="right" />
+                      <DatePageFilter alignDropdown="right" />
+                    </DashboardPageFilterBar>
+                  )}
                   <Dashboard
                     paramDashboardId={dashboardId}
                     dashboard={modifiedDashboard ?? dashboard}
@@ -778,4 +802,10 @@ const StyledPageContent = styled(PageContent)`
   padding: 0;
 `;
 
+const DashboardPageFilterBar = styled(PageFilterBar)`
+  margin-bottom: ${space(2)};
+  width: max-content;
+  max-width: 100%;
+`;
+
 export default withApi(withOrganization(DashboardDetail));