diff --git a/static/app/views/dashboards/detail.tsx b/static/app/views/dashboards/detail.tsx index dae6356c46f629..de577de816d11a 100644 --- a/static/app/views/dashboards/detail.tsx +++ b/static/app/views/dashboards/detail.tsx @@ -35,7 +35,6 @@ import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; import {USING_CUSTOMER_DOMAIN} from 'sentry/constants'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; -import type {PageFilters} from 'sentry/types/core'; import type {PlainRoute, RouteComponentProps} from 'sentry/types/legacyReactRouter'; import type {Organization} from 'sentry/types/organization'; import type {Project} from 'sentry/types/project'; @@ -53,7 +52,6 @@ import type {ReactRouter3Navigate} from 'sentry/utils/useNavigate'; import {useNavigate} from 'sentry/utils/useNavigate'; import withApi from 'sentry/utils/withApi'; import withOrganization from 'sentry/utils/withOrganization'; -import withPageFilters from 'sentry/utils/withPageFilters'; import withProjects from 'sentry/utils/withProjects'; import { cloneDashboard, @@ -132,7 +130,6 @@ type Props = RouteComponentProps & { organization: Organization; projects: Project[]; route: PlainRoute; - selection: PageFilters; theme: Theme; children?: React.ReactNode; newWidget?: Widget; @@ -1334,6 +1331,6 @@ function DashboardDetailWithThemeAndNavigate(props: Omit; } -export default withPageFilters( - withProjects(withApi(withOrganization(DashboardDetailWithThemeAndNavigate))) +export default withProjects( + withApi(withOrganization(DashboardDetailWithThemeAndNavigate)) ); diff --git a/static/app/views/dashboards/orgDashboards.tsx b/static/app/views/dashboards/orgDashboards.tsx index f1bc0beea1aa9e..b536c4289df157 100644 --- a/static/app/views/dashboards/orgDashboards.tsx +++ b/static/app/views/dashboards/orgDashboards.tsx @@ -1,4 +1,4 @@ -import {useEffect, useRef, useState} from 'react'; +import {useEffect, useMemo, useRef, useState} from 'react'; import isEqual from 'lodash/isEqual'; import NotFound from 'sentry/components/errors/notFound'; @@ -8,8 +8,6 @@ import LoadingIndicator from 'sentry/components/loadingIndicator'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; import {t} from 'sentry/locale'; import {useApiQuery, useQueryClient} from 'sentry/utils/queryClient'; -import type {WithRouteAnalyticsProps} from 'sentry/utils/routeAnalytics/withRouteAnalytics'; -import withRouteAnalytics from 'sentry/utils/routeAnalytics/withRouteAnalytics'; import normalizeUrl from 'sentry/utils/url/normalizeUrl'; import {useLocation} from 'sentry/utils/useLocation'; import {useNavigate} from 'sentry/utils/useNavigate'; @@ -27,12 +25,11 @@ type OrgDashboardsChildrenProps = { onDashboardUpdate: (updatedDashboard: DashboardDetails) => void; }; -type Props = WithRouteAnalyticsProps & { +interface OrgDashboardsProps { children: (props: OrgDashboardsChildrenProps) => React.ReactNode; -}; +} -function OrgDashboards(props: Props) { - const {children} = props; +function OrgDashboards({children}: OrgDashboardsProps) { const location = useLocation(); const organization = useOrganization(); const navigate = useNavigate(); @@ -70,7 +67,7 @@ function OrgDashboards(props: Props) { if (dashboardId && !isEqual(dashboardId, selectedDashboard?.id)) { setSelectedDashboardState(null); } - }, [dashboardId, selectedDashboard]); + }, [dashboardId, selectedDashboard?.id]); // If we don't have a selected dashboard, and one isn't going to arrive // we can redirect to the first dashboard in the list. @@ -138,7 +135,7 @@ function OrgDashboards(props: Props) { {replace: true} ); } - }, [location.query, navigate, organization]); + }, [location.query, navigate, organization.slug, organization.features]); useEffect(() => { // Clean up the query cache when the dashboard unmounts to prevent @@ -150,6 +147,21 @@ function OrgDashboards(props: Props) { }; }, [dashboardId, ENDPOINT, queryClient]); + const childrenProps = useMemo( + () => ({ + error: Boolean(dashboardsError || selectedDashboardError), + dashboard: selectedDashboard + ? { + ...selectedDashboard, + widgets: selectedDashboard.widgets.map(assignTempId), + } + : null, + dashboards: Array.isArray(dashboards) ? dashboards : [], + onDashboardUpdate: setSelectedDashboardState, + }), + [dashboardsError, selectedDashboardError, selectedDashboard, dashboards] + ); + if (isDashboardsPending || isSelectedDashboardLoading) { return ( @@ -185,35 +197,11 @@ function OrgDashboards(props: Props) { return ; } - const getDashboards = (): DashboardListItem[] => { - return Array.isArray(dashboards) ? dashboards : []; - }; - - const renderContent = () => { - // Ensure there are always tempIds for grid layout - // This is needed because there are cases where the dashboard - // renders before the onRequestSuccess setState is processed - // and will caused stacked widgets because of missing tempIds - const dashboard = selectedDashboard - ? { - ...selectedDashboard, - widgets: selectedDashboard.widgets.map(assignTempId), - } - : null; - - return children({ - error: Boolean(dashboardsError || selectedDashboardError), - dashboard, - dashboards: getDashboards(), - onDashboardUpdate: setSelectedDashboardState, - }); - }; - return ( - {renderContent()} + {children(childrenProps)} ); } -export default withRouteAnalytics(OrgDashboards); +export default OrgDashboards;