From 39f42bc11d4815204d1c608c0c2991e083d70611 Mon Sep 17 00:00:00 2001
From: brettkolodny <brettkolodny@gmail.com>
Date: Fri, 21 Feb 2025 17:43:32 -0500
Subject: [PATCH] feat: show dialog with a redirect if permissions are required
 (#16661)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 29 ++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/site/src/contexts/auth/RequirePermission.tsx b/site/src/contexts/auth/RequirePermission.tsx
index 50dbd0232a..6e4b0f3aac 100644
--- 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}</>;