coder · code-asher · Aug 9, 2024 · Aug 6, 2024 · Aug 6, 2024 · Aug 7, 2024
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -1,6 +1,7 @@
 import type { QueryClient } from "react-query";
 import { API } from "api/api";
 import type {
+  AuthorizationResponse,
   CreateOrganizationRequest,
   UpdateOrganizationRequest,
 } from "api/typesGenerated";
@@ -133,15 +134,15 @@ export const organizationPermissions = (organizationId: string | undefined) => {
   return {
     queryKey: ["organization", organizationId, "permissions"],
     queryFn: () =>
+      // Only request what we use on individual org settings, members, and group
+      // pages, which at the moment is whether you can edit the members or roles
+      // on the members page and whether you can see the create group button on
+      // the groups page.  The edit organization check for the settings page is
+      // covered by the multi-org query at the moment, and the edit group check
+      // on the group page is done on the group itself, not the org, so neither
+      // show up here.
       API.checkAuthorization({
         checks: {
-          viewMembers: {
-            object: {
-              resource_type: "organization_member",
-              organization_id: organizationId,
-            },
-            action: "read",
-          },
           editMembers: {
             object: {
               resource_type: "organization_member",
@@ -156,27 +157,6 @@ export const organizationPermissions = (organizationId: string | undefined) => {
             },
             action: "create",
           },
-          viewGroups: {
-            object: {
-              resource_type: "group",
-              organization_id: organizationId,
-            },
-            action: "read",
-          },
-          editOrganization: {
-            object: {
-              resource_type: "organization",
-              organization_id: organizationId,
-            },
-            action: "update",
-          },
-          auditOrganization: {
-            object: {
-              resource_type: "audit_log",
-              organization_id: organizationId,
-            },
-            action: "read",
-          },
           assignOrgRole: {
             object: {
               resource_type: "assign_org_role",
@@ -188,3 +168,93 @@ export const organizationPermissions = (organizationId: string | undefined) => {
       }),
   };
 };
+
+/**
+ * Fetch permissions for all provided organizations.
+ *
+ * If organizations are undefined, return a disabled query.
+ */
+export const organizationsPermissions = (
+  organizationIds: string[] | undefined,
+) => {
+  if (!organizationIds) {
+    return { enabled: false };
+  }
+
+  return {
+    queryKey: ["organizations", organizationIds.sort(), "permissions"],
+    queryFn: async () => {
+      // Only request what we need for the sidebar, which is one edit permission
+      // per sub-link (audit, settings, groups, roles, and members pages) that
+      // tells us whether to show that page, since we only show them if you can
+      // edit (and not, at the moment if you can only view).
+      const checks = (organizationId: string) => ({
+        editMembers: {
+          object: {
+            resource_type: "organization_member",
+            organization_id: organizationId,
+          },
+          action: "update",
+        },
+        editGroups: {
+          object: {
+            resource_type: "group",
+            organization_id: organizationId,
+          },
+          action: "update",
+        },
+        editOrganization: {
+          object: {
+            resource_type: "organization",
+            organization_id: organizationId,
+          },
+          action: "update",
+        },
+        auditOrganization: {
+          object: {
+            resource_type: "audit_log",
+            organization_id: organizationId,
+          },
+          action: "read",
+        },
+        assignOrgRole: {
+          object: {
+            resource_type: "assign_org_role",
+            organization_id: organizationId,
+          },
+          action: "create",
+        },
+      });
+
+      // The endpoint takes a flat array, so to avoid collisions prepend each
+      // check with the org ID (the key can be anything we want).
+      const prefixedChecks = organizationIds
+        .map((orgId) =>
+          Object.entries(checks(orgId)).map(([key, val]) => [
+            `${orgId}.${key}`,
+            val,
+          ]),
+        )
+        .flat();
+
+      const response = await API.checkAuthorization({
+        checks: Object.fromEntries(prefixedChecks),
+      });
+
+      // Now we can unflatten by parsing out the org ID from each check.
+      return Object.entries(response).reduce(
+        (acc, [key, value]) => {
+          const index = key.indexOf(".");
+          const orgId = key.substring(0, index);
+          const perm = key.substring(index + 1);
+          if (!acc[orgId]) {
+            acc[orgId] = {};
+          }
+          acc[orgId][perm] = value;
+          return acc;
+        },
+        {} as Record<string, AuthorizationResponse>,
+      );
+    },
+  };
+};
diff --git a/site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx b/site/src/pages/ManagementSettingsPage/ManagementSettingsLayout.tsx
@@ -2,7 +2,7 @@ import { type FC, Suspense } from "react";
 import { useQuery } from "react-query";
 import { Outlet } from "react-router-dom";
 import { deploymentConfig } from "api/queries/deployment";
-import type { Organization } from "api/typesGenerated";
+import type { AuthorizationResponse, Organization } from "api/typesGenerated";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { Stack } from "components/Stack/Stack";
@@ -21,6 +21,20 @@ export const useOrganizationSettings = (): OrganizationSettingsValue => {
   return { organizations };
 };
 
+/**
+ * Return true if the user can edit the organization settings or its members.
+ */
+export const canEditOrganization = (
+  permissions: AuthorizationResponse | undefined,
+) => {
+  return (
+    permissions !== undefined &&
+    (permissions.editOrganization ||
+      permissions.editMembers ||
+      permissions.editGroups)
+  );
+};
+
 /**
  * A multi-org capable settings page layout.
  *

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.test.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.test.tsx
@@ -28,7 +28,6 @@ beforeEach(() => {
     http.post("/api/v2/authcheck", async () => {
       return HttpResponse.json({
         editMembers: true,
-        viewMembers: true,
         viewDeploymentValues: true,
       });
     }),

diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.test.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.test.tsx
@@ -0,0 +1,119 @@
+import { screen, within } from "@testing-library/react";
+import { HttpResponse, http } from "msw";
+import {
+  MockDefaultOrganization,
+  MockOrganization2,
+} from "testHelpers/entities";
+import {
+  renderWithManagementSettingsLayout,
+  waitForLoaderToBeRemoved,
+} from "testHelpers/renderHelpers";
+import { server } from "testHelpers/server";
+import OrganizationSettingsPage from "./OrganizationSettingsPage";
+
+jest.spyOn(console, "error").mockImplementation(() => {});
+
+const renderRootPage = async () => {
+  renderWithManagementSettingsLayout(<OrganizationSettingsPage />, {
+    route: "/organizations",
+    path: "/organizations/:organization?",
+  });
+  await waitForLoaderToBeRemoved();
+};
+
+const renderPage = async (orgName: string) => {
+  renderWithManagementSettingsLayout(<OrganizationSettingsPage />, {
+    route: `/organizations/${orgName}`,
+    path: "/organizations/:organization",
+  });
+  await waitForLoaderToBeRemoved();
+};
+
+describe("OrganizationSettingsPage", () => {
+  it("has no organizations", async () => {
+    server.use(
+      http.get("/api/v2/organizations", () => {
+        return HttpResponse.json([]);
+      }),
+      http.post("/api/v2/authcheck", async () => {
+        return HttpResponse.json({
+          [`${MockDefaultOrganization.id}.editOrganization`]: true,
+          viewDeploymentValues: true,
+        });
+      }),
+    );
+    await renderRootPage();
+    await screen.findByText("No organizations found");
+  });
+
+  it("has no editable organizations", async () => {
+    server.use(
+      http.get("/api/v2/organizations", () => {
+        return HttpResponse.json([MockDefaultOrganization, MockOrganization2]);
+      }),
+      http.post("/api/v2/authcheck", async () => {
+        return HttpResponse.json({
+          viewDeploymentValues: true,
+        });
+      }),
+    );
+    await renderRootPage();
+    await screen.findByText("No organizations found");
+  });
+
+  it("redirects to default organization", async () => {
+    server.use(
+      http.get("/api/v2/organizations", () => {
+        // Default always preferred regardless of order.
+        return HttpResponse.json([MockOrganization2, MockDefaultOrganization]);
+      }),
+      http.post("/api/v2/authcheck", async () => {
+        return HttpResponse.json({
+          [`${MockDefaultOrganization.id}.editOrganization`]: true,
+          [`${MockOrganization2.id}.editOrganization`]: true,
+          viewDeploymentValues: true,
+        });
+      }),
+    );
+    await renderRootPage();
+    const form = screen.getByTestId("org-settings-form");
+    expect(within(form).getByRole("textbox", { name: "Name" })).toHaveValue(
+      MockDefaultOrganization.name,
+    );
+  });
+
+  it("redirects to non-default organization", async () => {
+    server.use(
+      http.get("/api/v2/organizations", () => {
+        return HttpResponse.json([MockDefaultOrganization, MockOrganization2]);
+      }),
+      http.post("/api/v2/authcheck", async () => {
+        return HttpResponse.json({
+          [`${MockOrganization2.id}.editOrganization`]: true,
+          viewDeploymentValues: true,
+        });
+      }),
+    );
+    await renderRootPage();
+    const form = screen.getByTestId("org-settings-form");
+    expect(within(form).getByRole("textbox", { name: "Name" })).toHaveValue(
+      MockOrganization2.name,
+    );
+  });
+
+  it("cannot find organization", async () => {
+    server.use(
+      http.get("/api/v2/organizations", () => {
+        return HttpResponse.json([MockDefaultOrganization, MockOrganization2]);
+      }),
+      http.post("/api/v2/authcheck", async () => {
+        return HttpResponse.json({
+          [`${MockOrganization2.id}.editOrganization`]: true,
+          viewDeploymentValues: true,
+        });
+      }),
+    );
+    await renderPage("the-endless-void");
+    await screen.findByText("Organization not found");
+  });
+});
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
@@ -4,13 +4,16 @@ import { Navigate, useNavigate, useParams } from "react-router-dom";
 import {
   updateOrganization,
   deleteOrganization,
-  organizationPermissions,
+  organizationsPermissions,
 } from "api/queries/organizations";
 import type { Organization } from "api/typesGenerated";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
-import { useOrganizationSettings } from "./ManagementSettingsLayout";
+import {
+  canEditOrganization,
+  useOrganizationSettings,
+} from "./ManagementSettingsLayout";
 import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView";
 
 const OrganizationSettingsPage: FC = () => {
@@ -32,37 +35,42 @@ const OrganizationSettingsPage: FC = () => {
     organizations && organizationName
       ? getOrganizationByName(organizations, organizationName)
       : undefined;
-  const permissionsQuery = useQuery(organizationPermissions(organization?.id));
+  const permissionsQuery = useQuery(
+    organizationsPermissions(organizations?.map((o) => o.id)),
+  );
 
-  if (!organizations) {
+  const permissions = permissionsQuery.data;
+  if (!organizations || !permissions) {
     return <Loader />;
   }
 
-  // Redirect /organizations => /organizations/default-org
+  // Redirect /organizations => /organizations/default-org, or if they cannot edit
+  // the default org, then the first org they can edit, if any.
   if (!organizationName) {
-    const defaultOrg = getOrganizationByDefault(organizations);
-    if (defaultOrg) {
-      return <Navigate to={`/organizations/${defaultOrg.name}`} replace />;
+    const editableOrg = organizations
+      .sort((a, b) => {
+        // Prefer default org (it may not be first).
+        // JavaScript will happily subtract booleans, but use numbers to keep
+        // the compiler happy.
+        return (b.is_default ? 1 : 0) - (a.is_default ? 1 : 0);
+      })
+      .find((org) => canEditOrganization(permissions[org.id]));
+    if (editableOrg) {
+      return <Navigate to={`/organizations/${editableOrg.name}`} replace />;
     }
-    // We expect there to always be a default organization.
-    throw new Error("No default organization found");
+    return <EmptyState message="No organizations found" />;
   }
 
   if (!organization) {
     return <EmptyState message="Organization not found" />;
   }
 
-  const permissions = permissionsQuery.data;
-  if (!permissions) {
-    return <Loader />;
-  }
-
   const error =
     updateOrganizationMutation.error ?? deleteOrganizationMutation.error;
 
   return (
     <OrganizationSettingsPageView
-      canEdit={permissions.editOrganization}
+      canEdit={permissions[organization.id]?.editOrganization ?? false}
       organization={organization}
       error={error}
       onSubmit={async (values) => {
@@ -85,8 +93,5 @@ const OrganizationSettingsPage: FC = () => {
 
 export default OrganizationSettingsPage;
 
-const getOrganizationByDefault = (organizations: Organization[]) =>
-  organizations.find((org) => org.is_default);
-
 const getOrganizationByName = (organizations: Organization[], name: string) =>
   organizations.find((org) => org.name === name);