fix: permissions check on <TemplateInsightsPage /> (#22110)

Closes #20859 

This page previously wasn't rendered to the user, however, there is a
possibility that they can navigate to this page and things will end up
in `<Spinner />`s until the requests ultimately fail. We can mitigate
this problem by showing them the `<RequirePermission />` modal.

<img width="1456" height="861" alt="image"
src="https://github.com/user-attachments/assets/57195643-ad55-4340-9c97-f8247b05a13b"
/>
This commit is contained in:
Jake Howell
2026-02-17 13:46:40 +11:00
committed by GitHub
parent 63563e57db
commit a5f3acac2f
@@ -40,6 +40,7 @@ import {
CircleXIcon,
SquareArrowOutUpRightIcon,
} from "lucide-react";
import { RequirePermission } from "modules/permissions/RequirePermission";
import { useTemplateLayoutContext } from "pages/TemplatePage/TemplateLayout";
import {
type FC,
@@ -69,7 +70,7 @@ import { numberOfWeeksOptions, WeekPicker } from "./WeekPicker";
const DEFAULT_NUMBER_OF_WEEKS = numberOfWeeksOptions[0];
export default function TemplateInsightsPage() {
const { template } = useTemplateLayoutContext();
const { template, permissions } = useTemplateLayoutContext();
const [searchParams, setSearchParams] = useSearchParams();
const defaultInterval = getDefaultInterval(template);
@@ -92,13 +93,25 @@ export default function TemplateInsightsPage() {
end_time: toISOLocal(dateRange.endDate, baseOffset),
};
const canViewInsights =
permissions.canUpdateTemplate || permissions.canReadInsights;
const insightsFilter = { ...commonFilters, interval };
const templateInsights = useQuery(insightsTemplate(insightsFilter));
const userLatency = useQuery(insightsUserLatency(commonFilters));
const userActivity = useQuery(insightsUserActivity(commonFilters));
const templateInsights = useQuery({
...insightsTemplate(insightsFilter),
enabled: canViewInsights,
});
const userLatency = useQuery({
...insightsUserLatency(commonFilters),
enabled: canViewInsights,
});
const userActivity = useQuery({
...insightsUserActivity(commonFilters),
enabled: canViewInsights,
});
return (
<>
<RequirePermission isFeatureVisible={canViewInsights}>
<title>{getTemplatePageTitle("Insights", template)}</title>
<TemplateInsightsPageView
@@ -116,7 +129,7 @@ export default function TemplateInsightsPage() {
userActivity={userActivity}
interval={interval}
/>
</>
</RequirePermission>
);
}