fix: Ignore userIds form filter segment if no permission (calcom#24194)

* Update get.handler.ts

* fix: Ignore userIds form filter segment if no permission

* add tests

* Update booking-filters.e2e.ts

* Update booking-filters.e2e.ts

Author: anikdhabal

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

@@ -8,6 +8,8 @@ import { useMemo } from "react";
 import dayjs from "@calcom/dayjs";
 import {
   DataTableProvider,
+  DataTableFilters,
+  DataTableSegment,
   type SystemFilterSegment,
   useDataTable,
   ColumnFilterType,
@@ -403,10 +405,25 @@ function BookingsContent({ status, permissions, isCalendarViewEnabled }: Booking
       </div>
       <main className="w-full">
         <div className="flex w-full flex-col">
-          {query.status === "error" && (
-            <Alert severity="error" title={t("something_went_wrong")} message={query.error.message} />
-          )}
-          {query.status !== "error" && (
+          {query.status === "error" ? (
+            <>
+              <div className="grid w-full items-center gap-2 pb-4">
+                <div className="flex w-full flex-col gap-2">
+                  <div className="flex w-full flex-wrap justify-between gap-2">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <DataTableFilters.FilterBar table={table} />
+                    </div>
+                    <div className="flex flex-wrap items-center gap-2">
+                      <DataTableFilters.ClearFiltersButton />
+                      <DataTableSegment.SaveButton />
+                      <DataTableSegment.Select />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <Alert severity="error" title={t("something_went_wrong")} message={query.error.message} />
+            </>
+          ) : (
             <>
               {!!bookingsToday.length && status === "upcoming" && (
                 <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />

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

@@ -2,6 +2,7 @@ import { expect } from "@playwright/test";
 
 import { applySelectFilter } from "./filter-helpers";
 import { test } from "./lib/fixtures";
+import { MembershipRole } from "@calcom/prisma/enums";
 
 test.describe.configure({ mode: "parallel" });
 
@@ -228,4 +229,80 @@ test.describe("Booking Filters", () => {
     const eventTypeSearchParams = new URL(page.url()).searchParams;
     expect(eventTypeSearchParams.get("activeFilters")).toBeFalsy();
   });
+  
+  test("Filter segments with removed team members should not cause stuck UI", async ({
+    page,
+    users,
+    prisma,
+  }) => {
+    const teamOwner = await users.create(undefined, {
+      hasTeam: true,
+      teamRole: MembershipRole.OWNER,
+    });
+    const secondUser = await users.create({ name: "Second" });
+    const thirdUser = await users.create({ name: "Third" });
+    const { team } = await teamOwner.getFirstTeamMembership();
+    // Add teammates to the team
+    await prisma.membership.createMany({
+      data: [
+        {
+          teamId: team.id,
+          userId: secondUser.id,
+          role: MembershipRole.MEMBER,
+          accepted: true,
+        },
+        {
+          teamId: team.id,
+          userId: thirdUser.id,
+          role: MembershipRole.MEMBER,
+          accepted: true,
+        },
+      ],
+    });
+
+    await teamOwner.apiLogin();
+
+    const bookingsGetResponse = page.waitForResponse((response) =>
+      /\/api\/trpc\/bookings\/get.*/.test(response.url())
+    );
+
+    await page.goto(`/bookings/upcoming`);
+
+    await bookingsGetResponse;
+
+    await test.step("Create filter segment with team member userIds", async () => {
+      await page.getByTestId("add-filter-button").click();
+      await page.getByTestId("add-filter-item-userId").click();
+
+      await page.getByTestId(`select-filter-options-userId`).getByRole("option", { name: "Second" }).click();
+      await page.getByTestId(`select-filter-options-userId`).getByRole("option", { name: "Third" }).click();
+      await page.keyboard.press("Escape");
+
+      const segmentName = "Team Members Filter";
+      await page.getByTestId("save-filter-segment-button").click();
+      await page.getByTestId("save-filter-segment-name").fill(segmentName);
+      await page.getByTestId("save-filter-segment-dialog").getByRole("button", { name: "Save" }).click();
+      await expect(page.getByText("Filter segment saved")).toBeVisible();
+    });
+
+    await test.step("Remove one team member from team", async () => {
+      await prisma.membership.delete({
+        where: {
+          userId_teamId: {
+            userId: secondUser.id,
+            teamId: team.id,
+          },
+        },
+      });
+    });
+
+    await test.step("Verify filter segment still works and UI is not stuck", async () => {
+      await page.reload();
+      await page.waitForLoadState("domcontentloaded");
+
+      await expect(page.getByTestId("add-filter-button")).toBeVisible();
+
+      await expect(page.getByText("You do not have permissions")).toBeHidden();
+    });
+  });
 });