Matt Aitken
5740955357
## Summary Several dashboard routes performed actions a restricted role should not be able to do (cancel or replay runs, manage prompt versions, invite and manage members, manage billing) without any permission check. This adds role-based permission enforcement to those routes, and disables the matching UI controls (with a tooltip) when the current role lacks permission. Covered actions: - Runs: cancel and replay (single, bulk create, bulk abort) - Prompts: create or edit override versions, and promote a version to current - Members: invite, resend invite, revoke invite - Billing: change plan, billing alerts, and the customer portal ## How Each affected route now goes through the `dashboardLoader` / `dashboardAction` route builders with an `authorization` block declaring the required permission (or a per-intent check where one route handles several intents). Existing tenancy and data-scoping queries are untouched; this only layers permission checks on top. The UI follows disable-don't-hide: controls stay visible but disabled with a "You don't have permission to ..." tooltip. Two reusable pieces support this: `checkPermissions(ability, checks)` turns a set of checks into a boolean map a loader returns to the client, and `PermissionButton` / `PermissionLink` disable the underlying control and show a tooltip when a permission flag is false. ## Behaviour No change in the default configuration: permissions are permissive, so every control stays enabled and every route behaves as before. The checks only take effect when an RBAC plugin is installed. This also makes role assignment on invite-accept non-fatal, so a failure there cannot block joining an org. Verified with `pnpm run typecheck --filter webapp`; `checkPermissions` has unit tests.
80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { HomeIcon } from "@heroicons/react/20/solid";
|
|
import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
|
|
import { friendlyErrorDisplay } from "~/utils/httpErrors";
|
|
import { permissionDeniedMessage } from "~/utils/permissionDenied";
|
|
import { LinkButton } from "./primitives/Buttons";
|
|
import { Header1 } from "./primitives/Headers";
|
|
import { Paragraph } from "./primitives/Paragraph";
|
|
import { PermissionDenied } from "./PermissionDenied";
|
|
import { TriggerRotatingLogo } from "./TriggerRotatingLogo";
|
|
import { type ReactNode } from "react";
|
|
|
|
type ErrorDisplayOptions = {
|
|
button?: {
|
|
title: string;
|
|
to: string;
|
|
};
|
|
};
|
|
|
|
export function RouteErrorDisplay(options?: ErrorDisplayOptions) {
|
|
const error = useRouteError();
|
|
|
|
// A failed `authorization` check (or `throwPermissionDenied`) throws a 403
|
|
// that bubbles to the nearest route ErrorBoundary. Every layout boundary
|
|
// renders through here, so handling it once means a gated route only has to
|
|
// declare `authorization` to get the permission panel: no per-route boundary.
|
|
const permission = isRouteErrorResponse(error) ? permissionDeniedMessage(error.data) : null;
|
|
if (permission) {
|
|
return (
|
|
<div className="flex min-h-screen w-full items-center justify-center p-4">
|
|
<div className="w-full max-w-md">
|
|
<PermissionDenied message={permission} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{isRouteErrorResponse(error) ? (
|
|
<ErrorDisplay
|
|
title={friendlyErrorDisplay(error.status, error.statusText).title}
|
|
message={
|
|
error.data.message ?? friendlyErrorDisplay(error.status, error.statusText).message
|
|
}
|
|
{...options}
|
|
/>
|
|
) : error instanceof Error ? (
|
|
<ErrorDisplay title={error.name} message={error.message} {...options} />
|
|
) : (
|
|
<ErrorDisplay title="Oops" message={JSON.stringify(error)} {...options} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
type DisplayOptionsProps = {
|
|
title: string;
|
|
message?: ReactNode;
|
|
} & ErrorDisplayOptions;
|
|
|
|
export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
|
|
return (
|
|
<div className="relative flex min-h-screen flex-col items-center justify-center bg-[#16181C]">
|
|
<div className="z-10 mt-[30vh] flex flex-col items-center gap-8">
|
|
<Header1>{title}</Header1>
|
|
{message && <Paragraph>{message}</Paragraph>}
|
|
<LinkButton
|
|
to={button ? button.to : "/"}
|
|
shortcut={{ modifiers: ["mod"], key: "g" }}
|
|
variant="primary/medium"
|
|
LeadingIcon={HomeIcon}
|
|
>
|
|
{button ? button.title : "Go to homepage"}
|
|
</LinkButton>
|
|
</div>
|
|
<TriggerRotatingLogo />
|
|
</div>
|
|
);
|
|
}
|