diff --git a/apps/web/app/(use-page-wrapper)/layout.tsx b/apps/web/app/(use-page-wrapper)/layout.tsx index 878635c237..cecdb5b371 100644 --- a/apps/web/app/(use-page-wrapper)/layout.tsx +++ b/apps/web/app/(use-page-wrapper)/layout.tsx @@ -1,6 +1,8 @@ import { headers } from "next/headers"; import Script from "next/script"; +import { NavigationPermissionsProvider } from "@calcom/features/shell/permissions/NavigationPermissionsProvider"; + import PageWrapper from "@components/PageWrapperAppDir"; export default async function PageWrapperLayout({ children }: { children: React.ReactNode }) { @@ -21,7 +23,7 @@ export default async function PageWrapperLayout({ children }: { children: React. ].filter((script): script is { id: string; script: string } => !!script.script); return ( - <> + {children} {scripts.map((script) => ( @@ -36,6 +38,6 @@ export default async function PageWrapperLayout({ children }: { children: React. /> ))} - + ); } diff --git a/packages/features/shell/navigation/NavigationItem.tsx b/packages/features/shell/navigation/NavigationItem.tsx index 7b59c7ed0f..72affdd75b 100644 --- a/packages/features/shell/navigation/NavigationItem.tsx +++ b/packages/features/shell/navigation/NavigationItem.tsx @@ -4,6 +4,7 @@ import React, { Fragment, useState, useEffect } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import useMediaQuery from "@calcom/lib/hooks/useMediaQuery"; +import { sessionStorage } from "@calcom/lib/webstorage"; import classNames from "@calcom/ui/classNames"; import { Badge } from "@calcom/ui/components/badge"; import { Icon } from "@calcom/ui/components/icon"; diff --git a/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts b/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts index ffba4b37c8..75ed5ee181 100644 --- a/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts +++ b/packages/features/shell/navigation/useShouldDisplayNavigationItem.ts @@ -1,10 +1,27 @@ import { useFlagMap } from "@calcom/features/flags/context/provider"; import { isKeyInObject } from "@calcom/lib/isKeyInObject"; +import { + useNavigationPermissions, + type NavigationItemName, +} from "../permissions/NavigationPermissionsProvider"; import type { NavigationItemType } from "./NavigationItem"; export function useShouldDisplayNavigationItem(item: NavigationItemType) { const flags = useFlagMap(); - if (isKeyInObject(item.name, flags)) return flags[item.name]; + const { permissions: navigationPermissions, isLoading } = useNavigationPermissions(); + + if (isKeyInObject(item.name, flags) && flags[item.name] === false) { + return false; + } + + if (isLoading) { + return true; + } + + if (item.name in navigationPermissions) { + return navigationPermissions[item.name as NavigationItemName]; + } + return true; } diff --git a/packages/features/shell/permissions/NavigationPermissionsProvider.tsx b/packages/features/shell/permissions/NavigationPermissionsProvider.tsx new file mode 100644 index 0000000000..d452fc8fcf --- /dev/null +++ b/packages/features/shell/permissions/NavigationPermissionsProvider.tsx @@ -0,0 +1,65 @@ +"use client"; + +import React, { createContext, useContext } from "react"; + +import { trpc } from "@calcom/trpc/react"; + +import type { NavigationItemName, NavigationPermissions } from "./types"; +import { DEFAULT_PERMISSIONS } from "./types"; + +export type { NavigationItemName, NavigationPermissions }; + +/** + * Context for navigation permissions + */ +const NavigationPermissionsContext = createContext<{ + permissions: NavigationPermissions; + isLoading: boolean; +} | null>(null); + +/** + * Hook to access navigation permissions from context + * @returns NavigationPermissions object with boolean flags for each navigation item + */ +export function useNavigationPermissions(): { permissions: NavigationPermissions; isLoading: boolean } { + const context = useContext(NavigationPermissionsContext); + if (context === null) { + return { + permissions: DEFAULT_PERMISSIONS, + isLoading: false, + }; + } + return context; +} + +/** + * Hook to check if a specific navigation item should be displayed + * @param itemName The navigation item name to check + * @returns boolean indicating if the item should be displayed + */ +export function useNavigationPermission(itemName: NavigationItemName): boolean { + const { permissions } = useNavigationPermissions(); + return permissions[itemName]; +} + +/** + * Provider component for navigation permissions + * Fetches permissions client-side using tRPC + */ +export function NavigationPermissionsProvider({ children }: { children: React.ReactNode }) { + const { data: permissions, isLoading } = trpc.viewer.pbac.getNavigationPermissions.useQuery(undefined, { + staleTime: 5 * 60 * 1000, + refetchOnWindowFocus: false, + }); + + const contextValue = { + permissions: permissions || DEFAULT_PERMISSIONS, + isLoading, + }; + + return ( + + {children} + + ); +} diff --git a/packages/features/shell/permissions/types.ts b/packages/features/shell/permissions/types.ts new file mode 100644 index 0000000000..a24ea8dec8 --- /dev/null +++ b/packages/features/shell/permissions/types.ts @@ -0,0 +1,19 @@ +/** + * Navigation permission mapping for menu items + */ +export const NAVIGATION_PERMISSION_MAP = { + members: "organization.listMembers", + teams: "team.read", + insights: "insights.read", +} as const; + +export const DEFAULT_PERMISSIONS = Object.fromEntries( + Object.keys(NAVIGATION_PERMISSION_MAP).map((key) => [key, true]) +) as NavigationPermissions; + +export type NavigationItemName = keyof typeof NAVIGATION_PERMISSION_MAP; + +/** + * Navigation permissions object containing boolean flags for each navigation item + */ +export type NavigationPermissions = Record; diff --git a/packages/lib/server/repository/membership.ts b/packages/lib/server/repository/membership.ts index 6063f14136..9850ddccb1 100644 --- a/packages/lib/server/repository/membership.ts +++ b/packages/lib/server/repository/membership.ts @@ -1,7 +1,7 @@ import { availabilityUserSelect, prisma, type PrismaTransaction } from "@calcom/prisma"; -import { MembershipRole } from "@calcom/prisma/enums"; import type { Prisma, Membership, PrismaClient } from "@calcom/prisma/client"; +import { MembershipRole } from "@calcom/prisma/enums"; import { credentialForCalendarServiceSelect } from "@calcom/prisma/selects/credential"; import logger from "../../logger"; diff --git a/packages/lib/webstorage.ts b/packages/lib/webstorage.ts index c703bfda05..9522799179 100644 --- a/packages/lib/webstorage.ts +++ b/packages/lib/webstorage.ts @@ -34,3 +34,35 @@ export const localStorage = { } }, }; + +export const sessionStorage = { + getItem(key: string) { + try { + // eslint-disable-next-line @calcom/eslint/avoid-web-storage + return window.sessionStorage.getItem(key); + } catch (e) { + // In case storage is restricted. Possible reasons + // 1. Third Party Context in Chrome Incognito mode. + return null; + } + }, + setItem(key: string, value: string) { + try { + // eslint-disable-next-line @calcom/eslint/avoid-web-storage + window.sessionStorage.setItem(key, value); + } catch (e) { + // In case storage is restricted. Possible reasons + // 1. Third Party Context in Chrome Incognito mode. + // 2. Storage limit reached + return; + } + }, + removeItem: (key: string) => { + try { + // eslint-disable-next-line @calcom/eslint/avoid-web-storage + window.sessionStorage.removeItem(key); + } catch (e) { + return; + } + }, +}; diff --git a/packages/trpc/server/routers/viewer/pbac/_router.tsx b/packages/trpc/server/routers/viewer/pbac/_router.tsx index c3c07b8e09..b314d39263 100644 --- a/packages/trpc/server/routers/viewer/pbac/_router.tsx +++ b/packages/trpc/server/routers/viewer/pbac/_router.tsx @@ -5,6 +5,12 @@ import { isValidPermissionString } from "@calcom/features/pbac/domain/types/perm import type { PermissionString } from "@calcom/features/pbac/domain/types/permission-registry"; import { PermissionCheckService } from "@calcom/features/pbac/services/permission-check.service"; import { RoleService } from "@calcom/features/pbac/services/role.service"; +import { + NAVIGATION_PERMISSION_MAP, + DEFAULT_PERMISSIONS, + type NavigationItemName, +} from "@calcom/features/shell/permissions/types"; +import { MembershipRepository } from "@calcom/lib/server/repository/membership"; import prisma from "@calcom/prisma"; import { RoleType, MembershipRole } from "@calcom/prisma/enums"; @@ -33,6 +39,30 @@ export const permissionsRouter = router({ return await permissionCheckService.getUserPermissions(ctx.user.id); }), + getNavigationPermissions: authedProcedure.query(async ({ ctx }) => { + if (!ctx.user?.id) { + return DEFAULT_PERMISSIONS; + } + + const teamIds = await MembershipRepository.findUserTeamIds({ userId: ctx.user.id }); + if (teamIds.length === 0) { + return DEFAULT_PERMISSIONS; + } + + const permissionService = new PermissionCheckService(); + const navigationItems = Object.keys(NAVIGATION_PERMISSION_MAP) as Array; + + const permissionChecks = await Promise.all( + navigationItems.map((itemName) => + permissionService.getTeamIdsWithPermission(ctx.user.id, NAVIGATION_PERMISSION_MAP[itemName]) + ) + ); + + return Object.fromEntries( + navigationItems.map((itemName, index) => [itemName, permissionChecks[index].length > 0]) + ) as Record; + }), + checkPermission: authedProcedure .input( z.object({