Show ineditable form without org edit perm

code-asher · code-asher · commit 5a547fca0f33 · 2024-08-05T17:37:50.000-08:00
I think the "you do not have permission to edit" message might make it
sound like you can do nothing at all with the org, but it might be that
you can edit members and groups, just not the org settings.

So, instead, show the org settings but disable the form if you cannot
edit.  Probably there is still a better design but maybe this is OK for
now.
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
@@ -57,19 +57,12 @@ const OrganizationSettingsPage: FC = () => {
     return <Loader />;
   }
 
-  // When someone views the top-level org URL (/organizations/my-org) they might
-  // not have edit permissions.
-  if (!permissions.editOrganization) {
-    return (
-      <EmptyState message="You do not have permission to edit this organization." />
-    );
-  }
-
   const error =
     updateOrganizationMutation.error ?? deleteOrganizationMutation.error;
 
   return (
     <OrganizationSettingsPageView
+      canEdit={permissions.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,6 +10,7 @@ const meta: Meta<typeof OrganizationSettingsPageView> = {
   component: OrganizationSettingsPageView,
   args: {
     organization: MockOrganization,
+    canEdit: true,
   },
 };
 
@@ -23,3 +24,9 @@ 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,11 +44,12 @@ interface OrganizationSettingsPageViewProps {
   error: unknown;
   onSubmit: (values: UpdateOrganizationRequest) => Promise<void>;
   onDeleteOrganization: () => void;
+  canEdit: boolean;
 }
 
 export const OrganizationSettingsPageView: FC<
   OrganizationSettingsPageViewProps
-> = ({ organization, error, onSubmit, onDeleteOrganization }) => {
+> = ({ organization, error, onSubmit, onDeleteOrganization, canEdit }) => {
   const form = useFormik<UpdateOrganizationRequest>({
     initialValues: {
       name: organization.name,
@@ -82,10 +83,10 @@ export const OrganizationSettingsPageView: FC<
       >
         <FormSection
           title="Info"
-          description="Change the name or description of the organization."
+          description="The name and description of the organization."
         >
           <fieldset
-            disabled={form.isSubmitting}
+            disabled={form.isSubmitting || !canEdit}
             css={{ border: "unset", padding: 0, margin: 0, width: "100%" }}
           >
             <FormFields>
@@ -117,10 +118,10 @@ export const OrganizationSettingsPageView: FC<
             </FormFields>
           </fieldset>
         </FormSection>
-        <FormFooter isLoading={form.isSubmitting} />
+        {canEdit && <FormFooter isLoading={form.isSubmitting} />}
       </HorizontalForm>
 
-      {!organization.is_default && (
+      {canEdit && !organization.is_default && (
         <HorizontalContainer css={{ marginTop: 48 }}>
           <HorizontalSection
             title="Settings"
