fix: redirect users lacking create permissions to /workspaces (#16659)

brettkolodny · web-flow · commit ce49ce4f4113 · 2025-02-21T16:33:54.000-05:00
Closes [this issue](coder/internal#394). At the moment this behavior can be a bit confusing, but after [this issue is closed](coder/internal#385 (comment)) it should be more obvious what's going on here.
diff --git a/site/src/pages/OrganizationSettingsPage/CreateOrganizationPage.tsx b/site/src/pages/OrganizationSettingsPage/CreateOrganizationPage.tsx
@@ -1,5 +1,7 @@
 import { createOrganization } from "api/queries/organizations";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { RequirePermission } from "contexts/auth/RequirePermission";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import type { FC } from "react";
 import { useMutation, useQueryClient } from "react-query";
@@ -9,6 +11,7 @@ import { CreateOrganizationPageView } from "./CreateOrganizationPageView";
 const CreateOrganizationPage: FC = () => {
 	const navigate = useNavigate();
 	const feats = useFeatureVisibility();
+	const { permissions } = useAuthenticated();
 
 	const queryClient = useQueryClient();
 	const createOrganizationMutation = useMutation(
@@ -19,15 +22,17 @@ const CreateOrganizationPage: FC = () => {
 
 	return (
 		<main className="py-7">
-			<CreateOrganizationPageView
-				error={error}
-				isEntitled={feats.multiple_organizations}
-				onSubmit={async (values) => {
-					await createOrganizationMutation.mutateAsync(values);
-					displaySuccess("Organization created.");
-					navigate(`/organizations/${values.name}`);
-				}}
-			/>
+			<RequirePermission isFeatureVisible={permissions.createOrganization}>
+				<CreateOrganizationPageView
+					error={error}
+					isEntitled={feats.multiple_organizations}
+					onSubmit={async (values) => {
+						await createOrganizationMutation.mutateAsync(values);
+						displaySuccess("Organization created.");
+						navigate(`/organizations/${values.name}`);
+					}}
+				/>
+			</RequirePermission>
 		</main>
 	);
 };
