Scope create group button to organizations

code-asher · code-asher · commit bc4fbac9d3af · 2024-07-30T17:25:29.000-08:00
You will only see the button if you can create a group in that org.

Now that the old site-wide group permission is unused, remove it.
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -107,3 +107,24 @@ export const organizations = () => {
     queryFn: () => API.getOrganizations(),
   };
 };
+
+/**
+ * Fetch permissions for a single organization.
+ */
+export const organizationPermissions = (organizationId: string) => {
+  return {
+    queryKey: ["organization", organizationId, "permissions"],
+    queryFn: () =>
+      API.checkAuthorization({
+        checks: {
+          createGroup: {
+            object: {
+              resource_type: "group",
+              organization_id: organizationId,
+            },
+            action: "create",
+          },
+        },
+      }),
+  };
+};
diff --git a/site/src/contexts/auth/permissions.tsx b/site/src/contexts/auth/permissions.tsx
@@ -6,7 +6,6 @@ export const checks = {
   createAnyTemplate: "createAnyTemplate",
   updateAllTemplates: "updateAllTemplates",
   viewDeploymentValues: "viewDeploymentValues",
-  createGroup: "createGroup",
   viewUpdateCheck: "viewUpdateCheck",
   viewExternalAuthConfig: "viewExternalAuthConfig",
   viewDeploymentStats: "viewDeploymentStats",
@@ -58,12 +57,6 @@ export const permissionsToCheck = {
     },
     action: "read",
   },
