refactor: replace isTeamAdminOrOwner with PBAC team.listMembers permission

apps/web/app/(use-page-wrapper)/(main-nav)/bookings/[status]/page.tsx

@@ -6,6 +6,8 @@ import { redirect } from "next/navigation";
 import { z } from "zod";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { PermissionCheckService } from "@calcom/features/pbac/services/permission-check.service";
+import { MembershipRole } from "@calcom/prisma/enums";
 
 import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
@@ -33,9 +35,30 @@ const Page = async ({ params }: PageProps) => {
   const t = await getTranslate();
   const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
 
+  let canReadOthersBookings = false;
+  if (session?.user?.id) {
+    const permissionService = new PermissionCheckService();
+    const userId = session.user.id;
+
+    const teamIdsWithPermission = await permissionService.getTeamIdsWithPermission({
+      userId,
+      permission: "booking.read",
+      fallbackRoles: [MembershipRole.OWNER, MembershipRole.ADMIN],
+    });
+    // We check if teamIdsWithPermission.length > 0.
+    // While this may not be entirely accurate, it's acceptable
+    // because we perform a thorough validation on the server side for the actual filter values.
+    // This variable is primarily for UI purposes.
+    canReadOthersBookings = teamIdsWithPermission.length > 0;
+  }
+
   return (
     <ShellMainAppDir heading={t("bookings")} subtitle={t("bookings_description")}>
-      <BookingsList status={parsed.data.status} userId={session?.user?.id} />
+      <BookingsList
+        status={parsed.data.status}
+        userId={session?.user?.id}
+        permissions={{ canReadOthersBookings }}
+      />
     </ShellMainAppDir>
   );
 };

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -57,6 +57,9 @@ const descriptionByStatus: Record<BookingListingStatus, string> = {
 type BookingsProps = {
   status: (typeof validStatuses)[number];
   userId?: number;
+  permissions: {
+    canReadOthersBookings: boolean;
+  };
 };
 
 function useSystemSegments(userId?: number) {
@@ -111,7 +114,7 @@ type RowData =
       type: "today" | "next";
     };
 
-function BookingsContent({ status }: BookingsProps) {
+function BookingsContent({ status, permissions }: BookingsProps) {
   const { t } = useLocale();
   const user = useMeQuery().data;
   const tableContainerRef = useRef<HTMLDivElement>(null);
@@ -154,7 +157,7 @@ function BookingsContent({ status }: BookingsProps) {
       href: queryString ? `${tabConfig.path}?${queryString}` : tabConfig.path,
       "data-testid": tabConfig["data-testid"],
     }));
-  }, [searchParams?.toString()]);
+  }, [searchParams]);
 
   const eventTypeIds = useFilterValue("eventTypeId", ZMultiSelectFilterValue)?.data as number[] | undefined;
   const teamIds = useFilterValue("teamId", ZMultiSelectFilterValue)?.data as number[] | undefined;
@@ -215,7 +218,7 @@ function BookingsContent({ status }: BookingsProps) {
       columnHelper.accessor((row) => row.type === "data" && row.booking.user?.id, {
         id: "userId",
         header: t("member"),
-        enableColumnFilter: user?.isTeamAdminOrOwner ?? false,
+        enableColumnFilter: permissions.canReadOthersBookings,
         enableSorting: false,
         cell: () => null,
         meta: {
@@ -314,7 +317,7 @@ function BookingsContent({ status }: BookingsProps) {
         },
       }),
     ];
-  }, [user, status, t]);
+  }, [user, status, t, permissions.canReadOthersBookings]);
 
   const isEmpty = useMemo(() => !query.data?.bookings.length, [query.data]);
 
@@ -352,7 +355,7 @@ function BookingsContent({ status }: BookingsProps) {
         isToday: false,
       })) || []
     );
-  }, [query.data]);
+  }, [query.data, status, user?.timeZone]);
 
   const bookingsToday = useMemo<RowData[]>(() => {
     return (
@@ -371,7 +374,7 @@ function BookingsContent({ status }: BookingsProps) {
           isToday: true,
         })) ?? []
     );
-  }, [query.data]);
+  }, [query.data, user?.timeZone]);
 
   const finalData = useMemo<RowData[]>(() => {
     if (status !== "upcoming") {

apps/web/playwright/booking-filters.e2e.ts

@@ -0,0 +1,51 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Booking Filters", () => {
+  test("Member role should not see the member filter", async ({ page, users }) => {
+    const teamMateName = "team mate 1";
+    await users.create(undefined, {
+      hasTeam: true,
+      isOrg: true,
+      teammates: [{ name: teamMateName }],
+    });
+
+    const allUsers = await users.get();
+    const memberUser = allUsers.find((user) => user.name === teamMateName);
+
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (!memberUser) {
+      throw new Error("user should exist");
+    }
+
+    await memberUser.apiLogin();
+    const bookingsGetResponse = page.waitForResponse((response) =>
+      /\/api\/trpc\/bookings\/get.*/.test(response.url())
+    );
+    await page.goto(`/bookings/upcoming`, { waitUntil: "domcontentloaded" });
+    await bookingsGetResponse;
+    await page.locator('[data-testid="add-filter-button"]').click();
+    await expect(page.locator('[data-testid="add-filter-item-userId"]')).toBeHidden();
+  });
+
+  test("Admin role should see the member filter", async ({ page, users }) => {
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isOrg: true,
+    });
+
+    await owner.apiLogin();
+    const bookingsGetResponse = page.waitForResponse((response) =>
+      /\/api\/trpc\/bookings\/get.*/.test(response.url())
+    );
+    await page.goto(`/bookings/upcoming`, { waitUntil: "domcontentloaded" });
+    await bookingsGetResponse;
+    await page.locator('[data-testid="add-filter-button"]').click();
+    await expect(page.locator('[data-testid="add-filter-item-userId"]')).toBeVisible();
+  });
+});