add permissions.canUpdateOrganization to show/hide items in org navbar (#24142)

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx

@@ -175,6 +175,7 @@ const organizationAdminKeys = ["privacy", "OAuth Clients", "SSO", "directory_syn
 export interface SettingsPermissions {
   canViewRoles?: boolean;
   canViewOrganizationBilling?: boolean;
+  canUpdateOrganization?: boolean;
 }
 
 const useTabs = ({
@@ -203,10 +204,13 @@ const useTabs = ({
         };
       } else if (tab.href === "/settings/organizations") {
         const newArray = (tab?.children ?? []).filter(
-          (child) => isOrgAdminOrOwner || !organizationAdminKeys.includes(child.name)
+          (child) =>
+            permissions?.canUpdateOrganization ||
+            isOrgAdminOrOwner ||
+            !organizationAdminKeys.includes(child.name)
         );
 
-        if (isOrgAdminOrOwner) {
+        if (permissions?.canUpdateOrganization || isOrgAdminOrOwner) {
           newArray.splice(4, 0, {
             name: "attributes",
             href: "/settings/organizations/attributes",
@@ -238,7 +242,7 @@ const useTabs = ({
             });
           }
         } else {
-          if (isOrgAdminOrOwner) {
+          if (permissions?.canUpdateOrganization || isOrgAdminOrOwner) {
             newArray.push({
               name: "billing",
               href: "/settings/organizations/billing",
@@ -264,7 +268,8 @@ const useTabs = ({
         return { ...tab, children: filtered };
       } else if (tab.href === "/settings/developer") {
         const filtered = tab?.children?.filter(
-          (childTab) => isOrgAdminOrOwner || childTab.name !== "admin_api"
+          (childTab) =>
+            permissions?.canUpdateOrganization || isOrgAdminOrOwner || childTab.name !== "admin_api"
         );
         return { ...tab, children: filtered };
       }
@@ -274,12 +279,21 @@ const useTabs = ({
     // check if name is in adminRequiredKeys
     return processedTabs.filter((tab) => {
       if (organizationRequiredKeys.includes(tab.name)) return !!orgBranding;
-      if (tab.name === "other_teams" && !isOrgAdminOrOwner) return false;
+      if (tab.name === "other_teams" && !(permissions?.canUpdateOrganization || isOrgAdminOrOwner))
+        return false;
 
       if (isAdmin) return true;
       return !adminRequiredKeys.includes(tab.name);
     });
-  }, [isAdmin, orgBranding, isOrgAdminOrOwner, user, isDelegationCredentialEnabled, isPbacEnabled, permissions]);
+  }, [
+    isAdmin,
+    orgBranding,
+    isOrgAdminOrOwner,
+    user,
+    isDelegationCredentialEnabled,
+    isPbacEnabled,
+    permissions,
+  ]);
 
   return processTabsMemod;
 };
@@ -643,7 +657,7 @@ const SettingsSidebarContainer = ({
                       </div>
                     </Link>
                     <TeamListCollapsible teamFeatures={teamFeatures} />
-                    {(!orgBranding?.id || isOrgAdminOrOwner) && (
+                    {(!orgBranding?.id || permissions?.canUpdateOrganization || isOrgAdminOrOwner) && (
                       <VerticalTabItem
                         name={t("add_a_team")}
                         href={`${WEBAPP_URL}/settings/teams/new`}

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/layout.tsx

@@ -47,6 +47,7 @@ export default async function SettingsLayoutAppDir(props: SettingsLayoutProps) {
   let teamFeatures: Record<number, TeamFeatures> | null = null;
   let canViewRoles = false;
   let canViewOrganizationBilling = false;
+  let canUpdateOrganization = false;
   const orgId = session?.user?.profile?.organizationId ?? session?.user.org?.id;
 
   // For now we only grab organization features but it would be nice to fetch these on the server side for specific team feature flags
@@ -68,6 +69,7 @@ export default async function SettingsLayoutAppDir(props: SettingsLayoutProps) {
       canViewRoles = roleActions[CrudAction.Read] ?? false;
       const orgActions = PermissionMapper.toActionMap(organizationPermissions, Resource.Organization);
       canViewOrganizationBilling = orgActions[CustomAction.ManageBilling] ?? isOrgAdminOrOwner;
+      canUpdateOrganization = orgActions[CrudAction.Update] ?? isOrgAdminOrOwner;
     }
   }
 
@@ -76,7 +78,7 @@ export default async function SettingsLayoutAppDir(props: SettingsLayoutProps) {
       <SettingsLayoutAppDirClient
         {...props}
         teamFeatures={teamFeatures ?? {}}
-        permissions={{ canViewRoles, canViewOrganizationBilling }}
+        permissions={{ canViewRoles, canViewOrganizationBilling, canUpdateOrganization }}
       />
     </>
   );