feat: show summary if unable to edit org

code-asher · code-asher · commit ae276c4441e4 · 2024-08-07T14:08:03.000-08:00
This can happen if you can edit the members, for example, but not the
organization settings.  In this case you will see a new summary page
instead of the edit form.
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.test.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.test.tsx
@@ -122,4 +122,20 @@ describe("OrganizationSettingsPage", () => {
     await renderPage("the-endless-void");
     await screen.findByText("Organization not found");
   });
+
+  it("cannot edit organization", async () => {
+    server.use(
+      http.get("/api/v2/organizations", () => {
+        return HttpResponse.json([MockDefaultOrganization]);
+      }),
+      http.post("/api/v2/authcheck", async () => {
+        return HttpResponse.json({
+          viewDeploymentValues: true,
+        });
+      }),
+    );
+    // No form since they cannot edit, instead sees the summary view.
+    await renderPage(MockDefaultOrganization.name);
+    await screen.findByText(MockDefaultOrganization.display_name);
+  });
 });
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
@@ -15,6 +15,7 @@ import {
   useOrganizationSettings,
 } from "./ManagementSettingsLayout";
 import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView";
+import { OrganizationSummaryPageView } from "./OrganizationSummaryPageView";
 
 const OrganizationSettingsPage: FC = () => {
   const { organization: organizationName } = useParams() as {
@@ -66,12 +67,18 @@ const OrganizationSettingsPage: FC = () => {
     return <EmptyState message="Organization not found" />;
   }
 
+  // The user may not be able to edit this org but they can still see it because
+  // they can edit members, etc.  In this case they will be shown a read-only
+  // summary page instead of the settings form.
+  if (!permissions[organization.id]?.editOrganization) {
+    return <OrganizationSummaryPageView organization={organization} />;
+  }
+
   const error =
     updateOrganizationMutation.error ?? deleteOrganizationMutation.error;
 
   return (
     <OrganizationSettingsPageView
-      canEdit={permissions[organization.id].editOrganization}
       organization={organization}
       error={error}
       onSubmit={async (values) => {
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.stories.tsx
@@ -10,7 +10,6 @@ const meta: Meta<typeof OrganizationSettingsPageView> = {
   component: OrganizationSettingsPageView,
   args: {
     organization: MockOrganization,
-    canEdit: true,
   },
 };
 
@@ -24,9 +23,3 @@ export const DefaultOrg: Story = {
     organization: MockDefaultOrganization,
   },
 };
-
-export const CannotEdit: Story = {
-  args: {
-    canEdit: false,
-  },
-};
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPageView.tsx
@@ -44,12 +44,11 @@ interface OrganizationSettingsPageViewProps {
   error: unknown;
   onSubmit: (values: UpdateOrganizationRequest) => Promise<void>;
   onDeleteOrganization: () => void;
-  canEdit: boolean;
 }
 
 export const OrganizationSettingsPageView: FC<
   OrganizationSettingsPageViewProps
-> = ({ organization, error, onSubmit, onDeleteOrganization, canEdit }) => {
+> = ({ organization, error, onSubmit, onDeleteOrganization }) => {
   const form = useFormik<UpdateOrganizationRequest>({
     initialValues: {
       name: organization.name,
@@ -87,7 +86,7 @@ export const OrganizationSettingsPageView: FC<
           description="The name and description of the organization."
         >
           <fieldset
-            disabled={form.isSubmitting || !canEdit}
+            disabled={form.isSubmitting}
             css={{ border: "unset", padding: 0, margin: 0, width: "100%" }}
           >
             <FormFields>
@@ -119,10 +118,10 @@ export const OrganizationSettingsPageView: FC<
             </FormFields>
           </fieldset>
         </FormSection>
-        {canEdit && <FormFooter isLoading={form.isSubmitting} />}
+        <FormFooter isLoading={form.isSubmitting} />
       </HorizontalForm>
 
-      {canEdit && !organization.is_default && (
+      {!organization.is_default && (
         <HorizontalContainer css={{ marginTop: 48 }}>
           <HorizontalSection
             title="Settings"
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.stories.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.stories.tsx
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  MockDefaultOrganization,
+  MockOrganization,
+} from "testHelpers/entities";
+import { OrganizationSummaryPageView } from "./OrganizationSummaryPageView";
+
+const meta: Meta<typeof OrganizationSummaryPageView> = {
+  title: "pages/OrganizationSummaryPageView",
+  component: OrganizationSummaryPageView,
+  args: {
+    organization: MockOrganization,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof OrganizationSummaryPageView>;
+
+export const DefaultOrg: Story = {
+  args: {
+    organization: MockDefaultOrganization,
+  },
+};
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSummaryPageView.tsx
@@ -0,0 +1,50 @@
+import { type FC } from "react";
+import type { Organization } from "api/typesGenerated";
+import {
+  PageHeader,
+  PageHeaderTitle,
+  PageHeaderSubtitle,
+} from "components/PageHeader/PageHeader";
+import { Stack } from "components/Stack/Stack";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
+
+interface OrganizationSummaryPageViewProps {
+  organization: Organization;
+}
+
+export const OrganizationSummaryPageView: FC<
+  OrganizationSummaryPageViewProps
+> = (props) => {
+  return (
+    <div>
+      <PageHeader
+        css={{
+          // The deployment settings layout already has padding.
+          paddingTop: 0,
+        }}
+      >
+        <Stack direction="row" spacing={3} alignItems="center">
+          <UserAvatar
+            key={props.organization.id}
+            size="xl"
+            username={
+              props.organization.display_name || props.organization.name
+            }
+            avatarURL={props.organization.icon}
+          />
+          <div>
+            <PageHeaderTitle>
+              {props.organization.display_name || props.organization.name}
+            </PageHeaderTitle>
+            {props.organization.description && (
+              <PageHeaderSubtitle>
+                {props.organization.description}
+              </PageHeaderSubtitle>
+            )}
+          </div>
+        </Stack>
+      </PageHeader>
+      You are a member of this organization.
+    </div>
+  );
+};