-  [checks.createGroup]: {
-    object: {
-      resource_type: "group",
-    },
-    action: "create",
-  },
   [checks.viewUpdateCheck]: {
     object: {
       resource_type: "deployment_config",
diff --git a/site/src/pages/GroupsPage/GroupsPage.tsx b/site/src/pages/GroupsPage/GroupsPage.tsx
@@ -3,28 +3,41 @@ import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { getErrorMessage } from "api/errors";
 import { groups } from "api/queries/groups";
+import { organizationPermissions } from "api/queries/organizations";
 import { displayError } from "components/GlobalSnackbar/utils";
-import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { Loader } from "components/Loader/Loader";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { pageTitle } from "utils/page";
 import GroupsPageView from "./GroupsPageView";
 
 export const GroupsPage: FC = () => {
-  const { permissions } = useAuthenticated();
   const { organizationId } = useDashboard();
-  const { createGroup: canCreateGroup } = permissions;
   const { template_rbac: isTemplateRBACEnabled } = useFeatureVisibility();
   const groupsQuery = useQuery(groups(organizationId));
+  const permissionsQuery = useQuery(organizationPermissions(organizationId));
 
   useEffect(() => {
     if (groupsQuery.error) {
       displayError(
-        getErrorMessage(groupsQuery.error, "Error on loading groups."),
+        getErrorMessage(groupsQuery.error, "Unable to load groups."),
       );
     }
   }, [groupsQuery.error]);
 
+  useEffect(() => {
+    if (permissionsQuery.error) {
+      displayError(
+        getErrorMessage(permissionsQuery.error, "Unable to load permissions."),
+      );
+    }
+  }, [permissionsQuery.error]);
+
+  const permissions = permissionsQuery.data
+  if (!permissions) {
+    return <Loader />;
+  }
+
   return (
     <>
       <Helmet>
@@ -33,7 +46,7 @@ export const GroupsPage: FC = () => {
 
       <GroupsPageView
         groups={groupsQuery.data}
-        canCreateGroup={canCreateGroup}
+        canCreateGroup={permissions.createGroup}
         isTemplateRBACEnabled={isTemplateRBACEnabled}
       />
     </>
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx
@@ -11,40 +11,69 @@ import {
 } from "react-router-dom";
 import { getErrorMessage } from "api/errors";
 import { groups } from "api/queries/groups";
+import { organizationPermissions } from "api/queries/organizations";
 import type { Organization } from "api/typesGenerated";
+import { EmptyState } from "components/EmptyState/EmptyState";
 import { displayError } from "components/GlobalSnackbar/utils";
+import { Loader } from "components/Loader/Loader";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { useAuthenticated } from "contexts/auth/RequireAuth";
-import { useDashboard } from "modules/dashboard/useDashboard";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { pageTitle } from "utils/page";
 import { useOrganizationSettings } from "../ManagementSettingsLayout";
 import GroupsPageView from "./GroupsPageView";
 
 export const GroupsPage: FC = () => {
-  const { permissions } = useAuthenticated();
-  const { createGroup: canCreateGroup } = permissions;
   const feats = useFeatureVisibility();
-  const { experiments } = useDashboard();
   const location = useLocation();
-  const { organization = "default" } = useParams() as { organization: string };
-  const groupsQuery = useQuery(groups(organization));
+  const { organization: organizationName } = useParams() as {
+    organization: string;
+  };
+  const groupsQuery = useQuery(
+    organizationName
+      ? groups(organizationName)
+      : { enabled: false },
+  );
   const { organizations } = useOrganizationSettings();
+  // TODO: If we could query permissions based on the name then we would not
+  //       have to cascade off the organizations query.
+  const organization = organizations?.find((o) => o.name === organizationName);
+  const permissionsQuery = useQuery(
+    organization
+      ? organizationPermissions(organization.id)
+      : { enabled: false },
+  );
 
   useEffect(() => {
     if (groupsQuery.error) {
       displayError(
-        getErrorMessage(groupsQuery.error, "Error on loading groups."),
+        getErrorMessage(groupsQuery.error, "Unable to load groups."),
       );
     }
   }, [groupsQuery.error]);
 
-  const canViewOrganizations =
-    feats.multiple_organizations && experiments.includes("multi-organization");
-  if (canViewOrganizations && location.pathname === "/deployment/groups") {
-    const defaultName =
-      getOrganizationNameByDefault(organizations) ?? "default";
-    return <Navigate to={`/organizations/${defaultName}/groups`} replace />;
+  useEffect(() => {
+    if (permissionsQuery.error) {
+      displayError(
+        getErrorMessage(permissionsQuery.error, "Unable to load permissions."),
+      );
+    }
+  }, [permissionsQuery.error]);
+
+  if (!organizations) {
+    return <Loader />;
+  }
+
+  if (!organizationName) {
+    const defaultName = getOrganizationNameByDefault(organizations);
+    if (defaultName) {
+      return <Navigate to={`/organizations/${defaultName}/groups`} replace />;
+    }
+    return <EmptyState message="No default organization found" />;
+  }
+
+  const permissions = permissionsQuery.data
+  if (!permissions) {
+    return <Loader />;
   }
 
   return (
@@ -56,7 +85,7 @@ export const GroupsPage: FC = () => {
       <PageHeader
         actions={
           <>
-            {canCreateGroup && feats.template_rbac && (
+            {permissions.createGroup && feats.template_rbac && (
               <Button
                 component={RouterLink}
                 startIcon={<GroupAdd />}
@@ -73,7 +102,7 @@ export const GroupsPage: FC = () => {
 
       <GroupsPageView
         groups={groupsQuery.data}
-        canCreateGroup={canCreateGroup}
+        canCreateGroup={permissions.createGroup}
         isTemplateRBACEnabled={feats.template_rbac}
       />
     </>
diff --git a/site/src/pages/UsersPage/UsersLayout.tsx b/site/src/pages/UsersPage/UsersLayout.tsx
@@ -2,12 +2,14 @@ import GroupAdd from "@mui/icons-material/GroupAddOutlined";
 import PersonAdd from "@mui/icons-material/PersonAddOutlined";
 import Button from "@mui/material/Button";
 import { type FC, Suspense } from "react";
+import { useQuery } from "react-query";
 import {
   Link as RouterLink,
   Outlet,
   useNavigate,
   useLocation,
 } from "react-router-dom";
+import { organizationPermissions } from "api/queries/organizations";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
@@ -19,13 +21,12 @@ import { USERS_LINK } from "modules/navigation";
 
 export const UsersLayout: FC = () => {
   const { permissions } = useAuthenticated();
-  const { experiments } = useDashboard();
-  const { createUser: canCreateUser, createGroup: canCreateGroup } =
-    permissions;
+  const { experiments, organizationId } = useDashboard();
   const navigate = useNavigate();
   const feats = useFeatureVisibility();
   const location = useLocation();
   const activeTab = location.pathname.endsWith("groups") ? "groups" : "users";
+  const permissionsQuery = useQuery(organizationPermissions(organizationId));
 
   const canViewOrganizations =
     feats.multiple_organizations && experiments.includes("multi-organization");
@@ -36,7 +37,7 @@ export const UsersLayout: FC = () => {
         <PageHeader
           actions={
             <>
-              {canCreateUser && (
+              {permissions.createUser && (
                 <Button
                   onClick={() => {
                     navigate("/users/create");
@@ -46,7 +47,7 @@ export const UsersLayout: FC = () => {
                   Create user
                 </Button>
               )}
-              {canCreateGroup && feats.template_rbac && (
+              {permissionsQuery.data?.createGroup && feats.template_rbac && (
                 <Button
                   component={RouterLink}
                   startIcon={<GroupAdd />}
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -2472,7 +2472,6 @@ export const MockTemplateExample2: TypesGen.TemplateExample = {
 };
 
 export const MockPermissions: Permissions = {
-  createGroup: true,
   createAnyTemplate: true,
   createUser: true,
   updateAllTemplates: true,
