feat: PBAC on team members page + org members page to use specific permissi…

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

@@ -181,14 +181,18 @@ const organizationAdminKeys = [
   "delegation_credential",
 ];
 
+export interface SettingsPermissions {
+  canViewRoles?: boolean;
+}
+
 const useTabs = ({
   isDelegationCredentialEnabled,
   isPbacEnabled,
-  canViewRoles,
+  permissions,
 }: {
   isDelegationCredentialEnabled: boolean;
   isPbacEnabled: boolean;
-  canViewRoles?: boolean;
+  permissions?: SettingsPermissions;
 }) => {
   const session = useSession();
   const { data: user } = trpc.viewer.me.get.useQuery({ includePasswordAdded: true });
@@ -227,7 +231,7 @@ const useTabs = ({
 
         // Add pbac menu item only if feature flag is enabled AND user has permission to view roles
         // This prevents showing the menu item when user has no organization permissions
-        if (isPbacEnabled && canViewRoles) {
+        if (isPbacEnabled && permissions?.canViewRoles) {
           newArray.push({
             name: "roles_and_permissions",
             href: "/settings/organizations/roles",
@@ -294,7 +298,7 @@ interface SettingsSidebarContainerProps {
   navigationIsOpenedOnMobile?: boolean;
   bannersHeight?: number;
   teamFeatures?: Record<number, TeamFeatures>;
-  canViewRoles?: boolean;
+  permissions?: SettingsPermissions;
 }
 
 const TeamRolesNavItem = ({
@@ -487,7 +491,7 @@ const SettingsSidebarContainer = ({
   navigationIsOpenedOnMobile,
   bannersHeight,
   teamFeatures,
-  canViewRoles,
+  permissions,
 }: SettingsSidebarContainerProps) => {
   const searchParams = useCompatSearchParams();
   const orgBranding = useOrgBranding();
@@ -517,7 +521,7 @@ const SettingsSidebarContainer = ({
   const tabsWithPermissions = useTabs({
     isDelegationCredentialEnabled,
     isPbacEnabled,
-    canViewRoles,
+    permissions,
   });
 
   const { data: otherTeams } = trpc.viewer.organizations.listOtherTeams.useQuery(undefined, {
@@ -792,13 +796,13 @@ export type SettingsLayoutProps = {
   children: React.ReactNode;
   containerClassName?: string;
   teamFeatures?: Record<number, TeamFeatures>;
-  canViewRoles?: boolean;
+  permissions?: SettingsPermissions;
 } & ComponentProps<typeof Shell>;
 
 export default function SettingsLayoutAppDirClient({
   children,
   teamFeatures,
-  canViewRoles,
+  permissions,
   ...rest
 }: SettingsLayoutProps) {
   const pathname = usePathname();
@@ -833,7 +837,7 @@ export default function SettingsLayoutAppDirClient({
           sideContainerOpen={sideContainerOpen}
           setSideContainerOpen={setSideContainerOpen}
           teamFeatures={teamFeatures}
-          canViewRoles={canViewRoles}
+          permissions={permissions}
         />
       }
       drawerState={state}
@@ -856,15 +860,15 @@ type SidebarContainerElementProps = {
   bannersHeight?: number;
   setSideContainerOpen: React.Dispatch<React.SetStateAction<boolean>>;
   teamFeatures?: Record<number, TeamFeatures>;
-  canViewRoles?: boolean;
+  permissions?: SettingsPermissions;
 };
 
 const SidebarContainerElement = ({
   sideContainerOpen,
   bannersHeight,
   setSideContainerOpen,
   teamFeatures,
-  canViewRoles,
+  permissions,
 }: SidebarContainerElementProps) => {
   const { t } = useLocale();
   return (
@@ -881,7 +885,7 @@ const SidebarContainerElement = ({
         navigationIsOpenedOnMobile={sideContainerOpen}
         bannersHeight={bannersHeight}
         teamFeatures={teamFeatures}
-        canViewRoles={canViewRoles}
+        permissions={permissions}
       />
     </>
   );

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

@@ -67,7 +67,11 @@ export default async function SettingsLayoutAppDir(props: SettingsLayoutProps) {
 
   return (
     <>
-      <SettingsLayoutAppDirClient {...props} teamFeatures={teamFeatures ?? {}} canViewRoles={canViewRoles} />
+      <SettingsLayoutAppDirClient
+        {...props}
+        teamFeatures={teamFeatures ?? {}}
+        permissions={{ canViewRoles }}
+      />
     </>
   );
 }

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx

@@ -3,7 +3,11 @@
 import { useState } from "react";
 
 import type { Resource } from "@calcom/features/pbac/domain/types/permission-registry";
-import { PERMISSION_REGISTRY, CrudAction } from "@calcom/features/pbac/domain/types/permission-registry";
+import {
+  Scope,
+  CrudAction,
+  getPermissionsForScope,
+} from "@calcom/features/pbac/domain/types/permission-registry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Checkbox, Label } from "@calcom/ui/components/form";
@@ -17,6 +21,7 @@ interface AdvancedPermissionGroupProps {
   selectedPermissions: string[];
   onChange: (permissions: string[]) => void;
   disabled?: boolean;
+  scope?: Scope;
 }
 
 const INTERNAL_DATAACCESS_KEY = "_resource";
@@ -26,21 +31,31 @@ export function AdvancedPermissionGroup({
   selectedPermissions,
   onChange,
   disabled,
+  scope = Scope.Organization,
 }: AdvancedPermissionGroupProps) {
   const { t } = useLocale();
-  const { toggleSinglePermission, toggleResourcePermissionLevel } = usePermissions();
-  const resourceConfig = PERMISSION_REGISTRY[resource];
+  const { toggleSinglePermission, toggleResourcePermissionLevel } = usePermissions(scope);
+  const scopedRegistry = getPermissionsForScope(scope);
+  const resourceConfig = scopedRegistry[resource];
   const [isExpanded, setIsExpanded] = useState(false);
 
   const isAllResources = resource === "*";
+
+  // Early return if resource is not in the scoped registry (and not the special "*" resource)
+  if (!isAllResources && !resourceConfig) {
+    return null;
+  }
+
   const allResourcesSelected = selectedPermissions.includes("*.*");
 
   // Get all possible permissions for this resource
   const allPermissions = isAllResources
     ? ["*.*"]
-    : Object.entries(resourceConfig)
+    : resourceConfig
+    ? Object.entries(resourceConfig)
         .filter(([action]) => action !== INTERNAL_DATAACCESS_KEY)
-        .map(([action]) => `${resource}.${action}`);
+        .map(([action]) => `${resource}.${action}`)
+    : [];
 
   // Check if all permissions for this resource are selected
   const isAllSelected = isAllResources
@@ -99,7 +114,7 @@ export function AdvancedPermissionGroup({
           <span
             className="text-default cursor-pointer text-sm font-medium leading-none"
             onClick={() => setIsExpanded(!isExpanded)}>
-            {t(resourceConfig._resource?.i18nKey || "")}
+            {t(resourceConfig?._resource?.i18nKey || "")}
           </span>
           <span
             className="text-muted cursor-pointer text-sm font-medium leading-none"
@@ -113,56 +128,57 @@ export function AdvancedPermissionGroup({
           className="bg-default border-muted m-1 flex flex-col gap-2.5 rounded-xl border p-3"
           onClick={(e) => e.stopPropagation()} // Stop clicks in the permission list from affecting parent
         >
-          {Object.entries(resourceConfig).map(([action, actionConfig]) => {
-            const permission = `${resource}.${action}`;
-
-            if (action === INTERNAL_DATAACCESS_KEY) {
-              return null;
-            }
-
-            const isChecked = selectedPermissions.includes(permission);
-            const isReadPermission = action === CrudAction.Read;
-            const isAutoEnabled = isReadAutoEnabled(action);
-
-            return (
-              <div key={action} className="flex items-center">
-                <Checkbox
-                  id={permission}
-                  checked={isChecked}
-                  className="mr-2"
-                  onCheckedChange={(checked) => {
-                    if (!disabled) {
-                      onChange(toggleSinglePermission(permission, !!checked, selectedPermissions));
-                    }
-                  }}
-                  onClick={(e) => e.stopPropagation()} // Stop checkbox clicks from affecting parent
-                  disabled={disabled}
-                />
-                <div
-                  className="flex items-center gap-2"
-                  onClick={(e) => e.stopPropagation()} // Stop label clicks from affecting parent
-                >
-                  <Label htmlFor={permission} className="mb-0">
-                    <span className={classNames(isAutoEnabled && "text-muted-foreground")}>
-                      {t(actionConfig?.i18nKey || "")}
+          {resourceConfig &&
+            Object.entries(resourceConfig).map(([action, actionConfig]) => {
+              const permission = `${resource}.${action}`;
+
+              if (action === INTERNAL_DATAACCESS_KEY) {
+                return null;
+              }
+
+              const isChecked = selectedPermissions.includes(permission);
+              const isReadPermission = action === CrudAction.Read;
+              const isAutoEnabled = isReadAutoEnabled(action);
+
+              return (
+                <div key={action} className="flex items-center">
+                  <Checkbox
+                    id={permission}
+                    checked={isChecked}
+                    className="mr-2"
+                    onCheckedChange={(checked) => {
+                      if (!disabled) {
+                        onChange(toggleSinglePermission(permission, !!checked, selectedPermissions));
+                      }
+                    }}
+                    onClick={(e) => e.stopPropagation()} // Stop checkbox clicks from affecting parent
+                    disabled={disabled}
+                  />
+                  <div
+                    className="flex items-center gap-2"
+                    onClick={(e) => e.stopPropagation()} // Stop label clicks from affecting parent
+                  >
+                    <Label htmlFor={permission} className="mb-0">
+                      <span className={classNames(isAutoEnabled && "text-muted-foreground")}>
+                        {t(actionConfig?.i18nKey || "")}
+                      </span>
+                    </Label>
+                    <span className="text-sm text-gray-500">
+                      {t(
+                        actionConfig && "descriptionI18nKey" in actionConfig
+                          ? actionConfig.descriptionI18nKey
+                          : ""
+                      )}
                     </span>
-                  </Label>
-                  <span className="text-sm text-gray-500">
-                    {t(
-                      actionConfig && "descriptionI18nKey" in actionConfig
-                        ? actionConfig.descriptionI18nKey
-                        : ""
+                    {isAutoEnabled && (
+                      <Tooltip content={t("read_permission_auto_enabled_tooltip")}>
+                        <Icon name="info" className="text-muted-foreground h-3 w-3" />
+                      </Tooltip>
                     )}
-                  </span>
-                  {isAutoEnabled && (
-                    <Tooltip content={t("read_permission_auto_enabled_tooltip")}>
-                      <Icon name="info" className="text-muted-foreground h-3 w-3" />
-                    </Tooltip>
-                  )}
+                  </div>
                 </div>
-              </div>
-            );
-          })}{" "}
+              );
+            })}{" "}
         </div>
       )}
     </div>

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleSheet.tsx

@@ -145,10 +145,6 @@ export function RoleSheet({ role, open, onOpenChange, teamId, scope = Scope.Orga
   });
 
   const onSubmit = (values: FormValues) => {
-    // Store the color in localStorage
-    const roleKey = isEditing && role ? role.id : `new_role_${values.name}`;
-    localStorage.setItem(`role_color_${roleKey}`, values.color);
-
     if (isEditing && role) {
       updateMutation.mutate({
         teamId,
@@ -224,6 +220,7 @@ export function RoleSheet({ role, open, onOpenChange, teamId, scope = Scope.Orga
                       selectedPermissions={permissions}
                       onChange={(newPermissions) => form.setValue("permissions", newPermissions)}
                       disabled={isSystemRole}
+                      scope={scope}
                     />
                   ))}
                 </div>
@@ -247,6 +244,7 @@ export function RoleSheet({ role, open, onOpenChange, teamId, scope = Scope.Orga
                         permissions={permissions}
                         onChange={(newPermissions) => form.setValue("permissions", newPermissions)}
                         disabled={isSystemRole}
+                        scope={scope}
                       />
                     ))}
                   </div>

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/SimplePermissionItem.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { Resource } from "@calcom/features/pbac/domain/types/permission-registry";
+import type { Resource, Scope } from "@calcom/features/pbac/domain/types/permission-registry";
 import { PERMISSION_REGISTRY } from "@calcom/features/pbac/domain/types/permission-registry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { ToggleGroup } from "@calcom/ui/components/form";
@@ -13,16 +13,18 @@ interface SimplePermissionItemProps {
   permissions: string[];
   onChange: (permissions: string[]) => void;
   disabled?: boolean;
+  scope?: Scope;
 }
 
 export function SimplePermissionItem({
   resource,
   permissions,
   onChange,
   disabled,
+  scope,
 }: SimplePermissionItemProps) {
   const { t } = useLocale();
-  const { getResourcePermissionLevel, toggleResourcePermissionLevel } = usePermissions();
+  const { getResourcePermissionLevel, toggleResourcePermissionLevel } = usePermissions(scope);
 
   const isAllResources = resource === "*";
   const options = isAllResources

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/usePermissions.ts

@@ -1,5 +1,8 @@
-import { CrudAction } from "@calcom/features/pbac/domain/types/permission-registry";
-import { PERMISSION_REGISTRY } from "@calcom/features/pbac/domain/types/permission-registry";
+import { CrudAction, Scope } from "@calcom/features/pbac/domain/types/permission-registry";
+import {
+  PERMISSION_REGISTRY,
+  getPermissionsForScope,
+} from "@calcom/features/pbac/domain/types/permission-registry";
 import {
   getTransitiveDependencies,
   getTransitiveDependents,
@@ -18,10 +21,11 @@ interface UsePermissionsReturn {
   toggleSinglePermission: (permission: string, enabled: boolean, currentPermissions: string[]) => string[];
 }
 
-export function usePermissions(): UsePermissionsReturn {
+export function usePermissions(scope: Scope = Scope.Organization): UsePermissionsReturn {
   const getAllPossiblePermissions = () => {
     const permissions: string[] = [];
-    Object.entries(PERMISSION_REGISTRY).forEach(([resource, config]) => {
+    const scopedRegistry = getPermissionsForScope(scope);
+    Object.entries(scopedRegistry).forEach(([resource, config]) => {
       if (resource !== "*") {
         Object.keys(config)
           .filter((action) => !action.startsWith("_"))
@@ -34,7 +38,8 @@ export function usePermissions(): UsePermissionsReturn {
   };
 
   const hasAllPermissions = (permissions: string[]) => {
-    return Object.entries(PERMISSION_REGISTRY).every(([resource, config]) => {
+    const scopedRegistry = getPermissionsForScope(scope);
+    return Object.entries(scopedRegistry).every(([resource, config]) => {
       if (resource === "*") return true;
       return Object.keys(config)
         .filter((action) => !action.startsWith("_"))
@@ -85,7 +90,8 @@ export function usePermissions(): UsePermissionsReturn {
     } else {
       // Filter out current resource permissions
       newPermissions = newPermissions.filter((p) => !p.startsWith(`${resource}.`));
-      const resourceConfig = PERMISSION_REGISTRY[resource as keyof typeof PERMISSION_REGISTRY];
+      const scopedRegistry = getPermissionsForScope(scope);
+      const resourceConfig = scopedRegistry[resource as keyof typeof scopedRegistry];
 
       if (!resourceConfig) return currentPermissions;