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

Closes [this
issue](https://github.com/coder/internal/issues/385#issuecomment-2667061358)

## 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](https://github.com/coder/coder/pull/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)

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}</>;