feat: show dialog with a redirect if permissions are required (#16661)

brettkolodny · web-flow · commit 39f42bc11d48 · 2025-02-21T17:43:32.000-05:00
Closes [this issue](coder/internal#385 (comment)) ## New behavior When a user ends up on a page they don't have permission to view instead of being redirected back to _/workspaces_ they'll be met with the un-closeable dialog below with a link to _/workspaces_. This is similar to [this PR](#16644) but IMO we should be making sure we are using `<RequirePermissions />` wherever applicable and only relying on `<ErrorAlert />` as a fallback in case there is some page we missed or endpoint we're accidentally using. ![Screenshot 2025-02-21 at 4 50 58 PM](https://github.com/user-attachments/assets/1f986e28-d99b-425d-b67a-80bb08d5111f)
diff --git a/site/src/contexts/auth/RequirePermission.tsx b/site/src/contexts/auth/RequirePermission.tsx
@@ -1,5 +1,13 @@
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "components/Dialog/Dialog";
+import { Link } from "components/Link/Link";
 import type { FC, ReactNode } from "react";
-import { Navigate } from "react-router-dom";
 
 export interface RequirePermissionProps {
 	children?: ReactNode;
@@ -14,7 +22,24 @@ export const RequirePermission: FC<RequirePermissionProps> = ({
 	isFeatureVisible,
 }) => {
 	if (!isFeatureVisible) {
-		return <Navigate to="/workspaces" />;
+		return (
+			<Dialog open={true}>
+				<DialogContent>
+					<DialogHeader>
+						<DialogTitle>
+							You don't have permission to view this page
+						</DialogTitle>
+					</DialogHeader>
+					<DialogDescription>
+						If you believe this is a mistake, please contact your administrator
+						or try signing in with different credentials.
+					</DialogDescription>
+					<DialogFooter>
+						<Link href="/">Go to workspaces</Link>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		);
 	}
 
 	return <>{children}</>;
