feat: hide member filter for users with only MEMBER role (calcom#23097)

- Conditionally disable userId column filter based on isTeamAdminOrOwner flag
- Prevents MEMBER-only users from encountering backend permission errors
- Users with ADMIN/OWNER role in any team can still access the filter

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

Author: 3 people

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

@@ -180,7 +180,7 @@ function BookingsContent({ status }: BookingsProps) {
       columnHelper.accessor((row) => row.type === "data" && row.booking.user?.id, {
         id: "userId",
         header: t("member"),
-        enableColumnFilter: true,
+        enableColumnFilter: user?.isTeamAdminOrOwner ?? false,
         enableSorting: false,
         cell: () => null,
         meta: {

apps/web/playwright/bookings-list.e2e.ts

@@ -479,7 +479,6 @@ test.describe("Bookings", () => {
     const filterItemsConfig = [
       { key: "eventTypeId", name: "Event Type", testId: "add-filter-item-eventTypeId" },
       { key: "teamId", name: "Team", testId: "add-filter-item-teamId" },
-      { key: "userId", name: "Member", testId: "add-filter-item-userId" },
       { key: "attendeeName", name: "Attendees Name", testId: "add-filter-item-attendeeName" },
       { key: "attendeeEmail", name: "Attendee Email", testId: "add-filter-item-attendeeEmail" },
       { key: "dateRange", name: "Date Range", testId: "add-filter-item-dateRange" },
@@ -488,8 +487,16 @@ test.describe("Bookings", () => {
 
     const getFilterItemLocator = (page: Page, testId: string) => page.locator(`[data-testid="${testId}"]`);
 
-    test.beforeEach(async ({ page, users }) => {
-      const user = await users.create();
+    const setup = async ({
+      isAdmin,
+      page,
+      users,
+    }: {
+      isAdmin: boolean;
+      page: Page;
+      users: Fixtures["users"];
+    }) => {
+      const user = isAdmin ? await users.create(undefined, { hasTeam: true }) : await users.create();
       await user.apiLogin();
       const bookingsGetResponse = page.waitForResponse((response) =>
         /\/api\/trpc\/bookings\/get.*/.test(response.url())
@@ -498,9 +505,10 @@ test.describe("Bookings", () => {
       await bookingsGetResponse;
       await page.locator('[data-testid="add-filter-button"]').click();
       await expect(page.locator(searchInputSelector)).toBeVisible();
-    });
+    };
 
-    test("should show all filter items initially and after clearing search", async ({ page }) => {
+    test("should show all filter items initially and after clearing search", async ({ page, users }) => {
+      await setup({ isAdmin: false, page, users });
       const searchInput = page.locator(searchInputSelector);
 
       // Initial check: all defined filter items should be visible
@@ -524,7 +532,18 @@ test.describe("Bookings", () => {
       }
     });
 
-    test("search should be case-insensitive", async ({ page }) => {
+    test("should show admin-only filter", async ({ page, users }) => {
+      await setup({ isAdmin: true, page, users });
+
+      await expect(
+        getFilterItemLocator(page, "add-filter-item-userId"),
+        `Item "Member" should be visible initially`
+      ).toBeVisible();
+    });
+
+    test("search should be case-insensitive", async ({ page, users }) => {
+      await setup({ isAdmin: true, page, users });
+
       const searchInput = page.locator(searchInputSelector);
 
       // Search for "member" (lowercase)
@@ -534,7 +553,8 @@ test.describe("Bookings", () => {
       await expect(getFilterItemLocator(page, "add-filter-item-teamId")).toBeHidden();
     });
 
-    test("should individually find each filter item by its full name", async ({ page }) => {
+    test("should individually find each filter item by its full name", async ({ page, users }) => {
+      await setup({ isAdmin: false, page, users });
       const searchInput = page.locator(searchInputSelector);
 
       for (const targetItem of filterItemsConfig) {
@@ -550,7 +570,8 @@ test.describe("Bookings", () => {
       }
     });
 
-    test("should show no items for a non-matching search term", async ({ page }) => {
+    test("should show no items for a non-matching search term", async ({ page, users }) => {
+      await setup({ isAdmin: false, page, users });
       const searchInput = page.locator(searchInputSelector);
       const nonExistentTerm = "NonExistentFilterXYZ123";
       await searchInput.fill(nonExistentTerm);